feat(#72): add build status table to tree details

profusion · Jul 19, 2024 · 5c3fe08 · 5c3fe08
1 parent ce1c5e0
commit 5c3fe08
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 146 deletions.
diff --git a/dashboard/src/components/Accordion/Accordion.stories.tsx b/dashboard/src/components/Accordion/Accordion.stories.tsx
diff --git a/dashboard/src/components/Accordion/Accordion.tsx b/dashboard/src/components/Accordion/Accordion.tsx
@@ -1,7 +1,9 @@
-import { ReactNode, useMemo } from 'react';
+import { ReactElement, ReactNode, useMemo } from 'react';
 
 import { MdCheck, MdClose } from 'react-icons/md';
 
+import { FormattedMessage } from 'react-intl';
+
 import { TableBody, TableCell, TableRow } from '../ui/table';
 import BaseTable from '../Table/BaseTable';
 import {
@@ -13,7 +15,7 @@ import ColoredCircle from '../ColoredCircle/ColoredCircle';
 import { ItemType } from '../ListingItem/ListingItem';
 
 export interface IAccordion {
-  headers: string[];
+  headers?: ReactElement[];
   items: IAccordionItems[];
   type: 'build' | 'test';
 }
@@ -44,11 +46,20 @@ export type AccordionItemTestsTrigger = {
   status?: 'valid' | 'invalid';
 };
 
-const Accordion = ({ headers, items, type }: IAccordion): JSX.Element => {
-  const accordionTableHeader = useMemo(
-    () => headers.map(header => <span key={header}>{header}</span>),
-    [headers],
-  );
+const headersBuilds = [
+  <FormattedMessage key="treeDetails.config" id="treeDetails.config" />,
+  <FormattedMessage key="treeDetails.compiler" id="treeDetails.compiler" />,
+  <FormattedMessage key="treeDetails.date" id="treeDetails.date" />,
+  <FormattedMessage
+    key="treeDetails.buildErrors"
+    id="treeDetails.buildErrors"
+  />,
+  <FormattedMessage key="treeDetails.buildTime" id="treeDetails.buildTime" />,
+  <FormattedMessage key="treeDetails.status" id="treeDetails.status" />,
+];
+
+const Accordion = ({ items, type }: IAccordion): JSX.Element => {
+  const accordionTableHeader = type === 'build' ? headersBuilds : [];
 
   return (
     <BaseTable

diff --git a/dashboard/src/components/Table/BuildsTable.tsx b/dashboard/src/components/Table/BuildsTable.tsx
diff --git a/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx
@@ -1,13 +1,16 @@
 import { FormattedMessage } from 'react-intl';
 
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import CardsGroup from '@/components/CardsGroup/CardsGroup';
-import { Colors } from '@/components/StatusChart/StatusCharts';
+import { Colors, IStatusChart } from '@/components/StatusChart/StatusCharts';
 import { ITreeDetails } from '@/routes/TreeDetails/TreeDetails';
-import BuildsTable from '@/components/Table/BuildsTable';
 import { TableInfo } from '@/components/Table/TableInfo';
 import { usePagination } from '@/hooks/usePagination';
+import Accordion from '@/components/Accordion/Accordion';
+import { Button } from '@/components/ui/button';
+import { IListingContent } from '@/components/ListingContent/ListingContent';
+import { ISummary } from '@/components/Summary/Summary';
 
 interface ITreeDetailsBuildTab {
   treeDetailsData?: ITreeDetails;
@@ -16,19 +19,40 @@ interface ITreeDetailsBuildTab {
 const TreeDetailsBuildTab = ({
   treeDetailsData,
 }: ITreeDetailsBuildTab): JSX.Element => {
+  const [filterBy, setFilterBy] = useState<'error' | 'success' | 'all'>('all');
   const accordionContent = useMemo(() => {
     return treeDetailsData?.builds.map(row => ({
       trigger: {
         ...row,
-        buildTime: `${row.buildTime?.split('.')[0]} ${(<FormattedMessage id="global.seconds" />)}`,
+        config: row.config ?? '-',
+        compiler: row.compiler ?? '-',
+        buildTime: row.buildTime ? (
+          <span>
+            {row.buildTime?.split('.')[0]}{' '}
+            <FormattedMessage id="global.seconds" />
+          </span>
+        ) : (
+          '-'
+        ),
         date: row.date?.split(' ')[0],
       },
       content: <></>,
     }));
   }, [treeDetailsData?.builds]);
 
+  const filteredContent =
+    filterBy === 'error'
+      ? accordionContent?.filter(
+          row => row.trigger.buildErrors && row.trigger.buildErrors > 0,
+        )
+      : filterBy === 'success'
+        ? accordionContent?.filter(
+            row => row.trigger.status && row.trigger.status === 'valid',
+          )
+        : accordionContent;
+
   const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
-    usePagination(accordionContent?.length ?? 0, ITEMS_PER_PAGE);
+    usePagination(filteredContent?.length ?? 0, ITEMS_PER_PAGE);
   const cards = useMemo(
     () => [
       {
@@ -57,12 +81,12 @@ const TreeDetailsBuildTab = ({
             color: Colors.Gray,
           },
         ],
-      },
+      } as IStatusChart,
       {
         items: treeDetailsData?.configs ?? [],
         title: <FormattedMessage id="treeDetails.configs" />,
         type: 'listing',
-      },
+      } as IListingContent,
       {
         summaryBody: treeDetailsData?.archs ?? [],
         title: <FormattedMessage id="treeDetails.summary" />,
@@ -74,7 +98,7 @@ const TreeDetailsBuildTab = ({
           />,
         ],
         type: 'summary',
-      },
+      } as ISummary,
     ],
     [
       treeDetailsData?.archs,
@@ -85,15 +109,42 @@ const TreeDetailsBuildTab = ({
     ],
   );
 
+  const onClickFilter = useCallback((type: 'error' | 'success' | 'all') => {
+    setFilterBy(type);
+  }, []);
+
   return (
     <div className="flex flex-col gap-8 pt-4">
       <CardsGroup cards={cards} />
-      {accordionContent && (
+      {filteredContent && (
         <div className="flex flex-col gap-4">
           <div className="text-lg">
             <FormattedMessage id="treeDetails.builds" />
           </div>
-          <div className="flex justify-end">
+          <div className="flex flex-row justify-between">
+            <div>
+              <Button
+                variant="outline"
+                className="rounded-l-full border border-black"
+                onClick={() => onClickFilter('all')}
+              >
+                <FormattedMessage id="global.all" />
+              </Button>
+              <Button
+                variant="outline"
+                className="rounded-none border border-black"
+                onClick={() => onClickFilter('success')}
+              >
+                <FormattedMessage id="global.successful" />
+              </Button>
+              <Button
+                variant="outline"
+                className="rounded-r-full border border-black"
+                onClick={() => onClickFilter('error')}
+              >
+                <FormattedMessage id="global.errors" />
+              </Button>
+            </div>
             <TableInfo
               startIndex={startIndex + 1}
               endIndex={endIndex}
@@ -103,8 +154,9 @@ const TreeDetailsBuildTab = ({
               onClickForward={onClickGoForward}
             />
           </div>
-          <BuildsTable
-            buildsData={accordionContent?.slice(startIndex, endIndex)}
+          <Accordion
+            type="build"
+            items={filteredContent.slice(startIndex, endIndex)}
           />
           <div className="flex justify-end">
             <TableInfo

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -3,9 +3,12 @@ import { LOCALES } from '../constants';
 export const messages = {
   [LOCALES.EN_US]: {
     global: {
-      filters: 'Filters',
+      all: 'All',
       cleanAll: 'Clean all',
+      errors: 'Errors',
+      filters: 'Filters',
       seconds: 'sec',
+      successful: 'Successful',
     },
     routes: {
       deviceMonitor: 'Devices',
@@ -22,11 +25,16 @@ export const messages = {
       arch: 'Arch',
       boots: 'Boots',
       builds: 'Builds',
+      buildErrors: 'Build errors',
       buildStatus: 'Build status',
+      buildTime: 'BuildTime',
+      config: 'Config',
       configs: 'Configs',
       compiler: 'Compiler',
+      date: 'Date',
       executed: 'Executed',
       summary: 'Summary',
+      status: 'Status',
       tests: 'Tests',
     },
     treeTable: {