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

@@ -33,6 +33,20 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
   };
 
   const filterList = [
+    {
+      title: '展示类型',
+      key: 'showFilter',
+      options: [
+        {
+          label: '我创建的',
+          value: 'onlyShowMe',
+        },
+        {
+          label: '我收藏的',
+          value: 'hasCollect',
+        },
+      ],
+    },
     {
       title: '敏感度',
       key: 'sensitiveLevel',
@@ -89,16 +103,12 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
             <Switch size="small" />
           </FormItem>
         </StandardFormRow>
-        <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
+        {/* <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
           <FormItem name="onlyShowMe" valuePropName="checked">
             <Switch size="small" />
           </FormItem>
-        </StandardFormRow>
-        <StandardFormRow key="domainIds" title="所属主题域" block>
-          <FormItem name="domainIds">
-            <DomainTreeSelect />
-          </FormItem>
-        </StandardFormRow>
+        </StandardFormRow> */}
+
         {filterList.map((item) => {
           const { title, key, options } = item;
           return (
@@ -115,6 +125,11 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
             </StandardFormRow>
           );
         })}
+        <StandardFormRow key="domainIds" title="所属主题域" block>
+          <FormItem name="domainIds">
+            <DomainTreeSelect />
+          </FormItem>
+        </StandardFormRow>
       </Space>
     </Form>
   );

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

@@ -1,5 +1,5 @@
 import { Tooltip, message } from 'antd';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { metricStarState } from '../../service';
 import MStar from '@/components/MStar';
 
@@ -11,6 +11,9 @@ type Props = {
 
 const MetricStar: React.FC<Props> = ({ metricId, initState = false }) => {
   const [star, setStar] = useState<boolean>(initState);
+  useEffect(() => {
+    setStar(initState);
+  }, [initState]);
 
   const starStateChange = async (id: number, state: boolean) => {
     const { code, msg } = await metricStarState({ id, state });

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

@@ -1,12 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { message, Row, Col, Button, Space, Select, Form, Tooltip, Radio } from 'antd';
-import {
-  queryStruct,
-  getDrillDownDimension,
-  getDimensionList,
-} from '@/pages/SemanticModel/service';
-import { InfoCircleOutlined, DownloadOutlined, PoweroffOutlined } from '@ant-design/icons';
-import DimensionAndMetricRelationModal from '../../components/DimensionAndMetricRelationModal';
+import { message, Row, Col, Button, Space, Select, Form, Tooltip } from 'antd';
+import { queryStruct } from '@/pages/SemanticModel/service';
+import { DownloadOutlined, PoweroffOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
 import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
 import MDatePicker from '@/components/MDatePicker';
@@ -16,6 +11,7 @@ import StandardFormRow from '@/components/StandardFormRow';
 import MetricTable from './Table';
 import { ColumnConfig } from '../data';
 import dayjs from 'dayjs';
+import { history } from 'umi';
 import { ISemantic } from '../../data';
 import { DateFieldMap } from '@/pages/SemanticModel/constant';
 import ProCard from '@ant-design/pro-card';
@@ -25,28 +21,25 @@ import styles from '../style.less';
 const FormItem = Form.Item;
 
 type Props = {
+  relationDimensionOptions: { value: string; label: string; modelId: number }[];
+  dimensionList: ISemantic.IDimensionItem[];
   metircData?: ISemantic.IMetricItem;
   [key: string]: any;
 };
 
-const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
+const MetricTrendSection: React.FC<Props> = ({
+  metircData,
+  relationDimensionOptions,
+  dimensionList,
+}) => {
   const indicatorFields = useRef<{ name: string; column: string }[]>([]);
   const [metricTrendData, setMetricTrendData] = useState<ISemantic.IMetricTrendItem[]>([]);
   const [metricTrendLoading, setMetricTrendLoading] = useState<boolean>(false);
   const [metricColumnConfig, setMetricColumnConfig] = useState<ISemantic.IMetricTrendColumn>();
-  const [metricRelationModalOpenState, setMetricRelationModalOpenState] = useState<boolean>(false);
-  const [drillDownDimensions, setDrillDownDimensions] = useState<
-    ISemantic.IDrillDownDimensionItem[]
-  >(metircData?.relateDimension?.drillDownDimensions || []);
   const [authMessage, setAuthMessage] = useState<string>('');
   const [downloadLoding, setDownloadLoding] = useState<boolean>(false);
-  const [relationDimensionOptions, setRelationDimensionOptions] = useState<
-    { value: string; label: string; modelId: number }[]
-  >([]);
-  const [dimensionList, setDimensionList] = useState<ISemantic.IDimensionItem[]>([]);
   const [queryParams, setQueryParams] = useState<any>({});
   const [downloadBtnDisabledState, setDownloadBtnDisabledState] = useState<boolean>(true);
-  // const [showDimensionOptions, setShowDimensionOptions] = useState<any[]>([]);
   const [periodDate, setPeriodDate] = useState<{
     startDate: string;
     endDate: string;
@@ -57,7 +50,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
     dateField: DateFieldMap[DateRangeType.DAY],
   });
   const [rowNumber, setRowNumber] = useState<number>(5);
-  const [chartType, setChartType] = useState<'chart' | 'table'>('chart');
+
   const [tableColumnConfig, setTableColumnConfig] = useState<ColumnConfig[]>([]);
 
   const [transformState, setTransformState] = useState<boolean>(false);
@@ -138,60 +131,19 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
     }
   };
 
-  const queryDimensionList = async (ids: number[]) => {
-    if (!(Array.isArray(ids) && ids.length > 0)) {
-      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 [];
-  };
-
-  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 initDimensionData = async (metricItem: ISemantic.IMetricItem) => {
-    await queryDrillDownDimension(metricItem.id);
-  };
-
   useEffect(() => {
     if (metircData?.id) {
       getMetricTrendData({ ...queryParams });
-      initDimensionData(metircData);
-      setDrillDownDimensions(metircData?.relateDimension?.drillDownDimensions || []);
     }
   }, [metircData, periodDate]);
 
   return (
     <div className={styles.metricTrendSection}>
       <div className={styles.sectionBox}>
-        <Row>
+        <Row style={{ padding: '10px 10px 0px 10px' }}>
           <Col flex="1 1 200px">
             <Form
               layout="inline"
-              // form={form}
               colon={false}
               onValuesChange={(value, values) => {
                 if (value.key) {
@@ -269,6 +221,27 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
           </Col>
           <Col flex="0 1" />
         </Row>
+        <Button
+          style={{
+            position: 'absolute',
+            top: 20,
+            right: 20,
+          }}
+          size="middle"
+          type="link"
+          key="backListBtn"
+          onClick={() => {
+            history.push('/metric/market');
+          }}
+        >
+          <Space>
+            <ArrowLeftOutlined />
+            返回列表页
+          </Space>
+        </Button>
+        {/* <div className={styles.btnWrapper}>
+
+        </div> */}
       </div>
       {authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
       <div className={styles.sectionBox}>
@@ -292,7 +265,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
             loading={metricTrendLoading}
             dateFieldName={periodDate.dateField}
             groupByDimensionFieldName={groupByDimensionFieldName}
-            height={400}
+            height={350}
             renderType="clear"
             decimalPlaces={metricColumnConfig?.dataFormat?.decimalPlaces || 2}
           />
@@ -302,7 +275,7 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
       <div className={styles.sectionBox}>
         <ProCard
           size="small"
-          title="源数据"
+          title="数据明细"
           collapsible
           extra={
             <Space.Compact block>
@@ -345,20 +318,6 @@ const MetricTrendSection: React.FC<Props> = ({ metircData }) => {
           </div>
         </ProCard>
       </div>
-
-      <DimensionAndMetricRelationModal
-        metricItem={metircData}
-        relationsInitialValue={drillDownDimensions}
-        open={metricRelationModalOpenState}
-        onCancel={() => {
-          setMetricRelationModalOpenState(false);
-        }}
-        onSubmit={(relations) => {
-          setDrillDownDimensions(relations);
-          setMetricRelationModalOpenState(false);
-          initDimensionData(metircData!);
-        }}
-      />
     </div>
   );
 };