Frontend - fixed playbook flows

frontend/src/components/plugins/flows/CustomPivotNode.jsx

@@ -3,12 +3,19 @@ import PropTypes from "prop-types";
 import { Handle, Position, NodeToolbar } from "reactflow";
 import "reactflow/dist/style.css";
 import { Badge } from "reactstrap";
+import { IoMdWarning } from "react-icons/io";
 
 function CustomPivotNode({ data }) {
   return (
     <>
       <NodeToolbar position="top" align="start" isVisible offset={3}>
         <Badge className="bg-advisory">Pivot</Badge>
+        {data?.warning && (
+          <IoMdWarning
+            id="pivot-warning-icon"
+            className="text-warning my-1 ms-1"
+          />
+        )}
       </NodeToolbar>
       {/* Info */}
       <NodeToolbar
@@ -20,6 +27,18 @@ function CustomPivotNode({ data }) {
         id={`toolbar-pivot-${data.id}`}
         className="p-3 px-4 my-2 mx-2 d-flex flex-column bg-body"
       >
+        {data?.warning && (
+          <div
+            className="d-flex align-items-center px-1 mb-1"
+            style={{ border: "1px solid #d98e16", borderRadius: "5px" }}
+          >
+            <IoMdWarning className="text-warning m-1" />
+            <small className="me-1">
+              This pivot will always fail as the playbook to execute is not
+              configured or enabled
+            </small>
+          </div>
+        )}
         <small className="d-flex justify-content-between">
           <span className="me-4">Analyzers:</span>
           <span className="text-advisory">{data?.analyzers || "-"}</span>

frontend/src/components/plugins/flows/CustomPlaybookNode.jsx

@@ -3,13 +3,19 @@ import PropTypes from "prop-types";
 import { Handle, Position, NodeToolbar } from "reactflow";
 import "reactflow/dist/style.css";
 import { Badge } from "reactstrap";
+import { IoMdWarning } from "react-icons/io";
 
 function CustomPlaybookNode({ data }) {
   return (
     <>
       {/* Badge */}
       <NodeToolbar position="top" align="start" isVisible offset={3}>
-        <Badge className="bg-secondary">Playbook</Badge>
+        <Badge
+          className="bg-secondary"
+          style={{ opacity: data.configured ? "1" : "0.5" }}
+        >
+          Playbook
+        </Badge>
       </NodeToolbar>
       {/* Info */}
       <NodeToolbar
@@ -19,10 +25,13 @@ function CustomPlaybookNode({ data }) {
           borderRadius: "10px",
         }}
         id={`toolbar-pivot-${data.id}`}
-        className="p-3 px-4 my-2 mx-2 d-flex flex-column bg-body"
+        className="p-3 px-4 my-2 mx-2 d-flex bg-body"
       >
+        {!data.configured && <IoMdWarning className="text-warning my-1 me-2" />}
         <small
-          className="d-flex justify-content-between"
+          className={`d-flex justify-content-between text-white ${
+            !data.configured && "fst-italic"
+          }`}
           style={{ maxWidth: "25vh" }}
         >
           <span>{data?.description}</span>
@@ -34,6 +43,7 @@ function CustomPlaybookNode({ data }) {
         style={{
           border: `1px solid`,
           minWidth: "250px",
+          opacity: data.configured ? "1" : "0.5",
         }}
       >
         <strong>{data?.label}</strong>

frontend/src/components/plugins/flows/utils.js

@@ -33,6 +33,7 @@ function addNode(
     node.data = {
       ...node.data,
       description: nodeToAdd?.description,
+      configured: nodeToAdd?.configured,
     };
   }
   nodesList.push(node);
@@ -58,9 +59,26 @@ function addNode(
     });
   } else if (nodeToAdd.playbooks_choice) {
     nodeToAdd.playbooks_choice.forEach((child) => {
-      const playbookConfig = playbooksStored.find(
-        (plugin) => plugin.name === child,
-      );
+      let playbookConfig = {};
+      playbookConfig = playbooksStored.find((plugin) => plugin.name === child);
+      if (playbookConfig === undefined) {
+        playbookConfig = {};
+        playbookConfig.id = `${child}`;
+        playbookConfig.name = child;
+        playbookConfig.description =
+          "The playbook is not enabled or configured for this user.";
+        playbookConfig.pivots = [];
+        playbookConfig.configured = false;
+
+        // set warning in the current pivot, it will always fail
+        const pivotIndex = nodesList.findIndex(
+          (pivotNode) => pivotNode.id === `${nodeType}-${nodeToAdd.id}`,
+        );
+        const pivotNode = nodesList[pivotIndex];
+        pivotNode.data.warning = true;
+      } else {
+        playbookConfig.configured = true;
+      }
       addNode(
         nodesList,
         edgesList,
@@ -92,6 +110,7 @@ export function getNodesAndEdges(playbook, pivotsStored, playbooksStored) {
         id: playbook.id,
         label: playbook.name,
         description: playbook.description,
+        configured: true,
       },
       type: "playbookNode",
       draggable: false,
@@ -131,7 +150,7 @@ export function getNodesAndEdges(playbook, pivotsStored, playbooksStored) {
       300,
       60,
       50,
-      35,
+      50,
     );
     return [layoutedNodes, layoutedEdges];
   }

frontend/src/components/plugins/tables/pluginTableColumns.jsx

@@ -349,6 +349,7 @@ export const playbookTableColumns = [
     ),
     disableSortBy: true,
     Filter: SelectColumnFilter,
+    maxWidth: 145,
   },
   {
     Header: "Pivots",
@@ -359,6 +360,7 @@ export const playbookTableColumns = [
     ),
     disableSortBy: true,
     Filter: SelectColumnFilter,
+    maxWidth: 145,
   },
   {
     Header: "Visualizers",
@@ -369,14 +371,15 @@ export const playbookTableColumns = [
     ),
     disableSortBy: true,
     Filter: SelectColumnFilter,
+    maxWidth: 145,
   },
   {
     Header: "Actions",
     id: "actions",
     accessor: (playbookConfig) => playbookConfig,
     disableSortBy: true,
     Cell: ({ value }) => (
-      <div className="d-flex justify-content-center mx-2">
+      <div className="d-flex flex-wrap justify-content-center mx-2">
         <PlaybookFlowsButton playbook={value} />
         <OrganizationPluginStateToggle
           pluginName={value?.name}
@@ -398,7 +401,6 @@ export const playbookTableColumns = [
         )}
       </div>
     ),
-    maxWidth: 100,
   },
 ];
 

frontend/tests/components/plugins/flows/PlaybookFlows.test.jsx

@@ -106,4 +106,65 @@ describe("test PlaybookFlows", () => {
     expect(secondPlaybookBadge).toBeInTheDocument();
     expect(secondPlaybookBadge.className).toContain("badge bg-secondary");
   });
+
+  test("PlaybookFlows - playbook + pivot + playbook not configured", () => {
+    mockedUsePluginConfigurationStore.pivots.push({
+      id: 3,
+      name: "TEST_PIVOT_ERROR",
+      description: "pivot: test",
+      python_module: "self_analyzable.SelfAnalyzable",
+      playbooks_choice: ["NO_CONFIGURED_PLAYBOOK"],
+      disabled: false,
+      soft_time_limit: 60,
+      routing_key: "default",
+      health_check_status: true,
+      delay: "00:00:00",
+      health_check_task: null,
+      config: {
+        queue: "default",
+        soft_time_limit: 60,
+      },
+      related_analyzer_configs: ["TEST_ANALYZER"],
+      secrets: {},
+      params: {},
+      verification: {
+        configured: true,
+        details: "Ready to use!",
+        missing_secrets: [],
+      },
+    });
+    mockedPlaybooks.TEST_PLAYBOOK_DOMAIN.pivots = ["TEST_PIVOT_ERROR"];
+
+    const { container } = render(
+      <BrowserRouter>
+        <PlaybookFlows playbook={mockedPlaybooks.TEST_PLAYBOOK_DOMAIN} />
+      </BrowserRouter>,
+    );
+    // Root node (playbook)
+    const rootNode = container.querySelector("#playbook-2");
+    expect(rootNode).toBeInTheDocument();
+    expect(rootNode.textContent).toBe("TEST_PLAYBOOK_DOMAIN");
+    const playbookBadge = screen.getAllByText("Playbook")[0];
+    expect(playbookBadge).toBeInTheDocument();
+    expect(playbookBadge.className).toContain("badge bg-secondary");
+    // pivot node
+    const pivotNode = container.querySelector("#pivot-3");
+    expect(pivotNode).toBeInTheDocument();
+    expect(pivotNode.textContent).toBe("TEST_PIVOT_ERROR");
+    const pivotBadge = screen.getByText("Pivot");
+    expect(pivotBadge).toBeInTheDocument();
+    expect(pivotBadge.className).toContain("bg-advisory badge");
+    const pivotWarningIcon = container.querySelector("#pivot-warning-icon");
+    expect(pivotWarningIcon).toBeInTheDocument();
+    // second playbook
+    const secondPlaybookNode = container.querySelector(
+      "#playbook-NO_CONFIGURED_PLAYBOOK",
+    );
+    expect(secondPlaybookNode).toBeInTheDocument();
+    expect(secondPlaybookNode.textContent).toBe("NO_CONFIGURED_PLAYBOOK");
+    const secondPlaybookBadge = screen.getAllByText("Playbook")[1];
+    expect(secondPlaybookBadge).toBeInTheDocument();
+    expect(secondPlaybookBadge.className).toContain("badge bg-secondary");
+    expect(secondPlaybookBadge).toHaveStyle(`opacity: 0.5`);
+  });
 });