Further health fixes and frontend cleanup

backend/go-app/main.go

@@ -27,6 +27,9 @@ import (
 	"os/exec"
 	"path/filepath"
 
+	// import httptest
+	"net/http/httptest"
+
 	//"regexp"
 	"strings"
 	"time"
@@ -4025,7 +4028,7 @@ func runInitEs(ctx context.Context) {
 
 		jobret, err := newscheduler.Every(int(interval)).Seconds().NotImmediately().Run(job)
 		if err != nil {
-			log.Printf("[CRITICAL] Failed to schedule org: %s", err)
+			log.Printf("[ERROR] Failed to schedule org: %s", err)
 		} else {
 			log.Printf("[INFO] Started sync on interval %d for org %s (%s)", interval, org.Name, org.Id)
 			scheduledOrgs[org.Id] = jobret
@@ -4234,6 +4237,32 @@ func runInitEs(ctx context.Context) {
 		log.Printf("[INFO] Skipping download of extra API samples as %d were found", len(workflowapps))
 	}
 
+	
+	if os.Getenv("SHUFFLE_HEALTHCHECK_DISABLED") != "true" {
+		healthcheckInterval := 15
+		log.Printf("[INFO] Starting healthcheck job every %d minute. Stats available on /api/v1/health/stats. Disable with SHUFFLE_HEALTHCHECK_DISABLED=true", healthcheckInterval)
+		job := func() {
+			// Prepare a fake http.responsewriter 
+			resp := httptest.NewRecorder()
+
+			request := http.Request{}
+			// Add the "force=true" query to the fake request
+			request.URL, err  = url.Parse("/api/v1/health/stats?force=true")
+			if err != nil {
+				log.Printf("[ERROR] Failed to parse test url for healthstats: %s", err)
+			}
+
+			shuffle.RunOpsHealthCheck(resp, &request)
+		}
+
+		_, err := newscheduler.Every(int(healthcheckInterval)).Minutes().Run(job)
+		if err != nil {
+			log.Printf("[ERROR] Failed to schedule healthcheck: %s", err)
+		} else {
+			log.Printf("[DEBUG] Successfully started healthcheck interval of %d minutes", healthcheckInterval)
+		}
+	}
+
 	log.Printf("[INFO] Finished INIT (ES)")
 }
 
@@ -4731,9 +4760,9 @@ func runInit(ctx context.Context) {
 
 		jobret, err := newscheduler.Every(int(interval)).Seconds().NotImmediately().Run(job)
 		if err != nil {
-			log.Printf("[CRITICAL] Failed to schedule org: %s", err)
+			log.Printf("[ERROR] Failed to schedule org: %s", err)
 		} else {
-			log.Printf("Started sync on interval %d for org %s", interval, org.Name)
+			log.Printf("[INFO] Started sync on interval %d for org %s", interval, org.Name)
 			scheduledOrgs[org.Id] = jobret
 		}
 	}
@@ -5281,7 +5310,7 @@ func handleCloudSetup(resp http.ResponseWriter, request *http.Request) {
 
 	jobret, err := newscheduler.Every(int(interval)).Seconds().NotImmediately().Run(job)
 	if err != nil {
-		log.Printf("[CRITICAL] Failed to schedule org: %s", err)
+		log.Printf("[ERROR] Failed to schedule org: %s", err)
 	} else {
 		log.Printf("[INFO] Started sync on interval %d for org %s", interval, org.Name)
 		scheduledOrgs[org.Id] = jobret

frontend/src/components/AppSelection.jsx

@@ -48,12 +48,20 @@ const AppSelection = props => {
     const [selectionOpen, setSelectionOpen] = React.useState(false)
     const [newSelectedApp, setNewSelectedApp] = React.useState({})
     const [finishedApps, setFinishedApps] = React.useState([])
+    const [appName, setAppName] = React.useState();
     const [moreButton, setMoreButton] = useState(false);
-    const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
+    
+    // const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
     const ref = useRef()
     let navigate = useNavigate();
     const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 
+    const mouseOver = (e) => {
+        e.target.style.border = "1px solid #f85a3e";
+    }
+    const mouseOut = (e) => {
+        e.target.style.border = "1px solid rgb(33, 33, 33)";
+    }
     const setFrameworkItem = (data) => {
         console.log("Setting framework item: ", data, isCloud)
         // if (!isCloud) {
@@ -89,7 +97,6 @@ const AppSelection = props => {
 
                     }
                 }
-
                 //setFrameworkLoaded(true)
                 //setFrameworkData(responseJson)
             })
@@ -118,7 +125,6 @@ const AppSelection = props => {
         setDiscoveryData(label)
         setSelectionOpen(true)
         setNewSelectedApp({})
-
         setDefaultSearch(label.charAt(0).toUpperCase() + (label.substring(1)).toLowerCase())
     };
 
@@ -140,13 +146,13 @@ const AppSelection = props => {
             appFramework.siem = submitNewApp
         }
         else if (discoveryData === "ERADICATION") {
-            appFramework.eradication = submitNewApp
+            appFramework.edr = submitNewApp
         }
         else if (discoveryData === "INTEL") {
             appFramework.intel = submitNewApp
         }
         else if (discoveryData === "EMAIL") {
-            appFramework.email = submitNewApp
+            appFramework.communication = submitNewApp
         }
         else if (discoveryData === "NETWORK") {
             appFramework.network = submitNewApp
@@ -158,27 +164,27 @@ const AppSelection = props => {
             appFramework.iam = submitNewApp
         }
         setFrameworkItem(submitNewApp);
-
         setSelectionOpen(false);
         console.log("Selected app changed (effect)");
-
     }, [newSelectedApp]);
 
-    const sizing = 510;
+    const sizing = moreButton ? 510 : 480;
-    const buttonWidth = 450;
+    const buttonWidth = 450;    
-  const buttonMargin = 10;
+    const buttonMargin = 10;
     const bottomButtonStyle = {
         borderRadius: 200,
         marginTop: moreButton ? 44 : "",
         height: 51,
-        width: 464,
+        width: 510,
         fontSize: 16,
         // background: "linear-gradient(89.83deg, #FF8444 0.13%, #F2643B 99.84%)",
         background: "linear-gradient(90deg, #F86744 0%, #F34475 100%)",
         padding: "16px 24px",
         // top: 20,
         // margin: "auto",
+        textTransform: 'capitalize',
         itemAlign: "center",
+        // marginTop: 25
         // marginLeft: "65px",
       };
     const buttonStyle = {
@@ -191,18 +197,18 @@ const AppSelection = props => {
         fontSize: 17,
         background: "rgba(33, 33, 33, 1)",
         textTransform: 'capitalize',
-        border: mouseHoverIndex ? "1px solid rgba(33, 33, 33, 1)" : "1px solid #f85a3e",
+        border: "1px solid rgba(33, 33, 33, 1)",
         borderRadius: 8,
         marginRight: 8,
     };
-
+    // console.log("appFramework",appFramework.cases.name)
     return (
         <Collapse in={true}>
             <div
                 style={{
                     minHeight: sizing,
                     maxHeight: sizing,
-                    marginTop: 20,
+                    marginTop: 10,
                     width: 500,
                 }}
             >
@@ -223,8 +229,8 @@ const AppSelection = props => {
                         }}
                     >
                         <div style={{ display: "flex" }}>
-                            <div style={{ display: "flex", textAlign: "center" }}>
+                            <div style={{ display: "flex", textAlign: "center", textTransform: "capitalize"}}>
-                                <Typography style={{ padding: 16 }}> {discoveryData} </Typography>
+                                <Typography style={{ padding: 16, color:"#FFFFFF", textTransform: "capitalize" }}> {discoveryData} </Typography>
                             </div>
                             <div style={{ display: "flex" }}>
                                 <Tooltip
@@ -275,6 +281,7 @@ const AppSelection = props => {
                                                 setFrameworkItem(submitDeletedApp)
                                                 setNewSelectedApp({})
                                             }, 1000)
+                                            //setAppName(discoveryData.cases.name)
                                         }}
                                     >
                                         <DeleteIcon style={{ color: "white", height: 15, width: 15, }} />
