From d4dd4468d8e47616430e8ba538e282e394ecebac Mon Sep 17 00:00:00 2001
From: Suhaha <jklopsdfw@gmail.com>
Date: Fri, 6 Aug 2021 12:27:13 +0800
Subject: [PATCH] feat(ui): add timezone information (#974)

---
 .../SearchLogs/components/SearchResult.tsx    |  2 +-
 ui/lib/components/DateTime/Calendar.tsx       | 30 ++++++++++---------
 ui/lib/components/DateTime/Long.tsx           |  2 +-
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/ui/lib/apps/SearchLogs/components/SearchResult.tsx b/ui/lib/apps/SearchLogs/components/SearchResult.tsx
index 8c5db68609..d3a3864521 100644
--- a/ui/lib/apps/SearchLogs/components/SearchResult.tsx
+++ b/ui/lib/apps/SearchLogs/components/SearchResult.tsx
@@ -78,7 +78,7 @@ export default function SearchResult({ patterns, taskGroupID, tasks }: Props) {
             (value, index): LogPreview => {
               return {
                 key: index,
-                time: dayjs(value.time).format('YYYY-MM-DD HH:mm:ss'),
+                time: dayjs(value.time).format('YYYY-MM-DD HH:mm:ss (z)'),
                 level: LogLevelText[value.level ?? 0],
                 component: getComponent(value.task_id),
                 log: value.message,
diff --git a/ui/lib/components/DateTime/Calendar.tsx b/ui/lib/components/DateTime/Calendar.tsx
index 03e0f09dd9..542f89684a 100644
--- a/ui/lib/components/DateTime/Calendar.tsx
+++ b/ui/lib/components/DateTime/Calendar.tsx
@@ -10,29 +10,31 @@ import { IDateTimeProps } from '.'
 import calendar from './calendarPlugin'
 import weekOfYear from 'dayjs/plugin/weekOfYear'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
+import timezone from 'dayjs/plugin/timezone'
 
 dayjs.extend(calendar)
 dayjs.extend(weekOfYear)
 dayjs.extend(localizedFormat)
+dayjs.extend(timezone)
 
 const translations = {
   en: {
-    sameDay: '[Today at] h:mm A',
-    sameWeek: 'dddd h:mm A',
-    nextDay: '[Tomorrow] h:mm A',
-    nextWeek: '[Next] dddd h:mm A',
-    lastDay: '[Yesterday] h:mm A',
-    lastWeek: '[Last] dddd h:mm A',
-    sameElse: 'lll',
+    sameDay: '[Today at] h:mm A (z)',
+    sameWeek: 'dddd h:mm A (z)',
+    nextDay: '[Tomorrow] h:mm A (z)',
+    nextWeek: '[Next] dddd h:mm A (z)',
+    lastDay: '[Yesterday] h:mm A (z)',
+    lastWeek: '[Last] dddd h:mm A (z)',
+    sameElse: 'lll (z)',
   },
   zh: {
-    sameDay: '[今天] HH:mm',
-    sameWeek: 'dddd HH:mm',
-    nextDay: '[明天] HH:mm',
-    nextWeek: '[下]dddd HH:mm',
-    lastDay: '[昨天] HH:mm',
-    lastWeek: '[上]dddd HH:mm',
-    sameElse: 'lll',
+    sameDay: '[今天] HH:mm (z)',
+    sameWeek: 'dddd HH:mm (z)',
+    nextDay: '[明天] HH:mm (z)',
+    nextWeek: '[下]dddd HH:mm (z)',
+    lastDay: '[昨天] HH:mm (z)',
+    lastWeek: '[上]dddd HH:mm (z)',
+    sameElse: 'lll (z)',
   },
 }
 
diff --git a/ui/lib/components/DateTime/Long.tsx b/ui/lib/components/DateTime/Long.tsx
index dbc3a0da6b..1682aa1f0f 100644
--- a/ui/lib/components/DateTime/Long.tsx
+++ b/ui/lib/components/DateTime/Long.tsx
@@ -18,7 +18,7 @@ function Long({ unixTimestampMs, ...rest }: IDateTimeProps) {
 }
 
 export function format(unixTimestampMs: number) {
-  return dayjs(unixTimestampMs).format('ll LTS')
+  return dayjs(unixTimestampMs).format('ll LTS (z)')
 }
 
 export default React.memo(Long)