PLT-7646 Fix progress % values for properties in the Timeline-View grid

src/components/StatusIcon/StatusIcon.tsx

@@ -0,0 +1,18 @@
+const StatusIcon: React.FC<{
+    iconName: string;
+    altText?: string;
+  }> = ({
+    iconName,
+    altText,
+    ...props
+  }) => {
+
+    return <img
+        className="image"
+        src={`/images/${iconName}.svg`}
+        alt={altText || (iconName)}
+        {...props}
+    />
+}
+
+export default StatusIcon

src/components/TimelineItem/timeline.helper.tsx

@@ -58,19 +58,6 @@ export const processTimeLineConfig = (
       const currentState =
         status === "finished" ? "passed" : state || "running";
       let returnObj: any = { ...item, state: currentState };
-      // if (
-      //   status === "certifying" &&
-      //   currentState === "running" &&
-      //   res.data.progress &&
-      //   res.data.plan
-      // ) {
-      //   const plannedTasksCount = getPlannedCertificationTaskCount(res.data.plan);
-      //   if (plannedTasksCount > 0) {
-      //     returnObj["progress"] = Math.trunc((res.data.progress["finished-tasks"].length / plannedTasksCount) * 100);
-      //   } else {
-      //     returnObj["progress"] = 0;
-      //   }
-      // }
       return returnObj;
     }
     // Set the previously executed states as passed

src/pages/certification/Certification.helper.tsx

@@ -1,6 +1,13 @@
 import { formatToTitleCase } from "utils/utils";
 
