[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

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

@@ -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 && (