added plugin info icon in raw data report (#2296)

* added plugin info icon * fix test * adjusted tests * refactor pluginReportTables
intelowlproject · May 8, 2024 · 9f09897 · 9f09897
1 parent 77e7f48
commit 9f09897
Show file tree

Hide file tree

Showing 4 changed files with 295 additions and 67 deletions.
diff --git a/frontend/src/components/jobs/result/JobOverview.jsx b/frontend/src/components/jobs/result/JobOverview.jsx
@@ -19,12 +19,7 @@ import { Loader } from "@certego/certego-ui";
 import { JSONTree } from "react-json-tree";
 
 import { useNavigate, useLocation } from "react-router-dom";
-import {
-  AnalyzersReportTable,
-  ConnectorsReportTable,
-  PivotsReportTable,
-  VisualizersReportTable,
-} from "./pluginReportTables";
+import { PluginsReportTable } from "./pluginReportTables";
 import {
   reportedPluginNumber,
   reportedVisualizerNumber,
@@ -39,6 +34,7 @@ import { JobResultSections } from "../../../constants/miscConst";
 import { JobInfoCard } from "./JobInfoCard";
 import { JobIsRunningAlert } from "./JobIsRunningAlert";
 import { JobActionsBar } from "./bar/JobActionBar";
+import { usePluginConfigurationStore } from "../../../stores/usePluginConfigurationStore";
 
 /* THESE IDS CANNOT BE EMPTY!
 We perform a redirect in case the user landed in the visualzier page without a visualizer,
@@ -63,6 +59,26 @@ export function JobOverview({
 
   const isSelectedUI = section === JobResultSections.VISUALIZER;
 
+  const [
+    analyzersLoading,
+    connectorsLoading,
+    visualizersLoading,
+    pivotsLoading,
+    analyzers,
+    connectors,
+    visualizers,
+    pivots,
+  ] = usePluginConfigurationStore((state) => [
+    state.analyzersLoading,
+    state.connectorsLoading,
+    state.visualizersLoading,
+    state.pivotsLoading,
+    state.analyzers,
+    state.connectors,
+    state.visualizers,
+    state.pivots,
+  ]);
+
   const rawElements = React.useMemo(
     () => [
       {
@@ -80,7 +96,15 @@ export function JobOverview({
             />
           </div>
         ),
-        report: <AnalyzersReportTable job={job} refetch={refetch} />,
+        report: (
+          <PluginsReportTable
+            job={job}
+            refetch={refetch}
+            pluginReports={job?.analyzer_reports}
+            pluginsStored={analyzers}
+            pluginsStoredLoading={analyzersLoading}
+          />
+        ),
       },
       {
         name: "connector",
@@ -97,7 +121,15 @@ export function JobOverview({
             />
           </div>
         ),
-        report: <ConnectorsReportTable job={job} refetch={refetch} />,
+        report: (
+          <PluginsReportTable
+            job={job}
+            refetch={refetch}
+            pluginReports={job?.connector_reports}
+            pluginsStored={connectors}
+            pluginsStoredLoading={connectorsLoading}
+          />
+        ),
       },
       {
         name: "pivot",
@@ -114,7 +146,15 @@ export function JobOverview({
             />
           </div>
         ),
-        report: <PivotsReportTable job={job} refetch={refetch} />,
+        report: (
+          <PluginsReportTable
+            job={job}
+            refetch={refetch}
+            pluginReports={job?.pivot_reports}
+            pluginsStored={pivots}
+            pluginsStoredLoading={pivotsLoading}
+          />
+        ),
       },
       {
         name: "visualizer",
@@ -135,7 +175,15 @@ export function JobOverview({
             />
           </div>
         ),
-        report: <VisualizersReportTable job={job} refetch={refetch} />,
+        report: (
+          <PluginsReportTable
+            job={job}
+            refetch={refetch}
+            pluginReports={job?.visualizer_reports}
+            pluginsStored={visualizers}
+            pluginsStoredLoading={visualizersLoading}
+          />
+        ),
       },
       {
         name: "full",
@@ -158,7 +206,14 @@ export function JobOverview({
         ),
       },
     ],
-    [job],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      job,
+      analyzersLoading,
+      connectorsLoading,
+      visualizersLoading,
+      pivotsLoading,
+    ],
   );
 
   // state

diff --git a/frontend/src/components/jobs/result/pluginReportTables.jsx b/frontend/src/components/jobs/result/pluginReportTables.jsx
@@ -1,8 +1,13 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import PropTypes from "prop-types";
-import { MdOutlineRefresh, MdPauseCircleOutline } from "react-icons/md";
+import {
+  MdOutlineRefresh,
+  MdPauseCircleOutline,
+  MdInfoOutline,
+} from "react-icons/md";
 import { JSONTree } from "react-json-tree";
+import { UncontrolledPopover } from "reactstrap";
 
 import {
   DataTable,
@@ -15,6 +20,7 @@ import {
 import { StatusTag } from "../../common/StatusTag";
 import { killPlugin, retryPlugin } from "./jobApi";
 import { PluginStatuses } from "../../../constants/pluginConst";
+import { markdownToHtml } from "../../common/markdownToHtml";
 
 const tableProps = {
   columns: [
@@ -59,7 +65,7 @@ const tableProps = {
       Header: "Status",
       id: "status",
       accessor: "status",
-      Cell: ({ value }) => <StatusTag status={value} />,
+      Cell: ({ value }) => <StatusTag status={value} className="py-0" />,
       Filter: SelectOptionsFilter,
       selectOptions: Object.values(PluginStatuses),
       maxWidth: 50,
@@ -68,6 +74,38 @@ const tableProps = {
       Header: "Name",
       id: "name",
       accessor: "name",
+      Cell: ({
+        value,
+        row: { original: plugin },
+        customProps: { _job, _refetch, pluginsLoading },
+      }) => (
+        <div className="d-flex align-items-center row">
+          <div className="d-inline-block col-10 offset-1">{value}</div>
+          <div className="col-1">
+            <MdInfoOutline
+              id={`pluginReport-infoicon__${value}`}
+              className="text-secondary"
+              fontSize="20"
+            />
+            <UncontrolledPopover
+              target={`pluginReport-infoicon__${value}`}
+              placement="bottom"
+              trigger="hover"
+              popperClassName="px-2 bg-body"
+              delay={{ show: 0, hide: 200 }}
+              style={{ paddingTop: "1rem" }}
+            >
+              {pluginsLoading ? (
+                <small>
+                  <p>Description is loading</p>
+                </small>
+              ) : (
+                <small>{markdownToHtml(plugin?.description)}</small>
+              )}
+            </UncontrolledPopover>
+          </div>
+        </div>
+      ),
       Filter: DefaultColumnFilter,
       maxWidth: 300,
     },
@@ -118,67 +156,38 @@ const tableProps = {
   ),
 };
 
-export function AnalyzersReportTable({ job, refetch }) {
-  console.debug("AnalyzersReportTable rendered");
-  return (
-    <div style={{ height: "60vh", overflow: "scroll" }}>
-      <DataTable
-        data={job?.analyzer_reports}
-        customProps={{ job, refetch }}
-        {...tableProps}
-      />
-    </div>
-  );
-}
+export function PluginsReportTable({
+  job,
+  refetch,
+  pluginReports,
+  pluginsStored,
+  pluginsStoredLoading,
+}) {
+  console.debug("PluginsReportTable rendered");
+  const reports = pluginReports;
+
+  reports.forEach((report, index) => {
+    pluginsStored.forEach((plugin) => {
+      if (plugin.name === report.name) {
+        reports[index].description = plugin.description;
+      }
+    });
+  });
 
-export function ConnectorsReportTable({ job, refetch }) {
-  console.debug("ConnectorsReportTable rendered");
-  return (
-    <div style={{ height: "60vh", overflow: "scroll" }}>
-      <DataTable
-        data={job?.connector_reports}
-        customProps={{ job, refetch }}
-        {...tableProps}
-      />
-    </div>
-  );
-}
-export function PivotsReportTable({ job, refetch }) {
-  console.debug("PivotsReportTable rendered");
-  return (
-    <div style={{ height: "60vh", overflow: "scroll" }}>
-      <DataTable
-        data={job?.pivot_reports}
-        customProps={{ job, refetch }}
-        {...tableProps}
-      />
-    </div>
-  );
-}
-export function VisualizersReportTable({ job, refetch }) {
-  console.debug("VisualizersReportTable rendered");
   return (
     <div style={{ height: "60vh", overflow: "scroll" }}>
       <DataTable
-        data={job?.visualizer_reports}
-        customProps={{ job, refetch }}
+        data={reports}
+        customProps={{ job, refetch, pluginsLoading: pluginsStoredLoading }}
         {...tableProps}
       />
     </div>
   );
 }
-AnalyzersReportTable.propTypes = {
-  job: PropTypes.object.isRequired,
-};
-
-ConnectorsReportTable.propTypes = {
-  job: PropTypes.object.isRequired,
-};
-
-PivotsReportTable.propTypes = {
-  job: PropTypes.object.isRequired,
-};
 
-VisualizersReportTable.propTypes = {
+PluginsReportTable.propTypes = {
   job: PropTypes.object.isRequired,
+  pluginReports: PropTypes.array.isRequired,
+  pluginsStored: PropTypes.array.isRequired,
+  pluginsStoredLoading: PropTypes.bool.isRequired,
 };
diff --git a/frontend/tests/components/jobs/result/JobOverview.test.jsx b/frontend/tests/components/jobs/result/JobOverview.test.jsx
@@ -330,7 +330,7 @@ describe("test JobOverview (job report)", () => {
             visualizer_reports: [
               {
                 id: 730,
-                name: "Test page 1",
+                name: "Test_page_1",
                 process_time: 0.0,
                 status: "SUCCESS",
                 warnings: [],
@@ -449,7 +449,7 @@ describe("test JobOverview (job report)", () => {
             visualizer_reports: [
               {
                 id: 730,
-                name: "Test page 1",
+                name: "Test_page_1",
                 process_time: 0.0,
                 status: "RUNNING",
                 warnings: [],