feat: replace the /hardware with new denormalized view and remove /hardware-new (#1712)

Author: gustavobtflores

dashboard/src/api/hardware.ts

@@ -33,7 +33,7 @@ export const useHardwareListing = (
   startTimestampInSeconds: number,
   endTimestampInSeconds: number,
 ): UseQueryResult<HardwareListingResponse> => {
-  const { origin } = useSearch({ from: '/_main/hardware' });
+  const { origin } = useSearch({ from: '/_main/hardware/v1' });
 
   const queryKey = [
     'hardwareListing',
@@ -77,7 +77,7 @@ export const useHardwareListingV2 = (
   startTimestampInSeconds: number,
   endTimestampInSeconds: number,
 ): UseQueryResult<HardwareListingResponseV2> => {
-  const { origin } = useSearch({ from: '/_main/hardware-new' });
+  const { origin } = useSearch({ from: '/_main/hardware' });
 
   const queryKey = [
     'hardwareListingV2',

dashboard/src/components/SideMenu/menuItems.tsx

@@ -45,12 +45,6 @@ export const routeItems: RouteMenuItems[] = [
     icon: MonitorHeartIcon,
     selected: false,
   },
-  {
-    navigateTo: '/hardware-new',
-    idIntl: 'routes.hardwareNewMonitor',
-    icon: MonitorHeartIcon,
-    selected: false,
-  },
   {
     navigateTo: '/issues',
     idIntl: 'routes.issueMonitor',

dashboard/src/components/TopBar/TopBar.tsx

@@ -94,9 +94,8 @@ const TitleName = ({ basePath }: { basePath: string }): JSX.Element => {
     case 'tree':
       return <FormattedMessage id="routes.treeMonitor" />;
     case 'hardware':
+    case 'hardware/v1':
       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

@@ -207,6 +207,7 @@ export const messages = {
     'hardwareDetails.selectTreeTitle': 'No Tree Selected',
     'hardwareDetails.timeFrame':
       'Results from {startDate} and {startTime} to {endDate} {endTime}',
+    'hardwareListing.bannerTitle': 'Hardware Listing',
     'hardwareListing.description': 'List of hardware from kernel tests',
     'hardwareListing.notFound': 'No hardware information available',
     'hardwareListing.title': 'Hardware Listing ― KCI Dashboard',

dashboard/src/pages/Hardware/Hardware.tsx

@@ -3,24 +3,25 @@ import { useCallback } from 'react';
 
 import { useIntl } from 'react-intl';
 
-import { useNavigate, useSearch, Link } from '@tanstack/react-router';
+import { useNavigate, useSearch } from '@tanstack/react-router';
 
 import HardwareListingPage from '@/pages/Hardware/HardwareListingPage';
 
 import DebounceInput from '@/components/DebounceInput/DebounceInput';
 import { MemoizedListingOGTags } from '@/components/OpenGraphTags/ListingOGTags';
+import { OldPageBanner } from '@/components/Banner/PageBanner';
 
 const Hardware = (): JSX.Element => {
   const { hardwareSearch } = useSearch({
-    from: '/_main/hardware',
+    from: '/_main/hardware/v1',
   });
 
-  const navigate = useNavigate({ from: '/hardware' });
+  const navigate = useNavigate({ from: '/hardware/v1' });
 
   const onInputSearchTextChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       navigate({
-        from: '/hardware',
+        from: '/hardware/v1',
         search: previousSearch => ({
           ...previousSearch,
           hardwareSearch: e.target.value,
@@ -48,23 +49,10 @@ 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>
+      <OldPageBanner
+        pageNameId="hardwareListing.bannerTitle"
+        pageRoute="/hardware"
+      />
       <div className="bg-light-gray w-full py-10">
         <HardwareListingPage inputFilter={hardwareSearch ?? ''} />
       </div>

dashboard/src/pages/Hardware/HardwareListingPage.tsx

@@ -47,7 +47,7 @@ const useHardwareListingTime = (): {
   startTimestampInSeconds: number;
   endTimestampInSeconds: number;
 } => {
-  const { intervalInDays } = useSearch({ from: '/_main/hardware' });
+  const { intervalInDays } = useSearch({ from: '/_main/hardware/v1' });
   const [timestamps, setTimeStamps] = useState(() => {
     return calculateTimeStamp(intervalInDays);
   });
@@ -66,7 +66,7 @@ const HardwareListingPage = ({
 }: HardwareListingPageProps): JSX.Element => {
   const { startTimestampInSeconds, endTimestampInSeconds } =
     useHardwareListingTime();
-  const { origin } = useSearch({ from: '/_main/hardware' });
+  const { origin } = useSearch({ from: '/_main/hardware/v1' });
 
   const { data, error, status, isLoading } = useHardwareListing(
     startTimestampInSeconds,
@@ -151,6 +151,7 @@ const HardwareListingPage = ({
           queryData={data}
           error={error}
           isLoading={isLoading}
+          navigateFrom="/hardware/v1"
         />
       </div>
       {kcidevComponent}

…ages/HardwareNew/HardwareListingPage.tsx …pages/Hardware/HardwareListingPageV2.tsxdashboard/src/pages/HardwareNew/HardwareListingPage.tsx renamed to dashboard/src/pages/Hardware/HardwareListingPageV2.tsx dashboard/src/pages/HardwareNew/HardwareListingPage.tsx renamed to dashboard/src/pages/Hardware/HardwareListingPageV2.tsx

@@ -5,24 +5,24 @@ import { useSearch } from '@tanstack/react-router';
 
 import { Toaster } from '@/components/ui/toaster';
 
-import type { HardwareItemV2 } from '@/types/hardware';
+import type { HardwareItem } from '@/types/hardware';
 
 import { useHardwareListingV2 } from '@/api/hardware';
 
 import { dateObjectToTimestampInSeconds, daysToSeconds } from '@/utils/date';
 
+import type { RequiredStatusCount, StatusCount } from '@/types/general';
+
 import {
   matchesRegexOrIncludes,
   includesInAnStringOrStringArray,
 } from '@/lib/string';
 
 import { MemoizedKcidevFooter } from '@/components/Footer/KcidevFooter';
 
-import type { RequiredStatusCount, StatusCountV2 } from '@/types/general';
-
 import { HardwareTable } from './HardwareTable';
 
-interface HardwareListingPageProps {
+interface HardwareListingPageV2Props {
   inputFilter: string;
 }
 
@@ -47,7 +47,7 @@ const useHardwareListingTime = (): {
   startTimestampInSeconds: number;
   endTimestampInSeconds: number;
 } => {
-  const { intervalInDays } = useSearch({ from: '/_main/hardware-new' });
+  const { intervalInDays } = useSearch({ from: '/_main/hardware' });
   const [timestamps, setTimeStamps] = useState(() => {
     return calculateTimeStamp(intervalInDays);
   });
@@ -61,19 +61,19 @@ const useHardwareListingTime = (): {
   return { startTimestampInSeconds, endTimestampInSeconds };
 };
 
-const HardwareListingPage = ({
+const HardwareListingPageV2 = ({
   inputFilter,
-}: HardwareListingPageProps): JSX.Element => {
+}: HardwareListingPageV2Props): JSX.Element => {
   const { startTimestampInSeconds, endTimestampInSeconds } =
     useHardwareListingTime();
-  const { origin } = useSearch({ from: '/_main/hardware-new' });
+  const { origin } = useSearch({ from: '/_main/hardware' });
 
   const { data, error, status, isLoading } = useHardwareListingV2(
     startTimestampInSeconds,
     endTimestampInSeconds,
   );
 
-  const listItems: HardwareItemV2[] = useMemo(() => {
+  const listItems: HardwareItem[] = useMemo(() => {
     if (!data || error) {
       return [];
     }
@@ -87,41 +87,35 @@ const HardwareListingPage = ({
           includesInAnStringOrStringArray(hardware.hardware ?? '', inputFilter)
         );
       })
-      .map((hardware): HardwareItemV2 => {
+      .map((hardware): HardwareItem => {
         const buildCount: RequiredStatusCount = {
-          PASS: hardware.build_status_summary?.PASS ?? 0,
-          FAIL: hardware.build_status_summary?.FAIL ?? 0,
+          PASS: hardware.build_status_summary?.PASS,
+          FAIL: hardware.build_status_summary?.FAIL,
           NULL: 0,
           ERROR: 0,
           MISS: 0,
           DONE: 0,
-          // TODO: Remove this workaround after migrating to the new hardware listing endpoint
-          // and modify status count to use INCONCLUSIVE field
-          SKIP: hardware.build_status_summary?.INCONCLUSIVE ?? 0,
+          SKIP: hardware.build_status_summary?.INCONCLUSIVE,
         };
 
-        const testStatusCount: StatusCountV2 = {
-          PASS: hardware.test_status_summary?.PASS,
-          FAIL: hardware.test_status_summary?.FAIL,
-          NULL: 0,
+        const testStatusCount: StatusCount = {
+          DONE: 0,
           ERROR: 0,
+          FAIL: hardware.test_status_summary.FAIL,
           MISS: 0,
-          DONE: 0,
-          // TODO: Remove this workaround after migrating to the new hardware listing endpoint
-          // and modify status count to use INCONCLUSIVE field
-          SKIP: hardware.test_status_summary?.INCONCLUSIVE,
+          PASS: hardware.test_status_summary.PASS,
+          SKIP: 0,
+          NULL: hardware.test_status_summary.INCONCLUSIVE,
         };
 
-        const bootStatusCount: StatusCountV2 = {
-          PASS: hardware.boot_status_summary?.PASS,
-          FAIL: hardware.boot_status_summary?.FAIL,
-          NULL: 0,
+        const bootStatusCount: StatusCount = {
+          DONE: 0,
           ERROR: 0,
+          FAIL: hardware.boot_status_summary.FAIL,
           MISS: 0,
-          DONE: 0,
-          // TODO: Remove this workaround after migrating to the new hardware listing endpoint
-          // and modify status count to use INCONCLUSIVE field
-          SKIP: hardware.boot_status_summary?.INCONCLUSIVE,
+          PASS: hardware.boot_status_summary.PASS,
+          SKIP: 0,
+          NULL: hardware.boot_status_summary.INCONCLUSIVE,
         };
 
         return {
@@ -157,11 +151,12 @@ const HardwareListingPage = ({
           queryData={data}
           error={error}
           isLoading={isLoading}
+          navigateFrom="/hardware"
         />
       </div>
       {kcidevComponent}
     </>
   );
 };
 
-export default HardwareListingPage;
+export default HardwareListingPageV2;