Added more embedded video & GIF features to workflow UI

backend/go-app/main.go

@@ -1265,7 +1265,7 @@ func checkAdminLogin(resp http.ResponseWriter, request *http.Request) {
 		}
 
 		if len(org.SSOConfig.SSOEntrypoint) > 0 {
-			log.Printf("[DEBUG] Found SAML SSO url")
+			log.Printf("[DEBUG] Found SAML SSO url: %s", org.SSOConfig.SSOEntrypoint)
 			baseSSOUrl = org.SSOConfig.SSOEntrypoint
 			break
 		}

backend/tests/files.sh

@@ -3,7 +3,7 @@
 #curl http://localhost:5001/api/v1/files/create -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" -d '{"filename": "file.txt", "org_id": "b199646b-16d2-456d-9fd6-b9972e929466", "workflow_id": "global"}'
 #
 #echo
-curl http://localhost:5001/api/v1/apps/upload -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" -F 'shuffle_file=@files.sh'
+#curl http://localhost:5001/api/v1/apps/upload -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" -F 'shuffle_file=@files.sh'
 #
 #curl http://localhost:5001/api/v1/files/1915981b-b897-4db1-8a2e-44bc34cead3b/content -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" 
 #curl http://localhost:5001/api/v1/files/e19cffe4-e2da-47e9-809e-904f5cb03687 -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" 
@@ -16,7 +16,7 @@ curl http://localhost:5001/api/v1/apps/upload -H "Authorization: Bearer db0373c6
 	#r.HandleFunc("/api/v1/files/{fileId}", handleDeleteFile).Methods("DELETE", "OPTIONS")
 
 
-#curl http://localhost:5001/api/v1/files/create -H "Authorization: Bearer c5b4c827-65ec-47f4-9e8a-234cdba38959" -d '{"filename": "rule2.yar", "org_id": "b4e88fe9-352b-47b4-b280-960181670acf", "workflow_id": "global", "namespace": "yara"}'
+#curl http://localhost:5001/api/v1/files/create -H "Authorization: Bearer 09627dcb-7e2a-4843-819b-417d268ff840" -d '{"filename": "rule2.yar", "org_id": "11f67b76-6051-4425-b0d6-be23daac6d12", "workflow_id": "global", "namespace": "yara"}'
-#curl http://localhost:5001/api/v1/files/5cb941ad-fa1c-4444-a685-92024b1fa31c/upload -H "Authorization: Bearer c5b4c827-65ec-47f4-9e8a-234cdba38959" -F 'shuffle_file=@upload.sh'
+curl http://localhost:5001/api/v1/files/file_366ee8d2-1af6-4270-8639-213af30b4a29/upload -H "Authorization: Bearer 09627dcb-7e2a-4843-819b-417d268ff840" -F 'shuffle_file=@upload.sh'
 
 #curl http://localhost:5001/api/v1/files/namespaces/yara -H "Authorization: Bearer c5b4c827-65ec-47f4-9e8a-234cdba38959" --output rules.zip

docker-compose.yml

@@ -1,121 +1,121 @@
 version: '3'
 services:
