feat(dashboard): add labs listing page

Closes #1966

Signed-off-by: Felipe Bergamin <felipebergamin@profusion.mobi>

Author: felipebergamin

dashboard/src/api/labs.ts

@@ -0,0 +1,44 @@
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import { useSearch } from '@tanstack/react-router';
+
+import type { LabListingResponse } from '@/types/lab';
+
+import type { LabsListingRoutesMap } from '@/utils/constants/labsListing';
+
+import { RequestData } from './commonRequest';
+
+const fetchLabsListing = async (
+  origin: string,
+  startTimestampInSeconds: number,
+  endTimestampInSeconds: number,
+): Promise<LabListingResponse> => {
+  return RequestData.get<LabListingResponse>('/api/labs/', {
+    params: {
+      startTimestampInSeconds,
+      endTimestampInSeconds,
+      origin,
+    },
+  });
+};
+
+export const useLabsListing = (
+  startTimestampInSeconds: number,
+  endTimestampInSeconds: number,
+  searchFrom: LabsListingRoutesMap['search'],
+): UseQueryResult<LabListingResponse> => {
+  const { origin } = useSearch({ from: searchFrom });
+
+  return useQuery({
+    queryKey: [
+      'labsListing',
+      startTimestampInSeconds,
+      endTimestampInSeconds,
+      origin,
+    ],
+    queryFn: () =>
+      fetchLabsListing(origin, startTimestampInSeconds, endTimestampInSeconds),
+    refetchOnWindowFocus: false,
+  });
+};

dashboard/src/components/OpenGraphTags/ListingOGTags.tsx

@@ -30,6 +30,9 @@ const ListingOGTags = ({
       case '/issues':
         descriptionId = 'issueListing.description';
         break;
+      case '/labs':
+        descriptionId = 'labsListing.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 '/labs':
+        return formatMessage({ id: 'labsListing.title' });
     }
   }, [formatMessage, monitor]);
 

dashboard/src/components/SearchBoxNavigate/SearchBoxNavigate.tsx

@@ -8,12 +8,14 @@ import DebounceInput from '@/components/DebounceInput/DebounceInput';
 import { CustomDialog } from '@/components/Dialog/CustomDialog';
 import { treeListingCleanFullPaths } from '@/utils/constants/treeListing';
 import { hwListingCleanFullPaths } from '@/utils/constants/hardwareListing';
+import { labsListingCleanFullPaths } from '@/utils/constants/labsListing';
 
 // Relates the type of listing to the corresponding search key
 const forwardFields: Record<string, string> = {
   tree: 'treeSearch',
   hardware: 'hardwareSearch',
   issue: 'issueSearch',
+  labs: 'labsSearch',
 };
 
 interface ISearchData {
@@ -40,11 +42,15 @@ export const SearchBoxNavigate = (): JSX.Element => {
       return 'issue';
     }
 
+    if (labsListingCleanFullPaths.includes(cleanFullPath)) {
+      return 'labs';
+    }
+
     return 'unknown';
   }, [matches]);
   const { formatMessage } = useIntl();
 
-  const { treeSearch, hardwareSearch, issueSearch } = useSearch({
+  const { treeSearch, hardwareSearch, issueSearch, labsSearch } = useSearch({
     strict: false,
   });
   const searchData = useMemo((): ISearchData => {
@@ -71,14 +77,29 @@ export const SearchBoxNavigate = (): JSX.Element => {
           }),
           navigateTarget: 'issueSearch',
         };
+      case 'labs':
+        return {
+          currentSearch: labsSearch,
+          searchPlaceholder: formatMessage({
+            id: 'labs.searchPlaceholder',
+          }),
+          navigateTarget: 'labsSearch',
+        };
       default:
         return {
           currentSearch: '',
           searchPlaceholder: '',
           navigateTarget: '',
         };
     }
-  }, [routeInfo, treeSearch, formatMessage, hardwareSearch, issueSearch]);
+  }, [
+    routeInfo,
+    treeSearch,
+    formatMessage,
+    hardwareSearch,
+    issueSearch,
+    labsSearch,
+  ]);
 
   const navigate = useNavigate();
 

dashboard/src/components/SideMenu/menuItems.tsx

@@ -1,6 +1,10 @@
 import type { JSX } from 'react';
 
