Fixed OpenAPI issue by @owentl

frontend/src/views/AngularWorkflow.jsx

@@ -639,7 +639,7 @@ const AngularWorkflow = (props) => {
 		}
 
 		if (executionText.length > 0) { 
-			alert.success("Starting execution with argument "+executionText)
+			alert.success("Starting execution with an execution argument")
 		} else {
 			alert.success("Starting execution")
 		}
@@ -5037,6 +5037,7 @@ const AngularWorkflow = (props) => {
 					<Tooltip color="secondary" title="Show executions" placement="top-start">
 						<Button color="primary" style={{height: 50, marginLeft: 10, }} variant="outlined" onClick={() => {
 							setExecutionModalOpen(true)
+							getWorkflowExecution(props.match.params.key)
 						}}>
 							<DirectionsRunIcon />
 						</Button>
@@ -5167,8 +5168,10 @@ const AngularWorkflow = (props) => {
 
 		return (
 			<div>
-				<h3>Execution Argument: </h3>
+				<h3>Execution Argument</h3>
-				{executionData.execution_argument}
+				<div style={{maxHeight: 200, overflowY: "scroll",}}>
+					{executionData.execution_argument}
+				</div>
 			</div>
 		)
 	}
@@ -5272,14 +5275,7 @@ const AngularWorkflow = (props) => {
 					</h2>
 				</Breadcrumbs>
 				<Divider style={{backgroundColor: "white", marginTop: 10, marginBottom: 10,}}/>
-					<h2>Executing Workflow</h2>	
+					<h2>Executing Workflow</h2>		
-					<FormControlLabel
-						style={{color: "white", marginBottom: "0px", marginTop: "10px"}}
-						label={<div style={{color: "white"}}>Show failed / skipped actions</div>}
-						control={
-							<Switch checked={showSkippedActions} onChange={() => {setShowSkippedActions(!showSkippedActions)}} />
-						}
-					/>
 					{executionData.status !== undefined && executionData.status.length > 0 ?
 						<div>
 							<b>Status: </b>{executionData.status} 
@@ -5292,7 +5288,7 @@ const AngularWorkflow = (props) => {
 						</div>
 						: null
 					}
-					{executionData.completed_at !== undefined ?
+					{executionData.completed_at !== undefined && executionData.completed_at !== null && executionData.completed_at > 0 ?
 						<div>
 							<b>Finished: </b>{new Date(executionData.completed_at*1000).toISOString()} 
 						</div>
@@ -5308,7 +5304,19 @@ const AngularWorkflow = (props) => {
 						parsedExecutionArgument()
 					: null }
 					<Divider style={{backgroundColor: "white", marginTop: 30, marginBottom: 30,}}/>
+					{executionData.results !== undefined && executionData.results !== null && executionData.results.length > 1 && executionData.results.find(result => result.status === "SKIPPED" || result.status === "FAILURE") ?
+						<FormControlLabel
+							style={{color: "white", marginBottom: 10, }}
+							label={<div style={{color: "white"}}>Show failed / skipped actions</div>}
+							control={
+								<Switch checked={showSkippedActions} onChange={() => {setShowSkippedActions(!showSkippedActions)}} />
+							}
+						/>
+						: 
+						null
+					}
 					<div style={{display: "flex", marginTop: 10, marginBottom: 30,}}>
+
 						<b>Actions</b>
 						<div>
 							{executionData.status !== undefined && executionData.status !== "ABORTED" && executionData.status !== "FINISHED" && executionData.status !== "FAILURE" ? <CircularProgress style={{marginLeft: 20}}/> : null}

frontend/src/views/AppCreator.jsx

@@ -334,6 +334,7 @@ const AppCreator = (props) => {
 			}
 		})
 		.catch(error => {
+			console.log("Error: ", error.toString())
 			alert.error(error.toString())
 		});
 	}
@@ -405,11 +406,33 @@ const AppCreator = (props) => {
 			securitySchemes = data.components.securitySchemes
 		} 
 
+		const allowedfunctions = [
+			"GET",
+			"CONNECT",
+			"HEAD",
+			"DELETE",
+			"POST",
+			"PATCH",
+			"PUT",
+		]
+
 		// FIXME - headers?
 		var newActions = []
 		var wordlist = {}
 		for (let [path, pathvalue] of Object.entries(data.paths)) {
 			for (let [method, methodvalue] of Object.entries(pathvalue)) {
+				if (methodvalue === null) {
+					alert.info("Skipped method "+method)
+					continue
+				}
+
+				if (!allowedfunctions.includes(method.toUpperCase())) {
+					console.log(method, path)
+					continue
+				}
+
+				console.log("Method: ", method)
+				console.log("Methodval: ", methodvalue)
 				var newaction = {
 					"name": methodvalue.summary,
 					"description": methodvalue.description,
@@ -446,8 +469,11 @@ const AppCreator = (props) => {
 					// https://swagger.io/docs/specification/describing-parameters/
 					// Need to split the data.
 					} else if (parameter.in === "body") {
-						console.log("BODY: ", parameter)
+						// FIXME: Add tracking for components
-						newaction.body = parameter.example
+						// E.G: https://raw.githubusercontent.com/owentl/Shuffle/master/gosecure.yaml
+						if (parameter.example !== undefined) {
+							newaction.body = parameter.example
+						}
 					} else if (parameter.in === "header") {
 						newaction.headers += `${parameter.name}=${parameter.example}\n`	
 					}
@@ -1732,7 +1758,7 @@ const AppCreator = (props) => {
 						margin="normal"
 						variant="outlined"
 						value={baseUrl}
-						helperText={<div style={{color:"white", marginBottom: "2px",}}>Must start with http(s):// and CANT end with /. </div>}
+						helperText={<span style={{color:"white", marginBottom: "2px",}}>Must start with http(s):// and CANT end with /. </span>}
 						placeholder="https://api.example.com"
 						onChange={e => setBaseUrl(e.target.value)}
 						onBlur={(event) => {

frontend/src/views/Apps.jsx

@@ -669,8 +669,9 @@ const Apps = (props) => {
 						<a href="https://shuffler.io/docs/apps" style={{textDecoration: "none", color: "#f85a3e"}} target="_blank">How it works</a>
 						&nbsp;- <a href="https://github.com/frikky/security-openapis" style={{textDecoration: "none", color: "#f85a3e"}} target="_blank">Security API's</a>
 						&nbsp;- <a href="https://apis.guru/browse-apis/" style={{textDecoration: "none", color: "#f85a3e"}} target="_blank">OpenAPI directory</a>
+						&nbsp;- <a href="https://editor.swagger.io/" style={{textDecoration: "none", color: "#f85a3e"}} target="_blank">OpenAPI Validator</a>
 						<div/>
-						Apps interact with eachother in workflows. They are created with the app creator, using OpenAPI specification or manually in python. Use the links above to find potential apps you're looking for using OpenAPI or make one from scratch. There's 1000+ available.
+						Apps interact with eachother in workflows. They are created with the app creator, using OpenAPI specification or manually in python. The links above are references to OpenAPI tools and other app repositories. There's ten thousands of them.
 						<div/>
 						<Divider style={{height: 1, backgroundColor: dividerColor, marginTop: 20, marginBottom: 20}} />
 						<div style={{}}>