Fixed issues in loads of files related to newer NPM vesions

.env

@@ -55,7 +55,7 @@ SHUFFLE_ORBORUS_STARTUP_DELAY= 		# Used for setting up a startup delay for Orbor
 
 SHUFFLE_BASE_IMAGE_NAME=shuffle
 SHUFFLE_BASE_IMAGE_REGISTRY=ghcr.io
-SHUFFLE_BASE_IMAGE_TAG_SUFFIX="-1.0.0"
+SHUFFLE_BASE_IMAGE_TAG_SUFFIX="-1.1.0"
 
 # Used for auto-cleanup of containers. REALLY important at scale.
 SHUFFLE_CONTAINER_AUTO_CLEANUP=false

frontend/src/components/AppGrid.jsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 

frontend/src/components/Appsearch.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 import { useAlert } from "react-alert";

frontend/src/components/CreatorGrid.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 

frontend/src/components/DocsGrid.jsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 

frontend/src/components/Searchfield.jsx

@@ -625,7 +625,7 @@ const SearchField = props => {
 	const CustomDocHits = connectHits(DocHits)
 
 	return (
-		<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", zIndex: 12500,}}>
+		<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", zIndex: 10050,}}>
 			<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
 				console.log("CLICKED")	
 			}}>

frontend/src/components/SecurityFramework.jsx

@@ -2,7 +2,7 @@ import React, {useState } from 'react';
 import {isMobile} from "react-device-detect";
 import AppFramework, { usecases } from "../components/AppFramework.jsx";
 import {Link} from 'react-router-dom';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 import { Button, LinearProgress, Typography } from '@material-ui/core';
 

frontend/src/components/SuggestedWorkflows.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import theme from '../theme';
 import PaperComponent from "../components/PaperComponent.jsx"
 import UsecaseSearch, { usecaseTypes } from "../components/UsecaseSearch.jsx"

frontend/src/components/WelcomeForm2.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import Button from "@material-ui/core/Button";
 import Checkbox from '@mui/material/Checkbox';
 

