Make page for serial log

Author: steverydz

static/js/publisher/layouts/ModelDetailsPageLayout/ModelPageLayout.tsx

@@ -8,7 +8,8 @@ function ModelDetailsPageLayout() {
     pathname.endsWith("policies") || pathname.endsWith("policies/create");
   const isRemodel =
     pathname.endsWith("remodel") || pathname.endsWith("remodel/configure");
-  const isSerialLog = pathname.endsWith("serial-log");
+  const isSerialLog =
+    pathname.endsWith("serial-log") || pathname.includes("/serial-log/");
 
   const getSectionName = () => {
     if (isPolicies) {

static/js/publisher/pages/SerialLog/SerialLog.tsx

@@ -1,5 +1,76 @@
+import { useAtomValue } from "jotai";
+import { useParams } from "react-router-dom";
+import { format } from "date-fns";
+import { Row, Col, Icon } from "@canonical/react-components";
+
+import { useSerialLog } from "../../hooks";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
+import { setPageTitle } from "../../utils";
+
+import type { UseQueryResult } from "react-query";
+import type { SerialLog as SerialLogType } from "../../types/shared";
+
 function SerialLog() {
-  return <h1>Hi</h1>;
+  const { id, modelId, serial } = useParams();
+  const brandId = useAtomValue(brandIdState);
+  const { isLoading, isError, data }: UseQueryResult<SerialLogType[], Error> =
+    useSerialLog(brandId, modelId, serial);
+  const brandStore = useAtomValue(brandStoreState(id));
+
+  brandStore
+    ? setPageTitle(`Serial logs for ${modelId} in ${brandStore.name}`)
+    : setPageTitle("Serial logs");
+
+  return (
+    <>
+      <h1>{serial}</h1>
+      {isLoading && (
+        <p>
+          <Icon name="spinner" className="u-animation--spin" />
+          &nbsp;Fetching serial logs...
+        </p>
+      )}
+      {!isLoading && !isError && data && (
+        <>
+          <Row>
+            <Col size={4}>
+              <p>Serial:</p>
+            </Col>
+            <Col size={8}>
+              <p>{data[0].serial}</p>
+            </Col>
+          </Row>
+          <Row>
+            <Col size={4}>
+              <p>Created at:</p>
+            </Col>
+            <Col size={8}>
+              <p>
+                {format(
+                  new Date(data[0]["created-at"]),
+                  "dd/MM/yyyy 'at' HH:mm",
+                )}
+              </p>
+            </Col>
+          </Row>
+          <Row>
+            <Col size={4}>
+              <p>serial-sign-key-sha3-384:</p>
+            </Col>
+            <Col size={8}>
+              <p>{data[0]["serial-sign-key-sha3-384"]}</p>
+            </Col>
+          </Row>
+          <Row>
+            <Col size={4}>
+              <p>Serial assertion:</p>
+            </Col>
+          </Row>
+          <pre>{data[0]["serial-assertion"]}</pre>
+        </>
+      )}
+    </>
+  );
 }
 
 export default SerialLog;

static/js/publisher/pages/SerialLogs/SerialLogs.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useParams, useSearchParams } from "react-router-dom";
 import { Notification, Icon, Row, Col } from "@canonical/react-components";
@@ -15,7 +16,6 @@ import SerialLogsTable from "./SerialLogsTable";
 
 import type { UseQueryResult } from "react-query";
 import type { SerialLog } from "../../types/shared";
-import { useEffect } from "react";
 
 function SerialLogs() {
   const { id, modelId } = useParams();

static/js/publisher/types/shared.ts

@@ -194,4 +194,6 @@ export type SerialLog = {
   "created-at": string;
   "model-name": string;
   serial: string;
+  "serial-assertion"?: string;
+  "serial-sign-key-sha3-384"?: string;
 };