Merge #66474

66474: ui: jobs remaining time fix r=elkmaster a=elkmaster

adjust format duration function to support more than 100 hours values

Resolves: #65939

Release note(ui): fix issue with display more than 100hours remaining
time on jobs page

Co-authored-by: Vlad Los <carrott9@gmail.com>

pkg/ui/src/views/jobs/index.spec.tsx

@@ -0,0 +1,26 @@
+// Copyright 2018 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import { assert } from "chai";
+import moment from "moment";
+import { formatDuration } from ".";
+
+describe("Jobs", () => {
+  it("format duration", () => {
+    assert.equal(formatDuration(moment.duration(0)), "00:00:00");
+    assert.equal(formatDuration(moment.duration(5, "minutes")), "00:05:00");
+    assert.equal(formatDuration(moment.duration(5, "hours")), "05:00:00");
+    assert.equal(formatDuration(moment.duration(110, "hours")), "110:00:00");
+    assert.equal(
+      formatDuration(moment.duration(12345, "hours")),
+      "12345:00:00",
+    );
+  });
+});

pkg/ui/src/views/jobs/index.tsx

@@ -74,7 +74,7 @@ export const showSetting = new LocalSetting<AdminUIState, string>(
 // Moment cannot render durations (moment/moment#1048). Hack it ourselves.
 export const formatDuration = (d: moment.Duration) =>
   [Math.floor(d.asHours()).toFixed(0), d.minutes(), d.seconds()]
-    .map((c) => ("0" + c).slice(-2))
+    .map((c) => (c < 10 ? ("0" + c).slice(-2) : c))
     .join(":");
 
 export const sortSetting = new LocalSetting<AdminUIState, SortSetting>(