frontend/src/components/Workflowsearch.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 
-import ReactGA from 'react-ga';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 
@@ -159,25 +158,10 @@ const WorkflowSearch = props => {
 					return (
 						<Paper key={index} elevation={0} style={paperStyle} onMouseOver={() => {
 							setMouseHoverIndex(index)
-							/*
-							ReactGA.event({
-								category: "app_grid_view",
-								action: `search_bar_click`,
-								label: "",
-							})
-							*/
 						}} onMouseOut={() => {
 							setMouseHoverIndex(-1)
 						}} onClick={() => {
 							setNewSelectedApp(data)
-							//if (data.objectID !== data.objectID) {
-							//}
-
-							//ReactGA.event({
-							//	category: "app_search",
-							//	action: `app_${parsedname}_${data.id}_click`,
-							//	label: "",
-							//})
 						}}>
 							<div style={{display: "flex"}}>
 								{/*<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 30, minWidth: 30, minHeight: 30, maxHeight: 30, display: "block", }} />*/}

frontend/src/views/AngularWorkflow.jsx

@@ -415,7 +415,7 @@ const AngularWorkflow = (defaultprops) => {
   // Set it from 2500 to 6000 to reduce overall load
   const { start, stop } = useInterval({
     duration: 3000,
-    startImmediate: true,
+    startImmediate: false,
     callback: () => {
       fetchUpdates();
     },
@@ -981,6 +981,9 @@ const AngularWorkflow = (defaultprops) => {
   // Controls the colors and direction of execution results.
   // Style is in defaultCytoscapeStyle.js
   const handleUpdateResults = (responseJson, executionRequest) => {
+		if (responseJson === undefined || responseJson === null || responseJson.success === false) {
+			return
+		}
     //console.log(responseJson)
     // Loop nodes and find results
     // Update on every interval? idk
@@ -2952,10 +2955,19 @@ const AngularWorkflow = (defaultprops) => {
           getSettings();
         } else if (data.app_name === "Webhook") {
           if (workflow.triggers[trigger_index].parameters !== undefined && workflow.triggers[trigger_index].parameters !== null && workflow.triggers[trigger_index].parameters.length > 0) {
+						console.log("Can set params here!")
             workflow.triggers[trigger_index].parameters[0] = {
               name: "url",
               value: referenceUrl + "webhook_" + workflow.triggers[trigger_index].id,
             };
+
+						if (workflow.triggers[trigger_index].parameters.length < 5) {
+							console.log("Adding to webhook params!")
+							workflow.triggers[trigger_index].parameters.push({
+								name: "await_response",
+								value: "v1,"
+							})
+						}
           }
         }
 
@@ -10538,7 +10550,7 @@ const AngularWorkflow = (defaultprops) => {
                   }}
                   fullWidth
                   multiline
-                  rows="4"
+                  rows="2"
                   defaultValue={trigger_header_auth}
                   color="primary"
                   disabled={selectedTrigger.status === "running"}
@@ -10557,7 +10569,44 @@ const AngularWorkflow = (defaultprops) => {
                   }}
                 />
               </div>
-            </div>
+							{isCloud && workflow.triggers[selectedTriggerIndex].parameters.length > 4 ? 
+								<FormGroup
+									style={{ paddingLeft: 10, backgroundColor: inputColor, marginBottom: 50,  }}
+									row
+								>
+								<FormControlLabel
+									control={
+										<Checkbox
+											checked={workflow.triggers[selectedTriggerIndex].parameters[4].value.includes("v2")}
+											disabled={selectedTrigger.status === "running"}
+											onChange={(e) => {
+												if (selectedTrigger.parameters === null) {
+													selectedTrigger.parameters = [];
+												}
+
+												// Sets the webhook to run as version 2.. kinda
+												var value = "v2"
+												if (workflow.triggers[selectedTriggerIndex].parameters[4].value.includes("v2")) {
+													value = "v1"
+												}
+
+												workflow.triggers[selectedTriggerIndex].parameters[4] = {
+													name: "await_response",
+													value: value
+												}
+
+												setWorkflow(workflow)
+												setUpdate(Math.random())
+											}}
+											color="primary"
+											value="await_response"
+										/>
+									}
+									label={<div style={{ color: "white" }}>Wait For Response</div>}
+								/>
+							</FormGroup>
+						: null}
+						</div>
           </div>
         </div>
       );
@@ -10707,12 +10756,7 @@ const AngularWorkflow = (defaultprops) => {
     const branch = workflow.branches.find(
       (branch) => branch.source_id === trigger.id
     );
-    if (
+    if (branch === undefined && (workflow.start === undefined || workflow.start === null || workflow.start.length === 0)) {
-      branch === undefined &&
-      (workflow.start === undefined ||
-        workflow.start === null ||
-        workflow.start.length === 0)
-    ) {
       alert.error("No webhook node defined");
     }
 
@@ -10721,14 +10765,20 @@ const AngularWorkflow = (defaultprops) => {
       startNode = branch.destination_id;
     }
 
-    const param = trigger.parameters.find(
+    const param = trigger.parameters.find((param) => param.name === "auth_headers");
-      (param) => param.name === "auth_headers"
-    );
     var auth = "";
     if (param !== undefined && param !== null) {
       auth = param.value;
     }
 
+
+		// Version: v2 = await response for 30 sec
+    const await_resp = trigger.parameters.find((param) => param.name === "await_response");
+    var version = "";
+    if (await_resp !== undefined && await_resp !== null) {
+      version = await_resp.value;
+    }
+
     const customRespParam = trigger.parameters.find(
       (param) => param.name === "custom_response_body"
     )
@@ -10737,7 +10787,6 @@ const AngularWorkflow = (defaultprops) => {
       custom_response = customRespParam.value;
     }
 
-    console.log("TRIG: ", trigger);
     const data = {
       name: hookname,
       type: "webhook",
@@ -10747,8 +10796,12 @@ const AngularWorkflow = (defaultprops) => {
       environment: trigger.environment,
       auth: auth,
       custom_response: custom_response,
+			version: version,
+			version_timeout: 15,
     };
 
+		console.log("Trigger data: ", data)
+
     fetch(globalUrl + "/api/v1/hooks/new", {
       method: "POST",
       headers: { "content-type": "application/json" },

frontend/src/views/AppCreator.jsx

@@ -222,6 +222,55 @@ const parseCurl = (s) => {
   return out;
 };
 
+export const appCategories = [
+		{
+    	"name": "Communication",
+			"color": "#FFC107",
+			"icon": "communication",
+			"action_labels": ["List Messages", "Send Message",],
+		}, {
+			"name": "SIEM",
+			"color": "#FFC107",
+			"icon": "siem",
+			"action_labels": ["Get alerts", "Search", "Create detection",],
+		}, {
+			"name": "Eradication",
+			"color": "#FFC107",
+			"icon": "eradication",
+			"action_labels": ["List tickets", "Update ticket", "Block hash", "Isolate host"],
+		}, {
+			"name": "Cases",
+			"color": "#FFC107",
+			"icon": "cases",
+			"action_labels": ["List tickets", "Get ticket", "Create ticket", "Update ticket",],
+		}, {
+			"name": "Assets",
+			"color": "#FFC107",
+			"icon": "assets",
+			"action_labels": [],
+		}, {
+			"name": "Intel",
+			"color": "#FFC107",
+			"icon": "intel",
+			"action_labels": [],
+		}, {
+			"name": "IAM",
+			"color": "#FFC107",
+			"icon": "iam",
+			"action_labels": [],
+		}, {
+			"name": "Network",
+			"color": "#FFC107",
+			"icon": "network",
+			"action_labels": ["Block IP",],
+		}, {
+			"name": "Other",
+			"color": "#FFC107",
+			"icon": "other",
+			"action_labels": [],
+		},
+]
+
 export const base64_decode = (str) => {
 	return decodeURIComponent(
 		atob(str).split("").map(function (c) {
@@ -310,81 +359,8 @@ const AppCreator = (defaultprops) => {
 	// From 2023: Example to handle action labels
 	// Goal: Make this dynamically load from the backend
 	// and make categories + labels modifyable.
-	//
 	// Categories are the main categories in the App Framework
-  const [categories, setCategories] = useState([
+  const [categories, setCategories] = useState(appCategories)
-		{
-    	"name": "Communication",
-			"color": "#FFC107",
-			"icon": "communication",
-			"action_labels": [],
-		}, {
-			"name": "SIEM",
-			"color": "#FFC107",
-			"icon": "siem",
-			"action_labels": ["Get alerts", "Search", "Create detection",],
-		}, {
-			"name": "Eradication",
-			"color": "#FFC107",
-			"icon": "eradication",
-			"action_labels": ["List tickets", "Update ticket", "Block hash", "Isolate host"],
-		}, {
-			"name": "Cases",
-			"color": "#FFC107",
-			"icon": "cases",
-			"action_labels": ["List tickets", "Get ticket", "Create ticket", "Update ticket",],
-		}, {
-			"name": "Assets",
-			"color": "#FFC107",
-			"icon": "assets",
-			"action_labels": [],
-		}, {
-			"name": "Intel",
-			"color": "#FFC107",
-			"icon": "intel",
-			"action_labels": [],
-		}, {
-			"name": "IAM",
-			"color": "#FFC107",
-			"icon": "iam",
-			"action_labels": [],
-		}, {
-			"name": "Network",
-			"color": "#FFC107",
-			"icon": "network",
-			"action_labels": ["Block IP",],
-		}, {
-			"name": "Other",
-			"color": "#FFC107",
-			"icon": "other",
-			"action_labels": [],
-		}
-	]);
-
-  //const [actions, setActions] = useState([{
-  //	"name": "Get workflows",
-  //	"description": "Get workflows",
-  //	"url": "/workflows",
-  //	"headers": "",
-  //	"queries": [],
-  //	"paths": [],
-  //	"body": "",
-  //	"errors": ["wutface", "WOAH"],
-  //	"method": actionNonBodyRequest[0],
-  //}, {
-  //	"name": "Get workflow",
-  //	"description": "Get workflow",
-  //	"url": "/workflows/{id}",
-  //	"headers": "",
-  //	"queries": [],
-  //	"paths": ["id"],
-  //	"body": "",
-  //	"errors": ["wutface", "WOAH"],
-  //	"method": actionNonBodyRequest[0],
-  //},
-  //
-  //])
-
   const [currentActionMethod, setCurrentActionMethod] = useState(
     actionNonBodyRequest[0]
   )

frontend/src/views/GettingStarted.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useContext } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTheme } from "@material-ui/core/styles";
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import SecurityFramework from '../components/SecurityFramework.jsx';
 
 import {

frontend/src/views/Welcome.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import WelcomeForm2 from "../components/WelcomeForm2.jsx";
 import Stepper from "@material-ui/core/Stepper";
 import Step from "@material-ui/core/Step";

frontend/src/views/Workflows.jsx

@@ -551,7 +551,6 @@ const Workflows = (props) => {
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
   const [publishModalOpen, setPublishModalOpen] = React.useState(false);
   const [editingWorkflow, setEditingWorkflow] = React.useState({});
-  const [importLoading, setImportLoading] = React.useState(false);
   const [isDropzone, setIsDropzone] = React.useState(false);
   const [view, setView] = React.useState("grid");
   const [filters, setFilters] = React.useState([]);
@@ -585,10 +584,10 @@ const Workflows = (props) => {
 			}
 			setGettingStartedItems(activeFiltered)
 
-			const doneFiltered = activeFiltered.filter((item) => item.done === true)
+			//const doneFiltered = activeFiltered.filter((item) => item.done === true)
-			if (doneFiltered.length > 0) { 
+			//if (doneFiltered.length > 0) { 
-				console.log("DONE: ", doneFiltered)
+			//	console.log("DONE: ", doneFiltered)
-			}
+			//}
 
       const sidebar = localStorage.getItem(sidebarKey);
 			if (sidebar === null || sidebar === undefined) {
@@ -597,13 +596,10 @@ const Workflows = (props) => {
 				localStorage.setItem(sidebarKey, "open");
   			setDrawerOpen(true)
       } else {
-				console.log("Got sidebar: ", sidebar)
-
 				if (sidebar === "open") {
 					console.log("OPEN the thingy!")
   				setDrawerOpen(true)
 				} else {
-					console.log("Close the thingy!")
   				setDrawerOpen(false)
 				}
 			}
@@ -1229,7 +1225,6 @@ const Workflows = (props) => {
     display: "flex",
     flexWrap: "wrap",
     alignContent: "space-between",
-    marginTop: 5,
   };
 
   const paperAppStyle = {
@@ -2212,7 +2207,7 @@ const Workflows = (props) => {
           setTimeout(() => {
             getAvailableWorkflows();
           }, 2500);
-          setImportLoading(false);
+					setSubmitLoading(false)
           setModalOpen(false);
         } else {
           //alert.info("Successfully changed basic info for workflow");
@@ -2223,7 +2218,7 @@ const Workflows = (props) => {
       })
       .catch((error) => {
         alert.error(error.toString());
-        setImportLoading(false);
+				setSubmitLoading(false)
         setModalOpen(false);
         setSubmitLoading(false);
       });
@@ -2231,8 +2226,8 @@ const Workflows = (props) => {
 
   const importFiles = (event) => {
     console.log("Importing!");
+		setSubmitLoading(true)
 
-    setImportLoading(true);
     if (event.target.files.length > 0) {
     	console.log("Files: !", event.target.files.length);
       for (var key in event.target.files) {
@@ -2240,7 +2235,7 @@ const Workflows = (props) => {
         if (file.type !== "application/json") {
           if (file.type !== undefined) {
             alert.error("File has to contain valid json");
-    				setImportLoading(false);
+						setSubmitLoading(false)
           }
 
           continue;
@@ -2254,7 +2249,7 @@ const Workflows = (props) => {
             data = JSON.parse(reader.result);
           } catch (e) {
             alert.error("Invalid JSON: " + e);
-            setImportLoading(false);
+						setSubmitLoading(false)
             return;
           }
     
@@ -2981,20 +2976,15 @@ const Workflows = (props) => {
         </Tooltip>
       )}
       <Tooltip color="primary" title={"Import workflows"} placement="top">
-        {importLoading ? (
+				<Button
-          <Button color="secondary" style={{}} variant="text" onClick={() => {}}>
+					color="secondary"
-            <CircularProgress style={{ maxHeight: 15, maxWidth: 15 }} />
+					style={{}}
-          </Button>
+					variant="text"
-        ) : (
+					onClick={() => upload.click()}
-          <Button
+				>
-            color="secondary"
+					
-            style={{}}
+					{submitLoading ? <CircularProgress color="secondary" /> : <PublishIcon />}
-            variant="text"
+				</Button>
-            onClick={() => upload.click()}
-          >
-            <PublishIcon />
-          </Button>
-        )}
       </Tooltip>
       <input
         hidden
@@ -3290,7 +3280,7 @@ const Workflows = (props) => {
 					}}
 					*/}
   		
-					<div style={{width: "100%", minHeight: isMobile ? 0 : 71, maxHeight: isMobile ? 0 : 71, }}>
+					<div style={{width: "100%", minHeight: isMobile ? 0 : 51, maxHeight: isMobile ? 0 : 51, marginTop: 10, }}>
 						{!isMobile && usecases !== null && usecases !== undefined && usecases.length > 0 ? 
 							<div style={{ display: "flex", }}>
 								{usecases.map((usecase, index) => {
@@ -3320,12 +3310,12 @@ const Workflows = (props) => {
 
 											}}
 										>
-											<a href={`/usecases?selected=${usecase.name}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", }}>
+											<a href={`/usecases?selected=${usecase.name}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", display: "flex", }}>
-												<Typography variant="body1" color="textPrimary">
+												<Typography variant="body1" color="textPrimary" style={{flex: 4, }}>
 													{usecase.name}
 												</Typography>
-												<Typography variant="body2" color="textSecondary">
+												<Typography variant="body2" color="textSecondary" style={{flex: 1, marginTop: 5,}}>
-													In use: {usecase.matches.length}/{usecase.list.length}
+													{usecase.matches.length}/{usecase.list.length}
 												</Typography>
 											</a>
 										</Paper>
@@ -3334,7 +3324,8 @@ const Workflows = (props) => {
 							</div>
 						: null}
 					</div>
-          <div style={{ marginTop: 15 }} />
+
+          <div style={{ marginTop: 10, marginBottom: 10, }} />
           {!isMobile &&
 					actionImageList !== undefined &&
           actionImageList !== null &&
@@ -3435,44 +3426,48 @@ const Workflows = (props) => {
             })}
             </div>
           ) : null}
-          {view === "grid" ? (
-            <Grid container spacing={4} style={paperAppContainer}>
-							<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-              	<NewWorkflowPaper />
-							</Zoom>
 
-              {filteredWorkflows.map((data, index) => {
-								// Shouldn't be a part of this list
-								if (data.public === true) {
-									return null
-								}
 
-  							if (firstLoad) {
+					<div style={{marginTop: 15, }}>
-									workflowDelay += 75
+						{view === "grid" ? (
-								} else {
+							<Grid container spacing={4} style={paperAppContainer}>
+								<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+									<NewWorkflowPaper />
+								</Zoom>
+
+								{filteredWorkflows.map((data, index) => {
+									// Shouldn't be a part of this list
+									if (data.public === true) {
+										return null
+									}
+
+									if (firstLoad) {
+										workflowDelay += 75
+									} else {
+										return (
+											<Grid key={index} item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
+												<WorkflowPaper key={index} data={data} />
+											</Grid>
+										)
+									}
+
 									return (
-      							<Grid key={index} item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
+										<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-											<WorkflowPaper key={index} data={data} />
+											<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
-      							</Grid>
+												<WorkflowPaper key={index} data={data} />
+											</Grid>
+										</Zoom>
 									)
-								}
+								})}
+							</Grid>
+						) : (
+							<WorkflowListView />
+						)}
+					</div>
 
-                return (
+					<div style={{ marginBottom: 100 }} />
-									<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+				</div>
-      							<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
+			</div>
-											<WorkflowPaper key={index} data={data} />
-      							</Grid>
-									</Zoom>
-								)
-              })}
-            </Grid>
-          ) : (
-            <WorkflowListView />
-          )}
-
-          <div style={{ marginBottom: 100 }} />
-        </div>
-      </div>
     );
   };
 

functions/onprem/orborus/orborus.go

@@ -65,7 +65,8 @@ var newWorkerImage = os.Getenv("SHUFFLE_WORKER_IMAGE")
 // var baseimagename = "shuffle/shuffle"
 var baseimagename = os.Getenv("SHUFFLE_BASE_IMAGE_NAME")
 var baseimageregistry = os.Getenv("SHUFFLE_BASE_IMAGE_REGISTRY")
-var baseimagetagsuffix = os.Getenv("SHUFFLE_BASE_IMAGE_TAG_SUFFIX")
+
+//var baseimagetagsuffix = os.Getenv("SHUFFLE_BASE_IMAGE_TAG_SUFFIX")
 
 // Used for cloud with auth
 var auth = os.Getenv("AUTH")