From 312902e08d103390dcb5f3932ea1a18e781ef1cd Mon Sep 17 00:00:00 2001
From: Marylia Gutierrez <marylia@cockroachlabs.com>
Date: Mon, 20 Jun 2022 20:58:38 +0000
Subject: [PATCH] ui: fix last execution timestamp

Previously, the last execution time format was using
`MM` for the minutes, which means month, instead of the
correct `mm` to indicate minutes.
This commit uses the correct format for the date.

Fixes #81682

Release note (bug fix): Last Execution time now
shows the correct value on Statement Details page (Overview
and Explain Plans).
---
 .../src/statementDetails/planDetails/plansTable.tsx       | 3 ++-
 .../cluster-ui/src/statementDetails/statementDetails.tsx  | 8 ++++----
 pkg/ui/workspaces/cluster-ui/src/util/format.ts           | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/plansTable.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/plansTable.tsx
index c7c37f7ca3db..7f9284947853 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/plansTable.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/planDetails/plansTable.tsx
@@ -18,6 +18,7 @@ import {
   longToInt,
   TimestampToMoment,
   RenderCount,
+  DATE_FORMAT_24_UTC,
 } from "../../util";
 
 export type PlanHashStats = cockroach.server.serverpb.StatementDetailsResponse.ICollectedStatementGroupedByPlanHash;
@@ -150,7 +151,7 @@ export function makeExplainPlanColumns(
       title: planDetailsTableTitles.lastExecTime(),
       cell: (item: PlanHashStats) =>
         TimestampToMoment(item.stats.last_exec_timestamp).format(
-          "MMM DD, YYYY HH:MM",
+          DATE_FORMAT_24_UTC,
         ),
       sort: (item: PlanHashStats) =>
         TimestampToMoment(item.stats.last_exec_timestamp).unix(),
diff --git a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
index 40e1e53f0662..d2b119e02f49 100644
--- a/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/statementDetails/statementDetails.tsx
@@ -36,6 +36,8 @@ import {
   appAttr,
   appNamesAttr,
   RenderCount,
+  TimestampToMoment,
+  DATE_FORMAT_24_UTC,
 } from "src/util";
 import { Loading } from "src/loading";
 import { Button } from "src/button";
@@ -56,7 +58,6 @@ import styles from "./statementDetails.module.scss";
 import { commonStyles } from "src/common";
 import { NodeSummaryStats } from "../nodes";
 import { UIConfigState } from "../store";
-import moment from "moment";
 import { StatementDetailsRequest } from "src/api/statementsApi";
 import {
   TimeScale,
@@ -609,9 +610,8 @@ export class StatementDetails extends React.Component<
     const duration = (v: number) => Duration(v * 1e9);
     const lastExec =
       stats.last_exec_timestamp &&
-      moment(stats.last_exec_timestamp.seconds.low * 1e3).format(
-        "MMM DD, YYYY HH:MM",
-      );
+      TimestampToMoment(stats.last_exec_timestamp).format(DATE_FORMAT_24_UTC);
+
     const statementSampled = stats.exec_stats.count > Long.fromNumber(0);
     const unavailableTooltip = !statementSampled && (
       <Tooltip
diff --git a/pkg/ui/workspaces/cluster-ui/src/util/format.ts b/pkg/ui/workspaces/cluster-ui/src/util/format.ts
index 5fa3feeae042..43f161b0f257 100644
--- a/pkg/ui/workspaces/cluster-ui/src/util/format.ts
+++ b/pkg/ui/workspaces/cluster-ui/src/util/format.ts
@@ -168,6 +168,7 @@ 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 function RenderCount(yesCount: Long, totalCount: Long): string {
   if (longToInt(yesCount) == 0) {