2174-Merge-topology-and-catalog-pages

package.json

@@ -40,6 +40,7 @@
     "@types/react-mentions": "^4.1.8",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/testing-library__react": "^10.2.0",
+    "allotment": "^1.20.2",
     "ansi-to-html": "^0.7.2",
     "autoprefixer": "^10.4.20",
     "axios": "^1.6.2",

src/api/query-hooks/useTopologyByIDQuery.tsx

@@ -0,0 +1,65 @@
+import { useQuery } from "@tanstack/react-query";
+import { useRef } from "react";
+import { useSearchParams } from "react-router-dom";
+import { LoadingBarRef } from "react-top-loading-bar";
+import { getTopology } from "../services/topology";
+
+export default function useTopologyByIDQuery(id?: string) {
+  const [searchParams] = useSearchParams({
+    sortBy: "status",
+    sortOrder: "desc"
+  });
+
+  const selectedLabel = searchParams.get("labels") ?? "All";
+  const team = searchParams.get("team") ?? "All";
+  const topologyType = searchParams.get("type") ?? "All";
+  const healthStatus = searchParams.get("status") ?? "All";
+  const sortBy = searchParams.get("sortBy") ?? "status";
+  const sortOrder = searchParams.get("sortOrder") ?? "desc";
+  const agentId = searchParams.get("agent_id") ?? undefined;
+  const showHiddenComponents =
+    searchParams.get("showHiddenComponents") ?? undefined;
+
+  const loadingBarRef = useRef<LoadingBarRef>(null);
+
+  return useQuery(
+    [
+      "topologies",
+      id,
+      healthStatus,
+      team,
+      selectedLabel,
+      topologyType,
+      showHiddenComponents,
+      sortBy,
+      sortOrder,
+      agentId
+    ],
+    () => {
+      loadingBarRef.current?.continuousStart();
+      const apiParams = {
+        id,
+        status: healthStatus,
+        type: topologyType,
+        team: team,
+        labels: selectedLabel,
+        sortBy,
+        sortOrder,
+        // only flatten, if topology type is set
+        ...(topologyType &&
+          topologyType.toString().toLowerCase() !== "all" && {
+            flatten: true
+          }),
+        hidden: showHiddenComponents === "no" ? false : undefined,
+        agent_id: agentId
+      };
+      return getTopology(apiParams);
+    },
+    {
+      enabled: !!id,
+      onSettled: () => {
+        loadingBarRef.current?.complete();
+      }
+    }
+  );
+}

src/api/query-hooks/useTopologyPageQuery.tsx

@@ -0,0 +1,66 @@
+import { useQuery } from "@tanstack/react-query";
+import { useRef } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
+import { LoadingBarRef } from "react-top-loading-bar";
+import { getTopology } from "../services/topology";
+
+export default function useTopologyPageQuery() {
+  const { id } = useParams();
+
+  const [searchParams] = useSearchParams({
+    sortBy: "status",
+    sortOrder: "desc"
+  });
+
+  const selectedLabel = searchParams.get("labels") ?? "All";
+  const team = searchParams.get("team") ?? "All";
+  const topologyType = searchParams.get("type") ?? "All";
+  const healthStatus = searchParams.get("status") ?? "All";
+  const sortBy = searchParams.get("sortBy") ?? "status";
+  const sortOrder = searchParams.get("sortOrder") ?? "desc";
+  const agentId = searchParams.get("agent_id") ?? undefined;
+  const showHiddenComponents =
+    searchParams.get("showHiddenComponents") ?? undefined;
+
+  const loadingBarRef = useRef<LoadingBarRef>(null);
+
+  return useQuery(
+    [
+      "topologies",
+      id,
+      healthStatus,
+      team,
+      selectedLabel,
+      topologyType,
+      showHiddenComponents,
+      sortBy,
+      sortOrder,
+      agentId
+    ],
+    () => {
+      loadingBarRef.current?.continuousStart();
+      const apiParams = {
+        id,
+        status: healthStatus,
+        type: topologyType,
+        team: team,
+        labels: selectedLabel,
+        sortBy,
+        sortOrder,
+        // only flatten, if topology type is set
+        ...(topologyType &&
+          topologyType.toString().toLowerCase() !== "all" && {
+            flatten: true
+          }),
+        hidden: showHiddenComponents === "no" ? false : undefined,
+        agent_id: agentId
+      };
+      return getTopology(apiParams);
+    },
+    {
+      onSettled: () => {
+        loadingBarRef.current?.complete();
+      }
+    }
+  );
+}