-  #frontend:
+  frontend:
-  #  #build: ./frontend
+    #build: ./frontend
-  #  image: ghcr.io/frikky/shuffle-frontend:nightly
+    image: ghcr.io/frikky/shuffle-frontend:nightly
-  #  container_name: shuffle-frontend
-  #  hostname: shuffle-frontend
-  #  ports:
-  #    - "${FRONTEND_PORT}:80"
-  #    - "${FRONTEND_PORT_HTTPS}:443"
-  #  networks:
-  #    - shuffle
-  #  environment:
-  #    - BACKEND_HOSTNAME=${BACKEND_HOSTNAME}
-  #  restart: unless-stopped
-  #  depends_on:
-  #    - backend
-  #backend:
-  #  #build: ./backend
-  #  image: ghcr.io/frikky/shuffle-backend:nightly
-  #  container_name: shuffle-backend
-  #  hostname: ${BACKEND_HOSTNAME}
-  #  # Here for debugging:
-  #  ports:
-  #    - "${BACKEND_PORT}:5001"
-  #  networks:
-  #    - shuffle
-  #  volumes:
-  #    - /var/run/docker.sock:/var/run/docker.sock
-  #    - ${SHUFFLE_APP_HOTLOAD_LOCATION}:/shuffle-apps:z
-  #    - ${SHUFFLE_FILE_LOCATION}:/shuffle-files:z
-  #    #- ${SHUFFLE_OPENSEARCH_CERTIFICATE_FILE}:/shuffle-files/es_certificate
-  #  env_file: .env
-  #  environment:
-  #    - SHUFFLE_APP_HOTLOAD_FOLDER=/shuffle-apps
-  #    - SHUFFLE_FILE_LOCATION=/shuffle-files
-  #  restart: unless-stopped
-  #  #depends_on:
-  #    #- opensearch #Not necessary because dependancy is handled within the backend itself instead
-  #    #- database
-  #orborus:
-  #  image: ghcr.io/frikky/shuffle-orborus:latest
-  #  container_name: shuffle-orborus
-  #  hostname: shuffle-orborus
-  #  networks:
-  #    - shuffle
-  #  volumes:
-  #    - /var/run/docker.sock:/var/run/docker.sock
-  #  environment:
-  #    - SHUFFLE_WORKER_VERSION=latest
-  #    - ENVIRONMENT_NAME=${ENVIRONMENT_NAME}
-  #    - BASE_URL=http://${OUTER_HOSTNAME}:5001
-  #    - DOCKER_API_VERSION=1.40
-  #    - SHUFFLE_BASE_IMAGE_NAME=${SHUFFLE_BASE_IMAGE_NAME}
-  #    - SHUFFLE_BASE_IMAGE_REGISTRY=${SHUFFLE_BASE_IMAGE_REGISTRY}
-  #    - SHUFFLE_BASE_IMAGE_TAG_SUFFIX=${SHUFFLE_BASE_IMAGE_TAG_SUFFIX}
-  #    - HTTP_PROXY=${HTTP_PROXY}
-  #    - HTTPS_PROXY=${HTTPS_PROXY}
-  #    - SHUFFLE_PASS_WORKER_PROXY=${SHUFFLE_PASS_WORKER_PROXY}
-  #    - SHUFFLE_PASS_APP_PROXY=${SHUFFLE_PASS_APP_PROXY}
-  #    - SHUFFLE_SWARM_NETWORK_NAME=shuffle_swarm_executions
-  #    - SHUFFLE_SCALE_REPLICAS=1
-  #    - SHUFFLE_SWARM_CONFIG=runn
-  #  restart: unless-stopped
-  #  security_opt:
-  #    - seccomp:unconfined
-  #opensearch:
-  #  image: opensearchproject/opensearch:1.2.4
-  #  hostname: shuffle-opensearch
-  #  container_name: shuffle-opensearch
-  #  environment:
-  #    - bootstrap.memory_lock=true
-  #    - "OPENSEARCH_JAVA_OPTS=-Xms1024m -Xmx1024m" # minimum and maximum Java heap size, recommend setting both to 50% of system RAM
-  #    - cluster.routing.allocation.disk.threshold_enabled=false
-  #    - cluster.name=shuffle-cluster
-  #    - node.name=shuffle-opensearch
-  #    - discovery.seed_hosts=shuffle-opensearch
-  #    - cluster.initial_master_nodes=shuffle-opensearch
-  #    - node.store.allow_mmap=false
-  #  ulimits:
-  #    memlock:
-  #      soft: -1
-  #      hard: -1
-  #    nofile:
-  #      soft: 65536 
-  #      hard: 65536
-  #  volumes:
-  #    - ${DB_LOCATION}:/usr/share/opensearch/data:z
-  #  ports:
-  #    - 9200:9200
-  #  networks:
-  #    - shuffle
-  #  restart: unless-stopped
-  docker-socket-proxy:
-    image: tecnativa/docker-socket-proxy
     container_name: shuffle-frontend
-    privileged: true
+    hostname: shuffle-frontend
-    environment:
+    ports:
-      - SERVICES=1
+      - "${FRONTEND_PORT}:80"
-      - TASKS=1
+      - "${FRONTEND_PORT_HTTPS}:443"
-      - NETWORKS=1
-      - NODES=1
-      - BUILD=1
-      - IMAGES=1
-      - GRPC=1
-      - CONTAINERS=1
-      - PLUGINS=1
-      - SYSTEM=1
-      - VOLUMES=1
-      - INFO=1
-      - DISTRIBUTION=1
-      - POST=1
-      - AUTH=1
-      - SECRETS=1
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
     networks:
       - shuffle
