feat(ui): add swimlane view for config changes

src/api/query-hooks/useConfigChangesHooks.ts

@@ -1,10 +1,17 @@
-import { configChangesDefaultDateFilter } from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter";
+import {
+  configChangesDefaultDateFilter,
+  configChangesGraphDefaultDateFilterParams
+} from "@flanksource-ui/components/Configs/Changes/ConfigChangesFilters/ConfigChangesDateRangeFIlter";
 import { useShowDeletedConfigs } from "@flanksource-ui/store/preference.state";
 import { useConfigChangesArbitraryFilters } from "@flanksource-ui/hooks/useConfigChangesArbitraryFilters";
 import useReactTablePaginationState from "@flanksource-ui/ui/DataTable/Hooks/useReactTablePaginationState";
 import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState";
 import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
-import { UseQueryOptions, useQuery } from "@tanstack/react-query";
+import {
+  UseQueryOptions,
+  useInfiniteQuery,
+  useQuery
+} from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useParams } from "react-router-dom";
 import { usePrefixedSearchParams } from "@flanksource-ui/hooks/usePrefixedSearchParams";
@@ -167,3 +174,66 @@ export function useGetConfigChangesByIDQuery(
     ...queryOptions
   });
 }
+
+export function useGetAllConfigsChangesInfiniteQuery({
+  pageSize = 1000,
+  maxChanges,
+  paramPrefix,
+  enabled = true
+}: {
+  pageSize?: number;
+  maxChanges?: number;
+  paramPrefix?: string;
+  enabled?: boolean;
+} = {}) {
+  const showChangesFromDeletedConfigs = useShowDeletedConfigs();
+  const { timeRangeValue } = useTimeRangeParams(
+    configChangesGraphDefaultDateFilterParams,
+    paramPrefix
+  );
+  const [params] = usePrefixedSearchParams(paramPrefix, false, {
+    sortBy: "created_at",
+    sortDirection: "desc"
+  });
+  const changeType = params.get("changeType") ?? undefined;
+  const severity = params.get("severity") ?? undefined;
+  const configType = params.get("configType") ?? undefined;
+  const from = timeRangeValue?.from ?? undefined;
+  const to = timeRangeValue?.to ?? undefined;
+  const [sortBy] = useReactTableSortState({ paramPrefix });
+  const configTypes = params.get("configTypes") ?? "all";
+  const tags = useConfigChangesTagsFilter(paramPrefix);
+  const arbitraryFilter = useConfigChangesArbitraryFilters(paramPrefix);
+
+  const filterProps = {
+    include_deleted_configs: showChangesFromDeletedConfigs,
+    changeType,
+    severity,
+    from,
+    to,
+    configTypes,
+    configType,
+    sortBy: sortBy[0]?.id,
+    sortOrder: (sortBy[0]?.desc ? "desc" : "asc") as "asc" | "desc",
+    pageSize,
+    arbitraryFilter,
+    tags
+  };
+
+  return useInfiniteQuery({
+    queryKey: ["configs", "changes", "infinite", filterProps, maxChanges],
+    queryFn: ({ pageParam = 0 }) =>
+      getConfigsChanges({ ...filterProps, pageIndex: pageParam }),
+    getNextPageParam: (_lastPage, allPages) => {
+      const total = allPages[0]?.total ?? 0;
+      const limit = maxChanges ? Math.min(total, maxChanges) : total;
+      const loaded = allPages.reduce(
+        (count, page) => count + (page.changes?.length ?? 0),
+        0
+      );
+      return loaded < limit ? allPages.length : undefined;
+    },
+    keepPreviousData: true,
+    enabled
+  });
+}

src/api/types/configs.ts

