diff --git a/backend/go-app/walkoff.go b/backend/go-app/walkoff.go index 67d4835d..07ae2c18 100644 --- a/backend/go-app/walkoff.go +++ b/backend/go-app/walkoff.go @@ -638,10 +638,6 @@ func handleGetStreamResults(resp http.ResponseWriter, request *http.Request) { return } - //for _, action := range workflowExecution.Workflow.Actions { - // log.Printf("Name: %s, Env: %s", action.Name, action.Environment) - //} - newjson, err := json.Marshal(workflowExecution) if err != nil { resp.WriteHeader(401) @@ -3711,7 +3707,7 @@ func getWorkflowExecutions(resp http.ResponseWriter, request *http.Request) { } // Query for the specifci workflowId - q := datastore.NewQuery("workflowexecution").Filter("workflow_id =", fileId).Limit(50) + q := datastore.NewQuery("workflowexecution").Filter("workflow_id =", fileId).Order("-started_at").Limit(50) var workflowExecutions []WorkflowExecution _, err = dbclient.GetAll(ctx, q, &workflowExecutions) if err != nil { diff --git a/frontend/src/AngularWorkflow.js b/frontend/src/AngularWorkflow.js index c963707b..45b8fe7c 100644 --- a/frontend/src/AngularWorkflow.js +++ b/frontend/src/AngularWorkflow.js @@ -29,6 +29,7 @@ import Breadcrumbs from '@material-ui/core/Breadcrumbs'; import CircularProgress from '@material-ui/core/CircularProgress'; import ReactJson from 'react-json-view' +import DirectionsRunIcon from '@material-ui/icons/DirectionsRun'; import PolymerIcon from '@material-ui/icons/Polymer'; import CreateIcon from '@material-ui/icons/Create'; import PlayArrowIcon from '@material-ui/icons/PlayArrow'; @@ -155,7 +156,8 @@ const AngularWorkflow = (props) => { const [, setExecutingNodes] = React.useState([]) const [executionRunning, setExecutionRunning] = React.useState(false) - const [executionModalOpen, setExecutionModalOpen] = React.useState(true) + const [executionModalOpen, setExecutionModalOpen] = React.useState(false) + const [executionModalView, setExecutionModalView] = React.useState(0) const [executionData, setExecutionData] = React.useState({}) const [lastSaved, setLastSaved] = React.useState(true) @@ -280,8 +282,11 @@ const AngularWorkflow = (props) => { // Update on every interval? idk if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) { - console.log("Executiondata: ", responseJson) - setExecutionData(responseJson) + // 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) { + setExecutionData(responseJson) + } } if (responseJson.execution_id !== executionRequest.execution_id) { cy.elements().removeClass('success-highlight failure-highlight executing-highlight') @@ -340,7 +345,8 @@ const AngularWorkflow = (props) => { if (!visited.includes(item.action.label)) { if (executionRunning) { - alert.show("Success for "+item.action.label+" with result "+item.result) + alert.show("Success in node "+item.action.label) + //+" with result "+item.result) visited.push(item.action.label) setVisited(visited) } @@ -656,6 +662,7 @@ const AngularWorkflow = (props) => { setExecutingNodes([workflow.start]) setExecutionData({}) setExecutionModalOpen(true) + setExecutionModalView(1) start() }) .catch(error => { @@ -1457,8 +1464,20 @@ const AngularWorkflow = (props) => { } const handleVariablesHoverOut = () => { - setVariablesHoverColor(hoverOutColor) - } + setVariablesHoverColor(hoverOutColor) + } + + const paperVariableStyle = { + minHeight: "50px", + maxHeight: "50px", + minWidth: "100%", + maxWidth: "100%", + marginTop: "5px", + color: "white", + backgroundColor: surfaceColor, + cursor: "pointer", + display: "flex", + } const VariablesView = () => { const [open, setOpen] = React.useState(false); @@ -1478,19 +1497,7 @@ const AngularWorkflow = (props) => { ) - } - - const paperVariableStyle = { - minHeight: "50px", - maxHeight: "50px", - minWidth: "100%", - maxWidth: "100%", - marginTop: "5px", - color: "white", - backgroundColor: surfaceColor, - cursor: "pointer", - display: "flex", - } + } const menuClick = (event) => { setOpen(!open) @@ -4184,7 +4191,7 @@ const AngularWorkflow = (props) => { return null } - const cytoscapeViewWidths = 600 + const cytoscapeViewWidths = 650 const bottomBarStyle = { position: "fixed", right: 20, @@ -4271,8 +4278,11 @@ const AngularWorkflow = (props) => { style={{backgroundColor: inputColor, }} InputProps={{ style:{ - color: "white", height: 50, + color: "white", + marginLeft: 5, + maxWidth: "95%", + fontSize: "1em", }, }} color="secondary" @@ -4300,6 +4310,13 @@ const AngularWorkflow = (props) => { + + + ) @@ -4389,21 +4406,118 @@ const AngularWorkflow = (props) => { - const ExecutionModal = () => { - return ( - setExecutionModalOpen(false)}> -
+ const executionPaperStyle = { + minWidth: "95%", + maxWidth: "95%", + marginTop: "5px", + color: "white", + marginBottom: 10, + padding: 5, + backgroundColor: surfaceColor, + cursor: "pointer", + display: "flex", + minHeight: 40, + maxHeight: 40, + } + + const executionModal = + setExecutionModalOpen(false)} PaperProps={{style: {minWidth: 375, maxWidth: 375, backgroundColor: "#1F2023", color: "white", fontSize: 18}}}> + {executionModalView === 0 ? +
+ +

+ + All Executions +

+ + + + {workflowExecutions.length > 0 ? +
+ {workflowExecutions.map(data => { + const statusColor = data.status === "FINISHED" ? "green" : data.status === "ABORTED" ? "red" : "orange" + const timeElapsed = data.completed_at-data.started_at + const resultsLength = data.results !== undefined && data.results !== null ? data.results.length : 0 + + const timestamp = new Date(data.started_at*1000).toISOString().split('.')[0].split("T").join(" ") + + return ( + {}} onMouseOut={() => {}} onClick={() => { + setExecutionModalView(1) + setExecutionData(data) + }}> +
+
+
+ {timestamp} +
+ +
+ {resultsLength}/{data.workflow.actions.length} +
+ +
+ + + + + ) + return + })} +
+ : +
+ There are no executions yet +
+ } +
+ : +
+ +

