add UTC timestamps to discovery list

package.json

@@ -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",

src/app/base/components/NotificationGroup/Notification/Notification.tsx

@@ -13,7 +13,7 @@ import {
   isUpgradeNotification,
 } from "@/app/store/notification/utils";
 import type { RootState } from "@/app/store/root/types";
-import { getUtcTimestamp } from "@/app/utils/time";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 type Props = {
   className?: string | null;
@@ -32,7 +32,7 @@ const NotificationGroupNotification = ({
   const notification = useSelector((state: RootState) =>
     notificationSelectors.getById(state, id)
   );
-  const createdTimestamp = getUtcTimestamp(notification?.created);
+  const createdTimestamp = formatUtcDatetime(notification?.created);
   if (!notification) {
     return null;
   }

src/app/base/components/StatusBar/StatusBar.test.tsx

@@ -164,8 +164,8 @@ it("displays correct text for machines with hardware sync enabled and no last_sy
       status: NodeStatus.DEPLOYED,
       system_id: "abc123",
       enable_hw_sync: true,
-      last_sync: factory.timestamp("Thu, 31 Dec. 2020 22:00:00"),
-      next_sync: factory.timestamp("Thu, 31 Dec. 2020 23:01:00"),
+      last_sync: factory.timestamp(""),
+      next_sync: factory.timestamp(""),
     }),
   ];
 
@@ -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)`
   );
 });
 

src/app/base/components/StatusBar/StatusBar.tsx

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

src/app/base/components/node/NodeTestsTable/NodeTestsTable.tsx

@@ -19,7 +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 { getUtcTimestamp } from "@/app/utils/time";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 export enum ScriptResultAction {
   VIEW_METRICS = "viewMetrics",
@@ -132,7 +132,7 @@ const NodeTestsTable = ({ node, scriptResults }: Props): JSX.Element => {
         },
         {
           className: "date-col",
-          content: getUtcTimestamp(result.updated),
+          content: formatUtcDatetime(result.updated),
         },
         {
           className: "runtime-col",

src/app/networkDiscovery/views/DiscoveriesList/DiscoveriesList.tsx

@@ -25,6 +25,7 @@ import type { Discovery } from "@/app/store/discovery/types";
 import { DiscoveryMeta } from "@/app/store/discovery/types";
 import type { RootState } from "@/app/store/root/types";
 import { generateEmptyStateMsg, getTableStatus } from "@/app/utils";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 export enum Labels {
   DiscoveriesList = "Discoveries list",
@@ -78,7 +79,11 @@ const generateRows = (
           content: discovery.observer_hostname,
         },
         {
-          content: <div className="u-truncate">{discovery.last_seen}</div>,
+          content: (
+            <div className="u-truncate">
+              {formatUtcDatetime(discovery.last_seen)}
+            </div>
+          ),
         },
         {
           content: (

src/app/settings/views/Dhcp/DhcpList/DhcpList.tsx

@@ -33,7 +33,7 @@ import type { RootState } from "@/app/store/root/types";
 import { subnetActions } from "@/app/store/subnet";
 import subnetSelectors from "@/app/store/subnet/selectors";
 import type { Subnet } from "@/app/store/subnet/types";
-import { formatUtcTimestamp } from "@/app/utils/time";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 const getTargetName = (
   controllers: Controller[],
@@ -80,7 +80,7 @@ const generateRows = (
     const expanded = expandedId === dhcpsnippet.id;
     // Dates are in the format: Thu, 15 Aug. 2019 06:21:39.
     const updated = dhcpsnippet.updated
-      ? formatUtcTimestamp(dhcpsnippet.updated)
+      ? formatUtcDatetime(dhcpsnippet.updated)
       : "Never";
     const enabled = dhcpsnippet.enabled ? "Yes" : "No";
     const showDelete = expandedType === "delete";

src/app/settings/views/Scripts/ScriptsList/ScriptsList.test.tsx

@@ -315,7 +315,7 @@ describe("ScriptsList", () => {
     );
     expect(
       within(screen.getByRole("row", { name: "test name 33" })).getByText(
-        "2020-12-31 22:59"
+        "Thu, 31 Dec. 2020 22:59:00 (UTC)"
       )
     ).toBeInTheDocument();
   });
@@ -326,7 +326,7 @@ describe("ScriptsList", () => {
         loaded: true,
         items: [
           factory.script({
-            created: factory.timestamp(""),
+            created: () => factory.timestamp(""),
             script_type: ScriptType.TESTING,
           }),
         ],

src/app/settings/views/Scripts/ScriptsList/ScriptsList.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 
 import { ContentSection } from "@canonical/maas-react-components";
-import { format } from "date-fns";
 import { useDispatch, useSelector } from "react-redux";
 import type { Dispatch } from "redux";
 
@@ -17,7 +16,7 @@ import { scriptActions } from "@/app/store/script";
 import scriptSelectors from "@/app/store/script/selectors";
 import type { Script } from "@/app/store/script/types";
 import { generateEmptyStateMsg, getTableStatus } from "@/app/utils";
-import { parseUtcDatetime } from "@/app/utils/time";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 export enum Labels {
   Actions = "Table actions",
@@ -49,7 +48,7 @@ const generateRows = (
     // history timestamps are in the format: Mon, 02 Sep 2019 02:02:39 -0000
     let uploadedOn: string;
     try {
-      uploadedOn = format(parseUtcDatetime(script.created), "yyyy-LL-dd H:mm");
+      uploadedOn = formatUtcDatetime(script.created);
     } catch (error) {
       uploadedOn = "Never";
     }

src/app/settings/views/Users/UsersList/UsersList.tsx

@@ -22,7 +22,7 @@ import { userActions } from "@/app/store/user";
 import userSelectors from "@/app/store/user/selectors";
 import type { User } from "@/app/store/user/types";
 import { isComparable } from "@/app/utils";
-import { formatUtcTimestamp } from "@/app/utils/time";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 type SortKey = keyof User;
 
@@ -35,7 +35,7 @@ const generateUserRows = (
     const isAuthUser = user.id === authUser?.id;
     // Dates are in the format: Thu, 15 Aug. 2019 06:21:39.
     const last_login = user.last_login
-      ? formatUtcTimestamp(user.last_login)
+      ? formatUtcDatetime(user.last_login)
       : "Never";
     const fullName = user.last_name;
     return {

src/app/store/bootresource/types/base.ts

@@ -1,6 +1,6 @@
 import type { BootResourceSourceType, BootResourceType } from "./enum";
 
-import type { Model, UtcTimestamp } from "@/app/store/types/model";
+import type { Model, UtcDatetime } from "@/app/store/types/model";
 
 export type BaseImageFields = {
   checked: boolean;
@@ -15,8 +15,8 @@ export type BootResource = Model & {
   complete: boolean;
   downloading: boolean;
   icon: "in-progress" | "queued" | "succeeded" | "waiting";
-  lastUpdate: UtcTimestamp;
-  lastDeployed: UtcTimestamp;
+  lastUpdate: UtcDatetime;
+  lastDeployed: UtcDatetime;
   machineCount: number;
   name: string;
   numberOfNodes: number;

src/app/store/controller/types/base.ts

@@ -11,7 +11,7 @@ import type { PowerState, StorageLayout } from "@/app/store/types/enum";
 import type {
   ModelRef,
   TimestampFields,
-  UtcTimestamp,
+  UtcDatetime,
 } from "@/app/store/types/model";
 import type {
   NodeActions,
@@ -69,7 +69,7 @@ export type ControllerActions =
 
 export type BaseController = BaseNode & {
   actions: ControllerActions[];
-  last_image_sync: UtcTimestamp;
+  last_image_sync: UtcDatetime;
   link_type: NodeLinkType.CONTROLLER;
   node_type_display:
     | NodeTypeDisplay.RACK_CONTROLLER

src/app/store/discovery/selectors.test.ts

@@ -62,31 +62,31 @@ describe("discovery selectors", () => {
             mac_organization: "Acme Inc.",
             ip: "0.0.0.0",
             observer_hostname: "alpha",
-            last_seen: "Mon, 19 Oct. 2020 01:15:57",
+            last_seen: factory.timestamp("Mon, 19 Oct. 2020 01:15:57"),
           }),
           factory.discovery({
             hostname: "bar",
             mac_address: "00:16:4a:9c:bf:e9",
             mac_organization: "Foodies Inc.",
             ip: "1.1.1.1",
             observer_hostname: "bravo",
-            last_seen: "Sat, 17 Oct. 2020 01:15:57",
+            last_seen: factory.timestamp("Sat, 17 Oct. 2020 01:15:57"),
           }),
           factory.discovery({
             hostname: "foobar",
             mac_address: "00:16:5b:9c:bf:e9",
             mac_organization: "Roxxon",
             ip: "2.2.2.2",
             observer_hostname: "foot",
-            last_seen: "Mon, 19 Oct. 2020 01:15:57",
+            last_seen: factory.timestamp("Mon, 19 Oct. 2020 01:15:57"),
           }),
           factory.discovery({
             hostname: "fizz",
             mac_address: "00:17:3e:9c:bf:e9",
             mac_organization: "Pacific Couriers",
             ip: "3.3.3.3",
             observer_hostname: "alpha",
-            last_seen: "Mon, 19 Oct. 2020 01:15:57",
+            last_seen: factory.timestamp("Mon, 19 Oct. 2020 01:15:57"),
           }),
         ],
       }),

src/app/store/discovery/types/base.ts

@@ -1,5 +1,5 @@
 import type { APIError } from "@/app/base/types";
-import type { Model } from "@/app/store/types/model";
+import type { Model, UtcDatetime } from "@/app/store/types/model";
 import type { GenericState } from "@/app/store/types/state";
 
 export type Discovery = Model & {
@@ -10,7 +10,7 @@ export type Discovery = Model & {
   hostname: string | null;
   ip: string | null;
   is_external_dhcp: boolean | null;
-  last_seen: string;
+  last_seen: UtcDatetime;
   mac_address: string | null;
   mac_organization: string;
   mdns: number | null;

src/app/store/machine/types/base.ts

@@ -8,7 +8,7 @@ import type { PowerState, StorageLayout } from "@/app/store/types/enum";
 import type {
   ModelRef,
   TimestampFields,
-  UtcTimestamp,
+  UtcDatetime,
 } from "@/app/store/types/model";
 import type {
   BaseNode,
@@ -73,7 +73,7 @@ export type MachineDetails = BaseMachine &
     bmc: number;
     boot_disk: Disk | null;
     certificate?: CertificateMetadata;
-    commissioning_start_time: UtcTimestamp;
+    commissioning_start_time: UtcDatetime;
     commissioning_status: TestStatus;
     cpu_speed: BaseNode["cpu_speed"];
     cpu_test_status: TestStatus;
@@ -126,8 +126,8 @@ type HardwareSyncFields =
     }
   | {
       enable_hw_sync: true;
-      last_sync: UtcTimestamp;
-      next_sync: UtcTimestamp;
+      last_sync: UtcDatetime;
+      next_sync: UtcDatetime;
       is_sync_healthy: boolean;
       sync_interval: Seconds;
     };

src/app/store/scriptresult/types/base.ts

@@ -9,7 +9,7 @@ import type {
 
 import type { HardwareType } from "@/app/base/enum";
 import type { APIError } from "@/app/base/types";
-import type { Model, UtcTimestamp } from "@/app/store/types/model";
+import type { Model, UtcDatetime } from "@/app/store/types/model";
 import type { NetworkInterface } from "@/app/store/types/node";
 import type { GenericState } from "@/app/store/types/state";
 
@@ -29,7 +29,7 @@ export type PartialScriptResult = Model & {
   status: ScriptResultStatus;
   status_name: string;
   suppressed: boolean;
-  updated?: UtcTimestamp;
+  updated?: UtcDatetime;
 };
 
 export type ScriptResult = PartialScriptResult & {
@@ -76,7 +76,7 @@ export type ScriptResult = PartialScriptResult & {
   results: ScriptResultResult[];
   script?: number;
   script_version?: number | null;
-  started?: UtcTimestamp;
+  started?: UtcDatetime;
   tags: string;
 };
 

src/app/store/types/model.ts

@@ -3,10 +3,11 @@ export type Model = {
 };
 
 // Expected format: "Thu, 15 Aug. 2019 06:21:39" or ""
-export type UtcTimestamp = string & { readonly __brand: unique symbol };
+export type UtcDatetime = string & { readonly __brand: unique symbol };
+export type UtcDatetimeDisplay = `${string} (UTC)` | "Never";
 export type TimestampFields = {
-  created: UtcTimestamp;
-  updated: UtcTimestamp;
+  created: UtcDatetime;
+  updated: UtcDatetime;
 };
 
 export type TimestampedModel = Model & TimestampFields;

src/app/store/user/types/base.ts

@@ -1,5 +1,5 @@
 import type { APIError } from "@/app/base/types";
-import type { Model, UtcTimestamp } from "@/app/store/types/model";
+import type { Model, UtcDatetime } from "@/app/store/types/model";
 import type { GenericState } from "@/app/store/types/state";
 
 export type User = Model & {
@@ -9,7 +9,7 @@ export type User = Model & {
   is_local: boolean;
   is_superuser: boolean;
   last_name: string;
-  last_login: UtcTimestamp;
+  last_login: UtcDatetime;
   machines_count: number;
   sshkeys_count: number;
   username: string;

src/app/tags/views/TagList/TagTable/TagTable.tsx

@@ -24,7 +24,7 @@ import type { Tag } from "@/app/store/tag/types";
 import { TagMeta } from "@/app/store/tag/types";
 import AppliedTo from "@/app/tags/components/AppliedTo";
 import { isComparable } from "@/app/utils";
-import { getUtcTimestamp } from "@/app/utils/time";
+import { formatUtcDatetime } from "@/app/utils/time";
 
 type Props = PropsWithSpread<
   {
@@ -76,7 +76,7 @@ const generateRows = (
         },
         {
           "aria-label": Label.Updated,
-          content: getUtcTimestamp(tag.updated),
+          content: formatUtcDatetime(tag.updated),
         },
         {
           "aria-label": Label.Auto,