Display multitest setup and teardown times on webUI (#1104)

Added setup/teardown times to Nav
morganstanley · Jul 10, 2024 · f072070 · f072070
1 parent 0a4ba7c
commit f072070
Show file tree

Hide file tree

Showing 17 changed files with 1,954 additions and 661 deletions.
diff --git a/doc/newsfragments/2830_new.setup_teardown_duration.rst b/doc/newsfragments/2830_new.setup_teardown_duration.rst
@@ -0,0 +1 @@
+Added setup, teardown and total duration times for Multitest level in the Nav bar on web UI.
diff --git a/testplan/web_ui/testing/src/Common/Styles.js b/testplan/web_ui/testing/src/Common/Styles.js
@@ -33,6 +33,82 @@ export const statusStyles = {
   },
 };
 
+export const navStyles = StyleSheet.create({
+  entryName: {
+    overflow: "hidden",
+    "text-overflow": "ellipsis",
+    "white-space": "nowrap",
+    fontSize: "small",
+    fontWeight: 500,
+    marginLeft: "3px",
+    flex: "auto",
+    marginRight: "3px",
+    userSelect: "text",
+  },
+  entryIcons: {
+    display: "flex",
+    flexShrink: 0,
+    "align-items": "center",
+    marginLeft: "auto",
+  },
+  entryIcon: {
+    fontSize: "x-small",
+    margin: "0em 0.5em 0em 0.5em",
+  },
+  entryButton: {
+    textDecoration: "none",
+    position: "relative",
+    display: "inline-block",
+    height: "2.4em",
+    width: "2.4em",
+    cursor: "pointer",
+    color: "black",
+    padding: "0.7em 0em 0.7em 0em",
+    transition: "all 0.3s ease-out 0s",
+  },
+  inactiveEntryButton: {
+    textDecoration: "none",
+    position: "relative",
+    display: "inline-block",
+    height: "2.4em",
+    width: "2.4em",
+    cursor: "pointer",
+    color: BLACK,
+    padding: "0.7em 0em 0.7em 0em",
+    transition: "all 0.3s ease-out 0s !important",
+  },
+  navTime: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "end",
+  },
+  environmentToggle: {
+    padding: "0.65em 0em 0.65em 0em",
+  },
+  busyEnvironmentToggle: {
+    color: "orange",
+  },
+  badge: {
+    opacity: 0.5,
+  },
+  passedBadge: {
+    backgroundColor: GREEN,
+  },
+  failedBadge: {
+    backgroundColor: RED,
+  },
+  errorBadge: {
+    backgroundColor: RED,
+  },
+  unstableBadge: {
+    backgroundColor: ORANGE,
+  },
+  unknownBadge: {
+    backgroundColor: BLACK,
+  },
+  ...statusStyles,
+});
+
 export default StyleSheet.create({
   unselectable: unselectable,
 });
diff --git a/testplan/web_ui/testing/src/Common/__tests__/utils.test.js b/testplan/web_ui/testing/src/Common/__tests__/utils.test.js
@@ -4,6 +4,7 @@ import { NAV_ENTRY_DISPLAY_DATA } from "../defaults";
 import {
   formatSeconds,
   formatMilliseconds,
+  formatShortDuration,
   getNavEntryDisplayData,
 } from "../utils";
 
@@ -33,13 +34,15 @@ describe("Common/utils", () => {
     });
   });
 
