{new Date(data.started_at*1000).toISOString()}
, {data.status}
{data.result.length > 0 ? ", "+data.result : ", "}
@@ -326,6 +366,7 @@ const AngularWorkflow = (props) => {
currentnode.removeClass('not-executing-highlight')
currentnode.removeClass('success-highlight')
currentnode.removeClass('failure-highlight')
+ currentnode.removeClass('shuffle-hover-highlight')
currentnode.removeClass('awaiting-data-highlight')
incomingEdges.addClass('success-highlight')
currentnode.addClass('executing-highlight')
@@ -334,6 +375,7 @@ const AngularWorkflow = (props) => {
currentnode.removeClass('not-executing-highlight')
currentnode.removeClass('success-highlight')
currentnode.removeClass('failure-highlight')
+ currentnode.removeClass('shuffle-hover-highlight')
currentnode.removeClass('awaiting-data-highlight')
currentnode.removeClass('executing-highlight')
currentnode.addClass('skipped-highlight')
@@ -342,6 +384,7 @@ const AngularWorkflow = (props) => {
currentnode.removeClass('not-executing-highlight')
currentnode.removeClass('success-highlight')
currentnode.removeClass('failure-highlight')
+ currentnode.removeClass('shuffle-hover-highlight')
currentnode.removeClass('awaiting-data-highlight')
currentnode.addClass('executing-highlight')
@@ -363,6 +406,7 @@ const AngularWorkflow = (props) => {
currentnode.removeClass('not-executing-highlight')
currentnode.removeClass('executing-highlight')
currentnode.removeClass('failure-highlight')
+ currentnode.removeClass('shuffle-hover-highlight')
currentnode.removeClass('awaiting-data-highlight')
currentnode.addClass('success-highlight')
@@ -384,6 +428,7 @@ const AngularWorkflow = (props) => {
if (targetnode !== undefined && !targetnode.classes().includes("success-highlight") && !targetnode.classes().includes("failure-highlight")) {
targetnode.removeClass('not-executing-highlight')
targetnode.removeClass('success-highlight')
+ targetnode.removeClass('shuffle-hover-highlight')
targetnode.removeClass('failure-highlight')
targetnode.removeClass('awaiting-data-highlight')
targetnode.addClass('executing-highlight')
@@ -398,6 +443,7 @@ const AngularWorkflow = (props) => {
currentnode.removeClass('executing-highlight')
currentnode.removeClass('success-highlight')
currentnode.removeClass('awaiting-data-highlight')
+ currentnode.removeClass('shuffle-hover-highlight')
currentnode.addClass('failure-highlight')
if (!visited.includes(item.action.label)) {
@@ -411,6 +457,7 @@ const AngularWorkflow = (props) => {
currentnode.removeClass('executing-highlight')
currentnode.removeClass('success-highlight')
currentnode.removeClass('failure-highlight')
+ currentnode.removeClass('shuffle-hover-highlight')
currentnode.addClass('awaiting-data-highlight')
break
default:
@@ -496,6 +543,12 @@ const AngularWorkflow = (props) => {
curworkflowAction.parameters = []
}
+ if (curworkflowAction.example === undefined || curworkflowAction.example === "" || curworkflowAction.example === null) {
+ if (cyelements[key].data().example !== undefined) {
+ curworkflowAction.example = cyelements[key].data().example
+ }
+ }
+
newActions.push(curworkflowAction)
} else if (type === "TRIGGER") {
//console.log("TRIGGER")
@@ -708,6 +761,35 @@ const AngularWorkflow = (props) => {
return data
}
+ const getAppAuthentication = () => {
+ fetch(globalUrl+"/api/v1/apps/authentication", {
+ 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
+ }
+
+ return response.json()
+ })
+ .then((responseJson) => {
+ if (responseJson.success) {
+ setAppAuthentication(responseJson.data)
+ } else {
+ alert.error("Failed getting authentications")
+ }
+ })
+ .catch(error => {
+ alert.error(error.toString())
+ });
+ }
+
const getApps = () => {
fetch(globalUrl+"/api/v1/workflows/apps", {
method: 'GET',
@@ -732,6 +814,7 @@ const AngularWorkflow = (props) => {
//tmpapps = tmpapps.concat(responseJson)
setApps(responseJson)
setFilteredApps(responseJson)
+ getAppAuthentication()
})
.catch(error => {
alert.error(error.toString())
@@ -816,9 +899,9 @@ const AngularWorkflow = (props) => {
// FIXME - unselect
//console.log(cy.elements('[_id!="${data._id}"]`))
// Does it choose the wrong action?
- const curaction = workflow.actions.find(a => a.id === data.id)
+ var curaction = workflow.actions.find(a => a.id === data.id)
if (!curaction || curaction === undefined) {
- //console.log("Action not found error")
+ //alert.error("Action not found. Please remake it.")
return
}
@@ -833,11 +916,44 @@ const AngularWorkflow = (props) => {
env = environments[0]
}
- setSelectedApp(curapp)
- setSelectedAction(curaction)
setSelectedActionEnvironment(env)
setSelectedActionName(curaction.name)
setRequiresAuthentication(curapp.authentication.required)
+
+ if (curapp.authentication.required) {
+ // Setup auth here :)
+ const authenticationOptions = []
+ var findAuthId = ""
+ if (curaction.authentication_id !== null && curaction.authentication_id !== undefined && curaction.authentication_id.length > 0) {
+ findAuthId = curaction.authentication_id
+ }
+
+ var tmpAuth = JSON.parse(JSON.stringify(appAuthentication))
+ for (var key in tmpAuth) {
+ var item = tmpAuth[key]
+
+ const newfields = {}
+ for (var filterkey in item.fields) {
+ newfields[item.fields[filterkey].key] = item.fields[filterkey].value
+ }
+
+ item.fields = newfields
+ if (item.app.name === curapp.name) {
+ authenticationOptions.push(item)
+ if (item.id === findAuthId) {
+ curaction.selectedAuthentication = item
+ }
+ }
+ }
+
+ curaction.authentication = authenticationOptions
+ if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "") {
+ curaction.selectedAuthentication = {}
+ }
+ }
+
+ setSelectedApp(curapp)
+ setSelectedAction(curaction)
} else if (data.type === "TRIGGER") {
//console.log("Should handle trigger "+data.triggertype)
//console.log(data)
@@ -1115,6 +1231,7 @@ const AngularWorkflow = (props) => {
setFirstrequest(false)
getWorkflow()
getApps()
+ getAppAuthentication()
getEnvironments()
getWorkflowExecution(props.match.params.key)
return
@@ -1225,6 +1342,14 @@ const AngularWorkflow = (props) => {
node.data.type = "ACTION"
node.isStartNode = action["id"] === workflow.start
+ var example = ""
+ if (action.example !== undefined && action.example !== null && action.example.length > 0) {
+ example = action.example
+ }
+
+ console.log("EXAMPLE: ", example)
+ node.data.example = example
+
return node;
})
@@ -1486,7 +1611,7 @@ const AngularWorkflow = (props) => {
{workflow.workflow_variables === null ?
null : workflow.workflow_variables.map(variable=> {
return (
-
+
{
}}>
@@ -1932,16 +2057,16 @@ const AngularWorkflow = (props) => {
const actionType = "ACTION"
const actionLabel = getNextActionName(app.name)
var parameters = null
+ var example = ""
if (app.actions[0].parameters !== null && app.actions[0].parameters.length > 0) {
parameters = app.actions[0].parameters
}
+ if (app.actions[0].returns.example !== undefined && app.actions[0].returns.example !== null && app.actions[0].returns.example.length > 0) {
+ example = app.actions[0].returns.example
+ }
var newAppPopup = false
- if (app.authentication !== undefined && app.authentication !== null && app.authentication.required === true) {
- console.log("Should make modal popup for new app")
- newAppPopup = true
- }
const newAppData = {
app_name: app.name,
@@ -1963,6 +2088,7 @@ const AngularWorkflow = (props) => {
large_image: app.large_image,
authentication: [],
execution_variable: undefined,
+ example: example,
}
// const image = "url("+app.large_image+")"
@@ -2161,6 +2287,10 @@ const AngularWorkflow = (props) => {
selectedAction.name = newaction.name
selectedAction.parameters = JSON.parse(JSON.stringify(newaction.parameters))
+ if (newaction.returns.example !== undefined && newaction.returns.example !== null && newaction.returns.example.length > 0) {
+ selectedAction.example = newaction.returns.example
+ }
+
// FIXME - this is broken sometimes lol
//var env = environments.find(a => a.name === newaction.environment)
//if ((!env || env === undefined) && selectedAction.environment === undefined ) {
@@ -2197,7 +2327,6 @@ const AngularWorkflow = (props) => {
var allkeys = [action.id]
var handled = []
var results = []
- console.log("BEFORE PARENTS!")
while(true) {
for (var key in allkeys) {
@@ -2247,14 +2376,13 @@ const AngularWorkflow = (props) => {
const [selectedActionParameters, setSelectedActionParameters] = React.useState([])
const [selectedVariableParameter, setSelectedVariableParameter] = React.useState()
const [showDropdown, setShowDropdown] = React.useState(false)
+ const [showDropdownNumber, setShowDropdownNumber] = React.useState(0)
const [actionlist, setActionlist] = React.useState([])
+ const [jsonList, setJsonList] = React.useState([])
+ const [showAutocomplete, setShowAutocomplete] = React.useState(false)
useEffect(() => {
if (selectedActionParameters !== null && selectedActionParameters.length === 0) {
- if (requiresAuthentication) {
- console.log("ADD AUTHENTICATION FIELDS")
- }
-
if (selectedAction.parameters !== null && selectedAction.parameters.length > 0) {
setSelectedActionParameters(selectedAction.parameters)
}
@@ -2266,11 +2394,12 @@ const AngularWorkflow = (props) => {
}
if (actionlist.length === 0) {
- actionlist.push({"type": "Execution Argument", "name": "Execution Argument", "value": "$exec", "highlight": "exec", "autocomplete": "$exec"})
+ // FIXME: Have previous execution values in here
+ actionlist.push({"type": "Execution Argument", "name": "Execution Argument", "value": "$exec", "highlight": "exec", "autocomplete": "exec", "example": "hello"})
if (workflow.workflow_variables !== null && workflow.workflow_variables !== undefined && workflow.workflow_variables.length > 0) {
for (var key in workflow.workflow_variables) {
const item = workflow.workflow_variables[key]
- actionlist.push({"type": "workflow_variable", "name": item.name, "value": item.value, "id": item.id, "autocomplete": `${item.name.split(" ").join("_")}`})
+ actionlist.push({"type": "workflow_variable", "name": item.name, "value": item.value, "id": item.id, "autocomplete": `${item.name.split(" ").join("_")}`, "example": item.value})
}
}
@@ -2278,7 +2407,7 @@ const AngularWorkflow = (props) => {
if (workflow.execution_variables !== null && workflow.execution_variables !== undefined && workflow.execution_variables.length > 0) {
for (var key in workflow.execution_variables) {
const item = workflow.execution_variables[key]
- actionlist.push({"type": "execution_variable", "name": item.name, "value": item.value, "id": item.id, "autocomplete": `${item.name.split(" ").join("_")}`})
+ actionlist.push({"type": "execution_variable", "name": item.name, "value": item.value, "id": item.id, "autocomplete": `${item.name.split(" ").join("_")}`, "example": ""})
}
}
@@ -2289,7 +2418,10 @@ const AngularWorkflow = (props) => {
if (item.label === "Execution Argument") {
continue
}
- actionlist.push({"type": "action", "id": item.id, "name": item.label, "autocomplete": `${item.label.split(" ").join("_")}`})
+
+ // 1. Take
+ const actionvalue = {"type": "action", "id": item.id, "name": item.label, "autocomplete": `${item.label.split(" ").join("_")}`, "example": item.example === undefined ? "" : item.example}
+ actionlist.push(actionvalue)
}
}
@@ -2298,11 +2430,11 @@ const AngularWorkflow = (props) => {
})
const changeActionParameter = (event, count) => {
- console.log("EVENT: ", event.target.value)
if (event.target.value[event.target.value.length-1] === "$") {
- console.log("LAST IS $ - SHOULD SHOW DROPDOWN")
if (!showDropdown) {
+ setShowAutocomplete(false)
setShowDropdown(true)
+ setShowDropdownNumber(count)
}
} else {
if (showDropdown) {
@@ -2310,6 +2442,68 @@ const AngularWorkflow = (props) => {
}
}
+ // bad detection mechanism probably
+ if (event.target.value[event.target.value.length-1] === "." && actionlist.length > 0) {
+
+ console.log("GET THE LAST ARGUMENT FOR !")
+ //const [jsonList, getJsonList] = React.useState([])
+ const inputdata = {"data": "1.2.3.4", "dataType": "4.5.6.6"}
+ const returnJson = GetParsedPaths(inputdata, "")
+ console.log(jsonList)
+
+ // Search for the item backwards
+ // 1. Reverse search backwards from . -> $
+ // 2. Search the actionlist for the item
+ // 3. Find the data for the specific item
+
+ var curstring = ""
+ var record = false
+ for (var key in selectedActionParameters[count].value) {
+ const item = selectedActionParameters[count].value[key]
+ if (record) {
+ curstring += item
+ }
+
+ if (item === "$") {
+ record = true
+ curstring = ""
+ }
+ }
+
+ if (curstring.length > 0) {
+ // Search back in the action list
+ curstring = curstring.split(" ").join("_").toLowerCase()
+ const actionItem = actionlist.find(data => data.autocomplete.split(" ").join("_").toLowerCase() === curstring)
+ if (actionItem !== undefined) {
+ console.log("Found item: ", actionItem)
+
+ var jsonvalid = true
+ try {
+ const tmp = String(JSON.parse(actionItem.example))
+ if (!tmp.includes("{") && !tmp.includes("[")) {
+ jsonvalid = false
+ }
+ } catch (e) {
+ jsonvalid = false
+ }
+
+ if (jsonvalid) {
+ setJsonList(GetParsedPaths(JSON.parse(actionItem.example), ""))
+
+ if (!showDropdown) {
+ setShowAutocomplete(false)
+ setShowDropdown(true)
+ setShowDropdownNumber(count)
+ }
+ }
+ }
+ }
+ } else {
+ if (jsonList.length > 0) {
+ setJsonList([])
+ }
+ }
+
selectedActionParameters[count].value = event.target.value
selectedAction.parameters[count].value = event.target.value
setSelectedAction(selectedAction)
@@ -2393,45 +2587,22 @@ const AngularWorkflow = (props) => {
// FIXME: Issue #40 - selectedActionParameters not reset
if (Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters.length > 0) {
return (
-
-
- {showDropdown ?
-
- : null}
-
-
+
Arguments
{selectedActionParameters.map((data, count) => {
if (data.variant === "") {
data.variant = "STATIC_VALUE"
}
+ if (!selectedAction.auth_not_required && selectedAction.selectedAuthentication !== undefined && selectedAction.selectedAuthentication.fields !== undefined && selectedAction.selectedAuthentication.fields[data.name] !== undefined) {
+ // This sets the placeholder in the frontend. (Replaced in backend)
+ selectedActionParameters[count].value = selectedAction.selectedAuthentication.fields[data.name]
+ selectedAction.parameters[count].value = selectedAction.selectedAuthentication.fields[data.name]
+ setSelectedAction(selectedAction)
+
+ return null
+ }
+
var staticcolor = "inherit"
var actioncolor = "inherit"
var varcolor = "inherit"
@@ -2460,6 +2631,17 @@ const AngularWorkflow = (props) => {
maxWidth: "95%",
fontSize: "1em",
},
+ endAdornment: (
+
+
+ {
+ setShowDropdownNumber(count)
+ setShowDropdown(true)
+ setShowAutocomplete(true)
+ }}/>
+
+
+ )
}}
fullWidth
multiline={multiline}
@@ -2473,14 +2655,14 @@ const AngularWorkflow = (props) => {
}}
onBlur={(event) => {
// Super basic check
- if (event.target.value.startsWith("{")) {
- console.log("VALIDATING JSON")
- try {
- JSON.parse(event.target.value)
- } catch (e) {
- alert.error("Failed to parse json: ", e)
- }
- }
+ //if (event.target.value.startsWith("{")) {
+ // console.log("VALIDATING JSON")
+ // try {
+ // JSON.parse(event.target.value)
+ // } catch (e) {
+ // alert.error("Failed to parse json: ", e)
+ // }
+ //}
}}
/>
@@ -2596,9 +2778,17 @@ const AngularWorkflow = (props) => {
itemColor = "#ffeb3b"
}
return (
-
-
-
+
+
+ {data.configuration === true ?
+
+ {
+ setAuthenticationModalOpen(true)
+ }}/>
+
+ :
+
+ }
{data.name}
@@ -2630,6 +2820,166 @@ const AngularWorkflow = (props) => {
{datafield}
+ {showDropdown && showDropdownNumber === count && data.variant === "STATIC_VALUE" && jsonList.length > 0 ?
+
+ Autocomplete
+
+
+ : null}
+ {showDropdown && showDropdownNumber === count && data.variant === "STATIC_VALUE" && jsonList.length === 0 ?
+
+ Autocomplete
+
+
+ : null}
+
+
)})}
@@ -2648,6 +2998,8 @@ const AngularWorkflow = (props) => {
paddingLeft: 10,
minHeight: "100%",
zIndex: 1000,
+ resize: "horizontal",
+ overflow: "auto",
}
const defineStartnode = () => {
@@ -2740,7 +3092,66 @@ const AngularWorkflow = (props) => {
placeholder={selectedAction.label}
onChange={selectedNameChange}
/>
- {environments !== undefined && environments !== null && environments.length > 0 ?
+ {selectedAction.authentication.length === 0 && requiresAuthentication ?
+
+ Authenticate {selectedApp.name}:
+
+
+
+
+ : null}
+ {selectedAction.authentication.length > 0 ?
+
+ Authentication
+
+
+
+ {/*
+
+
+ curaction.authentication = authenticationOptions
+ if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "")
+ */}
+
+
+
+
+
+ : null}
+ {environments !== undefined && environments !== null && environments.length > 1 ?
Environment
: null}
- {/*requiresAuthentication ?
-
-
-
- : null*/}
@@ -2839,7 +3242,7 @@ const AngularWorkflow = (props) => {
newActionname = newActionname.replace("_", " ")
newActionname = newActionname.charAt(0).toUpperCase()+newActionname.substring(1)
return (
-
+
+
+
: null
@@ -3222,7 +3628,7 @@ const AngularWorkflow = (props) => {
-