[dolphinscheduler] branch dev updated: [Feature][UI Next][V1.0.0-Alpha] Scheduler datetime display optimization (#8885)

[songjian]

This is an automated email from the ASF dual-hosted git repository.

songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git


The following commit(s) were added to refs/heads/dev by this push:
     new d19322d  [Feature][UI Next][V1.0.0-Alpha] Scheduler datetime display 
optimization (#8885)
d19322d is described below

commit d19322dc9e1c80c6c3f5d46b46044c4fa4d140e1
Author: Devosend <devos...@gmail.com>
AuthorDate: Mon Mar 14 22:14:19 2022 +0800

    [Feature][UI Next][V1.0.0-Alpha] Scheduler datetime display optimization 
(#8885)
---
 .../projects/workflow/definition/timing/use-table.ts | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git 
a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
 
b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
index cac4628..ed3966b 100644
--- 
a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
+++ 
b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
@@ -32,12 +32,16 @@ import {
   EditOutlined
 } from '@vicons/antd'
 import type { Router } from 'vue-router'
+import { format } from 'date-fns-tz'
 import { ISearchParam } from './types'
+import { useTimezoneStore } from '@/store/timezone/timezone'
 import styles from '../index.module.scss'
 
 export function useTable() {
   const { t } = useI18n()
   const router: Router = useRouter()
+  const timezoneStore = useTimezoneStore()
+  const timeZone = timezoneStore.getTimezone
 
   const variables = reactive({
     columns: [],
@@ -51,6 +55,16 @@ export function useTable() {
     showRef: ref(false)
   })
 
+  const renderTime = (time: string) => {
+    const utc = format(new Date(time), 'zzz', {
+      timeZone
+    }).replace('GMT', 'UTC')
+    return h('span', [
+      h('span', null, time),
+      h('span', { style: 'color: #1890ff; margin-left: 5px' }, `(${utc})`)
+    ])
+  }
+
   const createColumns = (variables: any) => {
     variables.columns = [
       {
@@ -74,11 +88,13 @@ export function useTable() {
       },
       {
         title: t('project.workflow.start_time'),
-        key: 'startTime'
+        key: 'startTime',
+        render: (row: any) => renderTime(row.startTime)
       },
       {
         title: t('project.workflow.end_time'),
-        key: 'endTime'
+        key: 'endTime',
+        render: (row: any) => renderTime(row.endTime)
       },
       {
         title: t('project.workflow.crontab'),