mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-13 21:17:08 +00:00
[improvement][semantic-fe] Adding batch operations for indicators/dimensions/models (#313)
* [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
@@ -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>,
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user