fix(config): reset live-tailed changes on query changes

Config changes live-tail mode keeps a local buffer of newly polled rows.

That buffer was merged into the table even after filters, sorting, pagination, or date params changed, so stale rows from the previous query remained visible.

Only merge live-tailed rows while Live mode is enabled, and clear the live-tail cursor and buffer when query params change.

Author: adityathebe

src/pages/config/ConfigChangesPage.tsx

@@ -15,7 +15,7 @@ import { SearchLayout } from "@flanksource-ui/ui/Layout/SearchLayout";
 import { refreshButtonClickedTrigger } from "@flanksource-ui/ui/SlidingSideBar/SlidingSideBar";
 import { Toggle } from "@flanksource-ui/ui/FormControls/Toggle";
 import { useAtom } from "jotai";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 function getNewestInsertedAt(changes: ConfigChange[]): string | undefined {
@@ -29,6 +29,16 @@ function getNewestInsertedAt(changes: ConfigChange[]): string | undefined {
   return latest;
 }
 
+function getLiveTailQueryKey(params: URLSearchParams) {
+  return Array.from(params.entries())
+    .filter(([key]) => key !== "changeId")
+    .sort(([aKey, aValue], [bKey, bValue]) =>
+      aKey === bKey ? aValue.localeCompare(bValue) : aKey.localeCompare(bKey)
+    )
+    .map(([key, value]) => `${key}=${value}`)
+    .join("&");
+}
+
 export function ConfigChangesPage() {
   const [, setRefreshButtonClickedTrigger] = useAtom(
     refreshButtonClickedTrigger
@@ -48,18 +58,20 @@ export function ConfigChangesPage() {
   const [liveTail, setLiveTail] = useState(false);
   const [tailCursor, setTailCursor] = useState<string | undefined>(undefined);
   const [tailedChanges, setTailedChanges] = useState<ConfigChange[]>([]);
+  const liveTailQueryKey = useMemo(() => getLiveTailQueryKey(params), [params]);
+  const liveTailQueryKeyRef = useRef(liveTailQueryKey);
 
-  const { data, isLoading, error, isRefetching, refetch } =
+  const { data, isLoading, error, isRefetching, refetch, isPreviousData } =
     useGetAllConfigsChangesQuery({
       keepPreviousData: true
     });
 
   // Initialize cursor from base data when live tail is turned on
   useEffect(() => {
-    if (liveTail && data?.changes?.length && !tailCursor) {
+    if (liveTail && data?.changes?.length && !tailCursor && !isPreviousData) {
       setTailCursor(getNewestInsertedAt(data.changes));
     }
-  }, [liveTail, data, tailCursor]);
+  }, [liveTail, data, tailCursor, isPreviousData]);
 
   // Reset when live tail is turned off
   useEffect(() => {
@@ -70,6 +82,20 @@ export function ConfigChangesPage() {
     }
   }, [liveTail, refetch]);
 
+  // Reset live tail state whenever filters, sorting, pagination, or date range changes.
+  useEffect(() => {
+    if (!liveTail) {
+      liveTailQueryKeyRef.current = liveTailQueryKey;
+      return;
+    }
+    if (liveTailQueryKeyRef.current === liveTailQueryKey) {
+      return;
+    }
+    liveTailQueryKeyRef.current = liveTailQueryKey;
+    setTailedChanges([]);
+    setTailCursor(undefined);
+  }, [liveTail, liveTailQueryKey]);
+
   const { data: pollData } = useGetAllConfigsChangesQuery({
     from_inserted_at: tailCursor,
     keepPreviousData: false,
@@ -120,9 +146,13 @@ export function ConfigChangesPage() {
   const newTailedCount = tailedWithConfig.filter(
     (c) => !baseIds.has(c.id)
   ).length;
-  const changes = [...tailedWithConfig, ...baseWithoutTailed];
+  const changes = liveTail
+    ? [...tailedWithConfig, ...baseWithoutTailed]
+    : baseChanges;
 
-  const totalChanges = (data?.total ?? 0) + newTailedCount;
+  const totalChanges = liveTail
+    ? (data?.total ?? 0) + newTailedCount
+    : (data?.total ?? 0);
   const totalChangesPages = Math.ceil(totalChanges / parseInt(pageSize));
 
   const errorMessage =

src/pages/config/details/ConfigDetailsChangesPage.tsx

@@ -5,7 +5,7 @@ import { ConfigRelatedChangesFilters } from "@flanksource-ui/components/Configs/
 import { ConfigDetailsTabs } from "@flanksource-ui/components/Configs/ConfigDetailsTabs";
 import { InfoMessage } from "@flanksource-ui/components/InfoMessage";
 import { Toggle } from "@flanksource-ui/ui/FormControls/Toggle";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
 
 function getNewestInsertedAt(changes: ConfigChange[]): string | undefined {
@@ -19,6 +19,16 @@ function getNewestInsertedAt(changes: ConfigChange[]): string | undefined {
   return latest;
 }
 
+function getLiveTailQueryKey(params: URLSearchParams) {
+  return Array.from(params.entries())
+    .filter(([key]) => key !== "changeId")
+    .sort(([aKey, aValue], [bKey, bValue]) =>
+      aKey === bKey ? aValue.localeCompare(bValue) : aKey.localeCompare(bKey)
+    )
+    .map(([key, value]) => `${key}=${value}`)
+    .join("&");
+}
+
 export function ConfigDetailsChangesPage() {
   const { id } = useParams();
 
@@ -32,18 +42,21 @@ export function ConfigDetailsChangesPage() {
   const [liveTail, setLiveTail] = useState(false);
   const [tailCursor, setTailCursor] = useState<string | undefined>(undefined);
   const [tailedChanges, setTailedChanges] = useState<ConfigChange[]>([]);
+  const liveTailQueryKey = useMemo(() => getLiveTailQueryKey(params), [params]);
+  const liveTailQueryKeyRef = useRef(liveTailQueryKey);
 
-  const { data, isLoading, error, refetch } = useGetConfigChangesByIDQuery({
-    keepPreviousData: true,
-    enabled: !!id
-  });
+  const { data, isLoading, error, refetch, isPreviousData } =
+    useGetConfigChangesByIDQuery({
+      keepPreviousData: true,
+      enabled: !!id
+    });
 
   // Initialize cursor from base data when live tail is turned on
   useEffect(() => {
-    if (liveTail && data?.changes?.length && !tailCursor) {
+    if (liveTail && data?.changes?.length && !tailCursor && !isPreviousData) {
       setTailCursor(getNewestInsertedAt(data.changes));
     }
-  }, [liveTail, data, tailCursor]);
+  }, [liveTail, data, tailCursor, isPreviousData]);
 
   // Reset when live tail is turned off
   useEffect(() => {
@@ -54,6 +67,20 @@ export function ConfigDetailsChangesPage() {
     }
   }, [liveTail, refetch]);
 
+  // Reset live tail state whenever filters, sorting, pagination, or date range changes.
+  useEffect(() => {
+    if (!liveTail) {
+      liveTailQueryKeyRef.current = liveTailQueryKey;
+      return;
+    }
+    if (liveTailQueryKeyRef.current === liveTailQueryKey) {
+      return;
+    }
+    liveTailQueryKeyRef.current = liveTailQueryKey;
+    setTailedChanges([]);
+    setTailCursor(undefined);
+  }, [liveTail, liveTailQueryKey]);
+
   const { data: pollData } = useGetConfigChangesByIDQuery({
     from_inserted_at: tailCursor,
     keepPreviousData: false,
@@ -102,9 +129,13 @@ export function ConfigDetailsChangesPage() {
   const newTailedCount = tailedWithConfig.filter(
     (c) => !baseIds.has(c.id)
   ).length;
-  const changes = [...tailedWithConfig, ...baseWithoutTailed];
+  const changes = liveTail
+    ? [...tailedWithConfig, ...baseWithoutTailed]
+    : baseChanges;
 
-  const totalChanges = (data?.total ?? 0) + newTailedCount;
+  const totalChanges = liveTail
+    ? (data?.total ?? 0) + newTailedCount
+    : (data?.total ?? 0);
   const totalChangesPages = Math.ceil(totalChanges / parseInt(pageSize));
 
   if (error) {