ui: update all dates to use same format

maryliag · maryliag · commit b44d6ec57a45 · 2022-06-28T09:55:20.000-04:00
Update all dates to use the same format. Fixes #81159 Release note: None
diff --git a/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx b/pkg/ui/workspaces/cluster-ui/src/activeExecutions/activeStatementsTable/activeStatementsTable.tsx
@@ -25,6 +25,7 @@ import {
   ExecutionType,
   ExecutionsColumn,
 } from "../execTableCommon";
+import { DATE_FORMAT } from "../../util";
 
 interface ActiveStatementsTable {
   data: ActiveStatement[];
@@ -73,8 +74,7 @@ export function makeActiveStatementsColumns(): ColumnDescriptor<ActiveStatement>
     {
       name: "startTime",
       title: executionsTableTitles.startTime(execType),
-      cell: (item: ActiveStatement) =>
-        item.start.format("MMM D, YYYY [at] H:mm"),
+      cell: (item: ActiveStatement) => item.start.format(DATE_FORMAT),
       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
@@ -25,6 +25,7 @@ import {
   ExecutionType,
   ExecutionsColumn,
 } from "../execTableCommon";
+import { DATE_FORMAT } from "../../util";
 
 interface ActiveTransactionsTable {
   data: ActiveTransaction[];
@@ -75,8 +76,7 @@ export function makeActiveTransactionsColumns(): ColumnDescriptor<ActiveTransact
     {
       name: "startTime",
       title: executionsTableTitles.startTime(execType),
-      cell: (item: ActiveTransaction) =>
-        item.start.format("MMM D, YYYY [at] H:mm"),
+      cell: (item: ActiveTransaction) => item.start.format(DATE_FORMAT),
       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
@@ -37,6 +37,7 @@ import {
 } from "src/transactionsPage/transactionsPageClasses";
 import { Moment } from "moment";
 import { Caution } from "@cockroachlabs/icons";
+import { DATE_FORMAT } from "src/util/format";
 
 const cx = classNames.bind(styles);
 const sortableTableCx = classNames.bind(sortableTableStyles);
@@ -379,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"),
+            : 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
@@ -43,6 +43,7 @@ import classnames from "classnames/bind";
 import booleanSettingStyles from "../settings/booleanSetting.module.scss";
 import { CircleFilled } from "../icon";
 import { performanceTuningRecipes } from "src/util/docs";
+import { DATE_FORMAT_24_UTC } from "src/util/format";
 const cx = classNames.bind(styles);
 const booleanSettingCx = classnames.bind(booleanSettingStyles);
 
@@ -241,9 +242,7 @@ export class DatabaseTablePage extends React.Component<
     if (lastReset.isSame(this.minDate)) {
       return "Last reset: Never";
     } else {
-      return (
-        "Last reset: " + lastReset.format("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
@@ -15,6 +15,7 @@ import {
   BytesFitScale,
   ComputeByteScale,
   ComputeDurationScale,
+  DATE_WITH_SECONDS_FORMAT_24_UTC,
   DurationFitScale,
 } from "src/util/format";
 
@@ -264,7 +265,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
@@ -26,7 +26,7 @@ import { SummaryCard } from "../summaryCard";
 import moment, { Moment } from "moment";
 import { Heading } from "@cockroachlabs/ui-components";
 import { Anchor } from "../anchor";
-import { performanceTuningRecipes } from "../util";
+import { DATE_FORMAT_24_UTC, performanceTuningRecipes } from "../util";
 
 const cx = classNames.bind(styles);
 
@@ -127,7 +127,7 @@ export class IndexDetailsPage extends React.Component<
     if (timestamp.isSame(minDate)) {
       return "Never";
     } else {
-      return timestamp.format("MMM DD, YYYY [at] H:mm [(UTC)]");
+      return timestamp.format(DATE_FORMAT_24_UTC);
     }
   }
 
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/activeStatementDetails.tsx
@@ -29,6 +29,7 @@ import { StatusIcon } from "src/activeExecutions/statusIcon";
 
 import styles from "./statementDetails.module.scss";
 import { SqlBox } from "src/sql/box";
+import { DATE_FORMAT_24_UTC } from "../util";
 const cx = classNames.bind(styles);
 const summaryCardStylesCx = classNames.bind(summaryCardStyles);
 
@@ -96,9 +97,7 @@ export const ActiveStatementDetails: React.FC<ActiveStatementDetailsProps> = ({
                   <Col>
                     <div className={summaryCardStylesCx("summary--card__item")}>
                       <Text>Start Time (UTC)</Text>
-                      <Text>
-                        {statement.start.format("MMM D, YYYY [at] H:mm (UTC)")}
-                      </Text>
+                      <Text>{statement.start.format(DATE_FORMAT_24_UTC)}</Text>
                     </div>
                     <div className={summaryCardStylesCx("summary--card__item")}>
                       <Text>Elapsed Time</Text>
diff --git 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;
@@ -127,7 +128,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
@@ -174,7 +174,8 @@ 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";
 
 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
@@ -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
@@ -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",
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
@@ -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";
@@ -440,7 +440,7 @@ class DecommissionedNodeList extends React.Component<DecommissionedNodeListProps
       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
@@ -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,
@@ -88,7 +89,7 @@ export class DecommissionedNodeHistory extends React.Component<DecommissionedNod
       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
@@ -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),
     },
     {

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ import { SummaryCard } from "../summaryCard";`
`26`	`26`	`import moment, { Moment } from "moment";`
`27`	`27`	`import { Heading } from "@cockroachlabs/ui-components";`
`28`	`28`	`import { Anchor } from "../anchor";`
`29`		`-import { performanceTuningRecipes } from "../util";`
	`29`	`+import { DATE_FORMAT_24_UTC, performanceTuningRecipes } from "../util";`
`30`	`30`
`31`	`31`	`const cx = classNames.bind(styles);`
`32`	`32`
`@@ -127,7 +127,7 @@ export class IndexDetailsPage extends React.Component<`
`127`	`127`	`if (timestamp.isSame(minDate)) {`
`128`	`128`	`return "Never";`
`129`	`129`	`} else {`
`130`		`- return timestamp.format("MMM DD, YYYY [at] H:mm [(UTC)]");`
	`130`	`+ return timestamp.format(DATE_FORMAT_24_UTC);`
`131`	`131`	`}`
`132`	`132`	`}`
`133`	`133`