[improvement][semantic-fe] Improved user experience for the metric list. (#660)

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

webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx

@@ -268,7 +268,13 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     params.sensitiveLevel = sensitiveLevelValue;
     params.type = typeValue;
     setFilterParams(params);
-    await queryMetricList(params, filterParams.key ? false : true);
+    await queryMetricList(
+      {
+        ...params,
+        ...defaultPagination,
+      },
+      filterParams.key ? false : true,
+    );
   };
 
   const rowSelection = {
@@ -352,6 +358,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
             tableAlertRender={() => {
               return false;
             }}
+            sticky={{ offsetHeader: 0 }}
             rowSelection={{
               type: 'checkbox',
               ...rowSelection,

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

@@ -1,12 +1,12 @@
 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, Select } from 'antd';
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } 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 { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant';
 import {
   queryMetric,
   deleteMetric,
@@ -31,11 +31,16 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
   const [metricItem, setMetricItem] = useState<ISemantic.IMetricItem>();
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-  const [pagination, setPagination] = useState({
+  const [tableData, setTableData] = useState<ISemantic.IMetricItem[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  const defaultPagination = {
     current: 1,
     pageSize: 20,
     total: 0,
-  });
+  };
+  const [pagination, setPagination] = useState(defaultPagination);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
+
   const actionRef = useRef<ActionType>();
 
   const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
@@ -61,14 +66,19 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     message.error(msg);
   };
 
+  useEffect(() => {
+    queryMetricList({ ...filterParams, ...defaultPagination });
+  }, [filterParams]);
+
   const queryMetricList = async (params: any) => {
+    setLoading(true);
     const { code, data, msg } = await queryMetric({
-      ...params,
       ...pagination,
+      ...params,
       modelId,
     });
+    setLoading(false);
     const { list, pageSize, pageNum, total } = data || {};
-    let resData: any = {};
     if (code === 200) {
       setPagination({
         ...pagination,
@@ -76,20 +86,11 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
         current: pageNum,
         total,
       });
-
+      setTableData(list);
-      resData = {
-        data: list || [],
-        success: true,
-      };
     } else {
       message.error(msg);
-      resData = {
+      setTableData([]);
-        data: [],
-        total: 0,
-        success: false,
-      };
     }
-    return resData;
   };
 
   const columns: ProColumns[] = [
@@ -104,13 +105,40 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       dataIndex: 'key',
       title: '指标搜索',
       hideInTable: true,
-      renderFormItem: () => <Input placeholder="请输入ID/指标名称/英文名称/标签" />,
+      renderFormItem: () => (
+        <Input.Search
+          placeholder="请输入ID/指标名称/英文名称/标签"
+          onSearch={(value) => {
+            setFilterParams((preState) => {
+              return {
+                ...preState,
+                key: value,
+              };
+            });
+          }}
+        />
+      ),
     },
     {
       dataIndex: 'sensitiveLevel',
       title: '敏感度',
       hideInTable: true,
       valueEnum: SENSITIVE_LEVEL_ENUM,
+      renderFormItem: () => (
+        <Select
+          options={SENSITIVE_LEVEL_OPTIONS}
+          placeholder="请选择敏感度"
+          allowClear
+          onChange={(value) => {
+            setFilterParams((preState) => {
+              return {
+                ...preState,
+                sensitiveLevel: value,
+              };
+            });
+          }}
+        />
+      ),
     },
     {
       dataIndex: 'description',
@@ -249,6 +277,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
         className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
         actionRef={actionRef}
         rowKey="id"
+        loading={loading}
         search={{
           optionRender: false,
           collapsed: false,
@@ -259,19 +288,22 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
         }}
         columns={columns}
         params={{ modelId }}
-        request={queryMetricList}
+        dataSource={tableData}
         pagination={pagination}
         tableAlertRender={() => {
           return false;
         }}
         onChange={(data: any) => {
           const { current, pageSize, total } = data;
-          setPagination({
+          const currentPagin = {
             current,
             pageSize,
             total,
-          });
+          };
+          setPagination(currentPagin);
+          queryMetricList({ ...filterParams, ...currentPagin });
         }}
+        sticky={{ offsetHeader: 0 }}
         size="large"
         options={{ reload: false, density: false, fullScreen: false }}
         toolBarRender={() => [

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

@@ -118,6 +118,9 @@
     }
     .content {
       flex: 1 1 auto;
+      height: calc(100vh - 56px);
+      overflow: scroll;
+      padding-bottom: 20px;
     }
     .collapseLeftBtn {
       position: absolute;