add Partition support to the v2 messages filters initial

kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/FiltersBar/Form.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { useSearchParams } from 'react-router-dom';
 import Input from 'components/common/Input/Input';
 import { ConsumingMode, useSerdes } from 'lib/hooks/api/topicMessages';
@@ -12,9 +12,10 @@ import { getModeOptions } from 'components/Topics/Topic/MessagesV2/utils/consumi
 import { getSerdeOptions } from 'components/Topics/Topic/SendMessage/utils';
 import useAppParams from 'lib/hooks/useAppParams';
 import { RouteParamsClusterTopic } from 'lib/paths';
+import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
 
 import * as S from './FiltersBar.styled';
-import { setSeekTo } from './utils';
+import { getSelectedPartitionsOptionFromSeekToParam, setSeekTo } from './utils';
 
 type FormValues = {
   mode: ConsumingMode;
@@ -40,6 +41,7 @@ const Form: React.FC<{ isFetching: boolean; partitions: Partition[] }> = ({
     handleSubmit,
     setValue,
     watch,
+    control,
     formState: { isDirty },
     reset,
   } = useForm<FormValues>({
@@ -51,14 +53,31 @@ const Form: React.FC<{ isFetching: boolean; partitions: Partition[] }> = ({
         : Date.now(),
       keySerde: searchParams.get('keySerde') as string,
       valueSerde: searchParams.get('valueSerde') as string,
+      partitions: getSelectedPartitionsOptionFromSeekToParam(
+        searchParams,
+        partitions
+      ),
     } as FormValues,
   });
+
   const mode = watch('mode');
   const offset = watch('offset');
   const time = watch('time');
   const keySerde = watch('keySerde');
   const valueSerde = watch('valueSerde');
 
+  const partitionMap = React.useMemo(
+    () =>
+      partitions.reduce<Record<string, Partition>>(
+        (acc, partition) => ({
+          ...acc,
+          [partition.partition]: partition,
+        }),
+        {}
+      ),
+    [partitions]
+  );
+
   const onSubmit = (values: FormValues) => {
     searchParams.set('m', values.mode);
     if (values.keySerde) {
@@ -77,7 +96,11 @@ const Form: React.FC<{ isFetching: boolean; partitions: Partition[] }> = ({
       searchParams.set('t', `${values.time.getTime()}`);
     }
 
-    setSeekTo(searchParams, partitions);
+    const selectedPartitions = values.partitions.map((partition) => {
+      return partitionMap[partition.value];
+    });
+
+    setSeekTo(searchParams, selectedPartitions);
     setSearchParams(searchParams);
     reset(values);
   };
@@ -87,13 +110,16 @@ const Form: React.FC<{ isFetching: boolean; partitions: Partition[] }> = ({
       setValue('time', value, { shouldDirty: true });
     }
   };
+
   const handleOffsetChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue('offset', e.target.value, { shouldDirty: true });
   };
+
   const handleSerdeChange =
     (type: 'keySerde' | 'valueSerde') => (option: string | number) => {
       setValue(type, String(option), { shouldDirty: true });
     };
+
   const handleRefresh: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.stopPropagation();
     e.preventDefault();
@@ -165,6 +191,24 @@ const Form: React.FC<{ isFetching: boolean; partitions: Partition[] }> = ({
           minWidth="100%"
         />
       </S.FilterRow>
+      <S.FilterRow>
+        <InputLabel>Partitions</InputLabel>
+        <Controller
+          control={control}
+          name="partitions"
+          render={({ field }) => (
+            <MultiSelect
+              options={partitions.map((p) => ({
+                label: `Partition #${p.partition.toString()}`,
+                value: p.partition,
+              }))}
+              value={field.value}
+              onChange={field.onChange}
+              labelledBy="Select partitions"
+            />
+          )}
+        />
+      </S.FilterRow>
       <S.FilterFooter>
         <Button
           buttonType="secondary"

kafka-ui-react-app/src/components/Topics/Topic/MessagesV2/FiltersBar/utils.ts

@@ -42,7 +42,7 @@ const generateSeekTo = (
   type: 'property' | 'value',
   value: PartionOffsetKey | string
 ) => {
-  // we iterating over existing partitions to avoid sending wrong partition ids to the backend
+  // we're iterating over existing partitions to avoid sending wrong partition ids to the backend
   const seekTo = partitions.map((partition) => {
     const { partition: id } = partition;
     switch (type) {
@@ -110,3 +110,31 @@ export const setSeekTo = (
 
   return searchParams;
 };
+
+export const getSelectedPartitionsOptionFromSeekToParam = (
+  params: URLSearchParams,
+  partitions: Partition[]
+) => {
+  const seekTo = params.get('seekTo');
+
+  if (seekTo) {
+    const selectedPartitionIds = seekTo
+      .split('.')
+      .map((item) => Number(item.split('-')[0]));
+
+    return partitions.reduce((acc, partition) => {
+      if (selectedPartitionIds?.includes(partition.partition)) {
+        acc.push({
+          value: partition.partition,
+          label: `Partition #${partition.partition.toString()}`,
+        });
+      }
+      return acc;
+    }, [] as Option[]);
+  }
+
+  return partitions.map(({ partition }) => ({
+    value: partition,
+    label: `Partition #${partition.toString()}`,
+  }));
+};