diff --git a/src/components/StatusLine/StatusLine.tsx b/src/components/StatusLine/StatusLine.tsx index 618d9ede9..427a0c60d 100644 --- a/src/components/StatusLine/StatusLine.tsx +++ b/src/components/StatusLine/StatusLine.tsx @@ -18,7 +18,10 @@ export type StatusLineData = { statuses: StatusInfo[]; }; -export type StatusLineProps = React.HTMLProps & StatusLineData; +export type StatusLineProps = React.HTMLProps & + StatusLineData & { + hideName?: boolean; + }; interface RenderIconProps { icon: string | React.ReactNode; @@ -73,6 +76,7 @@ export function StatusLine({ url, statuses, className = "py-1", + hideName = false, ...rest }: StatusLineProps) { return ( @@ -80,24 +84,28 @@ export function StatusLine({ className={clsx("flex flex-row items-center space-x-1", className)} {...rest} > - {icon && } - {url && ( - - {label} - - )} - {!url && ( - - {label} - + {!hideName && ( + <> + {icon && } + {url && ( + + {label} + + )} + {!url && ( + + {label} + + )} + )}
{statuses.map((status, index) => { diff --git a/src/components/Topology/TopologyCard/TopologCardStatuses.tsx b/src/components/Topology/TopologyCard/TopologCardStatuses.tsx index 4c2664aac..eadbf4404 100644 --- a/src/components/Topology/TopologyCard/TopologCardStatuses.tsx +++ b/src/components/Topology/TopologyCard/TopologCardStatuses.tsx @@ -169,7 +169,7 @@ function getTopologyHealthStatuses(topology: Topology) { return data; } -function getTopologyHealthSummary( +export function getTopologyHealthSummary( topology: Topology, viewType: "individual_level" | "children_level" ) { @@ -277,15 +277,13 @@ export default function TopologyCardStatuses({ return []; } - const healthSummary = - getTopologyHealthSummary(topology, "individual_level") ?? []; const healthChecks = getTopologyHealthStatuses(topology); const insights = insightStatuses(topology); const incidents = incidentsStatuses(topology) ?? []; const components = topologiesHealthSummaries(topology) ?? []; return ( - [healthSummary, healthChecks, insights, ...incidents, ...components] + [healthChecks, insights, ...incidents, ...components] .filter((status) => status) // remove empty statuses .filter((status) => status!.statuses.length > 0) diff --git a/src/components/Topology/TopologyCard/TopologyCard.tsx b/src/components/Topology/TopologyCard/TopologyCard.tsx index 1ea20f68a..6083eda5d 100644 --- a/src/components/Topology/TopologyCard/TopologyCard.tsx +++ b/src/components/Topology/TopologyCard/TopologyCard.tsx @@ -13,6 +13,7 @@ import { CardMetrics } from "./CardMetrics"; import TopologyCardStatuses from "./TopologCardStatuses"; import TopologyCardPropertiesColumn from "./TopologyCardPropertiesColumn"; import { TopologyDropdownMenu } from "./TopologyDropdownMenu"; +import TopologyItemHealthSummary from "./TopologyItemHealthSummary"; export enum ComponentHealth { unhealthy = "unhealthy", @@ -214,6 +215,7 @@ export function TopologyCard({ {topology.status_reason}
)} + diff --git a/src/components/Topology/TopologyCard/TopologyItemHealthSummary.tsx b/src/components/Topology/TopologyCard/TopologyItemHealthSummary.tsx new file mode 100644 index 000000000..71bcb015f --- /dev/null +++ b/src/components/Topology/TopologyCard/TopologyItemHealthSummary.tsx @@ -0,0 +1,26 @@ +import { Topology } from "@flanksource-ui/api/types/topology"; +import { StatusLine } from "@flanksource-ui/components/StatusLine/StatusLine"; +import { useMemo } from "react"; +import { getTopologyHealthSummary } from "./TopologCardStatuses"; + +type TopologyItemHealthSummaryProps = { + topology: Topology; +}; + +export default function TopologyItemHealthSummary({ + topology +}: TopologyItemHealthSummaryProps) { + const statusLines = useMemo(() => { + return getTopologyHealthSummary(topology, "individual_level"); + }, [topology]); + + if (!statusLines || statusLines.statuses.length === 0) { + return null; + } + + return ( +
+ +
+ ); +}