[improvement][headless-fe] Added model editing side effect detection. (#734)

* [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.
2025-12-10 19:51:00 +00:00 · 2024-02-21 20:10:50 +08:00
parent fc5ff01eca
commit 16afbc6945
13 changed files with 274 additions and 26 deletions
--- a/webapp/packages/supersonic-fe/package.json
+++ b/webapp/packages/supersonic-fe/package.json
@@ -16,6 +16,7 @@
    "dev:inner": "npm run start:dev",
    "no:dev:os": "NODE_OPTIONS=--openssl-legacy-provider npm run start:osdev",
    "no:dev:inner": "NODE_OPTIONS=--openssl-legacy-provider npm run start:dev",
+    "no:build:inner": "cross-env NODE_OPTIONS=--openssl-legacy-provider REACT_APP_ENV=prod APP_TARGET=inner umi build",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "umi g tmp",
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceCreateForm.tsx
@@ -5,11 +5,13 @@ import DataSourceFieldForm from './DataSourceFieldForm';
 import { formLayout } from '@/components/FormHelper/utils';
 import { EnumDataSourceType } from '../constants';
 import styles from '../style.less';
-import { updateModel, createModel, getColumns } from '../../service';
+import { updateModel, createModel, getColumns, getUnAvailableItem } from '../../service';
 import type { Dispatch } from 'umi';
 import type { StateType } from '../../model';
 import { connect } from 'umi';
 import { ISemantic, IDataSource } from '../../data';
+import { isArrayOfValues } from '@/utils/utils';
+import EffectDimensionAndMetricTipsModal from './EffectDimensionAndMetricTipsModal';

 export type CreateFormProps = {
  domainManger: StateType;
@@ -54,6 +56,12 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
  const [saveLoading, setSaveLoading] = useState(false);
  const [hasEmptyNameField, setHasEmptyNameField] = useState<boolean>(false);
  const [formDatabaseId, setFormDatabaseId] = useState<number>();
+  const [queryParamsState, setQueryParamsState] = useState({});
+  const [effectTipsModalOpenState, setEffectTipsModalOpenState] = useState<boolean>(false);
+  const [effectTipsData, setEffectTipsData] = useState<
+    (ISemantic.IDimensionItem | ISemantic.IMetricItem)[]
+  >([]);
+
  const formValRef = useRef(initFormVal as any);
  const [form] = Form.useForm();
  const { databaseConfigList, selectModelId: modelId, selectDomainId } = domainManger;
@@ -84,6 +92,58 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
  const forward = () => setCurrentStep(currentStep + 1);
  const backward = () => setCurrentStep(currentStep - 1);

+  const checkAvailableItem = async (fields: string[] = []) => {
+    if (!modelItem) {
+      return false;
+    }
+    const originalFields = modelItem.modelDetail?.fields || [];
+    const hasRemoveFields = originalFields.reduce(
+      (fieldList: string[], item: IDataSource.IDataSourceDetailFieldsItem) => {
+        const { fieldName } = item;
+        if (!fields.includes(fieldName)) {
+          fieldList.push(fieldName);
+        }
+        return fieldList;
+      },
+      [],
+    );
+    if (!isArrayOfValues(hasRemoveFields)) {
+      return false;
+    }
+    const { code, data, msg } = await getUnAvailableItem({
+      modelId: modelItem?.id,
+      fields: hasRemoveFields,
+    });
+    if (code === 200 && data) {
+      const { metricResps = [], dimensionResps = [] } = data;
+      if (!isArrayOfValues(metricResps) && !isArrayOfValues(dimensionResps)) {
+        return false;
+      }
+      setEffectTipsData([...metricResps, ...dimensionResps]);
+      setEffectTipsModalOpenState(true);
+      return true;
+    }
+    message.error(msg);
+    return false;
+  };
+
+  const saveModel = async (queryParams: any) => {
+    setSaveLoading(true);
+    const queryDatasource = isEdit ? updateModel : createModel;
+    const { code, msg, data } = await queryDatasource(queryParams);
+    setSaveLoading(false);
+    if (code === 200) {
+      message.success('保存模型成功！');
+      onSubmit?.({
+        ...queryParams,
+        ...data,
+        resData: data,
+      });
+      return;
+    }
+    message.error(msg);
+  };
+
  const getFieldsClassify = (fieldsList: any[]) => {
    const classify = fieldsList.reduce(
      (fieldsClassify, item: any) => {
@@ -129,6 +189,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
          case EnumDataSourceType.PRIMARY:
            fieldsClassify.identifiers.push({
              bizName: fieldName,
+              isCreateDimension,
              name,
              type,
              entityNames,
@@ -156,6 +217,7 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
    );
    return classify;
  };
+
  const handleNext = async (saveState: boolean = false) => {
    const fieldsValue = await form.validateFields();

@@ -175,7 +237,6 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
    if (!saveState && currentStep < 1) {
      forward();
    } else {
-      setSaveLoading(true);
      const { dbName, tableName } = submitForm;
      const queryParams = {
        ...submitForm,
@@ -190,19 +251,12 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
          sqlQuery: sql,
        },
      };
-      const queryDatasource = isEdit ? updateModel : createModel;
-      const { code, msg, data } = await queryDatasource(queryParams);
-      setSaveLoading(false);
-      if (code === 200) {
-        message.success('保存模型成功！');
-        onSubmit?.({
-          ...queryParams,
-          ...data,
-          resData: data,
-        });
+      setQueryParamsState(queryParams);
+      const checkState = await checkAvailableItem(fieldColumns.map((item) => item.nameEn));
+      if (checkState) {
        return;
      }
-      message.error(msg);
+      saveModel(queryParams);
    }
  };

@@ -484,6 +538,17 @@ const DataSourceCreateForm: React.FC<CreateFormProps> = ({
        {renderContent()}
      </Form>
      {children}
+
+      <EffectDimensionAndMetricTipsModal
+        open={effectTipsModalOpenState}
+        tableDataSource={effectTipsData}
+        onCancel={() => {
+          setEffectTipsModalOpenState(false);
+        }}
+        onOk={() => {
+          saveModel(queryParamsState);
+        }}
+      />
    </Modal>
  );
 };
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/DataSourceFieldForm.tsx
@@ -302,6 +302,7 @@ const DataSourceFieldForm: React.FC<Props> = ({ fields, sql, onFieldChange, onSq
        dataSource={fields}
        columns={columns}
        rowKey="bizName"
+        virtual
        pagination={false}
        scroll={{ y: 500 }}
      />
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/EffectDimensionAndMetricTipsModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/EffectDimensionAndMetricTipsModal.tsx
@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Modal, Table, Tag, message } from 'antd';
+import TransTypeTag from '../../components/TransTypeTag';
+import { SemanticNodeType } from '../../enum';
+import { ISemantic } from '../../data';
+import styles from '../../components/style.less';
+import { StatusEnum } from '../../enum';
+import { batchUpdateMetricStatus, batchUpdateDimensionStatus } from '../../service';
+
+type Props = {
+  open: boolean;
+  tableDataSource: (ISemantic.IDimensionItem | ISemantic.IMetricItem)[];
+  onOk?: () => void;
+  onCancel?: () => void;
+};
+
+const EffectDimensionAndMetricTipsModal: React.FC<Props> = ({
+  open,
+  tableDataSource,
+  onOk,
+  onCancel,
+}) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  useEffect(() => {}, []);
+
+  const queryBatchUpdateDimensionStatus = async (ids: React.Key[], status: StatusEnum) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    setLoading(true);
+    const { code, msg } = await batchUpdateDimensionStatus({
+      ids,
+      status,
+    });
+    setLoading(false);
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const queryBatchUpdateMetricStatus = async (ids: React.Key[], status: StatusEnum) => {
+    if (Array.isArray(ids) && ids.length === 0) {
+      return;
+    }
+    const { code, msg } = await batchUpdateMetricStatus({
+      ids,
+      status,
+    });
+    if (code === 200) {
+      return;
+    }
+    message.error(msg);
+  };
+
+  const updateState = async () => {
+    const dimensionIds: React.Key[] = [];
+    const metricIds: React.Key[] = [];
+    tableDataSource.forEach((item) => {
+      if (item.typeEnum === SemanticNodeType.DIMENSION) {
+        dimensionIds.push(item.id);
+      }
+      if (item.typeEnum === SemanticNodeType.METRIC) {
+        metricIds.push(item.id);
+      }
+    });
+    if (dimensionIds.length > 0) {
+      await queryBatchUpdateDimensionStatus(dimensionIds, StatusEnum.UNAVAILABLE);
+    }
+    if (metricIds.length > 0) {
+      await queryBatchUpdateMetricStatus(metricIds, StatusEnum.UNAVAILABLE);
+    }
+    onOk?.();
+  };
+
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      width: 100,
+    },
+    {
+      title: '英文名称',
+      dataIndex: 'bizName',
+      width: 100,
+    },
+    {
+      title: '类型',
+      dataIndex: 'typeEnum',
+      width: 80,
+      render: (transType: SemanticNodeType) => {
+        return <TransTypeTag type={transType} />;
+      },
+    },
+    {
+      title: '创建人',
+      width: 100,
+      dataIndex: 'createdBy',
+    },
+  ];
+
+  return (
+    <Modal
+      forceRender
+      styles={{
+        body: {
+          padding: 12,
+        },
+      }}
+      width={800}
+      destroyOnClose
+      title={`受影响的维度&指标`}
+      maskClosable={false}
+      open={open}
+      onOk={() => {
+        updateState();
+      }}
+      // footer={renderFooter()}
+      onCancel={() => {
+        onCancel?.();
+      }}
+    >
+      <p
+        className={styles.desc}
+        style={{ border: 'unset', padding: 0, marginBottom: 20, marginLeft: 2 }}
+      >
+        检测到模型信息变更会对以下
+        <Tag color="#2499ef14" className={styles.markerTag}>
+          指标
+        </Tag>
+        和
+        <Tag color="#2499ef14" className={styles.markerTag}>
+          维度
+        </Tag>
+        产生影响。如确认保存，将会自动置为
+        <Tag color="#2499ef14" className={styles.markerTag}>
+          不可用状态
+        </Tag>
+        。
+      </p>
+      <Table
+        size="small"
+        dataSource={tableDataSource}
+        columns={columns}
+        rowKey="bizName"
+        pagination={false}
+        scroll={{ y: 500 }}
+      />
+    </Modal>
+  );
+};
+
+export default EffectDimensionAndMetricTipsModal;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionMetricRelationTableTransfer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/DimensionMetricRelationTableTransfer.tsx
@@ -62,7 +62,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
      return {
        ...item,
        transType,
-        disabled: checkedMap[id]?.inheritFromModel,
+        disabled: checkedMap[id]?.inheritedFromModel,
        key: `${id}`,
      };
    });
@@ -73,6 +73,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
    if (!Array.isArray(relationsInitialValue)) {
      return;
    }
+    console.log(relationsInitialValue, 'relationsInitialValue');
    const ids = relationsInitialValue.map((item) => `${item.dimensionId}`);
    const relationMap = relationsInitialValue.reduce((relationCheckedMap, item: any) => {
      const { dimensionId } = item;
@@ -116,7 +117,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
      (relationList: ISemantic.IDrillDownDimensionItem[], dimensionId: string) => {
        const target = relationCheckedMap[dimensionId];
        if (target) {
-          if (target.inheritFromModel === true && !target.necessary) {
+          if (target.inheritedFromModel === true && !target.necessary) {
            return relationList;
          }
          relationList.push(target);
@@ -124,7 +125,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
          relationList.push({
            dimensionId: Number(dimensionId),
            necessary: false,
-            inheritFromModel: false,
+            inheritedFromModel: false,
          });
        }
        return relationList;
@@ -238,7 +239,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
            },
            selectedRowKeys: listSelectedKeys,
            renderCell: function (checked, record, index, originNode) {
-              if (checkedMap[record.id]?.inheritFromModel === true) {
+              if (checkedMap[record.id]?.inheritedFromModel === true) {
                return (
                  <Tooltip title="来自模型默认设置维度">
                    <EnvironmentOutlined style={{ color: '#0958d9' }} />
@@ -256,7 +257,7 @@ const DimensionMetricRelationTableTransfer: React.FC<Props> = ({
              dataSource={filteredItems as any}
              size="small"
              rowClassName={(record) => {
-                if (checkedMap[record.id]?.inheritFromModel) {
+                if (checkedMap[record.id]?.inheritedFromModel) {
                  return 'inherit-from-model-row';
                }
                return '';
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx
@@ -9,7 +9,7 @@ import { ISemantic } from '../data';

 type Props = {
  typeParams: ISemantic.IFieldTypeParams;
-  fieldList: string[];
+  fieldList: ISemantic.IFieldTypeParamsItem[];
  onFieldChange: (fields: ISemantic.IFieldTypeParamsItem[]) => void;
  onSqlChange: (sql: string) => void;
 };
@@ -85,10 +85,15 @@ const MetricFieldFormTable: React.FC<Props> = ({
            search: {
              placeholder: '请输入字段名称',
              onSearch: (value: string) => {
+                if (!value) {
+                  setTableData(fieldList);
+                  return;
+                }
+
                setTableData(
-                  fieldList.reduce((data: ISemantic.IFieldTypeParamsItem[], fieldName) => {
-                    if (fieldName.includes(value)) {
-                      data.push({ fieldName });
+                  fieldList.reduce((data: ISemantic.IFieldTypeParamsItem[], item) => {
+                    if (item.fieldName.includes(value)) {
+                      data.push(item);
                    }
                    return data;
                  }, []),
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
@@ -100,7 +100,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
  const [defineType, setDefineType] = useState(METRIC_DEFINE_TYPE.MEASURE);

  const [createNewMetricList, setCreateNewMetricList] = useState<ISemantic.IMetricItem[]>([]);
-  const [fieldList, setFieldList] = useState<string[]>([]);
+  const [fieldList, setFieldList] = useState<ISemantic.IFieldTypeParamsItem[]>([]);
  const [isPercentState, setIsPercentState] = useState<boolean>(false);
  const [isDecimalState, setIsDecimalState] = useState<boolean>(false);
  const [hasMeasuresState, setHasMeasuresState] = useState<boolean>(true);
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMeasuresFormTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMeasuresFormTable.tsx
@@ -131,8 +131,16 @@ const MetricMeasuresFormTable: React.FC<Props> = ({
            search: {
              placeholder: '请输入度量名称',
              onSearch: (value: string) => {
+                const datasource =
+                  datasourceId && Array.isArray(measuresList)
+                    ? measuresList.filter((item) => item.datasourceId === datasourceId)
+                    : measuresList;
+                if (!value) {
+                  setTableData(datasource);
+                  return;
+                }
                setTableData(
-                  [...tableData].reduce((data: ISemantic.IMeasure[], item: ISemantic.IMeasure) => {
+                  [...datasource].reduce((data: ISemantic.IMeasure[], item: ISemantic.IMeasure) => {
                    if (item.bizName.includes(value)) {
                      data.push(item);
                    }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
@@ -282,6 +282,12 @@ export const ColumnsConfig = {
            label: '已删除',
          };
          break;
+        case StatusEnum.UNAVAILABLE:
+          tagProps = {
+            color: 'default',
+            label: '不可用',
+          };
+          break;
        default:
          break;
      }
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/data.d.ts
@@ -234,7 +234,7 @@ export declare namespace ISemantic {

  interface IDrillDownDimensionItem {
    dimensionId: number;
-    inheritFromModel?: boolean;
+    inheritedFromModel?: boolean;
    necessary?: boolean;
  }

--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/enum.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/enum.ts
@@ -28,11 +28,12 @@ export enum DictTaskState {
 }

 export enum StatusEnum {
+  UNKNOWN = -1,
  INITIALIZED = 0,
  ONLINE = 1,
  OFFLINE = 2,
  DELETED = 3,
-  UNKNOWN = -1,
+  UNAVAILABLE = 4,
 }

 export enum OperatorEnum {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/service.ts
@@ -426,6 +426,13 @@ export function deleteModel(modelId: number): Promise<any> {
  });
 }

+export function getUnAvailableItem(data: any): Promise<any> {
+  return request(`${process.env.API_BASE_URL}model/getUnAvailableItem`, {
+    method: 'POST',
+    data,
+  });
+}
+
 export function getModelDetail(data: any): Promise<any> {
  return request.get(`${process.env.API_BASE_URL}model/getModel/${data.modelId}`);
 }
--- a/webapp/packages/supersonic-fe/webapp_1225.zip
+++ b/webapp/packages/supersonic-fe/webapp_1225.zip