chore: live tail mode for config changes

src/api/query-hooks/useConfigChangesHooks.ts

@@ -39,9 +39,11 @@ function useConfigChangesTagsFilter(paramPrefix?: string) {
 export function useGetAllConfigsChangesQuery(
   {
     paramPrefix,
+    cursor,
     ...queryOptions
   }: UseQueryOptions<CatalogChangesSearchResponse> & {
     paramPrefix?: string;
+    cursor?: string;
   } = {
     enabled: true,
     keepPreviousData: true
@@ -73,8 +75,8 @@ export function useGetAllConfigsChangesQuery(
     include_deleted_configs: showChangesFromDeletedConfigs,
     changeType,
     severity,
-    from,
-    to,
+    from: cursor ?? from,
+    to: cursor ? undefined : to,
     configTypes,
     configType,
     sortBy: sortBy[0]?.id,
@@ -93,7 +95,12 @@ export function useGetAllConfigsChangesQuery(
 }
 
 export function useGetConfigChangesByIDQuery(
-  queryOptions: UseQueryOptions<CatalogChangesSearchResponse> = {
+  {
+    cursor,
+    ...queryOptions
+  }: UseQueryOptions<CatalogChangesSearchResponse> & {
+    cursor?: string;
+  } = {
     enabled: true,
     keepPreviousData: true
   }
@@ -141,8 +148,8 @@ export function useGetConfigChangesByIDQuery(
     include_deleted_configs: showChangesFromDeletedConfigs,
     changeType: change_type,
     severity,
-    from,
-    to,
+    from: cursor ?? from,
+    to: cursor ? undefined : to,
     configTypes,
     sortBy: sortBy[0]?.id,
     sortOrder: sortBy[0]?.desc ? "desc" : "asc",

src/api/types/configs.ts

@@ -23,6 +23,7 @@ export interface ConfigChange extends CreatedAt {
   tags?: Record<string, any>;
   first_observed?: string;
   count?: number;
+  inserted_at?: string;
 }
 
 export interface Change {

src/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters.tsx

@@ -67,11 +67,13 @@ export function FilterBadge({ filters, paramKey }: FilterBadgeProps) {
 
 type ConfigChangeFiltersProps = React.HTMLProps<HTMLDivElement> & {
   paramsToReset?: string[];
+  extra?: React.ReactNode;
 };
 
 export function ConfigChangeFilters({
   className,
   paramsToReset = [],
+  extra,
   ...props
 }: ConfigChangeFiltersProps) {
   const [params] = useSearchParams();
@@ -100,6 +102,7 @@ export function ConfigChangeFilters({
           <ConfigTagsDropdown />
           <ConfigChangesDateRangeFilter paramsToReset={paramsToReset} />
           <ShowDeletedConfigs />
+          {extra}
         </div>
       </FormikFilterForm>
       <div className="flex flex-wrap gap-2">

src/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters.tsx

@@ -13,11 +13,13 @@ import ConfigTypesTristateDropdown from "../../ConfigChangesFilters/ConfigTypesT
 type ConfigChangeFiltersProps = {
   className?: string;
   paramsToReset?: string[];
+  extra?: React.ReactNode;
 };
 
 export function ConfigRelatedChangesFilters({
   className,
-  paramsToReset = []
+  paramsToReset = [],
+  extra
 }: ConfigChangeFiltersProps) {
   const arbitraryFilters = useConfigChangesArbitraryFilters();
 
@@ -35,6 +37,7 @@ export function ConfigRelatedChangesFilters({
           <ConfigRelatedChangesToggles />
           <ConfigChangesDateRangeFilter paramsToReset={paramsToReset} />
           <ShowDeletedConfigs />
+          {extra}
         </div>
       </FormikFilterForm>
       <div className="flex flex-wrap gap-2">

src/pages/config/ConfigChangesPage.tsx

@@ -1,4 +1,5 @@
 import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
+import { ConfigChange } from "@flanksource-ui/api/types/configs";
 import { ConfigChangeTable } from "@flanksource-ui/components/Configs/Changes/ConfigChangeTable";
 import { ConfigChangeFilters } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesFilters";
 import ConfigPageTabs from "@flanksource-ui/components/Configs/ConfigPageTabs";
@@ -12,9 +13,22 @@ import {
 import { Head } from "@flanksource-ui/ui/Head";
 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 { useSearchParams } from "react-router-dom";
 
+function getNewestCreatedAt(changes: ConfigChange[]): string | undefined {
+  let latest: string | undefined;
+  for (const c of changes) {
+    const ts = typeof c.created_at === "string" ? c.created_at : undefined;
+    if (ts && (!latest || ts > latest)) {
+      latest = ts;
+    }
+  }
+  return latest;
+}
+
 export function ConfigChangesPage() {
   const [, setRefreshButtonClickedTrigger] = useAtom(
     refreshButtonClickedTrigger
@@ -31,22 +45,83 @@ export function ConfigChangesPage() {
 
   const pageSize = params.get("pageSize") ?? "200";
 
+  const [liveTail, setLiveTail] = useState(false);
+  const [tailCursor, setTailCursor] = useState<string | undefined>(undefined);
+  const [tailedChanges, setTailedChanges] = useState<ConfigChange[]>([]);
+
   const { data, isLoading, error, isRefetching, refetch } =
     useGetAllConfigsChangesQuery({
       keepPreviousData: true
     });
 
-  const changes = (data?.changes ?? []).map((changes) => ({
-    ...changes,
+  // Initialize cursor from base data when live tail is turned on
+  useEffect(() => {
+    if (liveTail && data?.changes?.length && !tailCursor) {
+      setTailCursor(getNewestCreatedAt(data.changes));
+    }
+  }, [liveTail, data, tailCursor]);
+
+  // Reset when live tail is turned off
+  useEffect(() => {
+    if (!liveTail) {
+      setTailedChanges([]);
+      setTailCursor(undefined);
+    }
+  }, [liveTail]);
+
+  const { data: pollData } = useGetAllConfigsChangesQuery({
+    cursor: tailCursor,
+    keepPreviousData: false,
+    enabled: liveTail && !!tailCursor,
+    refetchInterval: liveTail ? 5000 : false
+  });
+
+  // Accumulate new items from poll and advance cursor
+  useEffect(() => {
+    if (!pollData?.changes?.length) return;
+
+    const incoming = pollData.changes;
+    const newest = getNewestCreatedAt(incoming);
+    if (newest) {
+      setTailCursor((prev) => (!prev || newest > prev ? newest : prev));
+    }
+
+    setTailedChanges((prev) => {
+      const incomingIds = new Set(incoming.map((c) => c.id));
+      const filtered = prev.filter((c) => !incomingIds.has(c.id));
+      return [...incoming, ...filtered];
+    });
+  }, [pollData]);
+
+  const baseChanges = (data?.changes ?? []).map((change) => ({
+    ...change,
+    config: {
+      id: change.config_id!,
+      type: change.type!,
+      name: change.name!,
+      deleted_at: change.deleted_at
+    }
+  }));
+
+  const tailedWithConfig = tailedChanges.map((change) => ({
+    ...change,
     config: {
-      id: changes.config_id!,
-      type: changes.type!,
-      name: changes.name!,
-      deleted_at: changes.deleted_at
+      id: change.config_id!,
+      type: change.type!,
+      name: change.name!,
+      deleted_at: change.deleted_at
     }
   }));
 
-  const totalChanges = data?.total ?? 0;
+  const tailedIds = new Set(tailedWithConfig.map((c) => c.id));
+  const baseWithoutTailed = baseChanges.filter((c) => !tailedIds.has(c.id));
+  const baseIds = new Set(baseChanges.map((c) => c.id));
+  const newTailedCount = tailedWithConfig.filter(
+    (c) => !baseIds.has(c.id)
+  ).length;
+  const changes = [...tailedWithConfig, ...baseWithoutTailed];
+
+  const totalChanges = (data?.total ?? 0) + newTailedCount;
   const totalChangesPages = Math.ceil(totalChanges / parseInt(pageSize));
 
   const errorMessage =
@@ -99,7 +174,16 @@ export function ConfigChangesPage() {
             <InfoMessage message={errorMessage} />
           ) : (
             <>
-              <ConfigChangeFilters paramsToReset={["page"]} />
+              <ConfigChangeFilters
+                paramsToReset={["page"]}
+                extra={
+                  <Toggle
+                    label="Live"
+                    value={liveTail}
+                    onChange={setLiveTail}
+                  />
+                }
+              />
               <ConfigChangeTable
                 data={changes}
                 isLoading={isLoading}

src/pages/config/details/ConfigDetailsChangesPage.tsx

@@ -1,10 +1,24 @@
 import { useGetConfigChangesByIDQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
+import { ConfigChange } from "@flanksource-ui/api/types/configs";
 import { ConfigChangeTable } from "@flanksource-ui/components/Configs/Changes/ConfigChangeTable";
 import { ConfigRelatedChangesFilters } from "@flanksource-ui/components/Configs/Changes/ConfigsRelatedChanges/FilterBar/ConfigRelatedChangesFilters";
 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 { useParams, useSearchParams } from "react-router-dom";
 
+function getNewestCreatedAt(changes: ConfigChange[]): string | undefined {
+  let latest: string | undefined;
+  for (const c of changes) {
+    const ts = typeof c.created_at === "string" ? c.created_at : undefined;
+    if (ts && (!latest || ts > latest)) {
+      latest = ts;
+    }
+  }
+  return latest;
+}
+
 export function ConfigDetailsChangesPage() {
   const { id } = useParams();
 
@@ -15,21 +29,81 @@ export function ConfigDetailsChangesPage() {
 
   const pageSize = params.get("pageSize") ?? "200";
 
+  const [liveTail, setLiveTail] = useState(false);
+  const [tailCursor, setTailCursor] = useState<string | undefined>(undefined);
+  const [tailedChanges, setTailedChanges] = useState<ConfigChange[]>([]);
+
   const { data, isLoading, error, refetch } = useGetConfigChangesByIDQuery({
     keepPreviousData: true,
     enabled: !!id
   });
 
-  const changes = (data?.changes ?? []).map((changes) => ({
-    ...changes,
+  // Initialize cursor from base data when live tail is turned on
+  useEffect(() => {
+    if (liveTail && data?.changes?.length && !tailCursor) {
+      setTailCursor(getNewestCreatedAt(data.changes));
+    }
+  }, [liveTail, data, tailCursor]);
+
+  // Reset when live tail is turned off
+  useEffect(() => {
+    if (!liveTail) {
+      setTailedChanges([]);
+      setTailCursor(undefined);
+    }
+  }, [liveTail]);
+
+  const { data: pollData } = useGetConfigChangesByIDQuery({
+    cursor: tailCursor,
+    keepPreviousData: false,
+    enabled: liveTail && !!id && !!tailCursor,
+    refetchInterval: liveTail ? 5000 : false
+  });
+
+  // Accumulate new items from poll and advance cursor
+  useEffect(() => {
+    if (!pollData?.changes?.length) return;
+
+    const incoming = pollData.changes;
+    const newest = getNewestCreatedAt(incoming);
+    if (newest) {
+      setTailCursor((prev) => (!prev || newest > prev ? newest : prev));
+    }
+
+    setTailedChanges((prev) => {
+      const incomingIds = new Set(incoming.map((c) => c.id));
+      const filtered = prev.filter((c) => !incomingIds.has(c.id));
+      return [...incoming, ...filtered];
+    });
+  }, [pollData]);
+
+  const baseChanges = (data?.changes ?? []).map((change) => ({
+    ...change,
     config: {
-      id: changes.config_id!,
-      type: changes.type!,
-      name: changes.name!
+      id: change.config_id!,
+      type: change.type!,
+      name: change.name!
     }
   }));
 
-  const totalChanges = data?.total ?? 0;
+  const tailedWithConfig = tailedChanges.map((change) => ({
+    ...change,
+    config: {
+      id: change.config_id!,
+      type: change.type!,
+      name: change.name!
+    }
+  }));
+
+  const tailedIds = new Set(tailedWithConfig.map((c) => c.id));
+  const baseWithoutTailed = baseChanges.filter((c) => !tailedIds.has(c.id));
+  const baseIds = new Set(baseChanges.map((c) => c.id));
+  const newTailedCount = tailedWithConfig.filter(
+    (c) => !baseIds.has(c.id)
+  ).length;
+  const changes = [...tailedWithConfig, ...baseWithoutTailed];
+
+  const totalChanges = (data?.total ?? 0) + newTailedCount;
   const totalChangesPages = Math.ceil(totalChanges / parseInt(pageSize));
 
   if (error) {
@@ -50,7 +124,12 @@ export function ConfigDetailsChangesPage() {
     >
       <div className={`flex h-full flex-1 flex-col overflow-y-auto`}>
         <div className="flex w-full flex-1 flex-col items-start gap-2 overflow-y-auto">
-          <ConfigRelatedChangesFilters paramsToReset={["page"]} />
+          <ConfigRelatedChangesFilters
+            paramsToReset={["page"]}
+            extra={
+              <Toggle label="Live" value={liveTail} onChange={setLiveTail} />
+            }
+          />
           <div className="flex w-full flex-1 flex-col overflow-y-auto">
             <ConfigChangeTable
               data={changes}