[improvement][headless-fe] Added view management functionality. (#701)

* [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.

* [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not.

* [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas.

* [improvement][semantic-fe] Updating the datePicker component to use dayjs instead.

* [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market.

* [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model.

* [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market.

* [improvement][semantic-fe] Adding the ability to download and transpose data.

* [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity.

* [improvement][semantic-fe] Fixing the logic error in the dimension value setting.

* [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information.

* [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience.

* [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas.

* [improvement][semantic-fe] Changing the line type for canvas connections.

* [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless".

* [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model.

* [improvement][semantic-fe] Updating the logic for the fieldName.

* [improvement][semantic-fe] Adjusting the position of the metrics tab.

* [improvement][semantic-fe] Changing the 字段名称 to 英文名称.

* [improvement][semantic-fe] Fix metric measurement deletion.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI optimization for metric details page.

* [improvement][semantic-fe] UI adjustment for metric details page.

* [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty.

* [improvement][semantic-fe] Added field type and metric type to the metric creation options.

* [improvement][semantic-fe] The organization structure selection feature has been added to the permission management.

* [improvement][semantic-fe] Improved user experience for the metric list.

* [improvement][semantic-fe] fix update the metric list.

* [improvement][headless-fe] Added view management functionality.

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

@@ -6,7 +6,7 @@ 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 { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant';
 import {
   getModelList,
   getDimensionList,
@@ -15,10 +15,11 @@ import {
 } from '../service';
 import DimensionInfoModal from './DimensionInfoModal';
 import DimensionValueSettingModal from './DimensionValueSettingModal';
-// import { updateDimension } from '../service';
 import { ISemantic, IDataSource } from '../data';
+import TableHeaderFilter from './TableHeaderFilter';
 import moment from 'moment';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
+import { ColumnsConfig } from './MetricTableColumnRender';
 import styles from './style.less';
 
 type Props = {
@@ -31,6 +32,8 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [dimensionItem, setDimensionItem] = useState<ISemantic.IDimensionItem>();
   const [dataSourceList, setDataSourceList] = useState<IDataSource.IDataSourceItem[]>([]);
+  const [tableData, setTableData] = useState<ISemantic.IMetricItem[]>([]);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState<boolean>(false);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [dimensionValueSettingList, setDimensionValueSettingList] = useState<
@@ -38,38 +41,37 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   >([]);
   const [dimensionValueSettingModalVisible, setDimensionValueSettingModalVisible] =
     useState<boolean>(false);
-  const [pagination] = useState({
+
+  const defaultPagination = {
     current: 1,
-    pageSize: 99999,
+    pageSize: 20,
     total: 0,
-  });
+  };
+  const [pagination, setPagination] = useState(defaultPagination);
 
   const actionRef = useRef<ActionType>();
 
   const queryDimensionList = async (params: any) => {
     setLoading(true);
     const { code, data, msg } = await getDimensionList({
-      ...params,
       ...pagination,
+      ...params,
       modelId,
     });
     setLoading(false);
-    const { list } = data || {};
-    let resData: any = {};
+    const { list, pageSize, pageNum, total } = data || {};
     if (code === 200) {
-      resData = {
-        data: list || [],
-        success: true,
-      };
+      setPagination({
+        ...pagination,
+        pageSize: Math.min(pageSize, 100),
+        current: pageNum,
+        total,
+      });
+      setTableData(list);
     } else {
       message.error(msg);
-      resData = {
-        data: [],
-        total: 0,
-        success: false,
-      };
+      setTableData([]);
     }
-    return resData;
   };
 
   const queryDataSourceList = async () => {
@@ -81,25 +83,14 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     }
   };
 
+  useEffect(() => {
+    queryDimensionList({ ...filterParams, ...defaultPagination });
+  }, [filterParams]);
+
   useEffect(() => {
     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;
@@ -111,7 +102,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     });
     setLoading(false);
     if (code === 200) {
-      actionRef?.current?.reload();
+      queryDimensionList({ ...filterParams, ...defaultPagination });
       dispatch({
         type: 'domainManger/queryDimensionList',
         payload: {
@@ -127,6 +118,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     {
       dataIndex: 'id',
       title: 'ID',
+      fixed: 'left',
       width: 80,
       order: 100,
       search: false,
@@ -135,46 +127,26 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       dataIndex: 'key',
       title: '维度搜索',
       hideInTable: true,
-      renderFormItem: () => <Input placeholder="请输入ID/维度名称/英文名称" />,
     },
     {
       dataIndex: 'name',
-      title: '维度名称',
+      title: '维度',
+      fixed: 'left',
+      width: 280,
+      render: ColumnsConfig.dimensionInfo.render,
       search: false,
     },
-    {
-      dataIndex: 'alias',
-      title: '别名',
-      width: 150,
-      ellipsis: true,
-      search: false,
-    },
-    {
-      dataIndex: 'bizName',
-      title: '英文名称',
-      search: false,
-      // order: 9,
-    },
     {
       dataIndex: 'sensitiveLevel',
       title: '敏感度',
-      width: 80,
+      width: 150,
       valueEnum: SENSITIVE_LEVEL_ENUM,
+      render: ColumnsConfig.sensitiveLevel.render,
     },
     {
       dataIndex: 'isTag',
       title: '是否为标签',
-      // search: false,
-      renderFormItem: () => (
-        <Select
-          placeholder="请选择标签状态"
-          allowClear
-          options={[
-            { value: 1, label: '是' },
-            { value: 0, label: '否' },
-          ]}
-        />
-      ),
+      width: 120,
       render: (isTag) => {
         switch (isTag) {
           case 0:
@@ -189,27 +161,14 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     {
       dataIndex: 'status',
       title: '状态',
-      width: 80,
+      width: 150,
       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>;
-        }
-      },
+      render: ColumnsConfig.state.render,
     },
     {
       dataIndex: 'createdBy',
       title: '创建人',
-      width: 100,
+      width: 180,
       search: false,
     },
 
@@ -217,6 +176,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       dataIndex: 'description',
       title: '描述',
       search: false,
+      render: ColumnsConfig.description.render,
     },
 
     {
@@ -233,7 +193,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       title: '操作',
       dataIndex: 'x',
       valueType: 'option',
-      width: 200,
+      width: 250,
       render: (_, record) => {
         return (
           <Space className={styles.ctrlBtnContainer}>
@@ -292,7 +252,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
                 const { code, msg } = await deleteDimension(record.id);
                 if (code === 200) {
                   setDimensionItem(undefined);
-                  actionRef.current?.reload();
+                  queryDimensionList({ ...filterParams, ...defaultPagination });
                 } else {
                   message.error(msg);
                 }
@@ -336,27 +296,102 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   return (
     <>
       <ProTable
-        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
+        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}  ${styles.disabledSearchTable}`}
         actionRef={actionRef}
         rowKey="id"
         columns={columns}
-        request={queryDimensionList}
         loading={loading}
-        search={{
-          defaultCollapsed: false,
-          collapseRender: () => {
-            return <></>;
-          },
-        }}
+        headerTitle={
+          <TableHeaderFilter
+            components={[
+              {
+                label: '维度搜索',
+                component: (
+                  <Input.Search
+                    style={{ width: 280 }}
+                    placeholder="请输入ID/维度名称/英文名称"
+                    onSearch={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          key: value,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+              {
+                label: '敏感度',
+                component: (
+                  <Select
+                    style={{ width: 140 }}
+                    options={SENSITIVE_LEVEL_OPTIONS}
+                    placeholder="请选择敏感度"
+                    allowClear
+                    onChange={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          sensitiveLevel: value,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+              {
+                label: '标签状态',
+                component: (
+                  <Select
+                    style={{ width: 145 }}
+                    placeholder="请选择标签状态"
+                    allowClear
+                    onChange={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          isTag: value,
+                        };
+                      });
+                    }}
+                    options={[
+                      { value: 1, label: '是' },
+                      { value: 0, label: '否' },
+                    ]}
+                  />
+                ),
+              },
+            ]}
+          />
+        }
+        search={false}
+        // search={{
+        //   optionRender: false,
+        //   collapsed: false,
+        // }}
         rowSelection={{
           type: 'checkbox',
           ...rowSelection,
         }}
+        dataSource={tableData}
+        pagination={pagination}
         tableAlertRender={() => {
           return false;
         }}
-        size="small"
+        size="large"
+        scroll={{ x: 1500 }}
         options={{ reload: false, density: false, fullScreen: false }}
+        onChange={(data: any) => {
+          const { current, pageSize, total } = data;
+          const currentPagin = {
+            current,
+            pageSize,
+            total,
+          };
+          setPagination(currentPagin);
+          queryDimensionList({ ...filterParams, ...currentPagin });
+        }}
         toolBarRender={() => [
           <Button
             key="create"
@@ -388,7 +423,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           dataSourceList={dataSourceList}
           onSubmit={() => {
             setCreateModalVisible(false);
-            actionRef?.current?.reload();
+            queryDimensionList({ ...filterParams, ...defaultPagination });
             dispatch({
               type: 'domainManger/queryDimensionList',
               payload: {
@@ -417,7 +452,7 @@ const ClassDimensionTable: React.FC<Props> = ({ domainManger, dispatch }) => {
             setDimensionValueSettingModalVisible(false);
           }}
           onSubmit={() => {
-            actionRef?.current?.reload();
+            queryDimensionList({ ...filterParams, ...defaultPagination });
             dispatch({
               type: 'domainManger/queryDimensionList',
               payload: {