topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2026-04-19 13:04:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. (#404)

Browse Source 
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab.
[improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions.
[improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager.

* [improvement][semantic-fe] Add time granularity setting in the data source configuration.

* [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility

* [improvement][semantic-fe] Modification of data source creation prompt wording"

* [improvement][semantic-fe] metric market experience optimization

* [improvement][semantic-fe] enhance the analysis of metric trends

* [improvement][semantic-fe] optimize the presentation of metric trend permissions

* [improvement][semantic-fe] add metric trend download functionality

* [improvement][semantic-fe] fix the dimension initialization issue in metric correlation

* [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source.

* [improvement][semantic-fe] Optimizing pagination logic and some CSS styles

* [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum"

* [improvement][semantic-fe] Fixing the default value setting for the indicator list

* [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models

* [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API

* [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators

* [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality

* [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component.
This commit is contained in:
tristanliu
2023-11-20 12:04:08 +08:00
committed by GitHub
parent 0143b0a1b2
commit 80ad75503b
84 changed files with 9472 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Detail.tsx
View File

@@ -15,6 +15,7 @@ import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTr
import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
import type { TabsProps } from 'antd';
import { ISemantic } from '../data';
import MetricStar from './components/MetricStar';
const { Content } = Layout;
type Props = {
@@ -31,20 +32,6 @@ interface DescriptionItemProps {
icon: ReactNode;
}
// type InfoListItemChildrenItem = {
// label: string;
// value: string;
// content?: ReactNode;
// hideItem?: boolean;
// };
// type InfoListItem = {
// title: string;
// hideItem?: boolean;
// render?: () => ReactNode;
// children?: InfoListItemChildrenItem[];
// };
const DescriptionItem = ({ title, content, icon }: DescriptionItemProps) => (
<Tooltip title={title}>
<div style={{ width: 'max-content', fontSize: 14, color: '#546174' }}>
@@ -59,10 +46,7 @@ const DescriptionItem = ({ title, content, icon }: DescriptionItemProps) => (
const MetricDetail: React.FC<Props> = ({ domainManger }) => {
const params: any = useParams();
const metricId = params.metricId;
// const bizName = params.bizName;
// const [infoList, setInfoList] = useState<InfoListItem[]>([]);
// const { selectModelName } = domainManger;
const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
useEffect(() => {
queryMetricData(metricId);
@@ -77,112 +61,20 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
message.error(msg);
};
// useEffect(() => {
// if (!metircData) {
// return;
// }
// const {
// alias,
// bizName,
// createdBy,
// createdAt,
// updatedAt,
// description,
// sensitiveLevel,
// modelName,
// } = metircData;
// const list = [
// {
// title: '基本信息',
// children: [
// {
// label: '字段名称',
// value: bizName,
// },
// {
// label: '别名',
// hideItem: !alias,
// value: alias || '-',
// },
// {
// label: '所属模型',
// value: modelName,
// content: <Tag>{modelName || selectModelName}</Tag>,
// },
// {
// label: '描述',
// value: description,
// },
// ],
// },
// {
// title: '应用信息',
// children: [
// {
// label: '敏感度',
// value: SENSITIVE_LEVEL_ENUM[sensitiveLevel],
// },
// ],
// },
// // {
// // title: '指标趋势',
// // render: () => (
// // <Row key={`metricTrendSection`} style={{ marginBottom: 10, display: 'flex' }}>
// // <Col span={24}>
// // <MetricTrendSection nodeData={metircData} />
// // </Col>
// // </Row>
// // ),
// // },
// {
// title: '创建信息',
// children: [
// {
// label: '创建人',
// value: createdBy,
// },
// {
// label: '创建时间',
// value: createdAt ? moment(createdAt).format('YYYY-MM-DD HH:mm:ss') : '',
// },
// {
// label: '更新时间',
// value: updatedAt ? moment(updatedAt).format('YYYY-MM-DD HH:mm:ss') : '',
// },
// ],
// },
// ];
// setInfoList(list);
// }, [metircData]);
const tabItems: TabsProps['items'] = [
{
key: 'metricTrend',
label: '图表',
children: <MetricTrendSection metircData={metircData} />,
},
// {
// key: '2',
// label: 'Tab 2',
// children: 'Content of Tab Pane 2',
// },
];
const contentStyle: React.CSSProperties = {
minHeight: 120,
color: '#fff',
// marginRight: 15,
backgroundColor: '#fff',
};
// const siderStyle: React.CSSProperties = {
// width: '300px',
// backgroundColor: '#fff',
// };
return (
<Layout className={styles.metricDetail}>
<Layout>
@@ -200,20 +92,21 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
<div className={styles.navContainer}>
<Space>
<MetricStar metricId={metricId} initState={metircData?.isCollect} />
<span style={{ color: '#296DF3' }}>
{metircData?.name}
{metircData?.alias && `[${metircData.alias}]`}
</span>
{metircData?.name && (
<>
<span style={{ position: 'relative', top: '-2px' }}> | </span>
<span style={{ position: 'relative', top: '-2px', color: '#c3c3c3' }}>|</span>
<span style={{ fontSize: 16, color: '#296DF3' }}>{metircData?.bizName}</span>
</>
)}
{metircData?.sensitiveLevel !== undefined && (
<span style={{ position: 'relative', top: '-2px' }}>
<Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}敏感度
{SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
</Tag>
</span>
)}
@@ -235,19 +128,6 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
<div className={styles.titleRight}>
{metircData?.createdBy ? (
<>
{/* <div className={styles.info}>
<DescriptionItem
title="所属模型"
icon={<UserOutlined />}
content={metircData?.modelName}
/>
<DescriptionItem
title="更新时间"
icon={<CalendarOutlined />}
content={metircData?.description}
/>
</div> */}
<div className={styles.info}>
<DescriptionItem
title="创建人"
@@ -272,41 +152,6 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
</div>
</Content>
</Layout>
{/* <Sider style={siderStyle} width={400}>
<>
<div key={metircData?.id} className={styles.metricInfoContent}>
{infoList.map((item) => {
const { children, title, render } = item;
return (
<div key={title} style={{ display: item.hideItem ? 'none' : 'block' }}>
<p className={styles.title}>{title}</p>
{render?.() ||
(Array.isArray(children) &&
children.map((childrenItem) => {
return (
<Row
key={`${childrenItem.label}-${childrenItem.value}`}
style={{
marginBottom: 10,
display: childrenItem.hideItem ? 'none' : 'flex',
}}
>
<Col span={24}>
<DescriptionItem
title={childrenItem.label}
content={childrenItem.content || childrenItem.value}
/>
</Col>
</Row>
);
}))}
<Divider />
</div>
);
})}
</div>
</>
</Sider> */}
</Layout>
);
};

174
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
View File

@@ -1,17 +1,6 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
message,
Space,
Popconfirm,
Tag,
Spin,
Dropdown,
DatePicker,
Popover,
Button,
Radio,
} from 'antd';
import { message, Space, Popconfirm, Tag, Spin, Tooltip } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import type { Dispatch } from 'umi';
import { connect, history, useModel } from 'umi';
@@ -28,23 +17,17 @@ import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
import MetricCardList from './components/MetricCardList';
import NodeInfoDrawer from '../SemanticGraph/components/NodeInfoDrawer';
import { SemanticNodeType, StatusEnum } from '../enum';
import moment, { Moment } from 'moment';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
import {
PlaySquareOutlined,
StopOutlined,
CloudDownloadOutlined,
DeleteOutlined,
} from '@ant-design/icons';
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
import MetricStar from './components/MetricStar';
type Props = {
dispatch: Dispatch;
domainManger: StateType;
};
const { RangePicker } = DatePicker;
type QueryMetricListParams = {
id?: string;
name?: string;
@@ -58,7 +41,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { initialState = {} } = useModel('@@initialState');
const { currentUser = {} } = initialState as any;
const { selectDomainId, selectModelId: modelId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const defaultPagination = {
@@ -75,10 +57,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
showType: localStorage.getItem('metricMarketShowType') === '1' ? true : false,
});
const [infoDrawerVisible, setInfoDrawerVisible] = useState<boolean>(false);
const [popoverOpenState, setPopoverOpenState] = useState<boolean>(false);
const [pickerType, setPickerType] = useState<string>('day');
const dateRangeRef = useRef<any>([]);
const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
@@ -152,7 +131,11 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}
};
const downloadMetricQuery = async (ids: React.Key[], dateStringList: string[]) => {
const downloadMetricQuery = async (
ids: React.Key[],
dateStringList: string[],
pickerType: string,
) => {
if (Array.isArray(ids) && ids.length > 0) {
setDownloadLoading(true);
const [startDate, endDate] = dateStringList;
@@ -166,7 +149,6 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
},
});
setDownloadLoading(false);
setPopoverOpenState(false);
}
};
@@ -184,14 +166,18 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
dataIndex: 'name',
title: '指标名称',
render: (_, record: any) => {
const { id, isCollect } = record;
return (
<a
onClick={() => {
history.push(`/metric/detail/${record.id}`);
}}
>
{record.name}
</a>
<Space>
<MetricStar metricId={id} initState={isCollect} />
<a
onClick={() => {
history.push(`/metric/detail/${record.id}`);
}}
>
{record.name}
</a>
</Space>
);
},
},
@@ -343,43 +329,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}),
};
const dropdownButtonItems: any[] = [
{
key: 'batchStart',
label: '批量启用',
icon: <PlaySquareOutlined />,
},
{
key: 'batchStop',
label: '批量停用',
icon: <StopOutlined />,
},
{
key: 'batchDownload',
// label: '批量下载',
label: <a>批量下载</a>,
icon: <CloudDownloadOutlined />,
},
{
type: 'divider',
},
{
key: 'batchDelete',
label: (
<Popconfirm
title="确定批量删除吗？"
onConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<a>批量删除</a>
</Popconfirm>
),
icon: <DeleteOutlined />,
},
];
const onMenuClick = ({ key }: { key: string }) => {
const onMenuClick = (key: string) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
@@ -387,69 +337,11 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
case 'batchDownload':
setPopoverOpenState(true);
default:
break;
}
};
const popoverConfig = {
title: '选择下载区间',
content: (
<Space direction="vertical">
<Radio.Group
size="small"
value={pickerType}
onChange={(e) => {
setPickerType(e.target.value);
}}
>
<Radio.Button value="day">按日</Radio.Button>
<Radio.Button value="week">按周</Radio.Button>
<Radio.Button value="month">按月</Radio.Button>
</Radio.Group>
<RangePicker
style={{ paddingBottom: 5 }}
onChange={(date) => {
dateRangeRef.current = date;
return;
}}
picker={pickerType as any}
allowClear={true}
/>
<div style={{ marginTop: 20 }}>
<Space>
<Button
type="primary"
loading={downloadLoading}
onClick={() => {
const [startMoment, endMoment] = dateRangeRef.current;
let searchDateRange = [
startMoment?.format('YYYY-MM-DD'),
endMoment?.format('YYYY-MM-DD'),
];
if (pickerType === 'week') {
searchDateRange = [
startMoment?.startOf('isoWeek').format('YYYY-MM-DD'),
endMoment?.startOf('isoWeek').format('YYYY-MM-DD'),
];
}
if (pickerType === 'month') {
searchDateRange = [
startMoment?.startOf('month').format('YYYY-MM-DD'),
endMoment?.startOf('month').format('YYYY-MM-DD'),
];
}
downloadMetricQuery(selectedRowKeys, searchDateRange);
}}
>
下载
</Button>
</Space>
</div>
</Space>
),
};
return (
<>
<div className={styles.metricFilterWrapper}>
@@ -499,21 +391,17 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
...rowSelection,
}}
toolBarRender={() => [
<Popover
content={popoverConfig?.content}
title={popoverConfig?.title}
trigger="click"
<BatchCtrlDropDownButton
key="ctrlBtnList"
open={popoverOpenState}
placement="bottomLeft"
onOpenChange={(open: boolean) => {
setPopoverOpenState(open);
downloadLoading={downloadLoading}
onDeleteConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<Dropdown.Button menu={{ items: dropdownButtonItems, onClick: onMenuClick }}>
批量操作
</Dropdown.Button>
</Popover>,
onMenuClick={onMenuClick}
onDownloadDateRangeChange={(searchDateRange, pickerType) => {
downloadMetricQuery(selectedRowKeys, searchDateRange, pickerType);
}}
/>,
]}
loading={loading}
onChange={(data: any) => {

38
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricStar.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { Tooltip, message } from 'antd';
import React, { useState } from 'react';
import { metricStarState } from '../../service';
import MStar from '@/components/MStar';
type Props = {
metricId: number;
initState?: boolean;
onChange?: (state: boolean) => void;
};
const MetricStar: React.FC<Props> = ({ metricId, initState = false }) => {
const [star, setStar] = useState<boolean>(initState);
const starStateChange = async (id: number, state: boolean) => {
const { code, msg } = await metricStarState({ id, state });
if (code === 200) {
setStar(state);
} else {
message.error(msg);
}
};
return (
<Tooltip title={`${star ? '取消' : '加入'}收藏`}>
<div>
<MStar
star={star}
onToggleCollect={(star: boolean) => {
starStateChange(metricId, star);
}}
/>
</div>
</Tooltip>
);
};
export default MetricStar;

3
webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/style.less
View File

@@ -120,7 +120,8 @@
height: calc(100vh - 50px);
.title {
margin-bottom: 0;
// padding: 20px;
margin-top:0;
background-color: #fff;
font-size: 20px;
line-height: 34px;
border-bottom: 1px solid #d9d9d9;