feat: add new hardware view using hardware-v2 endpoint

Author: gustavobtflores

dashboard/src/api/hardware.ts

@@ -3,7 +3,10 @@ import { useQuery } from '@tanstack/react-query';
 
 import { useSearch } from '@tanstack/react-router';
 
-import type { HardwareListingResponse } from '@/types/hardware';
+import type {
+  HardwareListingResponse,
+  HardwareListingResponseV2,
+} from '@/types/hardware';
 
 import { RequestData } from './commonRequest';
 
@@ -50,3 +53,47 @@ export const useHardwareListing = (
     refetchOnWindowFocus: false,
   });
 };
+
+const fetchHardwareListingV2 = async (
+  origin: string,
+  startTimestampInSeconds: number,
+  endTimestampInSeconds: number,
+): Promise<HardwareListingResponseV2> => {
+  const data = await RequestData.get<HardwareListingResponseV2>(
+    '/api/hardware-v2/',
+    {
+      params: {
+        startTimestampInSeconds,
+        endTimestampInSeconds,
+        origin,
+      },
+    },
+  );
+
+  return data;
+};
+
+export const useHardwareListingV2 = (
+  startTimestampInSeconds: number,
+  endTimestampInSeconds: number,
+): UseQueryResult<HardwareListingResponseV2> => {
+  const { origin } = useSearch({ from: '/_main/hardware-new' });
+
+  const queryKey = [
+    'hardwareListingV2',
+    startTimestampInSeconds,
+    endTimestampInSeconds,
+    origin,
+  ];
+
+  return useQuery({
+    queryKey,
+    queryFn: () =>
+      fetchHardwareListingV2(
+        origin,
+        startTimestampInSeconds,
+        endTimestampInSeconds,
+      ),
+    refetchOnWindowFocus: false,
+  });
+};

dashboard/src/components/OpenGraphTags/ListingOGTags.tsx

