[improvement][semantic-fe] UI optimization for metric details page. (#610)

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

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

@@ -1,23 +1,14 @@
-import { message, Tag, Space, Layout, Tabs, Tooltip } from 'antd';
-import React, { useState, useEffect, ReactNode } from 'react';
+import { message } from 'antd';
+import React, { useState, useEffect } from 'react';
 import { getMetricData } from '../service';
-import { connect, useParams, history } from 'umi';
+import { connect, useParams } from 'umi';
 import type { StateType } from '../model';
-import moment from 'moment';
-import {
-  LeftOutlined,
-  UserOutlined,
-  CalendarOutlined,
-  InfoCircleOutlined,
-} from '@ant-design/icons';
 import styles from './style.less';
 import MetricTrendSection from '@/pages/SemanticModel/Metric/components/MetricTrendSection';
-import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
-import type { TabsProps } from 'antd';
 import { ISemantic } from '../data';
-import MetricStar from './components/MetricStar';
+import DimensionAndMetricRelationModal from '../components/DimensionAndMetricRelationModal';
+import MetricInfoSider from './MetricInfoSider';
 
-const { Content } = Layout;
 type Props = {
   metircData: any;
   domainManger: StateType;
@@ -26,27 +17,18 @@ type Props = {
   [key: string]: any;
 };
 
-interface DescriptionItemProps {
-  title: string | ReactNode;
-  content: React.ReactNode;
-  icon: ReactNode;
-}
-
-const DescriptionItem = ({ title, content, icon }: DescriptionItemProps) => (
-  <Tooltip title={title}>
-    <div style={{ width: 'max-content', fontSize: 14, color: '#546174' }}>
-      <Space>
-        <span style={{ width: 'max-content' }}>{icon}</span>
-        {content}
-      </Space>
-    </div>
-  </Tooltip>
-);
+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 params: any = useParams();
   const metricId = params.metricId;
-
+  const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
   const [metircData, setMetircData] = useState<ISemantic.IMetricItem>();
   useEffect(() => {
     queryMetricData(metricId);
@@ -55,104 +37,41 @@ const MetricDetail: React.FC<Props> = ({ domainManger }) => {
   const queryMetricData = async (metricId: string) => {
     const { code, data, msg } = await getMetricData(metricId);
     if (code === 200) {
-      setMetircData(data);
+      setMetircData({ ...data });
       return;
     }
     message.error(msg);
   };
 
-  const tabItems: TabsProps['items'] = [
-    {
-      key: 'metricTrend',
-      label: '图表',
-      children: <MetricTrendSection metircData={metircData} />,
-    },
-  ];
-
-  const contentStyle: React.CSSProperties = {
-    minHeight: 120,
-    color: '#fff',
-    backgroundColor: '#fff',
-  };
-
   return (
-    <Layout className={styles.metricDetail}>
-      <Layout>
-        <Content style={contentStyle}>
-          <h2 className={styles.title}>
-            <div className={styles.titleLeft}>
-              <div
-                className={styles.backBtn}
-                onClick={() => {
-                  history.push(`/metric/market`);
-                }}
-              >
-                <LeftOutlined />
-              </div>
-
-              <div className={styles.navContainer}>
-                <Space>
-                  <MetricStar metricId={metricId} initState={metircData?.isCollect} />
-                  <span style={{ color: '#296DF3' }}>
-                    {metircData?.name}
-                    {metircData?.alias && `[${metircData.alias}]`}
-                  </span>
-                  {metircData?.name && (
-                    <>
-                      <span style={{ position: 'relative', top: '-2px', color: '#c3c3c3' }}>|</span>
-                      <span style={{ fontSize: 16, color: '#296DF3' }}>{metircData?.bizName}</span>
-                    </>
-                  )}
-                  {metircData?.sensitiveLevel !== undefined && (
-                    <span style={{ position: 'relative', top: '-2px' }}>
-                      <Tag color={SENSITIVE_LEVEL_COLOR[metircData.sensitiveLevel]}>
-                        {SENSITIVE_LEVEL_ENUM[metircData.sensitiveLevel]}
-                      </Tag>
-                    </span>
-                  )}
-                </Space>
-                {metircData?.description ? (
-                  <div className={styles.description}>
-                    <Tooltip title="指标描述">
-                      <Space>
-                        <InfoCircleOutlined />
-                        {metircData?.description}
-                      </Space>
-                    </Tooltip>
-                  </div>
-                ) : (
-                  <></>
-                )}
-              </div>
-            </div>
-            <div className={styles.titleRight}>
-              {metircData?.createdBy ? (
-                <>
-                  <div className={styles.info}>
-                    <DescriptionItem
-                      title="创建人"
-                      icon={<UserOutlined />}
-                      content={metircData?.createdBy}
-                    />
-
-                    <DescriptionItem
-                      title="更新时间"
-                      icon={<CalendarOutlined />}
-                      content={moment(metircData?.updatedAt).format('YYYY-MM-DD HH:mm:ss')}
-                    />
-                  </div>
-                </>
-              ) : (
-                <></>
-              )}
-            </div>
-          </h2>
+    <>
+      <div className={styles.metricDetailWrapper}>
+        <div className={styles.metricDetail}>
           <div className={styles.tabContainer}>
-            <Tabs defaultActiveKey="metricTrend" items={tabItems} size="large" />
+            <MetricTrendSection metircData={metircData} />
           </div>
-        </Content>
-      </Layout>
-    </Layout>
+          <div style={siderStyle}>
+            <MetricInfoSider
+              onDimensionRelationBtnClick={() => {
+                setMetricRelationModalOpenState(true);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <DimensionAndMetricRelationModal
+        metricItem={metircData}
+        relationsInitialValue={metircData?.relateDimension?.drillDownDimensions}
+        open={metricRelationModalOpenState}
+        onCancel={() => {
+          setMetricRelationModalOpenState(false);
+        }}
+        onSubmit={(relations) => {
+          queryMetricData(metricId);
+          setMetricRelationModalOpenState(false);
+        }}
+      />
+    </>
   );
 };