From 3f08d95aaa4c6a8b52964e5b879354734333af33 Mon Sep 17 00:00:00 2001 From: tristanliu <37809633+sevenliu1896@users.noreply.github.com> Date: Mon, 27 Nov 2023 21:31:51 +0800 Subject: [PATCH] [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. (#432) * [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. --- webapp/packages/supersonic-fe/package.json | 1 + .../src/components/MDatePicker/DynamicDate.tsx | 10 +++++----- .../src/components/MDatePicker/StaticDate.tsx | 12 ++++++------ .../src/components/MDatePicker/index.tsx | 4 ++-- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/webapp/packages/supersonic-fe/package.json b/webapp/packages/supersonic-fe/package.json index 8fb8ce07d..6b4beb226 100644 --- a/webapp/packages/supersonic-fe/package.json +++ b/webapp/packages/supersonic-fe/package.json @@ -74,6 +74,7 @@ "copy-to-clipboard": "^3.3.1", "cross-env": "^7.0.3", "crypto-js": "^4.0.0", + "dayjs": "^1.11.10", "echarts": "^5.0.2", "echarts-for-react": "^3.0.1", "eslint-config-tencent": "^1.0.4", diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx index 901743eee..1bd71cdc0 100644 --- a/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx +++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx @@ -34,7 +34,7 @@ import { DatePicker, } from 'antd'; -import moment from 'moment'; +import dayjs from 'dayjs'; import styles from './style.less'; const { CheckableTag } = Tag; @@ -154,7 +154,7 @@ const DynamicDate: React.FC = ({ [DynamicAdvancedConfigType.FROM_DATE_PERIOD]: { perPeriodType: PerDatePeriodType.PERDAY, }, - [DynamicAdvancedConfigType.FROM_DATE]: { date: moment() }, + [DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() }, }; if (advancedPanelFormData) { defaultConfig = { ...advancedPanelFormData }; @@ -237,7 +237,7 @@ const DynamicDate: React.FC = ({ const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams( mergeConfigTypeData, configType, - { maxPartition: moment().format('YYYY-MM-DD') }, + { maxPartition: dayjs().format('YYYY-MM-DD') }, ); mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc; onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc }); @@ -505,11 +505,11 @@ const DynamicDate: React.FC = ({ disabled={isAdvancedConfigTypeRadioDisabled( DynamicAdvancedConfigType.FROM_DATE, )} - value={moment( + value={dayjs( advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date, )} disabledDate={(current) => { - return current && current > moment().endOf('day'); + return current && current > dayjs().endOf('day'); }} picker={DateRangeTypeToPickerMap[dateRangeTypeProps]} onChange={(date, dateString) => { diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx index f9abe418b..de10f0f44 100644 --- a/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx +++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx @@ -3,7 +3,7 @@ import { Space, DatePicker } from 'antd'; import { DateMode, DateRangeType, DateRangePicker, DateRangeTypeToPickerMap } from './type'; import { getDateStrings } from './utils'; import { DateSettingType, StaticDateSelectMode } from './type'; -import moment from 'moment'; +import dayjs from 'dayjs'; const { RangePicker } = DatePicker; @@ -22,7 +22,7 @@ const StaticDate: React.FC = ({ onDateRangeChange, }: any) => { const [latestDateMap, setLatestDateMap] = useState({ - maxPartition: moment().format('YYYY-MM-DD'), + maxPartition: dayjs().format('YYYY-MM-DD'), }); const [staticFormData, setStaticFormData] = useState(() => { @@ -70,14 +70,14 @@ const StaticDate: React.FC = ({ const initDateRange = initialValues?.dateRange || []; const [startDate, endDate] = initDateRange; const { maxPartition } = latestDateMap; - let dateRangeMoment = [moment(), moment()]; + let dateRangeMoment = [dayjs(), dayjs()]; // 如果initialValues时间存在则按initialValues时间初始化 if (startDate && endDate) { - dateRangeMoment = [moment(startDate), moment(endDate)]; + dateRangeMoment = [dayjs(startDate), dayjs(endDate)]; } // dateRangeValue未被初始化且maxPartition存在，则按maxPartition初始化 if (dateRangeValue.length === 0 && !(startDate && endDate) && maxPartition) { - dateRangeMoment = [moment(maxPartition), moment(maxPartition)]; + dateRangeMoment = [dayjs(maxPartition), dayjs(maxPartition)]; } // 否则按当前时间初始化 setDateRangeValue(dateRangeMoment); @@ -122,7 +122,7 @@ const StaticDate: React.FC = ({ isDateRangeChange, }); if (dateStrings[0] && dateStrings[1]) { - setDateRangeValue([moment(dateStrings[0]), moment(dateStrings[1])]); + setDateRangeValue([dayjs(dateStrings[0]), dayjs(dateStrings[1])]); updateStaticFormData({ dateMode, dateRangeType, diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx index bcbeb6b8b..ed176a095 100644 --- a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx +++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx @@ -15,7 +15,7 @@ import { DateSettingType, DateRangeParams, DynamicAdvancedConfigType } from './t import { LatestDateMap } from './type'; import StaticDate from './StaticDate'; import DynamicDate from './DynamicDate'; -import moment from 'moment'; +import dayjs from 'dayjs'; import { ProCard } from '@ant-design/pro-card'; type Props = { @@ -90,7 +90,7 @@ const MDatePicker: React.FC = ({ }; const [latestDateMap, setLatestDateMap] = useState({ - maxPartition: moment().format('YYYY-MM-DD'), + maxPartition: dayjs().format('YYYY-MM-DD'), }); const [dateRangesParams] = useState(() => { return initialValues ? generatorDateRangesParams(initialValues) : {};