feat(#65): add a status chart to tree deatils page

profusion · Jul 17, 2024 · 28d9fe9 · 28d9fe9
1 parent 45aef89
commit 28d9fe9
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 15 deletions.
diff --git a/dashboard/src/components/Cards/BaseCard.tsx b/dashboard/src/components/Cards/BaseCard.tsx
@@ -8,7 +8,7 @@ interface IBaseCard {
 }
 
 const containerClassName =
-  'flex flex-col rounded-xl bg-white w-full h-fit border border-darkGray text-black';
+  'flex flex-col rounded-xl bg-white w-full h-fit border border-darkGray text-black break-inside-avoid-column mb-6';
 
 const BaseCard = ({ title, content, className }: IBaseCard): JSX.Element => {
   return (

diff --git a/dashboard/src/components/CardsGroup/CardsGroup.tsx b/dashboard/src/components/CardsGroup/CardsGroup.tsx
@@ -5,13 +5,14 @@ import BaseCard from '../Cards/BaseCard';
 import ListingContent, {
   IListingContent,
 } from '../ListingContent/ListingContent';
+import StatusChartMemoized, { IStatusChart } from '../StatusChart/StatusCharts';
 
 interface ICardsGroup {
-  cards: (IListingContent | ISummary)[];
+  cards: (IListingContent | ISummary | IStatusChart)[];
 }
 
 interface ICardContent {
-  card: IListingContent | ISummary;
+  card: IListingContent | ISummary | IStatusChart;
 }
 
 const CardsGroup = ({ cards }: ICardsGroup): JSX.Element => {
@@ -24,7 +25,7 @@ const CardsGroup = ({ cards }: ICardsGroup): JSX.Element => {
       />
     ));
   }, [cards]);
-  return <div className="grid grid-cols-2 gap-8">{cardsList}</div>;
+  return <div className="columns-2">{cardsList}</div>;
 };
 
 const CardContent = ({ card }: ICardContent): JSX.Element => {
@@ -38,6 +39,8 @@ const CardContent = ({ card }: ICardContent): JSX.Element => {
         summaryBody={card?.summaryBody}
       />
     );
+  } else if (card.type === 'chart') {
+    return <StatusChartMemoized {...card} />;
   } else {
     return <></>;
   }

diff --git a/dashboard/src/locales/messages/index.ts b/dashboard/src/locales/messages/index.ts
@@ -21,8 +21,10 @@ export const messages = {
       arch: 'Arch',
       boots: 'Boots',
       builds: 'Builds',
+      buildStatus: 'Build status',
       configs: 'Configs',
       compiler: 'Compiler',
+      executed: 'Executed',
       summary: 'Summary',
       tests: 'Tests',
     },

diff --git a/dashboard/src/routes/TreeDetails/TreeDetails.tsx b/dashboard/src/routes/TreeDetails/TreeDetails.tsx
@@ -13,13 +13,20 @@ import { useTreeDetails } from '@/api/TreeDetails';
 import { IListingItem } from '@/components/ListingItem/ListingItem';
 import { ISummaryItem } from '@/components/Summary/Summary';
 import CardsGroup from '@/components/CardsGroup/CardsGroup';
+import { Colors } from '@/components/StatusChart/StatusCharts';
+import { Results } from '@/types/tree/TreeDetails';
+
+interface ITreeDetails {
+  archs: ISummaryItem[];
+  configs: IListingItem[];
+  builds: Results;
+}
 
 const TreeDetails = (): JSX.Element => {
   const { treeId } = useParams();
   const { data } = useTreeDetails(treeId ?? '');
 
-  const [configs, setConfigs] = useState<IListingItem[]>();
-  const [archictectures, setArchitectures] = useState<ISummaryItem[]>();
+  const [treeDetailsData, setTreeDetailsData] = useState<ITreeDetails>();
 
   useEffect(() => {
     if (data) {
@@ -30,7 +37,6 @@ const TreeDetails = (): JSX.Element => {
         errors: value.invalid,
         success: value.valid,
       }));
-      setConfigs(configsData);
 
       const archData: ISummaryItem[] = Object.entries(
         data.summary.architectures,
@@ -39,7 +45,17 @@ const TreeDetails = (): JSX.Element => {
         compilers: value.compilers,
       }));
 
-      setArchitectures(archData);
+      const buildSummaryData: Results = {
+        valid: data.summary.builds.valid,
+        invalid: data.summary.builds.invalid,
+        null: data.summary.builds.null,
+      };
+
+      setTreeDetailsData({
+        archs: archData,
+        configs: configsData,
+        builds: buildSummaryData,
+      });
     }
   }, [data]);
 
@@ -56,12 +72,41 @@ const TreeDetails = (): JSX.Element => {
         <CardsGroup
           cards={[
             {
-              items: configs ?? [],
+              title: <FormattedMessage id="treeDetails.buildStatus" />,
+              type: 'chart',
+              pieCentralLabel: `${
+                (treeDetailsData?.builds.invalid ?? 0) +
+                (treeDetailsData?.builds.valid ?? 0) +
+                (treeDetailsData?.builds.null ?? 0)
+              }`,
+              pieCentralDescription: (
+                <FormattedMessage id="treeDetails.executed" />
+              ),
+              elements: [
+                {
+                  value: treeDetailsData?.builds.valid ?? 0,
+                  label: 'Valid',
+                  color: Colors.Green,
+                },
+                {
+                  value: treeDetailsData?.builds.invalid ?? 0,
+                  label: 'Invalid',
+                  color: Colors.Red,
+                },
+                {
+                  value: treeDetailsData?.builds.null ?? 0,
+                  label: 'Null',
+                  color: Colors.Gray,
+                },
+              ],
+            },
+            {
+              items: treeDetailsData?.configs ?? [],
               title: <FormattedMessage id="treeDetails.configs" />,
               type: 'listing',
             },
             {
-              summaryBody: archictectures ?? [],
+              summaryBody: treeDetailsData?.archs ?? [],
               title: <FormattedMessage id="treeDetails.summary" />,
               summaryHeaders: [
                 <FormattedMessage

diff --git a/dashboard/src/types/tree/TreeDetails.tsx b/dashboard/src/types/tree/TreeDetails.tsx
@@ -24,12 +24,14 @@ type TreeDetailsBuild = {
 export type TreeDetails = {
   builds: TreeDetailsBuild[];
   summary: {
-    builds: {
-      valid: number;
-      invalid: number;
-      null: number;
-    };
+    builds: Results;
     configs: object;
     architectures: object;
   };
 };
+
+export type Results = {
+  valid: number;
+  invalid: number;
+  null: number;
+};