Display information of project on home tab

frontend/src/app/[locale]/projects/[projectId]/home/TestPriorityDonutChart.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
+import { priorities } from "@/config/selection";
+import { CasePriorityCountType } from "@/types/case";
+import { HomeMessages } from "./page";
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
+type Props = {
+  priorityCounts: CasePriorityCountType[];
+  messages: HomeMessages;
+};
+
+export default function TestPriorityDonutChart({
+  priorityCounts,
+  messages,
+}: Props) {
+  const [chartData, setChartData] = useState({
+    series: [],
+    options: {
+      labels: [],
+      colors: [],
+    },
+  });
+
+  useEffect(() => {
+    const updateChartDate = () => {
+      if (priorityCounts) {
+        const series = priorities.map((entry, index) => {
+          const found = priorityCounts.find((itr) => itr.priority === index);
+          return found ? found.count : 0;
+        });
+
+        const labels = priorities.map((entry) => messages[entry.uid]);
+        const colors = priorities.map((entry) => entry.chartColor);
+
+        setChartData({
+          series,
+          options: { labels, colors },
+        });
+      }
+    };
+
+    updateChartDate();
+  }, [priorityCounts]);
+
+  return (
+    <Chart
+      options={chartData.options}
+      series={chartData.series}
+      type="donut"
+      width={"100%"}
+      height={"100%"}
+    />
+  );
+}

frontend/src/app/[locale]/projects/[projectId]/home/aggregate.ts

@@ -0,0 +1,52 @@
+import { ProjectType } from "@/types/project";
+import { testTypes, priorities } from "@/config/selection";
+
+// aggregate folder, case, run mum
+function aggregateBasicInfo(project: ProjectType) {
+  const folderNum = project.Folders.length;
+  const runNum = project.Runs.length;
+
+  let caseNum = 0;
+  project.Folders.forEach((folder) => {
+    caseNum += folder.Cases.length;
+  });
+
+  return { folderNum, runNum, caseNum };
+}
+
+// aggregate test types of each case
+function aggregateTestType(project: ProjectType) {
+  const typesCounts = {};
+  project.Folders.forEach((folder) => {
+    folder.Cases.forEach((testcase) => {
+      const type = testcase.type;
+      typesCounts[type] = (typesCounts[type] || 0) + 1;
+    });
+  });
+
+  const result = [];
+  for (let type = 0; type <= testTypes.length; type++) {
+    result.push({ type: type, count: typesCounts[type] || 0 });
+  }
+
+  return result;
+}
+
+function aggregateTestPriority(project: ProjectType) {
+  const priorityCounts = {};
+  project.Folders.forEach((folder) => {
+    folder.Cases.forEach((testcase) => {
+      const priority = testcase.priority;
+      priorityCounts[priority] = (priorityCounts[priority] || 0) + 1;
+    });
+  });
+
+  const result = [];
+  for (let priority = 0; priority <= priorities.length; priority++) {
+    result.push({ priority: priority, count: priorityCounts[priority] || 0 });
+  }
+
+  return result;
+}
+
+export { aggregateBasicInfo, aggregateTestType, aggregateTestPriority };

frontend/src/app/[locale]/projects/[projectId]/home/home.tsx

@@ -4,10 +4,15 @@ import { Divider } from "@nextui-org/react";
 import { title } from "@/components/primitives";
 import { Card, CardBody, Chip } from "@nextui-org/react";
 import { Folder, Clipboard, FlaskConical } from "lucide-react";
-import { CaseTypeCountType } from "@/types/case";
+import { CaseTypeCountType, CasePriorityCountType } from "@/types/case";
 import { HomeMessages } from "./page";
-import { testTypes } from "@/config/selection";
+import {
+  aggregateBasicInfo,
+  aggregateTestPriority,
+  aggregateTestType,
+} from "./aggregate";
 import TestTypesChart from "./TestTypesDonutChart";
