[Fix][UI Next][V1.0.0-Alpha] Unify time parsing method with date-fns to avoid...

[Fix][UI Next][V1.0.0-Alpha] Unify time parsing method with date-fns to avoid compatibility issues (#8653)

dolphinscheduler-ui-next/src/service/modules/resources/index.ts

@@ -226,7 +226,7 @@ export function updateResourceContent(data: ContentReq, id: number): any {
 export function viewResource(
   params: ViewResourceReq,
   id: number
-): ResourceViewRes {
+): any {
   return axios({
     url: `/resources/${id}/view`,
     method: 'get',

dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts

@@ -22,7 +22,7 @@ import { queryRuleListPaging } from '@/service/modules/data-quality'
 import type { Rule, RuleRes } from '@/service/modules/data-quality/types'
 import TableAction from './components/table-action'
 import _ from 'lodash'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { TableColumns } from 'naive-ui/es/data-table/src/interface'
 
 export function useTable(viewRuleEntry = (ruleJson: string): void => {}) {
@@ -120,11 +120,11 @@ export function useTable(viewRuleEntry = (ruleJson: string): void => {}) {
           }
 
           item.createTime = format(
-            new Date(item.createTime),
+            parseISO(item.createTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.updateTime = format(
-            new Date(item.updateTime),
+            parseISO(item.updateTime),
             'yyyy-MM-dd HH:mm:ss'
           )
 

dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts

@@ -19,7 +19,7 @@ import { useI18n } from 'vue-i18n'
 import { reactive, ref } from 'vue'
 import { useAsyncState } from '@vueuse/core'
 import { queryExecuteResultListPaging } from '@/service/modules/data-quality'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import type {
   ResultItem,
   ResultListRes
@@ -171,10 +171,10 @@ export function useTable() {
       state: params.state,
       searchVal: params.searchVal,
       startDate: params.datePickerRange
-        ? format(new Date(params.datePickerRange[0]), 'yyyy-MM-dd HH:mm:ss')
+        ? format(parseISO(params.datePickerRange[0]), 'yyyy-MM-dd HH:mm:ss')
         : '',
       endDate: params.datePickerRange
-        ? format(new Date(params.datePickerRange[1]), 'yyyy-MM-dd HH:mm:ss')
+        ? format(parseISO(params.datePickerRange[1]), 'yyyy-MM-dd HH:mm:ss')
         : ''
     }
 

dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/use-table.ts

@@ -19,7 +19,7 @@ import { useI18n } from 'vue-i18n'
 import { reactive, ref } from 'vue'
 import { useAsyncState } from '@vueuse/core'
 import { queryAuditLogListPaging } from '@/service/modules/audit'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import type { AuditListRes } from '@/service/modules/audit/types'
 
 export function useTable() {
@@ -75,10 +75,10 @@ export function useTable() {
       operationType: params.operationType,
       userName: params.userName,
       startDate: params.datePickerRange
-        ? format(new Date(params.datePickerRange[0]), 'yyyy-MM-dd HH:mm:ss')
+        ? format(parseISO(params.datePickerRange[0]), 'yyyy-MM-dd HH:mm:ss')
         : '',
       endDate: params.datePickerRange
-        ? format(new Date(params.datePickerRange[1]), 'yyyy-MM-dd HH:mm:ss')
+        ? format(parseISO(params.datePickerRange[1]), 'yyyy-MM-dd HH:mm:ss')
         : ''
     }
 

dolphinscheduler-ui-next/src/views/projects/list/use-table.ts

@@ -19,7 +19,7 @@ import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAsyncState } from '@vueuse/core'
 import { queryProjectListPaging } from '@/service/modules/projects'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { useRouter } from 'vue-router'
 import TableAction from './components/table-action'
 import styles from './index.module.scss'
@@ -103,11 +103,11 @@ export function useTable(
         variables.totalPage = res.totalPage
         variables.tableData = res.totalList.map((item, index) => {
           item.createTime = format(
-            new Date(item.createTime),
+            parseISO(item.createTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.updateTime = format(
-            new Date(item.updateTime),
+            parseISO(item.updateTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           return {

dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts

@@ -29,7 +29,7 @@ import {
   CheckCircleOutlined,
   DownloadOutlined
 } from '@vicons/antd'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { useRoute } from 'vue-router'
 import { downloadFile } from '@/service/service'
 import type { TaskInstancesRes } from '@/service/modules/task-instances/types'
@@ -231,10 +231,10 @@ export function useTable() {
       host: params.host,
       stateType: params.stateType,
       startDate: params.datePickerRange
-        ? format(new Date(params.datePickerRange[0]), 'yyyy-MM-dd HH:mm:ss')
+        ? format(parseISO(params.datePickerRange[0]), 'yyyy-MM-dd HH:mm:ss')
         : '',
       endDate: params.datePickerRange
-        ? format(new Date(params.datePickerRange[1]), 'yyyy-MM-dd HH:mm:ss')
+        ? format(parseISO(params.datePickerRange[1]), 'yyyy-MM-dd HH:mm:ss')
         : '',
       executorName: params.executorName,
       processInstanceName: params.processInstanceName
@@ -245,14 +245,14 @@ export function useTable() {
         (res: TaskInstancesRes) => {
           variables.tableData = res.totalList.map((item, index) => {
             item.submitTime = format(
-              new Date(item.submitTime),
+              parseISO(item.submitTime),
               'yyyy-MM-dd HH:mm:ss'
             )
             item.startTime = format(
-              new Date(item.startTime),
+              parseISO(item.startTime),
               'yyyy-MM-dd HH:mm:ss'
             )
-            item.endTime = format(new Date(item.endTime), 'yyyy-MM-dd HH:mm:ss')
+            item.endTime = format(parseISO(item.endTime), 'yyyy-MM-dd HH:mm:ss')
             return {
               ...item
             }

dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-modal.ts

@@ -20,7 +20,7 @@ import { reactive, SetupContext } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { importProcessDefinition } from '@/service/modules/process-definition'
 import { queryAllWorkerGroups } from '@/service/modules/worker-groups'
 import { queryAllEnvironmentList } from '@/service/modules/environment'
@@ -78,11 +78,11 @@ export function useModal(
         state.startForm.processDefinitionCode = code
         if (state.startForm.startEndTime) {
           const start = format(
-            new Date(state.startForm.startEndTime[0]),
+            parseISO(state.startForm.startEndTime[0]),
             'yyyy-MM-dd hh:mm:ss'
           )
           const end = format(
-            new Date(state.startForm.startEndTime[1]),
+            parseISO(state.startForm.startEndTime[1]),
             'yyyy-MM-dd hh:mm:ss'
           )
           state.startForm.scheduleTime = `${start},${end}`
@@ -148,11 +148,11 @@ export function useModal(
 
   const getTimingData = () => {
     const start = format(
-      new Date(state.timingForm.startEndTime[0]),
+      parseISO(state.timingForm.startEndTime[0]),
       'yyyy-MM-dd hh:mm:ss'
     )
     const end = format(
-      new Date(state.timingForm.startEndTime[1]),
+      parseISO(state.timingForm.startEndTime[1]),
       'yyyy-MM-dd hh:mm:ss'
     )
 
@@ -210,11 +210,11 @@ export function useModal(
         const projectCode = Number(router.currentRoute.value.params.projectCode)
 
         const start = format(
-          new Date(state.timingForm.startEndTime[0]),
+          parseISO(state.timingForm.startEndTime[0]),
           'yyyy-MM-dd hh:mm:ss'
         )
         const end = format(
-          new Date(state.timingForm.startEndTime[1]),
+          parseISO(state.timingForm.startEndTime[1]),
           'yyyy-MM-dd hh:mm:ss'
         )
 

dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts

@@ -16,7 +16,7 @@
  */
 
 import _ from 'lodash'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { reactive, h, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -149,7 +149,7 @@ export function useTable() {
         key: 'scheduleTime',
         render: (_row: IWorkflowInstance) =>
           _row.scheduleTime
-            ? format(new Date(_row.scheduleTime), 'yyyy-MM-dd HH:mm:ss')
+            ? format(parseISO(_row.scheduleTime), 'yyyy-MM-dd HH:mm:ss')
             : '-'
       },
       {
@@ -157,7 +157,7 @@ export function useTable() {
         key: 'startTime',
         render: (_row: IWorkflowInstance) =>
           _row.startTime
-            ? format(new Date(_row.startTime), 'yyyy-MM-dd HH:mm:ss')
+            ? format(parseISO(_row.startTime), 'yyyy-MM-dd HH:mm:ss')
             : '-'
       },
       {
@@ -165,7 +165,7 @@ export function useTable() {
         key: 'endTime',
         render: (_row: IWorkflowInstance) =>
           _row.endTime
-            ? format(new Date(_row.endTime), 'yyyy-MM-dd HH:mm:ss')
+            ? format(parseISO(_row.endTime), 'yyyy-MM-dd HH:mm:ss')
             : '-'
       },
       {

dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts

@@ -18,7 +18,7 @@
 import { useAsyncState, useAsyncQueue } from '@vueuse/core'
 import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
@@ -107,11 +107,11 @@ export function useTable(
 
             item.projectName = projectName
             item.createTime = format(
-              new Date(item.createTime),
+              parseISO(item.createTime),
               'yyyy-MM-dd HH:mm:ss'
             )
             item.updateTime = format(
-              new Date(item.updateTime),
+              parseISO(item.updateTime),
               'yyyy-MM-dd HH:mm:ss'
             )
             return {

dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts

@@ -18,7 +18,7 @@
 import { useAsyncState, useAsyncQueue } from '@vueuse/core'
 import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
 import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
@@ -108,11 +108,11 @@ export function useTable(
 
           item.taskGroupName = taskGroupName
           item.createTime = format(
-            new Date(item.createTime),
+            parseISO(item.createTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.updateTime = format(
-            new Date(item.updateTime),
+            parseISO(item.updateTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           return {

dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts

@@ -17,7 +17,7 @@
 
 import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { NButton, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import {
@@ -155,11 +155,11 @@ export function useTable() {
       queryAlertGroupListPaging({ ...params }).then((res: AlarmGroupRes) => {
         variables.tableData = res.totalList.map((item, index) => {
           item.createTime = format(
-            new Date(item.createTime),
+            parseISO(item.createTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.updateTime = format(
-            new Date(item.updateTime),
+            parseISO(item.updateTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           return {

dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/use-table.ts

@@ -20,7 +20,7 @@ import {
   queryAlertPluginInstanceListPaging,
   deleteAlertPluginInstance
 } from '@/service/modules/alert-plugin'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import type { IRecord } from './types'
 
 export function useTable() {
@@ -47,10 +47,10 @@ export function useTable() {
       if (!totalList) throw Error()
       data.list = totalList.map((record: IRecord) => {
         record.createTime = record.createTime
-          ? format(new Date(record.createTime), 'yyyy-MM-dd HH:mm:ss')
+          ? format(parseISO(record.createTime), 'yyyy-MM-dd HH:mm:ss')
           : ''
         record.updateTime = record.updateTime
-          ? format(new Date(record.updateTime), 'yyyy-MM-dd HH:mm:ss')
+          ? format(parseISO(record.updateTime), 'yyyy-MM-dd HH:mm:ss')
           : ''
         return record
       })

dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts

@@ -17,7 +17,7 @@
 
 import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { NButton, NPopconfirm, NSpace, NTooltip, NTag } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import {
@@ -180,11 +180,11 @@ export function useTable() {
       queryEnvironmentListPaging({ ...params }).then((res: EnvironmentRes) => {
         variables.tableData = res.totalList.map((item, index) => {
           item.createTime = format(
-            new Date(item.createTime),
+            parseISO(item.createTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.updateTime = format(
-            new Date(item.updateTime),
+            parseISO(item.updateTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           return {

dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts

@@ -19,7 +19,7 @@ import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
 import { NButton, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { DeleteOutlined, EditOutlined } from '@vicons/antd'
 import {
   queryNamespaceListPaging,
@@ -174,11 +174,11 @@ export function useTable() {
       queryNamespaceListPaging({ ...params }).then((res: NamespaceListRes) => {
         variables.tableData = res.totalList.map((item, index) => {
           item.createTime = format(
-            new Date(item.createTime),
+            parseISO(item.createTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.updateTime = format(
-            new Date(item.updateTime),
+            parseISO(item.updateTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           return {

dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts

@@ -17,7 +17,7 @@
 
 import { useAsyncState } from '@vueuse/core'
 import { reactive, h, ref } from 'vue'
-import { format } from 'date-fns'
+import { parseISO, format } from 'date-fns'
 import { NButton, NPopconfirm, NSpace, NTooltip } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import {
@@ -165,15 +165,15 @@ export function useTable() {
       queryAccessTokenList({ ...params }).then((res: TokenRes) => {
         variables.tableData = res.totalList.map((item, index) => {
           item.expireTime = format(
-            new Date(item.expireTime),
+            parseISO(item.expireTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.createTime = format(
-            new Date(item.createTime),
+            parseISO(item.createTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           item.updateTime = format(
-            new Date(item.updateTime),
+            parseISO(item.updateTime),
             'yyyy-MM-dd HH:mm:ss'
           )
           return {