Job reports improvements

frontend/src/components/jobs/result/JobInfoIcon.jsx

@@ -38,5 +38,4 @@ export function JobInfoIcon({ job }) {
 
 JobInfoIcon.propTypes = {
   job: PropTypes.object.isRequired,
-  countryInfo: PropTypes.object.isRequired,
 };

frontend/src/components/jobs/result/JobOverview.jsx

@@ -221,9 +221,11 @@ export function JobOverview({
   const location = useLocation();
   const [UIElements, setUIElements] = useState([]);
   console.debug(
-    `location pathname: ${location.pathname}, state: ${JSON.stringify(
-      location?.state,
-    )}`,
+    `location pathname: ${
+      location.pathname
+    }, state - userChanged: ${JSON.stringify(
+      location?.state?.userChanged,
+    )}, state - jobReport: #${location?.state?.jobReport.id}`,
   );
 
   useEffect(() => {
@@ -395,7 +397,7 @@ export function JobOverview({
                       `/jobs/${job.id}/${
                         JobResultSections.VISUALIZER
                       }/${encodeURIComponent(UIElements[0].name)}`,
-                      { state: { userChanged: true } },
+                      { state: { userChanged: true, jobReport: job } },
                     )
                   }
                 >
@@ -408,7 +410,7 @@ export function JobOverview({
                   onClick={() =>
                     navigate(
                       `/jobs/${job.id}/${JobResultSections.RAW}/${rawElements[0].name}`,
-                      { state: { userChanged: true } },
+                      { state: { userChanged: true, jobReport: job } },
                     )
                   }
                 >
@@ -438,7 +440,9 @@ export function JobOverview({
                                 }/${section}/${encodeURIComponent(
                                   componentsObject.name,
                                 )}`,
-                                { state: { userChanged: true } },
+                                {
+                                  state: { userChanged: true, jobReport: job },
+                                },
                               )
                             }
                           >

frontend/src/components/jobs/result/JobResult.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 import useTitle from "react-use/lib/useTitle";
-import { useParams } from "react-router-dom";
+import { useParams, useLocation } from "react-router-dom";
 
 import { Loader } from "@certego/certego-ui";
-import axios from "axios";
+import useAxios from "axios-hooks";
 import { WEBSOCKET_JOBS_URI, JOB_BASE_URI } from "../../../constants/apiURLs";
 import { JobOverview } from "./JobOverview";
 
@@ -17,9 +17,10 @@ import { JobFinalStatuses } from "../../../constants/jobConst";
 export default function JobResult() {
   console.debug("JobResult rendered!");
 
+  // state
+  const location = useLocation();
   const [initialLoading, setInitialLoading] = React.useState(true);
-  const [initialError, setInitialError] = React.useState("");
-  const [job, setJob] = React.useState(undefined);
+  const [job, setJob] = React.useState(location.state?.jobReport || undefined);
   // this state var is used to check if we notified the user, in this way we avoid to notify more than once
   const [notified, setNotified] = React.useState(false);
   // this state var is used to check if the user changed page, in case he waited the result on the page we avoid the notification
@@ -53,7 +54,11 @@ export default function JobResult() {
       `notified: ${notified}, toNotify: ${toNotify}`,
   );
 
-  const getJob = () => axios.get(`${JOB_BASE_URI}/${jobId}`);
+  // useAxios caches the request by default
+  const [{ data: respData, loading, error }, refetchJob] = useAxios({
+    url: `${JOB_BASE_URI}/${jobId}`,
+  });
+
   useEffect(() => {
     /* INITIAL SETUP:
     - add a focus listener:
@@ -66,12 +71,10 @@ export default function JobResult() {
       setToNotify(false);
     });
     window.addEventListener("blur", () => setToNotify(true));
-    getJob()
-      .then((response) => setJob(response.data))
-      .catch((err) => setInitialError(err))
-      .finally((_) => setInitialLoading(false));
+    if (!job && respData && !loading && error == null) setJob(respData);
+    if (!loading) setInitialLoading(false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [loading]);
 
   // page title
   useTitle(
@@ -133,12 +136,12 @@ export default function JobResult() {
   return (
     <Loader
       loading={initialLoading}
-      error={initialError}
+      error={error}
       render={() => (
         <JobOverview
           isRunningJob={jobIsRunning}
           job={job}
-          refetch={getJob}
+          refetch={refetchJob}
           section={section}
           subSection={subSection}
         />

frontend/src/components/jobs/result/pluginReportTables.jsx

@@ -19,7 +19,7 @@ import {
 
 import { StatusTag } from "../../common/StatusTag";
 import { killPlugin, retryPlugin } from "./jobApi";
-import { PluginStatuses } from "../../../constants/pluginConst";
+import { PluginStatuses, PluginsTypes } from "../../../constants/pluginConst";
 import { markdownToHtml } from "../../common/markdownToHtml";
 
 const tableProps = {
@@ -83,12 +83,12 @@ const tableProps = {
           <div className="d-inline-block col-10 offset-1">{value}</div>
           <div className="col-1">
             <MdInfoOutline
-              id={`pluginReport-infoicon__${value}`}
+              id={`pluginReport-infoicon__${value.replaceAll(" ", "_")}`}
               className="text-secondary"
               fontSize="20"
             />
             <UncontrolledPopover
-              target={`pluginReport-infoicon__${value}`}
+              target={`pluginReport-infoicon__${value.replaceAll(" ", "_")}`}
               placement="bottom"
               trigger="hover"
               popperClassName="px-2 bg-body"
@@ -168,7 +168,12 @@ export function PluginsReportTable({
 
   reports.forEach((report, index) => {
     pluginsStored.forEach((plugin) => {
-      if (plugin.name === report.name) {
+      if (
+        (report.type !== PluginsTypes.VISUALIZER &&
+          plugin.name === report.name) ||
+        (report.type === PluginsTypes.VISUALIZER &&
+          plugin.name === report.config)
+      ) {
         reports[index].description = plugin.description;
       }
     });