topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-17 16:02:14 +00: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

10
webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceBasicForm.tsx
View File

@@ -1,7 +1,8 @@
import React, { useEffect, useState } from 'react';
import React, { useState } from 'react';
import { Form, Input, Spin, Select, message } from 'antd';
import type { FormInstance } from 'antd/lib/form';
import { getDbNames, getTables } from '../../service';
import SqlEditor from '@/components/SqlEditor';
import { ISemantic } from '../../data';
const FormItem = Form.Item;
@@ -123,6 +124,13 @@ const DataSourceBasicForm: React.FC<Props> = ({ isEdit, databaseConfigList, mode
<FormItem name="description" label="数据源描述">
<TextArea placeholder="请输入数据源描述" />
</FormItem>
{/* <FormItem
name="filterSql"
label="过滤SQL"
tooltip="主要用于词典导入场景, 对维度值进行过滤 格式: field1 = 'xxx' and field2 = 'yyy'"
>
<SqlEditor height={'150px'} />
</FormItem> */}
</Spin>
);
};

49
webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
View File

@@ -24,7 +24,7 @@ export type CreateFormProps = {
basicInfoFormMode?: 'normal' | 'fast';
onDataBaseTableChange?: (tableName: string) => void;
onDataSourceBtnClick?: () => void;
// modalSolt: ReactNode;
onOpenDataSourceEdit?: () => void;
};
const { Step } = Steps;
@@ -45,6 +45,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
databaseId,
basicInfoFormMode,
onDataSourceBtnClick,
onOpenDataSourceEdit,
children,
}) => {
const isEdit = !!dataSourceItem?.id;
@@ -59,7 +60,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
const updateFormVal = (val: any) => {
formValRef.current = val;
};
const [sqlFilter, setSqlFilter] = useState<string>('');
useEffect(() => {
const hasEmpty = fields.some((item) => {
const { name, isCreateDimension, isCreateMetric } = item;
@@ -170,6 +171,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
queryType: basicInfoFormMode === 'fast' ? 'table_query' : 'sql_query',
tableQuery: dbName && tableName ? `${dbName}.${tableName}` : '',
modelId: isEdit ? dataSourceItem.modelId : modelId,
filterSql: sqlFilter,
};
const queryDatasource = isEdit ? updateDatasource : createDatasource;
const { code, msg, data } = await queryDatasource(queryParams);
@@ -221,7 +223,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
const initData = async () => {
const { queryType, tableQuery } = dataSourceItem.datasourceDetail;
let tableQueryInitValue = {};
let columns = fieldColumns;
let columns = fieldColumns || [];
if (queryType === 'table_query') {
const tableQueryString = tableQuery || '';
const [dbName, tableName] = tableQueryString.split('.');
@@ -235,7 +237,8 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
};
const formatterInitData = (columns: any[], extendParams: Record<string, any> = {}) => {
const { id, name, bizName, description, datasourceDetail, databaseId } = dataSourceItem as any;
const { id, name, bizName, description, datasourceDetail, databaseId, filterSql } =
dataSourceItem as any;
const { dimensions, identifiers, measures } = datasourceDetail;
const initValue = {
id,
@@ -243,6 +246,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
bizName,
description,
databaseId,
filterSql,
...extendParams,
// ...tableQueryInitValue,
};
@@ -250,6 +254,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
...formValRef.current,
...initValue,
};
setSqlFilter(filterSql);
updateFormVal(editInitFormVal);
form.setFieldsValue(initValue);
const formatFields = [
@@ -261,10 +266,24 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
};
useEffect(() => {
if (isEdit) {
initData();
} else {
initFields([], fieldColumns);
const { queryType } = dataSourceItem?.datasourceDetail || {};
if (queryType === 'table_query') {
if (isEdit) {
initData();
} else {
initFields([], fieldColumns);
}
}
}, [dataSourceItem]);
useEffect(() => {
const { queryType } = dataSourceItem?.datasourceDetail || {};
if (queryType !== 'table_query') {
if (isEdit) {
initData();
} else {
initFields([], fieldColumns);
}
}
}, [dataSourceItem, fieldColumns]);
@@ -306,7 +325,14 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
return (
<>
<div style={{ display: currentStep === 1 ? 'block' : 'none' }}>
<FieldForm fields={fields} onFieldChange={handleFieldChange} />
<FieldForm
fields={fields}
onFieldChange={handleFieldChange}
onSqlChange={(sql) => {
setSqlFilter(sql);
}}
sql={sqlFilter}
/>
</div>
<div style={{ display: currentStep !== 1 ? 'block' : 'none' }}>
<DataSourceBasicForm
@@ -357,6 +383,9 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
type="primary"
onClick={() => {
handleNext();
if (!isEdit && Array.isArray(fields) && fields.length === 0) {
onOpenDataSourceEdit?.();
}
}}
>
下一步
@@ -381,7 +410,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
<Modal
forceRender
width={1300}
bodyStyle={{ padding: '32px 40px 48px' }}
styles={{ padding: '32px 40px 48px' }}
destroyOnClose
title={`${isEdit ? '编辑' : '新建'}数据源`}
maskClosable={false}

18
webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react';
import { Table, Select, Checkbox, Input, Alert, Space, Tooltip } from 'antd';
import { Table, Select, Checkbox, Input, Alert, Space, Tooltip, Form } from 'antd';
import TableTitleTooltips from '../../components/TableTitleTooltips';
import { isUndefined } from 'lodash';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import Marquee from 'react-fast-marquee';
import SqlEditor from '@/components/SqlEditor';
import {
TYPE_OPTIONS,
DATE_FORMATTER,
@@ -24,7 +24,11 @@ type FieldItem = {
timeGranularity?: string;
};
const FormItem = Form.Item;
type Props = {
onSqlChange: (sql: string) => void;
sql: string;
fields: FieldItem[];
onFieldChange: (fieldName: string, data: Partial<FieldItem>) => void;
};
@@ -41,7 +45,7 @@ const getCreateFieldName = (type: EnumDataSourceType) => {
// const editState = !isUndefined(record[isCreateName]) ? !!record[isCreateName] : true;
};
const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
const FieldForm: React.FC<Props> = ({ fields, sql, onFieldChange, onSqlChange }) => {
const handleFieldChange = (record: FieldItem, fieldName: string, value: any) => {
onFieldChange(record.bizName, {
...record,
@@ -271,6 +275,14 @@ const FieldForm: React.FC<Props> = ({ fields, onFieldChange }) => {
pagination={false}
scroll={{ y: 500 }}
/>
<FormItem
style={{ marginTop: 40, marginBottom: 60 }}
name="filterSql"
label={<span style={{ fontSize: 14 }}>过滤SQL</span>}
tooltip="主要用于词典导入场景, 对维度值进行过滤 格式: field1 = 'xxx' and field2 = 'yyy'"
>
<SqlEditor height={'150px'} value={sql} onChange={onSqlChange} />
</FormItem>
</>
);
};

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;

4
webapp/packages/supersonic-fe/src/pages/SemanticModel/OverviewContainer.tsx
View File

@@ -203,7 +203,7 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
<Helmet title={'语义模型-超音数'} />
<div className={styles.projectManger}>
<div className={styles.sider}>
<div className={styles.domainTitle}>
{/* <div className={styles.domainTitle}>
<Space>
{selectDomainName ? `${selectDomainName}` : '主题域信息'}
{selectModelName && (
@@ -213,7 +213,7 @@ const OverviewContainer: React.FC<Props> = ({ mode, domainManger, dispatch }) =>
</>
)}
</Space>
</div>
</div> */}
<DomainListTree
createDomainBtnVisible={mode === 'domain' ? true : false}
onTreeSelected={(domainData) => {

7
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
View File

@@ -118,7 +118,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
cover={
<CoffeeOutlined
width={240}
style={{ paddingTop: '45px', height: 120, fontSize: '48px', color: '#1890ff' }}
style={{ paddingTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
/>
}
>
@@ -137,7 +137,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
style={{ height: 220 }}
cover={
<ConsoleSqlOutlined
style={{ paddingTop: '45px', height: 120, fontSize: '48px', color: '#1890ff' }}
style={{ paddingTop: '45px', height: 75, fontSize: '48px', color: '#1890ff' }}
/>
}
>
@@ -185,6 +185,9 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
onDataSourceBtnClick={() => {
setDataSourceEditOpen(true);
}}
onOpenDataSourceEdit={() => {
setDataSourceEditOpen(true);
}}
>
<Drawer
width={'100%'}

15
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
View File

@@ -18,6 +18,7 @@ import DimensionValueSettingModal from './DimensionValueSettingModal';
import { updateDimension } from '../service';
import { ISemantic, IDataSource } from '../data';
import moment from 'moment';
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
import styles from './style.less';
type Props = {
@@ -328,7 +329,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
},
];
const onMenuClick = ({ key }: { key: string }) => {
const onMenuClick = (key: string) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
@@ -386,12 +387,14 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
>
创建维度
</Button>,
<Dropdown.Button
<BatchCtrlDropDownButton
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
onDeleteConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
hiddenList={['batchDownload']}
onMenuClick={onMenuClick}
/>,
]}
/>

88
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx
View File

@@ -1,16 +1,21 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input, Tag, Dropdown } from 'antd';
import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
import React, { useRef, useState } from 'react';
import type { Dispatch } from 'umi';
import { StatusEnum } from '../enum';
import { connect } from 'umi';
import type { StateType } from '../model';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { queryMetric, deleteMetric, updateExprMetric, batchUpdateMetricStatus } from '../service';
import {
queryMetric,
deleteMetric,
batchUpdateMetricStatus,
batchDownloadMetric,
} from '../service';
import MetricInfoCreateForm from './MetricInfoCreateForm';
import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
@@ -32,20 +37,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
});
const actionRef = useRef<ActionType>();
const updateStatus = async (data: ISemantic.IMetricItem) => {
const { code, msg } = await updateExprMetric(data);
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
@@ -268,31 +260,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
},
};
const dropdownButtonItems = [
{
key: 'batchStart',
label: '批量启用',
},
{
key: 'batchStop',
label: '批量停用',
},
{
key: 'batchDelete',
label: (
<Popconfirm
title="确定批量删除吗？"
onConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
>
<a>批量删除</a>
</Popconfirm>
),
},
];
const onMenuClick = ({ key }: { key: string }) => {
const onMenuClick = (key: string) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
@@ -305,6 +273,27 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}
};
const downloadMetricQuery = async (
ids: React.Key[],
dateStringList: string[],
pickerType: string,
) => {
if (Array.isArray(ids) && ids.length > 0) {
setDownloadLoading(true);
const [startDate, endDate] = dateStringList;
await batchDownloadMetric({
metricIds: ids,
dateInfo: {
dateMode: 'BETWEEN',
startDate,
endDate,
period: pickerType.toUpperCase(),
},
});
setDownloadLoading(false);
}
};
return (
<>
<ProTable
@@ -350,12 +339,17 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
>
创建指标
</Button>,
<Dropdown.Button
<BatchCtrlDropDownButton
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
downloadLoading={downloadLoading}
onDeleteConfirm={() => {
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.DELETED);
}}
onMenuClick={onMenuClick}
onDownloadDateRangeChange={(searchDateRange, pickerType) => {
downloadMetricQuery(selectedRowKeys, searchDateRange, pickerType);
}}
/>,
]}
/>
{createModalVisible && (

61
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainList.tsx
View File

@@ -179,32 +179,33 @@ const DomainListTree: FC<DomainListProps> = ({
return (
<div className={styles.domainList}>
<Row>
<Col flex="1 1 auto">
{/* <Space> */}
<Search
allowClear
className={styles.search}
placeholder="请输入主题域名称进行查询"
onSearch={onSearch}
/>
{/* </Space> */}
</Col>
{createDomainBtnVisible && (
<Col flex="0 0 40px" style={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title="新增顶级域">
<Button
type="primary"
icon={<PlusOutlined />}
size="small"
onClick={() => {
setProjectInfoParams({ type: 'top', modelType: 'add' });
setProjectInfoModalVisible(true);
onCreateDomainBtnClick?.();
}}
/>
</Tooltip>
{/* <Tooltip title="新增顶级域">
<div className={styles.searchContainer}>
<Row>
<Col flex="1 1 auto">
{/* <Space> */}
<Search
allowClear
className={styles.search}
placeholder="请输入主题域名称进行查询"
onSearch={onSearch}
/>
{/* </Space> */}
</Col>
{createDomainBtnVisible && (
<Col flex="0 0 40px" style={{ display: 'flex', alignItems: 'center' }}>
<Tooltip title="新增顶级域">
<Button
type="primary"
icon={<PlusOutlined />}
size="small"
onClick={() => {
setProjectInfoParams({ type: 'top', modelType: 'add' });
setProjectInfoModalVisible(true);
onCreateDomainBtnClick?.();
}}
/>
</Tooltip>
{/* <Tooltip title="新增顶级域">
<PlusCircleOutlined
onClick={() => {
setProjectInfoParams({ type: 'top', modelType: 'add' });
@@ -214,10 +215,10 @@ const DomainListTree: FC<DomainListProps> = ({
className={styles.addBtn}
/>
</Tooltip> */}
</Col>
)}
</Row>
</Col>
)}
</Row>
</div>
<Tree
expandedKeys={expandedKeys}
onExpand={handleExpand}

75
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DomainManagerTab.tsx
View File

@@ -1,6 +1,6 @@
import { Tabs, Button } from 'antd';
import { Tabs, Breadcrumb, Space } from 'antd';
import React from 'react';
import { connect } from 'umi';
import { connect, history } from 'umi';
import ClassDataSourceTable from './ClassDataSourceTable';
import ClassDimensionTable from './ClassDimensionTable';
@@ -11,7 +11,7 @@ import ChatSettingSection from '../ChatSetting/ChatSettingSection';
import OverView from './OverView';
import styles from './style.less';
import type { StateType } from '../model';
import { LeftOutlined } from '@ant-design/icons';
import { HomeOutlined, FundViewOutlined } from '@ant-design/icons';
import { ISemantic } from '../data';
import SemanticGraphCanvas from '../SemanticGraphCanvas';
import RecommendedQuestionsSection from '../components/Entity/RecommendedQuestionsSection';
@@ -39,7 +39,9 @@ const DomainManagerTab: React.FC<Props> = ({
onMenuChange,
}) => {
const defaultTabKey = 'xflow';
const { selectDomainId, domainList, selectModelId } = domainManger;
const { selectDomainId, domainList, selectModelId, selectModelName, selectDomainName } =
domainManger;
const tabItem = [
{
label: '模型管理',
@@ -126,40 +128,49 @@ const DomainManagerTab: React.FC<Props> = ({
return (
<>
<Breadcrumb
className={styles.breadcrumb}
separator=""
items={[
{
path: `/webapp/model/${selectDomainId}/0/overview`,
title: (
<Space
onClick={() => {
onBackDomainBtnClick?.();
}}
style={selectModelName ? {} : { color: '#296df3', fontWeight: 'bold' }}
>
<HomeOutlined />
<span>{selectDomainName}</span>
</Space>
),
},
{
type: 'separator',
separator: selectModelName ? '/' : '',
},
{
title: selectModelName ? (
<Space
onClick={() => {
history.push(`/model/${selectDomainId}/${selectModelId}/`);
}}
style={{ color: '#296df3' }}
>
<FundViewOutlined style={{ position: 'relative', top: '2px' }} />
<span>{selectModelName}</span>
</Space>
) : undefined,
},
]}
/>
<Tabs
className={styles.tab}
items={!isModel ? tabItem : isModelItem}
activeKey={activeKey || defaultTabKey}
destroyInactiveTabPane
size="large"
tabBarExtraContent={{
left: (
<>
{!!selectModelId && (
<div
className={styles.backBtn}
onClick={() => {
onBackDomainBtnClick?.();
}}
>
<LeftOutlined />
</div>
)}
</>
),
// right: isModel ? (
// <Button
// type="primary"
// icon={<LeftOutlined />}
// onClick={() => {
// onBackDomainBtnClick?.();
// }}
// style={{ marginRight: 10, marginBottom: 5 }}
// >
// 返回主题域
// </Button>
// ) : undefined,
}}
onChange={(menuKey: string) => {
onMenuChange?.(menuKey);
}}

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
View File

@@ -455,7 +455,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
forceRender
width={1300}
style={{ top: 48 }}
bodyStyle={{ padding: '32px 40px 48px' }}
styles={{ padding: '32px 40px 48px' }}
destroyOnClose
title={`${isEdit ? '编辑' : '新建'}指标`}
maskClosable={false}

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelCreateFormModal.tsx
View File

@@ -96,7 +96,7 @@ const ModelCreateFormModal: React.FC<ModelCreateFormModalProps> = (props) => {
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
styles={{ padding: '32px 40px 48px' }}
destroyOnClose
title={'模型信息'}
open={true}

18
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionTable.tsx
View File

@@ -192,24 +192,6 @@ const PermissionTable: React.FC<Props> = ({ domainManger }) => {
>
编辑
</a>
{/* <a
key="dimensionEditBtn"
onClick={() => {
setPermissonData(record);
setDimensionModalVisible(true);
}}
>
维度授权
</a>
<a
key="metricEditBtn"
onClick={() => {
setPermissonData(record);
setMetricModalVisible(true);
}}
>
指标授权
</a> */}
<Popconfirm
title="确认删除？"
okText="是"

2
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ProjectInfoForm.tsx
View File

@@ -62,7 +62,7 @@ const ProjectInfoForm: React.FC<ProjectInfoFormProps> = (props) => {
return (
<Modal
width={640}
bodyStyle={{ padding: '32px 40px 48px' }}
styles={{ padding: '32px 40px 48px' }}
destroyOnClose
title={titleRender()}
open={true}

41
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/style.less
View File

@@ -2,13 +2,12 @@
display: flex;
flex-direction: row;
background-color: #fff;
height: calc(100vh - 48px);
height: calc(100vh - 56px);
.projectManger {
width: 100%;
min-height: calc(100vh - 48px);
// background: #f8f9fb;
min-height: calc(100vh - 56px);
background-color: #fff;
display: flex;
position: relative;
@@ -126,6 +125,8 @@
// }
// }
.tab {
border-top: 1px solid #eee;
margin-top: 10px;
:global {
.ant-tabs-tab-btn {
font-size: 16px;
@@ -186,31 +187,18 @@
.domainList {
display: flex;
flex-direction: column;
// width: 400px;
width: 100%;
overflow: hidden;
.searchContainer {
padding:3px 0;
border-bottom: 1px solid #eee;
}
}
// .user {
// display: grid;
// }
// .search{
// width: 50%;
// margin-bottom: 20px;
// }
// .authBtn{
// cursor: pointer;
// }
.classTable {
:global {
.ant-pro-table-search-query-filter {
// padding-left: 0 !important;
margin-bottom: 0;
}
.ant-pro-table-list-toolbar-container {
@@ -335,4 +323,17 @@
padding: 0;
}
}
}
.breadcrumb{
font-size: 18px;
margin: 20px 0 0 20px;
:global {
.ant-breadcrumb-link {
height: 28px;
}
.anticon {
font-size: 18px;
}
}
}

6
webapp/packages/supersonic-fe/src/pages/SemanticModel/constant.ts
View File

@@ -8,15 +8,15 @@ export enum SENSITIVE_LEVEL {
export const SENSITIVE_LEVEL_OPTIONS = [
{
label: '低',
label: '普通',
value: SENSITIVE_LEVEL.LOW,
},
{
label: '中',
label: '重要',
value: SENSITIVE_LEVEL.MID,
},
{
label: '高',
label: '核心',
value: SENSITIVE_LEVEL.HIGH,
},
];

1
webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts vendored
View File

@@ -202,6 +202,7 @@ export declare namespace ISemantic {
dataFormat: string;
alias: string;
useCnt: number;
isCollect: boolean;
relateDimension?: IRelateDimension;
}

14
webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
View File

@@ -476,3 +476,17 @@ export async function queryStruct({
return response;
}
}
export function metricStarState(data: { id: number; state: boolean }): Promise<any> {
const { id, state } = data;
if (state) {
return request(`${process.env.API_BASE_URL}collect/createCollectionIndicators`, {
method: 'POST',
data: { id },
});
} else {
return request(`${process.env.API_BASE_URL}collect/deleteCollectionIndicators/${id}`, {
method: 'DELETE',
});
}
}