feat: add Topology details to component details panel

Closes #1414

src/api/services/topology.ts

@@ -72,6 +72,21 @@ export const getTopology = async (
   );
 };
 
+type ComponentsTopology = {
+  id: string;
+  topologies: {
+    id: string;
+    name: string;
+  };
+};
+
+export const getComponentsTopology = async (id: string) => {
+  const res = await IncidentCommander.get<ComponentsTopology[] | null>(
+    `/components?id=eq.${id}&select=id,topologies(id,name)`
+  );
+  return res.data?.[0] ?? null;
+};
+
 export const getTopologyWithoutUnroll = async (params: IParam) => {
   params = arrangeTopologyParams(params);
   const query = stringify(params);

src/components/TopologyDetails/index.tsx

@@ -9,6 +9,9 @@ import Title from "../Title/title";
 import { FormatProperty } from "../TopologyCard/Property";
 import { TopologyLink } from "../TopologyLink";
 import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getComponentsTopology } from "../../api/services/topology";
+import { Link } from "react-router-dom";
 
 type Props = {
   topology?: Topology;
@@ -23,6 +26,13 @@ export default function TopologyDetails({
   isCollapsed = true,
   onCollapsedStateChange = () => {}
 }: Props) {
+  const { data } = useQuery({
+    queryFn: () => getComponentsTopology(topology!.id),
+    enabled: topology != null,
+    queryKey: ["components", "topology", topology?.id],
+    select: (data) => data?.topologies
+  });
+
   const items = useMemo(() => {
     if (topology == null) {
       return [];
@@ -77,8 +87,24 @@ export default function TopologyDetails({
         )
       });
     }
+
+    if (data != null) {
+      items.push({
+        label: "Topology",
+        value: (
+          <Link
+            to={{
+              pathname: `/settings/topologies/${data.id}`
+            }}
+            className="flex flex-nowrap hover:text-gray-500 my-auto"
+          >
+            {data.name}
+          </Link>
+        )
+      });
+    }
     return items;
-  }, [refererId, topology]);
+  }, [data, refererId, topology]);
 
   if (topology == null) {
     return null;