feat: mark UTC timestamps MAASENG-1315 (#5384)

- add branded UtcTimestamp type - add date-fns-tz as a dependency - run tsc in cypress directory on lint
canonical · Apr 5, 2024 · 6590312 · 6590312
1 parent 9d9edb4
commit 6590312
Show file tree

Hide file tree

Showing 43 changed files with 251 additions and 156 deletions.
diff --git a/cypress/e2e/with-users/subnets/add.spec.ts b/cypress/e2e/with-users/subnets/add.spec.ts
@@ -90,27 +90,27 @@ context("Subnets - Add", () => {
   });
 
   it("can add and delete a new subnet", () => {
-    const fabricName = `cy-fabric-${generateId()}`;
+    const fabric = `cy-fabric-${generateId()}`;
     const spaceName = `cy-space-${generateId()}`;
     const vid = generateVid();
-    const vlanName = `cy-vlan-${vid}`;
+    const vlan = `cy-vlan-${vid}`;
     const cidr = "192.168.122.18";
     const subnetName = `cy-subnet-${generateId()}`;
 
-    completeForm("Fabric", fabricName);
+    completeForm("Fabric", fabric);
     completeForm("Space", spaceName);
-    completeAddVlanForm(vid, vlanName, fabricName, spaceName);
-    cy.addSubnet(subnetName, cidr, fabricName, vid, vlanName);
+    completeAddVlanForm(vid, vlan, fabric, spaceName);
+    cy.addSubnet({ subnetName, cidr, fabric, vid, vlan });
 
-    cy.findAllByRole("link", { name: fabricName }).should("have.length", 2);
+    cy.findAllByRole("link", { name: fabric }).should("have.length", 2);
 
     // Check it groups items added to the same fabric correctly
-    cy.findAllByRole("row", { name: fabricName })
+    cy.findAllByRole("row", { name: fabric })
       .eq(1)
       .within(() => {
         cy.findAllByRole("gridcell")
           .eq(1)
-          .should("have.text", `${vid} (${vlanName})`);
+          .should("have.text", `${vid} (${vlan})`);
         cy.findAllByRole("gridcell").eq(3).should("contain.text", subnetName);
         cy.findAllByRole("gridcell").eq(5).should("have.text", spaceName);
       });

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "cypress-open": "yarn cypress open",
     "cypress-run-a11y": "yarn cypress run --config specPattern=cypress/e2e/accessibility/**/*.ts",
     "cypress-run": "yarn cypress run",
-    "lint": "npmPkgJsonLint . && eslint src cypress && tsc --project tsconfig.json",
+    "lint": "npmPkgJsonLint . && eslint src cypress && tsc --project tsconfig.json --noEmit && tsc --project cypress/tsconfig.json --noEmit",
     "link-components": "yarn link \"@canonical/react-components\" && yarn link \"react\" && yarn install",
     "percy": "./cypress/percy.sh",
     "release": "yarn clean && yarn install && CI=true yarn test && yarn build && yarn version --new-version",
@@ -52,6 +52,7 @@
     "classnames": "2.5.1",
     "clone-deep": "4.0.1",
     "date-fns": "2.30.0",
+    "date-fns-tz": "2.0.1",
     "fast-deep-equal": "3.1.3",
     "formik": "2.4.5",
     "history": "5.3.0",

diff --git a/src/app/base/components/DhcpForm/DhcpForm.test.tsx b/src/app/base/components/DhcpForm/DhcpForm.test.tsx
@@ -22,17 +22,17 @@ describe("DhcpForm", () => {
       dhcpsnippet: factory.dhcpSnippetState({
         items: [
           factory.dhcpSnippet({
-            created: "Thu, 15 Aug. 2019 06:21:39",
+            created: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
             id: 1,
             name: "lease",
-            updated: "Thu, 15 Aug. 2019 06:21:39",
+            updated: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
             value: "lease 10",
           }),
           factory.dhcpSnippet({
-            created: "Thu, 15 Aug. 2019 06:21:39",
+            created: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
             id: 2,
             name: "class",
-            updated: "Thu, 15 Aug. 2019 06:21:39",
+            updated: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
           }),
         ],
         loaded: true,

diff --git a/src/app/base/components/DhcpFormFields/DhcpFormFields.test.tsx b/src/app/base/components/DhcpFormFields/DhcpFormFields.test.tsx
@@ -37,17 +37,17 @@ describe("DhcpFormFields", () => {
       dhcpsnippet: factory.dhcpSnippetState({
         items: [
           factory.dhcpSnippet({
-            created: "Thu, 15 Aug. 2019 06:21:39",
+            created: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
             id: 1,
             name: "lease",
-            updated: "Thu, 15 Aug. 2019 06:21:39",
+            updated: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
             value: "lease 10",
           }),
           factory.dhcpSnippet({
-            created: "Thu, 15 Aug. 2019 06:21:39",
+            created: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
             id: 2,
             name: "class",
-            updated: "Thu, 15 Aug. 2019 06:21:39",
+            updated: factory.timestamp("Thu, 15 Aug. 2019 06:21:39"),
           }),
         ],
         loaded: true,

diff --git a/src/app/base/components/NotificationGroup/Notification/Notification.test.tsx b/src/app/base/components/NotificationGroup/Notification/Notification.test.tsx
@@ -101,7 +101,7 @@ describe("NotificationGroupNotification", () => {
 
   it("shows the date for upgrade notifications", () => {
     const notification = factory.notification({
-      created: "Tue, 27 Apr. 2021 00:34:39",
+      created: factory.timestamp("Tue, 27 Apr. 2021 00:34:39"),
       ident: NotificationIdent.UPGRADE_STATUS,
     });
     const state = factory.rootState({

diff --git a/src/app/base/components/NotificationGroup/Notification/Notification.tsx b/src/app/base/components/NotificationGroup/Notification/Notification.tsx
@@ -13,6 +13,7 @@ import {
   isUpgradeNotification,
 } from "@/app/store/notification/utils";
 import type { RootState } from "@/app/store/root/types";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 type Props = {
   className?: string | null;
@@ -31,6 +32,7 @@ const NotificationGroupNotification = ({
   const notification = useSelector((state: RootState) =>
     notificationSelectors.getById(state, id)
   );
+  const createdTimestamp = formatUtcDatetime(notification?.created);
   if (!notification) {
     return null;
   }
@@ -59,7 +61,7 @@ const NotificationGroupNotification = ({
           : undefined
       }
       severity={severity}
-      timestamp={showDate ? notification.created : null}
+      timestamp={showDate ? createdTimestamp : null}
     >
       <span
         dangerouslySetInnerHTML={{ __html: notification.message }}

diff --git a/src/app/base/components/StatusBar/StatusBar.test.tsx b/src/app/base/components/StatusBar/StatusBar.test.tsx
@@ -52,7 +52,7 @@ it("can show if a machine is currently commissioning", () => {
 it("can show if a machine has not been commissioned yet", () => {
   state.machine.items = [
     factory.machineDetails({
-      commissioning_start_time: "",
+      commissioning_start_time: factory.timestamp(""),
       fqdn: "test.maas",
       system_id: "abc123",
     }),
@@ -67,7 +67,7 @@ it("can show the last time a machine was commissioned", () => {
   state.machine.items = [
     factory.machineDetails({
       enable_hw_sync: false,
-      commissioning_start_time: "Thu, 31 Dec. 2020 22:59:00",
+      commissioning_start_time: factory.timestamp("Thu, 31 Dec. 2020 22:59:00"),
       fqdn: "test.maas",
       status: NodeStatus.DEPLOYED,
       system_id: "abc123",
@@ -85,7 +85,7 @@ it("can handle an incorrectly formatted commissioning timestamp", () => {
   state.machine.items = [
     factory.machineDetails({
       enable_hw_sync: false,
-      commissioning_start_time: "2020-03-01 09:12:43",
+      commissioning_start_time: factory.timestamp("2020-03-01 09:12:43"),
       fqdn: "test.maas",
       status: NodeStatus.DEPLOYED,
       system_id: "abc123",
@@ -102,13 +102,13 @@ it("can handle an incorrectly formatted commissioning timestamp", () => {
 it("displays Last and Next sync instead of Last commissioned date for deployed machines with hardware sync enabled ", () => {
   state.machine.items = [
     factory.machineDetails({
-      commissioning_start_time: "Thu, 31 Dec. 2020 22:59:00",
+      commissioning_start_time: factory.timestamp("Thu, 31 Dec. 2020 22:59:00"),
       fqdn: "test.maas",
       status: NodeStatus.DEPLOYED,
       system_id: "abc123",
       enable_hw_sync: true,
-      last_sync: "Thu, 31 Dec. 2020 22:00:00",
-      next_sync: "Thu, 31 Dec. 2020 23:01:00",
+      last_sync: factory.timestamp("Thu, 31 Dec. 2020 22:00:00"),
+      next_sync: factory.timestamp("Thu, 31 Dec. 2020 23:01:00"),
     }),
   ];
 
@@ -131,13 +131,13 @@ it("displays Last and Next sync instead of Last commissioned date for deployed m
 it("doesn't display last or next sync for deploying machines with hardware sync enabled", () => {
   state.machine.items = [
     factory.machineDetails({
-      commissioning_start_time: "Thu, 31 Dec. 2020 22:59:00",
+      commissioning_start_time: factory.timestamp("Thu, 31 Dec. 2020 22:59:00"),
       fqdn: "test.maas",
       status: NodeStatus.DEPLOYING,
       system_id: "abc123",
       enable_hw_sync: true,
-      last_sync: "Thu, 31 Dec. 2020 22:00:00",
-      next_sync: "Thu, 31 Dec. 2020 23:01:00",
+      last_sync: factory.timestamp("Thu, 31 Dec. 2020 22:00:00"),
+      next_sync: factory.timestamp("Thu, 31 Dec. 2020 23:01:00"),
     }),
   ];
 
@@ -159,13 +159,13 @@ it("doesn't display last or next sync for deploying machines with hardware sync
 it("displays correct text for machines with hardware sync enabled and no last_sync or next_sync", () => {
   state.machine.items = [
     factory.machineDetails({
-      commissioning_start_time: "Thu, 31 Dec. 2020 22:59:00",
+      commissioning_start_time: factory.timestamp("Thu, 31 Dec. 2020 22:59:00"),
       fqdn: "test.maas",
       status: NodeStatus.DEPLOYED,
       system_id: "abc123",
       enable_hw_sync: true,
-      last_sync: "",
-      next_sync: "",
+      last_sync: factory.timestamp(""),
+      next_sync: factory.timestamp(""),
     }),
   ];
 
@@ -189,7 +189,7 @@ it("displays correct text for machines with hardware sync enabled and no last_sy
 
 it("displays last image sync timestamp for a rack or region+rack controller", () => {
   const controller = factory.controllerDetails({
-    last_image_sync: "Thu, 02 Jun. 2022 00:48:41",
+    last_image_sync: factory.timestamp("Thu, 02 Jun. 2022 00:48:41"),
     node_type: NodeType.RACK_CONTROLLER,
   });
   state.controller.active = controller.system_id;
@@ -198,7 +198,7 @@ it("displays last image sync timestamp for a rack or region+rack controller", ()
   renderWithMockStore(<StatusBar />, { state });
 
   expect(screen.getByTestId("status-bar-status")).toHaveTextContent(
-    `Last image sync: ${controller.last_image_sync}`
+    `Last image sync: Thu, 02 Jun. 2022 00:48:41 (UTC)`
   );
 });
 

diff --git a/src/app/base/components/StatusBar/StatusBar.tsx b/src/app/base/components/StatusBar/StatusBar.tsx
@@ -18,8 +18,9 @@ import {
   isDeployedWithHardwareSync,
   isMachineDetails,
 } from "@/app/store/machine/utils";
+import type { UtcDatetime } from "@/app/store/types/model";
 import { NodeStatus } from "@/app/store/types/node";
-import { getTimeDistanceString } from "@/app/utils/time";
+import { formatUtcDatetime, getTimeDistanceString } from "@/app/utils/time";
 
 const getLastCommissionedString = (machine: MachineDetails) => {
   if (machine.status === NodeStatus.COMMISSIONING) {
@@ -37,7 +38,7 @@ const getLastCommissionedString = (machine: MachineDetails) => {
   }
 };
 
-const getSyncStatusString = (syncStatus: string) => {
+const getSyncStatusString = (syncStatus: UtcDatetime) => {
   if (syncStatus === "") {
     return "Never";
   }
@@ -87,7 +88,9 @@ export const StatusBar = (): JSX.Element | null => {
     isControllerDetails(activeController) &&
     (isRack(activeController) || isRegionAndRack(activeController))
   ) {
-    status = `Last image sync: ${activeController.last_image_sync}`;
+    status = `Last image sync: ${formatUtcDatetime(
+      activeController.last_image_sync
+    )}`;
   }
 
   return (

diff --git a/src/app/base/components/node/NodeLogs/EventLogs/EventLogs.test.tsx b/src/app/base/components/node/NodeLogs/EventLogs/EventLogs.test.tsx
@@ -60,7 +60,7 @@ describe("EventLogs", () => {
       state.event.items.push(
         factory.eventRecord({
           node_id: 1,
-          created: "Tue, 16 Mar. 2021 03:04:00",
+          created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         })
       );
     }
@@ -116,7 +116,7 @@ describe("EventLogs", () => {
       state.event.items.push(
         factory.eventRecord({
           node_id: 1,
-          created: "Tue, 16 Mar. 2021 03:04:00",
+          created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         })
       );
     }
@@ -156,11 +156,11 @@ describe("EventLogs", () => {
   it("orders the rows by most recent first", () => {
     state.event.items = [
       factory.eventRecord({
-        created: "Tue, 16 Mar. 2021 03:04:00",
+        created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         node_id: 1,
       }),
       factory.eventRecord({
-        created: "Tue, 17 Mar. 2021 03:04:00",
+        created: factory.timestamp("Tue, 17 Mar. 2021 03:04:00"),
         node_id: 1,
       }),
     ];
@@ -221,7 +221,7 @@ describe("EventLogs", () => {
       state.event.items.push(
         factory.eventRecord({
           node_id: 1,
-          created: "Tue, 16 Mar. 2021 03:04:00",
+          created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         })
       );
     }
@@ -239,7 +239,7 @@ describe("EventLogs", () => {
       state.event.items.push(
         factory.eventRecord({
           node_id: 1,
-          created: "Tue, 16 Mar. 2021 03:04:00",
+          created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         })
       );
     }
@@ -273,7 +273,7 @@ describe("EventLogs", () => {
       state.event.items.push(
         factory.eventRecord({
           node_id: 1,
-          created: "Tue, 16 Mar. 2021 03:04:00",
+          created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         })
       );
     }
@@ -292,7 +292,7 @@ describe("EventLogs", () => {
       state.event.items.push(
         factory.eventRecord({
           node_id: 1,
-          created: "Tue, 16 Mar. 2021 03:04:00",
+          created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         })
       );
     }
@@ -311,7 +311,7 @@ describe("EventLogs", () => {
       state.event.items.push(
         factory.eventRecord({
           node_id: 1,
-          created: "Tue, 16 Mar. 2021 03:04:00",
+          created: factory.timestamp("Tue, 16 Mar. 2021 03:04:00"),
         })
       );
     }

diff --git a/src/app/base/components/node/NodeTestsTable/NodeTestsTable.tsx b/src/app/base/components/node/NodeTestsTable/NodeTestsTable.tsx
@@ -19,6 +19,7 @@ import type { ScriptResult } from "@/app/store/scriptresult/types";
 import { ScriptResultType } from "@/app/store/scriptresult/types";
 import { canBeSuppressed } from "@/app/store/scriptresult/utils";
 import { nodeIsMachine } from "@/app/store/utils";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 export enum ScriptResultAction {
   VIEW_METRICS = "viewMetrics",
@@ -131,7 +132,7 @@ const NodeTestsTable = ({ node, scriptResults }: Props): JSX.Element => {
         },
         {
           className: "date-col",
-          content: result.updated,
+          content: formatUtcDatetime(result.updated),
         },
         {
           className: "runtime-col",