-import { MdOutlineBarChart, MdOutlineMonitorHeart } from 'react-icons/md';
+import {
+  MdOutlineBarChart,
+  MdOutlineMonitorHeart,
+  MdOutlineScience,
+} from 'react-icons/md';
 import { RxRadiobutton } from 'react-icons/rx';
 import { ImTree } from 'react-icons/im';
 import { HiOutlineDocumentSearch } from 'react-icons/hi';
@@ -29,6 +33,7 @@ export type LinkStringItems = {
 
 const TreeIcon = <ImTree className="size-5" />;
 const MonitorHeartIcon = <MdOutlineMonitorHeart className="size-5" />;
+const LabsIcon = <MdOutlineScience className="size-5" />;
 const RadioButtonIcon = <RxRadiobutton className="size-5" />;
 const MetricsIcon = <MdOutlineBarChart className="size-5" />;
 const DocumentSearchIcon = <HiOutlineDocumentSearch />;
@@ -46,6 +51,12 @@ export const routeItems: RouteMenuItems[] = [
     icon: MonitorHeartIcon,
     selected: false,
   },
+  {
+    navigateTo: '/labs',
+    idIntl: 'routes.labsMonitor',
+    icon: LabsIcon,
+    selected: false,
+  },
   {
     navigateTo: '/issues',
     idIntl: 'routes.issueMonitor',

dashboard/src/components/TopBar/TopBar.tsx

@@ -15,6 +15,7 @@ import MobileSideMenu from '@/components/SideMenu/MobileSideMenu';
 import { SearchBoxNavigate } from '@/components/SearchBoxNavigate';
 import { treeListingCleanFullPaths } from '@/utils/constants/treeListing';
 import { hwListingCleanFullPaths } from '@/utils/constants/hardwareListing';
+import { labsListingCleanFullPaths } from '@/utils/constants/labsListing';
 
 const OriginSelect = ({
   isHardwarePath,
@@ -109,6 +110,8 @@ const TitleName = ({ basePath }: { basePath: string }): JSX.Element => {
       return <FormattedMessage id="routes.issueDetails" />;
     case 'metrics':
       return <FormattedMessage id="routes.metricsMonitor" />;
+    case 'labs':
+      return <FormattedMessage id="routes.labsMonitor" />;
     default:
       return <FormattedMessage id="routes.unknown" />;
   }
@@ -124,13 +127,18 @@ const TopBar = (): JSX.Element => {
     const cleanFullPath = lastMatch?.fullPath.replace(/\//g, '') ?? '';
     const isTreeListing = treeListingCleanFullPaths.includes(cleanFullPath);
     const isHardwareListing = hwListingCleanFullPaths.includes(cleanFullPath);
+    const isLabsListing = labsListingCleanFullPaths.includes(cleanFullPath);
     const isListingPage =
-      isTreeListing || isHardwareListing || cleanFullPath.includes('issues');
+      isTreeListing ||
+      isHardwareListing ||
+      isLabsListing ||
+      cleanFullPath.includes('issues');
 
     return {
       firstUrlLocation,
       isTreeListing: isTreeListing,
       isHardwarePage: cleanFullPath.includes('hardware'),
+      isLabsPage: isLabsListing,
       isListingPage: isListingPage,
     };
   }, [matches]);
@@ -152,8 +160,14 @@ const TopBar = (): JSX.Element => {
             <span className="mr-2 text-2xl sm:mr-10">
               <TitleName basePath={routeInfo.firstUrlLocation} />
             </span>
-            {(routeInfo.isTreeListing || routeInfo.isHardwarePage) && (
-              <OriginSelect isHardwarePath={routeInfo.isHardwarePage} />
+            {(routeInfo.isTreeListing ||
+              routeInfo.isHardwarePage ||
+              routeInfo.isLabsPage) && (
+              <OriginSelect
+                isHardwarePath={
+                  routeInfo.isHardwarePage || routeInfo.isLabsPage
+                }
+              />
             )}
             <span className="ml-0 flex w-full px-6 lg:ml-14">
               {routeInfo.isListingPage && <SearchBoxNavigate />}

dashboard/src/locales/messages/index.ts

@@ -156,6 +156,7 @@ export const messages = {
     'global.issues': 'Issues',
     'global.kcidev': 'kci-dev',
     'global.lab': 'Lab',
+    'global.labs': 'Labs',
     'global.last': 'Last',
     'global.legend': 'Legend',
     'global.loading': 'Loading...',
@@ -280,6 +281,11 @@ export const messages = {
     'issueListing.treeBranchTooltip':
       'The tree name and git repository branch of the first incident\nClick a cell to see details of that checkout',
     'jsonSheet.title': 'JSON Viewer',
+    'labs.searchPlaceholder': 'Search by lab name with a regex',
+    'labsListing.description':
+      'List of labs with aggregated build, boot and test status',
+    'labsListing.notFound': 'No lab information available',
+    'labsListing.title': 'Lab Listing ― KCI Dashboard',
     'logSheet.downloadLog': 'You can download the full log here: {link}',
     'logSheet.fileName': 'File Name',
     'logSheet.fileSize': 'File Size',
@@ -309,6 +315,7 @@ export const messages = {
     'routes.hardwareNewMonitor': 'Hardware New',
     'routes.issueDetails': 'Issue',
     'routes.issueMonitor': 'Issues',
+    'routes.labsMonitor': 'Labs',
     'routes.metricsMonitor': 'Metrics',
     'routes.testDetails': 'Test',
     'routes.treeMonitor': 'Trees',

dashboard/src/pages/Labs/Labs.tsx

@@ -0,0 +1,29 @@
+import type { JSX } from 'react';
+
+import { useSearch } from '@tanstack/react-router';
+
+import { MemoizedListingOGTags } from '@/components/OpenGraphTags/ListingOGTags';
+import type { LabsListingRoutesMap } from '@/utils/constants/labsListing';
+
+import { LabsPage } from './LabsPage';
+
+const Labs = ({
+  urlFromMap,
+}: {
+  urlFromMap: LabsListingRoutesMap;
+}): JSX.Element => {
+  const { labsSearch } = useSearch({
+    from: urlFromMap.search,
+  });
+
+  return (
+    <>
+      <MemoizedListingOGTags monitor="/labs" search={labsSearch} />
+      <div className="bg-light-gray w-full py-4">
+        <LabsPage inputFilter={labsSearch} urlFromMap={urlFromMap} />
+      </div>
+    </>
+  );
+};
+
+export default Labs;

dashboard/src/pages/Labs/LabsPage.tsx

@@ -0,0 +1,74 @@
+import { useMemo, type JSX } from 'react';
+
+import { roundToNearestMinutes } from 'date-fns';
+
+import { useSearch } from '@tanstack/react-router';
+
+import type { LabListingItem } from '@/types/lab';
+
+import { useLabsListing } from '@/api/labs';
+
+import { Toaster } from '@/components/ui/toaster';
+
+import { matchesRegexOrIncludes } from '@/lib/string';
+
+import type { LabsListingRoutesMap } from '@/utils/constants/labsListing';
+
+import { dateObjectToTimestampInSeconds, daysToSeconds } from '@/utils/date';
+import { REDUCED_TIME_SEARCH } from '@/utils/constants/general';
+
+import { LabsTable } from './LabsTable';
+
+export function LabsPage({
+  inputFilter,
+  urlFromMap,
+}: {
+  inputFilter: string;
+  urlFromMap: LabsListingRoutesMap;
+}): JSX.Element {
+  const { intervalInDays = REDUCED_TIME_SEARCH } = useSearch({
+    from: urlFromMap.search,
+  });
+
+  const { startTimestampInSeconds, endTimestampInSeconds } = useMemo(() => {
+    const end = dateObjectToTimestampInSeconds(
+      roundToNearestMinutes(new Date(), { nearestTo: 30 }),
+    );
+    return {
+      startTimestampInSeconds: end - daysToSeconds(intervalInDays),
+      endTimestampInSeconds: end,
+    };
+  }, [intervalInDays]);
+
+  const { data, error, status, isLoading } = useLabsListing(
+    startTimestampInSeconds,
+    endTimestampInSeconds,
+    urlFromMap.search,
+  );
+
+  const listItems: LabListingItem[] = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    return data.labs
+      .filter(lab => matchesRegexOrIncludes(lab.lab_name, inputFilter))
+      .sort((a, b) => a.lab_name.localeCompare(b.lab_name));
+  }, [data, inputFilter]);
+
+  return (
+    <>
+      <Toaster />
+      <div className="flex flex-col gap-6">
+        <LabsTable
+          labTableRows={listItems}
+          status={status}
+          queryData={data}
+          error={error}
+          isLoading={isLoading}
+          urlFromMap={urlFromMap}
+        />
+      </div>
+    </>
+  );
+}