fix: group the filter values of tab tables

kernelci · Sep 10, 2024 · c27558f · c27558f
1 parent d614bcd
commit c27558f
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 89 deletions.
diff --git a/dashboard/src/components/Table/BootsTable.tsx b/dashboard/src/components/Table/BootsTable.tsx
@@ -18,6 +18,8 @@ import {
 
 import HeaderWithInfo from '@/pages/TreeDetails/Tabs/HeaderWithInfo';
 
+import { getStatusGroup } from '@/utils/status';
+
 import TableStatusFilter from './TableStatusFilter';
 
 const headerLabelOrElement: (string | ReactElement)[] = [
@@ -82,9 +84,9 @@ const BootsTable = ({
     if (filterToApply === 'all') {
       return data?.tests;
     }
-    return data?.tests.filter(
-      test => test.status.toLowerCase() === filterToApply,
-    );
+    return data?.tests.filter(test => {
+      return getStatusGroup(test.status) === filterToApply;
+    });
   }, [data?.tests, tableFilter]);
 
   const data_len = filteredData?.length || 0;
@@ -146,8 +148,7 @@ const BootsTable = ({
         return {
           ...previousParams,
           tableFilter: {
-            testsTable: previousParams.tableFilter.testsTable,
-            buildsTable: previousParams.tableFilter.buildsTable,
+            ...previousParams.tableFilter,
             bootsTable: filter,
           },
         };
@@ -170,34 +171,19 @@ const BootsTable = ({
         isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[0]),
       },
       {
-        label: intl.formatMessage({ id: 'testStatus.pass' }),
-        value: possibleTestsTableFilter[5],
-        isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[5]),
-      },
-      {
-        label: intl.formatMessage({ id: 'testStatus.fail' }),
-        value: possibleTestsTableFilter[3],
-        isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[3]),
-      },
-      {
-        label: intl.formatMessage({ id: 'testStatus.skip' }),
-        value: possibleTestsTableFilter[6],
-        isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[6]),
-      },
-      {
-        label: intl.formatMessage({ id: 'testStatus.done' }),
+        label: intl.formatMessage({ id: 'global.success' }),
         value: possibleTestsTableFilter[1],
         isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[1]),
       },
       {
-        label: intl.formatMessage({ id: 'testStatus.error' }),
+        label: intl.formatMessage({ id: 'global.failed' }),
         value: possibleTestsTableFilter[2],
         isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[2]),
       },
       {
-        label: intl.formatMessage({ id: 'testStatus.miss' }),
-        value: possibleTestsTableFilter[4],
-        isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[4]),
+        label: intl.formatMessage({ id: 'global.inconclusive' }),
+        value: possibleTestsTableFilter[3],
+        isSelected: checkIfFilterIsSelected(possibleTestsTableFilter[3]),
       },
     ],
     [intl, checkIfFilterIsSelected],

diff --git a/dashboard/src/components/Table/TestsTable.tsx b/dashboard/src/components/Table/TestsTable.tsx
@@ -16,6 +16,8 @@ import {
 
 import { Skeleton } from '@/components/Skeleton';
 
+import { getStatusGroup } from '@/utils/status';
+
 import Accordion from '../Accordion/Accordion';
 
 import TableStatusFilter from './TableStatusFilter';
@@ -66,34 +68,19 @@ const TestsTable = ({ treeId }: ITestsTable): JSX.Element => {
         isSelected: tableFilter.testsTable === possibleTestsTableFilter[0],
       },
       {
-        label: intl.formatMessage({ id: 'testStatus.pass' }),
-        value: possibleTestsTableFilter[5],
-        isSelected: tableFilter.testsTable === possibleTestsTableFilter[5],
-      },
-      {
-        label: intl.formatMessage({ id: 'testStatus.fail' }),
-        value: possibleTestsTableFilter[3],
-        isSelected: tableFilter.testsTable === possibleTestsTableFilter[3],
-      },
-      {
-        label: intl.formatMessage({ id: 'testStatus.skip' }),
-        value: possibleTestsTableFilter[6],
-        isSelected: tableFilter.testsTable === possibleTestsTableFilter[6],
-      },
-      {
-        label: intl.formatMessage({ id: 'testStatus.done' }),
+        label: intl.formatMessage({ id: 'global.success' }),
         value: possibleTestsTableFilter[1],
         isSelected: tableFilter.testsTable === possibleTestsTableFilter[1],
       },
       {
-        label: intl.formatMessage({ id: 'testStatus.error' }),
+        label: intl.formatMessage({ id: 'global.failed' }),
         value: possibleTestsTableFilter[2],
         isSelected: tableFilter.testsTable === possibleTestsTableFilter[2],
       },
       {
-        label: intl.formatMessage({ id: 'testStatus.miss' }),
-        value: possibleTestsTableFilter[4],
-        isSelected: tableFilter.testsTable === possibleTestsTableFilter[4],
+        label: intl.formatMessage({ id: 'global.inconclusive' }),
+        value: possibleTestsTableFilter[3],
+        isSelected: tableFilter.testsTable === possibleTestsTableFilter[3],
       },
     ],
     [intl, tableFilter.testsTable],
