Move deploy menu/action to own module

public/index.html

@@ -32,10 +32,6 @@
 <div id="header">
     <span class="logo"><img src="node-red.png"> <span>Node-RED</span></span>
     <ul class="header-toolbar hide">
-        <li><span class="deploy-button-group button-group">
-                <a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="images/deploy-full-o.png"> <span>Deploy</span></a>
-                <a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a>
-            </span></li>
         <li><a id="btn-usermenu" class="button hide" data-toggle="dropdown" href="#"><i class="fa fa-user"></i></a></li>
         <li><a id="btn-sidemenu" class="button" data-toggle="dropdown" href="#"><i class="fa fa-bars"></i></a></li>
     <ul>
@@ -192,6 +188,7 @@
 <script src="red/nodes.js"></script>
 <script src="red/history.js"></script>
 <script src="red/validators.js"></script>
+<script src="red/ui/deploy.js"></script>
 <script src="red/ui/menu.js"></script>
 <script src="red/ui/keyboard.js"></script>
 <script src="red/ui/tabs.js"></script>

public/red/main.js

@@ -15,114 +15,6 @@
  **/
 var RED = (function() {
 
-    var deploymentTypes = {
-        "full":{img:"images/deploy-full-o.png"},
-        "nodes":{img:"images/deploy-nodes-o.png"},
-        "flows":{img:"images/deploy-flows-o.png"}
-    }
-    var deploymentType = "full";
-    
-    function save(force) {
-        if (RED.nodes.dirty()) {
-            //$("#debug-tab-clear").click();  // uncomment this to auto clear debug on deploy
-
-            if (!force) {
-                var invalid = false;
-                var unknownNodes = [];
-                RED.nodes.eachNode(function(node) {
-                    invalid = invalid || !node.valid;
-                    if (node.type === "unknown") {
-                        if (unknownNodes.indexOf(node.name) == -1) {
-                            unknownNodes.push(node.name);
-                        }
-                        invalid = true;
-                    }
-                });
-                if (invalid) {
-                    if (unknownNodes.length > 0) {
-                        $( "#node-dialog-confirm-deploy-config" ).hide();
-                        $( "#node-dialog-confirm-deploy-unknown" ).show();
-                        var list = "<li>"+unknownNodes.join("</li><li>")+"</li>";
-                        $( "#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.nodes.dirty(false);
-
-            $.ajax({
-                url:"flows",
-                type: "POST",
-                data: JSON.stringify(nns),
-                contentType: "application/json; charset=utf-8",
-                headers: {
-                    "Node-RED-Deployment-Type":deploymentType
-                }
-            }).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.nodes.dirty(true);
-                if (xhr.responseText) {
-                    RED.notify("<strong>Error</strong>: "+xhr.responseText,"error");
-                } else {
-                    RED.notify("<strong>Error</strong>: 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() {
         RED.settings.init(loadNodeList);
@@ -245,11 +137,6 @@ var RED = (function() {
         RED.view.status(statusEnabled);
     }
 
-    function changeDeploymentType(type) {
-        deploymentType = type;
-        $("#btn-deploy img").attr("src",deploymentTypes[type].img);
-    }
-
     function loadEditor() {
         RED.menu.init({id:"btn-sidemenu",
             options: [
@@ -284,14 +171,6 @@ var RED = (function() {
             ]
         });
         
-        RED.menu.init({id:"btn-deploy-options",
-            options: [
-                {id:"btn-deploy-full",toggle:"deploy-type",icon:"images/deploy-full.png",label:"Full",sublabel:"Deploys everything in the workspace",onselect:function(s) { if(s){changeDeploymentType("full")}}},
-                {id:"btn-deploy-flow",toggle:"deploy-type",icon:"images/deploy-flows.png",label:"Modified Flows",sublabel:"Only deploys flows that contain changed nodes", onselect:function(s) {if(s){changeDeploymentType("flows")}}},
-                {id:"btn-deploy-node",toggle:"deploy-type",icon:"images/deploy-nodes.png",label:"Modified Nodes",sublabel:"Only deploys nodes that have changed",onselect:function(s) { if(s){changeDeploymentType("nodes")}}}
-            ]
-        });
-        
         if (RED.settings.user) {
             RED.menu.init({id:"btn-usermenu",
                 options: []
@@ -332,9 +211,6 @@ var RED = (function() {
             $("#btn-usermenu").parent().hide();
         }
     
-        $("#main-container").show();
-        $(".header-toolbar").show();
-        
         RED.library.init();
         RED.palette.init();
         RED.sidebar.init();
@@ -342,9 +218,14 @@ var RED = (function() {
         RED.workspaces.init();
         RED.clipboard.init();
         RED.view.init();
+        RED.deploy.init();
         
         RED.keyboard.add(/* ? */ 191,{shift:true},function(){RED.keyboard.showHelp();d3.event.preventDefault();});
         RED.comms.connect();
+
+        $("#main-container").show();
+        $(".header-toolbar").show();
+
         loadNodeList();
     }
 

public/red/nodes.js

@@ -1,5 +1,5 @@
 /**
- * Copyright 2013 IBM Corp.
+ * Copyright 2013, 2015 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.

public/red/ui/deploy.js

@@ -0,0 +1,163 @@
+/**
+ * Copyright 2015 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.deploy = (function() {
+        
+    var deploymentTypes = {
+        "full":{img:"images/deploy-full-o.png"},
+        "nodes":{img:"images/deploy-nodes-o.png"},
+        "flows":{img:"images/deploy-flows-o.png"}
+    }
+    
+    var deploymentType = "full";
+    
+    function changeDeploymentType(type) {
+        deploymentType = type;
+        $("#btn-deploy img").attr("src",deploymentTypes[type].img);
+    }
+    
+    function init() {
+        
+        var deployButton = $('<li><span class="deploy-button-group button-group">'+
+          '<a id="btn-deploy" class="action-deploy disabled" href="#"><img id="btn-icn-deploy" src="images/deploy-full-o.png"> <span>Deploy</span></a>'+
+          '<a id="btn-deploy-options"  data-toggle="dropdown"  class="" href="#"><i class="fa fa-caret-down"></i></a>'+
+          '</span></li>').prependTo(".header-toolbar");
+        
+        $('#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" );
+                        }
+                    }
+                ]
+        });
+        
+        RED.menu.init({id:"btn-deploy-options",
+            options: [
+                {id:"btn-deploy-full",toggle:"deploy-type",icon:"images/deploy-full.png",label:"Full",sublabel:"Deploys everything in the workspace",onselect:function(s) { if(s){changeDeploymentType("full")}}},
+                {id:"btn-deploy-flow",toggle:"deploy-type",icon:"images/deploy-flows.png",label:"Modified Flows",sublabel:"Only deploys flows that contain changed nodes", onselect:function(s) {if(s){changeDeploymentType("flows")}}},
+                {id:"btn-deploy-node",toggle:"deploy-type",icon:"images/deploy-nodes.png",label:"Modified Nodes",sublabel:"Only deploys nodes that have changed",onselect:function(s) { if(s){changeDeploymentType("nodes")}}}
+            ]
+        });
+        
+        
+        RED.nodes.on('change',function(state) {
+            if (state.dirty) {
+                $("#btn-deploy").removeClass("disabled");
+            } else {
+                $("#btn-deploy").addClass("disabled");
+            }
+        });
+        
+    }
+    
+    function save(force) {
+        if (RED.nodes.dirty()) {
+            //$("#debug-tab-clear").click();  // uncomment this to auto clear debug on deploy
+
+            if (!force) {
+                var invalid = false;
+                var unknownNodes = [];
+                RED.nodes.eachNode(function(node) {
+                    invalid = invalid || !node.valid;
+                    if (node.type === "unknown") {
+                        if (unknownNodes.indexOf(node.name) == -1) {
+                            unknownNodes.push(node.name);
+                        }
+                        invalid = true;
+                    }
+                });
+                if (invalid) {
+                    if (unknownNodes.length > 0) {
+                        $( "#node-dialog-confirm-deploy-config" ).hide();
+                        $( "#node-dialog-confirm-deploy-unknown" ).show();
+                        var list = "<li>"+unknownNodes.join("</li><li>")+"</li>";
+                        $( "#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.nodes.dirty(false);
+
+            $.ajax({
+                url:"flows",
+                type: "POST",
+                data: JSON.stringify(nns),
+                contentType: "application/json; charset=utf-8",
+                headers: {
+                    "Node-RED-Deployment-Type":deploymentType
+                }
+            }).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.nodes.dirty(true);
+                if (xhr.responseText) {
+                    RED.notify("<strong>Error</strong>: "+xhr.responseText,"error");
+                } else {
+                    RED.notify("<strong>Error</strong>: no response from server","error");
+                }
+            }).always(function() {
+                $("#btn-icn-deploy").removeClass('spinner');
+                $("#btn-icn-deploy").addClass('fa-download');
+            });
+        }
+    }
+
+    return {
+        init: init
+    }
+})();

public/red/ui/view.js

@@ -283,14 +283,6 @@ RED.view = (function() {
             redraw();
         });
         
-        RED.nodes.on('change',function(state) {
-            if (state.dirty) {
-                $("#btn-deploy").removeClass("disabled");
-            } else {
-                $("#btn-deploy").addClass("disabled");
-            }
-        });
-        
         $('#btn-zoom-out').click(function() {zoomOut();});
         $('#btn-zoom-zero').click(function() {zoomZero();});
         $('#btn-zoom-in').click(function() {zoomIn();});