[improvement][semantic-fe] Added field type and metric type to the metric creation options. (#655)

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

* [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty.

* [improvement][semantic-fe] Added field type and metric type to the metric creation options.

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

@@ -1,15 +1,22 @@
 import { useEffect, forwardRef, useImperativeHandle, useState } from 'react';
 import type { ForwardRefRenderFunction } from 'react';
 import { message, Form, Input, Select, Button, Space } from 'antd';
-import { saveDatabase, testDatabaseConnect } from '../../service';
+import {
+  saveDatabase,
+  testDatabaseConnect,
+  getDatabaseParameters,
+  getDatabaseDetail,
+} from '../../service';
 import { formLayout } from '@/components/FormHelper/utils';
 import SelectTMEPerson from '@/components/SelectTMEPerson';
+import { ConfigParametersItem } from '../../../System/types';
+import { genneratorFormItemList } from '../../utils';
 import { ISemantic } from '../../data';
 
 import styles from '../style.less';
 type Props = {
   domainId?: number;
-  dataBaseConfig?: ISemantic.IDatabaseItem;
+  databaseId?: number;
   hideSubmitBtn?: boolean;
   onSubmit?: (params?: any) => void;
 };
@@ -18,21 +25,59 @@ const FormItem = Form.Item;
 const TextArea = Input.TextArea;
 
 const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
-  { domainId, dataBaseConfig, onSubmit, hideSubmitBtn = false },
+  { domainId, databaseId, onSubmit, hideSubmitBtn = false },
   ref,
 ) => {
   const [form] = Form.useForm();
-  const [selectedDbType, setSelectedDbType] = useState<string>('h2');
-
+  const [selectedDbType, setSelectedDbType] = useState<string>('');
+  const [databaseOptions, setDatabaseOptions] = useState<{ value: string; label: string }[]>([]);
+  const [databaseConfig, setDatabaseConfig] = useState<Record<string, ConfigParametersItem[]>>({});
   const [testLoading, setTestLoading] = useState<boolean>(false);
 
+  const [dataBaseDetail, setDataBaseDetail] = useState<ISemantic.IDatabaseItem>();
+
   useEffect(() => {
     form.resetFields();
-    if (dataBaseConfig) {
-      form.setFieldsValue({ ...dataBaseConfig });
-      setSelectedDbType(dataBaseConfig?.type);
+    if (dataBaseDetail) {
+      form.setFieldsValue({ ...dataBaseDetail });
+      setSelectedDbType(dataBaseDetail?.type);
     }
-  }, [dataBaseConfig]);
+  }, [dataBaseDetail]);
+
+  useEffect(() => {
+    if (databaseId) {
+      queryDatabaseDetail(databaseId);
+    }
+  }, [databaseId]);
+
+  useEffect(() => {
+    queryDatabaseConfig();
+  }, []);
+
+  const queryDatabaseDetail = async (id: number) => {
+    const { code, msg, data } = await getDatabaseDetail(id);
+    if (code === 200) {
+      setDataBaseDetail(data);
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryDatabaseConfig = async () => {
+    const { code, msg, data } = await getDatabaseParameters();
+    if (code === 200) {
+      const options = Object.keys(data).map((sqlName: string) => {
+        return {
+          value: sqlName,
+          label: sqlName,
+        };
+      });
+      setDatabaseConfig(data);
+      setDatabaseOptions(options);
+      return;
+    }
+    message.error(msg);
+  };
 
   const getFormValidateFields = async () => {
     return await form.validateFields();
@@ -47,7 +92,7 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
   const saveDatabaseConfig = async () => {
     const values = await form.validateFields();
     const { code, msg } = await saveDatabase({
-      ...dataBaseConfig,
+      ...(dataBaseDetail || {}),
       ...values,
       domainId,
     });
@@ -98,14 +143,12 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
           <Select
             style={{ width: '100%' }}
             placeholder="请选择数据库类型"
-            options={[
-              { value: 'h2', label: 'h2' },
-              { value: 'mysql', label: 'mysql' },
-              { value: 'clickhouse', label: 'clickhouse' },
-            ]}
+            options={databaseOptions}
           />
         </FormItem>
-        {selectedDbType === 'h2' ? (
+
+        {databaseConfig[selectedDbType] && genneratorFormItemList(databaseConfig[selectedDbType])}
+        {/* {selectedDbType === 'h2' ? (
           <FormItem name="url" label="链接" rules={[{ required: true, message: '请输入链接' }]}>
             <Input placeholder="请输入链接" />
           </FormItem>
@@ -139,11 +182,10 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
               ]}
             />
           </FormItem>
-        )}
-        <FormItem
+        )} */}
+        {/* <FormItem
           name="username"
           label="用户名"
-          // rules={[{ required: true, message: '请输入用户名' }]}
         >
           <Input placeholder="请输入用户名" />
         </FormItem>
@@ -152,7 +194,7 @@ const DatabaseCreateForm: ForwardRefRenderFunction<any, Props> = (
         </FormItem>
         <FormItem name="database" label="数据库名称">
           <Input placeholder="请输入数据库名称" />
-        </FormItem>
+        </FormItem> */}
         <FormItem
           name="admins"
           label="管理员"

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

@@ -55,7 +55,7 @@ const DatabaseSettingModal: React.FC<CreateFormProps> = ({
 
   return (
     <Modal
-      width={1200}
+      width={600}
       destroyOnClose
       title="数据库连接设置"
       style={{ top: 48 }}
@@ -67,7 +67,8 @@ const DatabaseSettingModal: React.FC<CreateFormProps> = ({
       <DatabaseCreateForm
         hideSubmitBtn={true}
         ref={createFormRef}
-        dataBaseConfig={databaseItem}
+        // dataBaseConfig={databaseItem}
+        databaseId={databaseItem?.id}
         onSubmit={() => {
           onSubmit?.();
         }}