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}`;