-export const CertificationTasks = [{
+export interface ICertificationTask {
+  label: string;
+  key: string;
+  type: string;
+  name: string;
+  runTimeTaken?: any;
+}
+export const CertificationTasks: ICertificationTask[] = [{
   label: 'UnitTests',
   key: '_certRes_unitTestResults',
   type: 'array',
@@ -53,6 +60,18 @@ export const isAnyTaskFailure = (result: any) => {
   return flag ? true : false;
 }
 
+export const isTaskSuccess = (result: any, taskName: string) => {
+  let failed = false;
+  if (taskName === '_certRes_unitTestResults') {
+    failed = result.filter((item: any) => (typeof item !== 'string' && item.resultOutcome.tag === 'Failure'))?.length ? true : false
+  } else if (taskName === '_certRes_DLTests') {
+    failed = result.filter((item: any) =>  item[1].tag === 'Failure')?.length ? true : false
+  } else {
+    failed = result.tag === "Failure"
+  }
+  return !failed
+}
+
 export const processTablesDataForChart = (resultObj: any, tableAttr: string) => {
   let totalCount = 0
   try {

src/pages/certification/certification-result/CertificationResult.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useRef } from "react";
 import { useParams } from "react-router";
 import { useLocation } from "react-router-dom";
 
@@ -21,7 +21,7 @@ import "../Certification.scss";
 import DownloadResult from "../components/DownloadResult/DownloadResult";
 import ProgressCard from "components/ProgressCard/ProgressCard";
 import FullReportTable from "./FullReportTable";
-import { isAnyTaskFailure } from "../Certification.helper";
+import { isAnyTaskFailure, isTaskSuccess, taskKeys } from "../Certification.helper";
 
 const CertificationResult = () => {
   const param = useParams<{ uuid: string }>();
@@ -32,6 +32,9 @@ const CertificationResult = () => {
   const [errorToast, setErrorToast] = useState(false);
   const [timelineConfig, setTimelineConfig] = useState(TIMELINE_CONFIG);
 
+  const propertyBasedTestProgressTotal = useRef<number>(0)
+  const currentPropertyBasedTestProgress = useRef<number>(0)
+
   useEffect(() => {
     (async () => {
       try {
@@ -52,6 +55,16 @@ const CertificationResult = () => {
           const unitTestResult = processFinishedJson(resultJson);
           setUnitTestSuccess(unitTestResult);
           setResultData(resultJson);
+          const resultTaskKeys = Object.keys(resultJson)
+          const certificationTaskKeys = taskKeys();
+          let resultTaskKeysLength = 0;
+          resultTaskKeys.forEach((key: any) => {
+            if (certificationTaskKeys.indexOf(key) !== -1 && resultJson[key]) {
+              currentPropertyBasedTestProgress.current += isTaskSuccess(resultJson[key], key) ? 100 : 0
+              resultTaskKeysLength++;
+            }
+          })
+          propertyBasedTestProgressTotal.current = resultTaskKeysLength * 100
         }
       } catch (error) {
         handleErrorScenario();
@@ -101,7 +114,7 @@ const CertificationResult = () => {
                   result={resultData}
                   coverageFile={coverageFile}
                 />}
-                {/* <ProgressCard title={"Property Based Testing"} currentValue={100} totalValue={1000} /> */}
+                <ProgressCard title={"Property Based Testing"} currentValue={currentPropertyBasedTestProgress.current} totalValue={propertyBasedTestProgressTotal.current} />
 
               </div>
             </>) : null}

src/pages/certification/certification-result/FullReportTable.tsx

@@ -4,6 +4,7 @@ import TableComponent from "components/Table/Table"
 import { generateCollapsibleContent, processData } from "./fullReportTable.helper";
 
 import './fullReportTable.css';
+import StatusIcon from "components/StatusIcon/StatusIcon";
 
 const columns = [
   {
@@ -17,17 +18,9 @@ const columns = [
     disableSortBy: true,
     Cell: (props: any) => {
       if (props.row.original.status === 'success') {
-        return <img
-          className="image"
-          src="/images/passed.svg"
-          alt="success"
-        />
+        return <StatusIcon iconName={"passed"} altText={"success"} />
       } else if (props.row.original.status === 'failure') {
-        return <img
-          className="image"
-          src="/images/failed.svg"
-          alt="failure"
-        />
+        return <StatusIcon iconName={"failed"} />
       } else { return null; }
     }
   }

src/pages/certification/certification-result/fullReportTable.css

@@ -1,6 +1,6 @@
 .task-details {
     padding: 20px ;
     overflow: auto;
-    max-width: calc(100vw - 400px);
+    max-width: calc(100vw - 457px);
     max-height: 500px;
 }

src/pages/certification/components/FileCoverageContainer.tsx

@@ -97,7 +97,7 @@ const FileCoverageContainer: React.FC<{
     return (<>
         {coverageIndexFiles ? (
             <div id="coverageIndicator">
-                <ul>{renderRows()}</ul>
+                {renderRows()}
             </div>
         ) : null}
     </>);

src/pages/certification/components/TimelineView/TimelineView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useConfirm } from "material-ui-confirm";
@@ -15,7 +15,9 @@ import { TIMELINE_CONFIG } from "compositions/Timeline/timeline.config";
 import { processFinishedJson, processTimeLineConfig } from "components/TimelineItem/timeline.helper";
 import {
   CertificationTasks,
+  ICertificationTask,
   isAnyTaskFailure,
+  isTaskSuccess,
 } from "./../../Certification.helper";
 import LogsView from "components/LogsView/LogsView";
 import ProgressCard from "components/ProgressCard/ProgressCard";
@@ -24,11 +26,13 @@ import DownloadResult from "../DownloadResult/DownloadResult";
 import FileCoverageContainer from "../FileCoverageContainer";
 import { clearPersistentStates } from "../AuditorRunTestForm/utils";
 import Loader from "components/Loader/Loader";
+import StatusIcon from "components/StatusIcon/StatusIcon";
 
 
 const TIMEOFFSET = 1000;
 
 interface PlanObj {
+  key: string;
   name: string;
   label: string;
   discarded: number;
@@ -59,6 +63,8 @@ const TimelineView: React.FC<{
   const [hasFailedTasks, setHasFailedTasks] = useState(false);
   const [plannedTestingTasks, setPlannedTestingTasks] = useState<PlanObj[]>([]);
 
+  const currentPropertyBasedTestProgress = useRef<string[]>([]);
+
   const abortTestRun = () => {
     confirm({ title: "", description: "Are sure you want to abort this run!" })
       .then(async () => {
@@ -85,10 +91,14 @@ const TimelineView: React.FC<{
       if (!plannedTestingTasks.length && resPlan.length) {
         setPlannedTestingTasks(
           resPlan.map((item: { index: number; name: string }) => {
+            const TaskConfig: ICertificationTask | undefined = CertificationTasks.find((task) => task.name === item.name)
+            if (!TaskConfig) {
+              return null;
+            }
             return {
+              key: TaskConfig.key,
               name: item.name,
-              label: CertificationTasks.find((task) => task.name === item.name)
-                ?.label,
+              label: TaskConfig.label,
               discarded: 0,
               progress: 0,
             };
@@ -113,6 +123,7 @@ const TimelineView: React.FC<{
               resProgress["finished-tasks"].forEach((entry: any) => {
                 if (item.name === entry["task"]["name"] && entry.succeeded) {
                   item.progress = 100;
+                  recalculateTestTaskProgress(entry['task'])
                 }
               });
             }
@@ -123,6 +134,12 @@ const TimelineView: React.FC<{
     }
   };
 
+  const recalculateTestTaskProgress = (task: any) => {
+    if (currentPropertyBasedTestProgress.current.indexOf(task['name']) === -1) {
+      currentPropertyBasedTestProgress.current.push(task['name'])
+    }
+  }
+
   const triggerFetchRunStatus = async () => {
     let config = timelineConfig;
     try {
@@ -251,14 +268,14 @@ const TimelineView: React.FC<{
 
             {runStatus === "certifying" || runStatus === "finished" ? (
               <>
-                <div className="flex justify-around">
+                <div className="flex justify-around flex-wrap gap-[8px]">
                   {runStatus === "finished" && <FileCoverageContainer
                       githubLink={repo || ""}
                       result={resultData}
                       coverageFile={coverageFile}
                     />
                   }
-                  {/* <ProgressCard title={"Property Based Testing"} currentValue={100} totalValue={1000}/> */}
+                  <ProgressCard title={"Property Based Testing"} currentValue={currentPropertyBasedTestProgress.current.length * 100} totalValue={plannedTestingTasks.length * 100}/>
                 </div>
 
                 <div id="testingProgressContainer" className="mt-20">
@@ -277,7 +294,7 @@ const TimelineView: React.FC<{
                       </tr>
                     </thead>
                     <tbody>
-                      {plannedTestingTasks.map((task: PlanObj) => {
+                      {plannedTestingTasks.map((task: PlanObj, index: number) => {
                         return (
                           <tr
                             key={task.name}
@@ -290,15 +307,22 @@ const TimelineView: React.FC<{
                               {task.discarded}
                             </td>
                             <td className="text-center whitespace-nowrap p-2">
-                              {task.progress === 100 ? (
-                                <img
-                                  className="image"
-                                  src="/images/status-check.svg"
-                                  alt="complete"
-                                />
-                              ) : (
-                                <span>{task.progress}%</span>
-                              )}
+                              {
+                              (runStatus === "finished" && (plannedTestingTasks.length - 1 === index))
+                              ? (isTaskSuccess(resultData[task.key], task.key) ?
+                                  (<>
+                                    <StatusIcon iconName={"status-check"} altText={"passed"} /> 
+                                    {recalculateTestTaskProgress(task)}
+                                  </>)
+                                  : <StatusIcon iconName={"failed"} />
+                                ) 
+                              : (task.progress === 100 ?
+                                  <StatusIcon iconName={"status-check"} altText={"passed"} />
+                                  : <span>{task.progress}%</span>
+                                )
+
+                              }
+
                             </td>
                           </tr>
                         );