Fix pagination issue in topic table (#1260)

* Fix pagination issue in topic table Signed-off-by: hemahg <[email protected]> * fix API determination of pageNumber on previous page navigation Signed-off-by: Michael Edgar <[email protected]> --------- Signed-off-by: hemahg <[email protected]> Signed-off-by: Michael Edgar <[email protected]> Co-authored-by: Michael Edgar <[email protected]>
streamshub · Dec 3, 2024 · 2933990 · 2933990
1 parent 7b114d7
commit 2933990
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 11 deletions.
diff --git a/api/src/main/java/com/github/streamshub/console/api/support/ListRequestContext.java b/api/src/main/java/com/github/streamshub/console/api/support/ListRequestContext.java
@@ -157,6 +157,7 @@ boolean afterPageCursor(T item) {
     public boolean beforePageBegin(T item) {
         if (pageBackRequest && candidateRecords > pageSize) {
             candidateRecords--;
+            recordsBeforePage++;
             return true;
         }
 

diff --git a/api/src/test/java/com/github/streamshub/console/api/TopicsResourceIT.java b/api/src/test/java/com/github/streamshub/console/api/TopicsResourceIT.java
@@ -549,15 +549,37 @@ void testListTopicsPaginationLinksWithDefaultPageSize() throws MalformedURLExcep
             .extract()
             .asString();
 
-        // Return to page 1 using the `first` link provided by the last page, 11
+        // Jump to previous page 10 using `prev` link from page 3
         JsonObject links3 = linkExtract.apply(response3);
-        URI request4 = URI.create(links3.getString("first"));
+        URI request4 = URI.create(links3.getString("prev"));
         String response4 = whenRequesting(req -> req
                 .urlEncodingEnabled(false)
                 .get(request4))
             .assertThat()
             .statusCode(is(Status.OK.getStatusCode()))
             .body("links.size()", is(4))
+            .body("links", allOf(
+                    hasEntry(is("first"), is(links1First)),
+                    hasEntry(is("prev"), notNullValue()),
+                    hasEntry(is("next"), is(links1Last)),
+                    hasEntry(is("last"), is(links1Last))))
+            .body("meta.page.total", is(102))
+            .body("meta.page.pageNumber", is(10))
+            .body("data.size()", is(10))
+            .body("data[0].attributes.name", startsWith("011-"))
+            .body("data[9].attributes.name", startsWith("002-"))
+            .extract()
+            .asString();
+
+        // Return to page 1 using the `first` link provided by page 10
+        JsonObject links4 = linkExtract.apply(response4);
+        URI request5 = URI.create(links4.getString("first"));
+        String response5 = whenRequesting(req -> req
+                .urlEncodingEnabled(false)
+                .get(request5))
+            .assertThat()
+            .statusCode(is(Status.OK.getStatusCode()))
+            .body("links.size()", is(4))
             .body("links", allOf(
                     hasEntry(is("first"), is(links1First)),
                     hasEntry(is("prev"), nullValue()),
@@ -571,7 +593,7 @@ void testListTopicsPaginationLinksWithDefaultPageSize() throws MalformedURLExcep
             .extract()
             .asString();
 
-        assertEquals(response1, response4);
+        assertEquals(response1, response5);
     }
 
     @Test

diff --git a/ui/api/topics/actions.ts b/ui/api/topics/actions.ts
@@ -37,7 +37,8 @@ export async function getTopics(
   const sp = new URLSearchParams(
     filterUndefinedFromObj({
       "fields[topics]":
-        params.fields ?? "name,status,visibility,numPartitions,totalLeaderLogBytes,consumerGroups",
+        params.fields ??
+        "name,status,visibility,numPartitions,totalLeaderLogBytes,consumerGroups",
       "filter[id]": params.id ? `eq,${params.id}` : undefined,
       "filter[name]": params.name ? `like,*${params.name}*` : undefined,
       "filter[status]":
@@ -48,7 +49,12 @@ export async function getTopics(
         ? "in,external,internal"
         : "eq,external",
       "page[size]": params.pageSize,
-      "page[after]": params.pageCursor,
+      "page[after]": params.pageCursor?.startsWith("after:")
+        ? params.pageCursor.slice(6)
+        : undefined,
+      "page[before]": params.pageCursor?.startsWith("before:")
+        ? params.pageCursor.slice(7)
+        : undefined,
       sort: params.sort
         ? (params.sortDir !== "asc" ? "-" : "") + params.sort
         : undefined,

diff --git a/ui/app/[locale]/(authorized)/kafka/[kafkaId]/topics/(page)/page.tsx b/ui/app/[locale]/(authorized)/kafka/[kafkaId]/topics/(page)/page.tsx
@@ -113,14 +113,14 @@ async function AsyncTopicsTable({
     status,
   });
 
-  const nextPageQuery = topics.links.next
-    ? new URLSearchParams(topics.links.next)
+  const nextPageCursor = topics.links.next
+    ? `after:${new URLSearchParams(topics.links.next).get("page[after]")}`
     : undefined;
-  const nextPageCursor = nextPageQuery?.get("page[after]");
-  const prevPageQuery = topics.links.prev
-    ? new URLSearchParams(topics.links.prev)
+
+  const prevPageCursor = topics.links.prev
+    ? `before:${new URLSearchParams(topics.links.prev).get("page[before]")}`
     : undefined;
-  const prevPageCursor = prevPageQuery?.get("page[after]");
+
   return (
     <ConnectedTopicsTable
       topics={topics.data}