feat(#71): add accordion item content

dashboard/src/components/Accordion/Accordion.tsx

@@ -1,9 +1,11 @@
-import { ReactElement, ReactNode, useMemo } from 'react';
+import { ReactElement, useMemo } from 'react';
 
 import { MdCheck, MdClose } from 'react-icons/md';
 
 import { FormattedMessage } from 'react-intl';
 
+import { AccordionItemBuilds } from '@/types/tree/TreeDetails';
+
 import { TableBody, TableCell, TableRow } from '../ui/table';
 import BaseTable from '../Table/BaseTable';
 import {
@@ -14,31 +16,23 @@ import {
 import ColoredCircle from '../ColoredCircle/ColoredCircle';
 import { ItemType } from '../ListingItem/ListingItem';
 
+import AccordionBuildContent from './BuildAccordionContent';
+
 export interface IAccordion {
   headers?: ReactElement[];
   items: IAccordionItems[];
   type: 'build' | 'test';
 }
 
 export interface IAccordionItems {
-  trigger: AccordionItemBuildsTrigger | AccordionItemTestsTrigger;
-  content?: ReactNode;
+  accordionData: AccordionItemBuilds | AccordionItemTestsTrigger;
 }
 
 interface ICustomAccordionTableBody {
   items: IAccordionItems[];
   type: 'build' | 'test';
 }
 
-export type AccordionItemBuildsTrigger = {
-  config?: string;
-  compiler?: string;
-  date?: string;
-  buildErrors?: number;
-  buildTime?: string;
-  status?: 'valid' | 'invalid';
-};
-
 export type AccordionItemTestsTrigger = {
   testPlans?: string;
   testSuccessfull?: number;
@@ -81,13 +75,21 @@ const AccordionTableBody = ({
             <CollapsibleTrigger asChild>
               <TableRow>
                 {type === 'build' ? (
-                  <AccordionBuildsTrigger trigger={item.trigger} />
+                  <AccordionBuildsTrigger accordionData={item.accordionData} />
                 ) : (
-                  <AccordionTestsTrigger trigger={item.trigger} />
+                  <AccordionTestsTrigger accordionData={item.accordionData} />
                 )}
               </TableRow>
             </CollapsibleTrigger>
-            <CollapsibleContent>{item.content}</CollapsibleContent>
+            <CollapsibleContent>
+              <div className="h-fit w-f p-8">
+                {type === 'build' ? (
+                  <AccordionBuildContent accordionData={item.accordionData} />
+                ) : (
+                  <></>
+                )}
+              </div>
+            </CollapsibleContent>
           </>
         </Collapsible>
       )),
@@ -97,8 +99,10 @@ const AccordionTableBody = ({
   return <TableBody>{accordionItems}</TableBody>;
 };
 
-const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
-  const triggerInfo = trigger as AccordionItemBuildsTrigger;
+const AccordionBuildsTrigger = ({
+  accordionData,
+}: IAccordionItems): JSX.Element => {
+  const triggerInfo = accordionData as AccordionItemBuilds;
   return (
     <>
       <TableCell>{triggerInfo.config}</TableCell>
@@ -123,8 +127,10 @@ const AccordionBuildsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
   );
 };
 
-const AccordionTestsTrigger = ({ trigger }: IAccordionItems): JSX.Element => {
-  const triggerInfo = trigger as AccordionItemTestsTrigger;
+const AccordionTestsTrigger = ({
+  accordionData,
+}: IAccordionItems): JSX.Element => {
+  const triggerInfo = accordionData as AccordionItemTestsTrigger;
   return (
     <>
       <TableCell>{triggerInfo.testPlans}</TableCell>

dashboard/src/components/Accordion/BuildAccordionContent.tsx

@@ -0,0 +1,156 @@
+import { MdFolderOpen } from 'react-icons/md';
+
+import { useMemo } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { AccordionItemBuilds } from '@/types/tree/TreeDetails';
+
+import LinkWithIcon from '../LinkWithIcon/LinkWithIcon';
+import StatusChartMemoized, { Colors } from '../StatusChart/StatusCharts';
+
+import { IAccordionItems } from './Accordion';
+
+export interface IBuildAccordionContent {
+  testStatus: {
+    failTests: number;
+    errorTests: number;
+    passTests: number;
+    skipTests: number;
+  };
+  kernelImage?: string;
+  buildLogs?: string;
+  kernelConfig?: string;
+  dtb?: string;
+  systemMap?: string;
+  modules?: string;
+}
+
+export interface ILinksGroup {
+  kernelImage?: string;
+  buildLogs?: string;
+  kernelConfig?: string;
+  dtb?: string;
+  systemMap?: string;
+  modules?: string;
+}
+
+const AccordionBuildContent = ({
+  accordionData,
+}: IAccordionItems): JSX.Element => {
+  const contentData = accordionData as AccordionItemBuilds;
+  const chartElements = useMemo(() => {
+    return contentData.testStatus?.passTests ||
+      contentData.testStatus?.skipTests ||
+      contentData.testStatus?.errorTests ||
+      contentData.testStatus?.failTests
+      ? [
+          {
+            value: contentData.testStatus?.passTests ?? 0,
+            label: 'Test Success',
+            color: Colors.Green,
+          },
+          {
+            value:
+              (contentData.testStatus?.failTests ?? 0) +
+              (contentData.testStatus?.errorTests ?? 0),
+            label: 'Test failed',
+            color: Colors.Red,
+          },
+          {
+            value: contentData.testStatus?.skipTests ?? 0,
+            label: 'Test skiped',
+            color: Colors.Gray,
+          },
+        ]
+      : [{ value: 1, label: 'None', color: Colors.Gray }];
+  }, [
+    contentData.testStatus?.errorTests,
+    contentData.testStatus?.failTests,
+    contentData.testStatus?.passTests,
+    contentData.testStatus?.skipTests,
+  ]);
+
+  return (
+    <div className="flex flex-row justify-between">
+      <div className="min-w-[400px]">
+        <StatusChartMemoized
+          type="chart"
+          title={<FormattedMessage id="buildAccordion.testStatus" />}
+          elements={chartElements}
+        />
+      </div>
+      <LinksGroup
+        kernelImage={contentData.kernelImage}
+        buildLogs={contentData.buildLogs}
+        kernelConfig={contentData.kernelConfig}
+        dtb={contentData.dtb}
+        systemMap={contentData.systemMap}
+        modules={contentData.modules}
+      />
+    </div>
+  );
+};
+
+const LinksGroup = ({
+  kernelImage,
+  buildLogs,
+  kernelConfig,
+  dtb,
+  systemMap,
+  modules,
+}: ILinksGroup): JSX.Element => {
+  return (
+    <div className="grid grid-cols-3 gap-4 min-w-[350px]">
+      {kernelImage && (
+        <LinkWithIcon
+          title={<FormattedMessage id="buildAccordion.kernelImage" />}
+          icon={<MdFolderOpen className="text-lightBlue" />}
+          linkText={`kernel/${kernelImage}`}
+        />
+      )}
+      {kernelConfig && (
+        <LinkWithIcon
+          title={<FormattedMessage id="buildAccordion.kernelConfig" />}
+          icon={<MdFolderOpen className="text-lightBlue" />}
+          link={kernelConfig}
+          linkText={<FormattedMessage id="buildAccordion.kernelConfigPath" />}
+        />
+      )}
+      {dtb && (
+        <LinkWithIcon
+          title={<FormattedMessage id="buildAccordion.dtb" />}
+          icon={<MdFolderOpen className="text-lightBlue" />}
+          link={dtb}
+          linkText={<FormattedMessage id="buildAccordion.dtbs" />}
+        />
+      )}
+      {buildLogs && (
+        <LinkWithIcon
+          title={<FormattedMessage id="buildAccordion.buildLogs" />}
+          icon={<MdFolderOpen className="text-lightBlue" />}
+          link={buildLogs}
+          linkText={<FormattedMessage id="buildAccordion.logs" />}
+        />
+      )}
+      {systemMap && (
+        <LinkWithIcon
+          title={<FormattedMessage id="buildAccordion.systemMap" />}
+          icon={<MdFolderOpen className="text-lightBlue" />}
+          link={systemMap}
+          linkText={<FormattedMessage id="buildAccordion.systemMapPath" />}
+        />
+      )}
+      {modules && (
+        <LinkWithIcon
+          title={<FormattedMessage id="buildAccordion.modules" />}
+          icon={<MdFolderOpen className="text-lightBlue" />}
+          link={modules}
+          linkText={<FormattedMessage id="buildAccordion.modulesZip" />}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AccordionBuildContent;

dashboard/src/components/CardsGroup/CardsGroup.tsx

@@ -40,7 +40,7 @@ const CardContent = ({ card }: ICardContent): JSX.Element => {
       />
     );
   } else if (card.type === 'chart') {
-    return <StatusChartMemoized {...card} />;
+    return <StatusChartMemoized {...card} title={<></>} />;
   } else {
     return <></>;
   }

dashboard/src/components/LinkWithIcon/LinkWithIcon.tsx

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+
+interface ILinkWithIcon {
+  title?: string | ReactElement;
+  linkText?: string | ReactElement;
+  link?: string;
+  icon?: ReactElement;
+}
+
+const LinkWithIcon = ({
+  title,
+  linkText,
+  icon,
+  link,
+}: ILinkWithIcon): JSX.Element => {
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="font-bold">{title}</span>
+      <a className="flex flex-row gap-1 items-center" href={link}>
+        {linkText}
+        {icon}
+      </a>
+    </div>
+  );
+};
+
+export default LinkWithIcon;

dashboard/src/components/StatusChart/StatusCharts.tsx

@@ -52,6 +52,7 @@ const StatusChart = ({
   decreaseElement,
   pieCentralLabel,
   pieCentralDescription,
+  title,
 }: IStatusChart): JSX.Element => {
   const showChart = elements.some(element => element.value > 0);
 
@@ -69,28 +70,31 @@ const StatusChart = ({
     return <></>;
   }
   return (
-    <div className="flex items-center">
-      <PieChart
-        series={dataSeries}
-        width={200}
-        height={200}
-        slotProps={{
-          legend: {
-            hidden: true,
-          },
-        }}
-      >
-        <PieCenterLabel
-          label={pieCentralLabel ?? ''}
-          description={pieCentralDescription ?? <></>}
-        />
-      </PieChart>
-      <div className="flex flex-row gap-4 pt-5">
-        <ChartLegend chartValues={elements} />
-        <RegressionsStatus
-          increaseElement={increaseElement}
-          decreaseElement={decreaseElement}
-        />
+    <div>
+      <span className="font-bold">{title}</span>
+      <div className="flex items-center">
+        <PieChart
+          series={dataSeries}
+          width={200}
+          height={200}
+          slotProps={{
+            legend: {
+              hidden: true,
+            },
+          }}
+        >
+          <PieCenterLabel
+            label={pieCentralLabel ?? ''}
+            description={pieCentralDescription ?? <></>}
+          />
+        </PieChart>
+        <div className="flex flex-row gap-4 pt-5">
+          <ChartLegend chartValues={elements} />
+          <RegressionsStatus
+            increaseElement={increaseElement}
+            decreaseElement={decreaseElement}
+          />
+        </div>
       </div>
     </div>
   );

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

@@ -22,7 +22,7 @@ const TreeDetailsBuildTab = ({
   const [filterBy, setFilterBy] = useState<'error' | 'success' | 'all'>('all');
   const accordionContent = useMemo(() => {
     return treeDetailsData?.builds.map(row => ({
-      trigger: {
+      accordionData: {
         ...row,
         config: row.config ?? '-',
         compiler: row.compiler ?? '-',
@@ -37,19 +37,26 @@ const TreeDetailsBuildTab = ({
           '-'
         ),
         date: row.date?.split('T')[0],
+        testStatus: {
+          failTests: row.testStatus?.failTests,
+          errorTests: row.testStatus?.errorTests,
+          passTests: row.testStatus?.passTests,
+          skipTests: row.testStatus?.skipTests,
+        },
       },
-      content: <></>,
     }));
   }, [treeDetailsData?.builds]);
 
   const filteredContent =
     filterBy === 'error'
       ? accordionContent?.filter(
-          row => row.trigger.buildErrors && row.trigger.buildErrors > 0,
+          row =>
+            row.accordionData.buildErrors && row.accordionData.buildErrors > 0,
         )
       : filterBy === 'success'
         ? accordionContent?.filter(
-            row => row.trigger.status && row.trigger.status === 'valid',
+            row =>
+              row.accordionData.status && row.accordionData.status === 'valid',
           )
         : accordionContent;