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
+83 -341
View File
@@ -1446,18 +1446,18 @@ const AngularWorkflow = (defaultprops) => {
trigger.parameters = [] trigger.parameters = []
const topic = document.getElementById('topic')?.value const topic = document.getElementById('topic')?.value;
const bootstrapServers = document.getElementById('bootstrap_servers')?.value const bootstrapServers = document.getElementById('bootstrap_servers')?.value;
const groupId = document.getElementById('group_id')?.value const groupId = document.getElementById('group_id')?.value;
//const autoOffsetReset = document.getElementById('auto_offset_reset')?.value; //const autoOffsetReset = document.getElementById('auto_offset_reset')?.value;
if(topic) { if(topic) {
trigger.parameters.push({ trigger.parameters.push({
name: "topic", name: "topic",
value: topic value: topic
}) });
} else { } else {
toast("Please enter the topic name"); toast("please enter the topic name");
return; return;
} }
@@ -3283,17 +3283,10 @@ const AngularWorkflow = (defaultprops) => {
// don't redirect if it exists // don't redirect if it exists
const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search; const cursearch = typeof window === "undefined" || window.location === undefined ? "" : window.location.search;
var execFound = new URLSearchParams(cursearch).get("execution_id"); var execFound = new URLSearchParams(cursearch).get("execution_id");
var sessionToken = new URLSearchParams(cursearch).get("session_token"); if (execFound === null) {
if (execFound === null && sessionToken === null) { toast(`You don't access to this workflow or loading failed. Redirecting to workflows in a few seconds..`)
toast(`You don't have access to this workflow or loading failed. Redirecting to workflows in a few seconds..`)
setTimeout(() => { setTimeout(() => {
window.location.pathname = "/workflows"; 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); }, 2000);
} }
} }
@@ -3776,28 +3769,20 @@ const AngularWorkflow = (defaultprops) => {
const onNodeDragStop = (event, selectedAction) => { const onNodeDragStop = (event, selectedAction) => {
const nodedata = event.target.data(); const nodedata = event.target.data();
if (nodedata.id === selectedAction.id) { if (nodedata.id === selectedAction.id) {
//console.log("Same node, return") return;
return
} }
if (nodedata.finished === false) { if (nodedata.finished === false) {
//console.log("Node is not finished, return") return;
return
} }
const connected = event.target.connectedEdges().jsons() const connected = event.target.connectedEdges().jsons()
if (connected.length > 0 && connected !== undefined) { if (connected.length > 0 && connected !== undefined) {
for (let connectkey in connected) { for (let connectkey in connected) {
const edge = connected[connectkey] const edge = connected[connectkey]
if (edge.data.decorator && edge.data.label === releaseToConnectLabel) { //console.log("EDGE:", edge)
// Transform to normal edge
const currentedge = cy.getElementById(edge.data.id) //const edge = edgeBase.json()
if (currentedge !== undefined && currentedge !== null) {
currentedge.data("decorator", false)
currentedge.data("label", "")
}
continue
}
const sourcenode = cy.getElementById(edge.data.source) const sourcenode = cy.getElementById(edge.data.source)
const destinationnode = cy.getElementById(edge.data.target) const destinationnode = cy.getElementById(edge.data.target)
@@ -4012,142 +3997,27 @@ const AngularWorkflow = (defaultprops) => {
} }
if (nodedata.id === selectedAction.id) { 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
}
}
if (closestNode !== null && closestNode !== undefined) {
//console.log("Closest node app: ", closestNode.data.app_name, "Distance: ", minDistance)
/* /*
if (decoratorIds.length > 0) { // Tried looking for the closest node by position. aStar path not working entirely.
console.log("Decorators already exists. If within distance of 15 add to existing, otherwise remove old and add new: ", decoratorIds) console.log("NODE: ", event.target)
for (var decoratorkey in decoratorIds) { const closestNode = cy.elements().aStar({
const decoratorEdge = cy.getElementById(decoratorIds[decoratorkey]) root: nodedata.id,
if (decoratorEdge === null || decoratorEdge === undefined) { goal: 'node',
continue directed: false,
} })
const sourceNode = cy.getElementById(decoratorEdge.data.source) if (closestNode.found) {
const targetNode = cy.getElementById(decoratorEdge.data.target) console.log("No closest node found for: ", nodedata.id)
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 { } else {
console.log("Outside distance of 15, remove old edge and add new") console.log("Closest: ", closestNode)
}
}
} }
*/ */
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 ( if (
originalLocation.x === 0 && originalLocation.x === 0 &&
originalLocation.y === 0 && originalLocation.y === 0 &&
@@ -4205,11 +4075,11 @@ const AngularWorkflow = (defaultprops) => {
} }
// Ensure it only happens once // 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(() => { useBeforeunload(() => {
@@ -4222,7 +4092,7 @@ const AngularWorkflow = (defaultprops) => {
document.removeEventListener("paste", handlePaste, true); document.removeEventListener("paste", handlePaste, true);
} }
} }
}) });
// Should get AI autocompletes // Should get AI autocompletes
const aiSubmit = (value, setResponseMsg, setSuggestionLoading, inputAction) => { const aiSubmit = (value, setResponseMsg, setSuggestionLoading, inputAction) => {
@@ -5624,10 +5494,11 @@ const AngularWorkflow = (defaultprops) => {
// Checks for errors in edges when they're added // Checks for errors in edges when they're added
const onEdgeAdded = (event) => { const onEdgeAdded = (event) => {
const edge = event.target.data() setLastSaved(false);
//console.log("EDGE ADDED!: ", edge) const edge = event.target.data();
//console.log("edge added: ", edge)
if (edge.source === undefined && edge.target === undefined) { if (edge.source === undefined && edge.target === undefined) {
console.log("Edge source and target is undefined")
return return
} }
@@ -5641,7 +5512,6 @@ const AngularWorkflow = (defaultprops) => {
const sourcenode = cy.getElementById(edge.source) const sourcenode = cy.getElementById(edge.source)
const destinationnode = cy.getElementById(edge.target) const destinationnode = cy.getElementById(edge.target)
if (sourcenode === undefined || sourcenode === null || destinationnode === undefined || destinationnode === null) { if (sourcenode === undefined || sourcenode === null || destinationnode === undefined || destinationnode === null) {
console.log("Source or destination node is undefined")
} else { } else {
//console.log("Edge added: Is it a trigger? If so, check if it already has a branch and remove it: ", sourcenode.data()) //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") { if (sourcenode.data("type") === "TRIGGER") {
@@ -5654,10 +5524,10 @@ const AngularWorkflow = (defaultprops) => {
console.log("Node: ", targetedge) console.log("Node: ", targetedge)
if (targetedge !== -1) { if (targetedge !== -1) {
event.target.remove()
//console.log("Found branch already!") //console.log("Found branch already!")
toast.error("Triggers can have exactly one target node") toast.error("Triggers can have exactly one target node")
event.target.remove()
return 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( var targetnode = workflow.triggers.findIndex(
(data) => data.id === edge.target (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") console.log("Removing because of descriptor or comment")
event.target.remove() event.target.remove();
return return;
} }
setLastSaved(false)
targetnode = -1; targetnode = -1;
// Check if: // Check if:
@@ -5736,51 +5603,38 @@ const AngularWorkflow = (defaultprops) => {
// dest == dest && source == source // dest == dest && source == source
// backend: check all children? to stop recursion // backend: check all children? to stop recursion
var found = false; var found = false;
const branches = cy.edges().jsons() for (let branchkey in workflow.branches) {
if (
const startNode = cy.nodes().jsons().find((node) => node.data.isStartNode === true) workflow.branches[branchkey].destination_id === edge.source &&
var startnodeId = workflow.start workflow.branches[branchkey].source_id === edge.target
if (startNode !== undefined && startNode !== null) { ) {
startnodeId = startNode.data.id toast("A branch in the opposite direction already exists");
} event.target.remove();
found = true;
//for (let branchkey in workflow.branches) { break;
for (let branchkey in branches) { } else if (
const branch = branches[branchkey].data workflow.branches[branchkey].destination_id === edge.target &&
workflow.branches[branchkey].source_id === edge.source
//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("That branch already exists");
toast("A branch in the opposite direction already exists") event.target.remove();
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)
found = true;
break;
} else if (edge.target === workflow.start) {
targetnode = workflow.triggers.findIndex(
(data) => data.id === edge.source
);
if (targetnode === -1) { if (targetnode === -1) {
if (targetnode.type !== "TRIGGER") { if (targetnode.type !== "TRIGGER") {
toast("Can't make arrow to starting node") toast("Can't make arrow to starting node");
event.target.remove() event.target.remove();
break break;
} }
found = true; found = true;
} }
//} else if (edge.source === workflow.branches[branchkey].source_id) { } else if (edge.source === workflow.branches[branchkey].source_id) {
} else if (edge.source === branch.source) {
// FIXME: Verify multi-target for triggers // FIXME: Verify multi-target for triggers
// 1. Check if destination exists // 1. Check if destination exists
// 2. Check if source is a trigger // 2. Check if source is a trigger
@@ -5824,6 +5678,7 @@ const AngularWorkflow = (defaultprops) => {
newdst !== null newdst !== null
) { ) {
const dstdata = RunAutocompleter(newdst.data()); const dstdata = RunAutocompleter(newdst.data());
//console.log("DST Autocompleter: ", dstdata);
} }
var newbranch = { var newbranch = {
@@ -11543,96 +11398,6 @@ const AngularWorkflow = (defaultprops) => {
Conditions are unavailable between triggers and the startnode. Conditions are unavailable between triggers and the startnode.
</Typography> </Typography>
: null} : 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>
</div> </div>
); );
}; };
@@ -12396,7 +12161,7 @@ const AngularWorkflow = (defaultprops) => {
return transformedData; return transformedData;
} };
const AppAuthSelector = ({ appAuthData }) => { const AppAuthSelector = ({ appAuthData }) => {
const [selectedAuth, setSelectedAuth] = useState(""); const [selectedAuth, setSelectedAuth] = useState("");
@@ -12409,7 +12174,6 @@ const AngularWorkflow = (defaultprops) => {
const handleShowingValue = (appName) => { const handleShowingValue = (appName) => {
let mappingWithName = {} let mappingWithName = {}
let listWithValues = workflow.triggers[selectedTriggerIndex].parameters[5]?.value.split(";").filter(e => e).map(e => e.split("=")) let listWithValues = workflow.triggers[selectedTriggerIndex].parameters[5]?.value.split(";").filter(e => e).map(e => e.split("="))
console.log("LIST WITH VALUES: ", listWithValues) console.log("LIST WITH VALUES: ", listWithValues)
for (let i = 0; i < listWithValues.length; i++) { for (let i = 0; i < listWithValues.length; i++) {
mappingWithName[listWithValues[i][0]] = listWithValues[i][1] mappingWithName[listWithValues[i][0]] = listWithValues[i][1]
@@ -13092,7 +12856,7 @@ const AngularWorkflow = (defaultprops) => {
data: newbranch, data: newbranch,
}; };
cy.add(cybranch) cy.add(cybranch);
} }
console.log("Value to be set: ", e.target.value); console.log("Value to be set: ", e.target.value);
@@ -13636,7 +13400,6 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
</div> </div>
{/*
<div> <div>
<div> <div>
<div className="app"> <div className="app">
@@ -13654,9 +13417,8 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
</div> </div>
</div> </div>
*/}
</div> </div>
) );
} }
return null; return null;
@@ -15610,8 +15372,12 @@ const AngularWorkflow = (defaultprops) => {
right: 0, right: 0,
left: isMobile ? 20 : leftBarSize + 20, left: isMobile ? 20 : leftBarSize + 20,
top: isMobile ? 30 : appBarSize + 20, top: isMobile ? 30 : appBarSize + 20,
pointerEvents: "none",
} }
const TopCytoscapeBar = (props) => { const TopCytoscapeBar = (props) => {
if (workflow.public === true) { if (workflow.public === true) {
return null return null
@@ -15627,7 +15393,7 @@ const AngularWorkflow = (defaultprops) => {
<div style={topBarStyle}> <div style={topBarStyle}>
<div style={{ <div style={{
margin: "0px 10px 0px 10px", margin: "0px 10px 0px 10px",
pointerevents: "none", pointerEvents: "none",
}}> }}>
<Breadcrumbs <Breadcrumbs
aria-label="breadcrumb" aria-label="breadcrumb"
@@ -15652,6 +15418,7 @@ const AngularWorkflow = (defaultprops) => {
</Link> </Link>
<h2 style={{ <h2 style={{
margin: 0, margin: 0,
pointerEvents: "none",
}}>{workflow.name}</h2> }}>{workflow.name}</h2>
</Breadcrumbs> </Breadcrumbs>
@@ -16376,8 +16143,6 @@ const AngularWorkflow = (defaultprops) => {
} }
} }
/*
// Infinitely annoying. Need a new bind
if (( event.ctrlKey || event.metaKey ) && event.shiftKey) { if (( event.ctrlKey || event.metaKey ) && event.shiftKey) {
console.log("Shift key pressed") console.log("Shift key pressed")
if (!workflow.public && executionModalOpen) { if (!workflow.public && executionModalOpen) {
@@ -16389,8 +16154,7 @@ const AngularWorkflow = (defaultprops) => {
setExecutionModalView(0); setExecutionModalView(0);
} }
} }
*/ };
}
document.addEventListener('keydown', handleKeyDown); document.addEventListener('keydown', handleKeyDown);
@@ -18260,7 +18024,7 @@ const AngularWorkflow = (defaultprops) => {
</div> </div>
{foundnotifications > 0 ? {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 <ErrorOutlineIcon
style={{color: "rgba(255,255,255,0.4)", marginTop: 10, marginRight: 10, }} style={{color: "rgba(255,255,255,0.4)", marginTop: 10, marginRight: 10, }}
onClick={(e) => { 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." 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) { 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." 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 // Validate and check for newlines
if (result.success !== false) { if (result.success !== false) {
@@ -21012,9 +20775,8 @@ const AngularWorkflow = (defaultprops) => {
<div style={{ color: "white" }}>Configuration options for {selectedOption}</div> <div style={{ color: "white" }}>Configuration options for {selectedOption}</div>
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
{selectedOption === "Kafka Queue" && (
{selectedOption === "Kafka Queue" ? <>
<div>
<b>Topic</b> <b>Topic</b>
<TextField <TextField
id="topic" id="topic"
@@ -21075,24 +20837,8 @@ const AngularWorkflow = (defaultprops) => {
placeholder={"earliest"} placeholder={"earliest"}
defaultValue={(selectedTrigger?.parameters?.find(param => param.name === "auto_offset_reset")?.value) || ''} 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> </DialogContent>
<DialogActions> <DialogActions>
<Button <Button
@@ -21282,16 +21028,13 @@ const AngularWorkflow = (defaultprops) => {
//cy.remove('*') //cy.remove('*')
setElements([]) setElements([])
// Remove all edges
cy.edges().remove()
cy.nodes().remove()
//return
} }
// Remove all cy nodes // Remove all cy nodes
setTimeout(() => { setTimeout(() => {
setupGraph(newrevision) setupGraph(newrevision)
}, 100)
// Re-adding cytoscape triggers // Re-adding cytoscape triggers
if (cy !== undefined && cy !== null) { if (cy !== undefined && cy !== null) {
@@ -21328,7 +21071,6 @@ const AngularWorkflow = (defaultprops) => {
}, 250) }, 250)
} }
} }
}, 100)