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

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",

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;
+      setQueryParamsState(queryParams);
-      const { code, msg, data } = await queryDatasource(queryParams);
+      const checkState = await checkAvailableItem(fieldColumns.map((item) => item.nameEn));
-      setSaveLoading(false);
+      if (checkState) {
-      if (code === 200) {
-        message.success('保存模型成功！');
-        onSubmit?.({
-          ...queryParams,
-          ...data,
-          resData: data,
-        });
         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>
   );
 };

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 }}
       />

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;

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 '';

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) => {
+                  fieldList.reduce((data: ISemantic.IFieldTypeParamsItem[], item) => {
-                    if (fieldName.includes(value)) {
+                    if (item.fieldName.includes(value)) {
-                      data.push({ fieldName });
+                      data.push(item);
                     }
                     return data;
                   }, []),

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);

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);
                     }

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;
       }

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;
   }
 

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 {

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}`);
 }