+    environment:
+      - BACKEND_HOSTNAME=${BACKEND_HOSTNAME}
+    restart: unless-stopped
+    depends_on:
+      - backend
+  backend:
+    #build: ./backend
+    image: ghcr.io/frikky/shuffle-backend:nightly
+    container_name: shuffle-backend
+    hostname: ${BACKEND_HOSTNAME}
+    # Here for debugging:
+    ports:
+      - "${BACKEND_PORT}:5001"
+    networks:
+      - shuffle
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ${SHUFFLE_APP_HOTLOAD_LOCATION}:/shuffle-apps:z
+      - ${SHUFFLE_FILE_LOCATION}:/shuffle-files:z
+      #- ${SHUFFLE_OPENSEARCH_CERTIFICATE_FILE}:/shuffle-files/es_certificate
+    env_file: .env
+    environment:
+      - SHUFFLE_APP_HOTLOAD_FOLDER=/shuffle-apps
+      - SHUFFLE_FILE_LOCATION=/shuffle-files
+    restart: unless-stopped
+    #depends_on:
+      #- opensearch #Not necessary because dependancy is handled within the backend itself instead
+      #- database
+  orborus:
+    image: ghcr.io/frikky/shuffle-orborus:latest
+    container_name: shuffle-orborus
+    hostname: shuffle-orborus
+    networks:
+      - shuffle
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    environment:
+      - SHUFFLE_WORKER_VERSION=latest
+      - ENVIRONMENT_NAME=${ENVIRONMENT_NAME}
+      - BASE_URL=http://${OUTER_HOSTNAME}:5001
+      - DOCKER_API_VERSION=1.40
+      - SHUFFLE_BASE_IMAGE_NAME=${SHUFFLE_BASE_IMAGE_NAME}
+      - SHUFFLE_BASE_IMAGE_REGISTRY=${SHUFFLE_BASE_IMAGE_REGISTRY}
+      - SHUFFLE_BASE_IMAGE_TAG_SUFFIX=${SHUFFLE_BASE_IMAGE_TAG_SUFFIX}
+      - HTTP_PROXY=${HTTP_PROXY}
+      - HTTPS_PROXY=${HTTPS_PROXY}
+      - SHUFFLE_PASS_WORKER_PROXY=${SHUFFLE_PASS_WORKER_PROXY}
+      - SHUFFLE_PASS_APP_PROXY=${SHUFFLE_PASS_APP_PROXY}
+      - SHUFFLE_SWARM_NETWORK_NAME=shuffle_swarm_executions
+      - SHUFFLE_SCALE_REPLICAS=1
+      - SHUFFLE_SWARM_CONFIG=runn
+    restart: unless-stopped
+    security_opt:
+      - seccomp:unconfined
+  opensearch:
+    image: opensearchproject/opensearch:1.3.2
+    hostname: shuffle-opensearch
+    container_name: shuffle-opensearch
+    environment:
+      - bootstrap.memory_lock=true
+      - "OPENSEARCH_JAVA_OPTS=-Xms1024m -Xmx1024m" # minimum and maximum Java heap size, recommend setting both to 50% of system RAM
+      - cluster.routing.allocation.disk.threshold_enabled=false
+      - cluster.name=shuffle-cluster
+      - node.name=shuffle-opensearch
+      - discovery.seed_hosts=shuffle-opensearch
+      - cluster.initial_master_nodes=shuffle-opensearch
+      - node.store.allow_mmap=false
+    ulimits:
+      memlock:
+        soft: -1
+        hard: -1
+      nofile:
+        soft: 65536 
+        hard: 65536
+    volumes:
+      - ${DB_LOCATION}:/usr/share/opensearch/data:z
+    ports:
+      - 9200:9200
+    networks:
+      - shuffle
+    restart: unless-stopped
+  #docker-socket-proxy:
+  #  image: tecnativa/docker-socket-proxy
+  #  container_name: shuffle-frontend
+  #  privileged: true
+  #  environment:
+  #    - SERVICES=1
+  #    - TASKS=1
+  #    - NETWORKS=1
+  #    - NODES=1
+  #    - BUILD=1
+  #    - IMAGES=1
+  #    - GRPC=1
+  #    - CONTAINERS=1
+  #    - PLUGINS=1
+  #    - SYSTEM=1
+  #    - VOLUMES=1
+  #    - INFO=1
+  #    - DISTRIBUTION=1
+  #    - POST=1
+  #    - AUTH=1
+  #    - SECRETS=1
+  #  volumes:
+  #    - /var/run/docker.sock:/var/run/docker.sock
+  #  networks:
+  #    - shuffle
 networks:
   shuffle:
     driver: bridge

