[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/ClassMetricTable.tsx

@@ -13,9 +13,9 @@ import {
   batchUpdateMetricStatus,
   batchDownloadMetric,
 } from '../service';
-
 import MetricInfoCreateForm from './MetricInfoCreateForm';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
+import TableHeaderFilter from './TableHeaderFilter';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
@@ -39,6 +39,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
     total: 0,
   };
   const [pagination, setPagination] = useState(defaultPagination);
+
   const [filterParams, setFilterParams] = useState<Record<string, any>>({});
 
   const actionRef = useRef<ActionType>();
@@ -94,10 +95,19 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   };
 
   const columns: ProColumns[] = [
+    {
+      dataIndex: 'id',
+      title: 'ID',
+      width: 80,
+      fixed: 'left',
+      search: false,
+    },
     {
       dataIndex: 'name',
       title: '指标',
-      width: '30%',
+      width: 280,
+      fixed: 'left',
+      // width: '30%',
       search: false,
       render: ColumnsConfig.metricInfo.render,
     },
@@ -105,54 +115,35 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
       dataIndex: 'key',
       title: '指标搜索',
       hideInTable: true,
-      renderFormItem: () => (
-        <Input.Search
-          placeholder="请输入ID/指标名称/英文名称/标签"
-          onSearch={(value) => {
-            setFilterParams((preState) => {
-              return {
-                ...preState,
-                key: value,
-              };
-            });
-          }}
-        />
-      ),
     },
     {
       dataIndex: 'sensitiveLevel',
       title: '敏感度',
-      hideInTable: true,
+      width: 160,
       valueEnum: SENSITIVE_LEVEL_ENUM,
-      renderFormItem: () => (
-        <Select
-          options={SENSITIVE_LEVEL_OPTIONS}
-          placeholder="请选择敏感度"
-          allowClear
-          onChange={(value) => {
-            setFilterParams((preState) => {
-              return {
-                ...preState,
-                sensitiveLevel: value,
-              };
-            });
-          }}
-        />
-      ),
+      render: ColumnsConfig.sensitiveLevel.render,
     },
+
     {
       dataIndex: 'description',
       title: '描述',
+      width: 300,
       search: false,
+      render: ColumnsConfig.description.render,
     },
     {
       dataIndex: 'status',
       title: '状态',
-      width: 200,
+      width: 160,
       search: false,
       render: ColumnsConfig.state.render,
     },
-
+    {
+      dataIndex: 'createdBy',
+      title: '创建人',
+      width: 150,
+      search: false,
+    },
     {
       dataIndex: 'updatedAt',
       title: '更新时间',
@@ -274,14 +265,53 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
   return (
     <>
       <ProTable
-        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft}`}
+        className={`${styles.classTable} ${styles.classTableSelectColumnAlignLeft} ${styles.disabledSearchTable} `}
         actionRef={actionRef}
+        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,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+            ]}
+          />
+        }
         rowKey="id"
         loading={loading}
-        search={{
-          optionRender: false,
-          collapsed: false,
-        }}
+        search={false}
         rowSelection={{
           type: 'checkbox',
           ...rowSelection,
@@ -303,6 +333,7 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
           setPagination(currentPagin);
           queryMetricList({ ...filterParams, ...currentPagin });
         }}
+        scroll={{ x: 1500 }}
         sticky={{ offsetHeader: 0 }}
         size="large"
         options={{ reload: false, density: false, fullScreen: false }}