diff --git a/src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx b/src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx index 65a376e91..666671db0 100644 --- a/src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx +++ b/src/components/Configs/ConfigSummary/Cells/ConfigSummaryHealthCells.tsx @@ -4,7 +4,11 @@ import { CellContext } from "@tanstack/react-table"; import { useMemo } from "react"; import { useSearchParams } from "react-router-dom"; import { getConfigStatusColor } from "../ConfigSummaryList"; -import { Count, CountBar } from "@flanksource-ui/ui/Icons/ChangeCount"; +import { + Count, + CountBar, + OrderByColor +} from "@flanksource-ui/ui/Icons/ChangeCount"; export function ConfigSummaryHealthCell({ getValue, @@ -48,7 +52,7 @@ export function ConfigSummaryHealthCell({ e.stopPropagation(); }} > - + ); } @@ -84,5 +88,5 @@ export function ConfigSummaryHealthAggregateCell({ if (!value) { return null; } - return ; + return ; } diff --git a/src/ui/Icons/ChangeCount.tsx b/src/ui/Icons/ChangeCount.tsx index fe9612622..68421c1cc 100644 --- a/src/ui/Icons/ChangeCount.tsx +++ b/src/ui/Icons/ChangeCount.tsx @@ -19,6 +19,24 @@ export default function ChangeCountIcon({ count }: { count: number }) { ); } +export function OrderByColor(items: Count[]) { + const colorOrder = ["green", "red", "orange", "gray"]; + + return items.sort((a, b) => { + const colorA = a.color?.toLowerCase() || ""; + const colorB = b.color?.toLowerCase() || ""; + + const indexA = colorOrder.findIndex((color) => colorA.includes(color)); + const indexB = colorOrder.findIndex((color) => colorB.includes(color)); + + if (indexA === -1 && indexB === -1) return 0; + if (indexA === -1) return 1; + if (indexB === -1) return -1; + + return indexA - indexB; + }); +} + function num(count: number | string) { let val = `${count}`;