Skip to content

Commit

Permalink
feat(date): Default show datetime in local timezone instead of UTC
Browse files Browse the repository at this point in the history
Resolves: flyteorg/flyte#2908
Signed-off-by: Chi-Sheng Liu <[email protected]>
  • Loading branch information
MortalHappiness committed Mar 25, 2024
1 parent eb7fe2b commit 4811c15
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 36 deletions.
26 changes: 13 additions & 13 deletions packages/oss-console/src/common/formatters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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,
),
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import styled from '@mui/system/styled';
import {
formatDateLocalTimezone,
formatDateUTC,
formateDateRelative,
formatDateRelative,
millisecondsToHMS,
} from '../../../../common/formatters';
import { timestampToDate } from '../../../../common/utils';
Expand Down Expand Up @@ -83,7 +83,7 @@ export function getStartTimeCell(
// const isArchived = isExecutionArchived(execution);

if (isRelativeStartTime) {
return formateDateRelative(startedAtDate);
return formatDateRelative(startedAtDate);
}

const localTime = React.useMemo(() => {
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
Expand Down

0 comments on commit 4811c15

Please sign in to comment.