@@ -22,6 +22,7 @@ export interface ConfigChange extends CreatedAt {
   name?: string;
   created_by?: string;
   tags?: Record<string, any>;
+  path?: string;
   first_observed?: string;
   count?: number;
   inserted_at?: string;

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

@@ -1,6 +1,15 @@
+import { useConfigChangesViewToggleState } from "@flanksource-ui/components/Configs/Changes/ConfigChangesViewToggle";
 import { TimeRangePicker } from "@flanksource-ui/ui/Dates/TimeRangePicker";
+import { parseDateMath } from "@flanksource-ui/ui/Dates/TimeRangePicker/parseDateMath";
 import useTimeRangeParams from "@flanksource-ui/ui/Dates/TimeRangePicker/useTimeRangeParams";
+import dayjs from "dayjs";
+import { useCallback, useEffect, useMemo } from "react";
 import { URLSearchParamsInit } from "react-router-dom";
+import {
+  RangeOptionsCategory,
+  TimeRangeOption,
+  timeRangeOptionsToAbsolute
+} from "@flanksource-ui/ui/Dates/TimeRangePicker/rangeOptions";
 
 type Props = {
   paramsToReset?: string[];
@@ -13,21 +22,137 @@ export const configChangesDefaultDateFilter: URLSearchParamsInit = {
   range: "now-2d"
 };
 
+export const configChangesGraphDefaultDateFilter = {
+  type: "relative",
+  display: "2 hours",
+  range: "now-2h"
+} satisfies TimeRangeOption;
+
+export const configChangesGraphDefaultDateFilterParams: URLSearchParamsInit = {
+  rangeType: "relative",
+  display: configChangesGraphDefaultDateFilter.display,
+  range: configChangesGraphDefaultDateFilter.range
+};
+
+const graphRangeOptionsCategories: RangeOptionsCategory[] = [
+  {
+    name: "Relative time ranges",
+    type: "past",
+    options: [
+      { type: "relative", display: "5 minutes", range: "now-5m" },
+      { type: "relative", display: "15 minutes", range: "now-15m" },
+      { type: "relative", display: "30 minutes", range: "now-30m" },
+      { type: "relative", display: "1 hour", range: "now-1h" },
+      { type: "relative", display: "2 hours", range: "now-2h" },
+      { type: "relative", display: "3 hours", range: "now-3h" },
+      { type: "relative", display: "6 hours", range: "now-6h" },
+      { type: "relative", display: "12 hours", range: "now-12h" },
+      { type: "relative", display: "24 hours", range: "now-24h" },
+      { type: "relative", display: "2 days", range: "now-2d" },
+      { type: "relative", display: "7 days", range: "now-7d" }
+    ]
+  }
+];
+
+const MAX_GRAPH_RANGE_DAYS = 7;
+const MAX_GRAPH_RANGE_MS = MAX_GRAPH_RANGE_DAYS * 24 * 60 * 60 * 1000;
+
+const mappedRangesOverGraphLimit = new Set([
+  "Previous month",
+  "Previous year",
+  "This month",
+  "This month so far",
+  "This year",
+  "This year so far"
+]);
+
+function resolveDate(value: string, roundUp = false) {
+  if (value === "now") {
+    return dayjs();
+  }
+  if (value.startsWith("now")) {
+    return dayjs(parseDateMath(value, roundUp));
+  }
+  return dayjs(value);
+}
+
+function isRangeOverGraphLimit(range?: TimeRangeOption) {
+  if (!range) {
+    return false;
+  }
+  if (
+    range.type === "mapped" &&
+    mappedRangesOverGraphLimit.has(range.display)
+  ) {
+    return true;
+  }
+
+  const { from, to } = timeRangeOptionsToAbsolute(range);
+  const fromDate = resolveDate(from);
+  const toDate = resolveDate(to, true);
+
+  if (!fromDate.isValid() || !toDate.isValid()) {
+    return false;
+  }
+
+  return toDate.diff(fromDate) > MAX_GRAPH_RANGE_MS;
+}
+
 export default function ConfigChangesDateRangeFilter({
   paramsToReset = [],
   paramPrefix
 }: Props) {
+  const view = useConfigChangesViewToggleState();
+  const isGraphView = view === "Graph";
+  const defaultDateFilter = useMemo(
+    () =>
+      isGraphView
+        ? configChangesGraphDefaultDateFilterParams
+        : configChangesDefaultDateFilter,
+    [isGraphView]
+  );
   const { setTimeRangeParams, getTimeRangeFromUrl } = useTimeRangeParams(
-    configChangesDefaultDateFilter,
+    defaultDateFilter,
     paramPrefix
   );
 
   const timeRangeValue = getTimeRangeFromUrl();
 
+  const validateGraphTimeRange = useCallback(
+    (timeRange: TimeRangeOption) => {
+      if (isGraphView && isRangeOverGraphLimit(timeRange)) {
+        return `Graph mode supports a maximum time range of ${MAX_GRAPH_RANGE_DAYS} days.`;
+      }
+    },
+    [isGraphView]
+  );
+
+  const setValidTimeRangeParams = useCallback(
+    (timeRange: TimeRangeOption) => {
+      setTimeRangeParams(
+        validateGraphTimeRange(timeRange)
+          ? configChangesGraphDefaultDateFilter
+          : timeRange,
+        paramsToReset
+      );
+    },
+    [paramsToReset, setTimeRangeParams, validateGraphTimeRange]
+  );
+
+  useEffect(() => {
+    if (isGraphView && isRangeOverGraphLimit(timeRangeValue)) {
+      setTimeRangeParams(configChangesGraphDefaultDateFilter, paramsToReset);
+    }
+  }, [isGraphView, paramsToReset, setTimeRangeParams, timeRangeValue]);
+
   return (
     <TimeRangePicker
-      onChange={(timeRange) => setTimeRangeParams(timeRange, paramsToReset)}
+      onChange={setValidTimeRangeParams}
       value={timeRangeValue}
+      rangeOptionsCategories={
+        isGraphView ? graphRangeOptionsCategories : undefined
+      }
+      validateRange={validateGraphTimeRange}
     />
   );
 }