From f5f9c0314adbe6bab0515fd6e89465debc2d86a1 Mon Sep 17 00:00:00 2001 From: tristanliu <37809633+sevenliu1896@users.noreply.github.com> Date: Sun, 5 Nov 2023 22:22:20 -0600 Subject: [PATCH] [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API (#327) * [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 --- .../src/components/MDatePicker/index.tsx | 13 +- .../src/components/RemoteSelect/index.tsx | 11 +- .../components/MetricTrendDimensionFilter.tsx | 153 +++++++++---- .../MetricTrendDimensionFilterContainer.tsx | 50 +++++ .../Metric/components/MetricTrendSection.tsx | 206 ++++++++---------- .../src/pages/SemanticModel/Metric/index.tsx | 2 +- .../components/ClassDimensionTable.tsx | 14 +- .../components/ClassMetricTable.tsx | 14 +- .../SemanticModel/components/ModelTable.tsx | 2 +- .../src/pages/SemanticModel/enum.ts | 6 + 10 files changed, 284 insertions(+), 187 deletions(-) create mode 100644 webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilterContainer.tsx diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx index a1bdf942d..b0b05bb0c 100644 --- a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx +++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx @@ -21,6 +21,7 @@ import { ProCard } from '@ant-design/pro-card'; type Props = { disabledAdvanceSetting?: boolean; initialValues?: any; + showCurrentDataRangeString?: boolean; onDateRangeChange: (value: string[], from: any) => void; onDateRangeTypeChange?: (dateRangeType: DateRangeType) => void; }; @@ -29,6 +30,7 @@ const { CheckableTag } = Tag; const MDatePicker: React.FC = ({ disabledAdvanceSetting, initialValues, + showCurrentDataRangeString = true, onDateRangeChange, onDateRangeTypeChange, }: any) => { @@ -420,11 +422,12 @@ const MDatePicker: React.FC = ({ } /> - {!( - currentDateSettingType === DateSettingType.STATIC && - currentDateMode === DateMode.RANGE && - dateRangeType === DateRangeType.DAY - ) &&
当前时间: {selectedDateRangeString}
} + {showCurrentDataRangeString && + !( + currentDateSettingType === DateSettingType.STATIC && + currentDateMode === DateMode.RANGE && + dateRangeType === DateRangeType.DAY + ) &&
当前时间: {selectedDateRangeString}
} ); }; diff --git a/webapp/packages/supersonic-fe/src/components/RemoteSelect/index.tsx b/webapp/packages/supersonic-fe/src/components/RemoteSelect/index.tsx index 7c8a97edd..152c2c6d8 100644 --- a/webapp/packages/supersonic-fe/src/components/RemoteSelect/index.tsx +++ b/webapp/packages/supersonic-fe/src/components/RemoteSelect/index.tsx @@ -80,6 +80,7 @@ const DebounceSelect = forwardRef( if (disabledSearch) { return; } + console.log(!allowEmptyValue && !value, value, allowEmptyValue, 333); if (!allowEmptyValue && !value) return; fetchRef.current += 1; const fetchId = fetchRef.current; @@ -116,9 +117,13 @@ const DebounceSelect = forwardRef( showSearch allowClear mode="multiple" - onClear={() => { - setOptions([]); - }} + // onClear={() => { + // if (autoInit) { + // loadOptions('', true); + // } else { + // setOptions([]); + // } + // }} onSearch={debounceFetcher} {...props} filterOption={false} // 保持对props中filterOption属性的复写，不可变更位置 diff --git a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx index 029ef6f96..5f6243b01 100644 --- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx +++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Metric/components/MetricTrendDimensionFilter.tsx @@ -1,11 +1,10 @@ -import { Form, Input, Select, Space, Row, Col, Switch, Tag } from 'antd'; -import StandardFormRow from '@/components/StandardFormRow'; -import TagSelect from '@/components/TagSelect'; +import { Form, Select, Space, Tag, Button, Tooltip } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; import React, { useEffect, useState, useRef } from 'react'; -import { SENSITIVE_LEVEL_OPTIONS } from '../../constant'; -import { SearchOutlined } from '@ant-design/icons'; import RemoteSelect, { RemoteSelectImperativeHandle } from '@/components/RemoteSelect'; import { queryDimValue } from '@/pages/SemanticModel/service'; +import { OperatorEnum } from '@/pages/SemanticModel/enum'; +import { isString } from 'lodash'; import styles from '../style.less'; const FormItem = Form.Item; @@ -13,24 +12,46 @@ const FormItem = Form.Item; type Props = { dimensionOptions: { value: string; label: string }[]; modelId: number; - initFilterValues?: any; - onFiltersChange: (_: any, values: any) => void; + value?: FormData; + onChange?: (value: FormData) => void; +}; + +export type FormData = { + dimensionBizName: string; + operator: OperatorEnum; + dimensionValue: string | string[]; }; const MetricTrendDimensionFilter: React.FC = ({ dimensionOptions, modelId, - initFilterValues = {}, - onFiltersChange, + value, + onChange, }) => { - // const [form] = Form.useForm(); + const [form] = Form.useForm(); + const dimensionValueSearchRef = useRef(); const queryParams = useRef<{ dimensionBizName?: string }>({}); - const [dimensionValue, setDimensionValue] = useState(''); - // const [queryParams, setQueryParams] = useState({}); + + const [formData, setFormData] = useState({ operator: OperatorEnum.IN } as FormData); + + useEffect(() => { + if (!value) { + return; + } + form.setFieldsValue(value); + setFormData(value); + }, [value]); + + useEffect(() => { + if (formData.dimensionBizName) { + queryParams.current = { dimensionBizName: formData.dimensionBizName }; + dimensionValueSearchRef.current?.emitSearch(''); + } + }, [formData.dimensionBizName]); + const loadSiteName = async (searchValue: string) => { if (!queryParams.current?.dimensionBizName) { - // return []; return; } const { dimensionBizName } = queryParams.current; @@ -48,40 +69,82 @@ const MetricTrendDimensionFilter: React.FC = ({ } return []; }; - + const multipleValueOperator = [OperatorEnum.IN]; return ( - - + ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase()) + } + allowClear + placeholder="请选择筛选维度" + /> + + + + - ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase()) - } - mode="multiple" - placeholder="请选择下钻维度" - onChange={(value) => { - const params = { ...queryParams, dimensionGroup: value || [] }; - setQueryParams(params); - getMetricTrendData({ ...params }); - }} - /> - - */} - {/* - - - 维度下钻: - - ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase()) - } - mode="multiple" - placeholder="请选择下钻维度" - onChange={(value) => { - const params = { ...queryParams, dimensionGroup: value || [] }; - setQueryParams(params); - getMetricTrendData({ ...params }); - }} - /> - + ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase()) + } + mode="multiple" + placeholder="请选择下钻维度" + onChange={(value) => { + const params = { ...queryParams, dimensionGroup: value || [] }; + setQueryParams(params); + getMetricTrendData({ ...params }); + }} + /> + + + + + { + const { + dimensionBizName: bizName, + dimensionValue: value, + operator, + } = filterParams; + if (bizName && value && operator) { + const params = { + ...queryParams, + dimensionFilters: [ + { + bizName: 'user_name', + value: ['williamhliu', 'leooonli'], + operator: 'in', + }, + ], + }; + setQueryParams(params); + getMetricTrendData({ ...params }); + } + }} + /> + + */} + + + { + const [startDate, endDate] = value; + const { dateSettingType, dynamicParams, staticParams } = config; + let dateField = dateFieldMap[DateRangeType.DAY]; + if (DateSettingType.DYNAMIC === dateSettingType) { + dateField = dateFieldMap[dynamicParams.dateRangeType]; + } + if (DateSettingType.STATIC === dateSettingType) { + dateField = dateFieldMap[staticParams.dateRangeType]; + } + setPeriodDate({ startDate, endDate, dateField }); + }} + disabledAdvanceSetting={true} + /> + + + ) : ( ) : ( ) : (