@@ -30,6 +30,9 @@ const ListingOGTags = ({
       case '/issues':
         descriptionId = 'issueListing.description';
         break;
+      case '/hardware-new':
+        descriptionId = 'hardwareListing.description';
+        break;
     }
     return (
       formatMessage({ id: descriptionId }) +
@@ -47,6 +50,8 @@ const ListingOGTags = ({
         return formatMessage({ id: 'hardwareListing.title' });
       case '/issues':
         return formatMessage({ id: 'issueListing.title' });
+      case '/hardware-new':
+        return formatMessage({ id: 'hardwareListing.title' });
     }
   }, [formatMessage, monitor]);
 

dashboard/src/components/SideMenu/SideMenu.tsx

@@ -77,7 +77,10 @@ type SideMenuItemProps = {
 const SideMenuItem = ({ item }: SideMenuItemProps): JSX.Element => {
   const { pathname } = useLocation();
 
-  const isCurrentPath = pathname.startsWith(item.navigateTo);
+  const isCurrentPath =
+    pathname.startsWith(item.navigateTo) &&
+    (pathname.length === item.navigateTo.length ||
+      pathname[item.navigateTo.length] === '/');
 
   return (
     <NavigationMenuItem key={item.idIntl} className="w-full">
@@ -108,6 +111,12 @@ const SideMenu = (): JSX.Element => {
       icon: <MdOutlineMonitorHeart className="size-5" />,
       selected: false,
     },
+    {
+      navigateTo: '/hardware-new',
+      idIntl: 'routes.hardwareNewMonitor',
+      icon: <MdOutlineMonitorHeart className="size-5" />,
+      selected: false,
+    },
     {
       navigateTo: '/issues',
       idIntl: 'routes.issueMonitor',

dashboard/src/components/TopBar/TopBar.tsx

@@ -17,6 +17,8 @@ const getTargetPath = (basePath: string): PossibleMonitorPath => {
   switch (basePath) {
     case 'hardware':
       return '/hardware';
+    case 'hardware-new':
+      return '/hardware-new';
     case 'issues':
       return '/issues';
     default:
@@ -47,7 +49,7 @@ const OriginSelect = ({ basePath }: { basePath: string }): JSX.Element => {
     }
 
     let pageOrigins: string[];
-    if (targetPath === '/hardware') {
+    if (targetPath === '/hardware' || targetPath === '/hardware-new') {
       pageOrigins = originData.test_origins;
     } else {
       pageOrigins = originData.checkout_origins;
@@ -93,6 +95,8 @@ const TitleName = ({ basePath }: { basePath: string }): JSX.Element => {
       return <FormattedMessage id="routes.treeMonitor" />;
     case 'hardware':
       return <FormattedMessage id="routes.hardwareMonitor" />;
+    case 'hardware-new':
+      return <FormattedMessage id="routes.hardwareNewMonitor" />;
     case 'issues':
       return <FormattedMessage id="routes.issueMonitor" />;
     case 'build':

dashboard/src/locales/messages/index.ts

@@ -263,6 +263,7 @@ export const messages = {
       "This is the same logspec data that's in the misc data section",
     'routes.buildDetails': 'Build',
     'routes.hardwareMonitor': 'Hardware',
+    'routes.hardwareNewMonitor': 'Hardware New',
     'routes.issueDetails': 'Issue',
     'routes.issueMonitor': 'Issues',
     'routes.testDetails': 'Test',

dashboard/src/pages/Hardware/Hardware.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 
 import { useIntl } from 'react-intl';
 
-import { useNavigate, useSearch } from '@tanstack/react-router';
+import { useNavigate, useSearch, Link } from '@tanstack/react-router';
 
 import HardwareListingPage from '@/pages/Hardware/HardwareListingPage';
 
@@ -48,6 +48,23 @@ const Hardware = (): JSX.Element => {
           />
         </div>
       </div>
+      <div className="rounded-md bg-yellow-100 p-3 text-sm text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">
+        This is the original version of the hardware listing, please refer to
+        the new, optimized version{' '}
+        <Link to="/hardware-new" className="underline">
+          here
+        </Link>
+        . If you find any bugs or divergences, please report to{' '}
+        <a
+          href="https://github.com/kernelci/dashboard/issues"
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          GitHub Issues
+        </a>
+        . This page will be deprecated on March 27, 2026.
+      </div>
       <div className="bg-light-gray w-full py-10">
         <HardwareListingPage inputFilter={hardwareSearch ?? ''} />
       </div>

dashboard/src/pages/HardwareNew/Hardware.tsx

@@ -0,0 +1,77 @@
+import type { ChangeEvent, JSX } from 'react';
+import { useCallback } from 'react';
+
+import { useIntl } from 'react-intl';
+
+import { useNavigate, useSearch, Link } from '@tanstack/react-router';
+
+import HardwareListingPage from '@/pages/HardwareNew/HardwareListingPage';
+
+import DebounceInput from '@/components/DebounceInput/DebounceInput';
+import { MemoizedListingOGTags } from '@/components/OpenGraphTags/ListingOGTags';
+
+const Hardware = (): JSX.Element => {
+  const { hardwareSearch } = useSearch({
+    from: '/_main/hardware-new',
+  });
+
+  const navigate = useNavigate({ from: '/hardware-new' });
+
+  const onInputSearchTextChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      navigate({
+        from: '/hardware-new',
+        search: previousSearch => ({
+          ...previousSearch,
+          hardwareSearch: e.target.value,
+        }),
+        state: s => s,
+      });
+    },
+    [navigate],
+  );
+
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <MemoizedListingOGTags monitor="/hardware-new" search={hardwareSearch} />
+      <div className="fixed top-0 z-10 mx-[380px] flex w-full pt-5 pr-12 pl-6">
+        <div className="flex w-2/3 items-center px-6">
+          <DebounceInput
+            debouncedSideEffect={onInputSearchTextChange}
+            className="w-2/3"
+            type="text"
+            startingValue={hardwareSearch}
+            placeholder={formatMessage({
+              id: 'hardware.searchPlaceholder',
+            })}
+          />
+        </div>
+      </div>
+      <div className="rounded-md bg-green-100 p-3 text-sm text-green-800 dark:bg-green-900 dark:text-green-300">
+        This is the new, optimized version of the hardware listing. If you find
+        any bugs, please report to{' '}
+        <a
+          href="https://github.com/kernelci/dashboard/issues"
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          GitHub Issues
+        </a>{' '}
+        and you can still access the old version{' '}
+        <Link to="/hardware" className="underline">
+          here
+        </Link>
+        . Please note that some historical data might be missing, but it should
+        be updated with recent data.
+      </div>
+      <div className="bg-light-gray w-full py-10">
+        <HardwareListingPage inputFilter={hardwareSearch ?? ''} />
+      </div>
+    </>
+  );
+};
+
+export default Hardware;