[improvement][headless-fe] Optimized the tag setting system. (#868)

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

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

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react';
+import { Divider, Flex, Tag, Input, Table } from 'antd';
+import { METRIC_DEFINE_TYPE } from '../../constant';
+import styles from '../style.less';
+import { ISemantic } from '../../data';
+
+const { TextArea } = Input;
+type Props = {
+  metircData?: ISemantic.IMetricItem;
+};
+
+const MetricBasicInformation: React.FC<Props> = ({ metircData }) => {
+  const [defineData, setDefineData] = useState<{
+    name: string;
+    listName: string;
+    expr: string;
+    list: any[];
+    columns: any[];
+  }>();
+
+  const metricColumns = [
+    {
+      dataIndex: 'name',
+      title: '指标名称',
+    },
+    {
+      dataIndex: 'bizName',
+      title: '英文名称',
+    },
+  ];
+
+  const fieldColumns = [
+    {
+      dataIndex: 'fieldName',
+      title: '字段名称',
+    },
+    {
+      dataIndex: 'dataType',
+      title: '字段类型',
+    },
+  ];
+
+  const measureColumns = [
+    {
+      dataIndex: 'bizName',
+      title: '度量名称',
+      tooltip: '由模型名称_字段名称拼接而来',
+    },
+    {
+      dataIndex: 'constraint',
+      title: '限定条件',
+      width: 250,
+      tooltip:
+        '该限定条件用于在计算指标时限定口径，作用于度量，所用于过滤的维度必须在创建模型的时候被标记为日期或者维度，不需要加where关键字。比如：维度A="值1" and 维度B="值2"',
+      render: (_: any, record: any) => {
+        const { constraint } = record;
+        return <TextArea readOnly value={constraint} />;
+      },
+    },
+    {
+      dataIndex: 'agg',
+      title: '聚合函数',
+      width: 80,
+    },
+  ];
+
+  useEffect(() => {
+    if (!metircData) {
+      return;
+    }
+    const {
+      metricDefineType,
+      metricDefineByFieldParams,
+      metricDefineByMeasureParams,
+      metricDefineByMetricParams,
+    } = metircData;
+    switch (metricDefineType) {
+      case METRIC_DEFINE_TYPE.FIELD:
+        setDefineData({
+          name: '按字段',
+          listName: '字段列表',
+          expr: metricDefineByFieldParams.expr,
+          list: metricDefineByFieldParams.fields,
+          columns: fieldColumns,
+        });
+        break;
+      case METRIC_DEFINE_TYPE.MEASURE:
+        setDefineData({
+          name: '按度量',
+          listName: '度量列表',
+          expr: metricDefineByMeasureParams.expr,
+          list: metricDefineByMeasureParams.measures,
+          columns: measureColumns,
+        });
+        break;
+      case METRIC_DEFINE_TYPE.METRIC:
+        setDefineData({
+          name: '按指标',
+          listName: '指标列表',
+          expr: metricDefineByMetricParams.expr,
+          list: metricDefineByMetricParams.metrics,
+          columns: metricColumns,
+        });
+        break;
+      default:
+        break;
+    }
+  }, [metircData]);
+
+  return (
+    <div className={styles.sectionBox} style={{ padding: '10px 20px' }}>
+      <div className={styles.metricBasicInfo}>
+        <Flex justify="space-between" align="center">
+          <p className={styles.caliberSubTitle}>指标信息</p>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>指标ID：</span>
+            {metircData?.id}
+          </div>
+          <div>
+            <span className={styles.label}>中文名：</span>
+            {metircData?.name}
+          </div>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>英文名：</span>
+            {metircData?.bizName}
+          </div>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>别名：</span>
+            {metircData?.alias &&
+              metircData.alias.split(',').map((alias) => (
+                <Tag color="blue" key={alias}>
+                  {alias}
+                </Tag>
+              ))}
+          </div>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>分类：</span>
+            {Array.isArray(metircData?.classifications) &&
+              metircData.classifications.map((className) => (
+                <Tag color="blue" key={className}>
+                  {className}
+                </Tag>
+              ))}
+          </div>
+        </Flex>
+        <Divider />
+        <Flex justify="space-between" align="center">
+          <p className={styles.caliberSubTitle}>模型信息</p>
+        </Flex>
+
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>模型名：</span>
+            {metircData?.modelName}
+          </div>
+          <div>
+            <span className={styles.label}>模型ID：</span> {metircData?.modelId}
+          </div>
+        </Flex>
+
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>模型英文名：</span>
+            {metircData?.modelBizName}
+          </div>
+        </Flex>
+
+        <Divider />
+
+        <Flex justify="space-between" align="center">
+          <p className={styles.caliberSubTitle}>定义信息</p>
+        </Flex>
+        <Flex wrap="wrap">
+          <div>
+            <span className={styles.label}>定义类型：</span>
+            {defineData?.name}
+          </div>
+          <div>
+            <span className={styles.label}>表达式：</span>
+            {defineData?.expr}
+          </div>
+        </Flex>
+
+        <div className={styles.label} style={{ marginBottom: 10 }}>
+          {defineData?.listName}：
+        </div>
+        <Table
+          className={styles.defineDataTable}
+          columns={defineData?.columns}
+          dataSource={defineData?.list}
+          size="small"
+          pagination={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MetricBasicInformation;

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

@@ -108,7 +108,11 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
             <Switch size="small" />
           </FormItem>
         </StandardFormRow> */}
-
+        <StandardFormRow key="domainIds" title="主题域" block>
+          <FormItem name="domainIds">
+            <DomainTreeSelect />
+          </FormItem>
+        </StandardFormRow>
         {filterList.map((item) => {
           const { title, key, options } = item;
           return (
@@ -125,11 +129,6 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
             </StandardFormRow>
           );
         })}
-        <StandardFormRow key="domainIds" title="所属主题域" block>
-          <FormItem name="domainIds">
-            <DomainTreeSelect />
-          </FormItem>
-        </StandardFormRow>
       </Space>
     </Form>
   );

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

@@ -0,0 +1,187 @@
+import { message, Select, Tag } from 'antd';
+import React, { useState } from 'react';
+import CommonEditTable from '../../components/CommonEditTable';
+import { ISemantic } from '../../data';
+import {
+  queryRemarks,
+  deleteMetricDataRemark,
+  insertOrUpdateMetircDataRemark,
+} from '../../service';
+import styles from '../style.less';
+
+type Props = {
+  metricId: number;
+};
+
+const remarkColumns = [
+  {
+    title: '开始时间',
+    dataIndex: 'startTime',
+    valueType: 'dateTime',
+    search: false,
+    width: 180,
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'endTime',
+    valueType: 'dateTime',
+    search: false,
+    width: 180,
+  },
+  {
+    title: '产品',
+    dataIndex: 'product',
+    width: 150,
+    tooltip: '',
+    renderFormItem: () => {
+      return (
+        <Select
+          mode="tags"
+          maxTagCount={1}
+          style={{ width: '100%' }}
+          placeholder="请选择产品类型"
+          options={[
+            {
+              label: 'TME整体',
+              value: 'TME整体',
+            },
+            {
+              label: 'QQ音乐',
+              value: 'QQ音乐',
+            },
+            {
+              label: '酷狗音乐',
+              value: '酷狗音乐',
+            },
+            {
+              label: '酷我音乐',
+              value: '酷我音乐',
+            },
+          ]}
+        />
+      );
+    },
+    render: (_: any, row: any) => {
+      return Array.isArray(row?.product) ? (
+        row?.product.map((item: any) => <Tag key={item}>{item}</Tag>)
+      ) : (
+        <Tag key={row.product}>{row.product}</Tag>
+      );
+    },
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 200,
+    tooltip: '',
+    search: false,
+    fieldProps: {
+      placeholder: '请填写备注',
+    },
+    formItemProps: {
+      rules: [
+        {
+          required: true,
+          whitespace: true,
+          message: '此项是必填项',
+        },
+      ],
+    },
+  },
+];
+
+const MetricRemark: React.FC<Props> = ({ metricId }) => {
+  const [remarkData, setRemarkData] = useState<ISemantic.IMetricRemarkItem[]>([]);
+  const [remarkPagination, setRemarkPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+
+  const queryRemarkData = async () => {
+    const { code, data, msg } = await queryRemarks({
+      current: remarkPagination.current,
+      size: remarkPagination.pageSize,
+      metricId,
+    });
+    const { records, size, current, total } = data || {};
+    let resData: any = {};
+
+    if (code == 200) {
+      setRemarkPagination({
+        pageSize: size,
+        current,
+        total,
+      });
+
+      const list = records.map((item: any) => {
+        return {
+          ...item,
+          editRowId: (Math.random() * 1000000).toFixed(0),
+        };
+      });
+      setRemarkData(list);
+      resData = {
+        data: list || [],
+        success: true,
+      };
+    } else {
+      message.error(msg);
+      resData = {
+        data: [],
+        total: 0,
+        success: false,
+      };
+    }
+    return resData;
+  };
+
+  const handleMetricDataDelete = async (id: string) => {
+    const { code, msg } = await deleteMetricDataRemark(id);
+    if (code !== 200) {
+      message.error(msg);
+    }
+  };
+
+  const handleMetricRemarksSubmit = async (data: any) => {
+    const { code, msg } = await insertOrUpdateMetircDataRemark({
+      ...data,
+      product: Array.isArray(data.product) ? data.product.join() : data.product,
+      metricId,
+    });
+    if (code !== 200) {
+      message.error(msg);
+    }
+  };
+
+  return (
+    <div className={styles.sectionBox} style={{ padding: '20px' }}>
+      <div className={styles.table}>
+        <CommonEditTable
+          position="top"
+          search={false}
+          request={queryRemarkData}
+          tableDataSource={remarkData}
+          columnList={remarkColumns}
+          onDataSourceChange={(tableData) => { }}
+          pagination={{
+            ...remarkPagination,
+            onChange: (page: number) => {
+              setRemarkPagination({ ...remarkPagination, current: page });
+            },
+          }}
+          onDelete={(data: any) => {
+            handleMetricDataDelete(data.id);
+          }}
+          editable={{
+            onSave: async (rowKey: string, data: any) => {
+              handleMetricRemarksSubmit(data);
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MetricRemark;

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

@@ -43,10 +43,12 @@ const MetricTrendSection: React.FC<Props> = ({
     startDate: string;
     endDate: string;
     dateField: string;
+    period: DateRangeType;
   }>({
     startDate: dayjs().subtract(6, 'days').format('YYYY-MM-DD'),
     endDate: dayjs().format('YYYY-MM-DD'),
     dateField: DateFieldMap[DateRangeType.DAY],
+    period: DateRangeType.DAY,
   });
   const [rowNumber, setRowNumber] = useState<number>(5);
 
@@ -66,31 +68,24 @@ const MetricTrendSection: React.FC<Props> = ({
     if (!metircData) {
       return;
     }
-    const { modelId, bizName, name } = metircData;
+    const { bizName, id, domainId, name } = metircData;
     indicatorFields.current = [{ name, column: bizName }];
 
-    const dimensionFiltersBizNameList = dimensionFilters.map((item) => {
-      return item.bizName;
-    });
-
-    const bizNameList = Array.from(new Set([...dimensionFiltersBizNameList, ...dimensionGroup]));
-
-    const modelIds = dimensionList.reduce(
+    const dimensionIds = dimensionList.reduce(
       (idList: number[], item: ISemantic.IDimensionItem) => {
-        if (bizNameList.includes(item.bizName)) {
-          idList.push(item.modelId);
+        if (dimensionGroup.includes(item.bizName)) {
+          idList.push(item.id);
         }
         return idList;
       },
-      [modelId],
+      [],
     );
-
     const res = await queryStruct({
-      // modelId,
-      modelIds: Array.from(new Set(modelIds)),
-      bizName,
-      groups: dimensionGroup,
-      dimensionFilters,
+      domainId,
+      metricIds: [id],
+      dimensionIds,
+      filters: dimensionFilters,
+      period: periodDate.period,
       dateField: periodDate.dateField,
       startDate: periodDate.startDate,
       endDate: periodDate.endDate,
@@ -162,13 +157,16 @@ const MetricTrendSection: React.FC<Props> = ({
                       const [startDate, endDate] = value;
                       const { dateSettingType, dynamicParams, staticParams } = config;
                       let dateField = DateFieldMap[DateRangeType.DAY];
+                      let period = DateRangeType.DAY;
                       if (DateSettingType.DYNAMIC === dateSettingType) {
                         dateField = DateFieldMap[dynamicParams.dateRangeType];
+                        period = dynamicParams.dateRangeType;
                       }
                       if (DateSettingType.STATIC === dateSettingType) {
                         dateField = DateFieldMap[staticParams.dateRangeType];
+                        period = staticParams.dateRangeType;
                       }
-                      setPeriodDate({ startDate, endDate, dateField });
+                      setPeriodDate({ startDate, endDate, dateField, period });
                     }}
                     disabledAdvanceSetting={true}
                   />