feat(#72): add builds yable in tree details page

profusion · Jul 19, 2024 · ec8bcfd · ec8bcfd
1 parent c739c7e
commit ec8bcfd
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 18 deletions.
diff --git a/dashboard/src/components/Table/BuildsTable.tsx b/dashboard/src/components/Table/BuildsTable.tsx
@@ -0,0 +1,28 @@
+import Accordion, { IAccordionItems } from '../Accordion/Accordion';
+
+interface IBuildsTable {
+  buildsData?: IAccordionItems[];
+}
+
+const BuildsTable = ({ buildsData }: IBuildsTable): JSX.Element => {
+  return (
+    <div>
+      {buildsData && (
+        <Accordion
+          type="build"
+          headers={[
+            'Config',
+            'Compiler',
+            'Date',
+            'Build Errors',
+            'Build Time',
+            'Status',
+          ]}
+          items={buildsData}
+        />
+      )}
+    </div>
+  );
+};
+
+export default BuildsTable;
diff --git a/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx b/dashboard/src/components/Tabs/TreeDetails/TreeDetailsBuildTab.tsx
@@ -3,10 +3,11 @@ import { FormattedMessage } from 'react-intl';
 import { useMemo } from 'react';
 
 import CardsGroup from '@/components/CardsGroup/CardsGroup';
-import { Colors, IStatusChart } from '@/components/StatusChart/StatusCharts';
+import { Colors } from '@/components/StatusChart/StatusCharts';
 import { ITreeDetails } from '@/routes/TreeDetails/TreeDetails';
-import { ISummary } from '@/components/Summary/Summary';
-import { IListingContent } from '@/components/ListingContent/ListingContent';
+import BuildsTable from '@/components/Table/BuildsTable';
+import { TableInfo } from '@/components/Table/TableInfo';
+import { usePagination } from '@/hooks/usePagination';
 
 interface ITreeDetailsBuildTab {
   treeDetailsData?: ITreeDetails;
@@ -15,40 +16,53 @@ interface ITreeDetailsBuildTab {
 const TreeDetailsBuildTab = ({
   treeDetailsData,
 }: ITreeDetailsBuildTab): JSX.Element => {
+  const accordionContent = useMemo(() => {
+    return treeDetailsData?.builds.map(row => ({
+      trigger: {
+        ...row,
+        buildTime: `${row.buildTime?.split('.')[0]} ${(<FormattedMessage id="global.seconds" />)}`,
+        date: row.date?.split(' ')[0],
+      },
+      content: <></>,
+    }));
+  }, [treeDetailsData?.builds]);
+
+  const { startIndex, endIndex, onClickGoForward, onClickGoBack } =
+    usePagination(accordionContent?.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,
           },
         ],
-      } as IStatusChart,
+      },
       {
         items: treeDetailsData?.configs ?? [],
         title: <FormattedMessage id="treeDetails.configs" />,
         type: 'listing',
-      } as IListingContent,
+      },
       {
         summaryBody: treeDetailsData?.archs ?? [],
         title: <FormattedMessage id="treeDetails.summary" />,
@@ -60,21 +74,54 @@ const TreeDetailsBuildTab = ({
           />,
         ],
         type: 'summary',
-      } as ISummary,
+      },
     ],
     [
       treeDetailsData?.archs,
-      treeDetailsData?.builds.invalid,
-      treeDetailsData?.builds.null,
-      treeDetailsData?.builds.valid,
+      treeDetailsData?.buildsSummary.invalid,
+      treeDetailsData?.buildsSummary.null,
+      treeDetailsData?.buildsSummary.valid,
       treeDetailsData?.configs,
     ],
   );
+
   return (
-    <div className="pt-4">
+    <div className="flex flex-col gap-8 pt-4">
       <CardsGroup cards={cards} />
+      {accordionContent && (
+        <div className="flex flex-col gap-4">
+          <div className="text-lg">
+            <FormattedMessage id="treeDetails.builds" />
+          </div>
+          <div className="flex justify-end">
+            <TableInfo
+              startIndex={startIndex + 1}
+              endIndex={endIndex}
+              totalTrees={accordionContent?.length ?? 0}
+              itemsPerPage={ITEMS_PER_PAGE}
+              onClickBack={onClickGoBack}
+              onClickForward={onClickGoForward}
+            />
+          </div>
+          <BuildsTable
+            buildsData={accordionContent?.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;
diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -5,6 +5,7 @@ export const messages = {
     global: {
       filters: 'Filters',
       cleanAll: 'Clean all',
+      seconds: 'sec',
     },
     routes: {
       deviceMonitor: 'Devices',

diff --git a/dashboard/src/routes/TreeDetails/TreeDetails.tsx b/dashboard/src/routes/TreeDetails/TreeDetails.tsx
@@ -13,11 +13,13 @@ import { useTreeDetails } from '@/api/TreeDetails';
 import { IListingItem } from '@/components/ListingItem/ListingItem';
 import { ISummaryItem } from '@/components/Summary/Summary';
 import { Results } from '@/types/tree/TreeDetails';
+import { AccordionItemBuildsTrigger } from '@/components/Accordion/Accordion';
 
 export interface ITreeDetails {
   archs: ISummaryItem[];
   configs: IListingItem[];
-  builds: Results;
+  buildsSummary: Results;
+  builds: AccordionItemBuildsTrigger[];
 }
 
 const TreeDetails = (): JSX.Element => {
@@ -49,10 +51,22 @@ const TreeDetails = (): JSX.Element => {
         null: data.summary.builds.null,
       };
 
+      const buildsData: AccordionItemBuildsTrigger[] = Object.entries(
+        data.builds,
+      ).map(([, value]) => ({
+        config: value.config_name,
+        date: value.start_time,
+        buildTime: value.duration,
+        compiler: value.compiler,
+        buildErrors: value.test_status.error,
+        status: value.valid ? 'valid' : 'invalid',
+      }));
+
       setTreeDetailsData({
         archs: archData,
         configs: configsData,
-        builds: buildSummaryData,
+        buildsSummary: buildSummaryData,
+        builds: buildsData,
       });
     }
   }, [data]);