chore: wip

flanksource · Sep 17, 2024 · d606221 · d606221
1 parent b160b0b
commit d606221
Show file tree

Hide file tree

Showing 12 changed files with 421 additions and 237 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -35,6 +35,7 @@ import {
   SchemaResourceType,
   schemaResourceTypes
 } from "./components/SchemaResourcePage/resourceTypes";
+import { TopologyPageWrapper } from "./components/Topology/TopologyPageWrapper";
 import { ConfigPageContextProvider } from "./context/ConfigPageContext";
 import { useFeatureFlagsContext } from "./context/FeatureFlagsContext";
 import { HealthPageContextProvider } from "./context/HealthPageContext";
@@ -266,15 +267,63 @@ export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
       />
 
       <Route path="topology" element={sidebar}>
-        <Route
-          path=":id"
-          element={withAuthorizationAccessCheck(
-            <TopologyPage />,
-            tables.database,
-            "read",
-            true
-          )}
-        />
+        <Route path=":id">
+          <Route
+            index
+            element={withAuthorizationAccessCheck(
+              <TopologyPage></TopologyPage>,
+              tables.database,
+              "read",
+              true
+            )}
+          />
+
+          <Route
+            path="changes"
+            element={withAuthorizationAccessCheck(
+              <TopologyPageWrapper catalogTab="Changes" />,
+              tables.database,
+              "read",
+              true
+            )}
+          />
+          <Route
+            path="insights"
+            element={withAuthorizationAccessCheck(
+              <TopologyPageWrapper catalogTab="Insights" />,
+              tables.database,
+              "read",
+              true
+            )}
+          />
+          <Route
+            path="relationships"
+            element={withAuthorizationAccessCheck(
+              <TopologyPageWrapper catalogTab="Relationships" />,
+              tables.database,
+              "read",
+              true
+            )}
+          />
+          <Route
+            path="playbooks"
+            element={withAuthorizationAccessCheck(
+              <TopologyPageWrapper catalogTab="Playbooks" />,
+              tables.database,
+              "read",
+              true
+            )}
+          />
+          <Route
+            path="checks"
+            element={withAuthorizationAccessCheck(
+              <TopologyPageWrapper catalogTab="Checks" />,
+              tables.database,
+              "read"
+            )}
+          />
+        </Route>
+
         <Route
           index
           element={withAuthorizationAccessCheck(

diff --git a/src/components/Configs/ConfigDetailsTabs.tsx b/src/components/Configs/ConfigDetailsTabs.tsx
@@ -14,18 +14,20 @@ import { TopologyCard } from "../Topology/TopologyCard";
 import { useConfigDetailsTabs } from "./ConfigTabsLinks";
 import ConfigSidebar from "./Sidebar/ConfigSidebar";
 
-type ConfigDetailsTabsProps = {
+export type ConfigTab =
+  | "Catalog"
+  | "Changes"
+  | "Insights"
+  | "Relationships"
+  | "Playbooks"
+  | "Checks";
+
+export type ConfigDetailsTabsProps = {
   refetch?: () => void;
   children: ReactNode;
   isLoading?: boolean;
   pageTitlePrefix: string;
-  activeTabName:
-    | "Catalog"
-    | "Changes"
-    | "Insights"
-    | "Relationships"
-    | "Playbooks"
-    | "Checks";
+  activeTabName: ConfigTab;
   className?: string;
 };
 

diff --git a/src/components/Configs/ConfigTabsLinks.tsx b/src/components/Configs/ConfigTabsLinks.tsx
@@ -3,12 +3,13 @@ import { useParams } from "react-router-dom";
 import { ConfigItemDetails } from "../../api/types/configs";
 
 export function useConfigDetailsTabs(
-  countSummary?: ConfigItemDetails["summary"]
+  countSummary?: ConfigItemDetails["summary"],
+  basePath: `/${string}` = "/catalog"
 ) {
   const { id } = useParams<{ id: string }>();
 
   return [
-    { label: "Config", key: "Catalog", path: `/catalog/${id}` },
+    { label: "Config", key: "Catalog", path: `${basePath}/${id}` },
     {
       label: (
         <>
@@ -17,7 +18,7 @@ export function useConfigDetailsTabs(
         </>
       ),
       key: "Changes",
-      path: `/catalog/${id}/changes`
+      path: `${basePath}/${id}/changes`
     },
     {
       label: (
@@ -27,7 +28,7 @@ export function useConfigDetailsTabs(
         </>
       ),
       key: "Insights",
-      path: `/catalog/${id}/insights`
+      path: `${basePath}/${id}/insights`
     },
     {
       label: (
@@ -37,7 +38,7 @@ export function useConfigDetailsTabs(
         </>
       ),
       key: "Relationships",
-      path: `/catalog/${id}/relationships`
+      path: `${basePath}/${id}/relationships`
     },
     {
       label: (
@@ -47,7 +48,7 @@ export function useConfigDetailsTabs(
         </>
       ),
       key: "Playbooks",
-      path: `/catalog/${id}/playbooks`
+      path: `${basePath}/${id}/playbooks`
     },
     {
       label: (
@@ -57,7 +58,7 @@ export function useConfigDetailsTabs(
         </>
       ),
       key: "Checks",
-      path: `/catalog/${id}/checks`
+      path: `${basePath}/${id}/checks`
     }
   ];
 }
diff --git a/src/components/Topology/MergedTopologyConfigPage.tsx b/src/components/Topology/MergedTopologyConfigPage.tsx
@@ -0,0 +1,70 @@
+import { Topology } from "@flanksource-ui/api/types/topology";
+import IncidentDetailsPageSkeletonLoader from "@flanksource-ui/ui/SkeletonLoader/IncidentDetailsPageSkeletonLoader";
+import clsx from "clsx";
+import { useGetConfigByIdQuery } from "../../api/query-hooks";
+import TabbedLinks from "../../ui/Tabs/TabbedLinks";
+import { ConfigTab } from "../Configs/ConfigDetailsTabs";
+import { useConfigDetailsTabs } from "../Configs/ConfigTabsLinks";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { TopologyCard } from "./TopologyCard";
+import { useTopologyCardWidth } from "./TopologyPopover/topologyPreference";
+
+type ConfigDetailsTabsForTopologyPageProps = {
+  configId: string;
+  topologies: Topology[];
+  activeTabName?: ConfigTab;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export function MergedTopologyConfigPage({
+  children,
+  activeTabName = "Catalog",
+  className = "p-2",
+  configId: id,
+  topologies
+}: ConfigDetailsTabsForTopologyPageProps) {
+  const { data: configItem, isLoading: isLoadingConfig } =
+    useGetConfigByIdQuery(id!);
+
+  const configTabList = useConfigDetailsTabs(configItem?.summary, "/topology");
+
+  const [topologyCardSize] = useTopologyCardWidth();
+
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {isLoadingConfig ? (
+        <IncidentDetailsPageSkeletonLoader />
+      ) : (
+        <div className={`flex h-full flex-row bg-gray-100`}>
+          <div className="flex flex-1 flex-col">
+            {topologies.length > 0 && (
+              <div className="flex max-h-[40%] w-full flex-wrap overflow-auto p-4">
+                {topologies.map((topology) => (
+                  <TopologyCard
+                    key={topology.id}
+                    topology={topology}
+                    size={topologyCardSize}
+                    menuPosition="absolute"
+                  />
+                ))}
+              </div>
+            )}
+
+            <TabbedLinks
+              activeTabName={activeTabName}
+              tabLinks={configTabList}
+              contentClassName={clsx(
+                "bg-white border border-t-0 border-gray-300 flex-1 overflow-y-auto",
+                className
+              )}
+            >
+              <ErrorBoundary>{children}</ErrorBoundary>
+            </TabbedLinks>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Topology/TopologyPage/TopologyFilterBar.tsx b/src/components/Topology/TopologyPage/TopologyFilterBar.tsx
@@ -5,8 +5,8 @@ import FormikFilterForm from "@flanksource-ui/components/Forms/FormikFilterForm"
 import { StateOption } from "@flanksource-ui/components/ReactSelectDropdown";
 import { ComponentLabelsDropdown } from "@flanksource-ui/components/Topology/Dropdowns/ComponentLabelsDropdown";
 import { ComponentTypesDropdown } from "@flanksource-ui/components/Topology/Dropdowns/ComponentTypesDropdown";
-import { allOption } from "@flanksource-ui/pages/TopologyPage";
 import { useMemo } from "react";
+import { allOption } from "../TopologyPageWrapper";
 import TopologyPopOver from "../TopologyPopover";
 import { TopologySort } from "../TopologyPopover/topologySort";