feat: add filter to TreeDetailsPage

backend/kernelCI_app/views.py

@@ -121,11 +121,17 @@ def get(self, request, commit_hash):
         ).where(git_commit_hash__eq=commit_hash)
 
         for k in request.GET.keys():
-            if k.startswith('filter_'):
-                field = k[7:]
-                if field in build_fields or field in checkout_fields:
-                    filter_list = request.GET.getlist(k)
-                    query.where({field: filter_list})
+            if not k.startswith('filter_'):
+                continue
+            field = k[7:]
+            table = None
+            if field in build_fields:
+                table = 'builds'
+            if field in checkout_fields:
+                table = 'checkouts'
+            if table:
+                filter_list = request.GET.getlist(k)
+                query.where(**{f'{table}.{field}__in': filter_list})
 
         records = query.select()
         for r in records:

dashboard/src/api/TreeDetails.tsx

@@ -1,17 +1,32 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
-import { TreeDetails } from '@/types/tree/TreeDetails';
+import { TreeDetails, TTreeDetailsFilter } from '@/types/tree/TreeDetails';
 
 import http from './api';
 
-const fetchTreeDetailData = async (treeId: string): Promise<TreeDetails> => {
-  const res = await http.get(`/api/tree/${treeId}`);
+const fetchTreeDetailData = async (
+  treeId: string,
+  filter: TTreeDetailsFilter | Record<string, never>,
+): Promise<TreeDetails> => {
+  const filterParam = new URLSearchParams();
+
+  Object.keys(filter).forEach(key => {
+    const filterList = filter[key as keyof TTreeDetailsFilter];
+    filterList?.map(value =>
+      filterParam.append(`filter_${key}`, value.toString()),
+    );
+  });
+
+  const res = await http.get(`/api/tree/${treeId}`, { params: filterParam });
   return res.data;
 };
 
-export const useTreeDetails = (treeId: string): UseQueryResult<TreeDetails> => {
+export const useTreeDetails = (
+  treeId: string,
+  filter: TTreeDetailsFilter | Record<string, never> = {},
+): UseQueryResult<TreeDetails> => {
   return useQuery({
-    queryKey: ['treeData', treeId],
-    queryFn: () => fetchTreeDetailData(treeId),
+    queryKey: ['treeData', treeId, filter],
+    queryFn: () => fetchTreeDetailData(treeId, filter),
   });
 };

dashboard/src/components/Filter/CheckboxSection.tsx

@@ -4,27 +4,29 @@ import { useCallback, useMemo } from 'react';
 
 import Checkbox from '../Checkbox/Checkbox';
 
-type TOnClickItem = (itemIdx: number, isChecked: boolean) => void;
+type TOnClickItem = (value: string, isChecked: boolean) => void;
+
+type TItems = { [key: string]: boolean };
 
 interface ICheckboxSectionItem {
-  text: string;
+  value: string;
   onClickItem: TOnClickItem;
-  idx: number;
+  isSelected: boolean;
 }
 
 interface ICheckboxList {
-  items: string[];
+  items: TItems;
   onClickItem: TOnClickItem;
 }
 
 interface ICheckboxSubsection {
-  items: string[];
+  items: TItems;
   title: string;
   onClickItem: TOnClickItem;
 }
 
-interface ICheckboxSection {
-  items?: string[];
+export interface ICheckboxSection {
+  items?: TItems;
   title: string;
   subtitle?: string;
   subsections?: ICheckboxSubsection[];
@@ -33,26 +35,32 @@ interface ICheckboxSection {
 }
 
 const CheckboxSectionItem = ({
-  text,
+  value,
   onClickItem,
-  idx,
+  isSelected,
 }: ICheckboxSectionItem): JSX.Element => {
   const handleOnToggle = useCallback(
-    (isChecked: boolean) => onClickItem(idx, isChecked),
-    [idx, onClickItem],
+    (isChecked: boolean) => onClickItem(value, isChecked),
+    [value, onClickItem],
+  );
+  return (
+    <Checkbox
+      onToggle={handleOnToggle}
+      text={value}
+      startChecked={isSelected}
+    />
   );
-  return <Checkbox onToggle={handleOnToggle} text={text} />;
 };
 
 const CheckboxList = ({ items, onClickItem }: ICheckboxList): JSX.Element => {
   const itemComponents = useMemo(
     () =>
-      items.map((text, idx) => (
+      Object.keys(items).map(key => (
         <CheckboxSectionItem
-          key={text}
-          text={text}
-          idx={idx}
+          key={key}
+          value={key}
           onClickItem={onClickItem}
+          isSelected={items[key]}
         />
       )),
     [items, onClickItem],

dashboard/src/components/Filter/Drawer.tsx

@@ -16,13 +16,13 @@ import { Separator } from '../ui/separator';
 
 interface IDrawerLink {
   treeURL: string;
-  onRefresh: () => void;
+  onRefresh?: () => void;
 }
 
 interface IFilterDrawer extends IDrawerLink {
   children?: React.ReactNode;
-  onCancel: () => void;
-  onFilter: () => void;
+  onCancel?: () => void;
+  onFilter?: () => void;
 }
 
 const DrawerHeader = (): JSX.Element => {
@@ -77,7 +77,9 @@ const Drawer = ({
   return (
     <UIDrawer>
       <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
+        <Button variant="outline">
+          <FormattedMessage id="global.filters" />
+        </Button>
       </DrawerTrigger>
 
       <DrawerContent className="flex items-center px-4 bg-lightGray max-h-screen">

dashboard/src/locales/messages/index.ts

@@ -9,6 +9,11 @@ export const messages = {
       filters: 'Filters',
       seconds: 'sec',
       successful: 'Successful',
+      architecture: 'Architecture',
+      branch: 'Branch',
+      configs: 'Configs',
+      status: 'Status',
+      timing: 'Timing',
     },
     routes: {
       deviceMonitor: 'Devices',
@@ -45,11 +50,16 @@ export const messages = {
       tree: 'Tree',
     },
     filter: {
-      min: 'Min',
-      max: 'Max',
+      architectureSubtitle: 'Please select one or more Architectures:',
+      branchSubtitle: 'Please select one or more Branches:',
+      configsSubtitle: 'Please select one or more configs:',
       filtering: 'Filtering',
-      treeURL: 'Tree URL',
+      max: 'Max',
+      min: 'Min',
       refresh: 'Refresh',
+      statusSubtitle: 'Please select one or more Status:',
+      treeURL: 'Tree URL',
+      timingSubtitle: 'Please select a range of timing:',
     },
   },
 };