feat: Serial logs (#5672)

* feat: Serial logs

* Co-pilot suggestions

Author: steverydz

requirements.txt

@@ -6,7 +6,7 @@ canonicalwebteam.discourse==7.2.0
 canonicalwebteam.blog==6.8.4
 canonicalwebteam.search==2.1.2
 canonicalwebteam.image-template==1.9.0
-canonicalwebteam.store-api==7.4.10
+canonicalwebteam.store-api==7.7.0
 canonicalwebteam.launchpad==0.9.0
 django-openid-auth==0.17
 Flask-OpenID==1.3.1

static/js/publisher/hooks/__tests__/useSerialLogs.test.tsx

@@ -0,0 +1,125 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+import { setupServer } from "msw/node";
+
+import useSerialLogs from "../useSerialLogs";
+
+import type { ReactNode } from "react";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const createWrapper = () => {
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+const serialLogsResponse = {
+  items: [
+    {
+      "brand-id": "test-brand-id",
+      "created-at": "2023-09-05T11:55:53.732366",
+      "model-name": "test-model",
+      serial: "test-serial",
+      "serial-assertion": "test-assertion",
+      "serial-sign-key-sha3-384": "test-sha3",
+    },
+  ],
+  "next-cursor": null,
+};
+
+const handlers = [
+  http.get("/api/store/test-brand-id/models/test-model/serial-log", () => {
+    return HttpResponse.json({
+      data: serialLogsResponse,
+      success: true,
+    });
+  }),
+  http.get("/api/store/test-brand-id-fail/models/test-model/serial-log", () => {
+    return HttpResponse.json({
+      message: "There was a problem fetching serial logs",
+      success: false,
+    });
+  }),
+  http.get(
+    "/api/store/test-brand-id-error/models/test-model/serial-log",
+    () => {
+      return HttpResponse.error();
+    },
+  ),
+];
+
+const server = setupServer(...handlers);
+
+beforeAll(() => {
+  server.listen();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+  queryClient.clear();
+});
+
+afterAll(() => {
+  server.close();
+});
+
+describe("useSerialLogs", () => {
+  test("returns serial logs data", async () => {
+    const { result } = renderHook(
+      () => useSerialLogs("test-brand-id", "test-model"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toEqual({
+      data: serialLogsResponse,
+      success: true,
+    });
+  });
+
+  test("returns error if request fails", async () => {
+    const { result } = renderHook(
+      () => useSerialLogs("test-brand-id-fail", "test-model"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toEqual({
+      message: "There was a problem fetching serial logs",
+      success: false,
+    });
+  });
+
+  test("returns error if network error", async () => {
+    const { result } = renderHook(
+      () => useSerialLogs("test-brand-id-error", "test-model"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.data).toBeUndefined();
+  });
+});

static/js/publisher/hooks/index.ts

@@ -16,6 +16,7 @@ import useFetchPublishedSnapMetrics from "./useFetchPublishedSnapMetrics";
 import useSortTableData from "./useSortTableData";
 import useAccountKeys from "./useAccountKeys";
 import useRemodels from "./useRemodels";
+import useSerialLogs from "./useSerialLogs";
 
 export {
   useValidationSets,
@@ -36,4 +37,5 @@ export {
   useSortTableData,
   useAccountKeys,
   useRemodels,
+  useSerialLogs,
 };

static/js/publisher/hooks/useSerialLogs.ts

@@ -0,0 +1,22 @@
+import { useQuery, UseQueryResult } from "react-query";
+import type { SerialLogResponse, ApiResponse } from "../types/shared";
+
+const useSerialLogs = (
+  brandId: string | undefined,
+  modelId: string | undefined,
+): UseQueryResult<ApiResponse<SerialLogResponse>, Error> => {
+  return useQuery<ApiResponse<SerialLogResponse>, Error>({
+    queryKey: ["serials", brandId, modelId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/store/${brandId}/models/${modelId}/serial-log`,
+      );
+      const responseData = await response.json();
+
+      return responseData;
+    },
+    enabled: !!brandId,
+  });
+};
+
+export default useSerialLogs;

static/js/publisher/index.tsx

@@ -41,6 +41,7 @@ const ValidationSet = importComponent(() => import("./pages/ValidationSet"));
 const ValidationSets = importComponent(() => import("./pages/ValidationSets"));
 const AccountKeys = importComponent(() => import("./pages/AccountKeys"));
 const Remodel = importComponent(() => import("./pages/Remodel"));
+const SerialLog = importComponent(() => import("./pages/SerialLog"));
 
 Sentry.init({
   dsn: window.SENTRY_DSN,
@@ -127,6 +128,7 @@ root.render(
                     <Route path="policies/create" element={<Policies />} />
                     <Route path="remodel" element={<Remodel />} />
                     <Route path="remodel/configure" element={<Remodel />} />
+                    <Route path="serial-log" element={<SerialLog />} />
                   </Route>
                 </Route>
                 <Route path="*" element={<Navigate to="../snaps" replace />} />

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

@@ -7,7 +7,7 @@ import { brandIdState } from "../../state/brandStoreState";
 function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
   const { id, modelId } = useParams();
   const brandId = useAtomValue(brandIdState);
-  const { data } = useRemodels(brandId, modelId);
+  const { data: remodelsData } = useRemodels(brandId, modelId);
 
   return (
     <nav className="p-tabs">
@@ -32,7 +32,7 @@ function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
             Policies
           </Link>
         </li>
-        {data?.success && (
+        {remodelsData?.success && (
           <li className="p-tabs__item">
             <Link
               to={`/admin/${id}/models/${modelId}/remodel`}

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

@@ -8,6 +8,7 @@ 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 getSectionName = () => {
     if (isPolicies) {
@@ -18,6 +19,10 @@ function ModelDetailsPageLayout() {
       return "remodel";
     }
 
+    if (isSerialLog) {
+      return "serial-log";
+    }
+
     return "overview";
   };
 

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

@@ -0,0 +1,86 @@
+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";
+
+import { useSerialLogs } from "../../hooks";
+import {
+  serialLogsListFilterState,
+  serialLogsListState,
+} from "../../state/serialLogsState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
+import { setPageTitle } from "../../utils";
+
+import Filter from "../../components/Filter";
+import SerialLogTable from "./SerialLogTable";
+
+import type { UseQueryResult } from "react-query";
+import type { SerialLogResponse, ApiResponse } from "../../types/shared";
+
+function SerialLog(): React.JSX.Element {
+  const { id, modelId } = useParams();
+  const brandId = useAtomValue(brandIdState);
+  const {
+    isLoading,
+    isError,
+    error,
+    data,
+  }: UseQueryResult<ApiResponse<SerialLogResponse>, Error> = useSerialLogs(
+    brandId,
+    modelId,
+  );
+  const setSerialLogs = useSetAtom(serialLogsListState);
+  const setFilter = useSetAtom(serialLogsListFilterState);
+  const brandStore = useAtomValue(brandStoreState(id));
+  const [searchParams] = useSearchParams();
+
+  brandStore
+    ? setPageTitle(`Serial logs in ${brandStore.name}`)
+    : setPageTitle("Serial logs");
+
+  useEffect(() => {
+    if (!isLoading && !isError && data) {
+      setSerialLogs(data.data?.items || []);
+      setFilter(searchParams.get("filter") || "");
+    }
+  }, [isLoading, error, data, brandId, id]);
+
+  return (
+    <>
+      <div className="u-fixed-width u-flex-column u-flex-grow">
+        {isError && error && (
+          <Notification severity="negative">
+            Error: {error.message}
+          </Notification>
+        )}
+        {isLoading ? (
+          <p>
+            <Icon name="spinner" className="u-animation--spin" />
+            &nbsp;Fetching serial logs...
+          </p>
+        ) : data && data.success === false ? (
+          <Notification severity="caution">
+            {data.message || "Unable to fetch serial logs"}
+          </Notification>
+        ) : (
+          <>
+            <Row>
+              <Col size={6}>
+                <Filter
+                  state={serialLogsListFilterState}
+                  label="Search serial logs"
+                  placeholder="Search serial logs"
+                />
+              </Col>
+            </Row>
+            <div className="u-flex-column u-flex-grow">
+              <SerialLogTable />
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default SerialLog;

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

@@ -0,0 +1,66 @@
+import { useAtomValue } from "jotai";
+import { useParams } from "react-router-dom";
+import { MainTable, TablePagination } from "@canonical/react-components";
+import { format } from "date-fns";
+
+import { brandStoreState } from "../../state/brandStoreState";
+import { filteredSerialLogsListState } from "../../state/serialLogsState";
+import { useSortTableData } from "../../hooks";
+
+import type { SerialLog } from "../../types/shared";
+
+function SerialLogTable(): React.JSX.Element {
+  const { id } = useParams();
+  const serialLogs = useAtomValue(filteredSerialLogsListState);
+  const brandStore = useAtomValue(brandStoreState(id));
+
+  const headers = [
+    { content: "Brand" },
+    {
+      content: "Model",
+      sortKey: "model-name",
+    },
+    {
+      content: "Serial",
+      sortKey: "serial",
+    },
+    {
+      content: "Created date",
+      className: "u-align--right",
+    },
+  ];
+
+  const rows = serialLogs.map((serialLog: SerialLog) => {
+    return {
+      columns: [
+        { content: brandStore?.name },
+        { content: serialLog["model-name"] },
+        { content: serialLog.serial },
+        {
+          content: format(new Date(serialLog["created-at"]), "dd/MM/yyyy"),
+          className: "u-align--right",
+        },
+      ],
+    };
+  });
+
+  const { rows: sortedRows, updateSort } = useSortTableData({ rows });
+
+  return (
+    <TablePagination
+      data={sortedRows}
+      pageLimits={[25, 50, 100, 200]}
+      position="below"
+    >
+      <MainTable
+        data-testid="serial-log-table"
+        sortable
+        emptyStateMsg="No serial logs match this filter"
+        headers={headers}
+        onUpdateSort={updateSort}
+      />
+    </TablePagination>
+  );
+}
+
+export default SerialLogTable;