marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
monilprajapati
2024-06-13 00:04:33 +05:30
parent da4e25f6c9
commit 50dcf618a0
1 changed files with 144 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/AngularWorkflow.jsx
+144 -402
View File
@@ -553,7 +553,7 @@ const AngularWorkflow = (defaultprops) => {
}, [editWorkflowModalOpen])
// New for generated stuff
const releaseToConnectLabel = "Release to Connect"
const releaseToConnectLabel = "Release to Connect"
const integrationApps = [{
"id": "integration",
"name": "Integration Framework",
@@ -1446,18 +1446,18 @@ const AngularWorkflow = (defaultprops) => {
trigger.parameters = []
const topic = document.getElementById('topic')?.value
const bootstrapServers = document.getElementById('bootstrap_servers')?.value
const groupId = document.getElementById('group_id')?.value
const topic = document.getElementById('topic')?.value;
const bootstrapServers = document.getElementById('bootstrap_servers')?.value;
const groupId = document.getElementById('group_id')?.value;
//const autoOffsetReset = document.getElementById('auto_offset_reset')?.value;
if(topic) {
trigger.parameters.push({
name: "topic",
value: topic
})
});
} else {
toast("Please enter the topic name");
toast("please enter the topic name");
return;
}
@@ -3283,19 +3283,12 @@ const AngularWorkflow = (defaultprops) => {
// don't redirect if it exists
const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
var execFound = new URLSearchParams(cursearch).get("execution_id");
var sessionToken = new URLSearchParams(cursearch).get("session_token");
if (execFound === null && sessionToken === null) {
toast(`You don't have access to this workflow or loading failed. Redirecting to workflows in a few seconds..`)
setTimeout(() => {
window.location.pathname = "/workflows";
}, 2000);
} else if (sessionToken !== null && workflow_id === "3abdfb21-b40f-4e50-b855-ac0d62f83cbe") {
toast(`Injecting session token and reloading workflow..`)
setTimeout(() => {
setCookie("session_token", sessionToken, { path: "/" });
window.location.href = "https://shuffler.io/workflows/3abdfb21-b40f-4e50-b855-ac0d62f83cbe";
}, 2000);
}
if (execFound === null) {
toast(`You don't access to this workflow or loading failed. Redirecting to workflows in a few seconds..`)
setTimeout(() => {
window.location.pathname = "/workflows";
}, 2000);
}
}
}
@@ -3776,28 +3769,20 @@ const AngularWorkflow = (defaultprops) => {
const onNodeDragStop = (event, selectedAction) => {
const nodedata = event.target.data();
if (nodedata.id === selectedAction.id) {
//console.log("Same node, return")
return
return;
}
if (nodedata.finished === false) {
//console.log("Node is not finished, return")
return
return;
}
const connected = event.target.connectedEdges().jsons()
if (connected.length > 0 && connected !== undefined) {
for (let connectkey in connected) {
const edge = connected[connectkey]
if (edge.data.decorator && edge.data.label === releaseToConnectLabel) {
// Transform to normal edge
const currentedge = cy.getElementById(edge.data.id)
if (currentedge !== undefined && currentedge !== null) {
currentedge.data("decorator", false)
currentedge.data("label", "")
}
continue
}
//console.log("EDGE:", edge)
//const edge = edgeBase.json()
const sourcenode = cy.getElementById(edge.data.source)
const destinationnode = cy.getElementById(edge.data.target)
@@ -4012,141 +3997,26 @@ const AngularWorkflow = (defaultprops) => {
}
if (nodedata.id === selectedAction.id) {
return
return;
}
if ((nodedata.trigger_type === "SUBFLOW" || nodedata.trigger_type === "USERINPUT" || nodedata.type === "ACTION") && !nodedata.isStartNode) {
// Check if it already has any non-decorator branches attached to it
const branches = cy.elements('edge').jsons()
var branchFound = false
var decoratorIds = []
for (var branchkey in branches) {
if (branches[branchkey].data.source === nodedata.id || branches[branchkey].data.target === nodedata.id) {
if (branches[branchkey].data.decorator === true) {
// Add the source/destination
if (branches[branchkey].data.source === nodedata.id) {
decoratorIds.push(branches[branchkey].data.target)
} else {
decoratorIds.push(branches[branchkey].data.source)
}
continue
}
branchFound = true
break
}
}
if (!branchFound) {
//console.log("Found action during drag. Checking closest nodes as it doesn't have a valid branch")
var closestNode = null
var minDistance = 300
const draggedNode = event.target
const allnodes = cy.nodes().jsons()
for (var nodekey in allnodes) {
const node = allnodes[nodekey]
if (node.data.id === nodedata.id) {
continue
}
// Decorators
if (node.data.attachedTo !== undefined) {
continue
}
if (node.position === undefined || node.position === null || node.position.x === undefined || node.position.y === undefined) {
continue
}
if (node.data.type !== "ACTION" && node.data.type !== "TRIGGER") {
continue
}
const distance = Math.sqrt(
Math.pow(draggedNode.position('x') - node.position.x, 2) +
Math.pow(draggedNode.position('y') - node.position.y, 2)
)
if (decoratorIds.includes(node.data.id)) {
//console.log("Found existing decorator for: ", node.data.app_name, "Distance: ", distance)
if (distance > 300) {
// Remove the branch
const edgeToRemove = cy.getElementById(branches[branchkey].data.id)
if (edgeToRemove !== null && edgeToRemove !== undefined) {
//console.log("Removing edge: ", edgeToRemove)
edgeToRemove.remove()
//decoratorIds.splice(decoratorIds.indexOf(node.data.id), 1)
break
}
}
}
if (distance < minDistance) {
minDistance = distance
closestNode = node
}
}
/*
// Tried looking for the closest node by position. aStar path not working entirely.
console.log("NODE: ", event.target)
const closestNode = cy.elements().aStar({
root: nodedata.id,
goal: 'node',
directed: false,
})
if (closestNode !== null && closestNode !== undefined) {
//console.log("Closest node app: ", closestNode.data.app_name, "Distance: ", minDistance)
/*
if (decoratorIds.length > 0) {
console.log("Decorators already exists. If within distance of 15 add to existing, otherwise remove old and add new: ", decoratorIds)
for (var decoratorkey in decoratorIds) {
const decoratorEdge = cy.getElementById(decoratorIds[decoratorkey])
if (decoratorEdge === null || decoratorEdge === undefined) {
continue
}
const sourceNode = cy.getElementById(decoratorEdge.data.source)
const targetNode = cy.getElementById(decoratorEdge.data.target)
const distance = Math.sqrt(
Math.pow(draggedNode.position('x') - sourceNode.position('x'), 2) +
Math.pow(draggedNode.position('y') - sourceNode.position('y'), 2)
)
// Check plus minus 15 in distance from mindistance
if (distance > minDistance - 15 && distance < minDistance + 15) {
console.log("Within distance of 15, add to existing edge")
} else {
console.log("Outside distance of 15, remove old edge and add new")
}
}
}
*/
if (decoratorIds.length === 0) {
//const edgeCurve = calculateEdgeCurve(draggedNode.position(), closestNode.position)
//currentedge.style('control-point-distance', edgeCurve.distance)
//currentedge.style('control-point-weight', edgeCurve.weight)
const newId = uuidv4()
cy.add({
group: "edges",
data: {
decorator: true,
id: newId,
_id: newId,
source: closestNode.data.id,
target: nodedata.id,
label: releaseToConnectLabel,
conditions: [],
}
})
}
}
}
}
if (closestNode.found) {
console.log("No closest node found for: ", nodedata.id)
} else {
console.log("Closest: ", closestNode)
}
*/
if (
originalLocation.x === 0 &&
@@ -4205,11 +4075,11 @@ const AngularWorkflow = (defaultprops) => {
}
// Ensure it only happens once
document.removeEventListener("mousemove", onMouseUpdate, false)
}
document.removeEventListener("mousemove", onMouseUpdate, false);
};
document.addEventListener("mousemove", onMouseUpdate, false)
}
document.addEventListener("mousemove", onMouseUpdate, false);
};
useBeforeunload(() => {
@@ -4222,7 +4092,7 @@ const AngularWorkflow = (defaultprops) => {
document.removeEventListener("paste", handlePaste, true);
}
}
})
});
// Should get AI autocompletes
const aiSubmit = (value, setResponseMsg, setSuggestionLoading, inputAction) => {
@@ -5624,10 +5494,11 @@ const AngularWorkflow = (defaultprops) => {
// Checks for errors in edges when they're added
const onEdgeAdded = (event) => {
const edge = event.target.data()
//console.log("EDGE ADDED!: ", edge)
setLastSaved(false);
const edge = event.target.data();
//console.log("edge added: ", edge)
if (edge.source === undefined && edge.target === undefined) {
console.log("Edge source and target is undefined")
return
}
@@ -5641,7 +5512,6 @@ const AngularWorkflow = (defaultprops) => {
const sourcenode = cy.getElementById(edge.source)
const destinationnode = cy.getElementById(edge.target)
if (sourcenode === undefined || sourcenode === null || destinationnode === undefined || destinationnode === null) {
console.log("Source or destination node is undefined")
} else {
//console.log("Edge added: Is it a trigger? If so, check if it already has a branch and remove it: ", sourcenode.data())
if (sourcenode.data("type") === "TRIGGER") {
@@ -5654,10 +5524,10 @@ const AngularWorkflow = (defaultprops) => {
console.log("Node: ", targetedge)
if (targetedge !== -1) {
event.target.remove()
//console.log("Found branch already!")
toast.error("Triggers can have exactly one target node")
event.target.remove()
return
@@ -5678,10 +5548,6 @@ const AngularWorkflow = (defaultprops) => {
}
}
if (edge.decorator === true) {
console.log("Doing nothing to branch because decorator")
return
}
var targetnode = workflow.triggers.findIndex(
(data) => data.id === edge.target
@@ -5721,14 +5587,15 @@ const AngularWorkflow = (defaultprops) => {
}
}
if (eventTarget.data("isDescriptor") === true || eventTarget.data("type") === "COMMENT") {
if (
eventTarget.data("isDescriptor") === true ||
eventTarget.data("type") === "COMMENT"
) {
console.log("Removing because of descriptor or comment")
event.target.remove()
return
event.target.remove();
return;
}
setLastSaved(false)
targetnode = -1;
// Check if:
@@ -5736,51 +5603,38 @@ const AngularWorkflow = (defaultprops) => {
// dest == dest && source == source
// backend: check all children? to stop recursion
var found = false;
const branches = cy.edges().jsons()
const startNode = cy.nodes().jsons().find((node) => node.data.isStartNode === true)
var startnodeId = workflow.start
if (startNode !== undefined && startNode !== null) {
startnodeId = startNode.data.id
}
//for (let branchkey in workflow.branches) {
for (let branchkey in branches) {
const branch = branches[branchkey].data
//if (workflow.branches[branchkey].destination_id === edge.source && workflow.branches[branchkey].source_id === edge.target) {
if (branch.target === edge.source && branch.source === edge.target) {
toast("A branch in the opposite direction already exists")
event.target.remove()
found = true
break
//} else if (workflow.branches[branchkey].destination_id === edge.target && workflow.branches[branchkey].source_id === edge.source) {
} else if (branch.target === edge.target && branch.source === edge.source) {
if (branch.conditions === undefined) {
// Edgehandles
} else {
console.log("Removing because the same branch already exists")
event.target.remove()
found = true
break
}
} else if (edge.target === startnodeId) {
targetnode = workflow.triggers.findIndex((data) => data.id === edge.source)
for (let branchkey in workflow.branches) {
if (
workflow.branches[branchkey].destination_id === edge.source &&
workflow.branches[branchkey].source_id === edge.target
) {
toast("A branch in the opposite direction already exists");
event.target.remove();
found = true;
break;
} else if (
workflow.branches[branchkey].destination_id === edge.target &&
workflow.branches[branchkey].source_id === edge.source
) {
//toast("That branch already exists");
event.target.remove();
found = true;
break;
} else if (edge.target === workflow.start) {
targetnode = workflow.triggers.findIndex(
(data) => data.id === edge.source
);
if (targetnode === -1) {
if (targetnode.type !== "TRIGGER") {
toast("Can't make arrow to starting node")
event.target.remove()
break
toast("Can't make arrow to starting node");
event.target.remove();
break;
}
found = true;
}
//} else if (edge.source === workflow.branches[branchkey].source_id) {
} else if (edge.source === branch.source) {
} else if (edge.source === workflow.branches[branchkey].source_id) {
// FIXME: Verify multi-target for triggers
// 1. Check if destination exists
// 2. Check if source is a trigger
@@ -5824,6 +5678,7 @@ const AngularWorkflow = (defaultprops) => {
newdst !== null
) {
const dstdata = RunAutocompleter(newdst.data());
//console.log("DST Autocompleter: ", dstdata);
}
var newbranch = {
@@ -11538,101 +11393,11 @@ const AngularWorkflow = (defaultprops) => {
</Button>
{/* Check if dest is the same as start */}
{conditionsDisabled ?
<Typography variant="body1">
Conditions are unavailable between triggers and the startnode.
</Typography>
: null}
<div style={{position: "absolute", bottom: 10, width: "90%", margin: "auto", }}>
{/*
<Button
style={{ margin: "auto", marginTop: "10px" }}
color="secondary"
fullWidth
variant="outlined"
onClick={() => {
// Change Direction of the branch target/source
const foundBranch = cy.getElementById(selectedEdge.id)
if (foundBranch !== undefined && foundBranch !== null) {
console.log("BRANCH: ", foundBranch)
const source = foundBranch.data("source")
const target = foundBranch.data("target")
var branchdata = JSON.parse(JSON.stringify(foundBranch.data()))
console.log("BEFORE: ", branchdata)
const newid = uuidv4()
branchdata.source = target
branchdata.target = source
branchdata.id = newid
branchdata._id = newid
foundBranch.remove()
setTimeout(() => {
toast("Edge being added!")
cy.add({
group: "edges",
source: target,
target: source,
data: branchdata,
})
}, 2500)
}
}}
fullWidth
>
<DeleteIcon style={{marginRight: 10, }}/>
Change Direction
</Button>
<Button
style={{ margin: "auto", }}
color="secondary"
fullWidth
variant="outlined"
onClick={() => {
// Delete the branch
}}
fullWidth
>
Re-attach branch
</Button>
<Button
style={{ margin: "auto", }}
color="secondary"
fullWidth
variant="outlined"
onClick={() => {
// Delete the branch
}}
fullWidth
>
Disable Path
</Button>
*/}
<Button
style={{ margin: "auto", marginTop: 50, }}
color="secondary"
fullWidth
variant="outlined"
onClick={() => {
// Delete the branch
const foundBranch = cy.getElementById(selectedEdge.id)
if (foundBranch !== undefined && foundBranch !== null) {
foundBranch.remove()
}
setConditionsModalOpen(false)
setSelectedEdge({})
}}
fullWidth
>
<DeleteIcon style={{marginRight: 10, }}/>
Delete Branch
</Button>
</div>
{conditionsDisabled ?
<Typography variant="body1">
Conditions are unavailable between triggers and the startnode.
</Typography>
: null}
</div>
);
};
@@ -12396,7 +12161,7 @@ const AngularWorkflow = (defaultprops) => {
return transformedData;
}
};
const AppAuthSelector = ({ appAuthData }) => {
const [selectedAuth, setSelectedAuth] = useState("");
@@ -12409,7 +12174,6 @@ const AngularWorkflow = (defaultprops) => {
const handleShowingValue = (appName) => {
let mappingWithName = {}
let listWithValues = workflow.triggers[selectedTriggerIndex].parameters[5]?.value.split(";").filter(e => e).map(e => e.split("="))
console.log("LIST WITH VALUES: ", listWithValues)
for (let i = 0; i < listWithValues.length; i++) {
mappingWithName[listWithValues[i][0]] = listWithValues[i][1]
@@ -13092,7 +12856,7 @@ const AngularWorkflow = (defaultprops) => {
data: newbranch,
};
cy.add(cybranch)
cy.add(cybranch);
}
console.log("Value to be set: ", e.target.value);
@@ -13636,27 +13400,25 @@ const AngularWorkflow = (defaultprops) => {
</div>
</div>
{/*
<div>
<div>
<div className="app">
<div style={{ display: "flex", marginTop: 10 }}>
<div style={{ flex: "10" }}>
<b>Auth Override</b>
</div>
</div>
<div className="app">
<div style={{ display: "flex", marginTop: 10 }}>
<div style={{ flex: "10" }}>
<b>Auth Override</b>
</div>
</div>
<div style={{ display: "flex", marginTop: 10 }}>
<div style={{ flex: "10", marginLeft: 10 }}>
<AppAuthSelector appAuthData={appAuthentication} />
</div>
</div>
</div>
<div style={{ display: "flex", marginTop: 10 }}>
<div style={{ flex: "10", marginLeft: 10 }}>
<AppAuthSelector appAuthData={appAuthentication} />
</div>
</div>
</div>
</div>
</div>
*/}
</div>
)
);
}
return null;
@@ -15610,8 +15372,12 @@ const AngularWorkflow = (defaultprops) => {
right: 0,
left: isMobile ? 20 : leftBarSize + 20,
top: isMobile ? 30 : appBarSize + 20,
pointerEvents: "none",
}
const TopCytoscapeBar = (props) => {
if (workflow.public === true) {
return null
@@ -15627,7 +15393,7 @@ const AngularWorkflow = (defaultprops) => {
<div style={topBarStyle}>
<div style={{
margin: "0px 10px 0px 10px",
pointerevents: "none",
pointerEvents: "none",
}}>
<Breadcrumbs
aria-label="breadcrumb"
@@ -15652,6 +15418,7 @@ const AngularWorkflow = (defaultprops) => {
</Link>
<h2 style={{
margin: 0,
pointerEvents: "none",
}}>{workflow.name}</h2>
</Breadcrumbs>
@@ -16376,8 +16143,6 @@ const AngularWorkflow = (defaultprops) => {
}
}
/*
// Infinitely annoying. Need a new bind
if (( event.ctrlKey || event.metaKey ) && event.shiftKey) {
console.log("Shift key pressed")
if (!workflow.public && executionModalOpen) {
@@ -16389,8 +16154,7 @@ const AngularWorkflow = (defaultprops) => {
setExecutionModalView(0);
}
}
*/
}
};
document.addEventListener('keydown', handleKeyDown);
@@ -18260,7 +18024,7 @@ const AngularWorkflow = (defaultprops) => {
</div>
{foundnotifications > 0 ?
<Tooltip title={"This workflow created " + foundnotifications + " notification(s). Click to explore them."} placement="top">
<Tooltip title={"This workflow created " + foundnotifications + " notification(s)"} placement="top">
<ErrorOutlineIcon
style={{color: "rgba(255,255,255,0.4)", marginTop: 10, marginRight: 10, }}
onClick={(e) => {
@@ -19319,11 +19083,10 @@ const AngularWorkflow = (defaultprops) => {
return "The queries or data sent to the API is most likely wrong (400). Check the body of the result for more information."
}
/*
if (result.status === 200 || result.status === 201 || result.status === 204) {
return "It looks like the result was successful! If it didn't work, make sure to check if the body you are sending was correct."
}
*/
// Validate and check for newlines
if (result.success !== false) {
@@ -21012,9 +20775,8 @@ const AngularWorkflow = (defaultprops) => {
<div style={{ color: "white" }}>Configuration options for {selectedOption}</div>
</DialogTitle>
<DialogContent>
{selectedOption === "Kafka Queue" ?
<div>
{selectedOption === "Kafka Queue" && (
<>
<b>Topic</b>
<TextField
id="topic"
@@ -21075,24 +20837,8 @@ const AngularWorkflow = (defaultprops) => {
placeholder={"earliest"}
defaultValue={(selectedTrigger?.parameters?.find(param => param.name === "auto_offset_reset")?.value) || ''}
/> */}
</div>
: null}
<TextField
id="bootstrap_servers"
style={{
backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius,
}}
InputProps={{
style: {},
}}
fullWidth
color="primary"
placeholder={"broker1.example.com:9092,192.168.1.100:9092"}
defaultValue={(selectedTrigger?.parameters?.find(param => param.name === "bootstrap_servers")?.value) || ''}
/>
</>
)}
</DialogContent>
<DialogActions>
<Button
@@ -21282,55 +21028,51 @@ const AngularWorkflow = (defaultprops) => {
//cy.remove('*')
setElements([])
// Remove all edges
cy.edges().remove()
cy.nodes().remove()
//return
}
// Remove all cy nodes
setTimeout(() => {
setupGraph(newrevision)
// Re-adding cytoscape triggers
if (cy !== undefined && cy !== null) {
cy.on("select", "node", (e) => {
onNodeSelect(e, appAuthentication);
});
cy.on("select", "edge", (e) => onEdgeSelect(e));
cy.on("unselect", (e) => onUnselect(e));
cy.on("add", "node", (e) => onNodeAdded(e));
cy.on("add", "edge", (e) => onEdgeAdded(e));
cy.on("remove", "node", (e) => onNodeRemoved(e));
cy.on("remove", "edge", (e) => onEdgeRemoved(e));
cy.on("mouseover", "edge", (e) => onEdgeHover(e));
cy.on("mouseout", "edge", (e) => onEdgeHoverOut(e));
cy.on("mouseover", "node", (e) => onNodeHover(e));
cy.on("mouseout", "node", (e) => onNodeHoverOut(e));
// Handles dragging
cy.on("drag", "node", (e) => onNodeDrag(e, selectedAction));
cy.on("free", "node", (e) => onNodeDragStop(e, selectedAction));
cy.on("cxttap", "node", (e) => onCtxTap(e));
if (selectedAction.id !== undefined && selectedAction.id !== null && selectedAction.id !== "") {
setTimeout(() => {
const foundaction = cy.$id(selectedAction.id)
if (foundaction !== undefined && foundaction !== null) {
foundaction.select()
}
}, 250)
}
}
}, 100)
// Re-adding cytoscape triggers
if (cy !== undefined && cy !== null) {
cy.on("select", "node", (e) => {
onNodeSelect(e, appAuthentication);
});
cy.on("select", "edge", (e) => onEdgeSelect(e));
cy.on("unselect", (e) => onUnselect(e));
cy.on("add", "node", (e) => onNodeAdded(e));
cy.on("add", "edge", (e) => onEdgeAdded(e));
cy.on("remove", "node", (e) => onNodeRemoved(e));
cy.on("remove", "edge", (e) => onEdgeRemoved(e));
cy.on("mouseover", "edge", (e) => onEdgeHover(e));
cy.on("mouseout", "edge", (e) => onEdgeHoverOut(e));
cy.on("mouseover", "node", (e) => onNodeHover(e));
cy.on("mouseout", "node", (e) => onNodeHoverOut(e));
// Handles dragging
cy.on("drag", "node", (e) => onNodeDrag(e, selectedAction));
cy.on("free", "node", (e) => onNodeDragStop(e, selectedAction));
cy.on("cxttap", "node", (e) => onCtxTap(e));
if (selectedAction.id !== undefined && selectedAction.id !== null && selectedAction.id !== "") {
setTimeout(() => {
const foundaction = cy.$id(selectedAction.id)
if (foundaction !== undefined && foundaction !== null) {
foundaction.select()
}
}, 250)
}
}
// Need to run through graph setup with this one
}}>