From 7ca0bda9dacb56b6c10162e5cde7254cd4c76afc Mon Sep 17 00:00:00 2001
From: lfjnascimento <luiz.nascimento@profusion.mobi>
Date: Tue, 10 Sep 2024 09:32:26 -0300
Subject: [PATCH 1/2] fix: use grouped status in status chart for all tree
 details tab

---
 .../pages/TreeDetails/Tabs/Build/BuildTab.tsx |  2 +-
 .../src/pages/TreeDetails/Tabs/TestCards.tsx  | 35 ++++++++-----------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx
index 2b135e6..2b1675b 100644
--- a/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx
+++ b/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx
@@ -72,7 +72,7 @@ const StatusCard = ({
             },
             {
               value: treeDetailsData?.buildsSummary.null ?? 0,
-              label: 'treeDetails.unknown',
+              label: 'global.inconclusive',
               color: Colors.Gray,
             },
           ]}
diff --git a/dashboard/src/pages/TreeDetails/Tabs/TestCards.tsx b/dashboard/src/pages/TreeDetails/Tabs/TestCards.tsx
index 59f4d43..d9074c6 100644
--- a/dashboard/src/pages/TreeDetails/Tabs/TestCards.tsx
+++ b/dashboard/src/pages/TreeDetails/Tabs/TestCards.tsx
@@ -13,6 +13,7 @@ import StatusChartMemoized, {
   Colors,
   StatusChartValues,
 } from '@/components/StatusChart/StatusCharts';
+import { groupStatus } from '@/utils/status';
 
 interface IConfigList extends Pick<TTreeTestsData, 'configStatusCounts'> {
   title: IBaseCard['title'];
@@ -177,37 +178,31 @@ interface IStatusChart extends Pick<TTreeTestsData, 'statusCounts'> {
 }
 
 const StatusChart = ({ statusCounts, title }: IStatusChart): JSX.Element => {
+  const groupedStatusCounts = groupStatus({
+    doneCount: statusCounts.DONE ?? 0,
+    errorCount: statusCounts.ERROR ?? 0,
+    failCount: statusCounts.FAIL ?? 0,
+    missCount: statusCounts.MISS ?? 0,
+    passCount: statusCounts.PASS ?? 0,
+    skipCount: statusCounts.SKIP ?? 0,
+  });
+
   const chartElements = [
     {
       label: 'bootsTab.success',
-      value: statusCounts['PASS'] ?? 0,
+      value: groupedStatusCounts.successCount,
       color: Colors.Green,
     },
     {
       label: 'global.failed',
-      value: statusCounts['FAIL'] ?? 0,
-      color: Colors.Yellow,
-    },
-    {
-      label: 'bootsTab.skip',
-      value: statusCounts['SKIP'] ?? 0,
-      color: Colors.DimGray,
+      value: groupedStatusCounts.failedCount,
+      color: Colors.Red,
     },
     {
-      label: 'global.missed',
-      value: statusCounts['MISS'] ?? 0,
+      label: 'global.inconclusive',
+      value: groupedStatusCounts.inconclusiveCount ?? 0,
       color: Colors.Gray,
     },
-    {
-      label: 'global.done',
-      value: statusCounts['DONE'] ?? 0,
-      color: Colors.Blue,
-    },
-    {
-      label: 'bootsTab.error',
-      value: statusCounts['ERROR'] ?? 0,
-      color: Colors.Red,
-    },
   ] satisfies StatusChartValues[];
 
   const filteredChartElements = chartElements.filter(chartElement => {

From d614bcd77f375b68ed5e6eee2149ae8adb390fc5 Mon Sep 17 00:00:00 2001
From: lfjnascimento <luiz.nascimento@profusion.mobi>
Date: Tue, 10 Sep 2024 09:45:05 -0300
Subject: [PATCH 2/2] fix: inconsistency in text aligment

- WrapperElement can be either 'button' or 'div', leading to an
text aligment inconsistency as the button uses center text.
---
 dashboard/src/components/StatusChart/StatusCharts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/components/StatusChart/StatusCharts.tsx b/dashboard/src/components/StatusChart/StatusCharts.tsx
index a46bad3..e8290ac 100644
--- a/dashboard/src/components/StatusChart/StatusCharts.tsx
+++ b/dashboard/src/components/StatusChart/StatusCharts.tsx
@@ -154,7 +154,7 @@ const ChartLegend = ({ chartValues, onClick }: IChartLegend): JSX.Element => {
           <WrapperElement
             onClick={(): void => onClick?.(status)}
             key={chartValue?.color}
-            className="flex flex-row"
+            className="flex flex-row text-left"
           >
             {chartValue && (
               <div className="pr-2 pt-1">