FE: Topics: Remember user polling options (kafbat#453)

Co-authored-by: Roman Zabaluev <gpg@haarolean.dev>

Author: 2 people

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

@@ -63,7 +63,7 @@ const Filters: React.FC<FiltersProps> = ({
     smartFilter,
     setSmartFilter,
     refreshData,
-  } = useMessagesFilters();
+  } = useMessagesFilters(topicName);
 
   const { data: topic } = useTopicDetails({ clusterName, topicName });
   const [createdEditedSmartId, setCreatedEditedSmartId] = useState<string>();

frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx

@@ -10,12 +10,10 @@ import { useTopicDetails } from 'lib/hooks/api/topics';
 import { externalTopicPayload } from 'lib/fixtures/topics';
 import { useSerdes } from 'lib/hooks/api/topicMessages';
 import { serdesPayload } from 'lib/fixtures/topicMessages';
-import {
-  MessagesFilterKeys,
-  MessagesFilterKeysTypes,
-} from 'lib/hooks/useMessagesFilters';
 import { PollingMode } from 'generated-sources';
 import { ModeOptions } from 'lib/hooks/filterUtils';
+import { MessagesFilterKeysTypes } from 'lib/types';
+import { MessagesFilterKeys } from 'lib/constants';
 
 const closeIconMock = 'closeIconMock';
 const filtersSideBarMock = 'filtersSideBarMock';

frontend/src/components/common/Search/Search.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentRef, useRef } from 'react';
+import React, { ComponentRef, useEffect, useRef } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import Input from 'components/common/Input/Input';
 import { useSearchParams } from 'react-router-dom';