frontend/src/components/OrgHeader.jsx

@@ -690,7 +690,7 @@ const OrgHeader = (props) => {
 							</Grid>
 						</Grid>
 						}
-						{isCloud ? null : 
+						{/*isCloud ? null : */}
 						<Grid item xs={12} style={{marginTop: 50,}}>
             	<Typography variant="h4" style={{textAlign: "center",}}>SAML SSO (v1.1)</Typography>
 							<Grid container style={{marginTop: 10, }}>
@@ -769,7 +769,6 @@ const OrgHeader = (props) => {
             		</Grid>
             	</Grid>
 						</Grid>
-						}
             {/*
 							<span style={{textAlign: "center"}}>
 								{expanded ? 

frontend/src/views/AngularWorkflow.jsx

@@ -1650,7 +1650,7 @@ const AngularWorkflow = (defaultprops) => {
         }
 
         if (responseJson.public) {
-          alert.info("This workflow is public. Save the workflow to use it in your organization.");
+          //alert.info("This workflow is public. Save the workflow to use it in your organization.");
 				
 					console.log("RESP: ", responseJson)
 					if (Object.getOwnPropertyNames(creatorProfile).length === 0) {
@@ -11004,6 +11004,7 @@ const AngularWorkflow = (defaultprops) => {
   //
 		
 	
+
   const leftView = workflow.public === true ? 
 			<div style={{minHeight: "80vh", height: "100%", minWidth: leftBarSize-70, maxWidth: leftBarSize-70, zIndex: 0, padding: 35, borderRight: "1px solid rgba(91,96,100,1)",}}> 
 				<Typography variant="h6" color="textPrimary" style={{
@@ -11015,7 +11016,7 @@ const AngularWorkflow = (defaultprops) => {
 				<Typography variant="body2" color="textSecondary">
 					This workflow is public	and <span style={{color: "#f86a3e", cursor: "pointer", }} onClick={() => {
             saveWorkflow()
-					}}>must be saved</span> to be used in your organization.
+					}}>must be saved</span> or exported before use.
 				</Typography>
 				{Object.getOwnPropertyNames(creatorProfile).length !== 0 && creatorProfile.github_avatar !== undefined  && creatorProfile.github_avatar !== null ? 
 					<div style={{display: "flex", marginTop: 10, }}>
@@ -11055,6 +11056,27 @@ const AngularWorkflow = (defaultprops) => {
 					</div>
 				</div>
 			: null }
+
+			{workflow.blogpost !== undefined && workflow.blogpost !== null && workflow.blogpost.length > 0 ? 
+				<div style={{
+					marginTop: 10, 
+					maxWidth: "100%", 
+					overflow: "hidden",
+				}}>
+					<Typography variant="body1">
+            <a 
+              href={workflow.blogpost}
+              style={{ textDecoration: "none", color: "#f86a3e" }}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+							Related blog & docs
+						</a>
+					</Typography>
+				</div>
+				: null
+			}
+
 			{appGroup.length > 0 ? 
 				<div style={{display: "flex", marginTop: 10, }}>
 					<Typography variant="body1">
@@ -11071,6 +11093,7 @@ const AngularWorkflow = (defaultprops) => {
 					</AvatarGroup>
 				</div>
 			: null}
+
 			{triggerGroup.length > 0 ? 
 				<div style={{display: "flex", marginTop: 10, }}>
 					<Typography variant="body1">
@@ -11086,6 +11109,7 @@ const AngularWorkflow = (defaultprops) => {
 				</div>
 			: null}
 
+			{/*
 			<div style={{display: "flex", marginTop: 10, }}>
 				<Typography variant="body1">
 					Mitre Att&ck:&nbsp; 
@@ -11094,6 +11118,8 @@ const AngularWorkflow = (defaultprops) => {
 					TBD
 				</Typography>
 			</div>
+			*/}
+
 			{/*
 			<div style={{display: "flex", marginTop: 10, }}>
 				<Typography variant="body1">
@@ -11104,16 +11130,70 @@ const AngularWorkflow = (defaultprops) => {
 				</Typography>
 			</div>
 			*/}
+			
+			{workflow.video !== undefined && workflow.video !== null && workflow.video.length > 0 ? 
+				<div style={{
+					marginTop: 10, 
+					maxWidth: "100%", 
+					overflow: "hidden",
+				}}>
+					<Typography variant="body1">
+						Video	
+					</Typography>
+					{
+						workflow.video.includes("loom.com/share") && workflow.video.split("/").length > 4 ? 
+						<div>
+							<iframe 
+								src={`https://www.loom.com/embed/${workflow.video.split("/")[4]}`}
+								frameBorder={false}
+								webkitallowFullscreen={true}
+								mozallowFullscreen={true}
+								allowFullscreen={true}
+								style={{
+									"top": 0, 
+									"left": 0,
+									"maxWidth": 270,
+									"minWidth": 270,
+								}}
+							/>
+						</div>
+						: 
+						workflow.video.includes("youtube.com") && workflow.video.split("/").length > 3 && workflow.video.includes("v=") 
+						? 
+							<div>
+								<iframe 
+									src={`https://www.youtube.com/embed/${((new URL(workflow.video)).searchParams).get("v")}`}
+									frameBorder={false}
+									webkitallowFullscreen={true}
+									mozallowFullscreen={true}
+									allowFullscreen={true}
+									style={{
+										"top": 0, 
+										"left": 0,
+										"maxWidth": 270,
+										"minWidth": 270,
+									}}
+								/>
+							</div>
+						: 
+						<Typography variant="body1">
+							{workflow.video}
+						</Typography>
+					}	
+				</div>
+			: null}
+
 			{workflow.description !== undefined && workflow.description !== null && workflow.description.length > 0 ?
 				<div style={{marginTop: 5, }}>
 					<Typography variant="body1">
 						Description 
 					</Typography>
-					<Typography variant="body1" color="textSecondary">
+					<Typography variant="body1" color="textSecondary" style={{maxWidth: "100%", maxHeight: 250, overflowX: "hidden"}}>
 						{workflow.description} 
 					</Typography>
 				</div>
 			: null}
+
 			{userdata.avatar === creatorProfile.github_avatar ? 
 				<div style={{marginTop: 50, }}>
 					<Button

frontend/src/views/Docs.jsx

@@ -59,7 +59,8 @@ const Docs = (defaultprops) => {
 
 	// Quickfix for react router 5 -> 6 
 	const params = useParams();
-	var props = JSON.parse(JSON.stringify(defaultprops))
+	//var props = JSON.parse(JSON.stringify(defaultprops))
+	var props = Object.assign({selected: false}, defaultprops);
 	props.match = {}
 	props.match.params = params
 

frontend/src/views/Workflows.jsx

@@ -83,7 +83,7 @@ import { DataGrid, GridToolbar } from "@material-ui/data-grid";
 //import JSONPrettyMon from 'react-json-pretty/dist/monikai'
 import Dropzone from "../components/Dropzone";
 
-import { Link } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
 import { useAlert } from "react-alert";
 import ChipInput from "material-ui-chip-input";
 import { v4 as uuidv4 } from "uuid";
@@ -487,6 +487,8 @@ export const validateJson = (showResult) => {
 const Workflows = (props) => {
   const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
   document.title = "Shuffle - Workflows";
+	let navigate = useNavigate();
+
   const theme = useTheme();
   const alert = useAlert();
   const classes = useStyles(theme);
@@ -893,7 +895,7 @@ const Workflows = (props) => {
           console.log("Status not 200 for workflows :O!: ", response.status);
 
           if (isCloud) {
-            window.location.pathname = "/search?tab=workflows";
+            navigate("/search?tab=workflows")
           }
 
           alert.info("Failed getting workflows.");