fix: show hardware/tree table even when no data is available (#1637)

gustavobtflores · web-flow · commit 1b6daa376aac · 2025-12-01T17:49:42.000Z
diff --git a/dashboard/src/components/IssueTable/IssueTable.tsx b/dashboard/src/components/IssueTable/IssueTable.tsx
@@ -20,6 +20,7 @@ import type { LinkProps } from '@tanstack/react-router';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 
 import { useCallback, useMemo, useState } from 'react';
+import type { UseQueryResult } from '@tanstack/react-query';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -46,6 +47,9 @@ import { TooltipDateTime } from '@/components/TooltipDateTime';
 import { shouldShowRelativeDate } from '@/lib/date';
 import { RedirectFrom } from '@/types/general';
 
+import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
+import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
+
 const getLinkProps = (
   row: Row<IssueListingTableItem>,
   cell: Cell<IssueListingTableItem, unknown>,
@@ -178,9 +182,19 @@ const columns: ColumnDef<IssueListingTableItem>[] = [
 
 interface IIssueTable {
   issueListing?: IssueListingResponse;
+  status?: UseQueryResult['status'];
+  queryData?: unknown;
+  error?: Error | null;
+  isLoading?: boolean;
 }
 
-export const IssueTable = ({ issueListing }: IIssueTable): JSX.Element => {
+export const IssueTable = ({
+  issueListing,
+  status,
+  queryData,
+  error,
+  isLoading,
+}: IIssueTable): JSX.Element => {
   const { listingSize } = useSearch({ from: '/_main/issues' });
   const navigate = useNavigate({ from: '/issues' });
 
@@ -261,7 +275,7 @@ export const IssueTable = ({ issueListing }: IIssueTable): JSX.Element => {
     ) : (
       <TableRow>
         <TableCell colSpan={columns.length} className="h-24 text-center">
-          <FormattedMessage id="global.noResults" />
+          <FormattedMessage id="issueListing.notFound" />
         </TableCell>
       </TableRow>
     );
@@ -279,9 +293,22 @@ export const IssueTable = ({ issueListing }: IIssueTable): JSX.Element => {
 
   return (
     <>
-      <BaseTable headerComponents={tableHeaders}>
-        <TableBody>{tableBody}</TableBody>
-      </BaseTable>
+      <QuerySwitcher
+        status={status}
+        data={queryData}
+        error={error}
+        customError={
+          <MemoizedSectionError
+            isLoading={isLoading}
+            errorMessage={error?.message}
+            emptyLabel="issueListing.notFound"
+          />
+        }
+      >
+        <BaseTable headerComponents={tableHeaders}>
+          <TableBody>{tableBody}</TableBody>
+        </BaseTable>
+      </QuerySwitcher>
       <PaginationInfo
         table={table}
         intlLabel="global.issues"
diff --git a/dashboard/src/components/QuerySwitcher/QuerySwitcher.tsx b/dashboard/src/components/QuerySwitcher/QuerySwitcher.tsx
@@ -3,6 +3,8 @@ import { Fragment, type ReactNode, type JSX } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
+import { HttpStatusCode } from 'axios';
+
 import { cn } from '@/lib/utils';
 
 import { Skeleton } from '@/components/ui/skeleton';
@@ -17,6 +19,7 @@ type QuerySwitcherProps = {
   data?: unknown;
   customError?: ReactNode;
   customEmptyDataComponent?: JSX.Element;
+  error?: Error | null;
 };
 
 const QuerySwitcher = ({
@@ -26,6 +29,7 @@ const QuerySwitcher = ({
   data,
   customError,
   customEmptyDataComponent,
+  error,
 }: QuerySwitcherProps): JSX.Element => {
   if (!status) {
     return customEmptyDataComponent ?? <Fragment />;
@@ -40,7 +44,20 @@ const QuerySwitcher = ({
           <FormattedMessage id="global.loading" />
         </Skeleton>
       );
-    case 'error':
+    case 'error': {
+      let errorStatusCode: number | undefined;
+      const errorMessage = error?.message;
+      if (errorMessage) {
+        const splittedError = errorMessage.split(':');
+        if (splittedError.length > 1) {
+          errorStatusCode = parseInt(splittedError[0]);
+        }
+      }
+
+      if (errorStatusCode === HttpStatusCode.Ok) {
+        return <>{children}</>;
+      }
+
       return (
         <>
           {customError ?? (
@@ -50,6 +67,7 @@ const QuerySwitcher = ({
           )}
         </>
       );
+    }
   }
 
   if (!data) {
diff --git a/dashboard/src/components/TreeListingPage/TreeListingPage.tsx b/dashboard/src/components/TreeListingPage/TreeListingPage.tsx
@@ -8,12 +8,8 @@ import type {
 
 import { useTreeTable, useTreeTableFast } from '@/api/tree';
 
-import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
-
 import { Toaster } from '@/components/ui/toaster';
 
-import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
-
 import { matchesRegexOrIncludes } from '@/lib/string';
 
 import { MemoizedKcidevFooter } from '@/components/Footer/KcidevFooter';
@@ -38,7 +34,7 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
     error: fastError,
     isLoading: isFastLoading,
   } = useTreeTableFast();
-  const { data, error, isLoading } = useTreeTable({
+  const { data, error, status, isLoading } = useTreeTable({
     enabled: fastStatus === 'success' && !!fastData,
   });
 
@@ -108,28 +104,30 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
     [],
   );
 
-  if (error) {
-    return <div>Error: {error.message}</div>;
-  }
+  const hasPartialFailure = fastStatus === 'success' && status === 'error';
+  // Only show error in QuerySwitcher if the first or both queries fail
+  const actualError = hasPartialFailure ? null : fastError || error;
+  const actualStatus = hasPartialFailure
+    ? fastStatus
+    : actualError
+      ? 'error'
+      : fastStatus ?? status;
 
   return (
-    <QuerySwitcher
-      status={fastStatus}
-      data={fastData}
-      customError={
-        <MemoizedSectionError
-          isLoading={isFastLoading}
-          errorMessage={fastError?.message}
-          emptyLabel="treeListing.notFound"
-        />
-      }
-    >
+    <>
       <Toaster />
       <div className="flex flex-col gap-6">
-        <TreeTable treeTableRows={listItems} />
+        <TreeTable
+          treeTableRows={listItems}
+          status={actualStatus}
+          queryData={fastData}
+          error={actualError}
+          isLoading={isFastLoading}
+          showStatusUnavailable={hasPartialFailure}
+        />
       </div>
       {kcidevComponent}
-    </QuerySwitcher>
+    </>
   );
 };
 
diff --git a/dashboard/src/components/TreeListingPage/TreeTable.tsx b/dashboard/src/components/TreeListingPage/TreeTable.tsx
@@ -14,6 +14,7 @@ import {
 } from '@tanstack/react-table';
 
 import { useCallback, useMemo, useState, type JSX } from 'react';
+import type { UseQueryResult } from '@tanstack/react-query';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -60,6 +61,9 @@ import { valueOrEmpty } from '@/lib/string';
 import { PinnedTrees } from '@/utils/constants/tables';
 import { makeTreeIdentifierKey } from '@/utils/trees';
 
+import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
+import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
+
 const getLinkProps = (
   row: Row<TreeTableBody>,
   origin: string,
@@ -154,7 +158,10 @@ const getLinkProps = (
   };
 };
 
-const getColumns = (origin: string): ColumnDef<TreeTableBody>[] => {
+const getColumns = (
+  origin: string,
+  showStatusUnavailable?: boolean,
+): ColumnDef<TreeTableBody>[] => {
   return [
     {
       accessorKey: 'tree_name',
@@ -263,6 +270,8 @@ const getColumns = (origin: string): ColumnDef<TreeTableBody>[] => {
               },
             })}
           />
+        ) : showStatusUnavailable ? (
+          <span>-</span>
         ) : (
           <FormattedMessage id="global.loading" defaultMessage="Loading..." />
         );
@@ -308,6 +317,8 @@ const getColumns = (origin: string): ColumnDef<TreeTableBody>[] => {
               },
             })}
           />
+        ) : showStatusUnavailable ? (
+          <span>-</span>
         ) : (
           <FormattedMessage id="global.loading" defaultMessage="Loading..." />
         );
@@ -353,6 +364,8 @@ const getColumns = (origin: string): ColumnDef<TreeTableBody>[] => {
               },
             })}
           />
+        ) : showStatusUnavailable ? (
+          <span>-</span>
         ) : (
           <FormattedMessage id="global.loading" defaultMessage="Loading..." />
         );
@@ -366,9 +379,21 @@ const getColumns = (origin: string): ColumnDef<TreeTableBody>[] => {
 
 interface ITreeTable {
   treeTableRows: TreeTableBody[];
+  status?: UseQueryResult['status'];
+  queryData?: unknown;
+  error?: Error | null;
+  isLoading?: boolean;
+  showStatusUnavailable?: boolean;
 }
 
-export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
+export function TreeTable({
+  treeTableRows,
+  status,
+  queryData,
+  error,
+  isLoading,
+  showStatusUnavailable,
+}: ITreeTable): JSX.Element {
   const { origin: unsafeOrigin, listingSize } = useSearch({ strict: false });
   const origin = unsafeOrigin ?? DEFAULT_ORIGIN;
   const navigate = useNavigate({ from: '/tree' });
@@ -407,7 +432,10 @@ export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
     });
   }, [treeTableRows]);
 
-  const columns = useMemo(() => getColumns(origin), [origin]);
+  const columns = useMemo(
+    () => getColumns(origin, showStatusUnavailable),
+    [origin, showStatusUnavailable],
+  );
 
   const table = useReactTable({
     data: orderedData,
@@ -468,7 +496,7 @@ export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
     ) : (
       <TableRow>
         <TableCell colSpan={columns.length} className="h-24 text-center">
-          <FormattedMessage id="global.noResults" />
+          <FormattedMessage id="treeListing.notFound" />
         </TableCell>
       </TableRow>
     );
@@ -506,9 +534,29 @@ export function TreeTable({ treeTableRows }: ITreeTable): JSX.Element {
           <PaginationButtons table={table} className="pl-4" />
         </div>
       </div>
-      <BaseTable headerComponents={tableHeaders}>
-        <TableBody>{tableBody}</TableBody>
-      </BaseTable>
+      {showStatusUnavailable && (
+        <div className="rounded-md border border-red-500 bg-red-50 p-4 text-red-800">
+          <p className="text-sm">
+            <FormattedMessage id="treeListing.statusUnavailable" />
+          </p>
+        </div>
+      )}
+      <QuerySwitcher
+        status={status}
+        data={queryData}
+        error={error}
+        customError={
+          <MemoizedSectionError
+            isLoading={isLoading}
+            errorMessage={error?.message}
+            emptyLabel="treeListing.notFound"
+          />
+        }
+      >
+        <BaseTable headerComponents={tableHeaders}>
+          <TableBody>{tableBody}</TableBody>
+        </BaseTable>
+      </QuerySwitcher>
       <PaginationInfo
         table={table}
         intlLabel="global.trees"
diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -348,6 +348,8 @@ export const messages = {
     'treeDetails.validBuilds': 'Success builds',
     'treeListing.description': 'List of trees for kernel builds and tests',
     'treeListing.notFound': 'No tree information available',
+    'treeListing.statusUnavailable':
+      'Error: Unable to load tree status information. Displaying basic information only.',
     'treeListing.title': 'Tree Listing ― KCI Dashboard',
   },
 };
diff --git a/dashboard/src/pages/Hardware/HardwareListingPage.tsx b/dashboard/src/pages/Hardware/HardwareListingPage.tsx
@@ -3,8 +3,6 @@ import { roundToNearestMinutes } from 'date-fns';
 
 import { useSearch } from '@tanstack/react-router';
 
-import QuerySwitcher from '@/components/QuerySwitcher/QuerySwitcher';
-
 import { Toaster } from '@/components/ui/toaster';
 
 import type { HardwareItem } from '@/types/hardware';
@@ -13,8 +11,6 @@ import { useHardwareListing } from '@/api/hardware';
 
 import { dateObjectToTimestampInSeconds, daysToSeconds } from '@/utils/date';
 
-import { MemoizedSectionError } from '@/components/DetailsPages/SectionError';
-
 import type { RequiredStatusCount, StatusCount } from '@/types/general';
 
 import {
@@ -144,27 +140,21 @@ const HardwareListingPage = ({
   );
 
   return (
-    <QuerySwitcher
-      status={status}
-      data={data}
-      customError={
-        <MemoizedSectionError
-          isLoading={isLoading}
-          errorMessage={error?.message}
-          emptyLabel="hardwareListing.notFound"
-        />
-      }
-    >
+    <>
       <Toaster />
       <div className="flex flex-col gap-6">
         <HardwareTable
           treeTableRows={listItems}
           endTimestampInSeconds={endTimestampInSeconds}
           startTimestampInSeconds={startTimestampInSeconds}
+          status={status}
+          queryData={data}
+          error={error}
+          isLoading={isLoading}
         />
       </div>
       {kcidevComponent}
-    </QuerySwitcher>
+    </>
   );
 };
 
diff --git a/dashboard/src/pages/Hardware/HardwareTable.tsx b/dashboard/src/pages/Hardware/HardwareTable.tsx
diff --git a/dashboard/src/pages/IssueListing/IssueListingPage.tsx b/dashboard/src/pages/IssueListing/IssueListingPage.tsx