@@ -31,6 +31,12 @@ const Search: React.FC<SearchProps> = ({
   const [searchParams, setSearchParams] = useSearchParams();
   const ref = useRef<ComponentRef<'input'>>(null);
 
+  useEffect(() => {
+    if (ref.current !== null && value) {
+      ref.current.value = value;
+    }
+  }, [value]);
+
   const handleChange = useDebouncedCallback((e) => {
     if (ref.current != null) {
       ref.current.value = e.target.value;

frontend/src/components/common/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import useClickOutside from 'lib/hooks/useClickOutside';
 import DropdownArrowIcon from 'components/common/Icons/DropdownArrowIcon';
 
@@ -42,6 +42,10 @@ const Select = <T extends object>(
   const [selectedOption, setSelectedOption] = useState(value);
   const [showOptions, setShowOptions] = useState(false);
 
+  useEffect(() => {
+    setSelectedOption(value);
+  }, [value]);
+
   const showOptionsHandler = () => {
     if (!disabled) setShowOptions(!showOptions);
   };

frontend/src/lib/constants.ts

@@ -130,3 +130,23 @@ export const CONSUMER_GROUP_STATE_TOOLTIPS: Record<ConsumerGroupState, string> =
     DEAD: 'The group is going to be removed. It might be due to the inactivity, or the group is being migrated to different group coordinator.',
     UNKNOWN: '',
   } as const;
+
+/**
+ * @description !! Note !!
+ * Key value should match
+ * */
+export const MessagesFilterKeys = {
+  mode: 'mode',
+  timestamp: 'timestamp',
+  keySerde: 'keySerde',
+  valueSerde: 'valueSerde',
+  limit: 'limit',
+  offset: 'offset',
+  stringFilter: 'stringFilter',
+  partitions: 'partitions',
+  smartFilterId: 'smartFilterId',
+  activeFilterId: 'activeFilterId',
+  activeFilterNPId: 'activeFilterNPId', // not persisted filter name to indicate the refresh
+  cursor: 'cursor',
+  r: 'r', // used tp force refresh of the data
+} as const;

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

@@ -1,6 +1,10 @@
 import React, { useCallback, useRef } from 'react';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
-import { BASE_PARAMS, MESSAGES_PER_PAGE } from 'lib/constants';
+import {
+  BASE_PARAMS,
+  MESSAGES_PER_PAGE,
+  MessagesFilterKeys,
+} from 'lib/constants';
 import {
   GetSerdesRequest,
   PollingMode,
@@ -13,10 +17,7 @@ import { showServerError } from 'lib/errorHandling';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { messagesApiClient } from 'lib/api';
 import { useSearchParams } from 'react-router-dom';
-import {
-  getCursorValue,
-  MessagesFilterKeys,
-} from 'lib/hooks/useMessagesFilters';
+import { getCursorValue } from 'lib/hooks/useMessagesFilters';
 import { convertStrToPollingMode } from 'lib/hooks/filterUtils';
 import { useMessageFiltersStore } from 'lib/hooks/useMessageFiltersStore';
 import { TopicName } from 'lib/interfaces/topic';

frontend/src/lib/hooks/useMessagesFilters.ts

@@ -2,36 +2,15 @@ import { useSearchParams } from 'react-router-dom';
 import { PollingMode } from 'generated-sources';
 import { useEffect } from 'react';
 import { Option } from 'react-multi-select-component';
-import { ObjectValues } from 'lib/types';
+import { MessagesFilterKeys } from 'lib/constants';
 
 import { convertStrToPollingMode, ModeOptions } from './filterUtils';
 import {
   AdvancedFilter,
   selectFilter,
   useMessageFiltersStore,
 } from './useMessageFiltersStore';
-
-/**
- * @description !! Note !!
- * Key value should match
- * */
-export const MessagesFilterKeys = {
-  mode: 'mode',
-  timestamp: 'timestamp',
-  keySerde: 'keySerde',
-  valueSerde: 'valueSerde',
-  limit: 'limit',
-  offset: 'offset',
-  stringFilter: 'stringFilter',
-  partitions: 'partitions',
-  smartFilterId: 'smartFilterId',
-  activeFilterId: 'activeFilterId',
-  activeFilterNPId: 'activeFilterNPId', // not persisted filter name to indicate the refresh
-  cursor: 'cursor',
-  r: 'r', // used tp force refresh of the data
-} as const;
-
-export type MessagesFilterKeysTypes = ObjectValues<typeof MessagesFilterKeys>;
+import { useMessagesFiltersFields } from './useMessagesFiltersFields';
 
 const PER_PAGE = 100;
 
@@ -80,12 +59,18 @@ export function usePaginateTopics(initSearchParams?: URLSearchParams) {
   };
 }
 
-export function useMessagesFilters() {
+export function useMessagesFilters(topicName: string) {
   const [searchParams, setSearchParams] = useSearchParams();
   const refreshData = useRefreshData(searchParams);
+  const {
+    initMessagesFiltersFields,
+    setMessagesFiltersField,
+    removeMessagesFiltersField,
+  } = useMessagesFiltersFields(topicName);
 
   useEffect(() => {
     setSearchParams((params) => {
+      initMessagesFiltersFields(params);
       params.set(MessagesFilterKeys.limit, PER_PAGE.toString());
 
       if (!params.get(MessagesFilterKeys.mode)) {
@@ -140,8 +125,10 @@ export function useMessagesFilters() {
    * */
   const setMode = (newMode: PollingMode) => {
     setSearchParams((params) => {
+      removeMessagesFiltersField(MessagesFilterKeys.offset);
+      removeMessagesFiltersField(MessagesFilterKeys.timestamp);
+      setMessagesFiltersField(MessagesFilterKeys.mode, newMode);
       params.set(MessagesFilterKeys.mode, newMode);
-
       params.delete(MessagesFilterKeys.offset);
       params.delete(MessagesFilterKeys.timestamp);
       return params;
@@ -151,13 +138,18 @@ export function useMessagesFilters() {
   const setTimeStamp = (newDate: Date | null) => {
     if (newDate === null) {
       setSearchParams((params) => {
+        removeMessagesFiltersField(MessagesFilterKeys.timestamp);
         params.delete(MessagesFilterKeys.timestamp);
         return params;
       });
       return;
     }
 
     setSearchParams((params) => {
+      setMessagesFiltersField(
+        MessagesFilterKeys.timestamp,
+        newDate.getTime().toString()
+      );
       params.set(MessagesFilterKeys.timestamp, newDate.getTime().toString());
       return params;
     });
@@ -166,19 +158,22 @@ export function useMessagesFilters() {
   const setKeySerde = (newKeySerde: string) => {
     setSearchParams((params) => {
       params.set(MessagesFilterKeys.keySerde, newKeySerde);
+      setMessagesFiltersField(MessagesFilterKeys.keySerde, newKeySerde);
       return params;
     });
   };
 
   const setValueSerde = (newValueSerde: string) => {
     setSearchParams((params) => {
+      setMessagesFiltersField(MessagesFilterKeys.valueSerde, newValueSerde);
       params.set(MessagesFilterKeys.valueSerde, newValueSerde);
       return params;
     });
   };
 
   const setOffsetValue = (newOffsetValue: string) => {
     setSearchParams((params) => {
+      setMessagesFiltersField(MessagesFilterKeys.offset, newOffsetValue);
       params.set(MessagesFilterKeys.offset, newOffsetValue);
       return params;
     });
@@ -187,8 +182,10 @@ export function useMessagesFilters() {
   const setSearch = (value: string) => {
     setSearchParams((params) => {
       if (value) {
+        setMessagesFiltersField(MessagesFilterKeys.stringFilter, value);
         params.set(MessagesFilterKeys.stringFilter, value);
       } else {
+        removeMessagesFiltersField(MessagesFilterKeys.stringFilter);
         params.delete(MessagesFilterKeys.stringFilter);
       }
       return params;
@@ -200,10 +197,16 @@ export function useMessagesFilters() {
       params.delete(MessagesFilterKeys.partitions);
 
       if (values.length) {
+        setMessagesFiltersField(
+          MessagesFilterKeys.partitions,
+          values.map((v) => v.value).join(',')
+        );
         params.append(
           MessagesFilterKeys.partitions,
           values.map((v) => v.value).join(',')
         );
+      } else {
+        removeMessagesFiltersField(MessagesFilterKeys.partitions);
       }
 
       return params;

frontend/src/lib/hooks/useMessagesFiltersFields.ts

@@ -0,0 +1,94 @@
+import { MessagesFilterKeysTypes } from 'lib/types';
+import { MessagesFilterKeys } from 'lib/constants';
+import { useLocalStorage } from 'lib/hooks/useLocalStorage';
+
+type MessagesFilterFieldsType = Pick<
+  Partial<{
+    [key in MessagesFilterKeysTypes]: string;
+  }>,
+  | 'mode'
+  | 'offset'
+  | 'timestamp'
+  | 'partitions'
+  | 'keySerde'
+  | 'valueSerde'
+  | 'stringFilter'
+>;
+
+export function useMessagesFiltersFields(topicName: string) {
+  const [messageFilters, setMessageFilters] = useLocalStorage<{
+    [topicName: string]: MessagesFilterFieldsType;
+  }>('message-filters-fields', {});
+
+  const removeMessagesFilterFields = () => {
+    setMessageFilters((prev) => {
+      const { [topicName]: topicFilters, ...rest } = prev || {};
+      return rest;
+    });
+  };
+
+  const removeMessagesFiltersField = (key: keyof MessagesFilterFieldsType) => {
+    setMessageFilters((prev) => {
+      const { [key]: value, ...rest } = prev[topicName] || {};
+      return { ...prev, [topicName]: rest };
+    });
+  };
+
+  const setMessagesFiltersField = (
+    key: keyof MessagesFilterFieldsType,
+    value: string
+  ) => {
+    setMessageFilters((prev) => ({
+      ...prev,
+      [topicName]: { ...prev[topicName], [key]: value },
+    }));
+  };
+
+  const initMessagesFiltersFields = (params: URLSearchParams) => {
+    const topicMessagesFilters = messageFilters[topicName];
+
+    const setTopicMessageFiltersFromLocalStorage = (
+      key: keyof MessagesFilterFieldsType
+    ) => {
+      const value = topicMessagesFilters[key];
+      if (value) {
+        params.set(MessagesFilterKeys[key], value);
+      }
+    };
+
+    const setTopicMessageFiltersFromUrlParams = (
+      key: keyof MessagesFilterFieldsType
+    ) => {
+      const filters = params.get(MessagesFilterKeys[key]);
+      if (filters) {
+        setMessagesFiltersField(key, filters);
+      }
+    };
+
+    // if url params are empty and topicMessagesFilters from local storage are existing then we apply them
+    if (params.size === 0 && !!topicMessagesFilters) {
+      setTopicMessageFiltersFromLocalStorage(MessagesFilterKeys.mode);
+      setTopicMessageFiltersFromLocalStorage(MessagesFilterKeys.offset);
+      setTopicMessageFiltersFromLocalStorage(MessagesFilterKeys.timestamp);
+      setTopicMessageFiltersFromLocalStorage(MessagesFilterKeys.partitions);
+      setTopicMessageFiltersFromLocalStorage(MessagesFilterKeys.keySerde);
+      setTopicMessageFiltersFromLocalStorage(MessagesFilterKeys.valueSerde);
+      setTopicMessageFiltersFromLocalStorage(MessagesFilterKeys.stringFilter);
+    } else {
+      removeMessagesFilterFields();
+      setTopicMessageFiltersFromUrlParams(MessagesFilterKeys.mode);
+      setTopicMessageFiltersFromUrlParams(MessagesFilterKeys.offset);
+      setTopicMessageFiltersFromUrlParams(MessagesFilterKeys.timestamp);
+      setTopicMessageFiltersFromUrlParams(MessagesFilterKeys.partitions);
+      setTopicMessageFiltersFromUrlParams(MessagesFilterKeys.keySerde);
+      setTopicMessageFiltersFromUrlParams(MessagesFilterKeys.valueSerde);
+      setTopicMessageFiltersFromUrlParams(MessagesFilterKeys.stringFilter);
+    }
+  };
+
+  return {
+    initMessagesFiltersFields,
+    removeMessagesFiltersField,
+    setMessagesFiltersField,
+  };
+}

frontend/src/lib/types.ts

@@ -1,4 +1,8 @@
+import { MessagesFilterKeys } from './constants';
+
 export type ObjectValues<T extends Record<string, unknown>> = T[keyof T];
 
 export type WithPartialKey<T, K extends keyof T> = Omit<T, K> &
   Partial<Record<K, Partial<T[K]>>>;
+
+export type MessagesFilterKeysTypes = ObjectValues<typeof MessagesFilterKeys>;