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

@@ -1,6 +1,6 @@
 import { message } from 'antd';
 import React, { useState, useEffect } from 'react';
-import { getMetricData } from '../service';
+import { getMetricData, getDimensionList, getDrillDownDimension } from '../service';
 import { connect, useParams } from 'umi';
 import type { StateType } from '../model';
 import styles from './style.less';
@@ -9,29 +9,21 @@ import { ISemantic } from '../data';
 import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
 import MetricInfoSider from './MetricInfoSider';
 
-type Props = {
-  metircData: any;
-  domainManger: StateType;
-  onNodeChange: (params?: { eventName?: string }) => void;
-  onEditBtnClick?: (metircData: any) => void;
-  [key: string]: any;
-};
+type Props = Record<string, any>;
 
-const siderStyle: React.CSSProperties = {
-  backgroundColor: '#fff',
-  width: 450,
-  minHeight: '100vh',
-  boxShadow:
-    '6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05)',
-};
-
-const MetricDetail: React.FC<Props> = ({ domainManger }) => {
+const MetricDetail: React.FC<Props> = () => {
   const params: any = useParams();
   const metricId = params.metricId;
   const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
   const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
+  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
+  const [relationDimensionOptions, setRelationDimensionOptions] = useState<
+    { value: string; label: string; modelId: number }[]
+  >([]);
+
   useEffect(() => {
     queryMetricData(metricId);
+    queryDrillDownDimension(metricId);
   }, [metricId]);
 
   const queryMetricData = async (metricId: string) => {
@@ -43,15 +35,56 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
     message.error(msg);
   };
 
+  const queryDrillDownDimension = async (metricId: number) => {
+    const { code, data, msg } = await getDrillDownDimension(metricId);
+    if (code === 200 && Array.isArray(data)) {
+      const ids = data.map((item) => item.dimensionId);
+      queryDimensionList(ids);
+      return data;
+    } else {
+      setDimensionList([]);
+      setRelationDimensionOptions([]);
+    }
+    if (code !== 200) {
+      message.error(msg);
+    }
+    return [];
+  };
+
+  const queryDimensionList = async (ids: number[]) => {
+    if (!(Array.isArray(ids) && ids.length > 0)) {
+      setRelationDimensionOptions([]);
+      return;
+    }
+    const { code, data, msg } = await getDimensionList({ ids });
+    if (code === 200 && Array.isArray(data?.list)) {
+      setDimensionList(data.list);
+      setRelationDimensionOptions(
+        data.list.map((item: ISemantic.IMetricItem) => {
+          return { label: item.name, value: item.bizName, modelId: item.modelId };
+        }),
+      );
+      return data.list;
+    }
+    message.error(msg);
+    return [];
+  };
+
   return (
     <>
       <div className={styles.metricDetailWrapper}>
         <div className={styles.metricDetail}>
           <div className={styles.tabContainer}>
-            <MetricTrendSection metircData={metircData} />
+            <MetricTrendSection
+              metircData={metircData}
+              relationDimensionOptions={relationDimensionOptions}
+              dimensionList={dimensionList}
+            />
           </div>
-          <div style={siderStyle}>
+          <div className={styles.siderContainer}>
             <MetricInfoSider
+              relationDimensionOptions={relationDimensionOptions}
+              metircData={metircData}
               onDimensionRelationBtnClick={() => {
                 setMetricRelationModalOpenState(true);
               }}
@@ -68,6 +101,7 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
         }}
         onSubmit={(relations) => {
           queryMetricData(metricId);
+          queryDrillDownDimension(metricId);
           setMetricRelationModalOpenState(false);
         }}
       />