From 9dd618ecfe6d15b9a74f74302e393891757bca8e Mon Sep 17 00:00:00 2001 From: frikky Date: Fri, 5 Nov 2021 14:18:26 +0100 Subject: [PATCH] #543: Added possibility for comments in workflow --- backend/app_sdk/build.sh | 2 +- backend/go-app/go.mod | 2 +- docker-compose.yml | 9 +- frontend/src/App.jsx | 4 +- frontend/src/defaultCytoscapeStyle.js | 19 ++ frontend/src/views/AngularWorkflow.jsx | 284 ++++++++++++++++++++++++- functions/onprem/orborus/build.sh | 2 +- functions/onprem/orborus/go.mod | 2 +- functions/onprem/orborus/go.sum | 2 + functions/onprem/worker/build.sh | 2 +- functions/onprem/worker/go.mod | 2 +- 11 files changed, 307 insertions(+), 23 deletions(-) diff --git a/backend/app_sdk/build.sh b/backend/app_sdk/build.sh index 072777b4..eee9f8fa 100644 --- a/backend/app_sdk/build.sh +++ b/backend/app_sdk/build.sh @@ -3,7 +3,7 @@ ### DEFAULT NAME=shuffle-app_sdk -VERSION=0.9.30 +VERSION=0.9.31 docker rmi docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION --force docker build . -f Dockerfile -t frikky/shuffle:app_sdk -t frikky/$NAME:$VERSION -t docker.pkg.github.com/frikky/shuffle/$NAME:$VERSION -t ghcr.io/frikky/$NAME:$VERSION -t ghcr.io/frikky/$NAME:nightly diff --git a/backend/go-app/go.mod b/backend/go-app/go.mod index cc3d7b53..5ef793b2 100644 --- a/backend/go-app/go.mod +++ b/backend/go-app/go.mod @@ -2,7 +2,7 @@ module main go 1.15 -//replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared +replace github.com/shuffle/shuffle-shared => ../../../../git/shuffle-shared //replace github.com/frikky/kin-openapi => ../../../../git/kin-openapi //replace github.com/frikky/go-elasticsearch => ../../../../git/go-elasticsearch diff --git a/docker-compose.yml b/docker-compose.yml index e221e470..2c432599 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -16,7 +16,7 @@ services: depends_on: - backend backend: - build: ./backend + #build: ./backend image: ghcr.io/frikky/shuffle-backend:nightly container_name: shuffle-backend hostname: ${BACKEND_HOSTNAME} @@ -47,7 +47,6 @@ services: volumes: - /var/run/docker.sock:/var/run/docker.sock environment: - - SHUFFLE_APP_SDK_VERSION=0.8.97 - SHUFFLE_WORKER_VERSION=0.9.25 - ORG_ID=${ORG_ID} - ENVIRONMENT_NAME=${ENVIRONMENT_NAME} @@ -60,9 +59,9 @@ services: - HTTPS_PROXY=${HTTPS_PROXY} - SHUFFLE_PASS_WORKER_PROXY=${SHUFFLE_PASS_WORKER_PROXY} - SHUFFLE_PASS_APP_PROXY=${SHUFFLE_PASS_APP_PROXY} - - SHUFFLE_ORBORUS_EXECUTION_TIMEOUT=600 - - SHUFFLE_ORBORUS_EXECUTION_CONCURRENCY=5 - - CLEANUP=${SHUFFLE_CONTAINER_AUTO_CLEANUP} + - SHUFFLE_SCALE_REPLICAS=5 + - SHUFFLE_SWARM_CONFIG=runn + - SHUFFLE_SWARM_NETWORK_NAME=shuffle-executions restart: unless-stopped opensearch: image: opensearchproject/opensearch:1.1.0 diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 04fa2b37..5599890c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -198,11 +198,11 @@ const App = (message, props) => { }) if (userInfo.eth_info !== undefined && userInfo.eth_info.balance !== undefined) { - console.log(userInfo.eth_info.balance) + //console.log(userInfo.eth_info.balance) userInfo.eth_info.parsed_balance = userInfo.eth_info.balance/1000000000000000000 } - console.log("USER: ", userInfo) + //console.log("USER: ", userInfo) setUserData(userInfo) setIsLoaded(true) diff --git a/frontend/src/defaultCytoscapeStyle.js b/frontend/src/defaultCytoscapeStyle.js index c0c2c163..b0879d2e 100644 --- a/frontend/src/defaultCytoscapeStyle.js +++ b/frontend/src/defaultCytoscapeStyle.js @@ -15,6 +15,7 @@ const data = [{ 'border-width': '1px', 'text-margin-x': '10px', 'cursor': 'pointer', + "z-index": 5001, } }, { @@ -31,6 +32,7 @@ const data = [{ "line-fill": "linear-gradient", "line-gradient-stop-positions": ["0.0", "100"], "line-gradient-stop-colors": ["grey", "grey"], + "z-index": 5001, }, }, { @@ -45,6 +47,23 @@ const data = [{ 'z-index': 5001, }, }, + { + selector: `node[type="COMMENT"]`, + css: { + 'shape': 'roundrectangle', + 'background-color': 'data(backgroundcolor)', + 'border-color': '#ffffff', + 'color': 'data(color)', + 'width': 'data(width)', + 'height': 'data(height)', + 'border-radius': '5px', + "background-opacity": "0.5", + 'padding': '0px', + 'margin': '0px', + 'text-margin-x': '0px', + 'z-index': 4999, + }, + }, { selector: `node[app_name="Shuffle Tools"]`, css: { diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index 45fb355a..0e3c8180 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -39,7 +39,9 @@ import {TextField, Checkbox, Breadcrumbs, CircularProgress, - Switch} from '@material-ui/core'; + Switch, + } from '@material-ui/core'; + import {OpenInNew as OpenInNewIcon, Undo as UndoIcon, GetApp as GetAppIcon, @@ -68,7 +70,9 @@ import {OpenInNew as OpenInNewIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, - VpnKey as VpnKeyIcon} from '@material-ui/icons'; + VpnKey as VpnKeyIcon, + AddComment as AddCommentIcon, +} from '@material-ui/icons'; import * as cytoscape from 'cytoscape'; import * as edgehandles from 'cytoscape-edgehandles'; @@ -246,6 +250,7 @@ const AngularWorkflow = (props) => { }) // Trigger stuff + const [selectedComment, setSelectedComment] = React.useState({}); const [selectedTrigger, setSelectedTrigger] = React.useState({}); const [selectedTriggerIndex, setSelectedTriggerIndex] = React.useState({}); const [selectedEdge, setSelectedEdge] = React.useState({}); @@ -778,6 +783,7 @@ const AngularWorkflow = (props) => { var newTriggers = [] var newBranches = [] var newVBranches = [] + var newComments = [] for (var key in cyelements) { if (cyelements[key].data === undefined) { continue @@ -852,6 +858,19 @@ const AngularWorkflow = (props) => { curworkflowTrigger.position = cyelements[key].position() newTriggers.push(curworkflowTrigger) + } else if (type === "COMMENT") { + if (useworkflow.comments === undefined) { + useworkflow.comments = [] + } + + var curworkflowComment = useworkflow.comments.find(a => a.id === cyelements[key].data()["id"]) + if (curworkflowComment === undefined) { + curworkflowComment = cyelements[key].data() + } + + curworkflowComment.position = cyelements[key].position() + + newComments.push(curworkflowComment) } else { alert.info("No handler for type: "+type) } @@ -861,6 +880,7 @@ const AngularWorkflow = (props) => { useworkflow.actions = newActions useworkflow.triggers = newTriggers useworkflow.branches = newBranches + useworkflow.comments = newComments useworkflow.visual_branches = newVBranches // Errors are backend defined @@ -1639,13 +1659,29 @@ const AngularWorkflow = (props) => { } } } else { - console.log("No appid? ", nodedata) + //console.log("No appid? ", nodedata) } if (nodedata.id === selectedAction.id) { return } + /* + // 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.found) { + console.log("No closest node found for: ", nodedata.id) + } else { + console.log("Closest: ", closestNode) + } + */ + if (originalLocation.x === 0 && originalLocation.y === 0 && nodedata.position !== undefined) { originalLocation.x = nodedata.position.x originalLocation.y = nodedata.position.y @@ -1949,14 +1985,15 @@ const AngularWorkflow = (props) => { setSelectedTriggerIndex(trigger_index) setSelectedTrigger(data) setSelectedActionEnvironment(data.env) + } else if (data.type === "COMMENT") { + setSelectedComment(data) } else { alert.error("Can't handle "+data.type) + return } setRightSideBarOpen(true) setLastSaved(false) - - setScrollConfig({ top: 0, left: 0, @@ -2530,7 +2567,7 @@ const AngularWorkflow = (props) => { break; case 67: console.log(event) - if (event.ctrlKey) { + if (event.ctrlKey && !event.shiftKey) { if (event.path !== undefined && event.path !== null && event.path.length > 0) { if (event.path[0].localName !== "body") { console.log("Skipping because body is not targeted") @@ -2746,7 +2783,7 @@ const AngularWorkflow = (props) => { setEstablished(true) // Validate if the node is just a node lol cy.edgehandles({ - handleNodes: (el) => el.isNode() && !el.data("isButton") && !el.data("isDescriptor"), + handleNodes: (el) => el.isNode() && !el.data("isButton") && !el.data("isDescriptor") && !el.data("type") === "COMMENT", preview: false, toggleOffOnLeave: false, loopAllowed: function( node ){ @@ -2996,11 +3033,14 @@ const AngularWorkflow = (props) => { } - const parsedStyle = { + var parsedStyle = { "border-width": "7px", "border-opacity": ".7", 'font-size': '25px', - 'color': 'white', + } + + if (nodedata.type !== "COMMENT") { + parsedStyle.color = 'white' } event.target.animate({ @@ -3141,8 +3181,22 @@ const AngularWorkflow = (props) => { return node; }) + var comments = [] + if (workflow.comments !== undefined && workflow.comments !== null && workflow.comments.length > 0) { + comments = workflow.comments.map(comment => { + const node = {} + node.position = comment.position + node.data = comment + + node.data._id = comment["id"] + node.data.type = "COMMENT" + + return node; + }) + } + // FIXME - tmp branch update - var insertedNodes = [].concat(actions, triggers, decoratorNodes) + var insertedNodes = [].concat(actions, triggers, decoratorNodes, comments) insertedNodes = insertedNodes.filter(node => node !== null) var edges = workflow.branches.map((branch, index) => { @@ -6029,6 +6083,173 @@ const AngularWorkflow = (props) => { return null } + const CommentSidebar = () => { + if (Object.getOwnPropertyNames(selectedComment).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": "url", "value": referenceUrl+"webhook_"+selectedTrigger.id} + workflow.triggers[selectedTriggerIndex].parameters[1] = {"name": "tmp", "value": "webhook_"+selectedTrigger.id} + workflow.triggers[selectedTriggerIndex].parameters[2] = {"name": "auth_headers", "value": ""} + setWorkflow(workflow) + } else { + // Always update + const newUrl = referenceUrl+"webhook_"+selectedTrigger.id + console.log("Validating webhook url: ", newUrl) + if (newUrl !== workflow.triggers[selectedTriggerIndex].parameters[0].value) { + console.log("Url is wrong - updating") + workflow.triggers[selectedTriggerIndex].parameters[0].value = newUrl + setWorkflow(workflow) + } + } + + const trigger_header_auth = workflow.triggers[selectedTriggerIndex].parameters.length > 2 ? workflow.triggers[selectedTriggerIndex].parameters[2].value : "" + */ + + return( +
+
+
+

