From 324ee36fe31763e507b422ab0a88e4230045e205 Mon Sep 17 00:00:00 2001 From: "Timoney, Daniel (dt5972)" Date: Wed, 15 Feb 2017 10:37:53 -0500 Subject: Initial commit for OpenECOMP SDN-C OA&M Change-Id: I7ab579fd0d206bf356f36d52dcdf4f71f1fa2680 Signed-off-by: Timoney, Daniel (dt5972) Former-commit-id: 2a9f0edd09581f907e62ec4689b5ac94dd5382ba --- dgbuilder/public/red/comms.js | 93 ++ dgbuilder/public/red/history.js | 99 ++ dgbuilder/public/red/main.js | 1615 +++++++++++++++++++++ dgbuilder/public/red/main.js.orig | 323 +++++ dgbuilder/public/red/nodes.js | 553 ++++++++ dgbuilder/public/red/ui/editor.js | 665 +++++++++ dgbuilder/public/red/ui/keyboard.js | 68 + dgbuilder/public/red/ui/library.js | 370 +++++ dgbuilder/public/red/ui/menu.js | 122 ++ dgbuilder/public/red/ui/notifications.js | 59 + dgbuilder/public/red/ui/palette.js | 230 +++ dgbuilder/public/red/ui/sidebar.js | 154 ++ dgbuilder/public/red/ui/state.js | 26 + dgbuilder/public/red/ui/tab-config.js | 84 ++ dgbuilder/public/red/ui/tab-info.js | 90 ++ dgbuilder/public/red/ui/tabs.js | 127 ++ dgbuilder/public/red/ui/touch/radialMenu.js | 184 +++ dgbuilder/public/red/ui/view.js | 2053 +++++++++++++++++++++++++++ dgbuilder/public/red/ui/view.js.orig | 1639 +++++++++++++++++++++ dgbuilder/public/red/validators.js | 19 + 20 files changed, 8573 insertions(+) create mode 100644 dgbuilder/public/red/comms.js create mode 100644 dgbuilder/public/red/history.js create mode 100644 dgbuilder/public/red/main.js create mode 100644 dgbuilder/public/red/main.js.orig create mode 100644 dgbuilder/public/red/nodes.js create mode 100644 dgbuilder/public/red/ui/editor.js create mode 100644 dgbuilder/public/red/ui/keyboard.js create mode 100644 dgbuilder/public/red/ui/library.js create mode 100644 dgbuilder/public/red/ui/menu.js create mode 100644 dgbuilder/public/red/ui/notifications.js create mode 100644 dgbuilder/public/red/ui/palette.js create mode 100644 dgbuilder/public/red/ui/sidebar.js create mode 100644 dgbuilder/public/red/ui/state.js create mode 100644 dgbuilder/public/red/ui/tab-config.js create mode 100644 dgbuilder/public/red/ui/tab-info.js create mode 100644 dgbuilder/public/red/ui/tabs.js create mode 100644 dgbuilder/public/red/ui/touch/radialMenu.js create mode 100644 dgbuilder/public/red/ui/view.js create mode 100644 dgbuilder/public/red/ui/view.js.orig create mode 100644 dgbuilder/public/red/validators.js (limited to 'dgbuilder/public/red') diff --git a/dgbuilder/public/red/comms.js b/dgbuilder/public/red/comms.js new file mode 100644 index 00000000..64912476 --- /dev/null +++ b/dgbuilder/public/red/comms.js @@ -0,0 +1,93 @@ +/** + * Copyright 2014 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + +RED.comms = (function() { + + var errornotification = null; + var subscriptions = {}; + var ws; + function connectWS() { + var path = location.hostname+":"+location.port+document.location.pathname; + path = path+(path.slice(-1) == "/"?"":"/")+"comms"; + path = "ws"+(document.location.protocol=="https:"?"s":"")+"://"+path; + ws = new WebSocket(path); + ws.onopen = function() { + if (errornotification) { + errornotification.close(); + errornotification = null; + } + for (var t in subscriptions) { + if (subscriptions.hasOwnProperty(t)) { + ws.send(JSON.stringify({subscribe:t})); + } + } + } + ws.onmessage = function(event) { + var msg = JSON.parse(event.data); + if (msg.topic) { + for (var t in subscriptions) { + if (subscriptions.hasOwnProperty(t)) { + var re = new RegExp("^"+t.replace(/([\[\]\?\(\)\\\\$\^\*\.|])/g,"\\$1").replace(/\+/g,"[^/]+").replace(/\/#$/,"(\/.*)?")+"$"); + if (re.test(msg.topic)) { + var subscribers = subscriptions[t]; + if (subscribers) { + for (var i=0;iError: Lost connection to server","error",true); + } + setTimeout(connectWS,1000); + } + } + + function subscribe(topic,callback) { + if (subscriptions[topic] == null) { + subscriptions[topic] = []; + } + subscriptions[topic].push(callback); + if (ws && ws.readyState == 1) { + ws.send(JSON.stringify({subscribe:topic})); + } + } + + function unsubscribe(topic,callback) { + if (subscriptions.topic) { + for (var i=0;i 0) { + $( "#node-dialog-confirm-deploy-config" ).hide(); + $( "#node-dialog-confirm-deploy-unknown" ).show(); + var list = "
  • "+unknownNodes.join("
  • ")+"
    • "; + $( "#node-dialog-confirm-deploy-unknown-list" ).html(list); + } else { + $( "#node-dialog-confirm-deploy-config" ).show(); + $( "#node-dialog-confirm-deploy-unknown" ).hide(); + } + $( "#node-dialog-confirm-deploy" ).dialog( "open" ); + return; + } + } + var nns = RED.nodes.createCompleteNodeSet(); + /****************************************/ + /*added new code to save the Tabs order */ + /****************************************/ + //console.log("nns before changes."); + //console.dir(nns); + var allTabsObj={}; + var allTabsList=[]; + var nnsTabIdsArr = []; + var guiTabIdsArr = []; + nns.forEach(function(n) { + if(n.type == 'tab'){ + allTabsObj[n.id] = n; + allTabsList.push(n); + nnsTabIdsArr.push(n.id); + } + }); + var idx =0; + $("#workspace-tabs li a").each(function(){ + var href = $(this).prop("href"); + var indexOfHash = href.indexOf("#"); + var idVal = href.slice(indexOfHash+1); + guiTabIdsArr.push(idVal); + nns.splice(idx,1,allTabsObj[idVal]);; + idx++; + }); + //console.log(nnsTabIdsArr.join(",")); + //console.log(guiTabIdsArr.join(",")); + //console.log("nns after changes."); + //console.dir(nns); + /****************************/ + $("#btn-icn-deploy").removeClass('fa-download'); + $("#btn-icn-deploy").addClass('spinner'); + RED.view.dirty(false); + + $.ajax({ + url:"flows", + type: "POST", + data: JSON.stringify(nns), + contentType: "application/json; charset=utf-8" + }).done(function(data,textStatus,xhr) { + RED.notify("Successfully saved","success"); + RED.nodes.eachNode(function(node) { + if (node.changed) { + node.dirty = true; + node.changed = false; + } + if(node.credentials) { + delete node.credentials; + } + }); + RED.nodes.eachConfig(function (confNode) { + if (confNode.credentials) { + delete confNode.credentials; + } + }); + // Once deployed, cannot undo back to a clean state + RED.history.markAllDirty(); + RED.view.redraw(); + }).fail(function(xhr,textStatus,err) { + RED.view.dirty(true); + if (xhr.responseText) { + RED.notify("Error: "+xhr.responseText,"error"); + } else { + RED.notify("Error: no response from server","error"); + } + }).always(function() { + $("#btn-icn-deploy").removeClass('spinner'); + $("#btn-icn-deploy").addClass('fa-download'); + }); + } + } + + $('#btn-deploy').click(function() { save(); }); + + $( "#node-dialog-confirm-deploy" ).dialog({ + title: "Confirm deploy", + modal: true, + autoOpen: false, + width: 530, + height: 230, + buttons: [ + { + text: "Confirm deploy", + click: function() { + save(true); + $( this ).dialog( "close" ); + } + }, + { + text: "Cancel", + click: function() { + $( this ).dialog( "close" ); + } + } + ] + }); + + function loadSettings() { + $.get('settings', function(data) { + RED.settings = data; + console.log("Node-RED: "+data.version); + loadNodeList(); + }); + } + + function loadNodeList() { + $.ajax({ + headers: { + "Accept":"application/json" + }, + cache: false, + url: 'nodes', + success: function(data) { + RED.nodes.setNodeList(data); + loadNodes(); + } + }); + } + + function loadNodes() { + $.ajax({ + headers: { + "Accept":"text/html" + }, + cache: false, + url: 'nodes', + success: function(data) { + $("body").append(data); + $(".palette-spinner").hide(); + $(".palette-scroll").show(); + $("#palette-search").show(); + loadFlows(); + } + }); + } + + function loadFlows() { + $.ajax({ + headers: { + "Accept":"application/json" + }, + cache: false, + url: 'flows', + success: function(nodes) { + RED.nodes.import(nodes); + RED.view.dirty(false); + RED.view.redraw(); + RED.comms.subscribe("status/#",function(topic,msg) { + var parts = topic.split("/"); + var node = RED.nodes.node(parts[1]); + if (node) { + node.status = msg; + if (statusEnabled) { + node.dirty = true; + RED.view.redraw(); + } + } + }); + RED.comms.subscribe("node/#",function(topic,msg) { + var i,m; + var typeList; + var info; + + if (topic == "node/added") { + var addedTypes = []; + for (i=0;i
  • ")+"
    • "; + RED.notify("Node"+(addedTypes.length!=1 ? "s":"")+" added to palette:"+typeList,"success"); + } + } else if (topic == "node/removed") { + for (i=0;i
  • ")+"
    • "; + RED.notify("Node"+(m.types.length!=1 ? "s":"")+" removed from palette:"+typeList,"success"); + } + } + } else if (topic == "node/enabled") { + if (msg.types) { + info = RED.nodes.getNodeSet(msg.id); + if (info.added) { + RED.nodes.enableNodeSet(msg.id); + typeList = "
    • "+msg.types.join("
    • ")+"
    "; + RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" enabled:"+typeList,"success"); + } else { + $.get('nodes/'+msg.id, function(data) { + $("body").append(data); + typeList = "
    • "+msg.types.join("
    • ")+"
    "; + RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" added to palette:"+typeList,"success"); + }); + } + } + } else if (topic == "node/disabled") { + if (msg.types) { + RED.nodes.disableNodeSet(msg.id); + typeList = "
    • "+msg.types.join("
    • ")+"
    "; + RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" disabled:"+typeList,"success"); + } + } + }); + } + }); + } + + var statusEnabled = false; + function toggleStatus(state) { + statusEnabled = state; + RED.view.status(statusEnabled); + } + + function performLoopDetection(state) { + loopDetectionEnabled = state; + console.log("loopDetectionEnabled:" + loopDetectionEnabled); + } + + var dgNumberEnabled = false; + function toggleDgNumberDisplay(state) { + dgNumberEnabled = state; + RED.view.showNumbers(dgNumberEnabled); + } + + var nodePaletteDisplay = false; + function toggleNodePaletteDisplay(state) { + nodePaletteDisplay = state; + RED.view.showNodePalette(nodePaletteDisplay); + } + function displayAllDGs(state) { + //defined showSLa() in dgstart.html + showSLA(); + } + + + function showHelp() { + + var dialog = $('#node-help'); + + //$("#node-help").draggable({ + // handle: ".modal-header" + //}); + + dialog.on('show',function() { + RED.keyboard.disable(); + }); + dialog.on('hidden',function() { + RED.keyboard.enable(); + }); + + dialog.modal(); + } + + +//Custom Functions Added here + function showCodeCloudFlows(){ + codeCloudFlowFiles=[]; + var divStyle=""; + $.get( "/getCodeCloudFlows") + .done(function( data ) { + + var header="
    List of DG Flows in Code Cloud
    "; + var html= divStyle + header + "
    "; + html+="
      "; + if(data != null){ + var files=data.files; + codeCloudFlowFiles=files; + //console.dir(files); + files.sort(function (a,b){ + if(a > b){ + return 1; + }else if(a < b){ + return -1; + }else{ + return 0; + } + }); + for(var i=0;files != null && i" + files[i] + ""; + } + } + html+="
    "; + html+="
    "; + $( "#codecloud-browser-dialog" ).dialog({ + title: "Code Cloud DG Flow Browser", + modal: true, + autoOpen: true, + width: 830, + height: 630, + buttons: [ + { + text: "Close", + click: function() { + $( this ).dialog( "close" ); + } + } + ], + close: function(ev,ui){ + $(this).dialog("destroy"); + } + }).html(html); + $("#codecloud-browser-dialog").show(); + }) + .fail(function(err) { + RED.notify("Failed to get users."); + }) + .always(function() { + }); + } + + /* + function listYangFiles(){ + yangFilesList=[]; + var divStyle=""; + $.get( "/getYangFiles") + .done(function( data ) { + + var header="
    List of Yang Files
    "; + var html= divStyle + header + "
    "; + html+="
      "; + if(data != null){ + var files=data.files; + yangFilesList=files; + //console.dir(files); + files.sort(function (a,b){ + if(a > b){ + return 1; + }else if(a < b){ + return -1; + }else{ + return 0; + } + }); + for(var i=0;files != null && i" + files[i] + ""; + } + } + html+="
    "; + html+="
    "; + $( "#list-yang-browser-dialog" ).dialog({ + title: "List Yang Files", + modal: true, + autoOpen: true, + width: 830, + height: 630, + buttons: [ + { + text: "Close", + click: function() { + $( this ).dialog( "close" ); + } + } + ], + close: function(ev,ui){ + $(this).dialog("destroy"); + } + }).html(html); + $("#list-yang-browser-dialog").show(); + }) + .fail(function(err) { + RED.notify("Failed to get yang files."); + }) + .always(function() { + }); + } + */ + + function listYangFiles(){ + yangFilesList=[]; + + var divStyle=""; + $.get( "/getYangFiles") + .done(function( data ) { + + var header="
    List of Yang Files
    "; + var html= divStyle + header + "
    "; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + if(data != null){ + var files=data.files; + yangFilesList=files; + //console.dir(files); + files.sort(function (a,b){ + if(a > b){ + return 1; + }else if(a < b){ + return -1; + }else{ + return 0; + } + }); + for(var i=0;files != null && i" + files[i] + ""; + } + } + html+="
    FileDelete
    " + "
    "; + html+="
    "; + $( "#list-yang-browser-dialog" ).dialog({ + title: "List Yang Files", + modal: true, + autoOpen: true, + width: 830, + height: 630, + buttons: [ + { + text: "Close", + click: function() { + $( this ).dialog( "close" ); + } + } + ], + close: function(ev,ui){ + $(this).dialog("destroy"); + } + }).html(html); + $("#list-yang-browser-dialog").show(); + }) + .fail(function(err) { + RED.notify("Failed to get yang files."); + }) + .always(function() { + }); + } + + + function showGitPullDialog(){ + $.get( "/getCurrentGitBranch") + .done(function( data ) { + if(data != null){ + if(data.output == "GIT_LOCAL_REPOSITORY_NOT_SET" ){ + RED.notify("Git Local Repository path is not set. Please set it by choosing Configuration from the menu."); + return; + } + + var html= "
    "; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+="" + html+=""; + html+=""; + //html+=""; + html+=""; + html+="
    Branch" + data.output + "
      
    "; + html+="
    "; + html+="
    "; + $( "#gitcommands-dialog" ).dialog({ + title: "Git Pull", + modal: true, + autoOpen: true, + width: 630, + height: 500, + buttons: [ + { + text: "Close", + click: function() { + $( this ).dialog( "close" ); + } + } + ], + close: function(ev,ui){ + $(this).dialog("destroy"); + } + }).html(html); + $("#responseId").css({width:'550',height:'275px', border: '2px solid lightgrey',overflow:'scroll', padding: '20px' }); + $("#responseId").hide(); + $("#gitcommands-dialog").show(); + } + }) + .fail(function(err) { + RED.notify("Failed to get gitBranch."); + }) + .always(function() { + }); + } + + function showGitStatusDialog(){ + $.get( "/getCurrentGitBranch") + .done(function( data ) { + if(data != null){ + if(data.output == "GIT_LOCAL_REPOSITORY_NOT_SET" ){ + RED.notify("Git Local Repository path is not set. Please set it by choosing Configuration from the menu."); + return; + } + + var html= "
    "; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+="" + html+=""; + html+=""; + //html+=""; + html+=""; + html+="
    Branch" + data.output + "
      
    "; + html+="
    "; + html+="
    "; + $( "#gitcommands-dialog" ).dialog({ + title: "Git Status", + modal: true, + autoOpen: true, + width: 630, + height: 500, + buttons: [ + { + text: "Close", + click: function() { + $( this ).dialog( "close" ); + } + } + ], + close: function(ev,ui){ + $(this).dialog("destroy"); + } + }).html(html); + //$("#responseId").css({width:'600px',height:'100px','border-radius' : '25px', border: '2px solid lightgrey', padding: '20px' }); + $("#responseId").css({width:'550px',height:'100px', border: '2px solid lightgrey',overflow:'scroll', padding: '20px' }); + $("#responseId").hide(); + $("#gitcommands-dialog").show(); + } + }) + .fail(function(err) { + RED.notify("Failed to get gitBranch."); + }) + .always(function() { + }); + } + + function showGitCheckoutDialog(){ + $.get( "/getCurrentGitBranch") + .done(function( data ) { + if(data != null){ + if(data.output == "GIT_LOCAL_REPOSITORY_NOT_SET" ){ + RED.notify("Git Local Repository path is not set. Please set it by choosing Configuration from the menu."); + return; + } + + var html= "
    "; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+="" + html+=""; + html+=""; + //html+=""; + html+=""; + html+="
    Branch
      
    "; + html+="
    "; + html+="
    "; + $( "#gitcommands-dialog" ).dialog({ + title: "Git Checkout", + modal: true, + autoOpen: true, + width: 430, + height: 350, + buttons: [ + { + text: "Close", + click: function() { + $( this ).dialog( "close" ); + } + } + ], + close: function(ev,ui){ + $(this).dialog("destroy"); + } + }).html(html); + $("#responseId").css({width:'300',height:'100px', border: '2px solid lightgrey',overflow:'scroll', padding: '20px' }); + $("#responseId").hide(); + $("#gitcommands-dialog").show(); + } + }) + .fail(function(err) { + RED.notify("Failed to get gitBranch."); + }) + .always(function() { + }); + } + + function showGitLocalFlows(){ + giLocalFlowFiles=[]; + var divStyle=""; + $.get( "/getGitLocalFlows") + .done(function( data ) { + if(data != null && data.files != null && data.files.length == 1){ + if(data.files[0] == "GIT_LOCAL_REPOSITORY_NOT_SET" ){ + RED.notify("Git Local Repository path is not set. Please set it by choosing Configuration from the menu."); + return; + } + } + //console.log("got response from server."); + + var header="
    List of DG Flows from Git Local Repository
    "; + var html= divStyle + header + "
    "; + html+="
      "; + if(data != null){ + var files=data.files; + gitLocalFlowFiles=files; + //console.dir(files); + files.sort(function (a,b){ + if(a > b){ + return 1; + }else if(a < b){ + return -1; + }else{ + return 0; + } + }); + for(var i=0;files != null && i" + files[i] + ""; + } + } + html+="
    "; + html+="
    "; + $( "#gitlocal-browser-dialog" ).dialog({ + title: "Git Local Repository DG Flow Browser", + modal: true, + autoOpen: true, + width: 830, + height: 630, + buttons: [ + { + text: "Close", + click: function() { + $(this).dialog("close"); + } + } + ] + }).html(html); + $("#gitlocal-browser-dialog").show(); + /* + if ($("#gitlocal-browser-dialog").dialog( "isOpen" )===true) { + console.log("gitlocal dialog box is open"); + //true + } else { + console.log("gitlocal dialog box is not open"); + // $( "#gitlocal-browser-dialog" ).dialog("destroy").remove(); + console.log($("#gitlocal-browser-dialog").dialog( "widget" )); + $("#gitlocal-browser-dialog").dialog( "open" ); + if ($("#gitlocal-browser-dialog").dialog( "isOpen" )===true) { + console.log("gitlocal dialog box is now open"); + } + $("#gitlocal-browser-dialog").show(); + //false + } + */ + }) + .fail(function(err) { + RED.notify("Failed to get flows."); + }) + .always(function() { + console.log("Done displaying"); + }); + } + + function showFlowShareUsers(){ + var divStyle=""; + $.get("/flowShareUsers") + .done(function (data){ + + var header="
    List of Downloaded DG Flows
    "; + var html= divStyle + header + "
    "; + html+="
      "; + if(data != null){ + var users=data.flowShareUsers; + users.sort(function (a,b){ + if(a.name > b.name){ + return 1; + }else if(a.name < b.name){ + return -1; + }else{ + return 0; + } + }); + for(var i=0;users != null && i" + users[i].name + ""; + } + } + html+="
    "; + html+="
    "; + $( "#dgflow-browser-dialog" ).dialog({ + title: "Downloaded DG Flows Browser", + modal: true, + autoOpen: true, + width: 530, + height: 530, + buttons: [ + { + text: "Close", + click: function() { + $( this ).dialog( "close" ); + //$(this).dialog('destroy').remove(); + } + } + ] + }).html(html); + $("#dgflow-browser-dialog").show(); + /* + if ($("#dgflow-browser-dialog").dialog( "isOpen" )===true) { + console.log("dgflow dialog box is open"); + //true + } else { + console.log("dgflow dialog box is not open"); + $("#dgflow-browser-dialog").dialog( "open" ); + $("#dgflow-browser-dialog").show(); + //false + } + */ + }) + .fail(function(err) { + RED.notify("Failed to get users."); + }) + .always(function() { + }); + } + +/* function showFlowShareUsers(){ + var divStyle=""; + $.get( "/flowShareUsers") + .done(function( data ) { + + var header="
    List of Downloaded DG Flows
    "; + var html= divStyle + header + "
    "; + html+="
      "; + if(data != null){ + var users=data.flowShareUsers; + users.sort(function (a,b){ + if(a.name > b.name){ + return 1; + }else if(a.name < b.name){ + return -1; + }else{ + return 0; + } + }); + for(var i=0;users != null && i" + users[i].name + ""; + } + } + html+="
    "; + html+="
    "; + $( "#dgflow-browser-dialog" ).dialog({ + title: "Downloaded DG Flows Browser", + modal: true, + autoOpen: true, + width: 530, + height: 530, + buttons: [ + { + text: "Close", + click: function() { + //$( this ).dialog( "close" ); + $(this).dialog('destroy').remove(); + } + } + ] + }).html(html); + //$("#dgflow-browser-dialog").show(); + $( "#dgflow-browser-dialog" ).dialog( "open" ); + }) + .fail(function(err) { + RED.notify("Failed to get users."); + }) + .always(function() { + }); + } + */ + + +function detectLoopInFlow(){ + var errList = []; + var activeWorkspace=RED.view.getWorkspace(); + var nSet=[]; + + RED.nodes.eachNode(function(n) { + if (n.z == activeWorkspace) { + nSet.push({n:n}); + } + }); + + var nodeSet = RED.nodes.createExportableNodeSet(nSet); + + var isLoopDetected = false; + var dgStartNode = getDgStartNode(nodeSet); + if(dgStartNode == null || dgStartNode == undefined) { + console.log("dgstart node not linked."); + return null; + } + + var wires = dgStartNode.wires; + var nodesInPath = {}; + var dgStartNodeId = dgStartNode.id; + if(wires != null && wires != undefined && wires[0] != undefined){ + for(var k=0;k" + val] = ""; + } + }else{ + nodesInPath[dgStartNodeId + "->" + ""] = ""; + } + + var loopDetectedObj = {}; + /* the nodes will not be in order so will need to loop thru again */ + for(var m=0;nodeSet != null && m" + link); + var lastIndex = keys[j].lastIndexOf("->"); + if(index != -1 && index == lastIndex){ + //delete nodesInPath[key]; + var previousNodeId = keys[j].substr(lastIndex +2); + var indexOfArrow = -1; + if(previousNodeId != ""){ + indexOfArrow = previousNodeId.indexOf("->"); + } + if(previousNodeId != null && indexOfArrow != -1){ + previousNodeId = previousNodeId.substr(0,indexOfArrow); + } + nodesInPath[keys[j] + "->" + val] = ""; + //console.log("keys[j]:" + keys[j]); + delKeys.push(keys[j]); + var prevNodeIdIndex = keys[j].indexOf("->" + previousNodeId); + var priorOccurence = keys[j].indexOf(val + "->"); + if(priorOccurence != -1 && priorOccurence" + n2.name] ="looped"; + console.dir(loopDetectedObj); + errList.push("Loop detected between " + n1.name + " and " + n2.name); + isLoopDetected = true; + } + } + } + } + } + for(var l=0;delKeys != null && l
    "; + } + } + if(msg != ""){ + isLoopDetected = true; + //RED.notify(msg); + } + } + */ + //images/page-loading.gif + return errList; +} + +function showLoopDetectionBox(){ + $(function() { + var htmlStr="

    Loop detection in Progress ...

    " + $("#loop-detection-dialog").dialog({ + modal:true, + autoOpen :true, + title: "DG Flow Loop Detection", + width: 400, + height: 250, + minWidth : 400, + minHeight :200, + }).html(htmlStr); + if($("#loop-detection-dialog").dialog("isOpen") == true){ + var errList = detectLoopInFlow(); + var errList=[]; + if(errList == null){ + $("#loop-detection-dialog").dialog("close"); + } + var msgHtml = ""; + for(var i=0;errList != null && i"; + } + if(msgHtml == ""){ + $("loop-box-div").html("

    SUCCESS. No Loop detected.

    "); + }else{ + $("loop-box-div").html(msgHtml); + } + } + }); + +} + +function showSelectedTabs(){ + var tabSheets = []; + var beforeTabsOrder=[]; + $(".red-ui-tabs li a").each(function(i){ + var id=$(this).attr("href").replace('#',''); + var title=$(this).attr("title"); + var isVisible = $(this).parent().is(":visible"); + if(title != 'info'){ + tabSheets.push({"id" : id ,"title":title,"module":"NOT_SET","version" : "NOT_SET","rpc":"NOT_SET","isVisible":isVisible}); + beforeTabsOrder.push(id); + } + }); + + RED.nodes.eachNode(function(n) { + if(n.type == 'service-logic'){ + var id = n.z; + var module = n.module; + tabSheets.forEach(function(tab){ + if(tab.id == id){ + tab.module=module; + tab.version=n.version; + } + }); + }else if(n.type == 'method'){ + var id = n.z; + tabSheets.forEach(function(tab){ + if(tab.id == id){ + var rpc=getAttributeValue(n.xml,"rpc"); + tab.rpc=rpc; + } + }); + } + }); + //console.dir(tabSheets); + var htmlStr = getHtmlStr(tabSheets); + $("#filter-tabs-dialog").dialog({ + modal:true, + title: "DG Builder Tabs", + width: 1200, + height: 750, + minWidth : 600, + minHeight :450, + }).html(htmlStr); +/* This code allows for the drag-drop of the rows in the table */ + var fixHelperModified = function(e, tr) { + var $originals = tr.children(); + var $helper = tr.clone(); + $helper.children().each(function(index) { + $(this).width($originals.eq(index).width()) + }); + return $helper; + }, + updateIndex = function(e, ui) { + var afterTabsOrder=[]; + $('td.index', ui.item.parent()).each(function (i) { + $(this).html(i + 1); + }); + //RE-ARRANGE the tabs + var ul = $("#workspace-tabs"); + $("#ftab02 tr td:nth-child(1)").each(function(i){ + var idStr = $(this).prop("id").replace("tab-td_",""); + afterTabsOrder.push(idStr); + link = ul.find("a[href='#"+ idStr+"']"); + li = link.parent(); + //li.remove(); + firstTab = $("#workspace-tabs li:first-child"); + lastTab = $("#workspace-tabs li:last-child"); + li.insertAfter(lastTab); + //console.log( idStr); + }); + var beforeTabsStr = beforeTabsOrder.join(","); + var afterTabsStr = afterTabsOrder.join(","); + //console.log("beforeTabsStr:" +beforeTabsStr); + //console.log("afterTabsStr:" +afterTabsStr); + if(beforeTabsStr !== afterTabsStr){ + //activate only when order has changed + //activate the deploy button + RED.view.dirty(true); + $("#btn-deploy").removeClass("disabled"); + } + }; + + $("#ftab02 tbody").sortable({ + helper: fixHelperModified, + stop: updateIndex + }).disableSelection(); + +} + +function getHtmlStr(rows){ + var styleStr = ""; + if(rows != null && rows != undefined){ + //var alertDialog = '
    '; + //htmlStr= alertDialog + "
    " + styleStr; + var alertDialog = '
    '; + htmlStr= alertDialog + "
    " + styleStr; + htmlStr += ""; + htmlStr += ""; + htmlStr += "" ; + htmlStr += "" ; + htmlStr += "" ; + htmlStr += "" ; + htmlStr += "" ; + htmlStr += "" ; + htmlStr += "" ; + htmlStr += ""; + htmlStr += ""; + if(rows != null && rows.length == 0){ + htmlStr += ""; + htmlStr += ""; + htmlStr += "
    No.Tab TitleModuleRPCVersionRenameDelete
    No rows found
    "; + return htmlStr; + } + for(var i=0;i"; + //htmlStr += "" + (i+1) + ""; + htmlStr += "" + (i+1) + ""; + htmlStr += "" + title + ""; + htmlStr += "" + _module + ""; + htmlStr += "" + rpc + ""; + htmlStr += "" + version + ""; + //htmlStr += "Delete/Rename"; + htmlStr += ""; + if(rows.length == 1){ + htmlStr += ""; + }else{ + htmlStr += ""; + } + /* + if(isVisible){ + htmlStr += ""; + }else{ + htmlStr += ""; + } + */ + htmlStr += ""; + } + htmlStr += ""; + htmlStr += ""; + htmlStr += "
    "; + } + return htmlStr; +} +/* +Added this logic because , when the configuration item is choosen in the menu the other dialog boxes were not poping up +*/ +(function(){ + //var msecs1= Date.now(); + $( "#gitlocal-browser-dialog" ).dialog(); + $( "#gitlocal-browser-dialog" ).dialog("close"); + $( "#dgflow-browser-dialog" ).dialog(); + $( "#dgflow-browser-dialog" ).dialog("close"); + $( "#update-password-dialog" ).dialog(); + $( "#update-password-dialog" ).dialog("close"); + $( "#codecloud-browser-dialog" ).dialog(); + $( "#codecloud-browser-dialog" ).dialog("close"); + $( "#update-configuration-dialog" ).dialog(); + $( "#update-configuration-dialog" ).dialog("close"); + $( "#gitcommands-dialog" ).dialog(); + $( "#gitcommands-dialog" ).dialog("close"); + $("#filter-tabs-dialog").dialog(); + $("#filter-tabs-dialog").dialog("close"); + $("#loop-detection-dialog").dialog(); + $("#loop-detection-dialog").dialog("close"); + $("#dgstart-generate-xml-dialog").dialog(); + $("#dgstart-generate-xml-dialog").dialog("close"); + $("#xmldialog").dialog(); + $("#xmldialog").dialog("close"); + $("#upload-xml-status-dialog").dialog(); + $("#upload-xml-status-dialog").dialog("close"); + $("#flow-design-err-dialog").dialog(); + $("#flow-design-err-dialog").dialog("close"); + $("#sli-values-dialog").dialog(); + $("#sli-values-dialog").dialog("close"); + $("#comments-dialog").dialog(); + $("#comments-dialog").dialog("close"); + $("#show-errors-dialog").dialog(); + $("#show-errors-dialog").dialog("close"); + $("#dgnumber-find-dialog").dialog(); + $("#dgnumber-find-dialog").dialog("close"); + $("#search-text-dialog").dialog(); + $("#search-text-dialog").dialog("close"); + $("#yang-upload-dialog").dialog(); + $("#yang-upload-dialog").dialog("close"); + $("#yang-modules-browser-dialog").dialog(); + $("#yang-modules-browser-dialog").dialog("close"); + $("#list-yang-browser-dialog").dialog(); + $("#list-yang-browser-dialog").dialog("close"); + $("#request-input-dialog").dialog(); + $("#request-input-dialog").dialog("close"); + //var msecs2= Date.now(); + //console.log("Time taken for dialog boxes:" + (msecs2 - msecs1)); +})(); + + function updateConfiguration(){ + //console.log("in updateConfiguration"); + $.get("/getCurrentSettings",function (data){ + var dbHost = data.dbHost; + var dbPort = data.dbPort; + var dbName = data.dbName; + var dbUser = data.dbUser; + var dbPassword = data.dbPassword; + var gitLocalRepository = data.gitLocalRepository; + var performGitPull = data.performGitPull; + + if(dbHost == undefined) dbHost=""; + if(dbPort == undefined) dbPort=""; + if(dbName == undefined) dbName=""; + if(dbUser == undefined) dbUser=""; + if(dbPassword == undefined) dbPassword=""; + if(gitLocalRepository == undefined) gitLocalRepository=""; + if(performGitPull == undefined || performGitPull == null) performGitPull="N"; + + var divStyle="border: 1px solid #a1a1a1; padding: 10px 40px; background: #dddddd; width: 500px; border-radius: 25px;"; + //var divStyle="border: 2px solid #a1a1a1; padding: 10px 40px; background: #99CCFF; width: 400px; border-radius: 25px;"; + + + var html = "
    "; + html += ""; + html += "
    "; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += "
    DB Host IP
    DB Port
    DB Name
    DB UserNameHide
    DB PasswordHide
    "; + html += "
    "; + html += "

    "; + + html += "
    "; + html += ""; + html += ""; + html += ""; + html += ""; + html += ""; + html += "
    Git Local Repository Path
    "; + html += ""; + html += ""; + if(performGitPull == "N"){ + html += ""; + }else{ + html += ""; + } + html += ""; + html += "
    Perform Git Pull in Local Git Repository prior to importPerform Git Pull in Local Git Repository prior to import
    "; + html += "
    "; + html += "
    "; + //console.log("html:" + html); + $( "#update-configuration-dialog" ).dialog({ + title: "Configuration", + modal: true, + autoOpen: true, + width: 630, + height: 630, + buttons: [ + { + text: "Save", + click: function() { + var newDBHost = $("#dbhost").val().trim(); + var newDBPort = $("#dbport").val().trim(); + var newDBName = $("#dbname").val().trim(); + var newDBUser = $("#dbuser").val().trim(); + var newDBPassword = $("#dbpassword").val().trim(); + var newGitLocalRepository = $("#gitLocalRepository").val().trim(); + var isPerformGitPullChecked = $('#performGitPull').is(':checked'); + var newPerformGitPull = "N"; + if(isPerformGitPullChecked){ + newPerformGitPull = "Y"; + } + if(newDBHost == ""){ + RED.notify("Error: DB Host is required."); + $("#dbhost").focus(); + return; + }else if(newDBPort == ""){ + RED.notify("Error: DB Port is required."); + $("#dbport").focus(); + return; + }else if(newDBName == ""){ + RED.notify("Error: DB Name is required."); + $("#dbname").focus(); + return; + }else if(newDBUser == ""){ + RED.notify("Error: DB User is required."); + $("#dbuser").focus(); + return; + }else if(newDBPassword == ""){ + RED.notify("Error: DB Password is required."); + $("#dbpassword").focus(); + return; + }else{ + console.log("newGitLocalRepository:" + newGitLocalRepository); + var reqData= {"dbHost":newDBHost, + "dbPort" : newDBPort, + "dbName" : newDBName, + "dbUser" : newDBUser, + "dbPassword" : newDBPassword, + "gitLocalRepository" : newGitLocalRepository, + "performGitPull" : newPerformGitPull + }; + $.post( "/updateConfiguration",reqData ) + .done(function( data ) { + RED.notify("Configuration updated successfully"); + //loadSettings(); + //RED.comms.connect(); + //$( "#update-configuration-dialog" ).dialog('close'); + $("#update-configuration-dialog").dialog("close"); + //location.reload(); + + }) + .fail(function(err) { + console.log( "error" + err ); + RED.notify("Failed to update the Configuration."); + }) + .always(function() { + }); + } + } + }, + { + text: "Cancel", + click: function() { + $( this ).dialog( "close" ); + } + } + ] + }).html(html); + //$("#update-configuration-dialog").show(); + $("#gitLocalRepository").css({"width" : 300}); + + }); + } + + function updatePassword(){ + var html="
    "; + html += "
    New Password
    "; + html += ""; + html += "
    "; + html += "
    Confirm Password
    "; + html += ""; + html += "
    "; + $( "#update-password-dialog" ).dialog({ + title: "Update Password", + modal: true, + autoOpen: true, + width: 530, + height: 230, + buttons: [ + { + text: "Update Password", + click: function() { + var passwd1 = $("#passwd1").val().trim(); + var passwd2 = $("#passwd2").val().trim(); + if((passwd1 != passwd2) || (passwd1 == "" || passwd2 == "")){ + RED.notify("Error:Passwords entered must be same and must be populated."); + return; + }else{ + var reqData= {"password":passwd1}; + $.post( "/updatePassword",reqData ) + .done(function( data ) { + RED.notify("Password updated successfully"); + //loadSettings(); + $( "#update-password-dialog" ).dialog('close'); + }) + .fail(function(err) { + console.log( "error" + err ); + RED.notify("Failed to update the password."); + }) + .always(function() { + }); + } + } + }, + { + text: "Cancel", + click: function() { + $( this ).dialog( "close" ); + } + } + ] + }).html(html); + $("#update-password-dialog").show(); + + } + + function showAvailableYangModules(){ + availableYangModules=[]; + var divStyle=""; + $.get( "/listAvailableModules") + .done(function( data ) { + var header="
    List of Available Yang Modules
    "; + header += "

    Check the modules that you want to load and click on the Load button.

    "; + //header += "
    "; + var html= divStyle + header + "
    "; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + html+=""; + if(data != null){ + var files=data.files; + availableYangModules=files; + //console.dir(files); + files.sort(function (a,b){ + if(a > b){ + return 1; + }else if(a < b){ + return -1; + }else{ + return 0; + } + }); + var count=1; + for(var i=0;files != null && i"; + }else{ + html+=""; + } + count++; + } + } + html+="
    #LoadModule
    " + val + "
    " + count + "" + val + "
    "; + html+="
    "; + $( "#yang-modules-browser-dialog" ).dialog({ + title: "Available Yang Modules", + modal: true, + autoOpen: true, + width: 830, + height: 630, + buttons: [ + { + text: "Load", + click: function() { + var allVals = []; + function getValuesForSelected() { + $('#yang-modules-data-container :checked').each(function() { + allVals.push($(this).val()); + }); + return allVals; + } + var selectedModules = getValuesForSelected().toString(); + console.log(selectedModules); + $.ajax({ + type: 'GET', + /*contentType: "application/x-www-form-urlencoded",*/ + url: '/loadSelectedModules?selectedModules=' + selectedModules, + success: function(data) { + RED.notify("Modules Loaded successfully"); + //emptying existing g;obal variables + sliValuesObj = {}; + rpcValues = {}; + reqInputValues = {}; + + if(data != undefined && data != null){ + for(var i=0;i 0) { + $( "#node-dialog-confirm-deploy-config" ).hide(); + $( "#node-dialog-confirm-deploy-unknown" ).show(); + var list = "
  • "+unknownNodes.join("
  • ")+"
    • "; + $( "#node-dialog-confirm-deploy-unknown-list" ).html(list); + } else { + $( "#node-dialog-confirm-deploy-config" ).show(); + $( "#node-dialog-confirm-deploy-unknown" ).hide(); + } + $( "#node-dialog-confirm-deploy" ).dialog( "open" ); + return; + } + } + var nns = RED.nodes.createCompleteNodeSet(); + + $("#btn-icn-deploy").removeClass('fa-download'); + $("#btn-icn-deploy").addClass('spinner'); + RED.view.dirty(false); + + $.ajax({ + url:"flows", + type: "POST", + data: JSON.stringify(nns), + contentType: "application/json; charset=utf-8" + }).done(function(data,textStatus,xhr) { + RED.notify("Successfully deployed","success"); + RED.nodes.eachNode(function(node) { + if (node.changed) { + node.dirty = true; + node.changed = false; + } + if(node.credentials) { + delete node.credentials; + } + }); + RED.nodes.eachConfig(function (confNode) { + if (confNode.credentials) { + delete confNode.credentials; + } + }); + // Once deployed, cannot undo back to a clean state + RED.history.markAllDirty(); + RED.view.redraw(); + }).fail(function(xhr,textStatus,err) { + RED.view.dirty(true); + if (xhr.responseText) { + RED.notify("Error: "+xhr.responseText,"error"); + } else { + RED.notify("Error: no response from server","error"); + } + }).always(function() { + $("#btn-icn-deploy").removeClass('spinner'); + $("#btn-icn-deploy").addClass('fa-download'); + }); + } + } + + $('#btn-deploy').click(function() { save(); }); + + $( "#node-dialog-confirm-deploy" ).dialog({ + title: "Confirm deploy", + modal: true, + autoOpen: false, + width: 530, + height: 230, + buttons: [ + { + text: "Confirm deploy", + click: function() { + save(true); + $( this ).dialog( "close" ); + } + }, + { + text: "Cancel", + click: function() { + $( this ).dialog( "close" ); + } + } + ] + }); + + function loadSettings() { + $.get('settings', function(data) { + RED.settings = data; + console.log("Node-RED: "+data.version); + loadNodeList(); + }); + } + function loadNodeList() { + $.ajax({ + headers: { + "Accept":"application/json" + }, + cache: false, + url: 'nodes', + success: function(data) { + RED.nodes.setNodeList(data); + loadNodes(); + } + }); + } + + function loadNodes() { + $.ajax({ + headers: { + "Accept":"text/html" + }, + cache: false, + url: 'nodes', + success: function(data) { + $("body").append(data); + $(".palette-spinner").hide(); + $(".palette-scroll").show(); + $("#palette-search").show(); + loadFlows(); + } + }); + } + + function loadFlows() { + $.ajax({ + headers: { + "Accept":"application/json" + }, + cache: false, + url: 'flows', + success: function(nodes) { + RED.nodes.import(nodes); + RED.view.dirty(false); + RED.view.redraw(); + RED.comms.subscribe("status/#",function(topic,msg) { + var parts = topic.split("/"); + var node = RED.nodes.node(parts[1]); + if (node) { + node.status = msg; + if (statusEnabled) { + node.dirty = true; + RED.view.redraw(); + } + } + }); + RED.comms.subscribe("node/#",function(topic,msg) { + var i,m; + var typeList; + var info; + + if (topic == "node/added") { + var addedTypes = []; + for (i=0;i
  • ")+"
    • "; + RED.notify("Node"+(addedTypes.length!=1 ? "s":"")+" added to palette:"+typeList,"success"); + } + } else if (topic == "node/removed") { + for (i=0;i
  • ")+"
    • "; + RED.notify("Node"+(m.types.length!=1 ? "s":"")+" removed from palette:"+typeList,"success"); + } + } + } else if (topic == "node/enabled") { + if (msg.types) { + info = RED.nodes.getNodeSet(msg.id); + if (info.added) { + RED.nodes.enableNodeSet(msg.id); + typeList = "
    • "+msg.types.join("
    • ")+"
    "; + RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" enabled:"+typeList,"success"); + } else { + $.get('nodes/'+msg.id, function(data) { + $("body").append(data); + typeList = "
    • "+msg.types.join("
    • ")+"
    "; + RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" added to palette:"+typeList,"success"); + }); + } + } + } else if (topic == "node/disabled") { + if (msg.types) { + RED.nodes.disableNodeSet(msg.id); + typeList = "
    • "+msg.types.join("
    • ")+"
    "; + RED.notify("Node"+(msg.types.length!=1 ? "s":"")+" disabled:"+typeList,"success"); + } + } + }); + } + }); + } + + var statusEnabled = false; + function toggleStatus(state) { + statusEnabled = state; + RED.view.status(statusEnabled); + } + + function showHelp() { + + var dialog = $('#node-help'); + + //$("#node-help").draggable({ + // handle: ".modal-header" + //}); + + dialog.on('show',function() { + RED.keyboard.disable(); + }); + dialog.on('hidden',function() { + RED.keyboard.enable(); + }); + + dialog.modal(); + } + + $(function() { + RED.menu.init({id:"btn-sidemenu", + options: [ + {id:"btn-sidebar",icon:"fa fa-columns",label:"Sidebar",toggle:true,onselect:RED.sidebar.toggleSidebar}, + null, + {id:"btn-node-status",icon:"fa fa-info",label:"Node Status",toggle:true,onselect:toggleStatus}, + null, + {id:"btn-import-menu",icon:"fa fa-sign-in",label:"Import...",options:[ + {id:"btn-import-clipboard",icon:"fa fa-clipboard",label:"Clipboard...",onselect:RED.view.showImportNodesDialog}, + {id:"btn-import-library",icon:"fa fa-book",label:"Library",options:[]} + ]}, + {id:"btn-export-menu",icon:"fa fa-sign-out",label:"Export...",disabled:true,options:[ + {id:"btn-export-clipboard",icon:"fa fa-clipboard",label:"Clipboard...",disabled:true,onselect:RED.view.showExportNodesDialog}, + {id:"btn-export-library",icon:"fa fa-book",label:"Library...",disabled:true,onselect:RED.view.showExportNodesLibraryDialog} + ]}, + null, + {id:"btn-config-nodes",icon:"fa fa-th-list",label:"Configuration nodes...",onselect:RED.sidebar.config.show}, + null, + {id:"btn-workspace-menu",icon:"fa fa-th-large",label:"Workspaces",options:[ + {id:"btn-workspace-add",icon:"fa fa-plus",label:"Add"}, + {id:"btn-workspace-edit",icon:"fa fa-pencil",label:"Rename"}, + {id:"btn-workspace-delete",icon:"fa fa-minus",label:"Delete"}, + null + ]}, + null, + {id:"btn-keyboard-shortcuts",icon:"fa fa-keyboard-o",label:"Keyboard Shortcuts",onselect:showHelp}, + {id:"btn-help",icon:"fa fa-question",label:"Help...", href:"http://nodered.org/docs"} + ] + }); + + RED.keyboard.add(/* ? */ 191,{shift:true},function(){showHelp();d3.event.preventDefault();}); + loadSettings(); + RED.comms.connect(); + }); + + return { + }; +})(); diff --git a/dgbuilder/public/red/nodes.js b/dgbuilder/public/red/nodes.js new file mode 100644 index 00000000..dc0827a6 --- /dev/null +++ b/dgbuilder/public/red/nodes.js @@ -0,0 +1,553 @@ +/** + * Copyright 2013 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +RED.nodes = (function() { + + var node_defs = {}; + var nodes = []; + var configNodes = {}; + var links = []; + var defaultWorkspace; + var workspaces = {}; + + var registry = (function() { + var nodeList = []; + var nodeSets = {}; + var typeToId = {}; + var nodeDefinitions = {}; + + var exports = { + getNodeList: function() { + return nodeList; + }, + setNodeList: function(list) { + nodeList = []; + for(var i=0;i 0) { + var typeList = "
    • "+unknownTypes.join("
    • ")+"
    "; + var type = "type"+(unknownTypes.length > 1?"s":""); + RED.notify("Imported unrecognised "+type+":"+typeList,"error",false,10000); + //"DO NOT DEPLOY while in this state.
    Either, add missing types to Node-RED, restart and then reload page,
    or delete unknown "+n.name+", rewire as required, and then deploy.","error"); + } + + var new_workspaces = []; + var workspace_map = {}; + + for (i=0;iError: "+error,"error"); + return null; + } + + } + + return { + registry:registry, + setNodeList: registry.setNodeList, + + getNodeSet: registry.getNodeSet, + addNodeSet: registry.addNodeSet, + removeNodeSet: registry.removeNodeSet, + enableNodeSet: registry.enableNodeSet, + disableNodeSet: registry.disableNodeSet, + + registerType: registry.registerNodeType, + getType: registry.getNodeType, + convertNode: convertNode, + add: addNode, + addLink: addLink, + remove: removeNode, + removeLink: removeLink, + addWorkspace: addWorkspace, + removeWorkspace: removeWorkspace, + workspace: getWorkspace, + eachNode: function(cb) { + for (var n=0;n= node.outputs) { + removedLinks.push(l); + } + }); + for (var l=0;l node.ports.length) { + while (node.outputs > node.ports.length) { + node.ports.push(node.ports.length); + } + } + return removedLinks; + } + + + + $( "#dialog" ).dialog({ + modal: true, + autoOpen: false, + closeOnEscape: false, + width: 500, + buttons: [ + { + id: "node-dialog-ok", + text: "Ok", + click: function() { + if (editing_node) { + var changes = {}; + var changed = false; + var wasDirty = RED.view.dirty(); + var d; + + if (editing_node._def.oneditsave) { + var oldValues = {}; + for (d in editing_node._def.defaults) { + if (editing_node._def.defaults.hasOwnProperty(d)) { + if (typeof editing_node[d] === "string" || typeof editing_node[d] === "number") { + oldValues[d] = editing_node[d]; + } else { + oldValues[d] = $.extend(true,{},{v:editing_node[d]}).v; + } + } + } + var rc = editing_node._def.oneditsave.call(editing_node); + if (rc === true) { + changed = true; + } + + for (d in editing_node._def.defaults) { + if (editing_node._def.defaults.hasOwnProperty(d)) { + if (oldValues[d] === null || typeof oldValues[d] === "string" || typeof oldValues[d] === "number") { + if (oldValues[d] !== editing_node[d]) { + changes[d] = oldValues[d]; + changed = true; + } + } else { + if (JSON.stringify(oldValues[d]) !== JSON.stringify(editing_node[d])) { + changes[d] = oldValues[d]; + changed = true; + } + } + } + } + + + } + + if (editing_node._def.defaults) { + for (d in editing_node._def.defaults) { + if (editing_node._def.defaults.hasOwnProperty(d)) { + var input = $("#node-input-"+d); + var newValue; + if (input.attr('type') === "checkbox") { + newValue = input.prop('checked'); + } else { + newValue = input.val(); + } + if (newValue != null) { + if (editing_node[d] != newValue) { + if (editing_node._def.defaults[d].type) { + if (newValue == "_ADD_") { + newValue = ""; + } + // Change to a related config node + var configNode = RED.nodes.node(editing_node[d]); + if (configNode) { + var users = configNode.users; + users.splice(users.indexOf(editing_node),1); + } + configNode = RED.nodes.node(newValue); + if (configNode) { + configNode.users.push(editing_node); + } + } + + changes[d] = editing_node[d]; + editing_node[d] = newValue; + changed = true; + } + } + } + } + } + if (editing_node._def.credentials) { + var prefix = 'node-input'; + var credDefinition = editing_node._def.credentials; + var credsChanged = updateNodeCredentials(editing_node,credDefinition,prefix); + changed = changed || credsChanged; + } + + + var removedLinks = updateNodeProperties(editing_node); + if (changed) { + var wasChanged = editing_node.changed; + editing_node.changed = true; + RED.view.dirty(true); + RED.history.push({t:'edit',node:editing_node,changes:changes,links:removedLinks,dirty:wasDirty,changed:wasChanged}); + } + editing_node.dirty = true; + validateNode(editing_node); + RED.view.redraw(); + } else if (RED.view.state() == RED.state.EXPORT) { + if (/library/.test($( "#dialog" ).dialog("option","title"))) { + //TODO: move this to RED.library + var flowName = $("#node-input-filename").val(); + if (!/^\s*$/.test(flowName)) { + $.post('library/flows/'+flowName,$("#node-input-filename").attr('nodes'),function() { + RED.library.loadFlowLibrary(); + RED.notify("Saved nodes","success"); + }); + } + } + } else if (RED.view.state() == RED.state.IMPORT) { + RED.view.importNodes($("#node-input-import").val()); + } + $( this ).dialog( "close" ); + } + }, + { + id: "node-dialog-cancel", + text: "Cancel", + click: function() { + $( this ).dialog( "close" ); + } + } + ], + resize: function(e,ui) { + if (editing_node) { + $(this).dialog('option',"sizeCache-"+editing_node.type,ui.size); + } + }, + open: function(e) { + RED.keyboard.disable(); + if (editing_node) { + var size = $(this).dialog('option','sizeCache-'+editing_node.type); + if (size) { + $(this).dialog('option','width',size.width); + $(this).dialog('option','height',size.height); + } + } + }, + close: function(e) { + RED.keyboard.enable(); + + if (RED.view.state() != RED.state.IMPORT_DRAGGING) { + RED.view.state(RED.state.DEFAULT); + } + $( this ).dialog('option','height','auto'); + $( this ).dialog('option','width','500'); + if (editing_node) { + RED.sidebar.info.refresh(editing_node); + } + RED.sidebar.config.refresh(); + editing_node = null; + } + }); + + /** + * Create a config-node select box for this property + * @param node - the node being edited + * @param property - the name of the field + * @param type - the type of the config-node + */ + function prepareConfigNodeSelect(node,property,type) { + var input = $("#node-input-"+property); + var node_def = RED.nodes.getType(type); + + input.replaceWith(''); + updateConfigNodeSelect(property,type,node[property]); + var select = $("#node-input-"+property); + select.after(' '); + $('#node-input-lookup-'+property).click(function(e) { + showEditConfigNodeDialog(property,type,select.find(":selected").val()); + e.preventDefault(); + }); + var label = ""; + var configNode = RED.nodes.node(node[property]); + if (configNode && node_def.label) { + if (typeof node_def.label == "function") { + label = node_def.label.call(configNode); + } else { + label = node_def.label; + } + } + input.val(label); + } + + /** + * Populate the editor dialog input field for this property + * @param node - the node being edited + * @param property - the name of the field + * @param prefix - the prefix to use in the input element ids (node-input|node-config-input) + */ + function preparePropertyEditor(node,property,prefix) { + var input = $("#"+prefix+"-"+property); + if (input.attr('type') === "checkbox") { + input.prop('checked',node[property]); + } else { + var val = node[property]; + if (val == null) { + val = ""; + } + input.val(val); + } + } + + /** + * Add an on-change handler to revalidate a node field + * @param node - the node being edited + * @param definition - the definition of the node + * @param property - the name of the field + * @param prefix - the prefix to use in the input element ids (node-input|node-config-input) + */ + function attachPropertyChangeHandler(node,definition,property,prefix) { + $("#"+prefix+"-"+property).change(function() { + if (!validateNodeProperty(node, definition, property,this.value)) { + $(this).addClass("input-error"); + } else { + $(this).removeClass("input-error"); + } + }); + } + + /** + * Assign the value to each credential field + * @param node + * @param credDef + * @param credData + * @param prefix + */ + function populateCredentialsInputs(node, credDef, credData, prefix) { + var cred; + for (cred in credDef) { + if (credDef.hasOwnProperty(cred)) { + if (credDef[cred].type == 'password') { + if (credData[cred]) { + $('#' + prefix + '-' + cred).val(credData[cred]); + } else if (credData['has_' + cred]) { + $('#' + prefix + '-' + cred).val('__PWRD__'); + } + else { + $('#' + prefix + '-' + cred).val(''); + } + } else { + preparePropertyEditor(credData, cred, prefix); + } + attachPropertyChangeHandler(node, credDef, cred, prefix); + } + } + for (cred in credDef) { + if (credDef.hasOwnProperty(cred)) { + $("#" + prefix + "-" + cred).change(); + } + } + } + + /** + * Update the node credentials from the edit form + * @param node - the node containing the credentials + * @param credDefinition - definition of the credentials + * @param prefix - prefix of the input fields + * @return {boolean} whether anything has changed + */ + function updateNodeCredentials(node, credDefinition, prefix) { + var changed = false; + if(!node.credentials) { + node.credentials = {_:{}}; + } + + for (var cred in credDefinition) { + if (credDefinition.hasOwnProperty(cred)) { + var input = $("#" + prefix + '-' + cred); + var value = input.val(); + if (credDefinition[cred].type == 'password') { + node.credentials['has_' + cred] = (value !== ""); + if (value == '__PWRD__') { + continue; + } + changed = true; + + } + node.credentials[cred] = value; + if (value != node.credentials._[cred]) { + changed = true; + } + } + } + return changed; + } + + /** + * Prepare all of the editor dialog fields + * @param node - the node being edited + * @param definition - the node definition + * @param prefix - the prefix to use in the input element ids (node-input|node-config-input) + */ + function prepareEditDialog(node,definition,prefix) { + for (var d in definition.defaults) { + if (definition.defaults.hasOwnProperty(d)) { + if (definition.defaults[d].type) { + prepareConfigNodeSelect(node,d,definition.defaults[d].type); + } else { + preparePropertyEditor(node,d,prefix); + } + attachPropertyChangeHandler(node,definition.defaults,d,prefix); + } + } + var completePrepare = function() { + if (definition.oneditprepare) { + definition.oneditprepare.call(node); + } + for (var d in definition.defaults) { + if (definition.defaults.hasOwnProperty(d)) { + $("#"+prefix+"-"+d).change(); + } + } + } + + if (definition.credentials) { + if (node.credentials) { + populateCredentialsInputs(node, definition.credentials, node.credentials, prefix); + completePrepare(); + } else { + $.getJSON(getCredentialsURL(node.type, node.id), function (data) { + node.credentials = data; + node.credentials._ = $.extend(true,{},data); + populateCredentialsInputs(node, definition.credentials, node.credentials, prefix); + completePrepare(); + }); + } + } else { + completePrepare(); + } + } + + function showEditDialog(node) { + editing_node = node; + RED.view.state(RED.state.EDITING); + $("#dialog-form").html($("script[data-template-name='"+node.type+"']").html()); + $('').appendTo("#dialog-form"); + prepareEditDialog(node,node._def,"node-input"); + $( "#dialog" ).dialog("option","title","Edit "+node.type+" node").dialog( "open" ); + } + + function showEditConfigNodeDialog(name,type,id) { + var adding = (id == "_ADD_"); + var node_def = RED.nodes.getType(type); + + var configNode = RED.nodes.node(id); + if (configNode == null) { + configNode = { + id: (1+Math.random()*4294967295).toString(16), + _def: node_def, + type: type + } + for (var d in node_def.defaults) { + if (node_def.defaults[d].value) { + configNode[d] = node_def.defaults[d].value; + } + } + } + + $("#dialog-config-form").html($("script[data-template-name='"+type+"']").html()); + prepareEditDialog(configNode,node_def,"node-config-input"); + + var buttons = $( "#node-config-dialog" ).dialog("option","buttons"); + if (adding) { + if (buttons.length == 3) { + buttons = buttons.splice(1); + } + buttons[0].text = "Add"; + $("#node-config-dialog-user-count").html("").hide(); + } else { + if (buttons.length == 2) { + buttons.unshift({ + class: 'leftButton', + text: "Delete", + click: function() { + var configProperty = $(this).dialog('option','node-property'); + var configId = $(this).dialog('option','node-id'); + var configType = $(this).dialog('option','node-type'); + var configNode = RED.nodes.node(configId); + var configTypeDef = RED.nodes.getType(configType); + + if (configTypeDef.ondelete) { + configTypeDef.ondelete.call(RED.nodes.node(configId)); + } + RED.nodes.remove(configId); + for (var i=0;i'+label+''); + } + }); + + select.append(''); + window.setTimeout(function() { select.change();},50); + } + + $( "#node-config-dialog" ).dialog({ + modal: true, + autoOpen: false, + width: 500, + closeOnEscape: false, + buttons: [ + { + id: "node-config-dialog-ok", + text: "Ok", + click: function() { + var configProperty = $(this).dialog('option','node-property'); + var configId = $(this).dialog('option','node-id'); + var configType = $(this).dialog('option','node-type'); + var configAdding = $(this).dialog('option','node-adding'); + var configTypeDef = RED.nodes.getType(configType); + var configNode; + var d; + + if (configAdding) { + configNode = {type:configType,id:configId,users:[]}; + for (d in configTypeDef.defaults) { + if (configTypeDef.defaults.hasOwnProperty(d)) { + configNode[d] = $("#node-config-input-"+d).val(); + } + } + configNode.label = configTypeDef.label; + configNode._def = configTypeDef; + RED.nodes.add(configNode); + updateConfigNodeSelect(configProperty,configType,configNode.id); + } else { + configNode = RED.nodes.node(configId); + for (d in configTypeDef.defaults) { + if (configTypeDef.defaults.hasOwnProperty(d)) { + var input = $("#node-config-input-"+d); + if (input.attr('type') === "checkbox") { + configNode[d] = input.prop('checked'); + } else { + configNode[d] = input.val(); + } + } + } + updateConfigNodeSelect(configProperty,configType,configId); + } + if (configTypeDef.credentials) { + updateNodeCredentials(configNode,configTypeDef.credentials,"node-config-input"); + } + if (configTypeDef.oneditsave) { + configTypeDef.oneditsave.call(RED.nodes.node(configId)); + } + validateNode(configNode); + + RED.view.dirty(true); + $(this).dialog("close"); + + } + }, + { + id: "node-config-dialog-cancel", + text: "Cancel", + click: function() { + var configType = $(this).dialog('option','node-type'); + var configId = $(this).dialog('option','node-id'); + var configAdding = $(this).dialog('option','node-adding'); + var configTypeDef = RED.nodes.getType(configType); + + if (configTypeDef.oneditcancel) { + // TODO: what to pass as this to call + if (configTypeDef.oneditcancel) { + var cn = RED.nodes.node(configId); + if (cn) { + configTypeDef.oneditcancel.call(cn,false); + } else { + configTypeDef.oneditcancel.call({id:configId},true); + } + } + } + $( this ).dialog( "close" ); + } + } + ], + resize: function(e,ui) { + }, + open: function(e) { + if (RED.view.state() != RED.state.EDITING) { + RED.keyboard.disable(); + } + }, + close: function(e) { + $("#dialog-config-form").html(""); + if (RED.view.state() != RED.state.EDITING) { + RED.keyboard.enable(); + } + RED.sidebar.config.refresh(); + } + }); + + + return { + edit: showEditDialog, + editConfig: showEditConfigNodeDialog, + validateNode: validateNode, + updateNodeProperties: updateNodeProperties // TODO: only exposed for edit-undo + } +})(); diff --git a/dgbuilder/public/red/ui/keyboard.js b/dgbuilder/public/red/ui/keyboard.js new file mode 100644 index 00000000..3bc28c4d --- /dev/null +++ b/dgbuilder/public/red/ui/keyboard.js @@ -0,0 +1,68 @@ +/** + * Copyright 2013 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +RED.keyboard = (function() { + + var active = true; + var handlers = {}; + + d3.select(window).on("keydown",function() { + if (!active) { return; } + var handler = handlers[d3.event.keyCode]; + if (handler && handler.ondown) { + if (!handler.modifiers || + ((!handler.modifiers.shift || d3.event.shiftKey) && + (!handler.modifiers.ctrl || d3.event.ctrlKey ) && + (!handler.modifiers.alt || d3.event.altKey ) )) { + handler.ondown(); + } + } + }); + d3.select(window).on("keyup",function() { + if (!active) { return; } + var handler = handlers[d3.event.keyCode]; + if (handler && handler.onup) { + if (!handler.modifiers || + ((!handler.modifiers.shift || d3.event.shiftKey) && + (!handler.modifiers.ctrl || d3.event.ctrlKey ) && + (!handler.modifiers.alt || d3.event.altKey ) )) { + handler.onup(); + } + } + }); + function addHandler(key,modifiers,ondown,onup) { + var mod = modifiers; + var cbdown = ondown; + var cbup = onup; + + if (typeof modifiers == "function") { + mod = {}; + cbdown = modifiers; + cbup = ondown; + } + handlers[key] = {modifiers:mod, ondown:cbdown, onup:cbup}; + } + function removeHandler(key) { + delete handlers[key]; + } + + return { + add: addHandler, + remove: removeHandler, + disable: function(){ active = false;}, + enable: function(){ active = true; } + } + +})(); diff --git a/dgbuilder/public/red/ui/library.js b/dgbuilder/public/red/ui/library.js new file mode 100644 index 00000000..0c803bf0 --- /dev/null +++ b/dgbuilder/public/red/ui/library.js @@ -0,0 +1,370 @@ +/** + * Copyright 2013 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +RED.library = (function() { + + + function loadFlowLibrary() { + $.getJSON("library/flows",function(data) { + //console.log(data); + + var buildMenu = function(data,root) { + var i; + var li; + var a; + var ul = document.createElement("ul"); + ul.id = "btn-import-library-submenu"; + ul.className = "dropdown-menu"; + if (data.d) { + for (i in data.d) { + if (data.d.hasOwnProperty(i)) { + li = document.createElement("li"); + li.className = "dropdown-submenu pull-left"; + a = document.createElement("a"); + a.href="#"; + a.innerHTML = i; + li.appendChild(a); + li.appendChild(buildMenu(data.d[i],root+(root!==""?"/":"")+i)); + ul.appendChild(li); + } + } + } + if (data.f) { + for (i in data.f) { + if (data.f.hasOwnProperty(i)) { + li = document.createElement("li"); + a = document.createElement("a"); + a.href="#"; + a.innerHTML = data.f[i]; + a.flowName = root+(root!==""?"/":"")+data.f[i]; + a.onclick = function() { + $.get('library/flows/'+this.flowName, function(data) { + RED.view.importNodes(data); + }); + }; + li.appendChild(a); + ul.appendChild(li); + } + } + } + return ul; + }; + var menu = buildMenu(data,""); + //TODO: need an api in RED.menu for this + $("#btn-import-library-submenu").replaceWith(menu); + }); + } + loadFlowLibrary(); + + + + function createUI(options) { + var libraryData = {}; + var selectedLibraryItem = null; + var libraryEditor = null; + + function buildFileListItem(item) { + var li = document.createElement("li"); + li.onmouseover = function(e) { $(this).addClass("list-hover"); }; + li.onmouseout = function(e) { $(this).removeClass("list-hover"); }; + return li; + } + + function buildFileList(root,data) { + var ul = document.createElement("ul"); + var li; + for (var i=0;i/ '+dirName+''); + $("a",bcli).click(function(e) { + $(this).parent().nextAll().remove(); + $.getJSON("library/"+options.url+root+dirName,function(data) { + $("#node-select-library").children().first().replaceWith(buildFileList(root+dirName+"/",data)); + }); + e.stopPropagation(); + }); + var bc = $("#node-dialog-library-breadcrumbs"); + $(".active",bc).removeClass("active"); + bc.append(bcli); + $.getJSON("library/"+options.url+root+dirName,function(data) { + $("#node-select-library").children().first().replaceWith(buildFileList(root+dirName+"/",data)); + }); + } + })(); + li.innerHTML = ' '+v+""; + ul.appendChild(li); + } else { + // file + li = buildFileListItem(v); + li.innerHTML = v.name; + li.onclick = (function() { + var item = v; + return function(e) { + $(".list-selected",ul).removeClass("list-selected"); + $(this).addClass("list-selected"); + $.get("library/"+options.url+root+item.fn, function(data) { + selectedLibraryItem = item; + libraryEditor.setText(data); + }); + } + })(); + ul.appendChild(li); + } + } + return ul; + } + +/* +//Commented this portion as is not used by the DGBuilder application + $('#node-input-name').addClass('input-append-left').css("width","65%").after( + '
    '+ + ''+ + '
    ' + ); + + + + $('#node-input-'+options.type+'-menu-open-library').click(function(e) { + $("#node-select-library").children().remove(); + var bc = $("#node-dialog-library-breadcrumbs"); + bc.children().first().nextAll().remove(); + libraryEditor.setText(''); + + $.getJSON("library/"+options.url,function(data) { + $("#node-select-library").append(buildFileList("/",data)); + $("#node-dialog-library-breadcrumbs a").click(function(e) { + $(this).parent().nextAll().remove(); + $("#node-select-library").children().first().replaceWith(buildFileList("/",data)); + e.stopPropagation(); + }); + $( "#node-dialog-library-lookup" ).dialog( "open" ); + }); + + e.preventDefault(); + }); + + $('#node-input-'+options.type+'-menu-save-library').click(function(e) { + //var found = false; + var name = $("#node-input-name").val().replace(/(^\s*)|(\s*$)/g,""); + + //var buildPathList = function(data,root) { + // var paths = []; + // if (data.d) { + // for (var i in data.d) { + // var dn = root+(root==""?"":"/")+i; + // var d = { + // label:dn, + // files:[] + // }; + // for (var f in data.d[i].f) { + // d.files.push(data.d[i].f[f].fn.split("/").slice(-1)[0]); + // } + // paths.push(d); + // paths = paths.concat(buildPathList(data.d[i],root+(root==""?"":"/")+i)); + // } + // } + // return paths; + //}; + $("#node-dialog-library-save-folder").attr("value",""); + + var filename = name.replace(/[^\w-]/g,"-"); + if (filename === "") { + filename = "unnamed-"+options.type; + } + $("#node-dialog-library-save-filename").attr("value",filename+".js"); + + //var paths = buildPathList(libraryData,""); + //$("#node-dialog-library-save-folder").autocomplete({ + // minLength: 0, + // source: paths, + // select: function( event, ui ) { + // $("#node-dialog-library-save-filename").autocomplete({ + // minLength: 0, + // source: ui.item.files + // }); + // } + //}); + + $( "#node-dialog-library-save" ).dialog( "open" ); + e.preventDefault(); + }); + require(["orion/editor/edit"], function(edit) { + libraryEditor = edit({ + parent:document.getElementById('node-select-library-text'), + lang:"js", + readonly: true + }); + }); + + + $( "#node-dialog-library-lookup" ).dialog({ + title: options.type+" library", + modal: true, + autoOpen: false, + width: 800, + height: 450, + buttons: [ + { + text: "Ok", + click: function() { + if (selectedLibraryItem) { + for (var i=0;i'); + } else { + item = $('
  • '); + var link = $(''+ + (opt.toggle?'':'')+ + (opt.icon?' ':'')+ + opt.label+ + '').appendTo(item); + + menuItems[opt.id] = opt; + + if (opt.onselect) { + link.click(function() { + if ($(this).parent().hasClass("disabled")) { + return; + } + if (opt.toggle) { + setSelected(opt.id,!isSelected(opt.id)); + } else { + opt.onselect.call(opt); + } + }) + } else if (opt.href) { + link.attr("target","_blank").attr("href",opt.href); + } + if (opt.options) { + item.addClass("dropdown-submenu pull-left"); + var submenu = $('').appendTo(item); + + for (var i=0;i",{class:"dropdown-menu"}).insertAfter(button); + + for (var i=0;i 4) { + var ll = currentNotifications.length; + for (var i = 0;ll > 4 && i'+ + '
    '+category.replace("_"," ")+'
    '+ + '
    '+ + '
    '+ + '
    '+ + '
    '+ + '
    '+ + '
    '); + + $("#header-"+category).on('click', function(e) { + $(this).next().slideToggle(); + $(this).children("i").toggleClass("expanded"); + }); + } + + core.forEach(createCategoryContainer); + + function addNodeType(nt,def) { + + var nodeTypeId = nt.replace(" ","_"); + + if ($("#palette_node_"+nodeTypeId).length) { + return; + } + + if (exclusion.indexOf(def.category)===-1) { + + var category = def.category.replace(" ","_"); + var rootCategory = category.split("-")[0]; + + var d = document.createElement("div"); + d.id = "palette_node_"+nodeTypeId; + d.type = nt; + + // calculate width of label text + $.fn.textWidth = function(text, font) { + if (!$.fn.textWidth.fakeEl) { + $.fn.textWidth.fakeEl = $('').hide().appendTo(document.body); + } + $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); + return $.fn.textWidth.fakeEl.width(); + }; + + var label; + + if (typeof def.paletteLabel === "undefined") { + label = /^(.*?)([ -]in|[ -]out)?$/.exec(nt)[1]; + } else { + label = (typeof def.paletteLabel === "function" ? def.paletteLabel.call(def) : def.paletteLabel)||""; + } + + var pixels = $.fn.textWidth(label, '13px helvetica'); + var nodeWidth = 90; + var labelWidth = nodeWidth - 10; + var numLines = Math.ceil(pixels / nodeWidth); + var multiLine = numLines > 1; + + // styles matching with style.css + var nodeHeight = 25; + var lineHeight = 16; + var portHeight = 10; + var multiLineNodeHeight = lineHeight * numLines + (nodeHeight - lineHeight); + + d.innerHTML = '
    '+label+"
    "; + d.className="palette_node"; + if (def.icon) { + d.style.backgroundImage = "url(icons/"+def.icon+")"; + if (multiLine) { + d.style.backgroundSize = "18px 27px"; + } + if (def.align == "right") { + d.style.backgroundPosition = "95% 50%"; + } else if (def.inputs > 0) { + d.style.backgroundPosition = "10% 50%"; + } + } + + d.style.backgroundColor = def.color; + d.style.height = multiLineNodeHeight + "px"; + + if (def.outputs > 0) { + var portOut = document.createElement("div"); + portOut.className = "palette_port palette_port_output"; + if (multiLine) { + portOut.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px"; + } + d.appendChild(portOut); + } + + if (def.inputs > 0) { + var portIn = document.createElement("div"); + portIn.className = "palette_port"; + if (multiLine) { + portIn.style.top = ((multiLineNodeHeight - portHeight) / 2) + "px"; + } + d.appendChild(portIn); + } + + if ($("#palette-base-category-"+rootCategory).length === 0) { + createCategoryContainer(rootCategory); + } + + if ($("#palette-"+category).length === 0) { + $("#palette-base-category-"+rootCategory).append('
    '); + } + + $("#palette-"+category).append(d); + d.onmousedown = function(e) { e.preventDefault(); }; + + var popOverContent; + try { + popOverContent = $("

    "+label+"

    "+($("script[data-help-name|='"+nt+"']").html().trim()||"

    no information available

    ")).slice(0,2); + } catch(err) { + // Malformed HTML may cause errors. TODO: need to understand what can break + console.log("Error generating pop-over label for '"+nt+"'."); + console.log(err.toString()); + popOverContent = "

    "+label+"

    no information available

    "; + } + $(d).popover({ + title:d.type, + placement:"right", + trigger: "hover", + delay: { show: 750, hide: 50 }, + html: true, + container:'body', + content: popOverContent + }); + $(d).click(function() { + var help = '
    '+($("script[data-help-name|='"+d.type+"']").html()||"")+"
    "; + $("#tab-info").html(help); + }); + $(d).draggable({ + helper: 'clone', + appendTo: 'body', + revert: true, + revertDuration: 50 + }); + } + } + + function removeNodeType(nt) { + var nodeTypeId = nt.replace(" ","_"); + $("#palette_node_"+nodeTypeId).remove(); + } + function hideNodeType(nt) { + var nodeTypeId = nt.replace(" ","_"); + $("#palette_node_"+nodeTypeId).hide(); + } + + function showNodeType(nt) { + var nodeTypeId = nt.replace(" ","_"); + $("#palette_node_"+nodeTypeId).show(); + } + + function filterChange() { + var val = $("#palette-search-input").val(); + if (val === "") { + $("#palette-search-clear").hide(); + } else { + $("#palette-search-clear").show(); + } + + var re = new RegExp(val); + $(".palette_node").each(function(i,el) { + if (val === "" || re.test(el.id)) { + $(this).show(); + } else { + $(this).hide(); + } + }); + } + + $("#palette-search-input").focus(function(e) { + RED.keyboard.disable(); + }); + $("#palette-search-input").blur(function(e) { + RED.keyboard.enable(); + }); + + $("#palette-search-clear").on("click",function(e) { + e.preventDefault(); + $("#palette-search-input").val(""); + filterChange(); + $("#palette-search-input").focus(); + }); + + $("#palette-search-input").val(""); + $("#palette-search-input").on("keyup",function() { + filterChange(); + }); + + $("#palette-search-input").on("focus",function() { + $("body").one("mousedown",function() { + $("#palette-search-input").blur(); + }); + }); + + return { + add:addNodeType, + remove:removeNodeType, + hide:hideNodeType, + show:showNodeType + }; +})(); diff --git a/dgbuilder/public/red/ui/sidebar.js b/dgbuilder/public/red/ui/sidebar.js new file mode 100644 index 00000000..f55e516c --- /dev/null +++ b/dgbuilder/public/red/ui/sidebar.js @@ -0,0 +1,154 @@ +/** + * Copyright 2013 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +RED.sidebar = (function() { + + //$('#sidebar').tabs(); + var sidebar_tabs = RED.tabs.create({ + id:"sidebar-tabs", + onchange:function(tab) { + $("#sidebar-content").children().hide(); + $("#"+tab.id).show(); + }, + onremove: function(tab) { + $("#"+tab.id).remove(); + } + }); + function addTab(title,content,closeable) { + $("#sidebar-content").append(content); + $(content).hide(); + sidebar_tabs.addTab({id:"tab-"+title,label:title,closeable:closeable}); + //content.style.position = "absolute"; + //$('#sidebar').tabs("refresh"); + } + + function removeTab(title) { + sidebar_tabs.removeTab("tab-"+title); + } + + var sidebarSeparator = {}; + $("#sidebar-separator").draggable({ + axis: "x", + start:function(event,ui) { + sidebarSeparator.closing = false; + sidebarSeparator.opening = false; + var winWidth = $(window).width(); + sidebarSeparator.start = ui.position.left; + sidebarSeparator.chartWidth = $("#workspace").width(); + sidebarSeparator.chartRight = winWidth-$("#workspace").width()-$("#workspace").offset().left-2; + + + if (!RED.menu.isSelected("btn-sidebar")) { + sidebarSeparator.opening = true; + var newChartRight = 15; + $("#sidebar").addClass("closing"); + $("#workspace").css("right",newChartRight); + $("#chart-zoom-controls").css("right",newChartRight+20); + $("#sidebar").width(0); + RED.menu.setSelected("btn-sidebar",true); + RED.view.resize(); + } + + + sidebarSeparator.width = $("#sidebar").width(); + }, + drag: function(event,ui) { + var d = ui.position.left-sidebarSeparator.start; + var newSidebarWidth = sidebarSeparator.width-d; + if (sidebarSeparator.opening) { + newSidebarWidth -= 13; + } + + if (newSidebarWidth > 150) { + if (sidebarSeparator.chartWidth+d < 200) { + ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth; + d = ui.position.left-sidebarSeparator.start; + newSidebarWidth = sidebarSeparator.width-d; + } + } + + if (newSidebarWidth < 150) { + if (!sidebarSeparator.closing) { + $("#sidebar").addClass("closing"); + sidebarSeparator.closing = true; + } + if (!sidebarSeparator.opening) { + newSidebarWidth = 150; + ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start); + d = ui.position.left-sidebarSeparator.start; + } + } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) { + sidebarSeparator.closing = false; + $("#sidebar").removeClass("closing"); + } + + var newChartRight = sidebarSeparator.chartRight-d; + $("#workspace").css("right",newChartRight); + $("#chart-zoom-controls").css("right",newChartRight+20); + $("#sidebar").width(newSidebarWidth); + + sidebar_tabs.resize(); + RED.view.resize(); + + }, + stop:function(event,ui) { + RED.view.resize(); + if (sidebarSeparator.closing) { + $("#sidebar").removeClass("closing"); + RED.menu.setSelected("btn-sidebar",false); + if ($("#sidebar").width() < 180) { + $("#sidebar").width(180); + $("#workspace").css("right",208); + $("#chart-zoom-controls").css("right",228); + } + } + $("#sidebar-separator").css("left","auto"); + $("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px"); + } + }); + + function toggleSidebar(state) { + if (!state) { + $("#main-container").addClass("sidebar-closed"); + } else { + $("#main-container").removeClass("sidebar-closed"); + } + } + + function showSidebar(id) { + RED.menu.setSelected("btn-sidebar",true); + sidebar_tabs.activateTab("tab-"+id); + } + + function containsTab(id) { + return sidebar_tabs.contains("tab-"+id); + } + + + $(function() { + RED.keyboard.add(/* SPACE */ 32,{ctrl:true},function(){RED.menu.setSelected("btn-sidebar",!RED.menu.isSelected("btn-sidebar"));d3.event.preventDefault();}); + showSidebar("info"); + }); + + + return { + addTab: addTab, + removeTab: removeTab, + show: showSidebar, + containsTab: containsTab, + toggleSidebar: toggleSidebar + } + +})(); diff --git a/dgbuilder/public/red/ui/state.js b/dgbuilder/public/red/ui/state.js new file mode 100644 index 00000000..419b04b8 --- /dev/null +++ b/dgbuilder/public/red/ui/state.js @@ -0,0 +1,26 @@ +/** + * Copyright 2013 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +RED.state = { + DEFAULT: 0, + MOVING: 1, + JOINING: 2, + MOVING_ACTIVE: 3, + ADDING: 4, + EDITING: 5, + EXPORT: 6, + IMPORT: 7, + IMPORT_DRAGGING: 8 +} diff --git a/dgbuilder/public/red/ui/tab-config.js b/dgbuilder/public/red/ui/tab-config.js new file mode 100644 index 00000000..6ef6ba00 --- /dev/null +++ b/dgbuilder/public/red/ui/tab-config.js @@ -0,0 +1,84 @@ +/** + * Copyright 2013 IBM Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ +RED.sidebar.config = (function() { + + var content = document.createElement("div"); + content.id = "tab-config"; + content.style.paddingTop = "4px"; + content.style.paddingLeft = "4px"; + content.style.paddingRight = "4px"; + + var list = $("