feat: add duration filters for test and boots

kernelci · Sep 5, 2024 · 1ae6111 · 1ae6111
1 parent 8fdc4a2
commit 1ae6111
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 28 deletions.
diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -49,17 +49,19 @@ export const messages = {
     'buildDetails.systemMap': 'System Map',
     'buildDetails.testResults': 'Test Results',
     'filter.architectureSubtitle': 'Please select one or more Architectures:',
+    'filter.bootDuration': 'Boot duration',
     'filter.bootStatus': 'Boot Status',
     'filter.buildDuration': 'Build duration',
-    'filter.buildDurationSubtitle': 'Please select the build duration range:',
     'filter.buildStatus': 'Build Status',
     'filter.compilersSubtitle': 'Please select one or more compilers:',
     'filter.configsSubtitle': 'Please select one or more configs:',
+    'filter.durationSubtitle': 'Please select the duration range:',
     'filter.filtering': 'Filtering',
     'filter.max': 'Max',
     'filter.min': 'Min',
     'filter.refresh': 'Refresh',
     'filter.statusSubtitle': 'Please select one or more Status:',
+    'filter.testDuration': 'Test duration',
     'filter.testStatus': 'Test Status',
     'filter.treeURL': 'Tree URL',
     'global.all': 'All',

diff --git a/dashboard/src/pages/TreeDetails/TreeDetailsFilter.tsx b/dashboard/src/pages/TreeDetails/TreeDetailsFilter.tsx
@@ -22,6 +22,7 @@ import {
   TFilter,
   TFilterKeys,
   TFilterObjectsKeys,
+  TFilterNumberKeys,
   isTFilterObjectKeys,
   TreeDetails as TreeDetailsType,
 } from '@/types/tree/TreeDetails';
@@ -43,11 +44,15 @@ const filterFieldMap = {
   'treeDetails.config_name': 'configs',
   'treeDetails.architecture': 'archs',
   'treeDetails.compiler': 'compilers',
-  'treeDetails.duration_[gte]': 'duration_min',
-  'treeDetails.duration_[lte]': 'duration_max',
   'treeDetails.valid': 'buildStatus',
+  'treeDetails.duration_[gte]': 'buildDurationMin',
+  'treeDetails.duration_[lte]': 'buildDurationMax',
   'boot.status': 'bootStatus',
+  'boot.duration_[gte]': 'bootDurationMin',
+  'boot.duration_[lte]': 'bootDurationMax',
   'test.status': 'testStatus',
+  'test.duration_[gte]': 'testDurationMin',
+  'test.duration_[lte]': 'testDurationMax',
 } as const satisfies Record<TRequestFiltersValues, TFilterKeys>;
 
 export const mapFilterToReq = (
@@ -253,36 +258,68 @@ const TimeRangeSection = ({
 }: SectionsProps): JSX.Element => {
   const intl = useIntl();
 
-  const minChangeHandler = useCallback(
-    (e: React.FormEvent<HTMLInputElement>) => {
+  const timeChangeHandler = useCallback(
+    (e: React.FormEvent<HTMLInputElement>, field: TFilterNumberKeys) => {
       const value = e.currentTarget.value;
-      setDiffFilter(old => ({ ...old, duration_min: parseInt(value) }));
+      setDiffFilter(old => ({ ...old, [field]: parseInt(value) }));
     },
     [setDiffFilter],
   );
 
-  const maxChangeHandler = useCallback(
-    (e: React.FormEvent<HTMLInputElement>) => {
-      const value = e.currentTarget.value;
-      setDiffFilter(old => ({ ...old, duration_max: parseInt(value) }));
-    },
-    [setDiffFilter],
+  const checkboxSectionsProps: React.ComponentProps<
+    typeof FilterTimeRangeSection
+  >[] = useMemo(
+    () => [
+      {
+        title: intl.formatMessage({ id: 'filter.buildDuration' }),
+        subtitle: intl.formatMessage({ id: 'filter.durationSubtitle' }),
+        min: diffFilter.buildDurationMin,
+        max: diffFilter.buildDurationMax,
+        onMaxChange: e => timeChangeHandler(e, 'buildDurationMax'),
+        onMinChange: e => timeChangeHandler(e, 'buildDurationMin'),
+      },
+      {
+        title: intl.formatMessage({ id: 'filter.bootDuration' }),
+        subtitle: intl.formatMessage({ id: 'filter.durationSubtitle' }),
+        min: diffFilter.bootDurationMin,
+        max: diffFilter.bootDurationMax,
+        onMaxChange: e => timeChangeHandler(e, 'bootDurationMax'),
+        onMinChange: e => timeChangeHandler(e, 'bootDurationMin'),
+      },
+      {
+        title: intl.formatMessage({ id: 'filter.testDuration' }),
+        subtitle: intl.formatMessage({ id: 'filter.durationSubtitle' }),
+        min: diffFilter.testDurationMin,
+        max: diffFilter.testDurationMax,
+        onMaxChange: e => timeChangeHandler(e, 'testDurationMax'),
+        onMinChange: e => timeChangeHandler(e, 'testDurationMin'),
+      },
+    ],
+    [
+      diffFilter.bootDurationMax,
+      diffFilter.bootDurationMin,
+      diffFilter.buildDurationMax,
+      diffFilter.buildDurationMin,
+      diffFilter.testDurationMax,
+      diffFilter.testDurationMin,
+      intl,
+      timeChangeHandler,
+    ],
   );
 
   return (
-    <DrawerSection>
-      <FilterTimeRangeSection
-        title={intl.formatMessage({ id: 'filter.buildDuration' })}
-        subtitle={intl.formatMessage({ id: 'filter.buildDurationSubtitle' })}
-        min={diffFilter.duration_min}
-        max={diffFilter.duration_max}
-        onMaxChange={maxChangeHandler}
-        onMinChange={minChangeHandler}
-      />
-    </DrawerSection>
+    <>
+      {checkboxSectionsProps.map(props => (
+        <DrawerSection key={props.title}>
+          <FilterTimeRangeSection {...props} />
+        </DrawerSection>
+      ))}
+    </>
   );
 };
 
+const MemoizedTimeRangeSection = memo(TimeRangeSection);
+
 const TreeDetailsFilter = ({
   paramFilter,
   treeUrl,
@@ -342,7 +379,7 @@ const TreeDetailsFilter = ({
             diffFilter={diffFilter}
             filter={filter}
           />
-          <TimeRangeSection
+          <MemoizedTimeRangeSection
             setDiffFilter={setDiffFilter}
             diffFilter={diffFilter}
           />

diff --git a/dashboard/src/types/tree/TreeDetails.tsx b/dashboard/src/types/tree/TreeDetails.tsx
@@ -187,7 +187,14 @@ export const zFilterObjectsKeys = z.enum([
   'bootStatus',
   'testStatus',
 ]);
-export const zFilterNumberKeys = z.enum(['duration_min', 'duration_max']);
+export const zFilterNumberKeys = z.enum([
+  'buildDurationMin',
+  'buildDurationMax',
+  'bootDurationMin',
+  'bootDurationMax',
+  'testDurationMin',
+  'testDurationMax',
+]);
 const filterKeys = [
   ...zFilterObjectsKeys.options,
   ...zFilterNumberKeys.options,
@@ -204,8 +211,12 @@ export const zDiffFilter = z
       compilers: zFilterBoolValue,
       bootStatus: zFilterBoolValue,
       testStatus: zFilterBoolValue,
-      duration_min: zFilterNumberValue,
-      duration_max: zFilterNumberValue,
+      buildDurationMax: zFilterNumberValue,
+      buildDurationMin: zFilterNumberValue,
+      bootDurationMin: zFilterNumberValue,
+      bootDurationMax: zFilterNumberValue,
+      testDurationMin: zFilterNumberValue,
+      testDurationMax: zFilterNumberValue,
     } satisfies Record<TFilterKeys, unknown>),
     z.record(z.never()),
   ])

diff --git a/dashboard/src/utils/filters.ts b/dashboard/src/utils/filters.ts
@@ -2,8 +2,8 @@ import { TTreeDetailsFilter } from '@/types/tree/TreeDetails';
 
 // TODO: We can improve this idea and replace mapFilterToReq entirely
 const requestFilters = {
-  boot: ['boot.status'],
-  test: ['test.status'],
+  boot: ['boot.status', 'boot.duration_[gte]', 'boot.duration_[lte]'],
+  test: ['test.status', 'test.duration_[gte]', 'test.duration_[lte]'],
   treeDetails: [
     'treeDetails.config_name',
     'treeDetails.architecture',