fix(TopicData): reset filters on partition change (#2567)

Author: Raubzeug

src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx

@@ -199,6 +199,14 @@ export function TopicData({scrollContainerRef, path, database}: TopicDataProps)
         }
     }, [handleSelectedOffsetChange, handleStartTimestampChange, topicDataFilter]);
 
+    const handlePartitionChange = React.useCallback(
+        (value: string[]) => {
+            handleSelectedPartitionChange(value[0]);
+            resetFilters();
+        },
+        [handleSelectedPartitionChange, resetFilters],
+    );
+
     const scrollToOffset = React.useCallback(
         (newOffset: number) => {
             const scrollTop = (newOffset - (baseOffset ?? 0)) * DEFAULT_TABLE_ROW_HEIGHT;
@@ -241,6 +249,7 @@ export function TopicData({scrollContainerRef, path, database}: TopicDataProps)
                 key={controlsKey}
                 columnsToSelect={columnsToSelect}
                 handleSelectedColumnsUpdate={setColumns}
+                handlePartitionChange={handlePartitionChange}
                 partitions={partitions}
                 partitionsLoading={partitionsLoading}
                 partitionsError={partitionsError}
@@ -261,6 +270,7 @@ export function TopicData({scrollContainerRef, path, database}: TopicDataProps)
         setColumns,
         startOffset,
         truncated,
+        handlePartitionChange,
     ]);
 
     const renderEmptyDataMessage = () => {

src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx

@@ -41,11 +41,13 @@ interface TopicDataControlsProps {
     endOffset?: number;
     truncatedData?: boolean;
     scrollToOffset: (offset: number) => void;
+    handlePartitionChange?: (value: string[]) => void;
 }
 
 export function TopicDataControls({
     columnsToSelect,
     handleSelectedColumnsUpdate,
+    handlePartitionChange,
 
     startOffset,
     endOffset,
@@ -55,39 +57,21 @@ export function TopicDataControls({
     scrollToOffset,
     truncatedData,
 }: TopicDataControlsProps) {
-    const {
-        selectedPartition,
-        handleSelectedPartitionChange: handleSelectedPartitionParamChange,
-        handleSelectedOffsetChange,
-        handleStartTimestampChange,
-    } = useTopicDataQueryParams();
+    const {selectedPartition} = useTopicDataQueryParams();
 
     const partitionsToSelect = partitions?.map(({partitionId}) => ({
         content: String(partitionId),
         value: String(partitionId),
     }));
 
-    const handleSelectedPartitionChange = React.useCallback(
-        (value: string[]) => {
-            handleSelectedPartitionParamChange(value[0]);
-            handleSelectedOffsetChange(undefined);
-            handleStartTimestampChange(undefined);
-        },
-        [
-            handleSelectedPartitionParamChange,
-            handleStartTimestampChange,
-            handleSelectedOffsetChange,
-        ],
-    );
-
     return (
         <React.Fragment>
             <Select
                 className={b('partition-select')}
                 label={i18n('label_partition-id')}
                 options={partitionsToSelect}
                 value={selectedPartition ? [selectedPartition] : undefined}
-                onUpdate={handleSelectedPartitionChange}
+                onUpdate={handlePartitionChange}
                 filterable={partitions && partitions.length > 5}
                 disabled={!partitions || !partitions.length}
                 errorPlacement="inside"