@@ -319,14 +326,9 @@ const AppSelection = props => {
                     Select the apps you work with and we will connect the for you.
                 </Typography>
                 <Grid item xs={11} style={{}}>
+                    
                     {/*<FormLabel style={{ color: "#B9B9BA" }}>Find your integrations!</FormLabel>*/}
-                    <div style={{ display: "flex", width: 464 }}
+                    <div style={{ display: "flex", width: 510, height:100 }}>
-                        onMouseOver={() => {
-                            setMouseHoverIndex()
-                        }} onMouseOut={() => {
-                            setMouseHoverIndex(-1)
-                        }}
-                    >
                         <Button
                             disabled={finishedApps.includes("CASES")}
                             variant={
@@ -344,8 +346,10 @@ const AppSelection = props => {
                                 background: "rgba(33, 33, 33, 1)",
                                 borderRadius: 8,
                                 textTransform: 'capitalize',
-                                border: mouseHoverIndex ? "1px solid rgba(33, 33, 33, 1)" : "1px solid #f85a3e",
+                                border: "1px solid rgba(33, 33, 33, 1)" ,
                             }}
+                            onMouseOver={mouseOver} 
+                            onMouseOut={mouseOut}
                             // startIcon = {defaultSearch === "CASES" ? newSelectedApp.image_url : <LightbulbIcon/>}
                             onClick={(event) => {
                                 onNodeSelect("CASES");
@@ -354,23 +358,28 @@ const AppSelection = props => {
                         >
                             {appFramework === undefined || appFramework.cases === undefined || appFramework.cases.large_image === undefined ||
                                 appFramework === null || appFramework.cases === null || appFramework.cases.large_image === null || appFramework.cases.large_image.length === 0 ?
-                                <LightbulbIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
+                                <LightbulbIcon style={{ marginTop: 6 }} />
+                                </div>
                                 : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.cases.large_image} />}
-                                <div >
+                                <div style={{marginLeft: 8, }}>
-                                    <Typography style={{display:"flex"}}>Case Management</Typography>
+                                    <Typography style={{display:"flex",border:"none"}} >Case Management</Typography>
-                                    <Typography style={{fontSize: 12, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }}>{newSelectedApp.name}</Typography>
+                                    {appFramework === undefined || appFramework.cases === undefined || appFramework.cases.name === undefined ||
+                                    appFramework === null || appFramework.cases === null || appFramework.cases.name === null || appFramework.cases.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 12, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.cases.name.split('_').join(' ')}</Typography>}
                                 </div>
                         </Button>
                     </div>
-                    <div style={{ display: "flex", width: 464 }}>
+                    <div style={{ display: "flex", width: 510, height: 100 }}>
                         <Button
-                            // disabled={finishedApps.includes("SIEM")}
+                            disabled={finishedApps.includes("SIEM")}
                             variant={
                                 defaultSearch === "SIEM" ? "contained" : "outlined"
                             }
                             style={buttonStyle}
-
                             // startIcon={<SearchIcon />}
+                            onMouseOver={mouseOver} 
+                            onMouseOut={mouseOut}
                             color="secondary"
                             onClick={(event) => {
                                 onNodeSelect("SIEM");
@@ -379,15 +388,24 @@ const AppSelection = props => {
                         >
                             {appFramework === undefined || appFramework.siem === undefined || appFramework.siem.large_image === undefined ||
                                 appFramework === null || appFramework.siem === null || appFramework.siem.large_image === null || appFramework.siem.large_image.length === 0 ?
-                                <SearchIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
+                                <SearchIcon style={{ marginTop: 6 }} />
+                                </div>
                                 : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.siem.large_image} />}
-                            SIEM
+                            <div style={{marginLeft: 8,}}>
+                            <Typography style={{display:"flex",}}>SIEM</Typography>
+                            {appFramework === undefined || appFramework.siem === undefined || appFramework.siem.name === undefined ||
+                                appFramework === null || appFramework.siem === null || appFramework.siem.name === null || appFramework.siem.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 12, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.siem.name.split('_').join(' ')}</Typography>}
+                            </div>
                         </Button>
                         <Button
                             disabled={
                                 finishedApps.includes("EDR & AV") ||
                                 finishedApps.includes("ERADICATION")
                             }
+                            onMouseOver={mouseOver} 
+                            onMouseOut={mouseOut}
                             variant={
                                 defaultSearch === "Eradication" ? "contained" : "outlined"
                             }
@@ -398,19 +416,28 @@ const AppSelection = props => {
                                 onNodeSelect("ERADICATION");
                             }}
                         >
-                            {appFramework === undefined || appFramework.eradication === undefined || appFramework.eradication.large_image === undefined ||
+                            {appFramework === undefined || appFramework.edr === undefined || appFramework.edr.large_image === undefined ||
-                                appFramework === null || appFramework.eradication === null || appFramework.eradication.large_image === null || appFramework.eradication.large_image.length === 0 ?
+                                appFramework === null || appFramework.edr === null || appFramework.edr.large_image === null || appFramework.edr.large_image.length === 0 ?
-                                <NewReleasesIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
-                                : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.eradication.large_image} />}
+                                <NewReleasesIcon style={{marginTop: 8 }} />
-                            Endpoint
+                                </div>
+                                : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.edr.large_image} />}
+                            <div style={{marginLeft: 8,}}>
+                            <Typography style={{display:"flex",}}>Endpoint</Typography>
+                            {appFramework === undefined || appFramework.edr === undefined || appFramework.edr.name === undefined ||
+                                appFramework === null || appFramework.edr === null || appFramework.edr.name === null || appFramework.edr.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 12, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.edr.name.split('_').join(' ')}</Typography>}
+                            </div>
                         </Button>
                     </div>
