Do you want to add this suggestion?
{
setVariableInfo({
"name": variable.name,
"description": variable.description,
"value": variable.value,
"index": index,
})
if (type === "normal") {
setVariablesModalOpen(true);
} else if (type === "exec") {
setExecutionVariablesModalOpen(true);
} else {
console.log("Unknown type: ", type)
}
}}
>
{variable.name}
What are{" "}
Workflow variables?
{workflow.workflow_variables === null
? null
: workflow.workflow_variables.map((variable, varindex) => {
return (
{thisview}
{triggers.map((trigger, index) => {
// Hiding since March 2024
if (trigger.trigger_type === "EMAIL") {
return null
}
if (trigger.trigger_type == "PIPELINE") {
return null
}
const imagesize = isMobile ? 40 : trigger.large_image.includes("svg") ? 50 : 50
var imageline = trigger.large_image.length === 0 ? ![]()
:
const title = trigger.trigger_type === "WEBHOOK" ? "Workflow starters" : trigger.trigger_type === "SUBFLOW" ? "Mid-Workflow" : ""
const color = trigger.is_valid ? green : yellow;
return (
{title.length > 0 ?
{title}
: null}
{
handleTriggerDrag(e, trigger);
}}
onStop={(e) => {
handleDragStop(e);
}}
dragging={false}
position={{
x: 0,
y: 0,
}}
>
{ }}>
{imageline}
{isMobile ? null :
{trigger.name}
{trigger.description}
}
);
})}
-
{hits.length === 0 ?
{
clickedApp(hit)
}}>
{
setMouseHoverIndex(index)
}}>
{avatar}
*/}
{items.map((item, index) => renderItem(item, index))}
{visibleApps.map((app, index) => {
if (app.invalid) {
return null
}
if (app.trigger_type === "PIPELINE" && userdata.support !== true) {
return null
}
//if ((app.id === "shuffle_agent") && userdata.support !== true) {
// return null
//}
if (viewedApps.includes(app.id)) {
return null
}
if (app.trigger_type !== undefined && app.trigger_type !== null && app.trigger_type.length > 0) {
app.is_valid = true
app.actions = [{ "name": "empty" }]
}
viewedApps.push(app.id)
var extraMessage = ""
if (index == 2) {
extraMessage =
}
delay += 75
return (
runDelay ?
{/**/}
*/}
:
Apps need to be activated before they can be used. Search in the search bar from our 2500+ apps to activate them for.
}
) : apps.length > 0 ? (
{extraMessage}
)
})}
{visibleApps.length <= 2 ?
{
}}
>
Click one of the public apps below to Activate it for your organization.
{
console.log("CLICKED")
}}>
:
{
console.log("Should load in extra apps?")
}}
>
Couldn't find the apps you were looking for? Searching unactivated apps. Click one of these apps to Activate it for your organisation.
{
console.log("CLICKED")
}}>
) : (
{
selectedEdge && Object.keys(selectedEdge).length > 0 ?
:
}
{datafield}
{actionlist.length === 0 ? null : (
{data.name}
{
// Prevent the event from bubbling up
event.preventDefault();
event.stopPropagation();
const rect = event.currentTarget.getBoundingClientRect();
// Ensure we have valid numbers for positioning
const newPosition = {
top: rect.bottom + window.scrollY,
left: rect.left + window.scrollX,
};
// Only set state if we have valid coordinates
if (typeof newPosition.top === 'number' && typeof newPosition.left === 'number') {
setMenuPosition(newPosition);
setShowDropdown(true);
}
}}
>
{showDropdown && menuPosition && menuPosition.top && menuPosition.left && (
{
setSourceValue(condition.source);
setConditionValue(condition.condition);
setDestinationValue(condition.destination);
setConditionsModalOpen(true);
setCodeEditorModalOpen(false)
}}
>
{condition.source.value}
{ }}
>
{condition.condition.value}
{condition.destination.value}
Conditions
{selectedEdge?.source && workflow?.actions ?
: null
}
{/* Add arrow icon */}
{
selectedEdge && Object.keys(selectedEdge).length > 0 ?
: null
}
Conditions
{injectedData}
{/* Check if dest is the same as start */}
{conditionsDisabled ?
{/*
*/}
{Object.entries(transformedAuthData).map(([appId, authList]) => {
if (authList === undefined || authList === null || authList.length < 2) {
return null;
}
return (
)
})}
);
};
const iconStyle = {
marginRight: 15,
};
if (selectedTrigger !== undefined && selectedTrigger !== null && Object.getOwnPropertyNames(selectedTrigger)?.length > 0) {
if (workflow.triggers[selectedTriggerIndex] === undefined) {
return null;
}
if (
workflow.triggers[selectedTriggerIndex].parameters === undefined ||
workflow.triggers[selectedTriggerIndex].parameters === null ||
workflow.triggers[selectedTriggerIndex].parameters.length === 0
) {
workflow.triggers[selectedTriggerIndex].parameters = [];
workflow.triggers[selectedTriggerIndex].parameters[0] = {
name: "workflow",
value: "",
};
workflow.triggers[selectedTriggerIndex].parameters[1] = {
name: "argument",
value: "",
};
workflow.triggers[selectedTriggerIndex].parameters[2] = {
name: "user_apikey",
value: "",
};
workflow.triggers[selectedTriggerIndex].parameters[3] = {
name: "startnode",
value: "",
};
workflow.triggers[selectedTriggerIndex].parameters[4] = {
name: "check_result",
value: "false",
};
workflow.triggers[selectedTriggerIndex].parameters[5] = {
name: "auth_override",
value: "",
};
}
var handleSubflowStartnodeSelection = (e) => {
setSubworkflowStartnode(e.target.value);
if (e.target.value === null || e.target.value === undefined) {
return
}
const branchId = uuidv4();
const newbranch = {
source_id: workflow.triggers[selectedTriggerIndex].id,
destination_id: e.target.value.id,
source: workflow.triggers[selectedTriggerIndex].id,
target: e.target.value.id,
has_errors: false,
id: branchId,
_id: branchId,
label: "Subflow",
decorator: true,
};
if (workflow.visual_branches !== undefined) {
if (workflow.visual_branches === null) {
workflow.visual_branches = [newbranch];
} else if (workflow.visual_branches.length === 0) {
workflow.visual_branches.push(newbranch);
} else {
const foundIndex = workflow.visual_branches.findIndex(
(branch) => branch.source_id === newbranch.source_id
);
if (foundIndex !== -1) {
const currentEdge = cy.getElementById(
workflow.visual_branches[foundIndex].id
);
if (
currentEdge !== undefined &&
currentEdge !== null
) {
currentEdge.remove();
}
}
workflow.visual_branches.splice(foundIndex, 1);
workflow.visual_branches.push(newbranch);
}
}
if (workflow.id === subworkflow.id) {
const cybranch = {
group: "edges",
source: newbranch.source_id,
target: newbranch.destination_id,
id: branchId,
data: newbranch,
};
cy.add(cybranch);
}
try {
workflow.triggers[selectedTriggerIndex].parameters[3].value = e.target.value.id
} catch(e) {
console.log("Error: ", e)
workflow.triggers[selectedTriggerIndex].parameters[3] =
{
name: "startnode",
value: e.target.value.id,
};
}
setWorkflow(workflow)
setUpdate(Math.random())
}
}
const handleMenuClose = () => {
setUpdate(Math.random());
setMenuPosition(null);
};
const handleItemClick = (values) => {
console.log("VALUES: ", values)
if (values === undefined || values === null || values.length === 0) {
return;
}
// Get the base autocomplete value and normalize it
let toComplete = values[0].autocomplete.toLowerCase().replaceAll(" ", "_");
// Add $ prefix if not already present
if (!toComplete.startsWith("$")) {
toComplete = "$" + toComplete;
}
// Add any additional path components
for (let key in values) {
if (key === "0" || !values[key].autocomplete) {
continue;
}
toComplete += values[key].autocomplete;
}
var foundField;
// Update the field value
if(selectedTrigger?.trigger_type === "SUBFLOW"){
foundField = document.getElementById("subflow_exec_field");
}else if(selectedTrigger?.trigger_type === "USERINPUT"){
foundField = document.getElementById("userinput_info_field");
}
if (foundField) {
// Get current cursor position
const cursorPos = foundField.selectionStart;
const currentValue = foundField.value;
// Insert the new value at cursor position
const newValue = currentValue.slice(0, cursorPos) + toComplete + currentValue.slice(cursorPos);
foundField.value = newValue;
// Update state
setSelectedTriggerValue(newValue);
if(selectedTrigger?.trigger_type === "SUBFLOW"){
workflow.triggers[selectedTriggerIndex].parameters[1].value = newValue
}else if(selectedTrigger?.trigger_type === "USERINPUT"){
workflow.triggers[selectedTriggerIndex].parameters[0].value = newValue
}
// Set cursor position after inserted text
foundField.setSelectionRange(cursorPos + toComplete.length, cursorPos + toComplete.length);
}
setWorkflow(workflow);
setUpdate(Math.random());
setShowDropdown(false);
setMenuPosition(null);
};
const subflowtypes = [
{
name: "Any",
},
{
name: "Enrich",
},
{
name: "Ticket Creation",
}
]
const handleTriggerParamChange = (triggerId, triggerField, newData) => {
var updateFail = ""
if (workflow !== undefined && workflow !== null) {
// Find the trigger with matching id
const triggerIndex = workflow?.triggers?.findIndex(trigger => trigger.id === triggerId);
if (triggerIndex >= 0) {
// Find the parameter with matching name
const paramIndex = workflow.triggers[triggerIndex].parameters?.findIndex(param => param.name === triggerField);
if (paramIndex >= 0) {
// Update the parameter value
workflow.triggers[triggerIndex].parameters[paramIndex].value = newData;
// Update workflow state to trigger re-render
setWorkflow(workflow);
setSelectedTriggerValue(newData)
setLastSaved(false);
setUpdate(Math.random())
} else {
updateFail = "Parameter is undefined or null"
}
} else {
updateFail = "Trigger is undefined or null"
}
} else {
updateFail = "Workflow is undefined or null"
}
if (updateFail !== "") {
toast.error(updateFail + " - Failed to update subflow parameter value. Please try again.")
}
}
const SubflowSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined || selectedTrigger.trigger_type !== "SUBFLOW" ? null :
{selectedTrigger.app_name}
Wait for results
}
/>
Select a workflow to run
Select the Startnode
Runtime Argument
{/*parentParamValue !== undefined && parentParamValue !== null && parentParamValue !== "" && parentParamValue !== data.value ?
{
selectedActionParameters[count].value = parentParamValue
selectedAction.parameters[count].value = parentParamValue
setSelectedAction(selectedAction)
setUpdate(Math.random())
}}
/>
: null*/}
{
event.preventDefault()
setCodeEditorModalOpen(true)
setActiveDialog("codeeditor")
var parsedvalue = workflow?.triggers[selectedTriggerIndex]?.parameters[1]?.value
// Right now Handling subflow only with this
navigate(`?trigger_id=${selectedTrigger.id}&trigger_field=${"argument"}&trigger_name=${selectedTrigger.label}`)
setEditorData({
"name": workflow.triggers[selectedTriggerIndex].parameters[1].name,
"value": parsedvalue,
"field_number": 1,
"actionlist": triggerActionList,
"field_id": "subflow_exec_field",
})
}}
>
API-key
Authentication Override
Comment
What are comments?Name
Justify
Align
Height
Width
Background
Text Color
Background-Image
{selectedTrigger.app_name}: {selectedTrigger.status}
What are webhooks?Name
Parameters
{
}}
helperText={
workflow.triggers[selectedTriggerIndex].parameters[0].value !== undefined &&
workflow.triggers[selectedTriggerIndex].parameters[0].value !== null &&
(workflow.triggers[
selectedTriggerIndex
].parameters[0].value.includes("localhost") ||
workflow.triggers[
selectedTriggerIndex
].parameters[0].value.includes("127.0.0.1")) ? (
PS: This does NOT work with localhost. Use your local IP
instead.
) : null
}
InputProps={{
style: {
},
endAdornment:
{
var copyText = document.getElementById("webhook_uri_field");
if (copyText !== undefined && copyText !== null) {
const clipboard = navigator.clipboard;
if (clipboard === undefined) {
toast("Can only copy over HTTPS (port 3443)");
return;
}
navigator.clipboard.writeText(copyText.value);
copyText.select();
copyText.setSelectionRange(
0,
99999
); /* For mobile devices */
/* Copy the text inside the text field */
document.execCommand("copy");
toast("Copied Webhook URL");
} else {
console.log("Couldn't find webhook URI field: ", copyText);
}
}}
edge="end"
>
}}
fullWidth
disabled
value={
workflow.triggers[selectedTriggerIndex].parameters[0].value
}
color="primary"
placeholder="10"
onBlur={(e) => {
setTriggerCronWrapper(e.target.value);
}}
/>
{ }}
InputProps={{
style: {
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
},
}}
fullWidth
multiline
rows="4"
defaultValue={trigger_header_auth}
color="primary"
disabled={selectedTrigger.status === "running"}
placeholder={"AUTH_HEADER=AUTH_VALUE1"}
onBlur={(e) => {
const value = e.target.value;
if (selectedTrigger.parameters === null) {
selectedTrigger.parameters = [];
}
workflow.triggers[selectedTriggerIndex].parameters[2] = {
value: value,
name: "auth_headers",
};
setWorkflow(workflow);
}}
/>
{ }}
InputProps={{
style: {
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
color: theme.palette.textFieldStyle.color,
},
}}
fullWidth
multiline
rows="2"
color="primary"
disabled={selectedTrigger.status === "running"}
placeholder={"OK"}
onBlur={(e) => {
const value = e.target.value;
if (selectedTrigger.parameters === null) {
selectedTrigger.parameters = [];
}
workflow.triggers[selectedTriggerIndex].parameters[3] = {
value: value,
name: "custom_response_body",
};
setWorkflow(workflow);
}}
/>
{workflow.triggers[selectedTriggerIndex].parameters.length > 4 ?
{
if (selectedTrigger.parameters === null) {
selectedTrigger.parameters = [];
}
// Sets the webhook to run as version 2.. kinda
var value = "v2"
if (workflow.triggers[selectedTriggerIndex].parameters[4].value.includes("v2")) {
value = "v1"
}
workflow.triggers[selectedTriggerIndex].parameters[4] = {
name: "await_response",
value: value
}
setWorkflow(workflow)
setUpdate(Math.random())
}}
color="primary"
value="await_response"
/>
}
label={
: null}
Webhook URI
Authentication headers
Custom Response
Wait For Response
}
/>
{selectedTrigger.app_name}
What is the user input trigger?Name
Environment:
*/}
Information
{
event.preventDefault()
setCodeEditorModalOpen(true)
setActiveDialog("codeeditor")
var parsedvalue = workflow?.triggers[selectedTriggerIndex]?.parameters[0]?.value
navigate(`?trigger_id=${selectedTrigger.id}&trigger_field=${"alertinfo"}&trigger_name=${selectedTrigger.label}`)
setEditorData({
"name": workflow.triggers[selectedTriggerIndex].parameters[0].name,
"value": parsedvalue,
"field_number": 0,
"actionlist": triggerActionList,
"field_id": "information_field",
})
}}
>
Input options
Use subflows to connect to any app you want, or use the default email and sms options
Subflow
}
/>
Email
}
/>
SMS
}
/>
{workflows === undefined ||
workflows === null ||
workflows.length === 0 ? null : (
option.id === value.id}
getOptionLabel={(option) => {
if (option === undefined || option === null || option.name === undefined || option.name === null) {
return "No Workflow Selected";
}
const newname = (option.name.charAt(0).toUpperCase() + option.name.substring(1)).replaceAll("_", " ");
return newname;
}}
options={
[{
"id": "",
"name": "No Workflow Selected",
}].concat(workflows)
}
fullWidth
onChange={(event, newValue) => {
console.log("Changed autocomplete!")
handleWorkflowSelectionUpdate({ target: { value: newValue } }, true)
event.target.blur();
}}
renderOption={(props, data, state) => {
if (data.id === workflow.id) {
data = workflow;
}
return (
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
: null}
Choose Trigger '{data.name}'
}>
)
}}
renderInput={(params) => {
return (
);
}}
/>
)}
{/* Button for making a new workflow to attach */}
) : null}
{workflow?.triggers &&
workflow?.triggers[selectedTriggerIndex] &&
workflow?.triggers[selectedTriggerIndex].parameters &&
workflow?.triggers[selectedTriggerIndex].parameters[2] &&
workflow?.triggers[selectedTriggerIndex].parameters[2].value &&
workflow?.triggers[selectedTriggerIndex].parameters[2].value.includes("email")
? (
{workflow.input_questions.map((question, index) => {
var foundParamIndex = workflow.triggers[selectedTriggerIndex].parameters.findIndex((param) => param.name === "input_questions")
const selectionClick = () => {
if (foundParamIndex === -1) {
workflow.triggers[selectedTriggerIndex].parameters.push({
"name": "input_questions",
"value": [],
})
foundParamIndex = workflow.triggers[selectedTriggerIndex].parameters.length - 1
} else {
try {
workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value = JSON.parse(workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value)
} catch (e) {
console.log("Couldn't parse input questions: ", e)
workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value = []
}
}
if (workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value.includes(question.name)) {
workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value = workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value.filter((item) => item !== question.name)
} else {
workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value.push(question.name)
}
// Make it back to a string
workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value = JSON.stringify(workflow.triggers[selectedTriggerIndex].parameters[foundParamIndex].value)
setWorkflow(workflow)
setUpdate(Math.random())
}
return (
:
{
selectionClick()
}}>
{question.name}
)
})}
{
setEditWorkflowModalOpen(true)
toast.info("Expand and scroll down to add input-questions")
}}>
No Input-Questions found. Click to add them!
}
const defaultEnvironment = environments?.find(
(env) => env.default && env.Name.toLowerCase() !== "cloud"
)
if (selectedTrigger.trigger_type === "PIPELINE" && selectedTrigger.environment === "onprem" && defaultEnvironment !== undefined) {
selectedTrigger.environment = defaultEnvironment.Name
setSelectedTrigger(selectedTrigger)
}
const PipelineSidebar = !selectedTrigger || Object.getOwnPropertyNames(selectedTrigger)?.length === 0 || !workflow?.triggers || !workflow?.triggers[selectedTriggerIndex] || !selectedTrigger.trigger_type || selectedTrigger.trigger_type !== "SCHEDULE" ? null :
{selectedTrigger.app_name}: {selectedTrigger.status}
What are pipelines?Name
What would you like to do?
{/*
{
if(selectedTrigger.status === "running"){
//toast("please stop the trigger to edit the configuration");
return;
} else {
setSelectedOption("Syslog listener");
const url = `${globalUrl}/api/v1/pipelines/pipeline_${selectedTrigger.id}`
const command = `from tcp://192.168.1.100:5162 read syslog | import`
const pipelineConfig = {
command: command,
name: selectedTrigger.label,
type: "create",
environment: selectedTrigger.environment,
workflow_id: workflow.id,
trigger_id: selectedTrigger.id,
start_node: "",
url:url,
};
submitPipeline(selectedTrigger, selectedTriggerIndex, pipelineConfig);
}}}
style={{
border: "1px solid rgba(255,255,255,0.3)",
borderRadius: theme.palette?.borderRadius,
padding: 10,
cursor: "pointer",
marginTop: 5,
display: "flex",
alignItems: "center",
}}
>
{
setSelectedOption("Syslog listener")}}
value={"Syslog listener"}
name="option"
/>
}
label= {selectedOption === "Syslog listener" && selectedTrigger.status === "running" ? "listening at 192.168.1.100:5162" : "Start Syslog listener"}
/>
{
if(selectedTrigger.status === "running"){
// toast("please stop the trigger to edit the configuration");
return;
} else {
setSelectedOption("SigmaRule");
const url = `${globalUrl}/api/v1/pipelines/pipeline_${selectedTrigger.id}`
const command = `export | sigma /var/lib/tenzir/sigma_rules | to ${url}`
const pipelineConfig = {
command: command,
name: selectedTrigger.label,
type: "create",
environment: selectedTrigger.environment,
workflow_id: workflow.id,
trigger_id: selectedTrigger.id,
start_node: "",
url:url,
};
submitPipeline(selectedTrigger, selectedTriggerIndex, pipelineConfig);
}}}
style={{
border: "1px solid rgba(255,255,255,0.3)",
borderRadius: theme.palette?.borderRadius,
padding: 10,
cursor: "pointer",
marginTop: 5,
display: "flex",
alignItems: "center",
}}
>
{
if (selectedTrigger.status !== "running"){
setSelectedOption("SigmaRule")
}
}}
value={"Sigma Rulesearch"}
name="option"
/>
}
label="Run Sigma Rulesearch"
/>
*/}
{
if (selectedTrigger.status === "running") {
toast("please stop the trigger to edit the configuration");
return;
} else {
setSelectedOption("Kafka Queue");
setTenzirConfigModalOpen(true);
}
}}
style={{
border: "1px solid rgba(255,255,255,0.3)",
borderRadius: theme.palette?.borderRadius,
padding: 10,
cursor: "pointer",
marginTop: 5,
display: "flex",
alignItems: "center",
}}
>
{
if (selectedTrigger.status !== "running") {
setSelectedOption("Kafka Queue")
}
}}
value={"Kafka Queue"}
name="option"
/>
}
label="Subscribe to a Kafka Queue"
/>
{selectedTrigger.app_name}: {selectedTrigger.status}
What are schedules?Name
Parameters
{
setTriggerCronWrapper(e.target.value);
}}
/>
{/*selectedTrigger.environment === "cloud" ?
1 ? workflow.triggers[selectedTriggerIndex].parameters[1].value : ""
}
placeholder='{"key": "value"}'
onBlur={(e) => {
setTriggerBodyWrapper(e.target.value);
}}
/>
When to start: {isCloud || selectedTrigger?.environment === "cloud" ? Cron formatting : "every X second"}
Runtime Argument:
{/* Top Row: Workflow Name | Build/Debug Toggle | Right Side Buttons */}
0 && Object.getOwnPropertyNames(selectedActionEnvironment || {})?.length !== 0 && selectedActionEnvironment?.Name !== "Cloud" && savingState === 0 ? (
0}
onChange={(event) => {
toast("Opening in new tab. Refresh this page after adding it.")
setTimeout(() => {
window.open(`/admin?tab=locations`, "_blank", "noopener,noreferrer")
}, 1500)
//selectedActionEnvironment.suborg_distribution = event.target.checked ? userdata.orgs.map((org) => org.id) : []
//changeDistribution(selectedAction?.selectedAuthentication)
}}
name="distributeAuth"
color="primary"
/>
}
label={
Distribute location
}
/>
) : null
} placement="right">
Runtime Location
: null}
{workflowAsCode && (
)}
{/* Left: Workflow Name Container */}
{
setHovered(true)
}}
onMouseLeave={() => {
setHovered(false)
}}
onClick={() => {
setEditWorkflowModalOpen(true)
setLastSaved(false)
}}
>
{workflow?.name !== undefined && workflow?.name !== null && workflow?.name?.length > 0 ?
{/* Center: Build/Debug Toggle */}
{workflow.public === true ? null : (
{
if (newMode !== null) {
setBuildDebugMode(newMode)
if (newMode === "debug") {
setExecutionModalOpen(true);
getWorkflowExecution(workflow.id, "", executionFilter, workflow.org_id)
}
}
}}
sx={{
backgroundColor: themeMode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)",
borderRadius: "8px",
padding: "3px",
border: "none",
"& .MuiToggleButtonGroup-grouped": {
border: "none",
"&:not(:first-of-type)": {
borderRadius: "6px",
borderTopLeftRadius: "0px",
borderBottomLeftRadius: "0px",
},
"&:first-of-type": {
borderRadius: "6px",
borderTopRightRadius: "0px",
borderBottomRightRadius: "0px",
},
},
}}
>
{toggleOptions.map(({ value, label, icon, darkIcon }) => (
{label}
))}
)}
{/* Right: Buttons Container */}
Diff (beta):
{orgDiff.environment === true && - Environment
} {orgDiff?.actions?.length > 0 && - Actions ({orgDiff.actions?.length}):
{orgDiff.actions.map((orgDiffAction, index) => { //console.log("DIFF2: ", orgDiffAction) var formattedError = "" var paramchanges = "" for (var diffActionKey in orgDiffAction) { if (diffActionKey !== "id" && diffActionKey !== "label" && diffActionKey !== "parameters" && diffActionKey !== "params" && diffActionKey !== "large_image") { if (formattedError?.length > 0) { formattedError += ", " } formattedError += diffActionKey } if (diffActionKey === "parameters") { paramchanges = orgDiffAction[diffActionKey].join(", ") } } if (paramchanges?.length > 0) { formattedError += paramchanges } return (
{formattedError}
)
})}
}
}>
{originalWorkflow?.suborg_distribution === undefined || originalWorkflow?.suborg_distribution === null || originalWorkflow?.suborg_distribution?.length === 0 || originalWorkflow?.suborg_distribution.includes("none") ?
<>
{originalWorkflow?.parentorg_workflow !== undefined && originalWorkflow?.parentorg_workflow !== null && originalWorkflow?.parentorg_workflow?.length > 0 || workflow?.parentorg_workflow !== undefined && workflow?.parentorg_workflow !== null && workflow?.parentorg_workflow?.length > 0 ?
null
/*
* Disabled because redirects occurred anyway
*
*/
: null}
{userdata !== undefined && userdata !== null && userdata?.orgs !== undefined && userdata?.orgs !== null && userdata?.orgs?.length > 1 && workflow?.id !== undefined && workflow?.id && workflow?.id?.length > 0 && userdata?.active_org?.creator_org?.length === 0 && userdata?.active_org?.id == workflow?.org_id ?
: null}
:
Save the workflow first
: null} arrow placement="right">
Select an Org ({originalWorkflow?.suborg_distribution?.length})
}
>
{orgDiff.environment === true && - Environment
} {orgDiff?.actions?.length > 0 && - Actions ({orgDiff.actions?.length}):
{orgDiff.actions.map((orgDiffAction, index) => { //console.log("DIFF2: ", orgDiffAction) var formattedError = "" var paramchanges = "" for (var diffActionKey in orgDiffAction) { if (diffActionKey !== "id" && diffActionKey !== "label" && diffActionKey !== "parameters" && diffActionKey !== "params" && diffActionKey !== "large_image") { if (formattedError?.length > 0) { formattedError += ", " } formattedError += diffActionKey } if (diffActionKey === "parameters") { paramchanges = orgDiffAction[diffActionKey].join(", ") } } if (paramchanges?.length > 0) { formattedError += paramchanges } return (
{connectedUsers.map((user) => {
return (
)
}
const shownErrors = !isMobile && workflow.errors !== undefined && workflow.errors !== null && workflow.errors.length > 0 && showErrors && (!workflow.public || userdata.support === true) ?
- {newerror}
)
})}
setHovered(true)}
onMouseLeave={() => setHovered(false)}
onClick={() => {
setExecutionModalOpen(true);
getWorkflowExecution(workflow.id, "", executionFilter, workflow.org_id)
}}
>
Explore runs
)
}
// Used for handling suborg workflow distribution management
const updateCurrentWorkflow = (inputworkflow) => {
setCurrentWorkflow(inputworkflow)
//setLastSaved(false)
setSelectedAction({});
setSelectedApp({})
setWorkflow(inputworkflow)
if (inputworkflow.id === originalWorkflow.id) {
if (selectedActionEnvironment !== undefined && selectedActionEnvironment !== null && selectedActionEnvironment.Name !== undefined && selectedActionEnvironment.Name !== null) {
setOriginalSelectedEnvironment(selectedActionEnvironment)
}
}
if (inputworkflow.id === originalWorkflow.id && originalSelectedEnvironment !== undefined && originalSelectedEnvironment !== null && originalSelectedEnvironment.Name !== undefined && originalSelectedEnvironment.Name !== null) {
setSelectedActionEnvironment(originalSelectedEnvironment)
} else {
//console.log("Checking input workflow actions for env: ", inputworkflow.actions)
if (inputworkflow.actions !== undefined && inputworkflow.actions !== null && inputworkflow.actions.length > 0) {
for (var actionkey in inputworkflow.actions) {
const action = inputworkflow.actions[actionkey]
if (action.environment === undefined || action.environment === null || action.environment === "") {
continue
}
//const env = environments.find((a) => a.Name === action.environment)
const newenv = {
Name: action.environment,
Type: action.environment === "cloud" ? "cloud" : "onprem",
}
setSelectedActionEnvironment(newenv)
break
}
}
}
if (inputworkflow !== undefined && inputworkflow !== null && inputworkflow.id !== undefined && inputworkflow.id !== null) {
getRevisionHistory(inputworkflow.id, 50, 0, inputworkflow.org_id)
getWorkflowExecution(inputworkflow.id, "", executionFilter, inputworkflow.org_id)
loadTriggers(inputworkflow.org_id)
}
// Update props match key
if (inputworkflow.parentorg_workflow !== undefined && inputworkflow.parentorg_workflow !== null && inputworkflow.parentorg_workflow !== "") {
setDistributedFromParent(inputworkflow.parentorg_workflow)
} else {
setDistributedFromParent("")
}
if (cy !== undefined && cy !== null) {
cy.removeListener("select");
cy.removeListener("unselect");
cy.removeListener("add");
cy.removeListener("remove");
cy.removeListener("mouseover");
cy.removeListener("mouseout");
cy.removeListener("drag");
cy.removeListener("free");
cy.removeListener("cxttap");
// Remove all edges
setElements([])
cy.edges().remove()
cy.nodes().remove()
}
}
// Uses Org-Id referencing header to create a workflow while getting it in realtime
// This further ensures the user needs access to GET the workflow properly
const duplicateParentWorkflow = (inputWorkflow, org_id, setWorkflow) => {
fetch(`${globalUrl}/api/v1/workflows/${inputWorkflow.id}`, {
method: "GET",
headers: {
"Org-Id": org_id,
"Content-Type": "application/json",
},
credentials: "include",
})
.then((response) => {
if (response.status === 200) {
getChildWorkflows(inputWorkflow.id)
}
return response.json();
})
.then((responseJson) => {
if (responseJson.success === false) {
//toast("Failed to duplicate workflow")
} else {
//toast("Successfully duplicated workflow. Reloading child workflows.")
if (setWorkflow === true) {
updateCurrentWorkflow(responseJson)
}
}
})
.catch((error) => {
console.log("Dupe workflow for suborg error: ", error.toString())
})
}
const BottomCytoscapeBar = () => {
if (workflow.id === undefined || workflow.id === null || (!workflow.public && apps.length === 0)) {
return null;
}
const saveIcon = (
);
const toolbarHeight = 40;
const buttonSize = 40;
const borderRadius = "8px";
const iconSvgSize = 21;
// Play/Stop button
const executionButton = executionRunning ? (
{defaultReturn}
{workflow.tags.map((tag, index) => {
if (index >= 3) {
return null;
}
return (
{
setLeftViewOpen(true);
setLeftBarSize(350);
}}
>
Runtime Argument
{executionData.execution_argument}
{executionTimeline?.length > 0 &&
{workflowExecutions.length > 0 ? (
No executions found for the '{executionFilter}' filter.
)}
) : (
{workflowExecutions.map((data, index) => {
executionDelay += 50
const statusColor =
data.status === "FINISHED"
? green : data.status === "ABORTED" || data.status === "FAILED"
? "red"
: yellow;
const successActions =
data.results !== undefined && data.results !== null
? data.results.filter((result) => result.status === "SUCCESS").length
: 0
const skippedActions = data.results !== undefined && data.results !== null ?
data.results.filter((result) => result.status === "SKIPPED").length
: 0
const timestamp = new Date(data.started_at * 1000)
.toLocaleString("en-GB")
.split(".")[0]
.split("T")
.join(" ");
var calculatedResult =
data.workflow.actions !== undefined &&
data.workflow.actions !== null
? data.workflow.actions.length
: 0;
if (data.workflow.triggers !== undefined && data.workflow.triggers !== null) {
for (let triggerkey in data.workflow.triggers) {
const trigger = data.workflow.triggers[triggerkey];
if (
(trigger.app_name === "User Input" &&
trigger.trigger_type === "USERINPUT") ||
(trigger.app_name === "Shuffle Workflow" &&
trigger.trigger_type === "SUBFLOW")
) {
calculatedResult += 1;
}
}
}
const foundnotifications = data.notifications_created === undefined || data.notifications_created === null ? 0 : data.notifications_created
const executionPaperStyle = {
padding: 5,
marginTop: 5,
minHeight: 45,
maxHeight: 45,
minWidth: "95%",
maxWidth: "95%",
display: "flex",
marginBottom: index === workflowExecutions.length-1 ? 200 : 10,
cursor: "pointer",
color: theme.palette.text.primary,
borderRadius: theme.palette.borderRadius,
backgroundColor: theme.palette.platformColor,
};
return (
{/**/}
{ }}
onMouseOut={() => { }}
onClick={() => {
if ((data.result === undefined || data.result === null || data.result.length === 0) && data.status !== "FINISHED" && data.status !== "ABORTED") {
start()
setExecutionRunning(true)
setExecutionRequestStarted(false)
}
navigate(`?execution_id=${data.execution_id}`)
// Ensuring we have the latest version of the result.
// Especially important IF the result is > 1 Mb in cloud
var checkStarted = false
if (data.results !== undefined && data.results !== null && data.results.length > 0) {
if (data.execution_argument !== undefined && data.execution_argument !== null && data.execution_argument.includes("too large")) {
setExecutionData({});
checkStarted = true
start();
setExecutionRunning(true);
setExecutionRequestStarted(false);
} else {
if (data.results !== undefined && data.results !== null) {
for (let resultkey in data.results) {
if (data.results[resultkey].status !== "SUCCESS") {
continue
}
if (data.results[resultkey].result.includes("too large")) {
setExecutionData({});
checkStarted = true
start();
setExecutionRunning(true);
setExecutionRequestStarted(false);
break
}
}
}
}
}
const cur_execution = {
execution_id: data.execution_id,
authorization: data.authorization,
}
setExecutionRequest(cur_execution)
setExecutionModalView(1)
if (!checkStarted) {
handleUpdateResults(data, cur_execution)
if (cy !== undefined && cy !== null) {
cy.elements().removeClass("success-highlight failure-highlight executing-highlight");
for (let actionKey in data.workflow.actions) {
var actionitem = data.workflow.actions[actionKey]
handleColoring(actionitem.id, "", actionitem.label)
}
for (let resultKey in data.results) {
var item = data.results[resultKey]
handleColoring(item.action.id, item.status, item.action.label)
}
}
setExecutionData(data)
}
}}
>
0 ? ` Authgroup: ${data.authgroup}` : '')}
placement="left"
>
) : null}
{foundnotifications > 0 ?
{
e.preventDefault()
e.stopPropagation()
window.open(`/admin?org_id=${workflow.org_id}&admin_tab=notifications&workflow=${data.workflow.id}&execution_id=${data.execution_id}`, "_blank")
}}
/>
: null}
{lastExecution === data.execution_id ? (
);
})}
) : (
{getExecutionSourceImage(data)}
{timestamp}
{data.workflow.actions !== null ? (
{successActions} + {skippedActions > 0 ? skippedActions : {skippedActions}} = {calculatedResult}
{ const newitem = removeParam("execution_id", cursearch); navigate(curpath + newitem) setExecutionRunning(false); stop() }} > Back to all runs
Details
{executionData.status !== undefined &&
executionData.status !== "ABORTED" &&
executionData.status !== "FINISHED" &&
executionData.status !== "FAILURE" &&
executionData.status !== "WAITING" &&
!(executionData.results === undefined || executionData.results === null || (executionData.results.length === 0 && executionData.status === "EXECUTING")) ? (
{
console.log(environments, defaultEnvironmentIndex, nonskippedResults)
}} />
{environments.length > 0 && defaultEnvironmentIndex < environments.length && nonskippedResults.length === 0 && environments[defaultEnvironmentIndex].Name !== "Cloud" ?
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? Find out here. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: {supportEmail}
No results yet. Is Orborus running for the "{environments[defaultEnvironmentIndex].Name}" environment? Find out here. If the Workflow doesn't start within 30 seconds with Orborus running, contact support: support@shuffler.io
: null}
) : null}
{
if (cy == undefined || cy == null) {
return
}
var currentnode = cy.getElementById(data.action.id);
if (currentnode !== undefined && currentnode !== null && currentnode.length !== 0) {
currentnode.addClass("shuffle-hover-highlight");
}
// Add a hover highlight
//var copyText = document.getElementById(
// "copy_element_shuffle"
//)
}}
onMouseOut={() => {
if (cy == undefined || cy == null) {
return
}
var currentnode = cy.getElementById(data.action.id);
if (currentnode.length !== 0) {
currentnode.removeClass("shuffle-hover-highlight");
}
}}
>
{
if (cy !== undefined && cy !== null) {
const oldstartnode = cy.getElementById(data.action.id);
//console.log("FOUND NODe: ", oldstartnode)
if (oldstartnode !== undefined && oldstartnode !== null) {
const foundname = oldstartnode.data("label")
if (foundname !== undefined && foundname !== null) {
data.action.label = foundname
}
}
//console.log("Click data: ", data)
//data.action.label = ""
setSelectedResult(data);
setActiveDialog("result")
setCodeModalOpen(true);
} else {
//toast("Please wait until the workflow is loaded and try again")
setCodeModalOpen(true)
setSelectedResult(data)
}
}}
>
Expand debug window. Errors: {relevant_errors.length}
}
placement="top"
style={{ zIndex: 50000 }}
>
0 ? red : theme.palette.textColor,
}} />
{actionimg}
{data.action.name}
{data.action.app_name === "AI Agent" || data.action.app_name === "Shuffle Agent" ?
{ }}
>
: null}
{data?.action?.name === "run_schemaless" || data?.action?.name === "run_singul" || data?.action?.name === "singul" && data?.action?.parameters?.length > 4 ?
param?.name === "x-debug-url")?.value || ""}`}>
param?.name === "x-debug-url")?.value || ""}
target="_blank"
style={{
textDecoration: "none",
color: "rgba(255,255,255,0.4)",
}}
>
: null}
{data.action.app_name === "shuffle-subflow" &&
validate.result.success !== undefined &&
validate.result.success === true ? (
{validate.valid &&
data.action.parameters !== undefined &&
data.action.parameters !== null &&
data.action.parameters.length > 0 ? (
data.action.parameters[0].value ===
props.match.params.key ? (
{
getWorkflowExecution(
props.match.params.key,
validate.result.execution_id
);
}}
>
Status
{data.status}
{similarActionsView}
: null}
{validate.valid ? (
{
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
enableClipboard={(copy) => {
handleReactJsonClipboard(copy);
}}
displayDataTypes={false}
onSelect={(select) => {
HandleJsonCopy(showResult, select, data.action.label);
console.log("SELECTED!: ", select);
}}
name={`$${data?.action?.label?.toLowerCase()}`}
/>
) : (
);
})
)}
)}
{data.action.label === undefined || data.action.label === null || data.action.label === "" ? data.action.label : data.action.label.replaceAll("_", " ")}
{validate?.result?.length > 0 ?
Result
{data.result}
: null}
)}
{data.value.length > 60 || checked.valid ?
{
if (!showVariable) {
setOpen(!open)
}
}}
>
{data.name}
{checked.valid ?
{
var copyText = document.getElementById("copy_element_shuffle");
if (copyText !== undefined && copyText !== null) {
const clipboard = navigator.clipboard;
if (clipboard === undefined) {
toast("Can only copy over HTTPS (port 3443)");
return;
}
navigator.clipboard.writeText(data.value);
copyText.select();
copyText.setSelectionRange(
0,
99999
); /* For mobile devices */
/* Copy the text inside the text field */
document.execCommand("copy");
toast("Copied to clipboard");
} else {
console.log("Couldn't find the copy field: ", copyText);
}
}}
edge="end"
>
:
{data.name}:
{showVariable ? data.value : null}
}
{open ?
checked.valid ?
{
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
displayDataTypes={false}
name={"Parsed data for variable " + data.name}
/>
:
{
if (showlink) {
e.preventDefault()
e.stopPropagation()
window.open(data.value, "_blank")
}
}}
color={showlink ? "#ff8544" : "textSecondary"}
>
{data.value}
: null}
)
}
var draggingDisabled = false;
const currentSuggestion = getErrorSuggestion(validate.result)
const codePopoutModal = !codeModalOpen ? null : (
);
const newView = (
{/*isMobile ? null : leftView*/}
{leftView}
{userdata.support === true && (
)}
{workflow.id === undefined || workflow.id === null || appsLoaded === false ? (
*/}
{
// FIXME: There's something specific loading when
// you do the first hover of a node. Why is this different?
setCy(incy);
}}
/>
)}
{executionModal}
{
console.log("Toggle sidebar!")
setLeftBarSize(leftViewOpen ? 0 : 235)
setLeftViewOpen(!leftViewOpen)
}}
style={{
position: "absolute",
left: 0,
top: "50%",
transform: "translateY(-50%)",
zIndex: 1000,
backgroundColor: theme.palette.surfaceColor,
border: `1px solid ${theme.palette.defaultBorder}`,
borderLeft: "none",
borderTopRightRadius: "8px",
borderBottomRightRadius:"8px",
borderTopLeftRadius: "0",
borderBottomLeftRadius: "0",
width: leftViewOpen ? 24 : 32,
height: 48,
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "left 0.3s ease, width 0.3s ease, border-radius 0.3s ease",
cursor: "pointer",
}}
>
{leftViewOpen ?
{isLoaded && workflowDone ?
Loading Workflow
}
) : (
{/*
{/*
No workflow to load. Workflow runs may still exist. If you think this is wrong, please contact support@shuffler.io
*/}
:
{Object.getOwnPropertyNames(selectedTrigger)?.length > 0 ?
selectedTrigger.trigger_type === "SCHEDULE" ?
ScheduleSidebar
: selectedTrigger.trigger_type === "PIPELINE" ?
PipelineSidebar
: selectedTrigger.trigger_type === "WEBHOOK" ?
WebhookSidebar
: selectedTrigger.trigger_type === "USERINPUT" ?
UserinputSidebar
: selectedTrigger.trigger_type === "SUBFLOW" ?
SubflowSidebar
: null
: null}
: null}
{/*
{
rightSideBarOpen && selectedTrigger?.trigger_type === "SUBFLOW"&& Object.getOwnPropertyNames(selectedTrigger)?.length > 0 ?
Authentication for {selectedApp.name.replaceAll("_", " ", -1)}
{/*
{
e.preventDefault();
setSuggestionBox({
"position": {
"top": 500,
"left": 500,
},
"open": false,
"value": "",
"loading": false,
});
}}
>
{suggestionLoading === true ?
{responseMsg}
: null}
)
}
/*else if (selectedRevision === undefined || selectedRevision === null || selectedRevision == {} && originalWorkflow !== undefined && originalWorkflow !== null && originalWorkflow !== {}) {
console.log("Setting original workflow as selected revision")
setSelectedRevision(originalWorkflow)
}*/
const RevisionBox = (props) => {
const { revision, showBorder, } = props
if (revision === undefined || revision === null) {
return null
}
var newrevision = JSON.parse(JSON.stringify(revision))
// Make unix timestamp into ISO timestamp in the format July 27th, 3:05 AM
// Format: July 27th, 3:05 AM
//console.log("Edited time: ", revision.edited)
// Convert 1692128391 to valid timestamp
const validTimestamp = newrevision.edited.toString().length === 10 ? newrevision.edited * 1000 : newrevision.edited
const translatedDate = new Date(validTimestamp).toLocaleString('en-US', { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true })
var workflowStatus = newrevision.status !== undefined && newrevision.status !== null && newrevision.status !== "" ? newrevision.status : "test"
if (newrevision.name !== undefined && newrevision.name !== null && newrevision.name !== "") {
if (newrevision.name.toLowerCase().includes("test")) {
workflowStatus = "test"
}
if (newrevision.name.toLowerCase().includes("dev") || newrevision.name.toLowerCase().includes("staging") || newrevision.name.toLowerCase().includes("rollback")) {
workflowStatus = "dev"
}
if (newrevision.name.toLowerCase().includes("prod") || newrevision.name.toLowerCase().includes("main")) {
workflowStatus = "prod"
}
}
return (
{revision.actions !== undefined && revision.actions !== null ?
{revision.actions.length}
: null}
{revision.triggers !== undefined && revision.triggers !== null ?
{revision.triggers.length}
: null}
{revision.updated_by !== undefined && revision.updated_by !== null && revision.updated_by !== "" ?
{/*
Current Version
No other revisions found. Save your workflow with changes to create a revision.
}
{
allRevisions.map((revision, index) => {
/*
if(revision.edited === selectedVersion.edited){
return null
}
*/
return (
:
{/*selectedRevision.edited !== undefined && selectedRevision.edited !== null && selectedRevision.edited !== originalWorkflow.edited ?
: null*/}
{newView}
{
setSelectionOpen(false)
}}
>
{
setShowVideo("")
}}
>
: null}
) : (
{/* Removed due to missing react router features
setSearchModalOpen(false)}
workflow={workflow}
/>
);
};
export default AngularWorkflow;