feat: Add serial log table

Update serial log table columns and date

Update tests

Add serial log endpoint

Update table

Rename serial logs hook

Rename everything

Add serial log page

Add useSerial hook

Make page for serial log

Cleanup

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,113 @@
+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 serialLogData = [
+  {
+    "brand-id": "test-brand",
+    "created-at": "2023-09-05T11:55:53.732366",
+    "model-name": "test-model",
+    serial: "test-serial",
+  },
+];
+
+const handlers = [
+  http.get("/api/store/test-brand/models/test-model/serial-log", () => {
+    return HttpResponse.json({
+      data: serialLogData,
+      message: "",
+      success: true,
+    });
+  }),
+  http.get("/api/store/test-brand-fail/models/test-model/serial-log", () => {
+    return HttpResponse.json({
+      data: [],
+      message: "There was a problem fetching serial logs",
+      success: false,
+    });
+  }),
+  http.get("/api/store/test-brand-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 log data", async () => {
+    const { result } = renderHook(
+      () => useSerialLogs("test-brand", "test-model"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+
+    expect(result.current.data).toEqual(serialLogData);
+  });
+
+  test("returns error if request fails", async () => {
+    const { result } = renderHook(
+      () => useSerialLogs("test-brand-fail", "test-model"),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isError).toBe(true);
+    });
+
+    expect(result.current.data).toBeUndefined();
+  });
+
+  test("returns error if network error", async () => {
+    const { result } = renderHook(
+      () => useSerialLogs("test-brand-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,31 @@
+import { useQuery, UseQueryResult } from "react-query";
+import type { SerialLog } from "../types/shared";
+
+const useSerialLogs = (
+  brandId: string | undefined,
+  modelId: string | undefined,
+): UseQueryResult<SerialLog[], Error> => {
+  return useQuery<SerialLog[], Error>({
+    queryKey: ["serialLogs", brandId, modelId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/store/${brandId}/models/${modelId}/serial-log`,
+      );
+
+      if (!response.ok) {
+        throw new Error("There was a problem fetching serial logs");
+      }
+
+      const data = await response.json();
+
+      if (!data.success) {
+        throw new Error(data.message);
+      }
+
+      return data.data;
+    },
+    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 SerialLogs = importComponent(() => import("./pages/SerialLogs"));
 
 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={<SerialLogs />} />
                   </Route>
                 </Route>
                 <Route path="*" element={<Navigate to="../snaps" replace />} />

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

@@ -0,0 +1,75 @@
+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 {
+  serialLogsListState,
+  serialLogsListFilterState,
+} from "../../state/serialLogsState";
+import { brandIdState, brandStoreState } from "../../state/brandStoreState";
+import { setPageTitle } from "../../utils";
+
+import Filter from "../../components/Filter";
+import SerialLogsTable from "./SerialLogsTable";
+
+import type { UseQueryResult } from "react-query";
+import type { SerialLog } from "../../types/shared";
+
+function SerialLogs() {
+  const { id, modelId } = useParams();
+  const brandId = useAtomValue(brandIdState);
+  const {
+    isLoading,
+    isError,
+    error,
+    data,
+  }: UseQueryResult<SerialLog[], Error> = useSerialLogs(brandId, modelId);
+  const setSerialLogs = useSetAtom(serialLogsListState);
+  const setFilter = useSetAtom(serialLogsListFilterState);
+  const brandStore = useAtomValue(brandStoreState(id));
+  const [searchParams] = useSearchParams();
+
+  brandStore
+    ? setPageTitle(`Serial logs for ${modelId} in ${brandStore.name}`)
+    : setPageTitle("Serial logs");
+
+  useEffect(() => {
+    if (!isLoading && !isError && data) {
+      setSerialLogs(data);
+      setFilter(searchParams.get("filter") || "");
+    }
+  }, [isLoading, data, error, 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>
+      ) : (
+        <>
+          <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">
+            <SerialLogsTable />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default SerialLogs;

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

@@ -0,0 +1,62 @@
+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 SerialLogsTable(): React.JSX.Element {
+  const { id } = useParams();
+  const serialLogs = useAtomValue(filteredSerialLogsListState);
+  const brandStore = useAtomValue(brandStoreState(id));
+
+  const headers = [
+    { content: "Brand" },
+    { content: "Model" },
+    { content: "Serial number" },
+    { content: "Date", sortKey: "created-at" },
+  ];
+
+  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 'at' HH:mm",
+          ),
+        },
+      ],
+      sortData: {
+        "created-at": serialLog["created-at"],
+      },
+    };
+  });
+
+  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 SerialLogsTable;

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

@@ -0,0 +1,54 @@
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import SerialLogs from "../SerialLogs";
+
+const mockFilterQuery = "test-serial";
+
+vi.mock("react-router-dom", async (importOriginal) => ({
+  ...(await importOriginal()),
+  useSearchParams: () => [new URLSearchParams({ filter: mockFilterQuery })],
+}));
+
+vi.mock("../../Portals/Portals", async (importOriginal) => ({
+  ...(await importOriginal()),
+  PortalEntrance: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+function renderComponent() {
+  return render(
+    <BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <SerialLogs />
+      </QueryClientProvider>
+    </BrowserRouter>,
+  );
+}
+
+describe("SerialLogs", () => {
+  it("displays a filter input", () => {
+    renderComponent();
+    expect(screen.getByLabelText("Search serial logs")).toBeInTheDocument();
+  });
+
+  it("populates filter with the filter query parameter", () => {
+    renderComponent();
+    expect(screen.getByLabelText("Search serial logs")).toHaveValue(
+      mockFilterQuery,
+    );
+  });
+});