ui: update dates to 24h UTC

This commit updates all dates to use a 24h format in UTC

Fixes cockroachdb#78442
Fixes cockroachdb#80103

Release note (ui change): Update all dates to use 24h format in UTC

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

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

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

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<
                       <SummaryCardItem
                         label="Table Stats Last Updated"
                         value={this.props.details.statsLastUpdated.format(
-                          "MMM DD, YYYY [at] h:mm A [(UTC)]",
+                          "MMM DD, YYYY [at] H:mm [(UTC)]",
                         )}
                       />
                     )}

pkg/ui/workspaces/cluster-ui/src/dateRange/dateRange.tsx

@@ -22,8 +22,8 @@ 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 +47,7 @@ export function DateRangeMenu({
   onCancel,
 }: DateRangeMenuProps): React.ReactElement {
   const dateFormat = "MMMM D, YYYY";
-  const timeFormat = "h:mm A [(UTC)]";
+  const timeFormat = "H:mm [(UTC)]";
   const [startMoment, setStartMoment] = useState<Moment>(
     startInit || moment.utc(),
   );
@@ -124,7 +124,6 @@ export function DateRangeMenu({
         onChange={onChangeStart}
         suffixIcon={<span />}
         value={startMoment}
-        use12Hours
       />
       <div className={cx("divider")} />
       <Text className={cx("label")} textType={TextTypes.BodyStrong}>
@@ -144,7 +143,6 @@ export function DateRangeMenu({
         onChange={onChangeEnd}
         suffixIcon={<span />}
         value={endMoment}
-        use12Hours
       />
       {!isValid && (
         <Alert

pkg/ui/workspaces/cluster-ui/src/indexDetailsPage/indexDetailsPage.tsx

@@ -123,7 +123,7 @@ export class IndexDetailsPage extends React.Component<
     if (timestamp.isSame(minDate)) {
       return "Never";
     } else {
-      return timestamp.format("MMM DD, YYYY [at] h:mm A [(UTC)]");
+      return timestamp.format("MMM DD, YYYY [at] H:mm [(UTC)]");
     }
   }
 

pkg/ui/workspaces/cluster-ui/src/sessions/sessionsTable.tsx

@@ -101,7 +101,7 @@ const StatementTableCell = (props: { session: ISession }) => {
 };
 
 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();

pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx

@@ -95,9 +95,7 @@ export const ActiveStatementDetails: React.FC<ActiveStatementDetailsProps> = ({
                     <div className={summaryCardStylesCx("summary--card__item")}>
                       <Text>Start Time (UTC)</Text>
                       <Text>
-                        {statement.start.format(
-                          "MMM D, YYYY [at] h:mm a (UTC)",
-                        )}
+                        {statement.start.format("MMM D, YYYY [at] H:mm (UTC)")}
                       </Text>
                     </div>
                     <div className={summaryCardStylesCx("summary--card__item")}>

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

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]",
                         )}`}
                       </a>
                     ),

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

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;

pkg/ui/workspaces/cluster-ui/src/transactionDetails/activeTransactionDetails.tsx

@@ -101,7 +101,7 @@ export const ActiveTransactionDetails: React.FC<ActiveTransactionDetailsProps> =
                       <Text>Start Time (UTC)</Text>
                       <Text>
                         {transaction.start.format(
-                          "MMM D, YYYY [at] h:mm a (UTC)",
+                          "MMM D, YYYY [at] H:mm (UTC)",
                         )}
                       </Text>
                     </div>

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

pkg/ui/workspaces/db-console/src/components/rangeCalendar/rangeCalendar.tsx

@@ -56,7 +56,7 @@ function isBelowMinDateRange(
 }
 
 export const RangeCalendar: React.FC<RangeCalendarProps> = ({
-  timeFormat = "h:mm A",
+  timeFormat = "H:mm",
   minTimeRange = [10, "minute"],
   onCancel = noop,
   onSubmit = noop,
@@ -140,7 +140,7 @@ export const RangeCalendar: React.FC<RangeCalendarProps> = ({
 
   const timePickerDefaultProps: TimePickerProps & RcTimePickerProps = {
     allowClear: false,
-    use12Hours: true,
+    use12Hours: false,
     inputReadOnly: true,
     format: timeFormat,
     className: cx("crl-time-picker"),

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

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

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

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

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