Comment

+ What are comments? +
+
+ +
+ Name +
+ { + selectedComment.label = event.target.value + setSelectedComment(selectedComment) + }} + /> +
+
+
+ Height +
+ { + selectedComment.height = event.target.value + setSelectedComment(selectedComment) + }} + /> +
+
+
+ Width +
+ { + selectedComment.width = event.target.value + setSelectedComment(selectedComment) + }} + /> +
+
+
+
+
+ Background +
+ { + selectedComment.backgroundcolor = event.target.value + setSelectedComment(selectedComment) + }} + /> +
+
+
+ Text Color +
+ { + selectedComment.color = event.target.value + setSelectedComment(selectedComment) + }} + /> +
+
+
+ ) + } + + return null + } + const WebhookSidebar = () => { if (Object.getOwnPropertyNames(selectedTrigger).length > 0) { if (workflow.triggers[selectedTriggerIndex] === undefined) { @@ -6959,6 +7180,9 @@ const AngularWorkflow = (props) => { } const BottomCytoscapeBar = () => { + if (workflow.id === undefined || workflow.id === null || apps.length === 0) { + return null + } const boxSize = 100 const executionButton = executionRunning ? @@ -7066,12 +7290,45 @@ const AngularWorkflow = (props) => { + + + + + {workflow.configuration !== null && workflow.configuration !== undefined && workflow.configuration.exit_on_error !== undefined ? : null} ) } + const addCommentNode = () => { + const newId = uuidv4() + const position = { + x: 300, + y: 300, + } + cy.add({ + group: "nodes", + data: { + id: newId, + label: "Your comment :)", + type: "COMMENT", + is_valid: true, + decorator: true, + width: 250, + height: 150, + position: position, + backgroundcolor: "#1f2023", + color: "#ffffff", + }, + position: position, + }) + } + const RightSideBar = (props) => { const {workflow, setWorkflow, setSelectedAction, setUpdate, selectedApp, workflowExecutions, setSelectedResult, selectedAction, setSelectedApp, setSelectedTrigger, @@ -7131,6 +7388,13 @@ const AngularWorkflow = (props) => { ) + } else if (Object.getOwnPropertyNames(selectedComment).length > 0) { + console.log("Returning comment field") + return( +
+ +
+ ) } else if (Object.getOwnPropertyNames(selectedTrigger).length > 0) { if (selectedTrigger.trigger_type === "SCHEDULE") { return( diff --git a/functions/onprem/orborus/build.sh b/functions/onprem/orborus/build.sh index 570cced1..b024e908 100644 --- a/functions/onprem/orborus/build.sh +++ b/functions/onprem/orborus/build.sh @@ -1,5 +1,5 @@ NAME=shuffle-orborus -VERSION=0.9.30 +VERSION=0.9.31 echo "Running docker build with $NAME:$VERSION" #docker rmi frikky/shuffle:$NAME --force diff --git a/functions/onprem/orborus/go.mod b/functions/onprem/orborus/go.mod index 287818a4..e71bb694 100644 --- a/functions/onprem/orborus/go.mod +++ b/functions/onprem/orborus/go.mod @@ -8,5 +8,5 @@ require ( github.com/docker/go-connections v0.4.0 // indirect github.com/mackerelio/go-osstat v0.2.1 github.com/satori/go.uuid v1.2.0 - github.com/shuffle/shuffle-shared v0.1.26 + github.com/shuffle/shuffle-shared v0.1.30 ) diff --git a/functions/onprem/orborus/go.sum b/functions/onprem/orborus/go.sum index 83949986..12a7e7e7 100644 --- a/functions/onprem/orborus/go.sum +++ b/functions/onprem/orborus/go.sum @@ -563,6 +563,8 @@ github.com/satori/go.uuid v1.2.0/go.mod h1:dA0hQrYB0VpLJoorglMZABFdXlWrHn1NEOzdh github.com/seccomp/libseccomp-golang v0.9.1/go.mod h1:GbW5+tmTXfcxTToHLXlScSlAvWlF4P2Ca7zGrPiEpWo= github.com/shuffle/shuffle-shared v0.1.26 h1:NlUlUrA/wNLwo49Id5SKhBlLhuizjy/T2rqCvaxqBuk= github.com/shuffle/shuffle-shared v0.1.26/go.mod h1:0QrK51T12CpCj/be8hXduj/RtDnoeaZ3rfogELZE2IU= +github.com/shuffle/shuffle-shared v0.1.30 h1:YFEVVw6ENl1GxN4hVndSrbLXeIVM9JtcPqoJKDyqYqM= +github.com/shuffle/shuffle-shared v0.1.30/go.mod h1:0QrK51T12CpCj/be8hXduj/RtDnoeaZ3rfogELZE2IU= github.com/shurcooL/sanitized_anchor_name v1.0.0/go.mod h1:1NzhyTcUVG4SuEtjjoZeVRXNmyL/1OwPU0+IJeTBvfc= github.com/sirupsen/logrus v1.0.4-0.20170822132746-89742aefa4b2/go.mod h1:pMByvHTf9Beacp5x1UXfOR9xyW/9antXMhjMPG0dEzc= github.com/sirupsen/logrus v1.0.6/go.mod h1:pMByvHTf9Beacp5x1UXfOR9xyW/9antXMhjMPG0dEzc= diff --git a/functions/onprem/worker/build.sh b/functions/onprem/worker/build.sh index a78c2607..5159b508 100644 --- a/functions/onprem/worker/build.sh +++ b/functions/onprem/worker/build.sh @@ -1,5 +1,5 @@ NAME=shuffle-worker -VERSION=0.9.30 +VERSION=0.9.31 echo "Running docker build with $NAME:$VERSION" #CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o worker.bin . diff --git a/functions/onprem/worker/go.mod b/functions/onprem/worker/go.mod index f7bdf6c6..f37c27a8 100644 --- a/functions/onprem/worker/go.mod +++ b/functions/onprem/worker/go.mod @@ -10,6 +10,6 @@ require ( github.com/docker/go-connections v0.4.0 // indirect github.com/gorilla/mux v1.8.0 github.com/patrickmn/go-cache v2.1.0+incompatible - github.com/shuffle/shuffle-shared v0.1.27 + github.com/shuffle/shuffle-shared v0.1.30 go4.org v0.0.0-20201209231011-d4a079459e60 // indirect )