From 8027298da49bb739023cd583c3706fe028e99022 Mon Sep 17 00:00:00 2001 From: Marylia Gutierrez Date: Thu, 5 May 2022 18:26:03 -0400 Subject: [PATCH] ui: update dates to 24h UTC This commit updates all dates to use a 24h format in UTC Fixes #78442 Fixes #80103 Release note (ui change): Update all dates to use 24h format in UTC --- .../activeStatementsTable/activeStatementsTable.tsx | 2 +- .../activeTransactionsTable.tsx | 2 +- .../src/databaseDetailsPage/databaseDetailsPage.tsx | 2 +- .../src/databaseTablePage/databaseTablePage.tsx | 6 +++--- .../workspaces/cluster-ui/src/dateRange/dateRange.tsx | 11 ++++------- .../src/indexDetailsPage/indexDetailsPage.tsx | 2 +- .../cluster-ui/src/sessions/sessionsTable.tsx | 4 ++-- .../src/statementDetails/activeStatementDetails.tsx | 4 +--- .../statementDetails/diagnostics/diagnosticsView.tsx | 2 +- .../src/statementsTable/statementsTableContent.tsx | 4 ++-- .../cluster-ui/src/statsTableUtil/statsTableUtil.tsx | 4 ++-- .../src/timeScaleDropdown/timeScaleDropdown.tsx | 2 +- .../transactionDetails/activeTransactionDetails.tsx | 2 +- pkg/ui/workspaces/cluster-ui/src/util/format.ts | 2 +- .../src/components/rangeCalendar/rangeCalendar.tsx | 4 ++-- pkg/ui/workspaces/db-console/src/util/format.ts | 2 +- .../views/cluster/containers/nodesOverview/index.tsx | 2 +- .../nodeHistory/decommissionedNodeHistory.tsx | 2 +- .../containers/statementDiagnosticsHistory/index.tsx | 6 +++--- .../workspaces/db-console/src/views/tracez/tracez.tsx | 2 +- 20 files changed, 31 insertions(+), 36 deletions(-) diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx index b250f00431ab..67c497889a18 100644 --- a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx @@ -76,7 +76,7 @@ export function makeActiveStatementsColumns(): ColumnDescriptor< name: "startTime", title: executionsTableTitles.startTime(execType), cell: (item: ActiveStatement) => - item.start.format("MMM D, YYYY [at] h:mm a"), + item.start.format("MMM D, YYYY [at] H:mm"), sort: (item: ActiveStatement) => item.start.unix(), }, { diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx index a58953e4a6cb..bba3b9b39ffc 100644 --- a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeTransactionsTable/activeTransactionsTable.tsx @@ -78,7 +78,7 @@ export function makeActiveTransactionsColumns(): ColumnDescriptor< name: "startTime", title: executionsTableTitles.startTime(execType), cell: (item: ActiveTransaction) => - item.start.format("MMM D, YYYY [at] h:mm a"), + item.start.format("MMM D, YYYY [at] H:mm"), sort: (item: ActiveTransaction) => item.start.unix(), }, { diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx index bc2c0cda64e3..0cf9d1339a5f 100644 --- a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx @@ -380,7 +380,7 @@ export class DatabaseDetailsPage extends React.Component< cell: table => !table.details.statsLastUpdated ? "No table statistics found" - : table.details.statsLastUpdated.format("MMM DD, YYYY [at] h:mm A"), + : table.details.statsLastUpdated.format("MMM DD, YYYY [at] H:mm"), sort: table => table.details.statsLastUpdated, className: cx("database-table__col--table-stats"), name: "tableStatsUpdated", diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx index d9ff83429adb..2097ca57a652 100644 --- a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx @@ -238,7 +238,7 @@ export class DatabaseTablePage extends React.Component< return "Last reset: Never"; } else { return ( - "Last reset: " + lastReset.format("MMM DD, YYYY [at] h:mm A [(UTC)]") + "Last reset: " + lastReset.format("MMM DD, YYYY [at] H:mm [(UTC)]") ); } } @@ -250,7 +250,7 @@ export class DatabaseTablePage extends React.Component< return "Never"; } return indexStat.lastUsed.format( - `[Last ${indexStat.lastUsedType}:] MMM DD, YYYY [at] h:mm A`, + `[Last ${indexStat.lastUsedType}:] MMM DD, YYYY [at] H:mm`, ); } @@ -431,7 +431,7 @@ export class DatabaseTablePage extends React.Component< )} diff --git a/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx b/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx index 4a9e24b89ce3..5382e837e768 100644 --- a/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx @@ -8,7 +8,7 @@ // by the Apache License, Version 2.0, included in the file // licenses/APL.txt. -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { Alert, DatePicker, Form, Input, Popover, TimePicker } from "antd"; import moment, { Moment } from "moment"; import classNames from "classnames/bind"; @@ -17,13 +17,12 @@ import { Button } from "src/button"; import { Text, TextTypes } from "src/text"; import styles from "./dateRange.module.scss"; -import { usePrevious } from "../util/hooks"; const cx = classNames.bind(styles); function rangeToString(start: Moment, end: Moment): string { - const formatStr = "MMM D, h:mm A"; - const formatStrSameDay = "h:mm A"; + const formatStr = "MMM D, H:mm"; + const formatStrSameDay = "H:mm"; const isSameDay = start.isSame(end, "day"); return `${start.utc().format(formatStr)} - ${end @@ -47,7 +46,7 @@ export function DateRangeMenu({ onCancel, }: DateRangeMenuProps): React.ReactElement { const dateFormat = "MMMM D, YYYY"; - const timeFormat = "h:mm A [(UTC)]"; + const timeFormat = "H:mm [(UTC)]"; /** * Local startMoment and endMoment state are stored here so that users can change the time before clicking "Apply". * They are re-initialized to startInit and endInit by re-mounting this component. It is thus the responsibility of @@ -125,7 +124,6 @@ export function DateRangeMenu({ onChange={onChangeStart} suffixIcon={} value={startMoment} - use12Hours />
@@ -145,7 +143,6 @@ export function DateRangeMenu({ onChange={onChangeEnd} suffixIcon={} value={endMoment} - use12Hours /> {!isValid && ( { }; function formatSessionStart(session: ISession): string { - const formatStr = "MMM DD, YYYY [at] h:mm A"; + const formatStr = "MMM DD, YYYY [at] H:mm"; const start = moment.unix(Number(session.start.seconds)).utc(); return start.format(formatStr); @@ -111,7 +111,7 @@ function formatStatementStart(session: ISession): string { if (session.active_queries.length == 0) { return "N/A"; } - const formatStr = "MMM DD, YYYY [at] h:mm A"; + const formatStr = "MMM DD, YYYY [at] H:mm"; const start = moment .unix(Number(session.active_queries[0].start.seconds)) .utc(); diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx index 854f04abca84..ac1cc8097cef 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx @@ -95,9 +95,7 @@ export const ActiveStatementDetails: React.FC = ({
Start Time (UTC) - {statement.start.format( - "MMM D, YYYY [at] h:mm a (UTC)", - )} + {statement.start.format("MMM D, YYYY [at] H:mm (UTC)")}
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx index 68a7d8d2654f..10eabb0f7cf6 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx @@ -126,7 +126,7 @@ export class DiagnosticsView extends React.Component< defaultSortOrder: "descend", render: (_text, record) => { const timestamp = record.requested_at.seconds.toNumber() * 1000; - return moment(timestamp).format("LL[ at ]h:mm a"); + return moment.utc(timestamp).format("LL[ at ]H:mm"); }, }, { diff --git a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx index e8fea95a2d2b..1d532e395754 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementsTable/statementsTableContent.tsx @@ -127,8 +127,8 @@ export const StatementTableCell = { dr.statement_diagnostics_id }`} > - {`Download Z${TimestampToMoment(dr.requested_at).format( - "ll [at] LT [diagnostic]", + {`Download ${TimestampToMoment(dr.requested_at).format( + "MMM DD, YYYY [at] H:mm [(UTC)] [diagnostic]", )}`} ), diff --git a/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx b/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx index 5e4f4b8ec0b4..192d700c541e 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statsTableUtil/statsTableUtil.tsx @@ -838,8 +838,8 @@ export function formatAggregationIntervalColumn( aggregatedTs: number, interval: number, ): string { - const formatStr = "MMM D, h:mm A"; - const formatStrWithoutDay = "h:mm A"; + const formatStr = "MMM D, H:mm"; + const formatStrWithoutDay = "H:mm"; const start = moment.unix(aggregatedTs).utc(); const end = moment.unix(aggregatedTs + interval).utc(); const isSameDay = start.isSame(end, "day"); diff --git a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx index 5c21c0c0b583..3b39f7cde9b3 100644 --- a/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/timeScaleDropdown/timeScaleDropdown.tsx @@ -27,7 +27,7 @@ import styles from "./timeScale.module.scss"; const cx = classNames.bind(styles); export const dateFormat = "MMM DD,"; -export const timeFormat = "h:mmA"; +export const timeFormat = "H:mm"; export interface TimeScaleDropdownProps { currentScale: TimeScale; diff --git a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/activeTransactionDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/activeTransactionDetails.tsx index 2d3904863e83..70815c9b3d78 100644 --- a/pkg/ui/workspaces/cluster-ui/src/transactionDetails/activeTransactionDetails.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/transactionDetails/activeTransactionDetails.tsx @@ -101,7 +101,7 @@ export const ActiveTransactionDetails: React.FC = Start Time (UTC) {transaction.start.format( - "MMM D, YYYY [at] h:mm a (UTC)", + "MMM D, YYYY [at] H:mm (UTC)", )}
diff --git a/pkg/ui/workspaces/cluster-ui/src/util/format.ts b/pkg/ui/workspaces/cluster-ui/src/util/format.ts index f470c991c2f6..b5fb75862ae6 100644 --- a/pkg/ui/workspaces/cluster-ui/src/util/format.ts +++ b/pkg/ui/workspaces/cluster-ui/src/util/format.ts @@ -164,7 +164,7 @@ export const DurationFitScale = (scale: string) => (nanoseconds: number) => { return `${(nanoseconds / Math.pow(1000, n)).toFixed(2)} ${scale}`; }; -export const DATE_FORMAT = "MMM DD, YYYY [at] h:mm A"; +export const DATE_FORMAT = "MMM DD, YYYY [at] H:mm"; export function RenderCount(yesCount: Long, totalCount: Long) { if (longToInt(yesCount) == 0) { diff --git a/pkg/ui/workspaces/db-console/src/components/rangeCalendar/rangeCalendar.tsx b/pkg/ui/workspaces/db-console/src/components/rangeCalendar/rangeCalendar.tsx index 10372e2173c2..74836c3cf628 100644 --- a/pkg/ui/workspaces/db-console/src/components/rangeCalendar/rangeCalendar.tsx +++ b/pkg/ui/workspaces/db-console/src/components/rangeCalendar/rangeCalendar.tsx @@ -56,7 +56,7 @@ function isBelowMinDateRange( } export const RangeCalendar: React.FC = ({ - timeFormat = "h:mm A", + timeFormat = "H:mm", minTimeRange = [10, "minute"], onCancel = noop, onSubmit = noop, @@ -140,7 +140,7 @@ export const RangeCalendar: React.FC = ({ const timePickerDefaultProps: TimePickerProps & RcTimePickerProps = { allowClear: false, - use12Hours: true, + use12Hours: false, inputReadOnly: true, format: timeFormat, className: cx("crl-time-picker"), diff --git a/pkg/ui/workspaces/db-console/src/util/format.ts b/pkg/ui/workspaces/db-console/src/util/format.ts index f4be6afce738..4fab828335db 100644 --- a/pkg/ui/workspaces/db-console/src/util/format.ts +++ b/pkg/ui/workspaces/db-console/src/util/format.ts @@ -151,7 +151,7 @@ export const DurationFitScale = (scale: string) => (nanoseconds: number) => { return `${(nanoseconds / Math.pow(1000, n)).toFixed(2)} ${scale}`; }; -export const DATE_FORMAT = "MMM DD, YYYY [at] h:mm A"; +export const DATE_FORMAT = "MMM DD, YYYY [at] H:mm"; /** * Alternate 24 hour UTC format diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx index 57813e1bb70c..c8039d6354e1 100644 --- a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx +++ b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodesOverview/index.tsx @@ -442,7 +442,7 @@ class DecommissionedNodeList extends React.Component< key: "decommissionedSince", title: "decommissioned on", render: (_text: string, record: DecommissionedNodeStatusRow) => - record.decommissionedDate.format("LL[ at ]h:mm a UTC"), + record.decommissionedDate.format("LL[ at ]H:mm UTC"), }, { key: "status", diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/nodeHistory/decommissionedNodeHistory.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/nodeHistory/decommissionedNodeHistory.tsx index 95c228182381..d2f5e3634b66 100644 --- a/pkg/ui/workspaces/db-console/src/views/reports/containers/nodeHistory/decommissionedNodeHistory.tsx +++ b/pkg/ui/workspaces/db-console/src/views/reports/containers/nodeHistory/decommissionedNodeHistory.tsx @@ -90,7 +90,7 @@ export class DecommissionedNodeHistory extends React.Component< title: "Decommissioned On", sorter: sortByDecommissioningDate, render: (_text, record) => { - return record.decommissionedDate.format("LL[ at ]h:mm a UTC"); + return record.decommissionedDate.format("LL[ at ]H:mm UTC"); }, }, ]; diff --git a/pkg/ui/workspaces/db-console/src/views/reports/containers/statementDiagnosticsHistory/index.tsx b/pkg/ui/workspaces/db-console/src/views/reports/containers/statementDiagnosticsHistory/index.tsx index 10dbb3020be8..f6b664fb1222 100644 --- a/pkg/ui/workspaces/db-console/src/views/reports/containers/statementDiagnosticsHistory/index.tsx +++ b/pkg/ui/workspaces/db-console/src/views/reports/containers/statementDiagnosticsHistory/index.tsx @@ -96,9 +96,9 @@ class StatementDiagnosticsHistoryView extends React.Component< title: "Activated on", name: "activated_on", cell: record => - moment(record.requested_at.seconds.toNumber() * 1000).format( - "LL[ at ]h:mm a", - ), + moment + .utc(record.requested_at.seconds.toNumber() * 1000) + .format("LL[ at ]H:mm"), sort: record => moment(record.requested_at.seconds.toNumber() * 1000), }, { diff --git a/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx b/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx index 4df497faca5c..daba4775149a 100644 --- a/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx +++ b/pkg/ui/workspaces/db-console/src/views/tracez/tracez.tsx @@ -44,7 +44,7 @@ import ISpanTag = cockroach.server.serverpb.ISpanTag; import SetTraceRecordingTypeRequest = cockroach.server.serverpb.SetTraceRecordingTypeRequest; import RecordingMode = cockroach.util.tracing.tracingpb.RecordingMode; -const TS_FORMAT = "MMMM Do YYYY, h:mm:ss a"; // January 28th 2022, 7:12:40 pm; +const TS_FORMAT = "MMMM Do YYYY, H:mm:ss"; // January 28th 2022, 19:12:40; const tsToFormat = (ts: google.protobuf.ITimestamp) => util.TimestampToMoment(ts).format(TS_FORMAT);