From 8f8e6a48d6d56b60e597050f46d0774d34acda83 Mon Sep 17 00:00:00 2001 From: Chi-Sheng Liu Date: Tue, 26 Mar 2024 01:09:00 +0800 Subject: [PATCH] feat(date): Default show datetime in local timezone instead of UTC Resolves: flyteorg/flyte#2908 Signed-off-by: Chi-Sheng Liu --- packages/oss-console/src/common/formatters.ts | 26 +++++++++---------- .../ExecutionDetails/ExecutionMetadata.tsx | 4 +-- .../Executions/ExecutionDetails/utils.ts | 7 ++--- .../Executions/Tables/NodeExecutionsTable.tsx | 22 +++++++--------- .../Tables/WorkflowExecutionTable/cells.tsx | 8 +++--- .../Tables/nodeExecutionColumns.tsx | 4 +-- .../test/TaskExecutionDetails.test.tsx | 5 +++- 7 files changed, 39 insertions(+), 37 deletions(-) diff --git a/packages/oss-console/src/common/formatters.ts b/packages/oss-console/src/common/formatters.ts index ac8957535..038b07f39 100644 --- a/packages/oss-console/src/common/formatters.ts +++ b/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) { diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx index fef119a0c..f5964c717 100644 --- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx +++ b/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, diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/utils.ts b/packages/oss-console/src/components/Executions/ExecutionDetails/utils.ts index 77e4675a1..28f911bdf 100644 --- a/packages/oss-console/src/components/Executions/ExecutionDetails/utils.ts +++ b/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, ), ); } diff --git a/packages/oss-console/src/components/Executions/Tables/NodeExecutionsTable.tsx b/packages/oss-console/src/components/Executions/Tables/NodeExecutionsTable.tsx index f8300f36d..0ad0362b4 100644 --- a/packages/oss-console/src/components/Executions/Tables/NodeExecutionsTable.tsx +++ b/packages/oss-console/src/components/Executions/Tables/NodeExecutionsTable.tsx @@ -254,18 +254,16 @@ export const NodeExecutionsTable: React.FC<{ {showNodes.length > 0 ? ( - showNodes.map((node) => { - return ( - - - - ); - }) + showNodes.map((node) => ( + + + + )) ) : ( )} diff --git a/packages/oss-console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx b/packages/oss-console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx index 735d3e246..c2490dfbc 100644 --- a/packages/oss-console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx +++ b/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; diff --git a/packages/oss-console/src/components/Executions/Tables/nodeExecutionColumns.tsx b/packages/oss-console/src/components/Executions/Tables/nodeExecutionColumns.tsx index 658b71569..a34abf9bd 100644 --- a/packages/oss-console/src/components/Executions/Tables/nodeExecutionColumns.tsx +++ b/packages/oss-console/src/components/Executions/Tables/nodeExecutionColumns.tsx @@ -123,10 +123,10 @@ export function generateColumns( return ( <> - {formatDateUTC(startedAtDate)} + {formatDateLocalTimezone(startedAtDate)} - {formatDateLocalTimezone(startedAtDate)} + {formatDateUTC(startedAtDate)} ); diff --git a/packages/oss-console/src/components/Executions/TaskExecutionsList/test/TaskExecutionDetails.test.tsx b/packages/oss-console/src/components/Executions/TaskExecutionsList/test/TaskExecutionDetails.test.tsx index 436713d19..9e6dd638b 100644 --- a/packages/oss-console/src/components/Executions/TaskExecutionsList/test/TaskExecutionDetails.test.tsx +++ b/packages/oss-console/src/components/Executions/TaskExecutionsList/test/TaskExecutionDetails.test.tsx @@ -1,7 +1,9 @@ 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'; @@ -9,7 +11,8 @@ 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', () => {