Fixed execution speed with too many executions

frontend/src/Admin.js

@@ -43,7 +43,7 @@ const Admin = (props) => {
 		console.log("INPUT: ", data)
 
 		// Just use this one?
-		const url = globalUrl+'/api/v1/workflows/'+data["workflow_id datastore:"]+"/schedule/"+data.id
+		const url = globalUrl+'/api/v1/workflows/'+data["workflow_id"]+"/schedule/"+data.id
 		console.log("URL: ", url)
 		fetch(url, {
 			method: 'DELETE',
@@ -54,6 +54,7 @@ const Admin = (props) => {
 		})
 		.then(response =>
 			response.json().then(responseJson => {
+				console.log("RESP: ", responseJson)
 				if (responseJson["success"] === false) {
 					alert.error("Failed stopping schedule")
 				} else {

frontend/src/AngularWorkflow.js

@@ -112,6 +112,7 @@ const AngularWorkflow = (props) => {
 
 	const [appAuthentication, setAppAuthentication] = React.useState({});
 	const [variablesModalOpen, setVariablesModalOpen] = React.useState(false);
+	const [executionVariablesModalOpen, setExecutionVariablesModalOpen] = React.useState(false);
 	const [authenticationModalOpen, setAuthenticationModalOpen] = React.useState(false);
 	const [conditionsModalOpen, setConditionsModalOpen] = React.useState(false);
 	const [newVariableName, setNewVariableName] = React.useState("");
@@ -791,7 +792,6 @@ const AngularWorkflow = (props) => {
 
 	const onNodeSelect = (event) => {
 		const data = event.target.data()
-		console.log("NODE: ", data)
 		setLastSaved(false)
 		//console.log(data)
 
@@ -1412,22 +1412,6 @@ const AngularWorkflow = (props) => {
 		const [open, setOpen] = React.useState(false);
 		const [anchorEl, setAnchorEl] = React.useState(null);
 
-		if (workflow.workflow_variables === undefined || workflow.workflow_variables === null || workflow.workflow_variables.length === 0) {
-			return (
-				<div style={appViewStyle}>
-					<div style={appScrollStyle}>
-						<div style={{margin: 10}}>
-							Looks like you don't have any variables yet.  
-							<div/>
-							<div style={{width: "100%", margin: "auto"}}>
-								<Button fullWidth style={{margin: "auto", marginTop: "10px", borderRadius: 0}} color="primary" variant="outlined" onClick={() => setVariablesModalOpen(true)}>Make a new workflow variable</Button> 				
-							</div>
-						</div>
-					</div>
-				</div>
-			)
-		} 	
-
 		const menuClick = (event) => {
 			setOpen(!open)
 			setAnchorEl(event.currentTarget);
@@ -1438,8 +1422,13 @@ const AngularWorkflow = (props) => {
 			setWorkflow(workflow)
 		}
 
+		const deleteExecutionVariable = (variableName) => {
+			workflow.execution_variables = workflow.execution_variables.filter(data => data.name !== variableName)
+			setWorkflow(workflow)
+		}
+
 		const variableScrollStyle = {
-			marginTop: "10px",
+			margin: 15,
 			overflow: "scroll",
 			height: "66vh",
 			overflowX: "auto",
@@ -1450,7 +1439,9 @@ const AngularWorkflow = (props) => {
 		return (
 			<div style={appViewStyle}>
 				<div style={variableScrollStyle}>
-					{workflow.workflow_variables.map(variable=> {
+						<a href="https://shuffler.io/docs/workflows#variables" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>What are WORKFLOW variables?</a>
+					{workflow.workflow_variables === null ? 
+					null : workflow.workflow_variables.map(variable=> {
 						return (
 							<div>
 								<Paper square style={paperVariableStyle} onClick={() => {
@@ -1508,10 +1499,69 @@ const AngularWorkflow = (props) => {
 							</div>
 						)
 					})}
+					<div style={{flex: "1"}}>
+						<Button fullWidth style={{margin: "auto", marginTop: "10px",}} color="primary" variant="outlined" onClick={() => setVariablesModalOpen(true)}>New workflow variable</Button> 				
+					</div>
+					<Divider style={{marginBottom: 20, marginTop: 20, height: 1, width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
+						<a href="https://shuffler.io/docs/workflows#execution_variables" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>What are EXECUTION variables?</a>
+					{workflow.execution_variables === null ? 
+					null : workflow.execution_variables.map(variable=> {
+						return (
+							<div>
+								<Paper square style={paperVariableStyle} onClick={() => {
+								}}>
+									<div style={{marginLeft: "10px", marginTop: "5px", marginBottom: "5px", width: "2px", backgroundColor: "orange", marginRight: "5px"}} />
+									<div style={{display: "flex", width: "100%"}}>
+										<div style={{flex: "10", marginTop: "15px", marginLeft: "10px", overflow: "hidden"}} onClick={() => {
+										setNewVariableName(variable.name)
+										setExecutionVariablesModalOpen(true)}}>
+											Name: {variable.name} 
+										</div>
+										<div style={{flex: "1", marginLeft: "0px"}}>
+											<IconButton
+												aria-label="more"
+												aria-controls="long-menu"
+												aria-haspopup="true"
+												onClick={menuClick}
+												style={{color: "white"}}
+											  >
+												<MoreVertIcon />
+											</IconButton>
+											<Menu
+      										id="long-menu"
+											  	anchorEl={anchorEl}
+													keepMounted
+													open={open}
+						  					  PaperProps={{
+						  					    style: {
+						  					    	backgroundColor: surfaceColor,
+						  					    }
+						  					  }}
+											  onClose={() => {
+												  setOpen(false)
+												  setAnchorEl(null)
+											  }}
+      										>
 
-				</div>
-				<div style={{flex: "1"}}>
-					<Button fullWidth style={{margin: "auto", marginTop: "10px",}} color="primary" variant="outlined" onClick={() => setVariablesModalOpen(true)}>New workflow variable</Button> 				
+											<MenuItem style={{backgroundColor: surfaceColor, color: "white"}} onClick={() => {
+												setOpen(false)
+												setNewVariableName(variable.name)
+												setExecutionVariablesModalOpen(true)
+											}} key={"Edit"}>{"Edit"}</MenuItem>
+											<MenuItem style={{backgroundColor: surfaceColor, color: "white"}} onClick={() => {
+												deleteExecutionVariable(variable.name)
+												setOpen(false)
+											}} key={"Delete"}>{"Delete"}</MenuItem>
+											</Menu>
+										</div>
+									</div>
+								</Paper>
+							</div>
+						)
+					})}
+					<div style={{flex: "1"}}>
+						<Button fullWidth style={{margin: "auto", marginTop: "10px",}} color="primary" variant="outlined" onClick={() => setExecutionVariablesModalOpen(true)}>New execution variable</Button> 				
+					</div>
 				</div>
 			</div>
 		)
@@ -1862,6 +1912,7 @@ const AngularWorkflow = (props) => {
 					isStartNode: false,
 					large_image: app.large_image,
 					authentication: [],
+					execution_variable: undefined,
 				}
 
 				// const image = "url("+app.large_image+")"
@@ -2361,7 +2412,7 @@ const AngularWorkflow = (props) => {
 
 						} else if (data.variant === "WORKFLOW_VARIABLE") {
 							varcolor = "#f85a3e"
-							if (workflow.workflow_variables === null || workflow.workflow_variables === undefined || workflow.workflow_variables.length === 0) {
+							if ((workflow.workflow_variables === null || workflow.workflow_variables === undefined || workflow.workflow_variables.length === 0) && (workflow.execution_variables === null || workflow.execution_variables === undefined || workflow.execution_variables.length === 0)) {
 								setCurrentView(2)
 								datafield = 
 								<div>
@@ -2389,15 +2440,22 @@ const AngularWorkflow = (props) => {
 									fullWidth
 									value={selectedAction.parameters[count].action_field}
 									onChange={(e) => {
+										console.log(e.target.value)
 										changeActionParameterVariable(e.target.value, count) 
 									}}
 									style={{backgroundColor: inputColor, color: "white", height: "50px"}}
 									>
-									{workflow.workflow_variables.map(data => (
+									{workflow.workflow_variables !== null ? workflow.workflow_variables.map(data => (
 										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data.name}>
 											{data.name}
 										</MenuItem>
-									))}
+									)) : null}
+									<Divider />
+									{workflow.execution_variables !== null ? workflow.execution_variables.map(data => (
+										<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data.name}>
+											{data.name}
+										</MenuItem>
+									)) : null}
 								</Select>
 							}
 
@@ -2544,7 +2602,7 @@ const AngularWorkflow = (props) => {
 				placeholder={selectedAction.label}
 				onChange={selectedNameChange}
 			/>
-			{environments !== undefined && environments.length > 1 ?
+			{environments !== undefined && environments !== null && environments.length > 1 ?
 				<div style={{marginTop: "20px"}}>
 					Environment
 					<Select
@@ -2576,6 +2634,42 @@ const AngularWorkflow = (props) => {
 					</Select>
 				</div>
 				: null}
+			{workflow.execution_variables !== undefined && workflow.execution_variables !== null && workflow.execution_variables.length > 0 ?
+				<div style={{marginTop: "20px"}}>
+					Execution variables	
+					<Select
+						value={selectedAction.execution_variable !== undefined ? selectedAction.execution_variable.name : {"name": "Select a variable"}}
+						PaperProps={{
+							style: {
+								backgroundColor: inputColor,
+							}
+						}}
+						SelectDisplayProps={{
+							style: {
+								marginLeft: 10,
+							}
+						}}
+						fullWidth
+						onChange={(e) => {
+							console.log("Variable", e.target.value)
+							//selectedAction.
+							const value = workflow.execution_variables.find(a => a.name === e.target.value.name)
+							console.log("FOUND: ", value)
+							selectedAction.execution_variable = value
+							setSelectedAction(selectedAction)
+							//setSelectedActionEnvironment(env) 
+							//selectedAction.environment = env.Name
+						}}
+						style={{backgroundColor: inputColor, color: "white", height: "50px"}}
+					>
+						{workflow.execution_variables.map(data => (
+							<MenuItem style={{backgroundColor: inputColor, color: "white"}} value={data}>
+								{data.name}
+							</MenuItem>
+						))}
+					</Select>
+				</div>
+				: null}
 			{/*requiresAuthentication ? 
 				<div style={{marginTop: "20px"}}>
 					<Button fullWidth style={{margin: "auto", marginTop: "10px",}} color="primary" variant="contained" onClick={() => setAuthenticationModalOpen(true)}>
@@ -4309,7 +4403,7 @@ const AngularWorkflow = (props) => {
 			)
 		} else if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
 			if (selectedTrigger.trigger_type === "SCHEDULE") {
-				console.log("SCHEDULE")
+				//console.log("SCHEDULE")
 				return(
 					<div style={rightsidebarStyle}>	
 						<ScheduleSidebar />
@@ -4492,7 +4586,6 @@ const AngularWorkflow = (props) => {
 						executionData.results.map(data => {
 							var showResult = data.result.trim()
 							showResult.split(" None").join(" \"None\"")
-							console.log("RESULT: ", showResult)
 
 							// showResult = replaceAll(showResult, " None", " \"None\"")
 							// Super basic check.
@@ -4555,7 +4648,7 @@ const AngularWorkflow = (props) => {
 					cy={(incy) => {
 						// FIXME: There's something specific loading when
 						// you do the first hover of a node. Why is this different?
-						console.log("CY: ", incy)
+						//console.log("CY: ", incy)
 						setCy(incy)
 					}}
 				/>
@@ -4569,6 +4662,104 @@ const AngularWorkflow = (props) => {
 		<div style={{color: "white"}}>
 			TMP FOR NOT LOGGED IN 
 		</div>
+
+	const executionVariableModal = executionVariablesModalOpen ? 
+		<Dialog modal 
+			open={executionVariablesModalOpen} 
+			onClose={() => {
+				setNewVariableName("")
+				setExecutionVariablesModalOpen(false)
+			}}
+			PaperProps={{
+				style: {
+					backgroundColor: surfaceColor,
+					color: "white",
+				},
+			}}
+		>
+		<FormControl>
+			<DialogTitle><span style={{color: "white"}}>Execution Variable</span></DialogTitle>
+				<DialogContent>
+					Execution Variables are TEMPORARY variables that you can ony be set and used during execution. Learn more <a href="https://shuffler.io/docs/workflow#execution_variables" target="_blank" style={{textDecoration: "none", color: "#f85a3e"}}>here</a>
+					<TextField
+						onBlur={(event) => setNewVariableName(event.target.value)}
+						color="primary"
+						placeholder="Name"
+						style={{marginTop: 25}}
+						InputProps={{
+							style:{
+								color: "white"
+							}
+						}}
+						margin="dense"
+						fullWidth
+						defaultValue={newVariableName}
+					  />
+				</DialogContent>
+				<DialogActions>
+	        <Button 
+						style={{borderRadius: "0px"}}
+						onClick={() => {
+							setNewVariableName("")
+							setExecutionVariablesModalOpen(false)
+						}} color="primary">
+								Cancel
+	        </Button>
+					<Button style={{borderRadius: "0px"}} disabled={newVariableName.length === 0} onClick={() => {
+						console.log("VARIABLES! ", newVariableName)
+						if (workflow.execution_variables === undefined || workflow.execution_variables === null) {
+							workflow.execution_variables = []
+						}
+
+						// try to find one with the same name
+						const found = workflow.execution_variables.findIndex(data => data.name === newVariableName)
+						//console.log(found)
+						if (found !== -1) {
+							if (newVariableName.length > 0) {
+								workflow.execution_variables[found].name = newVariableName
+							} 
+						} else {
+							workflow.execution_variables.push({
+								"name": newVariableName,		
+								"description": "An execution variable",		
+								"value": "",
+								"id": uuid.v4(),
+							})
+						}
+
+					setExecutionVariablesModalOpen(false)
+					setNewVariableName("")
+					setWorkflow(workflow)
+				}} color="primary">
+						Submit	
+					</Button>
+				</DialogActions>
+				{workflowExecutions.length > 0 ? 
+					<DialogContent>
+						<Divider style={{backgroundColor: "white", marginTop: 15, marginBottom: 15,}}/>
+						<b style={{marginBottom: 10}}>Values from last 3 executions</b>
+						{workflowExecutions.slice(0,3).map((execution, index) => {
+							if (execution.execution_variables === undefined || execution.execution_variables === null || execution.execution_variables === 0) {
+								return null
+							}
+
+							const variable = execution.execution_variables.find(data => data.name === newVariableName)
+							if (variable === undefined || variable.value === undefined) {
+								return null
+							}
+
+							return (
+								<div>
+									{index+1}: {variable.value}
+								</div>
+							)
+						})}
+					</DialogContent>
+				: null
+			}
+			</FormControl>
+		</Dialog>
+		: null
 	
 	const variablesModal = variablesModalOpen ? 
 		<Dialog modal 
@@ -4808,6 +4999,7 @@ const AngularWorkflow = (props) => {
 		<div>
 			{newView}
 			{variablesModal}
+			{executionVariableModal} 
 			{conditionsModal}
 			{authenticationModal}
 		</div>

frontend/src/App.js

@@ -90,13 +90,11 @@ const App = (message, props) => {
   	})
     .then(response => response.json())
     .then(responseJson => {
-			console.log(responseJson)
       if (responseJson.success === true) {
 				setUserData(responseJson)
 				setIsLoggedIn(true)
 
 				// Updating cookie every request
-				console.log("COOKIES: ",  cookies)
 				for (var key in responseJson["cookies"]) {
 					setCookie(responseJson["cookies"][key].key, responseJson["cookies"][key].value, {path: "/"})
 				}

frontend/src/Apps.js

@@ -905,6 +905,7 @@ const Apps = (props) => {
 		</Dialog>
 	: null
 
+	const circularLoader = validation ? <CircularProgress color="primary" /> : null
 	const appsModalLoad = loadAppsModalOpen ? 
 		<Dialog modal 
 			open={loadAppsModalOpen}
@@ -998,7 +999,6 @@ const Apps = (props) => {
 		: null
 
 	const errorText = openApiError.length > 0 ? <div>Error: {openApiError}</div> : null
-	const circularLoader = validation ? <CircularProgress color="primary" /> : null
 	const modalView = openApiModal ? 
 		<Dialog modal 
 			open={openApiModal}