From 026cf2056ddc240a74eb9c7020aa887e4426ed06 Mon Sep 17 00:00:00 2001 From: tristanliu <37809633+sevenliu1896@users.noreply.github.com> Date: Fri, 19 Jan 2024 17:50:17 +0800 Subject: [PATCH] [improvement][semantic-fe] Improved user experience for the metric list. (#660) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [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. --- .../src/pages/SemanticModel/Metric/Market.tsx | 9 ++- .../components/ClassMetricTable.tsx | 76 +++++++++++++------ .../components/MetricInfoCreateForm.tsx | 2 +- .../pages/SemanticModel/components/style.less | 3 + 4 files changed, 66 insertions(+), 24 deletions(-) diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx index e64f6d19a..25080bcb5 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/Market.tsx @@ -268,7 +268,13 @@ const ClassMetricTable: React.FC = ({ domainManger, dispatch }) => { params.sensitiveLevel = sensitiveLevelValue; params.type = typeValue; setFilterParams(params); - await queryMetricList(params, filterParams.key ? false : true); + await queryMetricList( + { + ...params, + ...defaultPagination, + }, + filterParams.key ? false : true, + ); }; const rowSelection = { @@ -352,6 +358,7 @@ const ClassMetricTable: React.FC = ({ domainManger, dispatch }) => { tableAlertRender={() => { return false; }} + sticky={{ offsetHeader: 0 }} rowSelection={{ type: 'checkbox', ...rowSelection, diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx index 670d4cbda..7af7f11ba 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/components/ClassMetricTable.tsx @@ -1,12 +1,12 @@ import type { ActionType, ProColumns } from '@ant-design/pro-table'; import ProTable from '@ant-design/pro-table'; -import { message, Button, Space, Popconfirm, Input } from 'antd'; -import React, { useRef, useState } from 'react'; +import { message, Button, Space, Popconfirm, Input, Select } from 'antd'; +import React, { useRef, useState, useEffect } from 'react'; import type { Dispatch } from 'umi'; import { StatusEnum } from '../enum'; import { connect } from 'umi'; import type { StateType } from '../model'; -import { SENSITIVE_LEVEL_ENUM } from '../constant'; +import { SENSITIVE_LEVEL_ENUM, SENSITIVE_LEVEL_OPTIONS } from '../constant'; import { queryMetric, deleteMetric, @@ -31,11 +31,16 @@ const ClassMetricTable: React.FC = ({ domainManger, dispatch }) => { const [createModalVisible, setCreateModalVisible] = useState(false); const [metricItem, setMetricItem] = useState(); const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const [pagination, setPagination] = useState({ + const [tableData, setTableData] = useState([]); + const [loading, setLoading] = useState(false); + const defaultPagination = { current: 1, pageSize: 20, total: 0, - }); + }; + const [pagination, setPagination] = useState(defaultPagination); + const [filterParams, setFilterParams] = useState>({}); + const actionRef = useRef(); const [downloadLoading, setDownloadLoading] = useState(false); @@ -61,14 +66,19 @@ const ClassMetricTable: React.FC = ({ domainManger, dispatch }) => { message.error(msg); }; + useEffect(() => { + queryMetricList({ ...filterParams, ...defaultPagination }); + }, [filterParams]); + const queryMetricList = async (params: any) => { + setLoading(true); const { code, data, msg } = await queryMetric({ - ...params, ...pagination, + ...params, modelId, }); + setLoading(false); const { list, pageSize, pageNum, total } = data || {}; - let resData: any = {}; if (code === 200) { setPagination({ ...pagination, @@ -76,20 +86,11 @@ const ClassMetricTable: React.FC = ({ domainManger, dispatch }) => { current: pageNum, total, }); - - resData = { - data: list || [], - success: true, - }; + setTableData(list); } else { message.error(msg); - resData = { - data: [], - total: 0, - success: false, - }; + setTableData([]); } - return resData; }; const columns: ProColumns[] = [ @@ -104,13 +105,40 @@ const ClassMetricTable: React.FC = ({ domainManger, dispatch }) => { dataIndex: 'key', title: '指标搜索', hideInTable: true, - renderFormItem: () => , + renderFormItem: () => ( + { + setFilterParams((preState) => { + return { + ...preState, + key: value, + }; + }); + }} + /> + ), }, { dataIndex: 'sensitiveLevel', title: '敏感度', hideInTable: true, valueEnum: SENSITIVE_LEVEL_ENUM, + renderFormItem: () => ( +