+import TestPriorityChart from "./TestPriorityDonutChart";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
 
@@ -47,6 +52,8 @@ export function Home({ projectId, messages }: Props) {
   const [caseNum, setCaseNum] = useState(0);
   const [runNum, setRunNum] = useState(0);
   const [typesCounts, setTypesCounts] = useState<CaseTypeCountType[]>();
+  const [priorityCounts, setPriorityCounts] =
+    useState<CasePriorityCountType[]>();
   const url = `${apiServer}/home/${projectId}`;
 
   useEffect(() => {
@@ -65,42 +72,21 @@ export function Home({ projectId, messages }: Props) {
 
   useEffect(() => {
     async function aggregate() {
-      aggregateBasicInfo();
-      aggregateTestType();
+      const { folderNum, runNum, caseNum } = aggregateBasicInfo(project);
+      setFolderNum(folderNum);
+      setRunNum(runNum);
+      setCaseNum(caseNum);
+
+      const typeRet = aggregateTestType(project);
+      setTypesCounts([...typeRet]);
+
+      const priorityRet = aggregateTestPriority(project);
+      setPriorityCounts([...priorityRet]);
     }
 
     aggregate();
   }, [project]);
 
-  // aggregate folder, case, run mum
-  function aggregateBasicInfo() {
-    let num = 0;
-    setFolderNum(project.Folders.length);
-    setRunNum(project.Runs.length);
-    project.Folders.forEach((folder) => {
-      num += folder.Cases.length;
-    });
-    setCaseNum(num);
-  }
-
-  // aggregate test types of each case
-  function aggregateTestType() {
-    const tempTypesCounts = {};
-    project.Folders.forEach((folder) => {
-      folder.Cases.forEach((testcase) => {
-        const type = testcase.type;
-        tempTypesCounts[type] = (tempTypesCounts[type] || 0) + 1;
-      });
-    });
-
-    const result = [];
-    for (let type = 0; type <= testTypes.length; type++) {
-      result.push({ type: type, count: tempTypesCounts[type] || 0 });
-    }
-
-    setTypesCounts([...result]);
-  }
-
   return (
     <div className="container mx-auto max-w-5xl pt-6 px-6 flex-grow">
       <h1 className={title({ size: "sm" })}>{project.name}</h1>
@@ -133,17 +119,21 @@ export function Home({ projectId, messages }: Props) {
       </Card>
 
       <Divider className="my-6" />
-
       <div className="flex">
-        <div style={{ width: "32rem", height: "32rem" }}>
+        <div style={{ width: "32rem", height: "18rem" }}>
           <h3>{messages.testTypes}</h3>
           <TestTypesChart typesCounts={typesCounts} messages={messages} />
         </div>
-        <div style={{ width: "32rem", height: "32rem" }}>
-          <h3>{messages.testTypes}</h3>
-          <TestTypesChart typesCounts={typesCounts} messages={messages} />
+        <div style={{ width: "30rem", height: "18rem" }}>
+          <h3>{messages.priority}</h3>
+          <TestPriorityChart
+            priorityCounts={priorityCounts}
+            messages={messages}
+          />
         </div>
       </div>
+
+      <Divider className="my-6" />
     </div>
   );
 }

frontend/src/app/[locale]/projects/[projectId]/home/page.tsx

@@ -19,6 +19,11 @@ export type HomeMessages = {
   regression: string;
   automated: string;
   manual: string;
+  priority: string;
+  critical: string;
+  high: string;
+  medium: string;
+  low: string;
 };
 
 export default function Page({ params }: { params: { projectId: string } }) {
@@ -41,6 +46,11 @@ export default function Page({ params }: { params: { projectId: string } }) {
     regression: t("regression"),
     automated: t("automated"),
     manual: t("manual"),
+    priority: t("priority"),
+    critical: t("critical"),
+    high: t("high"),
+    medium: t("medium"),
+    low: t("low"),
   };
   return (
     <>