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

src/components/LogsView/LogsView.tsx

@@ -4,86 +4,106 @@ import React, { FC, useState, useEffect, useRef } from "react";
 import "./LogsView.scss";
 import LogsViewEntry from "./LogsViewEntry";
 
-const LogsView: FC<{ runId: string, endPolling?: boolean, oneTime?: boolean, open?: boolean }> = ({ runId, endPolling = false, oneTime = false, open = false }) => {
-    const [showLogs, setShowLogs] = useState(false);
-    const bottomRef = useRef<HTMLDivElement>(null);
-    const logContentRef = useRef<HTMLDivElement>(null);
+const LogsView: FC<{
+  runId: string;
+  endPolling?: boolean;
+  oneTime?: boolean;
+  open?: boolean;
+  latestTestingProgress?: (progress: any) => any;
+}> = ({
+  runId,
+  endPolling = false,
+  oneTime = false,
+  open = false,
+  latestTestingProgress,
+}) => {
+  const [showLogs, setShowLogs] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const logContentRef = useRef<HTMLDivElement>(null);
+  const lastLog = useRef<number | null>(null);
 
-    const showLogView = () => {
-        setShowLogs(true);
-        const timeout = setTimeout(() => {
-            clearTimeout(timeout)
-            bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); // scroll to bottom 
-        }, 2);
-    }
+  const showLogView = () => {
+    setShowLogs(true);
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" }); // scroll to bottom
+    }, 2);
+  };
 
-    const hideLogView = () => {
-        setShowLogs(false)
-    }
+  const hideLogView = () => {
+    setShowLogs(false);
+  };
 
+  const { logInfo: logs } = useLogs(runId, oneTime || endPolling, !oneTime);
 
-    const { logInfo: logs } = useLogs(
-        runId,
-        oneTime || endPolling,
-        !oneTime
-    )
+  useEffect(() => {
+    lastLog.current = logs.length ? logs.length - 1 : null;
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" }); // scroll to bottom
+  }, [logs]);
 
+  useEffect(() => {
+    open && showLogView();
+  }, [open]);
 
-    useEffect(() => {
-        bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); // scroll to bottom 
-    }, [logs])
+  return (
+    <>
+      <div id="logContainer" className="w-full">
+        <span
+          id="viewLogsBtn"
+          className={`link ${showLogs ? "hidden" : ""}`}
+          onClick={showLogView}
+        >
+          View logs
+        </span>
+        <section
+          className={`log-information ${showLogs ? "" : "hidden"}`}
+          data-testid="log-information"
+        >
+          <div className="log-header">
+            <h5>Logs</h5>
+            <span className="minimize-btn text-right" onClick={hideLogView}>
+              <i>-</i>
+            </span>
+          </div>
+          <div className="log-content" ref={logContentRef}>
+            {logs.map((item: any, index: number) => {
+              if (
+                latestTestingProgress && 
+                lastLog.current &&
+                index === lastLog.current - 1 &&
+                item.Source.indexOf("run-certify") !== -1
+              ) {
+                // is 2nd last entry in logs when Source has run-certify
+                latestTestingProgress(JSON.parse(item.Text));
+              }
 
-    useEffect(() => {
-        open && showLogView()
-    }, [open])
-
-    return (
-        <>
-            <div id="logContainer" className="w-full">
-                <span
-                    id="viewLogsBtn"
-                    className={`link ${showLogs ? "hidden" : ""}`}
-                    onClick={showLogView}>
-                    View logs
-                </span>
-                <section className={`log-information ${showLogs ? "" : "hidden"}`} data-testid="log-information">
-                    <div className="log-header">
-                        <h5>Logs</h5>
-                        <span
-                            className="minimize-btn text-right"
-                            onClick={hideLogView}>
-                            <i>-</i>
-                        </span>
-                    </div>
-                    <div className="log-content" ref={logContentRef}>
-                        {logs.map((item: any, index: number) => {
-                            let logData = ''
-                            try {
-                                const data = JSON.parse(item.Text)
-                                const attr = data[Object.keys(data)[0]]
-                                if (attr?.fields?.hasOwnProperty('launch-config')) {
-                                    logData = attr['fields']['launch-config']
-                                }
-                                if (attr?.fields?.hasOwnProperty('chunk-data')) {
-                                    logData = attr['fields']['chunk-data']
-                                }
-                            } catch (e) {
-                                // do nothing
-                                if (typeof item.Text == 'string' && item.Text.length) {
-                                    logData = item.Text
-                                }
-                            }
-                            logData = !logData.length ? item.Text : logData
-                            return logData.length ? (
-                                <LogsViewEntry key={index} time={item.Time} log={logData} />
-                            ) : null
-                        })}
-                        <div className="empty-element" ref={bottomRef}></div>
-                    </div>
-                </section>
-            </div>
-        </>
-    );
+              let logData = "";
+              try {
+                const data = JSON.parse(item.Text);
+                const attr = data[Object.keys(data)[0]];
+                if (attr?.fields?.hasOwnProperty("launch-config")) {
+                  logData = attr["fields"]["launch-config"];
+                }
+                if (attr?.fields?.hasOwnProperty("chunk-data")) {
+                  logData = attr["fields"]["chunk-data"];
+                }
+              } catch (e) {
+                // do nothing
+                if (typeof item.Text == "string" && item.Text.length) {
+                  logData = item.Text;
+                }
+              }
+              logData = !logData.length ? item.Text : logData;
+              return logData.length ? (
+                <LogsViewEntry key={index} time={item.Time} log={logData} />
+              ) : null;
+            })}
+            <div className="empty-element" ref={bottomRef}></div>
+          </div>
+        </section>
+      </div>
+    </>
+  );
 };
 
 export default LogsView;

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/hooks/useLocalStorage.ts

@@ -1,15 +1,6 @@
 /* eslint-disable no-useless-escape */
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
-function isValidJSON(text: string) {
-  try {
-    const result = JSON.parse(text);
-    return typeof result === "object" && result !== null;
-  } catch (e) {
-    return false;
-  }
-}
-
 // <any> - string | null | boolean + to fix type errors while using the value
 function useLocalStorage<T>(
   key: string,

src/hooks/useLogs.ts

@@ -6,8 +6,6 @@ import { useDelayedApi } from "hooks/useDelayedApi";
 import { fetchData } from "api/api";
 import { Log } from '../pages/certification/Certification.helper'
 import { setStates, setEnded, setBuildInfo } from "pages/certification/slices/logRunTime.slice";
-// import { LocalStorageKeys } from "constants/constants";
-// import useLocalStorage from "./useLocalStorage";
 
 const TIME_OFFSET = 1000;
 
@@ -22,8 +20,6 @@ export const useLogs = (
     const [fetchingLogs, setFetchingLogs] = useState(false);
     const [refetchLogsOffset] = useState(1);
 
-    // const [, setCertificationRunTime] = useLocalStorage(LocalStorageKeys.certificationRunTime, null)
-
     const { startTime, endTime, runState, ended } = useAppSelector((state) => state.runTime)
 
     const enabled = !fetchingLogs && !(ended > 1) && !!uuid

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/components/FileCoverageContainer.tsx

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