From 1ba910bf320fee7af3f58708ad79a944242f1283 Mon Sep 17 00:00:00 2001 From: Martina Carella Date: Wed, 22 May 2024 12:15:13 +0200 Subject: [PATCH] Job reports improvements (#2337) * adjusted job reports * fix plugin icon id * fix visualizer description --- .../components/jobs/result/JobInfoIcon.jsx | 1 - .../components/jobs/result/JobOverview.jsx | 16 ++++++----- .../src/components/jobs/result/JobResult.jsx | 27 ++++++++++--------- .../jobs/result/pluginReportTables.jsx | 13 ++++++--- frontend/src/stores/useJobOverviewStore.jsx | 20 -------------- 5 files changed, 34 insertions(+), 43 deletions(-) delete mode 100644 frontend/src/stores/useJobOverviewStore.jsx diff --git a/frontend/src/components/jobs/result/JobInfoIcon.jsx b/frontend/src/components/jobs/result/JobInfoIcon.jsx index 4bd719fd86..ff0fb80ce8 100644 --- a/frontend/src/components/jobs/result/JobInfoIcon.jsx +++ b/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, }; diff --git a/frontend/src/components/jobs/result/JobOverview.jsx b/frontend/src/components/jobs/result/JobOverview.jsx index a77e24cae7..bc90d127eb 100644 --- a/frontend/src/components/jobs/result/JobOverview.jsx +++ b/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 } }, ) } > @@ -440,7 +442,9 @@ export function JobOverview({ }/${section}/${encodeURIComponent( componentsObject.name, )}`, - { state: { userChanged: true } }, + { + state: { userChanged: true, jobReport: job }, + }, ) } > diff --git a/frontend/src/components/jobs/result/JobResult.jsx b/frontend/src/components/jobs/result/JobResult.jsx index 48efd1b086..c57bf4fbe4 100644 --- a/frontend/src/components/jobs/result/JobResult.jsx +++ b/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 ( ( diff --git a/frontend/src/components/jobs/result/pluginReportTables.jsx b/frontend/src/components/jobs/result/pluginReportTables.jsx index 2a4248b6d6..79be3188f7 100644 --- a/frontend/src/components/jobs/result/pluginReportTables.jsx +++ b/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 = {
{value}
{ 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; } }); diff --git a/frontend/src/stores/useJobOverviewStore.jsx b/frontend/src/stores/useJobOverviewStore.jsx deleted file mode 100644 index c9f2061e3a..0000000000 --- a/frontend/src/stores/useJobOverviewStore.jsx +++ /dev/null @@ -1,20 +0,0 @@ -/* This store is used to save the data about the section selected by the user in the JobOverview (raw or UI). - -This store is required because we have a problem with the rendering logic for the jobs: -JobResult correctly handle the polling and the rendering of the job data (when some data are available). -JobOverview need to wrap the job's metadata, the UI and the raw format. -Unfortunately in case the jobs require some time to be completed the JobResult perform other requests and this lead to a re-render of JobOverview. -If the section(UI/raw) selection is stored in JobOverview's state, for each request the preference is resetted: -we need to move the user selection preference outside the component (here). -*/ - -import { create } from "zustand"; - -export const useJobOverviewStore = create((set) => ({ - isSelectedUI: true, - activeElement: undefined, - setIsSelectedUI: (isSelectedUI) => set(() => ({ isSelectedUI })), - setActiveElement: (activeElement) => set(() => ({ activeElement })), - resetJobOverview: () => - set(() => ({ isSelectedUI: true, activeElement: undefined })), -}));