@@ -116,60 +103,40 @@ const TestsTable = ({ treeId }: ITestsTable): JSX.Element => {
     switch (tableFilter.testsTable) {
       case 'all':
         return data;
-      case 'done':
+      case 'success':
         return data
-          ?.filter(tests => tests.done_tests > 0)
+          ?.filter(tests => tests.pass_tests > 0)
           .map(test => ({
             ...test,
             individual_tests: test.individual_tests.filter(
-              t => t.status.toLowerCase() === possibleTestsTableFilter[1],
+              t => getStatusGroup(t.status) === possibleTestsTableFilter[1],
             ),
           }));
-      case 'error':
+      case 'failed':
         return data
-          ?.filter(tests => tests.done_tests > 0)
+          ?.filter(tests => tests.error_tests > 0)
           .map(test => ({
             ...test,
             individual_tests: test.individual_tests.filter(
               t => t.status.toLowerCase() === possibleTestsTableFilter[2],
             ),
           }));
-      case 'fail':
+      case 'inconclusive':
         return data
-          ?.filter(tests => tests.fail_tests > 0)
+          ?.filter(
+            tests =>
+              tests.done_tests > 0 ||
+              tests.fail_tests > 0 ||
+              tests.miss_tests > 0 ||
+              tests.skip_tests > 0 ||
+              tests.null_tests > 0,
+          )
           .map(test => ({
             ...test,
             individual_tests: test.individual_tests.filter(
               t => t.status.toLowerCase() === possibleTestsTableFilter[3],
             ),
           }));
-      case 'miss':
-        return data
-          ?.filter(tests => tests.miss_tests > 0)
-          .map(test => ({
-            ...test,
-            individual_tests: test.individual_tests.filter(
-              t => t.status.toLowerCase() === possibleTestsTableFilter[4],
-            ),
-          }));
-      case 'skip':
-        return data
-          ?.filter(tests => tests.skip_tests > 0)
-          .map(test => ({
-            ...test,
-            individual_tests: test.individual_tests.filter(
-              t => t.status.toLowerCase() === possibleTestsTableFilter[6],
-            ),
-          }));
-      case 'pass':
-        return data
-          ?.filter(tests => tests.pass_tests > 0)
-          .map(test => ({
-            ...test,
-            individual_tests: test.individual_tests.filter(
-              t => t.status.toLowerCase() === possibleTestsTableFilter[5],
-            ),
-          }));
     }
   }, [tableFilter.testsTable, data]);
 

diff --git a/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx b/dashboard/src/pages/TreeDetails/Tabs/Build/BuildTab.tsx
@@ -293,12 +293,12 @@ const BuildTab = ({ treeDetailsData }: BuildTab): JSX.Element => {
                   isSelected: selectedFilter === possibleBuildsTableFilter[1],
                 },
                 {
-                  label: intl.formatMessage({ id: 'global.errors' }),
+                  label: intl.formatMessage({ id: 'global.failed' }),
                   value: possibleBuildsTableFilter[0],
                   isSelected: selectedFilter === possibleBuildsTableFilter[0],
                 },
                 {
-                  label: intl.formatMessage({ id: 'global.unknown' }),
+                  label: intl.formatMessage({ id: 'global.inconclusive' }),
                   value: possibleBuildsTableFilter[3],
                   isSelected: selectedFilter === possibleBuildsTableFilter[3],
                 },

diff --git a/dashboard/src/types/general.ts b/dashboard/src/types/general.ts
@@ -1,3 +1,5 @@
+import { Status } from './database';
+
 export type TPathTests = {
   path_group: string;
   fail_tests: number;
@@ -13,7 +15,7 @@ export type TPathTests = {
 
 export type TIndividualTest = {
   path: string;
-  status: string;
+  status: Status;
   start_time: string;
   duration: string;
 };
diff --git a/dashboard/src/types/tree/TreeDetails.tsx b/dashboard/src/types/tree/TreeDetails.tsx
@@ -152,12 +152,9 @@ export const possibleBuildsTableFilter = [
 
 export const possibleTestsTableFilter = [
   'all',
-  'done',
-  'error',
-  'fail',
-  'miss',
-  'pass',
-  'skip',
+  'success',
+  'failed',
+  'inconclusive',
 ] as const;
 
 export const zBuildsTableFilterValidator = z
@@ -247,7 +244,7 @@ export const zTreeInformation = z
 export type TestByCommitHash = {
   id: string;
   path: string | null;
-  status: string;
+  status: Status;
   duration: string;
   startTime: string;
 };

diff --git a/dashboard/src/utils/status.ts b/dashboard/src/utils/status.ts
@@ -1,3 +1,7 @@
+import { Status } from '@/types/database';
+
+type StatusGroups = 'success' | 'failed' | 'inconclusive';
+
 type StatusCount = {
   doneCount: number;
   missCount: number;
@@ -24,3 +28,9 @@ export function groupStatus(counts: StatusCount): GroupedStatus {
       counts.skipCount,
   };
 }
+
+export const getStatusGroup = (status: Status): StatusGroups => {
+  if (status === 'PASS') return 'success';
+  if (status === 'ERROR') return 'failed';
+  return 'inconclusive';
+};