Frontend - HealthCheck and Pull buttons

frontend/src/components/plugins/types/pluginActionsButtons.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Spinner, Button, Modal, ModalHeader, ModalBody } from "reactstrap";
 import { RiHeartPulseLine } from "react-icons/ri";
-import { MdDelete } from "react-icons/md";
+import { MdDelete, MdFileDownload } from "react-icons/md";
 import { BsPeopleFill } from "react-icons/bs";
 
 import { IconButton } from "@certego/certego-ui";
@@ -12,8 +12,8 @@ import { useOrganizationStore } from "../../../stores/useOrganizationStore";
 import { usePluginConfigurationStore } from "../../../stores/usePluginConfigurationStore";
 
 // we can't delete this function because IconButton expects Icon as a function
-function PluginHealthSpinner() {
-  return <Spinner type="ripple" size="sm" className="text-darker" />;
+function PluginSpinner() {
+  return <Spinner type="border" size="sm" className="text-darker" />;
 }
 
 export function PluginHealthCheckButton({ pluginName, pluginType_ }) {
@@ -26,39 +26,32 @@ export function PluginHealthCheckButton({ pluginName, pluginType_ }) {
     ),
   );
   const [isLoading, setIsLoading] = React.useState(false);
-  const [isHealthy, setIsHealthy] = React.useState(undefined);
 
   const onClick = async () => {
     setIsLoading(true);
-    const status = await checkPluginHealth(pluginType_, pluginName);
-    setIsHealthy(status);
+    await checkPluginHealth(pluginType_, pluginName);
     setIsLoading(false);
   };
 
   return (
-    <div className="d-flex flex-column align-items-center">
+    <div className="d-flex flex-column align-items-center px-2">
       <IconButton
         id={`table-pluginhealthcheckbtn__${pluginName}`}
         color="info"
         size="sm"
-        Icon={!isLoading ? RiHeartPulseLine : PluginHealthSpinner}
-        title={!isLoading ? "perform health check" : "please wait..."}
+        Icon={!isLoading ? RiHeartPulseLine : PluginSpinner}
+        title={!isLoading ? "Perform health check" : "Please wait..."}
         onClick={onClick}
         titlePlacement="top"
       />
-      {isHealthy !== undefined &&
-        (isHealthy ? (
-          <span className="mt-2 text-success">Up and running!</span>
-        ) : (
-          <span className="mt-2 text-warning">Failing!</span>
-        ))}
     </div>
   );
 }
 
 PluginHealthCheckButton.propTypes = {
   pluginName: PropTypes.string.isRequired,
-  pluginType_: PropTypes.oneOf(["analyzer", "connector"]).isRequired,
+  pluginType_: PropTypes.oneOf(["analyzer", "connector", "ingestor", "pivot"])
+    .isRequired,
 };
 
 export function OrganizationPluginStateToggle({
@@ -212,3 +205,41 @@ export function PlaybooksDeletionButton({ playbookName }) {
 PlaybooksDeletionButton.propTypes = {
   playbookName: PropTypes.string.isRequired,
 };
+
+export function PluginPullButton({ pluginName, pluginType_ }) {
+  const { pluginPull } = usePluginConfigurationStore(
+    React.useCallback(
+      (state) => ({
+        pluginPull: state.pluginPull,
+      }),
+      [],
+    ),
+  );
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const onClick = async () => {
+    setIsLoading(true);
+    await pluginPull(pluginType_, pluginName);
+    setIsLoading(false);
+  };
+
+  return (
+    <div className="d-flex flex-column align-items-center px-2">
+      <IconButton
+        id={`table-pluginpullbtn__${pluginName}`}
+        color="info"
+        size="sm"
+        Icon={!isLoading ? MdFileDownload : PluginSpinner}
+        title={!isLoading ? "Pull" : "Please wait..."}
+        onClick={onClick}
+        titlePlacement="top"
+      />
+    </div>
+  );
+}
+
+PluginPullButton.propTypes = {
+  pluginName: PropTypes.string.isRequired,
+  pluginType_: PropTypes.oneOf(["analyzer", "connector", "ingestor", "pivot"])
+    .isRequired,
+};

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

@@ -23,6 +23,7 @@ import {
   OrganizationPluginStateToggle,
   PluginHealthCheckButton,
   PlaybooksDeletionButton,
+  PluginPullButton,
 } from "./pluginActionsButtons";
 import { JobTypes } from "../../../constants/jobConst";
 
@@ -206,12 +207,14 @@ export const analyzersTableColumns = [
           refetch={value?.refetch}
           type={PluginsTypes.ANALYZER}
         />
-        {value?.docker_based && (
-          <PluginHealthCheckButton
-            pluginName={value.name}
-            pluginType_={PluginsTypes.ANALYZER}
-          />
-        )}
+        <PluginHealthCheckButton
+          pluginName={value.name}
+          pluginType_={PluginsTypes.ANALYZER}
+        />
+        <PluginPullButton
+          pluginName={value.name}
+          pluginType_={PluginsTypes.ANALYZER}
+        />
       </div>
     ),
     maxWidth: 100,
@@ -271,6 +274,10 @@ export const connectorTableColumns = [
           pluginName={value?.name}
           pluginType_={PluginsTypes.CONNECTOR}
         />
+        <PluginPullButton
+          pluginName={value.name}
+          pluginType_={PluginsTypes.CONNECTOR}
+        />
       </div>
     ),
     maxWidth: 125,
@@ -324,6 +331,14 @@ export const pivotTableColumns = [
           refetch={value?.refetch}
           type={PluginsTypes.PIVOT}
         />
+        <PluginHealthCheckButton
+          pluginName={value.name}
+          pluginType_={PluginsTypes.PIVOT}
+        />
+        <PluginPullButton
+          pluginName={value.name}
+          pluginType_={PluginsTypes.PIVOT}
+        />
       </div>
     ),
     maxWidth: 125,
@@ -494,7 +509,7 @@ export const visualizerTableColumns = [
     maxWidth: 90,
   },
 ];
-// Visualizers columns: these columns are shown for the visualizers
+// Ingestors columns: these columns are shown for the ingestors
 export const ingestorTableColumns = [
   ...pluginTableColumns,
   {
@@ -542,4 +557,23 @@ export const ingestorTableColumns = [
     disableSortBy: true,
     maxWidth: 145,
   },
+  {
+    Header: "Actions",
+    id: "actions",
+    accessor: (r) => r,
+    disableSortBy: true,
+    Cell: ({ value }) => (
+      <div className="d-flex justify-content-center mx-2">
+        <PluginHealthCheckButton
+          pluginName={value.name}
+          pluginType_={PluginsTypes.INGESTOR}
+        />
+        <PluginPullButton
+          pluginName={value.name}
+          pluginType_={PluginsTypes.INGESTOR}
+        />
+      </div>
+    ),
+    maxWidth: 90,
+  },
 ];

frontend/src/stores/usePluginConfigurationStore.jsx

@@ -13,6 +13,7 @@ import {
   PLAYBOOKS_CONFIG_URI,
   INGESTORS_CONFIG_URI,
 } from "../constants/apiURLs";
+import { prettifyErrors } from "../utils/api";
 
 async function downloadAllPlugin(pluginUrl) {
   const pageSize = 70;
@@ -195,10 +196,57 @@ export const usePluginConfigurationStore = create((set, get) => ({
       );
       console.debug("usePluginConfigurationStore - checkPluginHealth: ");
       console.debug(resp);
-      return Promise.resolve(resp.data?.status); // status is of type boolean
+      if (resp.data?.status)
+        addToast(
+          "Health check status: success",
+          `${PluginName} is up and running`,
+          "success",
+          true,
+        );
+      else
+        addToast(
+          "Health check status: warning",
+          `${PluginName} is NOT up`,
+          "warning",
+          true,
+        );
+      return Promise.resolve(resp.status);
     } catch (e) {
-      addToast("Failed!", e.parsedMsg.toString(), "danger");
-      return null;
+      console.error(e);
+      addToast(
+        "Health check status: failed",
+        prettifyErrors(e),
+        "danger",
+        true,
+      );
+      return e.response.status;
+    }
+  },
+  pluginPull: async (type, PluginName) => {
+    try {
+      const resp = await axios.post(
+        `${API_BASE_URI}/${type}/${PluginName}/pull`,
+      );
+      console.debug("usePluginConfigurationStore - pluginPull: ");
+      console.debug(resp);
+      if (resp.data?.status)
+        addToast(
+          "Plugin pull: success",
+          `${PluginName} updated`,
+          "success",
+          true,
+        );
+      else
+        addToast(
+          "Plugin pull: warning",
+          `${PluginName} pull failed`,
+          "warning",
+          true,
+        );
+      return Promise.resolve(resp.status);
+    } catch (e) {
+      addToast("Plugin pull: failed", prettifyErrors(e), "danger", true);
+      return e.response.status;
     }
   },
   deletePlaybook: async (playbook) => {
@@ -209,7 +257,7 @@ export const usePluginConfigurationStore = create((set, get) => ({
       addToast(`${playbook} deleted`, null, "info");
       return Promise.resolve(response);
     } catch (e) {
-      addToast("Failed!", e.parsedMsg, "danger");
+      addToast("Failed!", prettifyErrors(e), "danger");
       return null;
     }
   },
@@ -226,7 +274,7 @@ export const usePluginConfigurationStore = create((set, get) => ({
       } catch (error) {
         addToast(
           `Failed to enabled ${pluginName} for the organization`,
-          error.parsedMsg,
+          prettifyErrors(error),
           "danger",
           true,
         );
@@ -242,7 +290,7 @@ export const usePluginConfigurationStore = create((set, get) => ({
     } catch (error) {
       addToast(
         `Failed to enabled ${pluginName} for the organization`,
-        error.parsedMsg,
+        prettifyErrors(error),
         "danger",
         true,
       );
@@ -262,7 +310,7 @@ export const usePluginConfigurationStore = create((set, get) => ({
       } catch (error) {
         addToast(
           `Failed to disabled ${pluginName} for the organization`,
-          error.parsedMsg,
+          prettifyErrors(error),
           "danger",
           true,
         );
@@ -278,7 +326,7 @@ export const usePluginConfigurationStore = create((set, get) => ({
     } catch (error) {
       addToast(
         `Failed to disabled ${pluginName} for the organization`,
-        error.parsedMsg,
+        prettifyErrors(error),
         "danger",
         true,
       );

frontend/src/utils/api.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 export function prettifyErrors(errorResponse) {
+  // multiple validation errors
   // only validation errors returns an array of errors
   /**
       "errors":{
@@ -24,6 +25,24 @@ export function prettifyErrors(errorResponse) {
     prettyHTMLList = prettyHTMLList.map((e) => <li>{e}</li>);
     return <ul>{prettyHTMLList}</ul>;
   }
+  // single validation error
+  /**
+    "errors":{
+      "detail": "Not implemented",
+    }
+  */
+  if (errorResponse.response.data?.errors?.detail) {
+    return errorResponse.response.data.errors.detail;
+  }
+  // error directly in response data
+  /**
+    "data":{
+      "detail": "Method "POST" not allowed.",
+    }
+  */
+  if (errorResponse.response.data?.detail) {
+    return errorResponse.response.data.detail;
+  }
 
   return JSON.stringify(errorResponse.response.data);
 }