{setExecutionModalView(0)}}> + + Other Executions +

+ +

Executing Workflow

- -

Execution Argument:

{executionText} + {executionData.execution_argument !== undefined && executionData.execution_argument.length > 0 ? +
+

Execution Argument:

{executionText} +
+ : null } {executionData.status !== undefined && executionData.status.length > 0 ?
-

Status:

{executionData.status} + Status: {executionData.status}
: null } -

Results:

- {executionData.results === undefined || executionData.results === null || executionData.results.length === 0 ? + {executionData.started_at !== undefined ? +
+ Started: {new Date(executionData.started_at*1000).toISOString()} +
+ : null + } + {executionData.execution_id !== undefined && executionData.execution_id.length > 0 ? +
+ ID: {executionData.execution_id} +
+ : null + } + +
+ Actions +
+ {executionData.status !== undefined && executionData.status !== "ABORTED" && executionData.status !== "FINISHED" ? : null} +
+
+ {executionData.results === undefined || executionData.results === null || executionData.results.length === 0 && executionData.status === "EXECUTING" ? : executionData.results.map(data => { @@ -4417,12 +4531,19 @@ const AngularWorkflow = (props) => { jsonvalid = false } + const curapp = apps.find(a => a.name === data.action.app_name && a.app_version === data.action.app_version) + const imgsize = 50 + const actionimg = curapp === null ? + null : + {data.action.app_name} + return ( -
-
- Name: {data.action.label}
- Status: {data.status}
- Result:  +
+
+ {actionimg} + {data.action.label} +
+
Status {data.status}
{jsonvalid ? { name={"Results for "+data.action.label} /> : - data.result +
+ Result  + {data.result} +
}
) }) }
+ } - ) - } const newView = isLoggedIn ?
@@ -4459,12 +4582,12 @@ const AngularWorkflow = (props) => { }} />
- + e + {executionModal} - {debugView}
:
@@ -4533,7 +4656,7 @@ const AngularWorkflow = (props) => { /> - -