diff --git a/src/api/services/topology.ts b/src/api/services/topology.ts index f0035dea0a..ed193eec9b 100644 --- a/src/api/services/topology.ts +++ b/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( + `/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); diff --git a/src/components/TopologyDetails/index.tsx b/src/components/TopologyDetails/index.tsx index 09588a8b27..dcbc4188b5 100644 --- a/src/components/TopologyDetails/index.tsx +++ b/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: ( + + {data.name} + + ) + }); + } return items; - }, [refererId, topology]); + }, [data, refererId, topology]); if (topology == null) { return null;