[improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality (#383)

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

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

@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Modal, message, Space, Tooltip } from 'antd';
+import { Button, Modal, message, Space, Tooltip, Tabs } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { ISemantic } from '../data';
 import CommonEditTable from './CommonEditTable';
 import { updateDimension, mockDimensionValuesAlias } from '../service';
 import { connect } from 'umi';
+import DimensionValueSettingForm from './Entity/DimensionValueSettingForm';
 import type { StateType } from '../model';
 
 export type CreateFormProps = {
   dimensionValueSettingList: ISemantic.IDimensionValueSettingItem[];
   onCancel: () => void;
-  dimensionItem?: ISemantic.IDimensionItem;
+  dimensionItem: ISemantic.IDimensionItem;
   open: boolean;
   onSubmit: (values?: any) => void;
   domainManger: StateType;
@@ -18,7 +19,7 @@ export type CreateFormProps = {
 
 type TableDataSource = { techName: string; bizName: string; alias?: string[] };
 
-const DimensionInfoModal: React.FC<CreateFormProps> = ({
+const DimensionValueSettingModal: React.FC<CreateFormProps> = ({
   onCancel,
   open,
   dimensionItem,
@@ -27,9 +28,10 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
   onSubmit,
 }) => {
   const [tableDataSource, setTableDataSource] = useState<TableDataSource[]>([]);
-  const { selectDomainId } = domainManger;
+  const { selectDomainId, selectModelId: modelId } = domainManger;
   const [dimValueMaps, setDimValueMaps] = useState<ISemantic.IDimensionValueSettingItem[]>([]);
   const [llmLoading, setLlmLoading] = useState<boolean>(false);
+  const [menuKey, setMenuKey] = useState<string>('default');
 
   useEffect(() => {
     setTableDataSource(dimensionValueSettingList);
@@ -74,29 +76,33 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
   const renderFooter = () => {
     return (
       <>
-        <Button
-          type="primary"
-          loading={llmLoading}
-          onClick={() => {
-            generatorDimensionValue();
-          }}
-        >
-          <Space>
-            智能填充
-            <Tooltip title="智能填充将根据维度相关信息，使用大语言模型获取可能被使用的维度值">
-              <InfoCircleOutlined />
-            </Tooltip>
-          </Space>
-        </Button>
         <Button onClick={onCancel}>取消</Button>
-        <Button
-          type="primary"
-          onClick={() => {
-            handleSubmit();
-          }}
-        >
-          完成
-        </Button>
+        {menuKey === 'default' && (
+          <>
+            <Button
+              type="primary"
+              loading={llmLoading}
+              onClick={() => {
+                generatorDimensionValue();
+              }}
+            >
+              <Space>
+                智能填充
+                <Tooltip title="智能填充将根据维度相关信息，使用大语言模型获取可能被使用的维度值">
+                  <InfoCircleOutlined />
+                </Tooltip>
+              </Space>
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => {
+                handleSubmit();
+              }}
+            >
+              完成
+            </Button>
+          </>
+        )}
       </>
     );
   };
@@ -154,6 +160,38 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
       },
     },
   ];
+
+  const tabItem = [
+    {
+      label: '维度值填充',
+      key: 'default',
+      children: (
+        <CommonEditTable
+          tableDataSource={tableDataSource}
+          columnList={columns}
+          onDataSourceChange={(tableData) => {
+            const dimValueMaps = tableData.map((item: TableDataSource) => {
+              return {
+                ...item,
+              };
+            });
+
+            setDimValueMaps(dimValueMaps);
+          }}
+        />
+      ),
+    },
+    {
+      label: '维度值设置',
+      key: 'setting',
+      children: <DimensionValueSettingForm modelId={modelId} dimensionItem={dimensionItem} />,
+    },
+  ];
+
+  const handleMenuChange = (key: string) => {
+    setMenuKey(key);
+  };
+
   return (
     <Modal
       width={1200}
@@ -165,18 +203,12 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
       footer={renderFooter()}
       onCancel={onCancel}
     >
-      <CommonEditTable
-        tableDataSource={tableDataSource}
-        columnList={columns}
-        onDataSourceChange={(tableData) => {
-          const dimValueMaps = tableData.map((item: TableDataSource) => {
-            return {
-              ...item,
-              // alias: item.alias ? `${item.alias}`.split(',') : [],
-            };
-          });
-
-          setDimValueMaps(dimValueMaps);
+      <Tabs
+        items={tabItem}
+        size="large"
+        activeKey={menuKey}
+        onChange={(menuKey: string) => {
+          handleMenuChange(menuKey);
         }}
       />
     </Modal>
@@ -185,4 +217,4 @@ const DimensionInfoModal: React.FC<CreateFormProps> = ({
 
 export default connect(({ domainManger }: { domainManger: StateType }) => ({
   domainManger,
-}))(DimensionInfoModal);
+}))(DimensionValueSettingModal);