[improvement][semantic-fe] UI adjustment for metric details page. (#617)

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

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

@@ -1,15 +1,16 @@
-import { message, Tag, Space, Tooltip } from 'antd';
-import React, { useState, useEffect, ReactNode } from 'react';
-import { getMetricData } from '../service';
-import { connect, useParams } from 'umi';
+import { Tag, Space, Tooltip } from 'antd';
+import React from 'react';
+import { connect } from 'umi';
 import type { StateType } from '../model';
+import { isArrayOfValues } from '@/utils/utils';
 import dayjs from 'dayjs';
 import {
   ExportOutlined,
   SolutionOutlined,
   ContainerOutlined,
   PartitionOutlined,
-  FallOutlined,
+  PlusOutlined,
+  AreaChartOutlined,
   DeleteOutlined,
 } from '@ant-design/icons';
 import styles from './style.less';
@@ -18,38 +19,26 @@ import { ISemantic } from '../data';
 import MetricStar from './components/MetricStar';
 
 type Props = {
-  metircData: any;
+  metircData: ISemantic.IMetricItem;
   domainManger: StateType;
+  relationDimensionOptions: { value: string; label: string; modelId: number }[];
   onNodeChange: (params?: { eventName?: string }) => void;
   onEditBtnClick?: (metircData: any) => void;
   onDimensionRelationBtnClick?: () => void;
   [key: string]: any;
 };
 
-const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
-  const params: any = useParams();
-  const metricId = params.metricId;
-
-  const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
-  useEffect(() => {
-    queryMetricData(metricId);
-  }, [metricId]);
-
-  const queryMetricData = async (metricId: string) => {
-    const { code, data, msg } = await getMetricData(metricId);
-    if (code === 200) {
-      setMetircData(data);
-      return;
-    }
-    message.error(msg);
-  };
-
+const MetricInfoSider: React.FC<Props> = ({
+  metircData,
+  relationDimensionOptions,
+  onDimensionRelationBtnClick,
+}) => {
   return (
     <div className={styles.metricInfoSider}>
       <div className={styles.title}>
         <div className={styles.name}>
           <Space>
-            <MetricStar metricId={metricId} initState={metircData?.isCollect} />
+            <MetricStar metricId={metircData?.id} initState={metircData?.isCollect} />
             {metircData?.name}
             {metircData?.alias && `[${metircData.alias}]`}
             {metircData?.hasAdminRes && (
@@ -64,20 +53,13 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
                 </Tooltip>
               </span>
             )}
-
-            {metircData?.sensitiveLevel !== undefined && (
-              <span style={{ marginLeft: 25 }}>
-                <Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
-                  {SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
-                </Tag>
-              </span>
-            )}
           </Space>
         </div>
         {metircData?.bizName && <div className={styles.bizName}>{metircData.bizName}</div>}
       </div>
 
       <div className={styles.sectionContainer}>
+        <hr className={styles.hr} />
         <div className={styles.section}>
           <div className={styles.sectionTitleBox}>
             <span className={styles.sectionTitle}>
@@ -88,6 +70,19 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
             </span>
           </div>
 
+          <div className={styles.item}>
+            <span className={styles.itemLable}>敏感度: </span>
+            <span className={styles.itemValue}>
+              {metircData?.sensitiveLevel !== undefined && (
+                <span>
+                  <Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
+                    {SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
+                  </Tag>
+                </span>
+              )}
+            </span>
+          </div>
+
           <div className={styles.item}>
             <span className={styles.itemLable}>所属模型: </span>
             <span className={styles.itemValue}>
@@ -115,7 +110,7 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
             <span className={styles.itemValue}>{metircData?.description}</span>
           </div>
         </div>
-
+        <hr className={styles.hr} />
         <div className={styles.section}>
           <div className={styles.sectionTitleBox}>
             <span className={styles.sectionTitle}>
@@ -148,22 +143,61 @@ const MetricInfoSider: React.FC<Props> = ({ onDimensionRelationBtnClick }) => {
           </div>
         </div>
         <hr className={styles.hr} />
+
+        <div className={styles.section}>
+          <div className={styles.sectionTitleBox}>
+            <span className={styles.sectionTitle}>
+              <Space>
+                <AreaChartOutlined />
+                应用信息
+              </Space>
+            </span>
+          </div>
+
+          {isArrayOfValues(metircData?.tags) && (
+            <div className={styles.item}>
+              <span className={styles.itemLable}>标签: </span>
+              <span className={styles.itemValue}>
+                <Space size={2} wrap>
+                  {metircData?.tags.map((tag) => (
+                    <Tag color="blue" key={tag}>
+                      {tag}
+                    </Tag>
+                  ))}
+                </Space>
+              </span>
+            </div>
+          )}
+        </div>
+
         <div className={styles.ctrlBox}>
           <ul className={styles.ctrlList}>
-            <li
-              onClick={() => {
-                onDimensionRelationBtnClick?.();
-              }}
-            >
-              <Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
+            <Tooltip title="配置下钻维度后，将可以在指标卡中进行下钻">
+              <li
+                style={{ display: 'block' }}
+                onClick={() => {
+                  onDimensionRelationBtnClick?.();
+                }}
+              >
                 <Space style={{ width: '100%' }}>
+                  <div className={styles.subTitle}>下钻维度</div>
                   <span className={styles.ctrlItemIcon}>
-                    <FallOutlined />
+                    <PlusOutlined />
                   </span>
-                  <span className={styles.ctrlItemLable}>下钻维度配置</span>
                 </Space>
-              </Tooltip>
-            </li>
+                {isArrayOfValues(relationDimensionOptions) && (
+                  <div style={{ marginLeft: 0, marginTop: 20 }}>
+                    <Space size={5} wrap>
+                      {relationDimensionOptions.map((item) => (
+                        <Tag color="blue" key={item.value} style={{ marginRight: 0 }}>
+                          {item.label}
+                        </Tag>
+                      ))}
+                    </Space>
+                  </div>
+                )}
+              </li>
+            </Tooltip>
             {/* <li
               onClick={() => {
                 onDimensionRelationBtnClick?.();