topdog/supersonic
1
0
Fork 0
mirror of https://github.com/tencentmusic/supersonic.git synced 2025-12-16 06:56:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[improvement][semantic-fe] Adding batch operations for indicators/dimensions/models (#313)

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
This commit is contained in:
tristanliu
2023-11-02 06:11:12 -05:00
committed by GitHub
parent 70784598e1
commit 9f813ca1c0
16 changed files with 1232 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,22 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input } from 'antd';
import { message, Button, Space, Popconfirm, Input, Tag, Dropdown } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import type { StateType } from '../model';
import { StatusEnum } from '../enum';
import { SENSITIVE_LEVEL_ENUM } from '../constant';
import { getDatasourceList, getDimensionList, deleteDimension } from '../service';
import {
getDatasourceList,
getDimensionList,
deleteDimension,
batchUpdateDimensionStatus,
} from '../service';
import DimensionInfoModal from './DimensionInfoModal';
import DimensionValueSettingModal from './DimensionValueSettingModal';
import { ISemantic } from '../data';
import { updateDimension } from '../service';
import { ISemantic, IDataSource } from '../data';
import moment from 'moment';
import styles from './style.less';
@@ -22,7 +29,9 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { selectModelId: modelId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
const [dataSourceList, setDataSourceList] = useState<any[]>([]);
const [dataSourceList, setDataSourceList] = useState<IDataSource.IDataSourceItem[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [dimensionValueSettingList, setDimensionValueSettingList] = useState<
ISemantic.IDimensionValueSettingItem[]
>([]);
@@ -37,11 +46,13 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const actionRef = useRef<ActionType>();
const queryDimensionList = async (params: any) => {
setLoading(true);
const { code, data, msg } = await getDimensionList({
...params,
...pagination,
modelId,
});
setLoading(false);
const { list, pageSize, pageNum, total } = data || {};
let resData: any = {};
if (code === 200) {
@@ -80,6 +91,44 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
queryDataSourceList();
}, [modelId]);
const updateDimensionStatus = async (dimensionData: ISemantic.IDimensionItem) => {
const { code, msg } = await updateDimension(dimensionData);
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
setLoading(true);
const { code, msg } = await batchUpdateDimensionStatus({
ids,
status,
});
setLoading(false);
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryDimensionList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const columns: ProColumns[] = [
{
dataIndex: 'id',
@@ -118,7 +167,26 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
width: 80,
valueEnum: SENSITIVE_LEVEL_ENUM,
},
{
dataIndex: 'status',
title: '状态',
width: 80,
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'datasourceName',
title: '数据源名称',
@@ -127,6 +195,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{
dataIndex: 'createdBy',
title: '创建人',
width: 100,
search: false,
},
@@ -139,6 +208,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
{
dataIndex: 'updatedAt',
title: '更新时间',
width: 180,
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
@@ -151,18 +221,20 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
valueType: 'option',
render: (_, record) => {
return (
<Space>
<a
<Space className={styles.ctrlBtnContainer}>
<Button
key="dimensionEditBtn"
type="link"
onClick={() => {
setDimensionItem(record);
setCreateModalVisible(true);
}}
>
编辑
</a>
<a
</Button>
<Button
key="dimensionValueEditBtn"
type="link"
onClick={() => {
setDimensionItem(record);
setDimensionValueSettingModalVisible(true);
@@ -174,7 +246,34 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}}
>
维度值设置
</a>
</Button>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"
key="editStatusOfflineBtn"
onClick={() => {
updateDimensionStatus({
...record,
status: StatusEnum.OFFLINE,
});
}}
>
禁用
</Button>
) : (
<Button
type="link"
key="editStatusOnlineBtn"
onClick={() => {
updateDimensionStatus({
...record,
status: StatusEnum.ONLINE,
});
}}
>
启用
</Button>
)}
<Popconfirm
title="确认删除？"
okText="是"
@@ -189,14 +288,15 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}
}}
>
<a
<Button
type="link"
key="dimensionDeleteEditBtn"
onClick={() => {
setDimensionItem(record);
}}
>
删除
</a>
</Button>
</Popconfirm>
</Space>
);
@@ -204,6 +304,49 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
},
];
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
};
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 }) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
return (
<>
<ProTable
@@ -213,6 +356,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
columns={columns}
request={queryDimensionList}
pagination={pagination}
loading={loading}
search={{
span: 4,
defaultCollapsed: false,
@@ -220,6 +364,10 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
return <></>;
},
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
onChange={(data: any) => {
const { current, pageSize, total } = data;
setPagination({
@@ -244,6 +392,12 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
>
创建维度
</Button>,
<Dropdown.Button
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
]}
/>

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

@@ -1,12 +1,13 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { message, Button, Space, Popconfirm, Input, Tag, Dropdown } 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 } from '../service';
import { queryMetric, deleteMetric, updateExprMetric, batchUpdateMetricStatus } from '../service';
import MetricInfoCreateForm from './MetricInfoCreateForm';
@@ -23,6 +24,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
const { selectModelId: modelId, selectDomainId } = domainManger;
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [pagination, setPagination] = useState({
current: 1,
pageSize: 20,
@@ -30,6 +32,42 @@ 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 queryBatchUpdateStatus = async (ids: React.Key[], status: StatusEnum) => {
if (Array.isArray(ids) && ids.length === 0) {
return;
}
const { code, msg } = await batchUpdateMetricStatus({
ids,
status,
});
if (code === 200) {
actionRef?.current?.reload();
dispatch({
type: 'domainManger/queryMetricList',
payload: {
modelId,
},
});
return;
}
message.error(msg);
};
const queryMetricList = async (params: any) => {
const { code, data, msg } = await queryMetric({
...params,
@@ -97,9 +135,30 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
width: 80,
valueEnum: SENSITIVE_LEVEL_ENUM,
},
{
dataIndex: 'status',
title: '状态',
width: 80,
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'createdBy',
title: '创建人',
width: 100,
search: false,
},
{
@@ -126,18 +185,10 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
title: '描述',
search: false,
},
// {
// dataIndex: 'type',
// title: '指标类型',
// valueEnum: {
// ATOMIC: '原子指标',
// DERIVED: '衍生指标',
// },
// },
{
dataIndex: 'updatedAt',
title: '更新时间',
width: 180,
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
@@ -149,8 +200,9 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
valueType: 'option',
render: (_, record) => {
return (
<Space>
<a
<Space className={styles.ctrlBtnContainer}>
<Button
type="link"
key="metricEditBtn"
onClick={() => {
setMetricItem(record);
@@ -158,8 +210,34 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}}
>
编辑
</a>
</Button>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"
key="editStatusOfflineBtn"
onClick={() => {
updateStatus({
...record,
status: StatusEnum.OFFLINE,
});
}}
>
禁用
</Button>
) : (
<Button
type="link"
key="editStatusOnlineBtn"
onClick={() => {
updateStatus({
...record,
status: StatusEnum.ONLINE,
});
}}
>
启用
</Button>
)}
<Popconfirm
title="确认删除？"
okText="是"
@@ -174,14 +252,15 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
}
}}
>
<a
<Button
type="link"
key="metricDeleteBtn"
onClick={() => {
setMetricItem(record);
}}
>
删除
</a>
</Button>
</Popconfirm>
</Space>
);
@@ -189,6 +268,49 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
},
];
const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys);
},
};
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 }) => {
switch (key) {
case 'batchStart':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.ONLINE);
break;
case 'batchStop':
queryBatchUpdateStatus(selectedRowKeys, StatusEnum.OFFLINE);
break;
default:
break;
}
};
return (
<>
<ProTable
@@ -202,6 +324,10 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
return <></>;
},
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
columns={columns}
params={{ modelId }}
request={queryMetricList}
@@ -230,6 +356,12 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
>
创建指标
</Button>,
<Dropdown.Button
key="ctrlBtnList"
menu={{ items: dropdownButtonItems, onClick: onMenuClick }}
>
批量操作
</Dropdown.Button>,
]}
/>
{createModalVisible && (

5
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionMetricRelationTableTransfer.tsx
View File

@@ -29,10 +29,11 @@ type Props = {
const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
metricItem,
relationsInitialValue,
domainManger,
onChange,
}) => {
const [targetKeys, setTargetKeys] = useState<string[]>([]);
const { selectModelId: modelId, selectDomainId } = domainManger;
const [checkedMap, setCheckedMap] = useState<Record<string, ISemantic.IDrillDownDimensionItem>>(
{},
);
@@ -44,7 +45,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
}, []);
const queryDimensionList = async () => {
const { code, data, msg } = await getDimensionList(metricItem.modelId);
const { code, data, msg } = await getDimensionList({ modelId: metricItem?.modelId || modelId });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionList(data.list);
} else {

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

@@ -3,7 +3,9 @@ import { Form, Button, Modal, Input, Switch, Select } from 'antd';
import styles from './style.less';
import { message } from 'antd';
import { formLayout } from '@/components/FormHelper/utils';
import { createModel, updateModel } from '../service';
import FormItemTitle from '@/components/FormHelper/FormItemTitle';
import { createModel, updateModel, getDimensionList } from '../service';
import { ISemantic } from '../data';
const FormItem = Form.Item;
@@ -17,24 +19,59 @@ export type ModelCreateFormModalProps = {
const ModelCreateFormModal: React.FC<ModelCreateFormModalProps> = (props) => {
const { basicInfo, domainId, onCancel, onSubmit } = props;
const [formVals, setFormVals] = useState<any>(basicInfo);
const [saveLoading, setSaveLoading] = useState(false);
const [formVals, setFormVals] = useState<ISemantic.IModelItem>(basicInfo);
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [form] = Form.useForm();
const [dimensionOptions, setDimensionOptions] = useState<{ label: string; value: number }[]>([]);
useEffect(() => {
if (basicInfo?.id) {
queryDimensionList();
}
}, []);
const queryDimensionList = async () => {
const { code, data, msg } = await getDimensionList({ modelId: basicInfo.id });
if (code === 200 && Array.isArray(data?.list)) {
setDimensionOptions(
data.list.map((item: ISemantic.IDimensionItem) => {
return {
label: item.name,
value: item.id,
};
}),
);
} else {
message.error(msg);
}
};
useEffect(() => {
form.setFieldsValue({
...basicInfo,
alias: basicInfo?.alias && basicInfo.alias.trim() ? basicInfo.alias.split(',') : [],
drillDownDimensionsIds: Array.isArray(basicInfo?.drillDownDimensions)
? basicInfo.drillDownDimensions.map(
(item: ISemantic.IDrillDownDimensionItem) => item.dimensionId,
)
: [],
});
}, [basicInfo]);
const handleConfirm = async () => {
const fieldsValue = await form.validateFields();
const columnsValue = { ...fieldsValue, isUnique: 1, domainId };
const submitData = {
const submitData: ISemantic.IModelItem = {
...formVals,
...columnsValue,
alias: Array.isArray(fieldsValue.alias) ? fieldsValue.alias.join(',') : '',
drillDownDimensions: Array.isArray(fieldsValue.drillDownDimensionsIds)
? fieldsValue.drillDownDimensionsIds.map((id: number) => {
return {
dimensionId: id,
};
})
: [],
};
setFormVals(submitData);
setSaveLoading(true);
@@ -99,6 +136,22 @@ const ModelCreateFormModal: React.FC<ModelCreateFormModalProps> = (props) => {
<FormItem name="description" label="模型描述">
<Input.TextArea placeholder="模型描述" />
</FormItem>
<FormItem
name="drillDownDimensionsIds"
label={
<FormItemTitle
title={'默认下钻维度'}
subTitle={'配置之后,可在指标主页和问答指标卡处选择用来对指标进行下钻和过滤'}
/>
}
>
<Select
mode="multiple"
options={dimensionOptions}
placeholder="请选择默认下钻维度"
maxTagCount={9}
/>
</FormItem>
<FormItem name="isUnique" label="是否唯一" hidden={true}>
<Switch size="small" checked={true} />
</FormItem>

245
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx Normal file
View File

@@ -0,0 +1,245 @@
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
import React, { useRef, useState, useEffect } from 'react';
import { StatusEnum } from '../enum';
import type { Dispatch } from 'umi';
import { connect } from 'umi';
import type { StateType } from '../model';
import { deleteModel, updateModel } from '../service';
import ModelCreateFormModal from './ModelCreateFormModal';
import moment from 'moment';
import styles from './style.less';
import { ISemantic } from '../data';
type Props = {
disabledEdit?: boolean;
modelList: ISemantic.IModelItem[];
onModelChange?: (model?: ISemantic.IModelItem) => void;
dispatch: Dispatch;
domainManger: StateType;
};
const ModelTable: React.FC<Props> = ({
modelList,
domainManger,
disabledEdit = false,
onModelChange,
dispatch,
}) => {
const { selectModelId: modelId, selectDomainId } = domainManger;
const [modelCreateFormModalVisible, setModelCreateFormModalVisible] = useState<boolean>(false);
const [modelItem, setModelItem] = useState<ISemantic.IModelItem>();
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const actionRef = useRef<ActionType>();
const updateModelStatus = async (modelData: ISemantic.IModelItem) => {
setSaveLoading(true);
const { code, msg } = await updateModel({
...modelData,
});
setSaveLoading(false);
if (code === 200) {
onModelChange?.();
} else {
message.error(msg);
}
};
const columns: ProColumns[] = [
{
dataIndex: 'id',
title: 'ID',
width: 80,
search: false,
},
{
dataIndex: 'name',
title: '指标名称',
search: false,
render: (_, record) => {
return (
<a
onClick={() => {
onModelChange?.(record);
}}
>
{_}
</a>
);
},
},
{
dataIndex: 'key',
title: '指标搜索',
hideInTable: true,
renderFormItem: () => <Input placeholder="请输入ID/指标名称/字段名称/标签" />,
},
{
dataIndex: 'alias',
title: '别名',
width: 150,
ellipsis: true,
search: false,
},
{
dataIndex: 'bizName',
title: '英文名称',
search: false,
},
{
dataIndex: 'status',
title: '状态',
search: false,
render: (status) => {
switch (status) {
case StatusEnum.ONLINE:
return <Tag color="success">已启用</Tag>;
case StatusEnum.OFFLINE:
return <Tag color="warning">未启用</Tag>;
case StatusEnum.INITIALIZED:
return <Tag color="processing">初始化</Tag>;
case StatusEnum.DELETED:
return <Tag color="default">已删除</Tag>;
default:
return <Tag color="default">未知</Tag>;
}
},
},
{
dataIndex: 'createdBy',
title: '创建人',
search: false,
},
{
dataIndex: 'description',
title: '描述',
search: false,
},
{
dataIndex: 'updatedAt',
title: '更新时间',
search: false,
render: (value: any) => {
return value && value !== '-' ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '-';
},
},
];
if (!disabledEdit) {
columns.push({
title: '操作',
dataIndex: 'x',
valueType: 'option',
render: (_, record) => {
return (
<Space className={styles.ctrlBtnContainer}>
<a
key="metricEditBtn"
onClick={() => {
setModelItem(record);
setModelCreateFormModalVisible(true);
}}
>
编辑
</a>
{record.status === StatusEnum.ONLINE ? (
<Button
type="link"
key="editStatusOfflineBtn"
onClick={() => {
updateModelStatus({
...record,
status: StatusEnum.OFFLINE,
});
}}
>
禁用
</Button>
) : (
<Button
type="link"
key="editStatusOnlineBtn"
onClick={() => {
updateModelStatus({
...record,
status: StatusEnum.ONLINE,
});
}}
>
启用
</Button>
)}
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
const { code, msg } = await deleteModel(record.id);
if (code === 200) {
onModelChange?.();
} else {
message.error(msg);
}
}}
>
<a key="modelDeleteBtn">删除</a>
</Popconfirm>
</Space>
);
},
});
}
return (
<>
<ProTable
className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
actionRef={actionRef}
rowKey="id"
search={false}
columns={columns}
dataSource={modelList}
tableAlertRender={() => {
return false;
}}
size="small"
options={{ reload: false, density: false, fullScreen: false }}
toolBarRender={() =>
disabledEdit
? [<></>]
: [
<Button
key="create"
type="primary"
onClick={() => {
setModelItem(undefined);
setModelCreateFormModalVisible(true);
}}
>
创建模型
</Button>,
]
}
/>
{modelCreateFormModalVisible && (
<ModelCreateFormModal
domainId={selectDomainId}
basicInfo={modelItem}
onSubmit={() => {
setModelCreateFormModalVisible(false);
onModelChange?.();
}}
onCancel={() => {
setModelCreateFormModalVisible(false);
}}
/>
)}
</>
);
};
export default connect(({ domainManger }: { domainManger: StateType }) => ({
domainManger,
}))(ModelTable);

156
webapp/packages/supersonic-fe/src/pages/SemanticModel/components/OverView.tsx
View File

@@ -10,6 +10,7 @@ import type { StateType } from '../model';
import { formatNumber } from '../../../utils/utils';
import { deleteModel } from '../service';
import ModelCreateFormModal from './ModelCreateFormModal';
import ModelTable from './ModelTable';
import styles from './style.less';
type Props = {
@@ -26,85 +27,86 @@ const OverView: React.FC<Props> = ({
onModelChange,
domainManger,
}) => {
const { selectDomainId, selectModelId } = domainManger;
const [currentModel, setCurrentModel] = useState<any>({});
const [modelCreateFormModalVisible, setModelCreateFormModalVisible] = useState<boolean>(false);
// const { selectDomainId, selectModelId } = domainManger;
// const [currentModel, setCurrentModel] = useState<any>({});
// const [modelCreateFormModalVisible, setModelCreateFormModalVisible] = useState<boolean>(false);
const descNode = (model: ISemantic.IDomainItem) => {
const { metricCnt, dimensionCnt } = model;
return (
<div className={styles.overviewExtraContainer}>
<div className={styles.extraWrapper}>
<div className={styles.extraStatistic}>
<div className={styles.extraTitle}>维度数</div>
<div className={styles.extraValue}>
<span className="ant-statistic-content-value">{formatNumber(dimensionCnt || 0)}</span>
</div>
</div>
</div>
<div className={styles.extraWrapper}>
<div className={styles.extraStatistic}>
<div className={styles.extraTitle}>指标数</div>
<div className={styles.extraValue}>
<span className="ant-statistic-content-value">{formatNumber(metricCnt || 0)}</span>
</div>
</div>
</div>
</div>
);
};
// const descNode = (model: ISemantic.IDomainItem) => {
// const { metricCnt, dimensionCnt } = model;
// return (
// <div className={styles.overviewExtraContainer}>
// <div className={styles.extraWrapper}>
// <div className={styles.extraStatistic}>
// <div className={styles.extraTitle}>维度数</div>
// <div className={styles.extraValue}>
// <span className="ant-statistic-content-value">{formatNumber(dimensionCnt || 0)}</span>
// </div>
// </div>
// </div>
// <div className={styles.extraWrapper}>
// <div className={styles.extraStatistic}>
// <div className={styles.extraTitle}>指标数</div>
// <div className={styles.extraValue}>
// <span className="ant-statistic-content-value">{formatNumber(metricCnt || 0)}</span>
// </div>
// </div>
// </div>
// </div>
// );
// };
const extraNode = (model: ISemantic.IDomainItem) => {
return (
<Dropdown
placement="top"
menu={{
onClick: ({ key, domEvent }) => {
domEvent.stopPropagation();
if (key === 'edit') {
setCurrentModel(model);
setModelCreateFormModalVisible(true);
}
},
items: [
{
label: '编辑',
key: 'edit',
},
{
label: (
<Popconfirm
title="确认删除？"
okText="是"
cancelText="否"
onConfirm={async () => {
const { code, msg } = await deleteModel(model.id);
if (code === 200) {
onModelChange?.();
} else {
message.error(msg);
}
}}
>
<a key="modelDeleteBtn">删除</a>
</Popconfirm>
),
key: 'delete',
},
],
}}
>
<EllipsisOutlined
style={{ fontSize: 22, color: 'rgba(0,0,0,0.5)' }}
onClick={(e) => e.stopPropagation()}
/>
</Dropdown>
);
};
// const extraNode = (model: ISemantic.IDomainItem) => {
// return (
// <Dropdown
// placement="top"
// menu={{
// onClick: ({ key, domEvent }) => {
// domEvent.stopPropagation();
// if (key === 'edit') {
// setCurrentModel(model);
// setModelCreateFormModalVisible(true);
// }
// },
// items: [
// {
// label: '编辑',
// key: 'edit',
// },
// {
// label: (
// <Popconfirm
// title="确认删除？"
// okText="是"
// cancelText="否"
// onConfirm={async () => {
// const { code, msg } = await deleteModel(model.id);
// if (code === 200) {
// onModelChange?.();
// } else {
// message.error(msg);
// }
// }}
// >
// <a key="modelDeleteBtn">删除</a>
// </Popconfirm>
// ),
// key: 'delete',
// },
// ],
// }}
// >
// <EllipsisOutlined
// style={{ fontSize: 22, color: 'rgba(0,0,0,0.5)' }}
// onClick={(e) => e.stopPropagation()}
// />
// </Dropdown>
// );
// };
return (
<div style={{ padding: '0px 20px 20px' }}>
{!disabledEdit && (
<ModelTable modelList={modelList} disabledEdit={disabledEdit} onModelChange={onModelChange} />
{/* {!disabledEdit && (
<div style={{ paddingBottom: '20px' }}>
<Button
onClick={() => {
@@ -135,8 +137,8 @@ const OverView: React.FC<Props> = ({
/>
);
})}
</CheckCard.Group>
{modelCreateFormModalVisible && (
</CheckCard.Group> */}
{/* {modelCreateFormModalVisible && (
<ModelCreateFormModal
domainId={selectDomainId}
basicInfo={currentModel}
@@ -148,7 +150,7 @@ const OverView: React.FC<Props> = ({
setModelCreateFormModalVisible(false);
}}
/>
)}
)} */}
</div>
);
};

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

@@ -359,4 +359,12 @@
&:hover {
color: #296DF3;
}
}
.ctrlBtnContainer {
:global {
.ant-btn-link {
padding: 0;
}
}
}