feat: add origin selector to top bar

dashboard/src/api/Tree.tsx

@@ -4,11 +4,14 @@ import type { Tree } from '../types/tree/Tree';
 
 import http from './api';
 
-const fetchTreeCheckoutData = async (): Promise<Tree[]> => {
-  const res = await http.get('/api/tree/');
+const fetchTreeCheckoutData = async (origin: string): Promise<Tree[]> => {
+  const res = await http.get('/api/tree/', { params: { origin } });
   return res.data;
 };
 
-export const useTreeTable = (): UseQueryResult<Tree[]> => {
-  return useQuery({ queryKey: ['treeData'], queryFn: fetchTreeCheckoutData });
+export const useTreeTable = (origin: string): UseQueryResult<Tree[]> => {
+  return useQuery({
+    queryKey: ['treeData', origin],
+    queryFn: () => fetchTreeCheckoutData(origin),
+  });
 };

dashboard/src/components/Table/TreeTable.tsx

@@ -2,13 +2,13 @@ import { useCallback, useMemo } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { useNavigate } from '@tanstack/react-router';
+import { useNavigate, useSearch } from '@tanstack/react-router';
 
 import { MessagesKey } from '@/locales/messages';
 
 import { TableRow, TableCell } from '../ui/table';
 
-import { TreeTableBody } from '../../types/tree/Tree';
+import { TreeTableBody, zOrigin } from '../../types/tree/Tree';
 
 import BaseTable from './BaseTable';
 
@@ -25,6 +25,9 @@ const treeTableColumnsLabelId: MessagesKey[] = [
 ];
 
 const TreeTableRow = (row: TreeTableBody): JSX.Element => {
+  const { origin: unsafeOrigin } = useSearch({ strict: false });
+  const origin = zOrigin.parse(unsafeOrigin);
+
   const backgroundClassName =
     'flex flex-row bg-lightGray w-fit h-fit p-1 rounded-lg';
 
@@ -36,11 +39,12 @@ const TreeTableRow = (row: TreeTableBody): JSX.Element => {
       params: { treeId: row.id },
       search: {
         tableFilter: 'all',
+        origin: origin,
         currentTreeDetailsTab: 'treeDetails.builds',
         diffFilter: {},
       },
     });
-  }, [navigate, row.id]);
+  }, [navigate, row.id, origin]);
 
   return (
     <TableRow onClick={navigateToTreeDetailPage}>

dashboard/src/components/TopBar/TopBar.tsx

@@ -1,12 +1,64 @@
 import { FormattedMessage } from 'react-intl';
 
+import { useSearch, useNavigate } from '@tanstack/react-router';
+import { useCallback, useEffect, useMemo } from 'react';
+
+import Select, { SelectItem } from '@/components/Select/Select';
+import { zOrigin, zOriginEnum } from '@/types/tree/Tree';
+
+const OriginSelect = (): JSX.Element => {
+  const { origin: unsafeOrigin } = useSearch({ strict: false });
+  const origin = zOrigin.parse(unsafeOrigin);
+
+  const navigate = useNavigate({ from: '/' });
+
+  const onValueChange = useCallback(
+    (value: string) => {
+      navigate({
+        to: '/',
+        search: previousSearch => ({ ...previousSearch, origin: value }),
+      });
+    },
+    [navigate],
+  );
+
+  const selectItems = useMemo(
+    () =>
+      zOriginEnum.options.map(option => (
+        <SelectItem key={option} value={option}>
+          {option}
+        </SelectItem>
+      )),
+    [],
+  );
+
+  useEffect(() => {
+    if (unsafeOrigin === undefined)
+      navigate({
+        search: previousSearch => ({ ...previousSearch, origin: origin }),
+      });
+  });
+
+  return (
+    <div className="flex items-center">
+      <span className="mr-4 text-base font-medium text-dimGray">
+        <FormattedMessage id="global.origin" />
+      </span>
+      <Select onValueChange={onValueChange} value={origin}>
+        {selectItems}
+      </Select>
+    </div>
+  );
+};
+
 const TopBar = (): JSX.Element => {
   return (
     <div className="fixed top-0 z-10 mx-52 flex h-20 w-full bg-white px-16">
-      <div className="flex w-full flex-row items-center justify-between">
-        <span className="text-2xl">
+      <div className="flex flex-row items-center justify-between">
+        <span className="mr-14 text-2xl">
           <FormattedMessage id="routes.treeMonitor" />
         </span>
+        <OriginSelect />
       </div>
     </div>
   );

dashboard/src/components/TreeListingPage/TreeListingPage.tsx

@@ -1,9 +1,12 @@
 import { FormattedMessage } from 'react-intl';
 
 import { MdExpandMore } from 'react-icons/md';
+import { useSearch } from '@tanstack/react-router';
 
 import { useMemo } from 'react';
 
+import { zOrigin } from '@/types/tree/Tree';
+
 import { usePagination } from '@/hooks/usePagination';
 
 import TreeTable from '../Table/TreeTable';
@@ -31,7 +34,10 @@ const FilterButton = (): JSX.Element => {
 };
 
 const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
-  const { data, error } = useTreeTable();
+  const { origin: unsafeOrigin } = useSearch({ strict: false });
+  const origin = zOrigin.parse(unsafeOrigin);
+
+  const { data, error } = useTreeTable(origin);
 
   const listItems: TreeTableBody[] = useMemo(() => {
     if (!data || error) {

dashboard/src/locales/messages/index.ts

@@ -75,6 +75,7 @@ export const messages = {
     'global.modules': 'Modules',
     'global.name': 'Name',
     'global.none': 'None',
+    'global.origin': 'Origin',
     'global.origins': 'Origins',
     'global.pass': 'Pass',
     'global.placeholderSearch': 'Search by tree, branch or tag',

dashboard/src/pages/Trees.tsx

@@ -23,7 +23,7 @@ const Trees = (): JSX.Element => {
       <div className="w-full bg-lightGray py-10">
         <TreeListingPage inputFilter={inputSearchText} />
       </div>
-      <div className="fixed top-0 z-10 mx-52 flex w-full pl-6 pr-12 pt-5">
+      <div className="fixed top-0 z-10 mx-[380px] flex w-full pl-6 pr-12 pt-5">
         <div className="flex w-2/3 items-center px-6">
           <DebounceInput
             onChange={onInputSearchTextChange}

dashboard/src/routes/~index.tsx

@@ -1,7 +1,15 @@
 import { createFileRoute } from '@tanstack/react-router';
+import { z } from 'zod';
+
+import { zOrigin } from '@/types/tree/Tree';
 
 import Trees from '../pages/Trees';
 
+export const HomeSearchSchema = z.object({
+  origin: zOrigin,
+});
+
 export const Route = createFileRoute('/')({
+  validateSearch: HomeSearchSchema,
   component: Trees,
 });

dashboard/src/routes/~tree/~$treeId/~index.tsx

@@ -2,6 +2,8 @@ import { createFileRoute } from '@tanstack/react-router';
 
 import { z } from 'zod';
 
+import { zOrigin } from '@/types/tree/Tree';
+
 import {
   zPossibleValidator,
   zTableFilterValidator,
@@ -15,6 +17,7 @@ const treeDetailsSearchSchema = z.object({
   tableFilter: zTableFilterValidator,
   diffFilter: zDiffFilter,
   testPath: z.string().optional().catch(''),
+  origin: zOrigin,
 });
 
 export const Route = createFileRoute('/tree/$treeId/')({

dashboard/src/types/tree/Tree.tsx

@@ -1,3 +1,5 @@
+import { z } from 'zod';
+
 export type TreeTableBody = {
   commit: string;
   patchsetHash: string;
@@ -28,3 +30,17 @@ export type Tree = {
     total: number;
   };
 };
+
+const origins = [
+  '0dayci',
+  'broonie',
+  'kernelci',
+  'maestro',
+  'microsoft',
+  'redhat',
+  'syzbot',
+  'tuxsuite',
+] as const;
+
+export const zOriginEnum = z.enum(origins);
+export const zOrigin = zOriginEnum.catch(origins[0]);