Feat: table build tree details page

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

dashboard/src/components/Table/TableInfo.tsx

@@ -0,0 +1,63 @@
+import {
+  MdExpandMore,
+  MdArrowBackIos,
+  MdArrowForwardIos,
+} from 'react-icons/md';
+import { FormattedMessage } from 'react-intl';
+
+import { Button } from '../ui/button';
+
+interface ITableInformation {
+  startIndex: number;
+  endIndex: number;
+  totalTrees: number;
+  itemsPerPage: number;
+  onClickForward: () => void;
+  onClickBack: () => void;
+}
+
+export const TableInfo = ({
+  startIndex,
+  endIndex,
+  totalTrees,
+  itemsPerPage,
+  onClickForward,
+  onClickBack,
+}: ITableInformation): JSX.Element => {
+  const buttonsClassName = 'text-lightBlue font-bold';
+  const groupsClassName = 'flex flex-row items-center gap-2';
+  return (
+    <div className="flex flex-row gap-4 text-sm text-black">
+      <div className={groupsClassName}>
+        <FormattedMessage id="table.showing" />
+        <span className="font-bold">
+          {startIndex} - {endIndex}
+        </span>
+        <FormattedMessage id="table.of" />
+        <span className="font-bold">{totalTrees}</span>
+        <FormattedMessage id="table.tree" />
+      </div>
+      <div className={groupsClassName}>
+        <FormattedMessage id="table.itemsPerPage" />
+        <span className="font-bold">{itemsPerPage}</span>
+        <MdExpandMore className={buttonsClassName} />
+      </div>
+      <div className="flex flex-row gap-2 items-center">
+        <Button
+          variant="outline"
+          onClick={onClickBack}
+          disabled={startIndex === 1}
+        >
+          <MdArrowBackIos className={buttonsClassName} />
+        </Button>
+        <Button
+          variant="outline"
+          onClick={onClickForward}
+          disabled={endIndex === totalTrees}
+        >
+          <MdArrowForwardIos className={buttonsClassName} />
+        </Button>
+      </div>
+    </div>
+  );
+};

dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx

@@ -1,12 +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, IStatusChart } from '@/components/StatusChart/StatusCharts';
 import { ITreeDetails } from '@/routes/TreeDetails/TreeDetails';
-import { ISummary } from '@/components/Summary/Summary';
+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;
@@ -15,30 +19,66 @@ 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,
+        config: row.config ?? '-',
+        compiler: row.compiler ?? '-',
+        buildTime: row.buildTime ? (
+          <span>
+            {typeof row.buildTime === 'number'
+              ? Math.floor(row.buildTime) + ' '
+              : row.buildTime}
+            <FormattedMessage id="global.seconds" />
+          </span>
+        ) : (
+          '-'
+        ),
+        date: row.date?.split('T')[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(filteredContent?.length ?? 0, ITEMS_PER_PAGE);
   const cards = useMemo(
     () => [
       {
         title: <FormattedMessage id="treeDetails.buildStatus" />,
         type: 'chart',
         pieCentralLabel: `${
-          (treeDetailsData?.builds.invalid ?? 0) +
-          (treeDetailsData?.builds.valid ?? 0) +
-          (treeDetailsData?.builds.null ?? 0)
+          (treeDetailsData?.buildsSummary.invalid ?? 0) +
+          (treeDetailsData?.buildsSummary.valid ?? 0) +
+          (treeDetailsData?.buildsSummary.null ?? 0)
         }`,
         pieCentralDescription: <FormattedMessage id="treeDetails.executed" />,
         elements: [
           {
-            value: treeDetailsData?.builds.valid ?? 0,
+            value: treeDetailsData?.buildsSummary.valid ?? 0,
             label: 'Valid',
             color: Colors.Green,
           },
           {
-            value: treeDetailsData?.builds.invalid ?? 0,
+            value: treeDetailsData?.buildsSummary.invalid ?? 0,
             label: 'Invalid',
             color: Colors.Red,
           },
           {
-            value: treeDetailsData?.builds.null ?? 0,
+            value: treeDetailsData?.buildsSummary.null ?? 0,
             label: 'Null',
             color: Colors.Gray,
           },
@@ -64,17 +104,78 @@ const TreeDetailsBuildTab = ({
     ],
     [
       treeDetailsData?.archs,
-      treeDetailsData?.builds.invalid,
-      treeDetailsData?.builds.null,
-      treeDetailsData?.builds.valid,
+      treeDetailsData?.buildsSummary.invalid,
+      treeDetailsData?.buildsSummary.null,
+      treeDetailsData?.buildsSummary.valid,
       treeDetailsData?.configs,
     ],
   );
+
+  const onClickFilter = useCallback((type: 'error' | 'success' | 'all') => {
+    setFilterBy(type);
+  }, []);
+
   return (
-    <div className="pt-4">
+    <div className="flex flex-col gap-8 pt-4">
       <CardsGroup cards={cards} />
+      {filteredContent && (
+        <div className="flex flex-col gap-4">
+          <div className="text-lg">
+            <FormattedMessage id="treeDetails.builds" />
+          </div>
+          <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}
+              totalTrees={accordionContent?.length ?? 0}
+              itemsPerPage={ITEMS_PER_PAGE}
+              onClickBack={onClickGoBack}
+              onClickForward={onClickGoForward}
+            />
+          </div>
+          <Accordion
+            type="build"
+            items={filteredContent.slice(startIndex, endIndex)}
+          />
+          <div className="flex justify-end">
+            <TableInfo
+              startIndex={startIndex + 1}
+              endIndex={endIndex}
+              totalTrees={accordionContent?.length ?? 0}
+              itemsPerPage={ITEMS_PER_PAGE}
+              onClickBack={onClickGoBack}
+              onClickForward={onClickGoForward}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
 
+const ITEMS_PER_PAGE = 10;
+
 export default TreeDetailsBuildTab;