feat(date): Default show datetime in local timezone instead of UTC

Resolves: flyteorg/flyte#2908
Signed-off-by: Chi-Sheng Liu <[email protected]>

Author: MortalHappiness

packages/oss-console/src/common/formatters.ts

@@ -8,18 +8,6 @@ import { durationToMilliseconds, isValidDate } from './utils';
 
 const defaultUTCFormat = 'l LTS';
 
-/** Formats a date into a standard string with a moment-style "from now" hint
- * ex. 12/21/2017 8:19:36 PM (18 days ago)
- */
-export function dateWithFromNow(input: Date) {
-  if (!isValidDate(input)) {
-    return unknownValueString;
-  }
-
-  const date = moment.utc(input);
-  return `${date.format(defaultUTCFormat)} UTC (${date.fromNow()})`;
-}
-
 /** Formats a date into a moment-style "from now" value */
 export function dateFromNow(input: Date) {
   if (!isValidDate(input)) {
@@ -51,7 +39,7 @@ export function formatDateUTC(input: Date, formatString?: string) {
 /**
  * Gets human-readable date relative to "now"
  */
-export function formateDateRelative(input: Date, threshold = 24 * 60 * 60 * 1000) {
+export function formatDateRelative(input: Date, threshold = 24 * 60 * 60 * 1000) {
   if (!isValidDate(input)) {
     return unknownValueString;
   }
@@ -72,6 +60,18 @@ export function formatDateLocalTimezone(input: Date) {
   return isValidDate(input) ? moment(input).tz(timezone).format('l LTS z') : unknownValueString;
 }
 
+/** Formats a date into a standard string with a moment-style "from now" hint
+ * ex. 12/21/2017 8:19:36 PM (18 days ago)
+ */
+export function dateWithFromNow(input: Date) {
+  if (!isValidDate(input)) {
+    return unknownValueString;
+  }
+
+  const date = moment.utc(input);
+  return `${formatDateLocalTimezone(input)} (${date.fromNow()})`;
+}
+
 /** Outputs a value in milliseconds in (H M S) format (ex. 2h 3m 30s) */
 export function millisecondsToHMS(valueMS: number): string {
   if (valueMS < 0) {

packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx

@@ -6,7 +6,7 @@ import { Link as RouterLink } from 'react-router-dom';
 import styled from '@mui/system/styled';
 import * as CommonStylesConstants from '@clients/theme/CommonStyles/constants';
 import { dashedValueString } from '@clients/common/constants';
-import { formatDateUTC, protobufDurationToHMS } from '../../../common/formatters';
+import { formatDateLocalTimezone, protobufDurationToHMS } from '../../../common/formatters';
 import { timestampToDate } from '../../../common/utils';
 import { useCommonStyles } from '../../common/styles';
 import { Routes } from '../../../routes/routes';
@@ -85,7 +85,7 @@ export const ExecutionMetadata: React.FC<{}> = () => {
     },
     {
       label: ExecutionMetadataLabels.time,
-      value: startedAt ? formatDateUTC(timestampToDate(startedAt)) : dashedValueString,
+      value: startedAt ? formatDateLocalTimezone(timestampToDate(startedAt)) : dashedValueString,
     },
     {
       label: ExecutionMetadataLabels.duration,

packages/oss-console/src/components/Executions/ExecutionDetails/utils.ts

@@ -1,7 +1,7 @@
 import { ResourceType } from '../../../models/Common/types';
 import { Execution, NodeExecution, TaskExecution } from '../../../models/Execution/types';
 import { timestampToDate } from '../../../common/utils';
-import { formatDateUTC } from '../../../common/formatters';
+import { formatDateLocalTimezone } from '../../../common/formatters';
 
 export function isSingleTaskExecution(execution: Execution) {
   return execution.spec.launchPlan.resourceType === ResourceType.TASK;
@@ -21,8 +21,9 @@ export function getTaskExecutionDetailReasons(
       reasons = reasons.concat(
         finalReasons.map(
           (reason) =>
-            (reason.occurredAt ? `${formatDateUTC(timestampToDate(reason.occurredAt))} ` : '') +
-            reason.message,
+            (reason.occurredAt
+              ? `${formatDateLocalTimezone(timestampToDate(reason.occurredAt))} `
+              : '') + reason.message,
         ),
       );
     }

packages/oss-console/src/components/Executions/Tables/NodeExecutionsTable.tsx

@@ -254,18 +254,16 @@ export const NodeExecutionsTable: React.FC<{
               </TableHead>
               <TableBody>
                 {showNodes.length > 0 ? (
-                  showNodes.map((node) => {
-                    return (
-                      <NodeExecutionDynamicProvider node={node} key={node.scopedId}>
-                        <NodeExecutionRow
-                          columns={columns}
-                          node={node}
-                          onToggle={toggleNode}
-                          key={node.scopedId}
-                        />
-                      </NodeExecutionDynamicProvider>
-                    );
-                  })
+                  showNodes.map((node) => (
+                    <NodeExecutionDynamicProvider node={node} key={node.scopedId}>
+                      <NodeExecutionRow
+                        columns={columns}
+                        node={node}
+                        onToggle={toggleNode}
+                        key={node.scopedId}
+                      />
+                    </NodeExecutionDynamicProvider>
+                  ))
                 ) : (
                   <TableNoRowsCell displayMessage={noExecutionsFoundString} />
                 )}

packages/oss-console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx

@@ -16,7 +16,7 @@ import styled from '@mui/system/styled';
 import {
   formatDateLocalTimezone,
   formatDateUTC,
-  formateDateRelative,
+  formatDateRelative,
   millisecondsToHMS,
 } from '../../../../common/formatters';
 import { timestampToDate } from '../../../../common/utils';
@@ -83,7 +83,7 @@ export function getStartTimeCell(
   // const isArchived = isExecutionArchived(execution);
 
   if (isRelativeStartTime) {
-    return formateDateRelative(startedAtDate);
+    return formatDateRelative(startedAtDate);
   }
 
   const localTime = React.useMemo(() => {
@@ -113,8 +113,8 @@ export function getStartTimeCell(
       }
       return `${h}h ${m}m ago`;
     }
-    return utc;
-  }, [startedAtDate, utc]);
+    return localTime;
+  }, [startedAtDate, localTime]);
 
   const tooltipText = React.useMemo(() => {
     const isLast24Hours = moment().diff(startedAtDate, 'hours') < 24;

packages/oss-console/src/components/Executions/Tables/nodeExecutionColumns.tsx

@@ -123,10 +123,10 @@ export function generateColumns(
         return (
           <>
             <Typography variant="body1" className={className}>
-              {formatDateUTC(startedAtDate)}
+              {formatDateLocalTimezone(startedAtDate)}
             </Typography>
             <Typography variant="subtitle1" color="textSecondary" className={className}>
-              {formatDateLocalTimezone(startedAtDate)}
+              {formatDateUTC(startedAtDate)}
             </Typography>
           </>
         );

packages/oss-console/src/components/Executions/TaskExecutionsList/test/TaskExecutionDetails.test.tsx

@@ -1,15 +1,18 @@
 import { render } from '@testing-library/react';
 import * as React from 'react';
+import moment from 'moment-timezone';
 import { ThemeProvider } from '@mui/material/styles';
 import { muiTheme } from '@clients/theme/Theme/muiTheme';
+import { timezone } from '@clients/oss-console/common/timezone';
 import { unknownValueString } from '@clients/common/constants';
 import { long } from '../../../../test/utils';
 import { TaskExecutionDetails } from '../TaskExecutionDetails';
 
 const date = { seconds: long(5), nanos: 0 };
 const duration = { seconds: long(0), nanos: 0 };
 
-const dateContent = '1/1/1970 12:00:05 AM UTC';
+const utcDateContent = '1/1/1970 12:00:05 AM UTC';
+const dateContent = moment(utcDateContent).tz(timezone).format('l LTS z');
 
 describe('TaskExecutionDetails', () => {
   it('should render details with task started info and duration', () => {