-  describe("formatMilliseconds and formatSeconds", () => {
+  describe("formatMilliseconds, formatSeconds and formatShortDuration", () => {
     it("returns s.SSS if the input is just less than a second", () => {
       const ms = 999;
       var millisecondsFormatted = formatMilliseconds(ms);
       var secondsFormatted = formatSeconds(ms / 1000);
+      var shortFormatted = formatShortDuration(ms);
       expect(millisecondsFormatted).toEqual("0.999s");
       expect(secondsFormatted).toEqual("0.999s");
+      expect(shortFormatted).toEqual("1.0s");
     });
 
     it("returns s.SSS if the input is whole seconds and zero milliseconds", () => {
@@ -48,8 +51,10 @@ describe("Common/utils", () => {
       const millisecondsInput = s + ms;
       var millisecondsFormatted = formatMilliseconds(millisecondsInput);
       var secondsFormatted = formatSeconds(millisecondsInput / 1000);
+      var shortFormatted = formatShortDuration(millisecondsInput);
       expect(millisecondsFormatted).toEqual("59.000s");
       expect(secondsFormatted).toEqual("59.000s");
+      expect(shortFormatted).toEqual("59.0s");
     });
 
     it("returns s.SSS if the input is just less than a minute", () => {
@@ -58,8 +63,10 @@ describe("Common/utils", () => {
       const millisecondsInput = s + ms;
       var millisecondsFormatted = formatMilliseconds(millisecondsInput);
       var secondsFormatted = formatSeconds(millisecondsInput / 1000);
+      var shortFormatted = formatShortDuration(millisecondsInput);
       expect(millisecondsFormatted).toEqual("59.999s");
       expect(secondsFormatted).toEqual("59.999s");
+      expect(shortFormatted).toEqual("1m");
     });
 
     it("returns m s.SSS if the input is less than an hour", () => {
@@ -69,8 +76,10 @@ describe("Common/utils", () => {
       const millisecondsInput = m + s + ms;
       var millisecondsFormatted = formatMilliseconds(millisecondsInput);
       var secondsFormatted = formatSeconds(millisecondsInput / 1000);
+      var shortFormatted = formatShortDuration(millisecondsInput);
       expect(millisecondsFormatted).toEqual("59m 59.999s");
       expect(secondsFormatted).toEqual("59m 59.999s");
+      expect(shortFormatted).toEqual("1h");
     });
 
     it("returns h m s.SSS if the input is at least an hour", () => {
@@ -81,8 +90,10 @@ describe("Common/utils", () => {
       const millisecondsInput = h + m + s + ms;
       var millisecondsFormatted = formatMilliseconds(millisecondsInput);
       var secondsFormatted = formatSeconds(millisecondsInput / 1000);
+      var shortFormatted = formatShortDuration(millisecondsInput);
       expect(millisecondsFormatted).toEqual("9h 59m 59.999s");
       expect(secondsFormatted).toEqual("9h 59m 59.999s");
+      expect(shortFormatted).toEqual("10h");
     });
 
     it("returns h m s.SSS if the input is at least an hour and zero minutes", () => {
@@ -93,8 +104,10 @@ describe("Common/utils", () => {
       const millisecondsInput = h + m + s + ms;
       var millisecondsFormatted = formatMilliseconds(millisecondsInput);
       var secondsFormatted = formatSeconds(millisecondsInput / 1000);
+      var shortFormatted = formatShortDuration(millisecondsInput);
       expect(millisecondsFormatted).toEqual("59h 0m 59.999s");
       expect(secondsFormatted).toEqual("59h 0m 59.999s");
+      expect(shortFormatted).toEqual("59h:1m");
     });
   });
 });
diff --git a/testplan/web_ui/testing/src/Common/fakeReport.js b/testplan/web_ui/testing/src/Common/fakeReport.js
@@ -35,10 +35,18 @@ const TESTPLAN_REPORT = {
         simple: ["server"],
       },
       timer: {
-        run: {
-          start: "2018-10-15T14:30:11.009705+00:00",
-          end: "2018-10-15T14:30:11.159661+00:00",
-        },
+        run: [
+          {
+            start: "2018-10-15T14:30:11.009705+00:00",
+            end: "2018-10-15T14:30:11.159661+00:00",
+          },
+        ],
+        setup: [
+          {
+            start: "2018-10-15T14:30:10.079745+00:00",
+            end: "2018-10-15T14:30:11.008995+00:00",
+          },
+        ],
       },
       entries: [
         {
@@ -200,10 +208,24 @@ const TESTPLAN_REPORT = {
       type: "TestGroupReport",
       logs: [],
       timer: {
-        run: {
-          start: "2018-10-15T14:30:12.009705+00:00",
-          end: "2018-10-15T14:30:12.159661+00:00",
-        },
+        run: [
+          {
+            start: "2018-10-15T14:30:12.009705+00:00",
+            end: "2018-10-15T14:30:12.159661+00:00",
+          },
+        ],
+        setup: [
+          {
+            start: "2018-10-15T14:30:11.879705+00:00",
+            end: "2018-10-15T14:30:12.008705+00:00",
+          },
+        ],
+        teardown: [
+          {
+            start: "2018-10-15T14:30:12.160132+00:00",
+            end: "2018-10-15T14:30:12.645329+00:00",
+          },
+        ],
       },
       entries: [
         {
@@ -319,10 +341,26 @@ var fakeReportAssertionsError = {
       status: "error",
       parent_uids: ["Assertions Example"],
       timer: {
-        run: {
-          end: "2020-01-10T05:06:59.141338+00:00",
-          start: "2020-01-10T03:04:58.629871+00:00",
-        },
+        run: [
+          {
+            end: "2020-01-10T05:06:59.141338+00:00",
+            start: "2020-01-10T03:04:58.629871+00:00",
+          },
+        ],
+        setup:
+        [
+          {
+            end: "2020-01-10T05:06:59.141338+00:00",
+            start: "2020-01-10T05:06:59.121338+00:00",
+          },
+        ],
+        teardown: 
+        [
+          {
+            end: "2020-01-10T05:06:59.191338+00:00",
+            start: "2020-01-10T05:06:59.141338+00:00",
+          },
+        ],
       },
       hash: 3697482064019099674,
       status_override: "error",
@@ -720,10 +758,26 @@ var fakeReportAssertions = {
       status: "failed",
       parent_uids: ["Assertions Example"],
       timer: {
-        run: {
-          end: "2020-01-10T05:06:59.141338+00:00",
-          start: "2020-01-10T03:04:58.629871+00:00",
-        },
+        run: [
+          {
+            end: "2020-01-10T05:06:59.141338+00:00",
+            start: "2020-01-10T03:04:58.629871+00:00",
+          },
+        ],
+        setup:
+        [
+          {
+            end: "2020-01-10T05:06:59.141338+00:00",
+            start: "2020-01-10T05:06:59.121338+00:00",
+          },
+        ],
+        teardown: 
+        [
+          {
+            end: "2020-01-10T05:06:59.191338+00:00",
+            start: "2020-01-10T05:06:59.141338+00:00",
+          },
+        ],
       },
       hash: 3697482064019099674,
       status_override: null,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Added setup, teardown and total duration times for Multitest level in the Nav bar on web UI.