+
@@ -37,6 +43,8 @@ export function ConfigRelatedChangesFilters({
+
+
{extra}
diff --git a/src/pages/config/ConfigChangesPage.tsx b/src/pages/config/ConfigChangesPage.tsx
index 32ac2fd272..15d56c5674 100644
--- a/src/pages/config/ConfigChangesPage.tsx
+++ b/src/pages/config/ConfigChangesPage.tsx
@@ -1,7 +1,10 @@
import { useGetAllConfigsChangesQuery } from "@flanksource-ui/api/query-hooks/useConfigChangesHooks";
+import { useGetConfigChangesById } from "@flanksource-ui/api/query-hooks/useGetConfigChangesByConfigChangeIdQuery";
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 { useConfigChangesViewToggleState } from "@flanksource-ui/components/Configs/Changes/ConfigChangesViewToggle";
+import { ConfigDetailChangeModal } from "@flanksource-ui/components/Configs/Changes/ConfigDetailsChanges/ConfigDetailsChanges";
import ConfigPageTabs from "@flanksource-ui/components/Configs/ConfigPageTabs";
import ConfigsTypeIcon from "@flanksource-ui/components/Configs/ConfigsTypeIcon";
import { InfoMessage } from "@flanksource-ui/components/InfoMessage";
@@ -15,7 +18,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 { Suspense, lazy, useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
function getNewestInsertedAt(changes: ConfigChange[]): string | undefined {
@@ -29,7 +32,12 @@ function getNewestInsertedAt(changes: ConfigChange[]): string | undefined {
return latest;
}
+const ConfigChangesGraph = lazy(
+ () => import("@flanksource-ui/components/Configs/Changes/ConfigChangesGraph")
+);
+
export function ConfigChangesPage() {
+ const view = useConfigChangesViewToggleState();
const [, setRefreshButtonClickedTrigger] = useAtom(
refreshButtonClickedTrigger
);
@@ -125,6 +133,17 @@ export function ConfigChangesPage() {
const totalChanges = (data?.total ?? 0) + newTailedCount;
const totalChangesPages = Math.ceil(totalChanges / parseInt(pageSize));
+ const [selectedChange, setSelectedChange] = useState
();
+
+ useEffect(() => {
+ if (view !== "Graph") setSelectedChange(undefined);
+ }, [view]);
+
+ const { data: changeDetails, isLoading: changeLoading } =
+ useGetConfigChangesById(selectedChange?.id ?? "", {
+ enabled: view === "Graph" && !!selectedChange
+ });
+
const errorMessage =
typeof error === "string"
? error
@@ -185,13 +204,40 @@ export function ConfigChangesPage() {
/>
}
/>
-
+ {view === "Graph" ? (
+ <>
+
+ Loading graph...
+