feat: group tree list status

closes: 232 Co-authored-by: WilsonNet <[email protected]>
kernelci · Sep 6, 2024 · c68556e · c68556e
1 parent 985af16
commit c68556e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 6 deletions.
diff --git a/dashboard/src/components/Status/Status.tsx b/dashboard/src/components/Status/Status.tsx
@@ -1,4 +1,5 @@
 import ColoredCircle from '@/components/ColoredCircle/ColoredCircle';
+import { groupStatus } from '@/utils/status';
 
 interface ITestStatus {
   pass?: number;
@@ -73,6 +74,50 @@ export const TestStatus = ({
   );
 };
 
+export const GroupedTestStatus = ({
+  pass,
+  error,
+  miss,
+  fail,
+  done,
+  skip,
+  forceNumber = true,
+}: ITestStatus): JSX.Element => {
+  const { successCount, inconclusiveCount, failedCount } = groupStatus({
+    doneCount: done ?? 0,
+    errorCount: error ?? 0,
+    failCount: fail ?? 0,
+    missCount: miss ?? 0,
+    passCount: pass ?? 0,
+    skipCount: skip ?? 0,
+  });
+  return (
+    <div className="flex flex-row gap-1">
+      {(forceNumber || successCount) && (
+        <ColoredCircle
+          quantity={successCount ?? 0}
+          tooltipText="global.success"
+          backgroundClassName="bg-lightGreen"
+        />
+      )}
+      {(forceNumber || failedCount) && (
+        <ColoredCircle
+          quantity={failedCount}
+          tooltipText="global.failed"
+          backgroundClassName="bg-lightRed"
+        />
+      )}
+      {(forceNumber || inconclusiveCount) && (
+        <ColoredCircle
+          quantity={inconclusiveCount ?? 0}
+          tooltipText="global.inconclusive"
+          backgroundClassName="bg-mediumGray"
+        />
+      )}
+    </div>
+  );
+};
+
 export const BuildStatus = ({
   valid,
   invalid,
@@ -83,16 +128,16 @@ export const BuildStatus = ({
       <ColoredCircle
         quantity={valid ?? 0}
         backgroundClassName="bg-lightGreen"
-        tooltipText="global.valid"
+        tooltipText="global.success"
       />
       <ColoredCircle
         quantity={invalid ?? 0}
         backgroundClassName="bg-lightRed"
-        tooltipText="global.invalid"
+        tooltipText="global.failed"
       />
       <ColoredCircle
         quantity={unknown ?? 0}
-        tooltipText="global.unknown"
+        tooltipText="global.inconclusive"
         backgroundClassName="bg-lightGray"
       />
     </div>

diff --git a/dashboard/src/components/Table/TreeTable.tsx b/dashboard/src/components/Table/TreeTable.tsx
@@ -6,7 +6,7 @@ import { useNavigate, useSearch } from '@tanstack/react-router';
 
 import { MessagesKey } from '@/locales/messages';
 
-import { BuildStatus, TestStatus } from '@/components/Status/Status';
+import { BuildStatus, GroupedTestStatus } from '@/components/Status/Status';
 
 import {
   possibleBuildsTableFilter,
@@ -101,7 +101,7 @@ const TreeTableRow = (row: TreeTableBody): JSX.Element => {
         />
       </TableCell>
       <TableCell>
-        <TestStatus
+        <GroupedTestStatus
           pass={row.bootStatus.pass}
           skip={row.bootStatus.skip}
           fail={row.bootStatus.fail}
@@ -111,7 +111,7 @@ const TreeTableRow = (row: TreeTableBody): JSX.Element => {
         />
       </TableCell>
       <TableCell>
-        <TestStatus
+        <GroupedTestStatus
           pass={row.testStatus.pass}
           skip={row.testStatus.skip}
           fail={row.testStatus.fail}

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -86,6 +86,7 @@ export const messages = {
     'global.failed': 'Failed',
     'global.filters': 'Filters',
     'global.github': 'GitHub',
+    'global.inconclusive': 'Inconclusive',
     'global.info': 'Info',
     'global.invalid': 'Invalid',
     'global.loading': 'Loading...',
@@ -104,6 +105,7 @@ export const messages = {
     'global.skipped': 'Skipped',
     'global.somethingWrong': 'Sorry... something went wrong',
     'global.status': 'Status',
+    'global.success': 'Success',
     'global.successful': 'Successful',
     'global.summary': 'Summary',
     'global.timing': 'Timing',

diff --git a/dashboard/src/utils/status.ts b/dashboard/src/utils/status.ts
@@ -0,0 +1,26 @@
+type StatusCount = {
+  doneCount: number;
+  missCount: number;
+  skipCount: number;
+  errorCount: number;
+  failCount: number;
+  passCount: number;
+};
+
+type GroupedStatus = {
+  successCount: number;
+  inconclusiveCount: number;
+  failedCount: number;
+};
+
+export function groupStatus(counts: StatusCount): GroupedStatus {
+  return {
+    successCount: counts.passCount,
+    failedCount: counts.failCount,
+    inconclusiveCount:
+      counts.doneCount +
+      counts.errorCount +
+      counts.missCount +
+      counts.skipCount,
+  };
+}