fix: Order Status Bar by color

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();
       }}
     >
-      <CountBar items={statusLines} barStyle="RAG" />
+      <CountBar items={OrderByColor(statusLines)} barStyle="RAG" />
     </div>
   );
 }
@@ -84,5 +88,5 @@ export function ConfigSummaryHealthAggregateCell({
   if (!value) {
     return null;
   }
-  return <CountBar items={statusLines} barStyle="RAG" />;
+  return <CountBar items={OrderByColor(statusLines)} barStyle="RAG" />;
 }

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