-                    <div style={{ display: "flex", width: 464 }}>
+                    <div style={{ display: "flex", width: 510, height: 100 }}>
                         <Button
                             disabled={finishedApps.includes("INTEL")}
                             variant={
                                 defaultSearch === "INTEL" ? "contained" : "outlined"
                             }
+                            onMouseOver={mouseOver} 
+                            onMouseOut={mouseOut}
                             style={buttonStyle}
                             // startIcon={<ExtensionIcon />}
                             color="secondary"
@@ -420,9 +447,16 @@ const AppSelection = props => {
                         >
                             {appFramework === undefined || appFramework.intel === undefined || appFramework.intel.large_image === undefined ||
                                 appFramework === null || appFramework.intel === null || appFramework.intel.large_image === null || appFramework.intel.large_image.length === 0 ?
-                                <ExtensionIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
+                                <ExtensionIcon style={{ marginTop: 8 }} />
+                                </div>
                                 : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.intel.large_image} />}
-                            Intel
+                            <div style={{marginLeft: 8,}}>
+                            <Typography style={{display:"flex",}}>Intel</Typography>
+                            {appFramework === undefined || appFramework.intel === undefined || appFramework.intel.name === undefined ||
+                                appFramework === null || appFramework.intel === null || appFramework.intel.name === null || appFramework.intel.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 12, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.intel.name.split('_').join(' ')}</Typography>}
+                            </div>
                         </Button>
                         <Button
                             disabled={
@@ -432,6 +466,8 @@ const AppSelection = props => {
                             variant={
                                 defaultSearch === "EMAIL" ? "contained" : "outlined"
                             }
+                            onMouseOver={mouseOver} 
+                            onMouseOut={mouseOut}
                             style={buttonStyle}
                             // startIcon={<EmailIcon />}
                             color="secondary"
@@ -439,26 +475,29 @@ const AppSelection = props => {
                                 onNodeSelect("EMAIL");
                             }}
                         >
-                            {appFramework === undefined || appFramework.email === undefined || appFramework.email.large_image === undefined ||
+                            {appFramework === undefined || appFramework.communication === undefined || appFramework.communication.large_image === undefined ||
-                                appFramework === null || appFramework.email === null || appFramework.email.large_image === null || appFramework.email.large_image.length === 0 ?
+                                appFramework === null || appFramework.communication === null || appFramework.communication.large_image === null || appFramework.communication.large_image.length === 0 ?
-                                <EmailIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
-                                : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.email.large_image} />}
+                                <EmailIcon style={{ marginTop: 8 }} />
-                            Email
+                                </div>
+                                : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.communication.large_image} />}
+                            <div style={{marginLeft: 8,}}>
+                            <Typography style={{display:"flex",}}>Email</Typography>
+                            {appFramework === undefined || appFramework.communication === undefined || appFramework.communication.name === undefined ||
+                                appFramework === null || appFramework.communication === null || appFramework.communication.name === null || appFramework.communication.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 12, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.communication.name.split('_').join(' ')}</Typography>}
+                            </div>
                         </Button>
                     </div>
                     {moreButton ? (
-                        <div style={{ display: "flex", width: 464 }}
+                        <div style={{ display: "flex", width: 510, height: 100, marginBottom: 20 }}>
-                            onMouseOver={() => {
-                                setMouseHoverIndex()
-                            }} onMouseOut={() => {
-                                setMouseHoverIndex(-1)
-                            }}
-                        >
                             <Button
                                 disabled={finishedApps.includes("NETWORK")}
                                 variant={
                                     defaultSearch === "NETWORK" ? "contained" : "outlined"
                                 }
+                                onMouseOver={mouseOver}
+                                onMouseOut={mouseOut}
                                 style={buttonStyle}
                                 // startIcon={<ExtensionIcon />}
                                 color="secondary"
@@ -468,9 +507,16 @@ const AppSelection = props => {
                             >
                                 {appFramework === undefined || appFramework.network === undefined || appFramework.network.large_image === undefined ||
                                     appFramework === null || appFramework.network === null || appFramework.network.large_image === null || appFramework.network.large_image.length === 0 ?
-                                    <ShowChartIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                    <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
+                                    <ShowChartIcon style={{ marginTop: 8 }} />
+                                    </div>
                                     : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.network.large_image} />}
-                                Network
+                                <div style={{marginLeft: 8,}}>
+                            <Typography style={{display:"flex",}}>Network</Typography>
+                            {appFramework === undefined || appFramework.network === undefined || appFramework.network.name === undefined ||
+                                appFramework === null || appFramework.network === null || appFramework.network.name === null || appFramework.network.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 10, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.network.name}</Typography>}
+                            </div>
                             </Button>
                             <Button
                                 disabled={
@@ -479,6 +525,8 @@ const AppSelection = props => {
                                 variant={
                                     defaultSearch === "ASSETS" ? "contained" : "outlined"
                                 }
+                                onMouseOver={mouseOver}
+                                onMouseOut={mouseOut}
                                 style={buttonStyle}
                                 // startIcon={<EmailIcon />}
                                 color="secondary"
@@ -488,9 +536,16 @@ const AppSelection = props => {
                             >
                                 {appFramework === undefined || appFramework.assets === undefined || appFramework.assets.large_image === undefined ||
                                     appFramework === null || appFramework.assets === null || appFramework.assets.large_image === null || appFramework.assets.large_image.length === 0 ?
-                                    <ExploreIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                    <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
+                                    <ExploreIcon style={{ marginTop: 8 }} />
+                                    </div>
                                     : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.assets.large_image} />}
-                                Assets
+                                <div style={{marginLeft: 8,}}>
+                            <Typography style={{display:"flex",}}>Assets</Typography>
+                            {appFramework === undefined || appFramework.assets === undefined || appFramework.assets.name === undefined ||
+                                appFramework === null || appFramework.assets === null || appFramework.assets.name === null || appFramework.assets.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 10, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.assets.name}</Typography>}
+                            </div>
                             </Button>
                             <Button
                                 disabled={
@@ -499,6 +554,8 @@ const AppSelection = props => {
                                 variant={
                                     defaultSearch === "IAM" ? "contained" : "outlined"
                                 }
+                                onMouseOver={mouseOver}
+                                onMouseOut={mouseOut}
                                 style={buttonStyle}
                                 // startIcon={<EmailIcon />}
                                 color="secondary"
@@ -508,14 +565,21 @@ const AppSelection = props => {
                             >
                                 {appFramework === undefined || appFramework.iam === undefined || appFramework.iam.large_image === undefined ||
                                     appFramework === null || appFramework.iam === null || appFramework.iam.large_image === null || appFramework.iam.large_image.length === 0 ?
-                                    <FingerprintIcon style={{ marginRight: 8, borderRadius: 40, }} />
+                                    <div style={{width: 40, border: "1px solid rgba(33, 33, 33, 1) !importent", height: 40, borderRadius: 9999, backgroundColor: "#2F2F2F", textAlign:"center"}}>
+                                    <FingerprintIcon style={{ marginTop: 8 }} />
+                                    </div>
                                     : <img style={{ marginRight: 8, width: 40, height: 40, flexShrink: 0, borderRadius: 40, }} src={appFramework.iam.large_image} />}
-                                IAM
+                                <div style={{marginLeft: 8,}}>
+                            <Typography style={{display:"flex",}}>IAM</Typography>
+                            {appFramework === undefined || appFramework.iam === undefined || appFramework.iam.name === undefined ||
+                                appFramework === null || appFramework.iam === null || appFramework.iam.name === null || appFramework.iam.name.length === 0 ?
+                                    "":<Typography style={{fontSize: 8, textAlign:"left", color:"var(--label-grey-text, #9E9E9E)" }} >{appFramework.iam.name}</Typography>}
+                            </div>
                             </Button>
                         </div>
                     )
                         :
-                        <div style={{ display: "flex", width: 464, paddingLeft: 140, paddingTop: 25 }}>
+                        <div style={{ display: "flex", width: 510, paddingLeft: 165,  }}>
                             <Button
                                 style={{ color: "#f86a3e", textTransform: 'capitalize', border: 2, backgroundColor: "var(--Background-color, #1A1A1A)" }}
                                 className="btn btn-primary"
@@ -528,30 +592,6 @@ const AppSelection = props => {
                                 </Typography>
                             </Button>
                         </div>}
-
-                    {/* <FormControl>
-                                <FormLabel style={{ color: "#B9B9BA" }}>What do you want to automate first ?</FormLabel>
-                                <FormGroup>
-                                    <FormControlLabel
-                                        value="Email"
-                                        control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("Email") }} />}
-                                        label="Email"
-                                        labelPlacement="Email"
-                                    />
-                                    <FormControlLabel
-                                        value="SIEM"
-                                        control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("SIEM") }} />}
-                                        label="SIEM"
-                                        labelPlacement="SIEM"
-                                    />
-                                    <FormControlLabel
-                                        value="EDR"
-                                        control={<Checkbox style={{ color: "#F85A3E" }} onChange={(event) => { onNodeSelect("EDR") }} />}
-                                        label="EDR"
-                                        labelPlacement="EDR"
-                                    />
-                                </FormGroup>
-                            </FormControl> */}
                 </Grid>
             </div>
             <div style={{ flexDirection: "row", }}>

frontend/src/components/Appsearch.jsx

@@ -54,14 +54,14 @@ const Appsearch = props => {
 		  <form noValidate action="" role="search">
 				<TextField 
 					fullWidth
-					style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, width: "100%",}} 
+					style={{backgroundColor: "#2F2F2F", borderRadius: borderRadius, width: "100%",}} 
 					InputProps={{
 						style:{
 							color: "white",
 							fontSize: "1em",
 							height: 50,
 						},
-						startAdornment: (
+						endAdornment: (
 							<InputAdornment position="start">
 								<SearchIcon style={{marginLeft: 5}}/>
 							</InputAdornment>
@@ -71,7 +71,8 @@ const Appsearch = props => {
 					type="search"
 					color="primary"
 					defaultValue={defaultSearch}
-					placeholder={`Find ${defaultSearch} Apps...`}
+					// placeholder={`Find ${defaultSearch} Apps...`}
+					placeholder= {defaultSearch ? `${defaultSearch}` : "Search Cases "}
 					id="shuffle_workflow_search_field"
 					onChange={(event) => {
 						refine(event.currentTarget.value)
@@ -92,9 +93,9 @@ const Appsearch = props => {
 			<Grid container spacing={0} style={{border: "1px solid rgba(255,255,255,0.2)", maxHeight: 250, minHeight: 250, overflowY: "auto", overflowX: "hidden", }}>
 				{hits.map((data, index) => {
 					const paperStyle = {
-						backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
+						backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : "#2F2F2F",
 						color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)", 
-						border: newSelectedApp.objectID !== data.objectID ? `1px solid rgba(255,255,255,0.2)` : "2px solid #f86a3e", 
+						// border: newSelectedApp.objectID !== data.objectID ? `1px solid rgba(255,255,255,0.2)` : "2px solid #f86a3e", 
 						textAlign: "left",
 						padding: 10,
 						cursor: "pointer",
@@ -183,7 +184,7 @@ const Appsearch = props => {
 							}
 						}}>
 							<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", }} />
+								<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 30, minWidth: 30, minHeight: 30, borderRadius: 40, maxHeight: 30, display: "block", }} />
 								<Typography variant="body1" style={{marginTop: 2, marginLeft: 10, }}>
 									{parsedname}
 								</Typography>

frontend/src/components/ExploreWorkflow.jsx

@@ -295,7 +295,7 @@ const ExploreWorkflow = (props) => {
                 Start using workflows
             </Typography>
             <Typography variant="body2" style={{ marginLeft: 8, marginTop: 10, marginRight: 30, marginBottom: 40, }} color="rgba(158, 158, 158, 1)">
-                Based on what you selected here’s our recommendations!
+                Based on what you selected workflows, here are our recommendations! You will see more of these later.
             </Typography>
 
             <div style={{ marginTop: 0, }}>

frontend/src/components/Priority.jsx

@@ -112,7 +112,7 @@ const Priority = (props) => {
 				</span>
 				{priority.type === "usecase" && priority.description.includes("&") ?
 					<span style={{display: "flex", marginTop: 10,  }}>
-						<img src={newdescription.split("&")[1]} alt={priority.name} style={{height: realigned ? 30 : "auto", width: realigned ? 30 : 40, marginRight: realigned ? -10 : 10,	borderRadius: theme.palette.borderRadius, marginTop: realigned ? 5 : 0 }} />
+						<img src={newdescription.split("&")[1]} alt={priority.name} style={{height: "auto", width: 30, marginRight: realigned ? -10 : 10,	borderRadius: theme.palette.borderRadius, marginTop: realigned ? 5 : 0 }} />
 						<Typography variant="body2" color="textSecondary" style={{marginTop: 3, }}>
 							{newdescription.split("&")[0]} 
 						</Typography>
@@ -120,7 +120,7 @@ const Priority = (props) => {
 						{newdescription.split("&").length > 3 ?
 							<span style={{display: "flex", }}>
 								<ArrowForwardIcon style={{marginLeft: 15, marginRight: 15, }}/>
-								<img src={newdescription.split("&")[3]} alt={priority.name+"2"} style={{height: realigned ? 30 : "auto", width: realigned ? 30 : 40, marginRight: realigned ? -10 : 10,	borderRadius: theme.palette.borderRadius, marginTop: realigned ? 5 : 0 }} />
+								<img src={newdescription.split("&")[3]} alt={priority.name+"2"} style={{height: "auto", width: 30, marginRight: realigned ? -10 : 10,	borderRadius: theme.palette.borderRadius, marginTop: realigned ? 5 : 0 }} />
 								<Typography variant="body2" color="textSecondary" style={{marginTop: 3}}>
 									{newdescription.split("&")[2]} 
 								</Typography>

frontend/src/components/WelcomeForm2.jsx

@@ -200,20 +200,10 @@ const WelcomeForm = (props) => {
   }, [discoveryWrapper]);
 
   useEffect(() => {
-    if (
+    if (window.location.search !== undefined && window.location.search !== null) {
-      window.location.search !== undefined &&
+    
-      window.location.search !== null
-    ) {
       const urlSearchParams = new URLSearchParams(window.location.search);
       const params = Object.fromEntries(urlSearchParams.entries());
-      const foundTab = params["tab"];
-      if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab)) {
-        if (foundTab === 3 || foundTab === "3") {
-          //console.log("Set search!")
-        }
-      } else {
-        //navigate(`/welcome?tab=1`)
-      }
 
       const foundTemplate = params["workflow_template"];
       if (foundTemplate !== null && foundTemplate !== undefined) {
@@ -730,77 +720,6 @@ const WelcomeForm = (props) => {
         ) : (
           <div>
             {getStepContent(activeStep)}
-            {/* 	<div style={{marginBottom: 20, }}/>
-													{activeStep === 2 || activeStep === 1 ? 
-														<div style={{margin: "auto", minWidth: 500, maxWidth: 500, position: "relative", }}>
-															<Button 
-																disabled={activeStep === 0} 
-																onClick={handleBack}
-																variant={"outlined"}
-																style={{marginLeft: 10, height: 64, width: 100, position: "absolute", top: activeStep === 1 ? -625-extraHeight : -576, left: activeStep === 1 ? 125 : -125+clickdiff, borderRadius: "50px 0px 0px 50px", }} 
-															>
-																	Back
-															</Button>
-															<Button 
-																variant={"outlined"}
-																color="primary" 
-																onClick={handleNext} 
-																style={{marginLeft: 10, height: 64, width: 100, position: "absolute", top: activeStep === 1 ? -625-extraHeight : -576, left: activeStep === 1 ? 738 : 489+clickdiff, borderRadius: "0px 50px 50px 0px", }}
-																disabled={activeStep === 0 ? orgName.length === 0 || name.length === 0 : false}
-															>
-																	{activeStep === steps.length - 1 ? "Finish" : "Next"}
-															</Button>
-														</div>
-														: 
-														<div style={{margin: "auto", minWidth: 500, maxWidth: 500, marginLeft: activeStep === 1 ? 250 : "auto", marginTop: activeStep === 0 ? 25 : 0, }}>
-															<Button disabled={activeStep === 0} onClick={handleBack}>
-																	Back
-															</Button>
-															// (commented) isStepOptional(activeStep) && (
-																	<Button
-																			variant="contained"
-																			color="primary"
-																			onClick={handleSkip}
-																	>
-																			Skip
-																	</Button>
-															) //commented
-															<Button 
-																variant={activeStep === 1 ? finishedApps.length >= 4 ? "contained" : "outlined" : "outlined"}
-																color="primary" 
-																onClick={handleNext} 
-																style={{marginLeft: 10, }} 
-																disabled={activeStep === 0 ? orgName.length === 0 || name.length === 0 : false}
-															>
-																	{activeStep === steps.length - 1 ? "Finish" : "Next"}
-															</Button>
-															{activeStep === 0 ? 
-																<Button 
-																	variant={"outlined"}
-																	color="secondary" 
-																	onClick={() => {
-																		console.log("Skip!")
-    		
-																		setclickdiff(240)
-																		if (isCloud) {
-																				ReactGA.event({
-																					category: "welcome",
-																					action: "click_page_one_skip",
-																					label: "",
-																				})
-																		}
-
-																		setActiveStep(1)
-																		navigate(`/welcome?tab=2`)
-																	}} 
-																	style={{marginLeft: 240, }} 
-																	disabled={activeStep !== 0}
-																>
-																	Skip
-																</Button>
-															: null}
-                    			</div>
-												}*/}
           </div>
         )}
       </div>

frontend/src/views/AngularWorkflow.jsx

@@ -13321,7 +13321,7 @@ const AngularWorkflow = (defaultprops) => {
   		<Typography
   			variant="body2"
   		>
-  			{workflow.errors.slice(0,4).map((error) => {
+  			{workflow.errors.slice(0,3).map((error) => {
   				return (
   					<div>
   						- {error}

frontend/src/views/Welcome.jsx

@@ -42,7 +42,6 @@ const Welcome = (props) => {
 
 	let navigate = useNavigate();
 	useEffect(() => {
-		console.log("IN USEEFFECT FOR ACTIVESTEP: ", activeStep, " and with login: ", checkLogin)
 		if (checkLogin !== undefined) {
 			checkLogin()
 		}
@@ -280,7 +279,7 @@ const Welcome = (props) => {
 				const urlSearchParams = new URLSearchParams(window.location.search);
 				const params = Object.fromEntries(urlSearchParams.entries());
 				const foundTab = params["tab"];
-				if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab)) {
+				if (foundTab !== null && foundTab !== undefined && !isNaN(foundTab) && foundTab >= 1 && foundTab <= 3) {
 					setShowWelcome(true)
 					if (foundTab === 3 || foundTab === "3") {
 						handleSetSearch(usecaseButtons[0].name, usecaseButtons[0].usecase)
@@ -288,8 +287,7 @@ const Welcome = (props) => {
 
 					setActiveStep(foundTab-1)
 				} else { 
-    			//navigate(`/welcome?tab=1`)
+					navigate(`/welcome?tab=2`)
-    			navigate(`/welcome?tab=2`)
 				}
 			}
 		}, [])
@@ -528,6 +526,8 @@ const Welcome = (props) => {
 								
 								<div style={{ flexDirection: "row", }}>
 									<Button variant="contained" type="submit" fullWidth style={buttonStyle} onClick={() => {
+										navigate(`/welcome?tab=2`)
+										setActiveStep(1)
 										ReactGA.event({
 											category: "welcome",
 											action: "click_welcome_continue",