From 3354daca731212e9b6da2c369ebd9cefbf1ea4ce Mon Sep 17 00:00:00 2001 From: Marylia Gutierrez Date: Mon, 27 Jun 2022 17:33:03 -0400 Subject: [PATCH] ui: update all dates to use same format Update all dates to use the same format. Fixes #81159 Release note: None --- .../src/databaseDetailsPage/databaseDetailsPage.tsx | 7 ++----- .../cluster-ui/src/databaseTablePage/databaseTablePage.tsx | 5 ++--- pkg/ui/workspaces/cluster-ui/src/graphs/utils/domain.ts | 3 ++- .../cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx | 4 ++-- .../src/statementDetails/diagnostics/diagnosticsView.tsx | 3 ++- pkg/ui/workspaces/cluster-ui/src/util/format.ts | 3 ++- pkg/ui/workspaces/db-console/src/util/format.ts | 3 ++- .../src/views/cluster/containers/nodeLogs/index.tsx | 5 ++++- .../src/views/cluster/containers/nodesOverview/index.tsx | 4 ++-- .../containers/nodeHistory/decommissionedNodeHistory.tsx | 3 ++- .../containers/statementDiagnosticsHistory/index.tsx | 3 ++- 11 files changed, 24 insertions(+), 19 deletions(-) diff --git a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx index c16df253dd5a..a4311ee7f8f0 100644 --- a/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/databaseDetailsPage/databaseDetailsPage.tsx @@ -37,7 +37,7 @@ import { statisticsClasses, } from "src/transactionsPage/transactionsPageClasses"; import { Moment } from "moment"; -import { formatDate } from "antd/es/date-picker/utils"; +import { DATE_FORMAT } from "src/util/format"; const cx = classNames.bind(styles); const sortableTableCx = classNames.bind(sortableTableStyles); @@ -366,10 +366,7 @@ export class DatabaseDetailsPage extends React.Component< cell: table => !table.details.statsLastUpdated ? "No table statistics found" - : formatDate( - table.details.statsLastUpdated, - "MMM DD, YYYY [at] H:mm", - ), + : table.details.statsLastUpdated.format(DATE_FORMAT), 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 0c37f841c21d..fb3ca9b577b2 100644 --- a/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/databaseTablePage/databaseTablePage.tsx @@ -39,6 +39,7 @@ import { formatDate } from "antd/es/date-picker/utils"; import { Link } from "react-router-dom"; import classnames from "classnames/bind"; import booleanSettingStyles from "../settings/booleanSetting.module.scss"; +import { DATE_FORMAT_24_UTC } from "src/util/format"; const cx = classNames.bind(styles); const booleanSettingCx = classnames.bind(booleanSettingStyles); @@ -231,9 +232,7 @@ export class DatabaseTablePage extends React.Component< if (lastReset.isSame(this.minDate)) { return "Last reset: Never"; } else { - return ( - "Last reset: " + formatDate(lastReset, "MMM DD, YYYY [at] H:mm [(UTC)]") - ); + return "Last reset: " + lastReset.format(DATE_FORMAT_24_UTC); } } diff --git a/pkg/ui/workspaces/cluster-ui/src/graphs/utils/domain.ts b/pkg/ui/workspaces/cluster-ui/src/graphs/utils/domain.ts index 963d09dc8069..56ba91c71267 100644 --- a/pkg/ui/workspaces/cluster-ui/src/graphs/utils/domain.ts +++ b/pkg/ui/workspaces/cluster-ui/src/graphs/utils/domain.ts @@ -15,6 +15,7 @@ import { BytesFitScale, ComputeByteScale, ComputeDurationScale, + DATE_WITH_SECONDS_FORMAT_24_UTC, DurationFitScale, } from "src/util/format"; @@ -275,7 +276,7 @@ const timeIncrements: number[] = timeIncrementDurations.map(inc => ); export function formatTimeStamp(timeMillis: number): string { - return moment.utc(timeMillis).format("HH:mm:ss on MMM Do, YYYY"); + return moment.utc(timeMillis).format(DATE_WITH_SECONDS_FORMAT_24_UTC); } function ComputeTimeAxisDomain(extent: Extent): AxisDomain { diff --git a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx index 7834bfdfd545..b9ebc2856916 100644 --- a/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx @@ -20,8 +20,8 @@ import { Search as IndexIcon } from "@cockroachlabs/icons"; import { SqlBox } from "src/sql"; import { Col, Row, Tooltip } from "antd"; import { SummaryCard } from "../summaryCard"; -import { formatDate } from "antd/es/date-picker/utils"; import moment, { Moment } from "moment"; +import { DATE_FORMAT_24_UTC } from "../util"; const cx = classNames.bind(styles); @@ -115,7 +115,7 @@ export class IndexDetailsPage extends React.Component< if (timestamp.isSame(minDate)) { return "Never"; } else { - return formatDate(timestamp, "MMM DD, YYYY [at] H:mm [(UTC)]"); + return timestamp.format(DATE_FORMAT_24_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 10eabb0f7cf6..a23f0ec76e5c 100644 --- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/diagnostics/diagnosticsView.tsx @@ -31,6 +31,7 @@ import { import { EmptyTable } from "src/empty"; import styles from "./diagnosticsView.module.scss"; import { getBasePath } from "../../api"; +import { DATE_FORMAT_24_UTC } from "../../util"; type IStatementDiagnosticsReport = cockroach.server.serverpb.IStatementDiagnosticsReport; @@ -126,7 +127,7 @@ export class DiagnosticsView extends React.Component< defaultSortOrder: "descend", render: (_text, record) => { const timestamp = record.requested_at.seconds.toNumber() * 1000; - return moment.utc(timestamp).format("LL[ at ]H:mm"); + return moment.utc(timestamp).format(DATE_FORMAT_24_UTC); }, }, { diff --git a/pkg/ui/workspaces/cluster-ui/src/util/format.ts b/pkg/ui/workspaces/cluster-ui/src/util/format.ts index 43f161b0f257..6dfa679939e7 100644 --- a/pkg/ui/workspaces/cluster-ui/src/util/format.ts +++ b/pkg/ui/workspaces/cluster-ui/src/util/format.ts @@ -168,7 +168,8 @@ export const DurationFitScale = (scale: string) => ( }; export const DATE_FORMAT = "MMM DD, YYYY [at] H:mm"; -export const DATE_FORMAT_24_UTC = "MMM DD, YYYY [at] HH:mm UTC"; +export const DATE_FORMAT_24_UTC = "MMM DD, YYYY [at] H:mm UTC"; +export const DATE_WITH_SECONDS_FORMAT_24_UTC = "MMM DD, YYYY [at] H:mm:ss UTC"; export function RenderCount(yesCount: Long, totalCount: Long): string { if (longToInt(yesCount) == 0) { diff --git a/pkg/ui/workspaces/db-console/src/util/format.ts b/pkg/ui/workspaces/db-console/src/util/format.ts index 4fab828335db..717d9f043d39 100644 --- a/pkg/ui/workspaces/db-console/src/util/format.ts +++ b/pkg/ui/workspaces/db-console/src/util/format.ts @@ -156,4 +156,5 @@ export const DATE_FORMAT = "MMM DD, YYYY [at] H:mm"; /** * Alternate 24 hour UTC format */ -export const DATE_FORMAT_24_UTC = "MMM DD, YYYY [at] HH:mm UTC"; +export const DATE_FORMAT_24_UTC = "MMM DD, YYYY [at] H:mm UTC"; +export const DATE_WITH_SECONDS_FORMAT_24_UTC = "MMM DD, YYYY [at] H:mm:ss UTC"; diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeLogs/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeLogs/index.tsx index 31b7f626d506..02f4f9d1b352 100644 --- a/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeLogs/index.tsx +++ b/pkg/ui/workspaces/db-console/src/views/cluster/containers/nodeLogs/index.tsx @@ -26,6 +26,7 @@ import { getDisplayName } from "src/redux/nodes"; import { Loading, SortedTable, util } from "@cockroachlabs/cluster-ui"; import { getMatchParamByName } from "src/util/query"; import "./logs.styl"; +import { DATE_WITH_SECONDS_FORMAT_24_UTC } from "src/util/format"; type LogEntries = protos.cockroach.util.log.IEntry; @@ -55,7 +56,9 @@ export class Logs extends React.Component { title: "Time", name: "time", cell: (logEntry: LogEntries) => - util.LongToMoment(logEntry.time).format("YYYY-MM-DD HH:mm:ss"), + util + .LongToMoment(logEntry.time) + .format(DATE_WITH_SECONDS_FORMAT_24_UTC), }, { title: "Severity", 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 c8039d6354e1..80b527f8f9ef 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 @@ -33,7 +33,7 @@ import { SortSetting, util, } from "@cockroachlabs/cluster-ui"; -import { Percentage } from "src/util/format"; +import { DATE_FORMAT_24_UTC, Percentage } from "src/util/format"; import { FixLong } from "src/util/fixLong"; import { getNodeLocalityTiers } from "src/util/localities"; import { LocalityTier } from "src/redux/localities"; @@ -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 UTC"), + record.decommissionedDate.format(DATE_FORMAT_24_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 d2f5e3634b66..808630ddfd75 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 @@ -31,6 +31,7 @@ import { util, } from "@cockroachlabs/cluster-ui"; import { createSelector } from "reselect"; +import { DATE_FORMAT_24_UTC } from "src/util/format"; const decommissionedNodesSortSetting = new LocalSetting< AdminUIState, @@ -90,7 +91,7 @@ export class DecommissionedNodeHistory extends React.Component< title: "Decommissioned On", sorter: sortByDecommissioningDate, render: (_text, record) => { - return record.decommissionedDate.format("LL[ at ]H:mm UTC"); + return record.decommissionedDate.format(DATE_FORMAT_24_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 f6b664fb1222..110901e14a69 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 @@ -49,6 +49,7 @@ import { } from "@cockroachlabs/cluster-ui"; import { cancelStatementDiagnosticsReportAction } from "src/redux/statements"; import { trackCancelDiagnosticsBundleAction } from "src/redux/analyticsActions"; +import { DATE_FORMAT_24_UTC } from "src/util/format"; type StatementDiagnosticsHistoryViewProps = MapStateToProps & MapDispatchToProps; @@ -98,7 +99,7 @@ class StatementDiagnosticsHistoryView extends React.Component< cell: record => moment .utc(record.requested_at.seconds.toNumber() * 1000) - .format("LL[ at ]H:mm"), + .format(DATE_FORMAT_24_UTC), sort: record => moment(record.requested_at.seconds.toNumber() * 1000), }, {