[improvement][headless-fe] Added search functionality to model management. (#874)

* [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. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. * [improvement][headless-fe] Enhanced dataset creation to support the tag mode. * [improvement][headless-fe] Added tag value setting. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead. * [improvement][headless-fe] Added search functionality to model management.
2025-12-13 13:07:32 +00:00 · 2024-04-02 19:38:28 +08:00
parent ee4c5ca97c
commit 4dee8c6b8d
8 changed files with 118 additions and 75 deletions
--- a/webapp/packages/supersonic-fe/config/routes.ts
+++ b/webapp/packages/supersonic-fe/config/routes.ts
@@ -34,18 +34,19 @@ const ROUTES = [
    component: './Agent',
    envEnableList: [ENV_KEY.CHAT],
  },
-  {
-    path: '/model/:domainId?/:modelId?/:menuKey?',
-    component: './SemanticModel/DomainManager',
-    name: 'semanticModel',
-    envEnableList: [ENV_KEY.SEMANTIC],
-  },
  {
    path: '/plugin',
    name: 'plugin',
    component: './ChatPlugin',
    envEnableList: [ENV_KEY.CHAT],
  },
+  {
+    path: '/model/:domainId?/:modelId?/:menuKey?',
+    component: './SemanticModel/DomainManager',
+    name: 'semanticModel',
+    envEnableList: [ENV_KEY.SEMANTIC],
+  },
+
  {
    path: '/metric',
    name: 'metric',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/ModelCreateForm.tsx
@@ -11,7 +11,6 @@ import {
  getColumns,
  getUnAvailableItem,
  getTagObjectList,
-  getModelDetail,
 } from '../../service';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../../model';
@@ -52,15 +51,15 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
  sql = '',
  sqlParams,
  onSubmit,
-  modelItem: modelBasicInfo,
+  modelItem,
  databaseId,
  basicInfoFormMode,
  onDataSourceBtnClick,
  onOpenDataSourceEdit,
  children,
 }) => {
-  const isEdit = !!modelBasicInfo?.id;
-  const [modelItem, setModelItem] = useState<ISemantic.IModelItem>({});
+  const isEdit = !!modelItem?.id;
+
  const [fields, setFields] = useState<any[]>([]);
  const [currentStep, setCurrentStep] = useState(0);
  const [saveLoading, setSaveLoading] = useState(false);
@@ -104,26 +103,9 @@ const ModelCreateForm: React.FC<CreateFormProps> = ({
    queryTagObjectList();
  }, []);

-  useEffect(() => {
-    if (modelBasicInfo?.id) {
-      queryModelDetail(modelBasicInfo.id);
-    }
-  }, [modelBasicInfo]);
-
  const forward = () => setCurrentStep(currentStep + 1);
  const backward = () => setCurrentStep(currentStep - 1);

-  const queryModelDetail = async (modelId: number) => {
-    const { code, msg, data } = await getModelDetail({
-      modelId,
-    });
-    if (code === 200) {
-      setModelItem(data);
-    } else {
-      message.error(msg);
-    }
-  };
-
  const queryTagObjectList = async () => {
    const { code, msg, data } = await getTagObjectList({
      domainId: domainData?.parentId || domainData?.id,
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
@@ -218,26 +218,26 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
    {
      dataIndex: 'sensitiveLevel',
      title: '敏感度',
-      width: 150,
+      // width: 150,
      valueEnum: SENSITIVE_LEVEL_ENUM,
      render: columnsConfig.sensitiveLevel.render,
    },
-    {
-      dataIndex: 'isPublish',
-      title: '是否发布',
-      width: 100,
-      search: false,
-      render: (isPublish) => {
-        switch (isPublish) {
-          case 0:
-            return '否';
-          case 1:
-            return <span style={{ color: '#1677ff' }}>是</span>;
-          default:
-            return <Tag color="default">未知</Tag>;
-        }
-      },
-    },
+    // {
+    //   dataIndex: 'isPublish',
+    //   title: '是否发布',
+    //   width: 100,
+    //   search: false,
+    //   render: (isPublish) => {
+    //     switch (isPublish) {
+    //       case 0:
+    //         return '否';
+    //       case 1:
+    //         return <span style={{ color: '#1677ff' }}>是</span>;
+    //       default:
+    //         return <Tag color="default">未知</Tag>;
+    //     }
+    //   },
+    // },

    {
      dataIndex: 'description',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticFlows/components/XflowJsonSchemaFormDrawerForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticFlows/components/XflowJsonSchemaFormDrawerForm.tsx
@@ -7,7 +7,7 @@ import { connect } from 'umi';
 import { DATASOURCE_NODE_RENDER_ID } from '../constant';
 import DataSourceRelationFormDrawer from './DataSourceRelationFormDrawer';
 import ModelCreateForm from '../../Datasource/components/ModelCreateForm';
-// import ClassDataSourceTypeModal from '../../components/ClassDataSourceTypeModal1';
+// import ClassModelTypeModal from '../../components/ClassDataSourceTypeModal1';
 import { GraphApi } from '../service';
 import { SemanticNodeType } from '../../enum';
 import type { StateType } from '../../model';
@@ -154,7 +154,7 @@ const XflowJsonSchemaFormDrawerForm: React.FC<CreateFormProps> = (props) => {
        />
      </Drawer>
      {/* {
-        <ClassDataSourceTypeModal
+        <ClassModelTypeModal
          open={createDataSourceModalOpen}
          onCancel={() => {
            resetSelectedNode();
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/SemanticGraph/index.tsx
@@ -30,7 +30,7 @@ import NodeInfoDrawer from './components/NodeInfoDrawer';
 import DimensionInfoModal from '../components/DimensionInfoModal';
 import MetricInfoCreateForm from '../components/MetricInfoCreateForm';
 import DeleteConfirmModal from './components/DeleteConfirmModal';
-import ClassDataSourceTypeModal from '../components/ClassDataSourceTypeModal';
+import ClassModelTypeModal from '../components/ClassModelTypeModal';
 import GraphToolBar from './components/GraphToolBar';
 import GraphLegend from './components/GraphLegend';
 import GraphLegendVisibleModeItem from './components/GraphLegendVisibleModeItem';
@@ -1115,7 +1115,7 @@ const DomainManger: React.FC<Props> = ({ domainManger, dispatch }) => {
      )}

      {createDataSourceModalOpen && (
-        <ClassDataSourceTypeModal
+        <ClassModelTypeModal
          open={createDataSourceModalOpen}
          onCancel={() => {
            setNodeDataSource(undefined);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDimensionTable.tsx
@@ -18,7 +18,6 @@ import DimensionInfoModal from './DimensionInfoModal';
 import DimensionValueSettingModal from './DimensionValueSettingModal';
 import { ISemantic, IDataSource } from '../data';
 import TableHeaderFilter from './TableHeaderFilter';
-import moment from 'moment';
 import BatchCtrlDropDownButton from '@/components/BatchCtrlDropDownButton';
 import { ColumnsConfig } from './TableColumnRender';
 import styles from './style.less';
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassDataSourceTypeModal.tsx
@@ -1,19 +1,19 @@
-import { Drawer, Modal, Card, Row, Col } from 'antd';
+import { Drawer, Modal, Card, Row, Col, message } from 'antd';
 import { ConsoleSqlOutlined, CoffeeOutlined } from '@ant-design/icons';
 import React, { useState, useEffect } from 'react';
 import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import ModelCreateForm from '../Datasource/components/ModelCreateForm';
-import { excuteSql } from '../service';
+import { excuteSql, getModelDetail } from '../service';
 import type { StateType } from '../model';
 import DataSource from '../Datasource';
-import { IDataSource } from '../data';
+import { IDataSource, ISemantic } from '../data';
 import styles from './style.less';

 const { Meta } = Card;
 type Props = {
  open: boolean;
-  dataSourceItem: IDataSource.IDataSourceItem;
+  modelItem: ISemantic.IModelItem;
  onTypeChange?: (type: 'fast' | 'normal') => void;
  onSubmit?: () => void;
  onCancel?: () => void;
@@ -21,11 +21,11 @@ type Props = {
  domainManger: StateType;
 };

-const ClassDataSourceTypeModal: React.FC<Props> = ({
+const ClassModelTypeModal: React.FC<Props> = ({
  open,
  onTypeChange,
  onSubmit,
-  dataSourceItem,
+  modelItem: modelBasicItem,
  domainManger,
  onCancel,
  dispatch,
@@ -43,17 +43,36 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
  const [scriptColumns, setScriptColumns] = useState<IDataSource.IExecuteSqlColumn[]>([]);
  const [sqlParams, setSqlParams] = useState<IDataSource.ISqlParamsItem[]>([]);

+  const [modelItem, setModelItem] = useState<ISemantic.IModelItem>({});
+
  useEffect(() => {
-    if (!dataSourceItem?.id || !open) {
+    if (!modelBasicItem?.id || !open) {
      setCreateDataSourceModalOpen(true);
      return;
    }
-    if (dataSourceItem?.modelDetail?.queryType === 'table_query') {
+  }, [modelBasicItem, open]);
+
+  useEffect(() => {
+    if (modelBasicItem?.id) {
+      queryModelDetail(modelBasicItem.id);
+    }
+  }, [modelBasicItem]);
+
+  const queryModelDetail = async (modelId: number) => {
+    const { code, msg, data } = await getModelDetail({
+      modelId,
+    });
+    if (code === 200) {
+      setModelItem(data);
+      if (data?.modelDetail?.queryType === 'table_query') {
        setDataSourceModalVisible(true);
      } else {
        setCreateModalVisible(true);
      }
-  }, [dataSourceItem, open]);
+    } else {
+      message.error(msg);
+    }
+  };

  const queryDataBaseExcuteSql = (tableName: string) => {
    const sql = `select * from ${tableName}`;
@@ -73,10 +92,10 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
  };

  useEffect(() => {
-    // queryTableColumnListByScript(dataSourceItem);
-    setSql(dataSourceItem?.modelDetail?.sqlQuery);
+    // queryTableColumnListByScript(modelItem);
+    setSql(modelItem?.modelDetail?.sqlQuery);

-    const modelDetailFields = dataSourceItem?.modelDetail?.fields;
+    const modelDetailFields = modelItem?.modelDetail?.fields;
    if (Array.isArray(modelDetailFields)) {
      setScriptColumns(
        modelDetailFields.map((item) => {
@@ -87,7 +106,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
        }),
      );
    }
-  }, [dataSourceItem]);
+  }, [modelItem]);

  return (
    <>
@@ -149,7 +168,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
        <ModelCreateForm
          sql={fastModeSql}
          basicInfoFormMode="fast"
-          modelItem={dataSourceItem}
+          modelItem={modelItem}
          onCancel={() => {
            setDataSourceModalVisible(false);
            handleCancel();
@@ -169,7 +188,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
          sql={sql}
          databaseId={currentDatabaseId}
          basicInfoFormMode="normal"
-          modelItem={dataSourceItem}
+          modelItem={modelItem}
          scriptColumns={scriptColumns}
          sqlParams={sqlParams}
          onCancel={() => {
@@ -198,7 +217,7 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
            footer={null}
          >
            <DataSource
-              initialValues={dataSourceItem}
+              initialValues={modelItem}
              onSubmitSuccess={(dataSourceInfo) => {
                const { columns, sql, databaseId, sqlParams } = dataSourceInfo;
                setSql(sql);
@@ -216,4 +235,4 @@ const ClassDataSourceTypeModal: React.FC<Props> = ({
 };
 export default connect(({ domainManger }: { domainManger: StateType }) => ({
  domainManger,
-}))(ClassDataSourceTypeModal);
+}))(ClassModelTypeModal);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ModelTable.tsx
@@ -1,15 +1,15 @@
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
 import ProTable from '@ant-design/pro-table';
-import { message, Button, Space, Popconfirm, Input, Tag } from 'antd';
+import { message, Button, Space, Popconfirm, Input } from 'antd';
 import React, { useRef, useState, useEffect } from 'react';
 import { StatusEnum } from '../enum';
 import type { Dispatch } from 'umi';
 import { connect } from 'umi';
 import type { StateType } from '../model';
 import { deleteModel, updateModel } from '../service';
-import ClassDataSourceTypeModal from './ClassDataSourceTypeModal';
+import ClassModelTypeModal from './ClassModelTypeModal';
 import { ColumnsConfig } from './TableColumnRender';
-
+import TableHeaderFilter from './TableHeaderFilter';
 import moment from 'moment';
 import styles from './style.less';
 import { ISemantic } from '../data';
@@ -25,9 +25,28 @@ type Props = {
 const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelChange }) => {
  const [modelItem, setModelItem] = useState<ISemantic.IModelItem>();
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
+  const [filterParams, setFilterParams] = useState<Record<string, any>>({});
  const [createDataSourceModalOpen, setCreateDataSourceModalOpen] = useState(false);
  const actionRef = useRef<ActionType>();

+  const [tableData, setTableData] = useState<ISemantic.IModelItem[]>([]);
+
+  useEffect(() => {
+    if (!Array.isArray(modelList)) {
+      return;
+    }
+    setTableData(modelList);
+  }, [modelList]);
+
+  useEffect(() => {
+    const { key } = filterParams;
+    if (key) {
+      setTableData(modelList.filter((item) => item.name.includes(key)));
+    } else {
+      setTableData(modelList);
+    }
+  }, [filterParams]);
+
  const updateModelStatus = async (modelData: ISemantic.IModelItem) => {
    setSaveLoading(true);
    const { code, msg } = await updateModel({
@@ -177,10 +196,33 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
        rowKey="id"
        search={false}
        columns={columns}
-        dataSource={modelList}
+        dataSource={tableData}
        tableAlertRender={() => {
          return false;
        }}
+        headerTitle={
+          <TableHeaderFilter
+            components={[
+              {
+                label: '模型搜索',
+                component: (
+                  <Input.Search
+                    style={{ width: 280 }}
+                    placeholder="请输入模型名称"
+                    onSearch={(value) => {
+                      setFilterParams((preState) => {
+                        return {
+                          ...preState,
+                          key: value,
+                        };
+                      });
+                    }}
+                  />
+                ),
+              },
+            ]}
+          />
+        }
        size="small"
        options={{ reload: false, density: false, fullScreen: false }}
        toolBarRender={() =>
@@ -201,9 +243,9 @@ const ModelTable: React.FC<Props> = ({ modelList, disabledEdit = false, onModelC
        }
      />
      {createDataSourceModalOpen && (
-        <ClassDataSourceTypeModal
+        <ClassModelTypeModal
          open={createDataSourceModalOpen}
-          dataSourceItem={modelItem}
+          modelItem={modelItem}
          onSubmit={() => {
            onModelChange?.();
            setCreateDataSourceModalOpen(false);