src/api/services/configs.ts

@@ -11,6 +11,7 @@ import {
   ConfigChange,
   ConfigHealthCheckView,
   ConfigItem,
+  ConfigItemDetails,
   ConfigSummary,
   ConfigTypeRelationships
 } from "../types/configs";
@@ -144,7 +145,7 @@ export const getAllChanges = (
 };
 
 export const getConfig = (id: string) =>
-  resolvePostGrestRequestWithPagination<ConfigItem[]>(
+  resolvePostGrestRequestWithPagination<ConfigItemDetails[]>(
     ConfigDB.get(`/config_detail?id=eq.${id}&select=*,config_scrapers(id,name)`)
   );
 

src/api/types/configs.ts

@@ -1,5 +1,6 @@
 import { Agent, Avatar, CreatedAt, Timestamped } from "../traits";
 import { HealthCheckSummary } from "./health";
+import { Topology } from "./topology";
 
 export interface ConfigChange extends CreatedAt {
   id: string;
@@ -69,13 +70,6 @@ export interface ConfigItem extends Timestamped, Avatar, Agent, Costs {
     id: string;
     name: string;
   };
-  summary?: {
-    relationships?: number;
-    analysis?: number;
-    changes?: number;
-    playbook_runs?: number;
-    checks?: number;
-  };
   properties?: {
     icon: string;
     name: string;
@@ -87,6 +81,17 @@ export interface ConfigItem extends Timestamped, Avatar, Agent, Costs {
   last_scraped_time?: string;
 }
 
+export interface ConfigItemDetails extends ConfigItem {
+  summary?: {
+    relationships?: number;
+    analysis?: number;
+    changes?: number;
+    playbook_runs?: number;
+    checks?: number;
+  };
+  components?: Topology[];
+}
+
 export interface ConfigItemGraphData extends ConfigItem {
   expanded?: boolean;
   expandable?: boolean;

src/api/types/topology.ts

@@ -1,5 +1,6 @@
 import { Agent, Namespaced, Timestamped } from "../traits";
 import { CostsData, Severity, ValueType } from "./common";
+import { ConfigItem } from "./configs";
 import { HealthCheckSummary } from "./health";
 import { IncidentType } from "./incident";
 import { User } from "./users";
@@ -68,6 +69,8 @@ export interface Topology extends Component, CostsData, Agent {
   children?: string[];
   is_leaf?: boolean;
   description?: string;
+  config_id?: string;
+  configs?: Pick<ConfigItem, "name" | "id" | "type">[];
 }
 
 export type ComponentTeamItem = {

src/components/Configs/ConfigComponents.tsx

@@ -0,0 +1,26 @@
+import { Topology } from "@flanksource-ui/api/types/topology";
+import { TopologyCard } from "../Topology/TopologyCard";
+import { useTopologyCardWidth } from "../Topology/TopologyPopover/topologyPreference";
+
+type ConfigComponentsProps = {
+  topology?: Topology;
+};
+
+export default function ConfigComponents({ topology }: ConfigComponentsProps) {
+  const [topologyCardSize] = useTopologyCardWidth();
+
+  return (
+    <div className="flex w-full flex-1 overflow-y-auto">
+      <div className="flex w-full flex-wrap p-4">
+        {topology?.components?.map((component) => (
+          <TopologyCard
+            key={component.id}
+            topology={component}
+            size={topologyCardSize}
+            menuPosition="absolute"
+          />
+        ))}
+      </div>
+    </div>
+  );
+}