[improvement][headless-fe] Added view management functionality. (#701)

* [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.
2026-04-21 14:14:19 +08:00 · 2024-01-30 20:35:04 +08:00
parent 26aefceb04
commit 31f8c1df35
45 changed files with 2539 additions and 423 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricFilter.tsx
@@ -98,11 +98,11 @@ const MetricFilter: React.FC<Props> = ({ initFilterValues = {}, onFiltersChange
        </div>
      </StandardFormRow>
      <Space size={40}>
-        <StandardFormRow key="showType" title="切换为卡片" block>
+        {/* <StandardFormRow key="showType" title="切换为卡片" block>
          <FormItem name="showType" valuePropName="checked">
            <Switch size="small" />
          </FormItem>
-        </StandardFormRow>
+        </StandardFormRow> */}
        {/* <StandardFormRow key="onlyShowMe" title="仅显示我的" block>
          <FormItem name="onlyShowMe" valuePropName="checked">
            <Switch size="small" />
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx
@@ -5,15 +5,17 @@ import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteS
 import { queryDimValue } from '@/pages/SemanticModel/service';
 import { OperatorEnum } from '@/pages/SemanticModel/enum';
 import { isString } from 'lodash';
+import { isArrayOfValues } from '@/utils/utils';

 const FormItem = Form.Item;

 type Props = {
-  dimensionOptions: OptionsItem[];
+  dimensionOptions: (OptionsItem & { modelId: number })[];
  modelId: number;
  periodDate?: { startDate: string; endDate: string; dateField: string };
  value?: FormData;
  onChange?: (value: FormData) => void;
+  afterSolt?: React.ReactNode;
 };

 export type FormData = {
@@ -24,16 +26,15 @@ export type FormData = {

 const MetricTrendDimensionFilter: React.FC<Props> = ({
  dimensionOptions,
-  modelId,
  value,
  periodDate,
+  afterSolt,
  onChange,
 }) => {
  const [form] = Form.useForm();
  const dimensionValueSearchRef = useRef<RemoteSelectImperativeHandle>();
  const queryParams = useRef<{ dimensionBizName?: string }>({});
  const [formData, setFormData] = useState<FormData>({ operator: OperatorEnum.IN } as FormData);
-
  useEffect(() => {
    if (!value) {
      return;
@@ -59,7 +60,10 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
      return;
    }
    const { dimensionBizName } = queryParams.current;
-    const targetOptions = dimensionOptions.find((item) => item.value === dimensionBizName) || {};
+    const targetOptions = dimensionOptions.find((item) => item.value === dimensionBizName);
+    if (!targetOptions) {
+      return;
+    }
    const { code, data } = await queryDimValue({
      ...queryParams.current,
      value: searchValue,
@@ -95,7 +99,6 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
      }}
      onValuesChange={(value, values) => {
        const { operator, dimensionValue } = values;
-
        if (multipleValueOperator.includes(operator) && isString(dimensionValue)) {
          const tempDimensionValue = [dimensionValue];
          setFormData({ ...values, dimensionValue: tempDimensionValue });
@@ -152,12 +155,14 @@ const MetricTrendDimensionFilter: React.FC<Props> = ({
          <Button
            type="primary"
            icon={<PlusOutlined />}
+            disabled={!(formData.dimensionBizName && isArrayOfValues(formData.dimensionValue))}
            onClick={() => {
              const formValues = form.getFieldsValue();
              onChange?.(formValues);
            }}
          />
        </Tooltip>
+        {afterSolt}
      </Space>
    </Form>
  );
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilterContainer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilterContainer.tsx
@@ -4,11 +4,12 @@ import MetricTrendDimensionFilter from './MetricTrendDimensionFilter';
 import type { FormData } from './MetricTrendDimensionFilter';

 type Props = {
-  dimensionOptions: OptionsItem[];
+  dimensionOptions: (OptionsItem & { modelId: number })[];
  modelId: number;
  value?: FormData;
  periodDate?: { startDate: string; endDate: string; dateField: string };
  onChange?: (value: FormData[]) => void;
+  afterSolt?: React.ReactNode;
 };

 type DimensionOptionsMapItem = {
@@ -20,6 +21,7 @@ const MetricTrendDimensionFilterContainer: React.FC<Props> = ({
  dimensionOptions,
  modelId,
  periodDate,
+  afterSolt,
  value,
  onChange,
 }) => {
@@ -56,6 +58,7 @@ const MetricTrendDimensionFilterContainer: React.FC<Props> = ({
          setFilterData(data);
          onChange?.(data);
        }}
+        afterSolt={afterSolt}
      />
      <Space size={8} wrap style={{ marginTop: 10 }}>
        {filterData.map((item: FormData, index: number) => {
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendSection.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { message, Row, Col, Button, Space, Select, Form, Tooltip } from 'antd';
 import { queryStruct } from '@/pages/SemanticModel/service';
-import { DownloadOutlined, PoweroffOutlined, ArrowLeftOutlined } from '@ant-design/icons';
+import { DownloadOutlined, PoweroffOutlined, SearchOutlined } from '@ant-design/icons';
 import TrendChart from '@/pages/SemanticModel/Metric/components/MetricTrend';
 import MetricTrendDimensionFilterContainer from './MetricTrendDimensionFilterContainer';
 import MDatePicker from '@/components/MDatePicker';
@@ -11,7 +11,6 @@ import StandardFormRow from '@/components/StandardFormRow';
 import MetricTable from './Table';
 import { ColumnConfig } from '../data';
 import dayjs from 'dayjs';
-import { history } from 'umi';
 import { ISemantic } from '../../data';
 import { DateFieldMap } from '@/pages/SemanticModel/constant';
 import ProCard from '@ant-design/pro-card';
@@ -119,6 +118,9 @@ const MetricTrendSection: React.FC<Props> = ({
        setMetricColumnConfig(targetConfig);
      }
      setDownloadBtnDisabledState(false);
+      if (dimensionGroup[dimensionGroup.length - 1]) {
+        setGroupByDimensionFieldName(dimensionGroup[dimensionGroup.length - 1]);
+      }
    } else {
      if (code === 401 || code === 400) {
        setAuthMessage(msg);
@@ -135,7 +137,7 @@ const MetricTrendSection: React.FC<Props> = ({
    if (metircData?.id) {
      getMetricTrendData({ ...queryParams });
    }
-  }, [metircData, periodDate]);
+  }, [metircData]);

  return (
    <div className={styles.metricTrendSection}>
@@ -186,8 +188,6 @@ const MetricTrendSection: React.FC<Props> = ({
                    onChange={(value) => {
                      const params = { ...queryParams, dimensionGroup: value || [] };
                      setQueryParams(params);
-                      getMetricTrendData({ ...params });
-                      setGroupByDimensionFieldName(value[value.length - 1]);
                    }}
                  />
                </FormItem>
@@ -212,8 +212,20 @@ const MetricTrendSection: React.FC<Props> = ({
                        dimensionFilters,
                      };
                      setQueryParams(params);
-                      getMetricTrendData({ ...params });
                    }}
+                    afterSolt={
+                      <Button
+                        type="primary"
+                        icon={<SearchOutlined />}
+                        size="middle"
+                        loading={metricTrendLoading}
+                        onClick={() => {
+                          getMetricTrendData({ ...queryParams });
+                        }}
+                      >
+                        查 询
+                      </Button>
+                    }
                  />
                </FormItem>
              </StandardFormRow>
@@ -221,31 +233,21 @@ const MetricTrendSection: React.FC<Props> = ({
          </Col>
          <Col flex="0 1" />
        </Row>
-        <Button
-          style={{
-            position: 'absolute',
-            top: 20,
-            right: 20,
-          }}
-          size="middle"
-          type="link"
-          key="backListBtn"
-          onClick={() => {
-            history.push('/metric/market');
-          }}
-        >
-          <Space>
-            <ArrowLeftOutlined />
-            返回列表页
-          </Space>
-        </Button>
-        {/* <div className={styles.btnWrapper}>
+        {/* <Row style={{ paddingLeft: 82, paddingBottom: 8 }}>

-        </div> */}
+        </Row> */}
      </div>
-      {authMessage && <div style={{ color: '#d46b08', marginBottom: 15 }}>{authMessage}</div>}
+
      <div className={styles.sectionBox}>
-        <ProCard size="small" title="数据趋势">
+        <ProCard
+          size="small"
+          title={
+            <>
+              <span>数据趋势</span>
+              {authMessage && <div style={{ color: '#d46b08' }}>{authMessage}</div>}
+            </>
+          }
+        >
          <TrendChart
            data={metricTrendData}
            isPer={
@@ -272,7 +274,7 @@ const MetricTrendSection: React.FC<Props> = ({
        </ProCard>
      </div>

-      <div className={styles.sectionBox}>
+      <div className={styles.sectionBox} style={{ paddingBottom: 0 }}>
        <ProCard
          size="small"
          title="数据明细"
@@ -307,7 +309,7 @@ const MetricTrendSection: React.FC<Props> = ({
            </Space.Compact>
          }
        >
-          <div style={{ minHeight: '528px' }}>
+          <div style={{ minHeight: '450px' }}>
            <MetricTable
              loading={metricTrendLoading}
              columnConfig={tableColumnConfig}
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/Table.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/Table.tsx
@@ -2,7 +2,6 @@ import { Table } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import styles from '../style.less';
 import { ColumnConfig } from '../data';

 type Props = {
@@ -57,16 +56,15 @@ const MetricTable: React.FC<Props> = ({

  return (
    <div style={{ height: '100%' }}>
-      {Array.isArray(columns) && columns.length > 0 && (
-        <Table
-          columns={columns}
-          dataSource={dataSource}
-          scroll={{ x: 200, y: 700 }}
-          // pagination={{ defaultPageSize: 20 }}
-          loading={loading}
-          onChange={() => {}}
-        />
-      )}
+      {/* {Array.isArray(columns) && columns.length > 0 && ( */}
+      <Table
+        columns={columns}
+        dataSource={dataSource}
+        scroll={{ x: 200, y: 700 }}
+        loading={loading}
+        onChange={() => {}}
+      />
+      {/* )} */}
    </div>
  );
 };