Merge pull request #21 from input-output-hk/PLT-7646

PLT-7646 Fix progress % values for properties in the Timeline-View grid
input-output-hk · Sep 29, 2023 · 3797183 · 3797183
2 parents 7deb855 + 5288e5d
commit 3797183
Show file tree

Hide file tree

Showing 10 changed files with 364 additions and 155 deletions.
diff --git a/src/components/LogsView/LogsView.tsx b/src/components/LogsView/LogsView.tsx
@@ -4,86 +4,102 @@ 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<any>(null);
 
-    const showLogView = () => {
-        setShowLogs(true);
-        const timeout = setTimeout(() => {
-            clearTimeout(timeout)
-            bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); // scroll to bottom 
-        }, 2);
-    }
-
-    const hideLogView = () => {
-        setShowLogs(false)
-    }
+  const showLogView = () => {
+    setShowLogs(true);
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      bottomRef.current?.scrollIntoView({ behavior: "smooth" }); // scroll to bottom
+    }, 2);
+  };
 
+  const hideLogView = () => {
+    setShowLogs(false);
+  };
 
-    const { logInfo: logs } = useLogs(
-        runId,
-        oneTime || endPolling,
-        !oneTime
-    )
+  const { logInfo: logs } = useLogs(runId, oneTime || endPolling, !oneTime);
 
+  useEffect(() => {
+    if (endPolling && latestTestingProgress) {
+      lastLog.current = logs[logs.length - 2]
+      if (lastLog.current?.Source.indexOf('run-certify') !== -1) {
+        // is 2nd last entry in logs when Source has run-certify
+        latestTestingProgress(JSON.parse(lastLog.current.Text));
+      }
+    }
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" }); // scroll to bottom
+  }, [logs, endPolling, latestTestingProgress]);
 
-    useEffect(() => {
-        bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); // scroll to bottom 
-    }, [logs])
-
-    useEffect(() => {
-        open && showLogView()
-    }, [open])
+  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>
-        </>
-    );
+  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>
+    </>
+  );
 };
 
 export default LogsView;
diff --git a/src/components/StatusIcon/StatusIcon.tsx b/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
diff --git a/src/components/TimelineItem/timeline.helper.tsx b/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

diff --git a/src/hooks/useLocalStorage.ts b/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,

diff --git a/src/hooks/useLogs.ts b/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