Added workflow forms \o/
This commit is contained in:
frikky
@@ -0,0 +1,777 @@
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import ReactDOM from "react-dom"
|
||||
|
||||
import { useInterval } from "react-powerhooks";
|
||||
import { makeStyles } from '@material-ui/styles';
|
||||
import { useNavigate, Link, useParams } from "react-router-dom";
|
||||
import {isMobile} from "react-device-detect";
|
||||
import theme from '../theme';
|
||||
import { validateJson, GetIconInfo } from "./Workflows.jsx";
|
||||
import { green, yellow } from "./AngularWorkflow.jsx";
|
||||
|
||||
import {
|
||||
Tooltip,
|
||||
IconButton,
|
||||
CircularProgress,
|
||||
TextField,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Paper,
|
||||
Typography,
|
||||
Divider,
|
||||
} from '@material-ui/core';
|
||||
|
||||
import {
|
||||
Preview as PreviewIcon,
|
||||
ContentCopy as ContentCopyIcon,
|
||||
} from '@mui/icons-material';
|
||||
|
||||
const hrefStyle = {
|
||||
color: "white",
|
||||
textDecoration: "none"
|
||||
}
|
||||
|
||||
const bodyDivStyle = {
|
||||
margin: "auto",
|
||||
marginTop: 100,
|
||||
width: isMobile? "100%":"500px",
|
||||
position: "relative",
|
||||
}
|
||||
|
||||
const boxStyle = {
|
||||
color: "white",
|
||||
paddingLeft: "30px",
|
||||
paddingRight: "30px",
|
||||
paddingBottom: "30px",
|
||||
paddingTop: "30px",
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
marginBottom: 150,
|
||||
}
|
||||
|
||||
const RunWorkflow = (defaultprops) => {
|
||||
const { globalUrl, isLoaded, isLoggedIn, setIsLoggedIn, setCookie, register, serverside } = defaultprops;
|
||||
|
||||
let navigate = useNavigate();
|
||||
const [message, setMessage] = useState("");
|
||||
const [workflow, setWorkflow] = React.useState({});
|
||||
const [executionRequest, setExecutionRequest] = React.useState({});
|
||||
const [executionArgument, setExecutionArgument] = useState("");
|
||||
const [executionLoading, setExecutionLoading] = useState(false);
|
||||
const [executionData, setExecutionData] = React.useState({});
|
||||
const [executionRunning, setExecutionRunning] = useState(false);
|
||||
const [workflowQuestion, setWorkflowQuestion] = useState("");
|
||||
const [selectedOrganization, setSelectedOrganization] = React.useState(undefined);
|
||||
const [apps, setApps] = React.useState([]);
|
||||
const [buttonClicked, setButtonClicked] = React.useState("");
|
||||
|
||||
const params = useParams();
|
||||
var props = JSON.parse(JSON.stringify(defaultprops))
|
||||
props.match = {}
|
||||
props.match.params = params
|
||||
|
||||
|
||||
const parsedsearch = serverside === true ? "" : window.location.search
|
||||
if (serverside !== true) {
|
||||
const tmpMessage = new URLSearchParams(window.location.search).get("message")
|
||||
if (tmpMessage !== undefined && tmpMessage !== null && message !== tmpMessage) {
|
||||
setMessage(tmpMessage)
|
||||
}
|
||||
}
|
||||
|
||||
// Used to swap from login to register. True = login, false = register
|
||||
|
||||
// Error messages etc
|
||||
const [executionInfo, setExecutionInfo] = useState("");
|
||||
|
||||
const handleValidateForm = (executionArgument) => {
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
const getApps = () => {
|
||||
fetch(globalUrl + "/api/v1/apps", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for apps :O!");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
setApps(responseJson)
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("App error: ", error);
|
||||
})
|
||||
}
|
||||
|
||||
const ShowExecutionResults = (props) => {
|
||||
const { executionData } = props;
|
||||
|
||||
if (executionData === undefined || executionData === null || executionData === {}) {
|
||||
return null
|
||||
}
|
||||
|
||||
const executionMargin = 20
|
||||
const defaultReturn =
|
||||
<div style={{marginTop: executionMargin, }}>
|
||||
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
|
||||
No results yet
|
||||
</Typography>
|
||||
</div>
|
||||
|
||||
if (executionData.results === undefined || executionData.results === null) {
|
||||
return defaultReturn
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{marginTop: executionMargin, }}>
|
||||
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
|
||||
Results
|
||||
</Typography>
|
||||
|
||||
{executionData.results.map((data, index) => {
|
||||
if (executionData.results.length !== 1 && (data.status === "SKIPPED")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// FIXME: The latter replace doens't really work if ' is used in a string
|
||||
var showResult = data.result.trim();
|
||||
const validate = validateJson(showResult);
|
||||
|
||||
const curapp = apps.find((a) => a.name === data.action.app_name && a.app_version === data.action.app_version);
|
||||
const imgsize = 50;
|
||||
const statusColor = data.status === "FINISHED" || data.status === "SUCCESS" ? green : data.status === "ABORTED" || data.status === "FAILURE" ? "red" : yellow;
|
||||
|
||||
var imgSrc = curapp === undefined ? "" : curapp.large_image;
|
||||
if (
|
||||
imgSrc.length === 0 &&
|
||||
workflow.actions !== undefined &&
|
||||
workflow.actions !== null
|
||||
) {
|
||||
// Look for the node in the workflow
|
||||
const action = workflow.actions.find(
|
||||
(action) => action.id === data.action.id
|
||||
);
|
||||
if (action !== undefined && action !== null) {
|
||||
imgSrc = action.large_image;
|
||||
}
|
||||
}
|
||||
|
||||
var actionimg =
|
||||
curapp === null ? null : (
|
||||
<img
|
||||
alt={data.action.app_name}
|
||||
src={imgSrc}
|
||||
style={{
|
||||
marginRight: 20,
|
||||
width: imgsize,
|
||||
height: imgsize,
|
||||
border: `2px solid ${statusColor}`,
|
||||
borderRadius:
|
||||
executionData.start === data.action.id ? 25 : 5,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
if (data.action.app_name === "shuffle-subflow") {
|
||||
//const parsedImage = triggers[2].large_image;
|
||||
//actionimg = (
|
||||
// <img
|
||||
// alt={"Shuffle Subflow"}
|
||||
// src={parsedImage}
|
||||
// style={{
|
||||
// marginRight: 20,
|
||||
// width: imgsize,
|
||||
// height: imgsize,
|
||||
// border: `2px solid ${statusColor}`,
|
||||
// borderRadius:
|
||||
// executionData.start === data.action.id ? 25 : 5,
|
||||
// }}
|
||||
// />
|
||||
//);
|
||||
} else if (data.action.app_name === "User Input") {
|
||||
//actionimg = (
|
||||
// <img
|
||||
// alt={"Shuffle Subflow"}
|
||||
// src={triggers[3].large_image}
|
||||
// style={{
|
||||
// marginRight: 20,
|
||||
// width: imgsize,
|
||||
// height: imgsize,
|
||||
// border: `2px solid ${statusColor}`,
|
||||
// borderRadius:
|
||||
// executionData.start === data.action.id ? 25 : 5,
|
||||
// }}
|
||||
// />
|
||||
//);
|
||||
}
|
||||
|
||||
if (validate.valid && typeof validate.result === "string") {
|
||||
validate.result = JSON.parse(validate.result);
|
||||
}
|
||||
|
||||
if (validate.valid && typeof validate.result === "object") {
|
||||
if (
|
||||
validate.result.result !== undefined &&
|
||||
validate.result.result !== null
|
||||
) {
|
||||
try {
|
||||
validate.result.result = JSON.parse(validate.result.result);
|
||||
} catch (e) {
|
||||
//console.log("ERROR PARSING: ", e)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var similarActionsView = null
|
||||
if (data.similar_actions !== undefined && data.similar_actions !== null) {
|
||||
var minimumMatch = 85
|
||||
var matching_executions = []
|
||||
if (data.similar_actions !== undefined && data.similar_actions !== null) {
|
||||
for (let [k,kval] in Object.entries(data.similar_actions)){
|
||||
if (data.similar_actions.hasOwnProperty(k)) {
|
||||
if (data.similar_actions[k].similarity > minimumMatch) {
|
||||
matching_executions.push(data.similar_actions[k].execution_id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (matching_executions.length !== 0) {
|
||||
var parsed_url = matching_executions.join(",")
|
||||
|
||||
similarActionsView =
|
||||
<Tooltip
|
||||
color="primary"
|
||||
title="See executions with similar results (not identical)"
|
||||
placement="top"
|
||||
style={{ zIndex: 50000, marginLeft: 50, }}
|
||||
>
|
||||
<IconButton
|
||||
style={{
|
||||
marginTop: "auto",
|
||||
marginBottom: "auto",
|
||||
height: 30,
|
||||
paddingLeft: 0,
|
||||
width: 30,
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate(`?execution_highlight=${parsed_url}`)
|
||||
}}
|
||||
>
|
||||
<PreviewIcon style={{ color: "rgba(255,255,255,0.5)" }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
marginBottom: 20,
|
||||
border:
|
||||
data.action.sub_action === true
|
||||
? "1px solid rgba(255,255,255,0.3)"
|
||||
: "1px solid rgba(255,255,255, 0.3)",
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
padding: "15px 10px 10px 10px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
onMouseOver={() => {
|
||||
}}
|
||||
onMouseOut={() => {
|
||||
}}
|
||||
>
|
||||
<div style={{ marginBottom: 5, display: "flex" }}>
|
||||
<Typography variant="body1">
|
||||
<b>Status </b>
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary" style={{ marginRight: 15, }}>
|
||||
{data.status}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const onSubmit = (execution_id, authorization, answer) => {
|
||||
stop()
|
||||
setMessage("")
|
||||
setExecutionLoading(true)
|
||||
setExecutionData({})
|
||||
setExecutionInfo("")
|
||||
|
||||
var data = {
|
||||
"execution_argument": executionArgument
|
||||
}
|
||||
|
||||
var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`
|
||||
var fetchBody = {
|
||||
mode: 'cors',
|
||||
credentials: 'include',
|
||||
crossDomain: true,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
},
|
||||
}
|
||||
|
||||
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
||||
url += `?reference_execution=${execution_id}&authorization=${authorization}&answer=${answer}`
|
||||
data = {}
|
||||
fetchBody.method = "GET"
|
||||
} else {
|
||||
fetchBody.method = "POST"
|
||||
fetchBody.body = JSON.stringify(data)
|
||||
}
|
||||
|
||||
fetch(url, fetchBody)
|
||||
.then((response) => {
|
||||
if (response.status !== 200 && response.status !== 201) {
|
||||
|
||||
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
||||
setExecutionLoading(false)
|
||||
setExecutionRunning(true);
|
||||
setExecutionRequest({
|
||||
"execution_id": execution_id,
|
||||
"authorization": authorization,
|
||||
})
|
||||
|
||||
start();
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then(responseJson => {
|
||||
setExecutionLoading(false)
|
||||
if (responseJson["success"] === false) {
|
||||
console.log("Failed sending execution request")
|
||||
} else {
|
||||
console.log("Started execution")
|
||||
|
||||
if (answer !== undefined && answer !== null) {
|
||||
console.log("Skipping start")
|
||||
} else {
|
||||
setExecutionRunning(true);
|
||||
setExecutionRequest(responseJson)
|
||||
start();
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
//setExecutionInfo("Error in workflow startup: " + error)
|
||||
setExecutionLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
const getWorkflow = (workflow_id) => {
|
||||
fetch(globalUrl + "/api/v1/workflows/" + workflow_id, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for workflows :O!");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
// Not sure why this is necessary.
|
||||
if (responseJson.isValid === undefined) {
|
||||
responseJson.isValid = true;
|
||||
}
|
||||
|
||||
if (responseJson.errors === undefined) {
|
||||
responseJson.errors = [];
|
||||
}
|
||||
|
||||
if (responseJson.actions === undefined || responseJson.actions === null) {
|
||||
responseJson.actions = [];
|
||||
}
|
||||
|
||||
if (responseJson.triggers === undefined || responseJson.triggers === null) {
|
||||
responseJson.triggers = [];
|
||||
}
|
||||
|
||||
handleGetOrg(responseJson.org_id)
|
||||
setWorkflow(responseJson);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Get workflow error: ", error.toString());
|
||||
});
|
||||
};
|
||||
|
||||
const { start, stop } = useInterval({
|
||||
duration: 3000,
|
||||
startImmediate: true,
|
||||
callback: () => {
|
||||
fetchUpdates(executionRequest.execution_id, executionRequest.authorization)
|
||||
},
|
||||
});
|
||||
|
||||
const handleUpdateResults = (responseJson, executionRequest) => {
|
||||
if (responseJson === undefined || responseJson === null || responseJson.success === false) {
|
||||
return
|
||||
}
|
||||
|
||||
console.log("Got response: ", responseJson)
|
||||
|
||||
ReactDOM.unstable_batchedUpdates(() => {
|
||||
if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
|
||||
// FIXME: If another is selected, don't edit..
|
||||
// Doesn't work because this is some async garbage
|
||||
if (executionData.execution_id === undefined || (responseJson.execution_id === executionData.execution_id && responseJson.results !== undefined && responseJson.results !== null)) {
|
||||
if (executionData.status !== responseJson.status || executionData.result !== responseJson.result || (executionData.results !== undefined && responseJson.results !== null && executionData.results.length !== responseJson.results.length)) {
|
||||
console.log("Updating data!")
|
||||
setExecutionData(responseJson)
|
||||
|
||||
for (var key in responseJson.results) {
|
||||
if (responseJson.results[key].status === "WAITING") {
|
||||
console.log("Found: ", responseJson.results[key])
|
||||
|
||||
const validate = validateJson(responseJson.results[key].result)
|
||||
console.log("Validate: ", validate)
|
||||
if (validate.valid && typeof validate.result === "string") {
|
||||
validate.result = JSON.parse(validate.result)
|
||||
}
|
||||
|
||||
console.log("Newresult: ", validate.result)
|
||||
if (validate.result["information"] !== undefined && validate.result["information"] !== null) {
|
||||
setWorkflowQuestion(validate.result["information"])
|
||||
}
|
||||
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log("NOT updating executiondata state.");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (responseJson.status === "ABORTED" || responseJson.status === "STOPPED" || responseJson.status === "FAILURE" || responseJson.status === "WAITING") {
|
||||
stop();
|
||||
|
||||
if (executionRunning) {
|
||||
setExecutionRunning(false);
|
||||
}
|
||||
|
||||
//getWorkflowExecution(props.match.params.key, "");
|
||||
} else if (responseJson.status === "FINISHED") {
|
||||
setExecutionRunning(false)
|
||||
stop();
|
||||
//getWorkflowExecution(props.match.params.key, "");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleGetOrg = (orgId, execution_id, authorization) => {
|
||||
if (orgId.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Just use this one?
|
||||
var url = execution_id !== undefined && authorization !== undefined ? `${globalUrl}/api/v1/orgs/${orgId}?reference_execution=${execution_id}&authorization=${authorization}` : `${globalUrl}/api/v1/orgs/${orgId}`;
|
||||
fetch(url, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status === 401) {
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (responseJson["success"] === false) {
|
||||
} else {
|
||||
if (responseJson.sync_features === undefined || responseJson.sync_features === null) {
|
||||
}
|
||||
|
||||
setSelectedOrganization(responseJson)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error getting org: ", error);
|
||||
});
|
||||
};
|
||||
|
||||
const fetchUpdates = (execution_id, authorization, getorg) => {
|
||||
const innerRequest = {
|
||||
"execution_id": execution_id,
|
||||
"authorization": authorization
|
||||
}
|
||||
|
||||
if (executionRequest.execution_id !== innerRequest.execution_id) {
|
||||
setExecutionRequest(innerRequest)
|
||||
}
|
||||
|
||||
if (execution_id === "" || authorization === "") {
|
||||
setExecutionLoading(false)
|
||||
setExecutionRunning(false)
|
||||
stop()
|
||||
return
|
||||
}
|
||||
|
||||
fetch(globalUrl + "/api/v1/streams/results", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify(innerRequest),
|
||||
credentials: "include",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.status !== 200) {
|
||||
console.log("Status not 200 for stream results :O!");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then((responseJson) => {
|
||||
if (getorg === true) {
|
||||
handleGetOrg(responseJson.org_id, execution_id, authorization)
|
||||
}
|
||||
|
||||
handleUpdateResults(responseJson, executionRequest);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Execution result Error: ", error);
|
||||
});
|
||||
};
|
||||
|
||||
const answer = new URLSearchParams(window.location.search).get("answer")
|
||||
const execution_id = new URLSearchParams(window.location.search).get("reference_execution")
|
||||
const authorization = new URLSearchParams(window.location.search).get("authorization")
|
||||
useEffect(() => {
|
||||
getWorkflow(props.match.params.key)
|
||||
if (execution_id !== undefined && execution_id !== null && authorization !== undefined && authorization !== null) {
|
||||
console.log("Get execution: ", execution_id)
|
||||
fetchUpdates(execution_id, authorization, true)
|
||||
}
|
||||
|
||||
if (answer !== undefined && answer !== null) {
|
||||
console.log("Got answer: ", answer)
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
|
||||
const buttonStyle = {borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(executionArgument) || executionLoading ? buttonBackground : "grey", color: "white"}
|
||||
|
||||
const disabledButtons = message.length > 0 || executionData.status === "FINISHED" || executionData.status === "ABORTED"
|
||||
|
||||
const organization = selectedOrganization !== undefined && selectedOrganization !== null ? selectedOrganization.name : "Unknown"
|
||||
const contact = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.org !== undefined && selectedOrganization.org !== null? selectedOrganization.org : "support@shuffler.io"
|
||||
//const contact = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.contact !== undefined && selectedOrganization.contact !== null? selectedOrganization.contact : "support@shuffler.io"
|
||||
const image = selectedOrganization !== undefined && selectedOrganization !== null ? selectedOrganization.image : theme.palette.defaultImage
|
||||
|
||||
//<Button fullWidth id="continue_execution" variant="contained" disabled={disabledButtons} color="primary" style={{border: answer === "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1,}} onClick={() => {
|
||||
if (!disabledButtons && answer !== undefined && answer !== null && organization !== "Unknown" && buttonClicked.length === 0) {
|
||||
console.log("Finding button!")
|
||||
// Find the button
|
||||
var buttonid = ""
|
||||
if (answer === "false") {
|
||||
buttonid = "abort_execution"
|
||||
} else if (answer === "true") {
|
||||
buttonid = "continue_execution"
|
||||
}
|
||||
|
||||
if (buttonid !== "") {
|
||||
const foundButton = document.getElementById(buttonid)
|
||||
console.log("Button: ", foundButton)
|
||||
if (foundButton !== undefined && foundButton !== null) {
|
||||
foundButton.click()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const basedata =
|
||||
<div style={bodyDivStyle}>
|
||||
<Paper style={boxStyle}>
|
||||
<form onSubmit={() => {onSubmit()}} style={{margin: "15px 15px 15px 15px"}}>
|
||||
|
||||
<img
|
||||
alt={workflow.name}
|
||||
src={image}
|
||||
style={{
|
||||
marginRight: 20,
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: `2px solid ${green}`,
|
||||
borderRadius: 50,
|
||||
position: "absolute",
|
||||
top: -50,
|
||||
left: 200,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography variant="h6" style={{marginBottom: 10, marginTop: 50, textAlign: "center", }}>
|
||||
{organization}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary" style={{marginBottom: 15, marginTop: 0, textAlign: "center",}}>
|
||||
{contact}
|
||||
</Typography>
|
||||
<Divider style={{marginTop: 20, marginBottom: 20, }}/>
|
||||
<Typography color="textSecondary">{message}</Typography>
|
||||
|
||||
{answer !== undefined && answer !== null ? null :
|
||||
<Typography variant="h6" style={{marginBottom: 15, }}><b>Workflow: </b>{workflow.name}</Typography>
|
||||
}
|
||||
|
||||
{executionData !== undefined && executionData !== null && executionData !== {} && executionData.status !== undefined && (answer === undefined || answer === null) ?
|
||||
<div style={{ marginBottom: 5, display: "flex" }}>
|
||||
<Typography variant="body1">
|
||||
<b>Status </b>
|
||||
</Typography>
|
||||
<Typography variant="body1" color="textSecondary" style={{ marginRight: 15, }}>
|
||||
{executionData.status}
|
||||
</Typography>
|
||||
</div>
|
||||
: null}
|
||||
|
||||
{workflowQuestion.length > 0 ?
|
||||
<Typography variant="body1" style={{ marginBottom: 35, marginTop: 30, marginRight: 15, textAlign: "center", whiteSpace: "pre-line", }}>
|
||||
{workflowQuestion}
|
||||
</Typography>
|
||||
: null}
|
||||
|
||||
{answer !== undefined && answer !== null ? null :
|
||||
<span>
|
||||
Execution Argument
|
||||
<div style={{marginBottom: 5}}>
|
||||
<TextField
|
||||
color="primary"
|
||||
style={{backgroundColor: theme.palette.inputColor, marginTop: 5, }}
|
||||
multiLine
|
||||
maxRows={2}
|
||||
InputProps={{
|
||||
style:{
|
||||
height: "50px",
|
||||
color: "white",
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
fullWidth={true}
|
||||
placeholder=""
|
||||
id="emailfield"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={(e) => {
|
||||
setExecutionArgument(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
}
|
||||
{executionRunning ?
|
||||
<CircularProgress style={{marginTop: 20, marginBottom: 20, textAlign: "center", }}/>
|
||||
:
|
||||
answer !== undefined && answer !== null ?
|
||||
<span style={{marginTop: 20, }}>
|
||||
<Typography variant="body1" style={{textAlign: "center", marginTop: 30, marginBottom: 20, }}>
|
||||
{disabledButtons ? "Already answered. Nothing to do." : ""}
|
||||
</Typography>
|
||||
{disabledButtons ? null :
|
||||
<Typography variant="body2" color="textSecondary" style={{textAlign: "center", marginTop: 10, }}>
|
||||
What do you want to do?
|
||||
</Typography>
|
||||
}
|
||||
<div fullWidth style={{width: "100%", marginTop: 10, marginBottom: 10, display: "flex", }}>
|
||||
<Button fullWidth id="continue_execution" variant="contained" disabled={disabledButtons} color="primary" style={{border: answer === "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1,}} onClick={() => {
|
||||
onSubmit(execution_id, authorization, true)
|
||||
|
||||
setButtonClicked("FINISHED")
|
||||
setExecutionData({
|
||||
status: "FINISHED",
|
||||
})
|
||||
}}>Continue</Button>
|
||||
<Typography variant="body1" style={{marginLeft: 3, marginRight: 3, marginTop: 3, }}>
|
||||
or
|
||||
</Typography>
|
||||
<Button fullWidth id="abort_execution" variant="contained" color="primary" disabled={disabledButtons} style={{border: answer !== "true" ? "2px solid rgba(255,255,255,0.6)" : null, flex: 1, }} onClick={() => {
|
||||
onSubmit(execution_id, authorization, false)
|
||||
|
||||
setButtonClicked("ABORTED")
|
||||
setExecutionData({
|
||||
status: "ABORTED",
|
||||
})
|
||||
}}>Stop</Button>
|
||||
</div>
|
||||
</span>
|
||||
:
|
||||
<div style={{display: "flex", marginTop: "15px"}}>
|
||||
<Button variant="contained" type="submit" color="primary" fullWidth disabled={!handleValidateForm(executionArgument) || executionLoading}>
|
||||
{executionLoading ? <CircularProgress color="secondary" style={{color: "white",}} /> : "Run Workflow"}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
|
||||
{buttonClicked !== undefined && buttonClicked !== null && buttonClicked !== "finished" && buttonClicked.length > 0 ?
|
||||
<img id="finalize_gif" src="/images/finalize.gif" alt="finalize workflow animation" style={{width: 150, marginLeft: 125, borderRadius: theme.palette.borderRadius, }}
|
||||
onLoad={() => {
|
||||
console.log("Img loaded.")
|
||||
setTimeout(() => {
|
||||
console.log("Img closing.")
|
||||
setButtonClicked("finished")
|
||||
|
||||
}, 1250)
|
||||
|
||||
}}
|
||||
/>
|
||||
: null}
|
||||
|
||||
<div style={{marginTop: "10px"}}>
|
||||
{executionInfo}
|
||||
</div>
|
||||
|
||||
{answer !== undefined && answer !== null ? null :
|
||||
<ShowExecutionResults executionData={executionData} />
|
||||
}
|
||||
</form>
|
||||
</Paper>
|
||||
</div>
|
||||
|
||||
const loadedCheck = isLoaded ?
|
||||
<div>
|
||||
{basedata}
|
||||
</div>
|
||||
:
|
||||
<div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<div>
|
||||
{loadedCheck}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RunWorkflow;
|
||||
Reference in New Issue
Block a user