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

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

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', () => {