From 3de008255a5bbc7eb4875751dd128c0eee9886d1 Mon Sep 17 00:00:00 2001
From: frumie1984 <frumie@flanksource.com>
Date: Sun, 15 Sep 2024 14:28:33 +0300
Subject: [PATCH] fix: Order Status Bar by color

---
 .../Cells/ConfigSummaryHealthCells.tsx         | 10 +++++++---
 src/ui/Icons/ChangeCount.tsx                   | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

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();
       }}
     >
-      <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" />;
 }
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}`;