[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

@@ -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",

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<Props> = ({
       [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<Props> = ({
     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<Props> = ({
                         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) => {

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<Props> = ({
   onDateRangeChange,
 }: any) => {
   const [latestDateMap, setLatestDateMap] = useState<any>({
-    maxPartition: moment().format('YYYY-MM-DD'),
+    maxPartition: dayjs().format('YYYY-MM-DD'),
   });
 
   const [staticFormData, setStaticFormData] = useState<any>(() => {
@@ -70,14 +70,14 @@ const StaticDate: React.FC<Props> = ({
     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<Props> = ({
       isDateRangeChange,
     });
     if (dateStrings[0] && dateStrings[1]) {
-      setDateRangeValue([moment(dateStrings[0]), moment(dateStrings[1])]);
+      setDateRangeValue([dayjs(dateStrings[0]), dayjs(dateStrings[1])]);
       updateStaticFormData({
         dateMode,
         dateRangeType,

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<Props> = ({
   };
 
   const [latestDateMap, setLatestDateMap] = useState<LatestDateMap>({
-    maxPartition: moment().format('YYYY-MM-DD'),
+    maxPartition: dayjs().format('YYYY-MM-DD'),
   });
   const [dateRangesParams] = useState(() => {
     return initialValues ? generatorDateRangesParams(initialValues) : {};