FE: Add Prevoius button to topic message page - frontend side (kafbat#550)

Author: hadisfr

api/src/main/java/io/kafbat/ui/emitter/ConsumingStats.java

@@ -32,6 +32,9 @@ void sendFinishEvent(FluxSink<TopicMessageEventDTO> sink, @Nullable Cursor.Track
     sink.next(
         new TopicMessageEventDTO()
             .type(TopicMessageEventDTO.TypeEnum.DONE)
+            .prevCursor( // FIXME
+                null
+            )
             .nextCursor(
                 cursor != null
                     ? new TopicMessagePageCursorDTO().id(cursor.registerCursor())

contract/src/main/resources/swagger/kafbat-ui-api.yaml

@@ -2954,6 +2954,8 @@ components:
           $ref: "#/components/schemas/TopicMessagePhase"
         consuming:
           $ref: "#/components/schemas/TopicMessageConsuming"
+        prevCursor:
+          $ref: "#/components/schemas/TopicMessagePageCursor"
         nextCursor:
           $ref: "#/components/schemas/TopicMessagePageCursor"
 

frontend/src/components/Topics/Topic/Messages/MessagesTable.tsx

@@ -5,7 +5,7 @@ import { TopicMessage } from 'generated-sources';
 import React, { useState } from 'react';
 import { Button } from 'components/common/Button/Button';
 import * as S from 'components/common/NewTable/Table.styled';
-import { useGoToNextPage, useIsLiveMode } from 'lib/hooks/useMessagesFilters';
+import { useGoToPrevPage, useGoToNextPage, useIsLiveMode } from 'lib/hooks/useMessagesFilters';
 import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 
 import PreviewModal from './PreviewModal';
@@ -21,11 +21,13 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
   isFetching,
 }) => {
   const goToNextPage = useGoToNextPage();
+  const goToPrevPage = useGoToPrevPage();
   const [previewFor, setPreviewFor] = useState<string | null>(null);
 
   const [keyFilters, setKeyFilters] = useState<PreviewFilter[]>([]);
   const [contentFilters, setContentFilters] = useState<PreviewFilter[]>([]);
   const nextCursor = useMessageFiltersStore((state) => state.nextCursor);
+  const prevCursor = useMessageFiltersStore((state) => state.prevCursor);
   const isLive = useIsLiveMode();
 
   return (
@@ -97,6 +99,14 @@ const MessagesTable: React.FC<MessagesTableProps> = ({
       </Table>
       <S.Pagination>
         <S.Pages>
+          <Button
+            disabled={isLive || isFetching || !prevCursor}
+            buttonType="secondary"
+            buttonSize="L"
+            onClick={goToPrevPage}
+          >
+            ← Previous
+          </Button>
           <Button
             disabled={isLive || isFetching || !nextCursor}
             buttonType="secondary"

frontend/src/lib/hooks/api/topicMessages.tsx

@@ -102,10 +102,13 @@ export const useTopicMessages = ({
         requestParams.append(MessagesFilterKeys.partitions, partitions);
       }
       const { nextCursor, setNextCursor } = useMessageFiltersStore.getState();
+      const { prevCursor, setPrevCursor } = useMessageFiltersStore.getState();
 
       const searchParamPage = getPageValue(searchParams);
       if (currentPage.current < searchParamPage && nextCursor) {
         requestParams.set(MessagesFilterKeys.cursor, nextCursor);
+      } else if (currentPage.current > searchParamPage && prevCursor) {
+        requestParams.set(MessagesFilterKeys.cursor, prevCursor);
       }
       currentPage.current = searchParamPage;
 
@@ -147,6 +150,9 @@ export const useTopicMessages = ({
               if (nextCursor !== parsedData.nextCursor?.id) {
                 setNextCursor(parsedData.nextCursor?.id || undefined);
               }
+              if (prevCursor !== parsedData.prevCursor?.id) {
+                setPrevCursor(parsedData.prevCursor?.id || undefined);
+              }
               break;
             default:
           }
@@ -157,6 +163,7 @@ export const useTopicMessages = ({
         },
         onerror(err) {
           setNextCursor(undefined);
+          setPrevCursor(undefined);
           setIsFetching(false);
           abortController.current = new AbortController();
           showServerError(err);

frontend/src/lib/hooks/useMessageFiltersStore.ts

@@ -15,7 +15,9 @@ interface MessageFiltersState {
   notPersistedFilter: AdvancedFilter | undefined;
   save: (filter: AdvancedFilter) => void;
   nextCursor: string | undefined;
+  prevCursor: string | undefined;
   setNextCursor: (str: string | undefined) => void;
+  setPrevCursor: (str: string | undefined) => void;
   replace: (filterId: string, filter: AdvancedFilter) => void;
   commit: (filter: AdvancedFilter | undefined) => void;
   remove: (id: string) => void;
@@ -39,6 +41,7 @@ export const useMessageFiltersStore = create<MessageFiltersState>()(
     (set) => ({
       filters: {},
       nextCursor: undefined,
+      prevCursor: undefined,
       notPersistedFilter: undefined,
       save: (filter) =>
         set((state) => ({
@@ -73,6 +76,7 @@ export const useMessageFiltersStore = create<MessageFiltersState>()(
         }),
       removeAll: () => set(() => ({ filters: {} })),
       setNextCursor: (cursor) => set(() => ({ nextCursor: cursor })),
+      setPrevCursor: (cursor) => set(() => ({ prevCursor: cursor })),
     }),
     {
       name: `${LOCAL_STORAGE_KEY_PREFIX}-message-filters`,

frontend/src/lib/hooks/useMessagesFilters.ts

@@ -63,6 +63,18 @@ export function getPageValue(urlSearchParam: URLSearchParams) {
   return page;
 }
 
+export function useGoToPrevPage(initSearchParams?: URLSearchParams) {
+  const [, setSearchParams] = useSearchParams(initSearchParams);
+  return () => {
+    setSearchParams((params) => {
+      const prevPage = getPageValue(params) - 1;
+      params.set(MessagesFilterKeys.page, prevPage.toString());
+
+      return params;
+    });
+  };
+}
+
 export function useGoToNextPage(initSearchParams?: URLSearchParams) {
   const [, setSearchParams] = useSearchParams(initSearchParams);
   return () => {