[improvement][semantic-fe] The organization structure selection feature has been added to the permission management. (#657)

* [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.
2025-12-11 12:07:42 +00:00 · 2024-01-19 16:26:35 +08:00
parent cbf38ed785
commit 3ba9073a1b
7 changed files with 518 additions and 36 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx
@@ -161,10 +161,10 @@ const ClassMetricTable: React.FC<Props> = ({ domainManger, dispatch }) => {
  };

  const columns: ProColumns[] = [
-    {
-      dataIndex: 'id',
-      title: 'ID',
-    },
+    // {
+    //   dataIndex: 'id',
+    //   title: 'ID',
+    // },
    {
      dataIndex: 'name',
      title: '指标',
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricFieldFormTable.tsx
@@ -0,0 +1,137 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Button, Tag, Space } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import ProCard from '@ant-design/pro-card';
+import SqlEditor from '@/components/SqlEditor';
+import styles from './style.less';
+import FormLabelRequire from './FormLabelRequire';
+import { ISemantic } from '../data';
+
+type Props = {
+  typeParams: ISemantic.IFieldTypeParams;
+  fieldList: string[];
+  onFieldChange: (fields: ISemantic.IFieldTypeParamsItem[]) => void;
+  onSqlChange: (sql: string) => void;
+};
+
+const MetricMeasuresFormTable: React.FC<Props> = ({
+  typeParams,
+  fieldList,
+  onFieldChange,
+  onSqlChange,
+}) => {
+  const [tableData, setTableData] = useState<any[]>([]);
+
+  const [defineTypeParams, setDefineTypeParams] = useState(
+    typeParams || {
+      expr: '',
+      metrics: [],
+    },
+  );
+
+  useEffect(() => {
+    if (!Array.isArray(fieldList)) {
+      setTableData([]);
+      return;
+    }
+    setTableData(fieldList);
+  }, [fieldList]);
+
+  useEffect(() => {
+    setDefineTypeParams({ ...typeParams });
+  }, [typeParams]);
+
+  const [exprString, setExprString] = useState(typeParams?.expr || '');
+
+  const [selectedKeys, setSelectedKeys] = useState<string[]>(() => {
+    return defineTypeParams.fields.map((item: any) => {
+      return item.fieldName;
+    });
+  });
+
+  const columns = [
+    {
+      dataIndex: 'fieldName',
+      title: '字段名称',
+    },
+    {
+      dataIndex: 'dataType',
+      title: '字段类型',
+    },
+  ];
+
+  const rowSelection = {
+    selectedRowKeys: selectedKeys,
+    onChange: (_selectedRowKeys: any[]) => {
+      setSelectedKeys([..._selectedRowKeys]);
+      onFieldChange(
+        _selectedRowKeys.map((fieldName) => {
+          return { fieldName };
+        }),
+      );
+    },
+  };
+
+  return (
+    <>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <ProTable
+          headerTitle={<FormLabelRequire title="字段列表" />}
+          rowKey="fieldName"
+          columns={columns}
+          dataSource={tableData}
+          pagination={false}
+          search={false}
+          toolbar={{
+            search: {
+              placeholder: '请输入字段名称',
+              onSearch: (value: string) => {
+                setTableData(
+                  fieldList.reduce((data: ISemantic.IFieldTypeParamsItem[], fieldName) => {
+                    if (fieldName.includes(value)) {
+                      data.push({ fieldName });
+                    }
+                    return data;
+                  }, []),
+                );
+              },
+            },
+          }}
+          size="small"
+          options={false}
+          tableAlertRender={false}
+          scroll={{ y: 500 }}
+          rowSelection={rowSelection}
+        />
+        <ProCard
+          title={<FormLabelRequire title="字段表达式" />}
+          // tooltip="度量表达式由上面选择的度量组成，如选择了度量A和B，则可将表达式写成A+B"
+        >
+          <div>
+            <p
+              className={styles.desc}
+              style={{ border: 'unset', padding: 0, marginBottom: 20, marginLeft: 2 }}
+            >
+              由于字段上是不带聚合函数的，因此通过字段x和y创建指标时，表达式需要写
+              <Tag color="#2499ef14" className={styles.markerTag}>
+                聚合函数
+              </Tag>
+              如: sum(x) + sum(y)
+            </p>
+            <SqlEditor
+              value={exprString}
+              onChange={(sql: string) => {
+                const expr = sql;
+                setExprString(expr);
+                onSqlChange?.(expr);
+              }}
+              height={'150px'}
+            />
+          </div>
+        </ProCard>
+      </Space>
+    </>
+  );
+};
+
+export default MetricMeasuresFormTable;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricInfoCreateForm.tsx
@@ -336,7 +336,9 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
    }
  };
  const queryMetricsToCreateNewMetric = async () => {
-    const { code, data } = await getMetricsToCreateNewMetric({ modelId });
+  const { code, data } = await getMetricsToCreateNewMetric({
+      modelId: modelId || metricItem?.modelId,
+    });
    if (code === 200) {
      setCreateNewMetricList(data);
    } else {
@@ -737,7 +739,7 @@ const MetricInfoCreateForm: React.FC<CreateFormProps> = ({
              type="primary"
              key="console"
              onClick={() => {
-                history.replace(`/model/${domainId}/${modelId}/dataSource`);
+                history.replace(`/model/${domainId}/${modelId || metricItem?.modelId}/dataSource`);
                onCancel?.();
              }}
            >
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMetricFormTable.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricMetricFormTable.tsx
@@ -0,0 +1,153 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Tag, Space } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import ProCard from '@ant-design/pro-card';
+import SqlEditor from '@/components/SqlEditor';
+import FormLabelRequire from './FormLabelRequire';
+import styles from './style.less';
+import { ISemantic } from '../data';
+
+type Props = {
+  typeParams: ISemantic.IMetricTypeParams;
+  metricList: ISemantic.IMetricItem[];
+  // selectedMeasuresList: any;
+  onFieldChange: (metrics: ISemantic.IMetricTypeParamsItem[]) => void;
+  onSqlChange: (sql: string) => void;
+};
+
+const MetricMetricFormTable: React.FC<Props> = ({
+  typeParams,
+  // selectedMeasuresList = [],
+  metricList,
+  onFieldChange,
+  onSqlChange,
+}) => {
+  const actionRef = useRef<ActionType>();
+
+  const [tableData, setTableData] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (!Array.isArray(metricList)) {
+      setTableData([]);
+      return;
+    }
+    setTableData(metricList);
+  }, [metricList]);
+
+  const [defineTypeParams, setDefineTypeParams] = useState(
+    typeParams || {
+      expr: '',
+      metrics: [],
+    },
+  );
+
+  useEffect(() => {
+    setDefineTypeParams({ ...typeParams });
+  }, [typeParams]);
+
+  const [exprString, setExprString] = useState(typeParams?.expr || '');
+
+  // const [selectMeasuresList, setSelectMeasuresList] = useState<IDataSource.IMeasuresItem[]>([]);
+
+  const [selectedMeasuresKeys, setSelectedMeasuresKeys] = useState<string[]>(() => {
+    // return [];
+    return defineTypeParams.metrics.map((item: any) => {
+      return item.bizName;
+    });
+  });
+
+  const columns = [
+    {
+      dataIndex: 'name',
+      title: '指标名称',
+    },
+    {
+      dataIndex: 'bizName',
+      title: '英文名称',
+    },
+  ];
+
+  const rowSelection = {
+    selectedRowKeys: selectedMeasuresKeys,
+    onChange: (_selectedRowKeys: any[]) => {
+      setSelectedMeasuresKeys([..._selectedRowKeys]);
+      onFieldChange(
+        metricList.reduce(
+          (metrics: ISemantic.IMetricTypeParamsItem[], item: ISemantic.IMetricItem) => {
+            if (_selectedRowKeys.includes(item.bizName)) {
+              metrics.push({
+                bizName: item.bizName,
+                id: item.id,
+              });
+            }
+            return metrics;
+          },
+          [],
+        ),
+      );
+    },
+  };
+
+  return (
+    <>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <ProTable
+          actionRef={actionRef}
+          headerTitle={<FormLabelRequire title="指标列表" />}
+          rowKey="bizName"
+          columns={columns}
+          dataSource={tableData}
+          pagination={false}
+          search={false}
+          toolbar={{
+            search: {
+              placeholder: '请输入指标名称',
+              onSearch: (value: string) => {
+                setTableData(
+                  metricList.reduce(
+                    (data: ISemantic.IMetricItem[], item: ISemantic.IMetricItem) => {
+                      if (item.name.includes(value)) {
+                        data.push(item);
+                      }
+                      return data;
+                    },
+                    [],
+                  ),
+                );
+              },
+            },
+          }}
+          size="small"
+          options={false}
+          tableAlertRender={false}
+          scroll={{ y: 500 }}
+          rowSelection={rowSelection}
+        />
+        <ProCard title={<FormLabelRequire title="指标表达式" />} tooltip="">
+          <p
+            className={styles.desc}
+            style={{ border: 'unset', padding: 0, marginBottom: 20, marginLeft: 2 }}
+          >
+            已创建的指标已经过聚合，因此通过这些指标来创建新的指标无需指定
+            <Tag color="#2499ef14" className={styles.markerTag}>
+              聚合函数
+            </Tag>
+            ，如根据指标c和指标d来创建新的指标，因为指标本身带有聚合函数，因此表达式可以写成:
+            c+d-100
+          </p>
+          <SqlEditor
+            value={exprString}
+            onChange={(sql: string) => {
+              const expr = sql;
+              setExprString(expr);
+              onSqlChange?.(expr);
+            }}
+            height={'150px'}
+          />
+        </ProCard>
+      </Space>
+    </>
+  );
+};
+
+export default MetricMetricFormTable;
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/MetricTableColumnRender.tsx
@@ -0,0 +1,190 @@
+import { Space, Tag, Typography } from 'antd';
+import { StatusEnum } from '../enum';
+import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_COLOR } from '../constant';
+import { TagsOutlined, UserOutlined, FieldNumberOutlined, ReadOutlined } from '@ant-design/icons';
+import { history } from 'umi';
+import { ISemantic } from '../data';
+import { isString } from 'lodash';
+import { isArrayOfValues } from '@/utils/utils';
+import styles from './style.less';
+import MetricStar from '../Metric/components/MetricStar';
+
+const { Text, Link } = Typography;
+
+export const ColumnsConfig = {
+  metricInfo: {
+    render: (_, record: ISemantic.IMetricItem) => {
+      const { name, alias, bizName, sensitiveLevel, createdBy, tags, id, isCollect } = record;
+      return (
+        <>
+          <div>
+            <Space>
+              <MetricStar metricId={id} initState={isCollect} />
+
+              <a
+                className={styles.textLink}
+                style={{ fontWeight: 500, marginRight: 10 }}
+                onClick={() => {
+                  history.push(`/metric/detail/${id}`);
+                }}
+              >
+                {name}
+              </a>
+              <Tag
+                color={SENSITIVE_LEVEL_COLOR[sensitiveLevel]}
+                style={{ lineHeight: '16px', position: 'relative', top: '-1px' }}
+              >
+                {SENSITIVE_LEVEL_ENUM[sensitiveLevel]}
+              </Tag>
+            </Space>
+          </div>
+          <div style={{ color: '#5f748d', fontSize: 14, marginTop: 5 }}>{bizName}</div>
+
+          <div style={{ marginTop: 8 }}>
+            <Space direction="vertical" size={4}>
+              {alias && (
+                <Space size={4} style={{ color: '#5f748d', fontSize: 12 }}>
+                  <ReadOutlined />
+                  <div style={{ width: 'max-content' }}>别名:</div>
+                  <span style={{ marginLeft: 2 }}>
+                    <Space size={[0, 8]} wrap>
+                      {isString(alias) &&
+                        alias.split(',').map((aliasName: string) => {
+                          return (
+                            <Tag
+                              color="#eee"
+                              key={aliasName}
+                              style={{
+                                borderRadius: 44,
+                                maxWidth: 90,
+                                minWidth: 40,
+                                backgroundColor: 'rgba(18, 31, 67, 0.04)',
+                              }}
+                            >
+                              <Text
+                                style={{
+                                  maxWidth: 80,
+                                  color: 'rgb(95, 116, 141)',
+                                  textAlign: 'center',
+                                  fontSize: 12,
+                                }}
+                                ellipsis={{ tooltip: aliasName }}
+                              >
+                                {aliasName}
+                              </Text>
+                            </Tag>
+                          );
+                        })}
+                    </Space>
+                  </span>
+                </Space>
+              )}
+
+              {isArrayOfValues(tags) && (
+                <Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
+                  <TagsOutlined />
+                  <div style={{ width: 'max-content' }}>标签:</div>
+                  <span style={{ marginLeft: 2 }}>
+                    <Space size={[0, 8]} wrap>
+                      {tags.map((tag: string) => {
+                        return (
+                          <Tag
+                            color="#eee"
+                            key={tag}
+                            style={{
+                              borderRadius: 44,
+                              maxWidth: 90,
+                              minWidth: 40,
+                              backgroundColor: 'rgba(18, 31, 67, 0.04)',
+                            }}
+                          >
+                            <Text
+                              style={{
+                                maxWidth: 80,
+                                color: 'rgb(95, 116, 141)',
+                                textAlign: 'center',
+                                fontSize: 12,
+                              }}
+                              ellipsis={{ tooltip: tag }}
+                            >
+                              {tag}
+                            </Text>
+                          </Tag>
+                        );
+                      })}
+                    </Space>
+                  </span>
+                </Space>
+              )}
+              <Space size={10}>
+                <Space
+                  size={2}
+                  style={{ color: '#5f748d', fontSize: 12, position: 'relative', top: '1px' }}
+                >
+                  <FieldNumberOutlined style={{ fontSize: 16, position: 'relative', top: '1px' }} />
+                  <span>:</span>
+                  <span style={{ marginLeft: 0 }}>{id}</span>
+                </Space>
+                <Space size={2} style={{ color: '#5f748d', fontSize: 12 }}>
+                  <UserOutlined />
+                  <span>:</span>
+                  <span style={{ marginLeft: 0 }}>{createdBy}</span>
+                </Space>
+              </Space>
+            </Space>
+          </div>
+        </>
+      );
+    },
+  },
+  state: {
+    render: (status) => {
+      let tagProps = {
+        color: 'default',
+        label: '未知',
+      };
+      switch (status) {
+        case StatusEnum.ONLINE:
+          tagProps = {
+            color: 'success',
+            // color: '#87d068',
+            label: '已启用',
+          };
+          break;
+        case StatusEnum.OFFLINE:
+          tagProps = {
+            color: 'warning',
+            label: '未启用',
+          };
+          break;
+        case StatusEnum.INITIALIZED:
+          tagProps = {
+            color: 'processing',
+            label: '初始化',
+          };
+          break;
+        case StatusEnum.DELETED:
+          tagProps = {
+            color: 'default',
+            label: '已删除',
+          };
+          break;
+        default:
+          break;
+      }
+      return (
+        <Tag
+          color={tagProps.color}
+          style={{
+            borderRadius: '40px',
+            padding: '2px 16px',
+            fontSize: '13px',
+            fontWeight: 500,
+          }}
+        >
+          {tagProps.label}
+        </Tag>
+      );
+    },
+  },
+};
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionAdminForm.tsx
@@ -102,7 +102,7 @@ const PermissionAdminForm: React.FC<Props> = ({
        >
          <SelectTMEPerson placeholder="请邀请团队成员" />
        </FormItem>
-        {APP_TARGET === 'inner' && (
+        {/* {APP_TARGET === 'inner' && ( */}
        <FormItem name="adminOrgs" label="按组织">
          <SelectPartner
            type="selectedDepartment"
@@ -111,7 +111,7 @@ const PermissionAdminForm: React.FC<Props> = ({
            }}
          />
        </FormItem>
-        )}
+        {/* )} */}
        <Form.Item
          label={
            <FormItemTitle
@@ -128,7 +128,7 @@ const PermissionAdminForm: React.FC<Props> = ({
        </Form.Item>
        {!isOpenState && (
          <>
-            {APP_TARGET === 'inner' && (
+            {/* {APP_TARGET === 'inner' && ( */}
            <FormItem name="viewOrgs" label="按组织">
              <SelectPartner
                type="selectedDepartment"
@@ -137,7 +137,7 @@ const PermissionAdminForm: React.FC<Props> = ({
                }}
              />
            </FormItem>
-            )}
+            {/* )} */}
            <FormItem name="viewers" label="按个人">
              <SelectTMEPerson placeholder="请选择需要授权的个人" />
            </FormItem>
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/Permission/PermissionCreateForm.tsx
@@ -51,7 +51,7 @@ const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
        <FormItem name="name" label="名称" rules={[{ required: true, message: '请输入名称' }]}>
          <Input placeholder="请输入名称" />
        </FormItem>
-        {APP_TARGET === 'inner' && (
+        {/* {APP_TARGET === 'inner' && ( */}
        <FormItem name="authorizedDepartmentIds" label="按组织">
          <SelectPartner
            type="selectedDepartment"
@@ -60,7 +60,7 @@ const PermissionCreateForm: ForwardRefRenderFunction<any, Props> = (
            }}
          />
        </FormItem>
-        )}
+        {/* )} */}

        <FormItem name="authorizedUsers" label="按个人">
          <SelectTMEPerson placeholder="请选择需要授权的个人" />