Built PoC of execution in workflow view (#23)

backend/build.sh

@@ -4,6 +4,7 @@ docker rm shuffle-backend
 docker rmi frikky/shuffle:backend 
 
 docker build . -t frikky/shuffle:backend
+docker push frikky/shuffle:backend
 
 echo "Starting server"
 #docker run -it \

backend/go-app/main.go

@@ -5248,12 +5248,9 @@ func handleSwaggerValidation(body []byte) (ParsedOpenApi, error) {
 		body = swaggerdata
 	}
 
-	//parsed := ParsedOpenApi{}
+	// Overwrite with new json data
-	if !isJson {
+	_ = isJson
-		//yaml.l
+	body = swaggerdata
-		log.Printf("Parsing from YAML to json!")
-		body = swaggerdata
-	}
 
 	// Parsing it to swagger 3
 	parsed = ParsedOpenApi{

docker-compose.yml

@@ -46,7 +46,7 @@ services:
       - database
   orborus:
     #build: ./functions/onprem/orborus
-    image: frikky/shuffle:orborus
+    image: frikky/orborus:latest
     container_name: shuffle-orborus
     hostname: shuffle-orborus
     networks:

frontend/run.sh

@@ -1,17 +1,17 @@
 #!/bin/sh
-docker stop frikky/shuffle:frontend
+docker stop shuffle-frontend
-docker rm frikky/shuffle:frontend
+docker rm shuffle-frontend
 docker rmi frikky/shuffle:frontend
 
 echo "Running build for website"
-sudo npm run build
+#sudo npm run build
 docker build . -t frikky/shuffle:frontend
 
 echo "Starting server"
 # Rerun build locally for it to update :)
-docker run -it \
+#docker run -it \
-	-p 3001:80 \
+#	-p 3001:80 \
-	-p 3002:443 \
+#	-p 3002:443 \
-	-v $(pwd)/build:/usr/share/nginx/html:ro \
+#	-v $(pwd)/build:/usr/share/nginx/html:ro \
-	--rm \
+#	--rm \
-	nginx	
+#	nginx	

frontend/src/AngularWorkflow.js

@@ -3,7 +3,9 @@ import { useInterval } from 'react-powerhooks';
 
 import uuid from "uuid";
 
+import {Link} from 'react-router-dom';
 import TextField from '@material-ui/core/TextField';
+import Drawer from '@material-ui/core/Drawer';
 import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
@@ -23,7 +25,11 @@ import Input from '@material-ui/core/Input';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import ReactJson from 'react-json-view'
 
+import PolymerIcon from '@material-ui/icons/Polymer';
 import CreateIcon from '@material-ui/icons/Create';
 import PlayArrowIcon from '@material-ui/icons/PlayArrow';
 import AspectRatioIcon from '@material-ui/icons/AspectRatio';
@@ -111,6 +117,7 @@ const AngularWorkflow = (props) => {
 	const [workflowDone, setWorkflowDone] = React.useState(false)
 	const [localFirstrequest, setLocalFirstrequest] = React.useState(true)
 	const [requiresAuthentication, setRequiresAuthentication] = React.useState(true)
+	const [rightSideBarOpen, setRightSideBarOpen] = React.useState(false)
 
 	const [variableAnchorEl, setVariableAnchorEl] = React.useState(null)
 
@@ -148,6 +155,8 @@ const AngularWorkflow = (props) => {
 
 	const [, setExecutingNodes] = React.useState([])
 	const [executionRunning, setExecutionRunning] = React.useState(false)
+	const [executionModalOpen, setExecutionModalOpen] = React.useState(true)
+	const [executionData, setExecutionData] = React.useState({})
 
 	const [lastSaved, setLastSaved] = React.useState(true)
 
@@ -269,6 +278,11 @@ const AngularWorkflow = (props) => {
 		//console.log(responseJson)
 		// Loop nodes and find results
 		// Update on every interval? idk
+
+		if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
+			console.log("Executiondata: ", responseJson)
+			setExecutionData(responseJson)
+		}
 		if (responseJson.execution_id !== executionRequest.execution_id) {
 			cy.elements().removeClass('success-highlight failure-highlight executing-highlight')
 			return
@@ -640,6 +654,8 @@ const AngularWorkflow = (props) => {
 				"authorization": responseJson.authorization,
 			})
 			setExecutingNodes([workflow.start])
+			setExecutionData({})
+			setExecutionModalOpen(true)
 			start()
 		})
 		.catch(error => {
@@ -792,7 +808,8 @@ const AngularWorkflow = (props) => {
 		//setSelectedTriggerIndex(-1)	
 		//setTriggerFolders([])	
 
-		//setLocalFirstrequest(true)
+		// Can be used for right side view
+		setRightSideBarOpen(false)
 		console.timeEnd("UNSELECT")
 	}
 
@@ -2520,10 +2537,10 @@ const AngularWorkflow = (props) => {
 
 	const appApiView = Object.getOwnPropertyNames(selectedAction).length > 0 && Object.getOwnPropertyNames(selectedApp).length > 0 ? 
 		<div style={appApiViewStyle}>
-			<div style={{display: "flex", height: "40px", marginBottom: 30}}>
+			<div style={{display: "flex", height: 40, marginBottom: 30}}>
 				<div style={{flex: "1"}}>
 					<h3 style={{marginBottom: "5px"}}>{selectedAction.app_name}</h3>
-					<a href="/docs/apps" style={{textDecoration: "none", color: "#f85a3e"}}>What are apps?</a>
+					<Link to="/docs/apps" style={{textDecoration: "none", color: "#f85a3e"}}>What are apps?</Link>
 				</div>
 				<div style={{flex: "1"}}>
 					<Button disabled={selectedAction.id === workflow.start} style={{zIndex: 5000, marginTop: "15px",}} color="primary" variant="outlined" onClick={(e) => {
@@ -2635,7 +2652,7 @@ const AngularWorkflow = (props) => {
 		: null 
 
 
-	const headerSize = 74
+	const headerSize = 68
 	const rightsidebarStyle = {
 		position: "fixed", 
 		right: 0, 
@@ -3248,7 +3265,7 @@ const AngularWorkflow = (props) => {
 				<div style={{display: "flex", height: "40px", marginBottom: "30px"}}>
 					<div style={{flex: "1"}}>
 						<h3 style={{marginBottom: "5px"}} >Branch: Conditions - {selectedEdgeIndex}</h3>
-						<a href="/docs/conditions" style={{textDecoration: "none", color: "#f85a3e"}}>What are conditions?</a>
+						<Link to="/docs/conditions" style={{textDecoration: "none", color: "#f85a3e"}}>What are conditions?</Link>
 					</div>
 				</div>
 				<Divider style={{marginBottom: "10px", marginTop: "10px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
@@ -3478,7 +3495,7 @@ const AngularWorkflow = (props) => {
 				<div style={{display: "flex", height: "40px", marginBottom: "30px"}}>
 					<div style={{flex: "1"}}>
 						<h3 style={{marginBottom: "5px"}}>{selectedTrigger.app_name}: {selectedTrigger.status}</h3>
-						<a href="/docs/webhooks" style={{textDecoration: "none", color: "#f85a3e"}}>What are webhooks?</a>
+						<Link to="/docs/triggers#webhook" style={{textDecoration: "none", color: "#f85a3e"}}>What are webhooks?</Link>
 					</div>
 				</div>
 				<Divider style={{marginBottom: "10px", marginTop: "10px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
@@ -3564,7 +3581,7 @@ const AngularWorkflow = (props) => {
 					<div style={{display: "flex", height: "40px", marginBottom: "30px"}}>
 						<div style={{flex: "1"}}>
 							<h3 style={{marginBottom: "5px"}}>{selectedTrigger.app_name}: {selectedTrigger.status}</h3>
-							<a href="/docs/webhooks" style={{textDecoration: "none", color: "#f85a3e"}}>What are webhooks?</a>
+							<Link to="/docs/triggers#webhook" style={{textDecoration: "none", color: "#f85a3e"}}>What are webhooks?</Link>
 						</div>
 					</div>
 					<Divider style={{marginBottom: "10px", marginTop: "10px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
@@ -3914,7 +3931,7 @@ const AngularWorkflow = (props) => {
 					<div style={{display: "flex", height: "40px", marginBottom: "30px"}}>
 						<div style={{flex: "1"}}>
 							<h3 style={{marginBottom: "5px"}}>{selectedTrigger.app_name}: {selectedTrigger.status}</h3>
-							<a href="/docs/schedules" style={{textDecoration: "none", color: "#f85a3e"}}>What are schedules?</a>
+							<Link to="/docs/triggers#schedule" style={{textDecoration: "none", color: "#f85a3e"}}>What are schedules?</Link>
 						</div>
 					</div>
 					<Divider style={{marginBottom: "10px", marginTop: "10px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
@@ -4043,7 +4060,7 @@ const AngularWorkflow = (props) => {
 					<div style={{display: "flex", height: "40px", marginBottom: "30px"}}>
 						<div style={{flex: "1"}}>
 							<h3 style={{marginBottom: "5px"}}>{selectedTrigger.app_name}: {selectedTrigger.status}</h3>
-							<a href="/docs/schedules" style={{textDecoration: "none", color: "#f85a3e"}}>What are schedules?</a>
+							<Link to="/docs/triggers#schedule" style={{textDecoration: "none", color: "#f85a3e"}}>What are schedules?</Link>
 						</div>
 					</div>
 					<Divider style={{marginBottom: "10px", marginTop: "10px", height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
@@ -4195,7 +4212,17 @@ const AngularWorkflow = (props) => {
 		return (
 			<div style={topBarStyle}>	
 				<div style={{margin: 10}}>
-					<h3>Editing workflow {workflow.name}</h3>
+					<Breadcrumbs aria-label="breadcrumb" separator="›" style={{color: "white",}}>
+						<Link to="/workflows" style={{textDecoration: "none", color: "inherit",}}>
+							<h2 style={{color: "rgba(255,255,255,0.5)"}}>
+								<PolymerIcon style={{marginRight: 10}} />
+								Workflows
+							</h2>
+						</Link>
+						<h2>
+							{workflow.name}
+						</h2>
+					</Breadcrumbs>
 				</div>
 			</div>
 		)
@@ -4219,7 +4246,7 @@ const AngularWorkflow = (props) => {
 	const BottomCytoscapeBar = () => {
 		const boxSize = 100
 		const executionButton = executionRunning ? 
-			<Tooltip color="primary" title="Stop running workflow (ctrl+a)" placement="top">
+			<Tooltip color="primary" title="Stop execution" placement="top">
 				<Button style={{height: boxSize, width: boxSize}} color="secondary" variant="contained" onClick={() => {
 					abortExecution()
 				}}>
@@ -4227,7 +4254,7 @@ const AngularWorkflow = (props) => {
 				</Button> 
 			</Tooltip>
 			:
-			<Tooltip color="primary" title="Execute workflow once (ctrl+a)" placement="top">
+			<Tooltip color="primary" title="Test execution" placement="top">
 				<Button disabled={executionRequestStarted} style={{height: boxSize, width: boxSize}} color="primary" variant="contained" onClick={() => {
 					executeWorkflow()
 				}}>
@@ -4281,6 +4308,7 @@ const AngularWorkflow = (props) => {
 	const RightSideBar = () => {
 		setLastSaved(false)
 		if (Object.getOwnPropertyNames(selectedAction).length > 0 && Object.getOwnPropertyNames(selectedApp).length > 0) {
+			setRightSideBarOpen(true)
 			//console.time('ACTIONSTART');
 			return(
 				<div style={rightsidebarStyle}>	
@@ -4289,6 +4317,7 @@ const AngularWorkflow = (props) => {
 			)
 		} else if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
 			if (selectedTrigger.trigger_type === "SCHEDULE") {
+				setRightSideBarOpen(true)
 				console.log("SCHEDULE")
 				return(
 					<div style={rightsidebarStyle}>	
@@ -4296,6 +4325,7 @@ const AngularWorkflow = (props) => {
 					</div>
 				)
 			} else if (selectedTrigger.trigger_type === "WEBHOOK") {
+				setRightSideBarOpen(true)
 				console.log("WEBHOOK")
 				return(
 					<div style={rightsidebarStyle}>	
@@ -4303,6 +4333,7 @@ const AngularWorkflow = (props) => {
 					</div>
 				)
 			} else if (selectedTrigger.trigger_type === "EMAIL") {
+				setRightSideBarOpen(true)
 				console.log("EMAIL")
 				return(
 					<div style={rightsidebarStyle}>	
@@ -4310,6 +4341,7 @@ const AngularWorkflow = (props) => {
 					</div>
 				)
 			} else if (selectedTrigger.trigger_type === "USERINPUT") {
+				setRightSideBarOpen(true)
 				console.log("USER INPUT SIDEBAR")
 				return(
 					<div style={rightsidebarStyle}>	
@@ -4323,6 +4355,7 @@ const AngularWorkflow = (props) => {
 				return null
 			}
 		} else if (Object.getOwnPropertyNames(selectedEdge).length > 0) {
+			setRightSideBarOpen(true)
 			return(
 				<div style={rightsidebarStyle}>	
 					<EdgeSidebar />
@@ -4356,6 +4389,59 @@ const AngularWorkflow = (props) => {
 				</div>
 		</div>
 
+	const ExecutionModal = () => {
+		return (
+			<Drawer anchor={"right"} open={executionModalOpen} onClose={() => setExecutionModalOpen(false)}>
+				<div style={{padding: 20, maxWidth: 250, minWidth: 250,}}>
+					<h2>Executing Workflow</h2>	
+					<Divider />
+					<h3>Execution Argument: </h3>{executionText}
+					{executionData.status !== undefined && executionData.status.length > 0 ?
+						<div>
+							<h3>Status: </h3>{executionData.status}
+						</div>
+						: null
+					}
+					<h3>Results: </h3>
+					{executionData.results === undefined || executionData.results === null || executionData.results.length === 0 ?
+						<CircularProgress />
+						:
+						executionData.results.map(data => {
+							var showResult = data.result.trim()
+							showResult.split(" None").join(" \"None\"")
+							//showResult = replaceAll(showResult, " None", " \"None\"");
+							var jsonvalid = true
+							try {
+								JSON.parse(showResult)
+							} catch (e) {
+								jsonvalid = false
+							}
+
+							return (
+								<div style={{margin: 10, border: "1px solid rgba(0,0,0,0.5)"}}>
+									<div style={{width: 17, height: 17, borderRadius: 17 / 2, backgroundColor: "#f85a3e", marginRight: 10}}/>
+									<b>Name:</b> {data.action.label}<div/>
+									<b>Status:</b> {data.status}<div/>
+									<b>Result:</b>&nbsp;
+									{jsonvalid ? <ReactJson 
+											src={JSON.parse(showResult)} 
+											theme="solarized" 
+											collapsed={false}
+											displayDataTypes={false}
+											name={"Results for "+data.action.label}
+										/>
+									: 
+									data.result
+									}
+								</div>
+							)
+						})
+					}
+				</div>
+			</Drawer>
+		)
+	}
+	
 	const newView = isLoggedIn ?
 		<div style={{color: "white"}}>
 			<div style={{display: "flex", borderTop: "1px solid rgba(91, 96, 100, 1)"}}>
@@ -4373,6 +4459,7 @@ const AngularWorkflow = (props) => {
 					}}
 				/>
 			</div>
+			<ExecutionModal />
 			<RightSideBar />
 			<BottomCytoscapeBar />
 			<TopCytoscapeBar />
@@ -4383,7 +4470,7 @@ const AngularWorkflow = (props) => {
 		<div style={{color: "white"}}>
 			TMP FOR NOT LOGGED IN 
 		</div>
-
+	
 	const variablesModal = variablesModalOpen ? 
 		<Dialog modal 
 			open={variablesModalOpen} 
@@ -4598,7 +4685,7 @@ const AngularWorkflow = (props) => {
 		>
 			<DialogTitle><div style={{color: "white"}}>Authentication for {selectedApp.name}</div></DialogTitle>
 			<DialogContent>
-				<a href="/docs/apps#authentication" style={{textDecoration: "none", color: "#f85a3e"}}>What is this?</a>
+				<Link to="/docs/apps#authentication" style={{textDecoration: "none", color: "#f85a3e"}}>What is this?</Link>
 				<div />
 				{selectedApp.link.length > 0 ? <EndpointData /> : null}
 				<div style={{marginTop: 15, marginBottom: 15, }}/>

frontend/src/Workflows.js

@@ -32,7 +32,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 const surfaceColor = "#27292D"
 
 const Workflows = (props) => {
-  	const { globalUrl, isLoggedIn, isLoaded, } = props;
+  const { globalUrl, isLoggedIn, isLoaded, } = props;
 	document.title = "Shuffle - Workflows"
 
 	const alert = useAlert()
@@ -158,7 +158,7 @@ const Workflows = (props) => {
 
 	const getWorkflowExecution = (id) => {
 		fetch(globalUrl+"/api/v1/workflows/"+id+"/executions", {
-    	  	method: 'GET',
+    	  method: 'GET',
 				headers: {
 					'Content-Type': 'application/json',
 					'Accept': 'application/json',
@@ -186,7 +186,7 @@ const Workflows = (props) => {
 	const abortExecution = (workflowid, executionid) => {
 		alert.success("Aborting execution")
 		fetch(globalUrl+"/api/v1/workflows/"+workflowid+"/executions/"+executionid+"/abort", {
-    	  	method: 'GET',
+    	  method: 'GET',
 				headers: {
 					'Content-Type': 'application/json',
 					'Accept': 'application/json',
@@ -210,7 +210,7 @@ const Workflows = (props) => {
 		alert.show("Executing workflow "+id)
 		setTrackingId(id)
 		fetch(globalUrl+"/api/v1/workflows/"+id+"/execute", {
-    	  	method: 'GET',
+    	  method: 'GET',
 				headers: {
 					'Content-Type': 'application/json',
 					'Accept': 'application/json',
@@ -290,7 +290,7 @@ const Workflows = (props) => {
 	const deleteWorkflow = (id) => {
 		alert.success("Deleted workflow "+id)
 		fetch(globalUrl+"/api/v1/workflows/"+id, {
-    	  	method: 'DELETE',
+    	  method: 'DELETE',
 				headers: {
 					'Content-Type': 'application/json',
 					'Accept': 'application/json',

functions/onprem/orborus/build.sh

@@ -1,4 +1,9 @@
-docker rmi frikky/shuffle:orborus --force
+NAME=orborus
+VERSION=0.1.0
 
-docker build . -t frikky/shuffle:orborus
+echo "Running docker build with $NAME:$VERSION"
-docker push frikky/shuffle:orborus
+#docker rmi frikky/shuffle:$NAME --force
+docker build . -t frikky/shuffle:$NAME -t docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION -t frikky/$NAME:$VERSION
+
+docker push frikky/$NAME:$VERSION
+#docker push docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION

functions/onprem/orborus/orborus.go

@@ -146,6 +146,9 @@ func initializeImages(dockercli *dockerclient.Client) {
 	ctx := context.Background()
 
 	// check whether theyre the same first
+	//version := "0.1.0"
+	// fmt.Sprintf("docker.pkg.github.com/frikky/shuffle/orborus:%s", version),
+	// fmt.Sprintf("docker.pkg.github.com/frikky/shuffle/worker:%s", version),
 	images := []string{
 		fmt.Sprintf("docker.io/%s:app_sdk", baseimagename),
 		fmt.Sprintf("docker.io/%s:worker", baseimagename),
@@ -155,7 +158,7 @@ func initializeImages(dockercli *dockerclient.Client) {
 	for _, image := range images {
 		reader, err := dockercli.ImagePull(ctx, image, pullOptions)
 		if err != nil {
-			log.Printf("Failed getting %s", image)
+			log.Printf("Failed getting %s: %s", image, err)
 			continue
 		}
 
@@ -197,6 +200,10 @@ func main() {
 
 	log.Printf("--- Setting up Docker environment. Downloading worker and App SDK! ---")
 	initializeImages(dockercli)
+
+	//workerName := "worker"
+	//workerVersion := "0.1.0"
+	//workerImage := fmt.Sprintf("docker.pkg.github.com/frikky/shuffle/%s:%s", workerName, workerVersion)
 	workerImage := fmt.Sprintf("%s:worker", baseimagename)
 
 	log.Printf("--- Finished configuring docker environment ---\n")

functions/onprem/worker/build.sh

@@ -0,0 +1,11 @@
+NAME=worker
+VERSION=0.1.0
+
+echo "Running docker build with $NAME:$VERSION"
+CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o worker.bin .
+docker build . -t frikky/shuffle:$NAME -t docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION -t frikky/$NAME:$VERSION
+
+# Push both for now..
+docker push frikky/$NAME:$VERSION 
+docker push frikky/shuffle:$NAME
+#docker push docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION

functions/onprem/worker/run

@@ -1,15 +1,15 @@
 echo "Compiling program"
-CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o worker.bin .
+#CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o worker.bin .
 
 echo "Fixing docker env"
-docker rmi frikky/shuffle:worker --force
+#docker rmi frikky/shuffle:worker --force
-docker build . -t frikky/shuffle:worker
+#docker build . -t frikky/shuffle:worker
-docker push frikky/shuffle:worker
+#docker push frikky/shuffle:worker
 
-#docker run \
+docker run \
-#	--env "AUTHORIZATION=ASD" \
+	--env "AUTHORIZATION=ASD" \
-#	--env "DOCKER_API_VERSION=1.39" \
+	--env "DOCKER_API_VERSION=1.39" \
-#	--env "EXECUTIONID=ASD" \
+	--env "EXECUTIONID=ASD" \
-#	--env "BASE_URI=$BASE_URI" \
+	--env "BASE_URI=$BASE_URI" \
-#	-v /var/run/docker.sock:/var/run/docker.sock \
+	-v /var/run/docker.sock:/var/run/docker.sock \
-#	frikky/shuffle:worker
+	frikky/shuffle:worker