Apply test run status to progress donut chart

frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx

@@ -25,11 +25,17 @@ import {
   ChevronDown,
   CopyPlus,
   CopyMinus,
+  RotateCw,
 } from "lucide-react";
-import RunProgressDounut from "./RunPregressDonutChart";
+import RunProgressChart from "./RunPregressDonutChart";
 import TestCaseSelector from "./TestCaseSelector";
 import { testRunStatus } from "@/config/selection";
-import { RunType, RunCaseType, RunCaseInfoType } from "@/types/run";
+import {
+  RunType,
+  RunCaseType,
+  RunCaseInfoType,
+  RunStatusCountType,
+} from "@/types/run";
 import { CaseType } from "@/types/case";
 import { FolderType } from "@/types/folder";
 import {
@@ -63,6 +69,8 @@ export default function RunEditor({ projectId, runId }: Props) {
   const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
   const [folders, setFolders] = useState([]);
   const [runCases, setRunCases] = useState<RunCaseType[]>([]);
+  const [runStatusCounts, setRunStatusCounts] =
+    useState<RunStatusCountType[]>();
   const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
   const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
   const [testcases, setTestCases] = useState<CaseType[]>([]);
@@ -70,11 +78,16 @@ export default function RunEditor({ projectId, runId }: Props) {
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const router = useRouter();
 
+  const fetchRunAndStatusCount = async () => {
+    const { run, statusCounts } = await fetchRun(runId);
+    setTestRun(run);
+    setRunStatusCounts(statusCounts);
+  };
+
   useEffect(() => {
     async function fetchDataEffect() {
       try {
-        const runData = await fetchRun(runId);
-        setTestRun(runData);
+        await fetchRunAndStatusCount();
         const foldersData = await fetchFolders(projectId);
         setFolders(foldersData);
         setSelectedFolder(foldersData[0]);
@@ -232,7 +245,23 @@ export default function RunEditor({ projectId, runId }: Props) {
       <div className="container mx-auto max-w-5xl pt-6 px-6 flex-grow">
         <div className="flex">
           <div>
-            <RunProgressDounut />
+            <div className="w-96 h-72">
+              <div className="flex items-center">
+                <h4 className="font-bold">Progress</h4>
+                <Tooltip content="Refresh">
+                  <Button
+                    isIconOnly
+                    size="sm"
+                    className="rounded-full bg-transparent ms-1"
+                    onPress={fetchRunAndStatusCount}
+                  >
+                    <RotateCw size={16} />
+                  </Button>
+                </Tooltip>
+              </div>
+
+              <RunProgressChart statusCounts={runStatusCounts} />
+            </div>
           </div>
           <div className="flex-grow">
             <Input
@@ -290,7 +319,7 @@ export default function RunEditor({ projectId, runId }: Props) {
         <div className="flex items-center justify-between">
           <h6 className="h-8 font-bold">Select test cases</h6>
           <div>
-            {selectedKeys.size > 0 || selectedKeys === "all" ? (
+            {(selectedKeys.size > 0 || selectedKeys === "all") && (
               <Dropdown>
                 <DropdownTrigger>
                   <Button
@@ -316,8 +345,6 @@ export default function RunEditor({ projectId, runId }: Props) {
                   </DropdownItem>
                 </DropdownMenu>
               </Dropdown>
-            ) : (
-              <></>
             )}
           </div>
         </div>

frontend/app/projects/[projectId]/runs/[runId]/RunPregressDonutChart.tsx

@@ -1,55 +1,51 @@
 import React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import dynamic from "next/dynamic";
-import { Button, Tooltip } from "@nextui-org/react";
-import { RotateCw } from "lucide-react";
+import { testRunCaseStatus } from "@/config/selection";
+import { RunStatusCountType } from "@/types/run";
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
-const testCases = [
-  { name: "Passed", value: 12, color: "#059669" },
-  { name: "Failed", value: 3, color: "#f87171" },
-  { name: "Retest", value: 4, color: "#fbbf24" },
-  { name: "Skipped", value: 14, color: "#4b5563" },
-  { name: "Untested", value: 32, color: "#e5e7eb" },
-];
+type Props = {
+  statusCounts: RunStatusCountType[];
+};
 
-export default function RunProgressDounut() {
+export default function RunProgressDounut({ statusCounts }: Props) {
   const [chartData, setChartData] = useState({
-    series: testCases.map((entry) => {
-      return entry.value;
-    }),
+    series: [],
     options: {
-      labels: testCases.map((entry) => {
-        return entry.name;
-      }),
-      colors: testCases.map((entry) => {
-        return entry.color;
-      }),
+      labels: [],
+      colors: [],
     },
   });
-  return (
-    <div className="w-96 h-72">
-      <div className="flex items-center">
-        <h4 className="font-bold">Progress</h4>
-        <Tooltip content="Refresh">
-          <Button
-            isIconOnly
-            size="sm"
-            className="rounded-full bg-transparent ms-1"
-            onPress={() => console.log("refresh")}
-          >
-            <RotateCw size={16} />
-          </Button>
-        </Tooltip>
-      </div>
 
-      <Chart
-        options={chartData.options}
-        series={chartData.series}
-        type="donut"
-        width={"100%"}
-        height={"100%"}
-      />
-    </div>
+  useEffect(() => {
+    const updateChartDate = () => {
+      if (statusCounts) {
+        const series = testRunCaseStatus.map((entry, index) => {
+          const found = statusCounts.find((itr) => itr.status === index);
+          return found ? found.count : 0;
+        });
+
+        const labels = testRunCaseStatus.map((entry) => entry.name);
+        const colors = testRunCaseStatus.map((entry) => entry.chartColor);
+
+        setChartData({
+          series,
+          options: { labels, colors },
+        });
+      }
+    };
+
+    updateChartDate();
+  }, [statusCounts]);
+
+  return (
+    <Chart
+      options={chartData.options}
+      series={chartData.series}
+      type="donut"
+      width={"100%"}
+      height={"100%"}
+    />
   );
 }