feat: Use Store API pagination for serial logs table

steverydz · steverydz · commit 62e2dc29ced5 · 2026-04-29T16:16:59.000+01:00
diff --git a/requirements.txt b/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.8.2
+canonicalwebteam.store-api==7.8.3
 canonicalwebteam.launchpad==0.9.0
 django-openid-auth==0.17
 Flask-OpenID==1.3.1
diff --git a/static/js/publisher/hooks/__tests__/useSerialLogs.test.tsx b/static/js/publisher/hooks/__tests__/useSerialLogs.test.tsx
@@ -188,7 +188,7 @@ describe("useSerialLogs", () => {
     const { result } = renderHook(
       () =>
         useSerialLogs("test-brand-id", "test-model", {
-          nextPage: "nextpagecursor",
+          page: "nextpagecursor",
         }),
       {
         wrapper: createWrapper(),
@@ -235,7 +235,7 @@ describe("useSerialLogs", () => {
             endTime: "2026-03-28T04:00:23.875000",
           },
           pageSize: 10,
-          nextPage: "nextpagecursor",
+          page: "nextpagecursor",
         }),
       {
         wrapper: createWrapper(),
diff --git a/static/js/publisher/hooks/useSerialLogs.ts b/static/js/publisher/hooks/useSerialLogs.ts
@@ -5,8 +5,8 @@ const useSerialLogs = (
   brandId: string | undefined,
   modelId: string | undefined,
   urlSearchParams?: {
+    page?: string | null;
     pageSize?: number;
-    nextPage?: string;
     interval?: {
       startTime: string;
       endTime: string;
@@ -19,7 +19,7 @@ const useSerialLogs = (
   );
 
   if (urlSearchParams) {
-    const { interval, pageSize, nextPage } = urlSearchParams;
+    const { interval, pageSize, page } = urlSearchParams;
 
     if (interval) {
       url.searchParams.set("start-time", interval.startTime);
@@ -30,15 +30,22 @@ const useSerialLogs = (
       url.searchParams.set("page-size", pageSize.toString());
     }
 
-    if (nextPage) {
-      url.searchParams.set("next-page", nextPage);
+    if (page) {
+      url.searchParams.set("next-page", page);
     }
   }
 
   return useQuery<ApiResponse<SerialLogResponse>, Error>({
-    queryKey: ["serials", brandId, modelId, urlSearchParams],
+    queryKey: [
+      "serials",
+      brandId,
+      modelId,
+      urlSearchParams?.page,
+      urlSearchParams?.pageSize,
+      urlSearchParams?.interval,
+    ],
     queryFn: async () => {
-      const response = await fetch(url.toString());
+      const response = await fetch(url);
       const responseData = await response.json();
 
       return responseData;
diff --git a/static/js/publisher/layouts/ModelDetailsPageLayout/ModelNav.tsx b/static/js/publisher/layouts/ModelDetailsPageLayout/ModelNav.tsx
@@ -1,13 +1,14 @@
 import { Link, useParams } from "react-router-dom";
 import { useAtomValue } from "jotai";
 
-import { useRemodels } from "../../hooks";
+import { useRemodels, useSerialLogs } from "../../hooks";
 import { brandIdState } from "../../state/brandStoreState";
 
 function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
   const { id, modelId } = useParams();
   const brandId = useAtomValue(brandIdState);
   const { data: remodelsData } = useRemodels(brandId);
+  const { data: serialLogsData } = useSerialLogs(brandId, modelId);
 
   return (
     <nav className="p-tabs">
@@ -44,6 +45,18 @@ function ModelNav({ sectionName }: { sectionName: string }): React.JSX.Element {
             </Link>
           </li>
         )}
+        {serialLogsData?.success && (
+          <li className="p-tabs__item">
+            <Link
+              to={`/admin/${id}/models/${modelId}/serial-log`}
+              className="p-tabs__link"
+              aria-selected={sectionName === "serial-log"}
+              role="tab"
+            >
+              Serial log
+            </Link>
+          </li>
+        )}
       </ul>
     </nav>
   );
diff --git a/static/js/publisher/pages/Remodel/Remodel.tsx b/static/js/publisher/pages/Remodel/Remodel.tsx
@@ -70,7 +70,10 @@ function Remodel(): React.JSX.Element {
     // because otherwise the cursor history gets out of sync
     setCurrentCursor(null);
     cursorHistory.current = [];
-    setSearchParams({ "page-size": newPageSize.toString() });
+    setSearchParams((params) => {
+      params.set("page-size", newPageSize.toString());
+      return params;
+    });
   };
 
   brandStore
diff --git a/static/js/publisher/pages/SerialLog/SerialLog.tsx b/static/js/publisher/pages/SerialLog/SerialLog.tsx
@@ -1,6 +1,6 @@
-import { useEffect } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useAtomValue, useSetAtom } from "jotai";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import { Notification, Icon } from "@canonical/react-components";
 
 import { useSerialLogs } from "../../hooks";
@@ -15,7 +15,23 @@ import type { SerialLogResponse, ApiResponse } from "../../types/shared";
 
 function SerialLog(): React.JSX.Element {
   const { id, modelId } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const brandId = useAtomValue(brandIdState);
+  const [currentCursor, setCurrentCursor] = useState<string | null>(null);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const cursorHistory = useRef<Array<string | null>>([]);
+
+  const pageSizeParam = searchParams.get("page-size");
+  const parsedPageSize = pageSizeParam ? parseInt(pageSizeParam) : NaN;
+  const startTime = searchParams.get("start-time");
+  const endTime = searchParams.get("end-time");
+  const pageSize = Number.isInteger(parsedPageSize) ? parsedPageSize : 25;
+  const params = {
+    pageSize: pageSize,
+    page: currentCursor,
+    ...(startTime && endTime && { interval: { startTime, endTime } }),
+  };
+
   const {
     isLoading,
     isError,
@@ -24,17 +40,44 @@ function SerialLog(): React.JSX.Element {
   }: UseQueryResult<ApiResponse<SerialLogResponse>, Error> = useSerialLogs(
     brandId,
     modelId,
+    params,
   );
   const setSerialLogs = useSetAtom(serialLogsListState);
   const brandStore = useAtomValue(brandStoreState(id));
 
+  const handlePageForward = () => {
+    cursorHistory.current.push(currentCursor);
+    setCurrentCursor(nextCursor);
+  };
+
+  const handlePageBack = () => {
+    const lastCursor = cursorHistory.current.pop();
+    setCurrentCursor(lastCursor || null);
+  };
+
+  const handlePageSizeChange = (newPageSize: number) => {
+    // Need to reset current page when changing page size
+    // because otherwise the cursor history gets out of sync
+    setCurrentCursor(null);
+    cursorHistory.current = [];
+    setSearchParams((params) => {
+      params.set("page-size", newPageSize.toString());
+      return params;
+    });
+  };
+
   brandStore
     ? setPageTitle(`Serial logs in ${brandStore.name}`)
     : setPageTitle("Serial logs");
 
   useEffect(() => {
-    if (!isLoading && !isError && data) {
+    if (isLoading && isError) {
+      return;
+    }
+
+    if (data) {
       setSerialLogs(data.data?.items || []);
+      setNextCursor(data.data?.["next-cursor"] || null);
     }
   }, [isLoading, isError, data]);
 
@@ -57,7 +100,16 @@ function SerialLog(): React.JSX.Element {
           </Notification>
         ) : (
           <div className="u-flex-column u-flex-grow">
-            <SerialLogTable />
+            <SerialLogTable
+              handlePageForward={handlePageForward}
+              handlePageBack={handlePageBack}
+              handlePageSizeChange={handlePageSizeChange}
+              forwardDisabled={!nextCursor}
+              backDisabled={
+                cursorHistory.current.length < 1 || currentCursor === null
+              }
+              pageSize={pageSize}
+            />
           </div>
         )}
       </div>
diff --git a/static/js/publisher/pages/SerialLog/SerialLogTable.tsx b/static/js/publisher/pages/SerialLog/SerialLogTable.tsx
@@ -1,25 +1,44 @@
 import { useAtomValue } from "jotai";
 import { useParams } from "react-router-dom";
-import { MainTable, TablePagination } from "@canonical/react-components";
+import {
+  MainTable,
+  TablePaginationControls,
+} from "@canonical/react-components";
 import { format } from "date-fns";
 
 import { brandStoreState } from "../../state/brandStoreState";
 import { serialLogsListState } from "../../state/serialLogsState";
 
 import type { SerialLog } from "../../types/shared";
 
-function SerialLogTable(): React.JSX.Element {
+type Props = {
+  handlePageForward: () => void;
+  handlePageBack: () => void;
+  handlePageSizeChange: (arg: number) => void;
+  forwardDisabled: boolean;
+  backDisabled: boolean;
+  pageSize: number;
+};
+
+function SerialLogTable({
+  handlePageForward,
+  handlePageBack,
+  handlePageSizeChange,
+  forwardDisabled,
+  backDisabled,
+  pageSize,
+}: Props): React.JSX.Element {
   const { id } = useParams();
   const serialLogs = useAtomValue(serialLogsListState);
   const brandStore = useAtomValue(brandStoreState(id));
 
   const headers = [
-    { content: "Brand" },
-    { content: "Model" },
-    { content: "Serial" },
+    { content: "Brand", className: "u-truncate" },
+    { content: "Model", className: "u-truncate" },
+    { content: "Serial", className: "u-truncate" },
     {
       content: "Created date",
-      className: "u-align--right",
+      className: "u-align--right u-truncate",
     },
   ];
 
@@ -38,17 +57,37 @@ function SerialLogTable(): React.JSX.Element {
   });
 
   return (
-    <TablePagination
-      data={rows}
-      pageLimits={[25, 50, 100, 200]}
-      position="below"
-    >
+    <>
       <MainTable
         data-testid="serial-log-table"
         emptyStateMsg="No serial logs found"
         headers={headers}
+        rows={rows}
+      />
+      <TablePaginationControls
+        // Although we don't know the current page as we don't know
+        // how many pages there are, the `currentPage` value is required, and
+        // must be > 0, to remove the "of more than x rows" in the visible
+        // count section. See:
+        // https://canonical.github.io/react-components/?path=/story/components-tablepagination--controls-with-partially-known-entries
+        currentPage={1}
+        itemName="serial log"
+        nextButtonProps={{
+          disabled: forwardDisabled,
+        }}
+        onNextPage={handlePageForward}
+        onPageSizeChange={handlePageSizeChange}
+        onPreviousPage={handlePageBack}
+        pageLimits={[10, 25, 50, 100, 500]}
+        pageSize={pageSize}
+        previousButtonProps={{
+          disabled: backDisabled,
+        }}
+        showPageInput={false}
+        visibleCount={rows.length}
+        className="table-pagination-controls"
       />
-    </TablePagination>
+    </>
   );
 }
 
diff --git a/webapp/endpoints/models.py b/webapp/endpoints/models.py
@@ -473,21 +473,19 @@ def delete_remodel_allowlist(store_id: str):
 @login_required
 @exchange_required
 def get_serial_log(store_id: str, model_name: str):
-    start_time = flask.request.args.get("start-time")
-    end_time = flask.request.args.get("end-time")
-    page_size = flask.request.args.get("page-size")
-    cursor = flask.request.args.get("next-page")
+    params = {
+        # rename `cursor` to `page` on our side for clarity
+        "cursor": flask.request.args.get("page"),
+        "start_time": flask.request.args.get("start-time"),
+        "end_time": flask.request.args.get("end-time"),
+        "page_size": flask.request.args.get("page-size"),
+    }
+
     res = {}
 
     try:
         logs = publisher_gateway.get_store_model_serial_logs(
-            flask.session,
-            store_id,
-            model_name,
-            start_time,
-            end_time,
-            page_size,
-            cursor,
+            flask.session, store_id, model_name, params
         )
         res["data"] = logs
         res["success"] = True
