release-22.1: ui: update all dates to use same format

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",

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);
     }
   }
 

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 {

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);
     }
   }
 

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);
       },
     },
     {

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) {

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";

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<LogProps & RouteComponentProps, {}> {
         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",

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",

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);
       },
     },
   ];

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),
     },
     {