Node renaming

nailgun/nailgun/static/css/overlap.css

@@ -68,7 +68,7 @@ behavior: url(css/pie.htc);
 
 .on ul, .off ul {display: block; padding: 0px; margin: 0px; margin-left: 30px; list-style-type: none;}
 .on img, .off img {display: block; margin: 5px;}
-.on h4, .off h4 {display: block; padding: 0px 30px 5px 30px; color: #333333; font-weight: 600;}
+.on h4, .off h4 {display: block; padding: 5px 30px 0 30px; color: #333333; font-weight: 600;}
 .on .roles a, .off .roles a {color: #666666;}
 .on a:hover, .off a:hover {color: #13609b;}
 .on h4 a, .off h4 a {color: #333333;}
@@ -82,7 +82,17 @@ behavior: url(css/pie.htc);
 
 .off {background-color: #f4f4f4; opacity: 0.5; }
 
-  .navbar-inner {
+.node-name {
+  height: 25px;
+}
+
+.node-name-editing {
+  height: 30px;
+  overflow: hidden;
+  margin: 0px 0px 0px 20px;
+}
+
+.navbar-inner {
   min-height: 40px;
   padding-right: 20px;
   padding-left: 20px;

nailgun/nailgun/static/js/views/cluster.js

@@ -57,7 +57,8 @@ function(models, dialogViews, clusterPageTemplate, clusterNodeTemplate, deployme
             $.ajax({
                 type: 'DELETE',
                 url: '/api/clusters/' + this.model.id + '/changes',
-                success: _.bind(this.model.fetch, this.model)
+                success: this.model.fetch,
+                context: this.model
             });
             this.disabled = true;
             this.render();
@@ -98,7 +99,9 @@ function(models, dialogViews, clusterPageTemplate, clusterNodeTemplate, deployme
         className: 'span3',
         template: _.template(clusterNodeTemplate),
         events: {
-            'click .roles > a': 'editRoles'
+            'click .roles > a': 'editRoles',
+            'click .node-name': 'startNameEditing',
+            'keydown .node-name-editing': 'onNodeNameInputKeydown'
         },
         editRoles: function(e) {
             e.preventDefault();
@@ -107,12 +110,49 @@ function(models, dialogViews, clusterPageTemplate, clusterNodeTemplate, deployme
             var roleChooser = (new views.NodeRoleChooser({model: this.model}));
             this.$('.roles').after(roleChooser.render().el);
         },
+        startNameEditing: function(e) {
+            e.preventDefault();
+            $('html').off(this.eventNamespace);
+            $('html').on(this.eventNamespace, _.bind(function(e) {
+                if (this.handledFirstClick && !$(e.target).closest(this.$el).length) {
+                    this.endNameEditing();
+                } else {
+                    this.handledFirstClick = true;
+                }
+            }, this));
+            this.editingName = true;
+            this.render();
+            this.$('.node-name-editing input').focus();
+        },
+        endNameEditing: function() {
+            $('html').off(this.eventNamespace);
+            this.handledFirstClick = false;
+            this.editingName = false;
+            this.render();
+        },
+        onNodeNameInputKeydown: function(e) {
+            if (e.which == 13) { // enter
+                var input = this.$('.node-name-editing input');
+                var name = input.attr('value');
+                if (name != this.model.get('name')) {
+                    input.attr('disabled', true).addClass('disabled');
+                    this.model.update({name: name}, {complete: this.endNameEditing, context: this});
+                } else {
+                    this.endNameEditing();
+                }
+            } else if (e.which == 27) { // esc
+                this.endNameEditing();
+            }
+        },
         initialize: function() {
+            this.editingName = false;
+            this.handledFirstClick = false;
+            this.eventNamespace = 'click.editnodename' + this.model.id;
             this.model.bind('change', this.render, this);
             this.model.bind('change:redeployment_needed', app.page.deploymentControl.render, app.page.deploymentControl);
         },
         render: function() {
-            this.$el.html(this.template({node: this.model}));
+            this.$el.html(this.template({node: this.model, editingName: this.editingName}));
             return this;
         }
     });
@@ -153,6 +193,7 @@ function(models, dialogViews, clusterPageTemplate, clusterNodeTemplate, deployme
             this.handledFirstClick = false;
             this.originalRoles = this.model.get('redeployment_needed') ? this.model.get('new_roles') : this.model.get('roles');
             this.eventNamespace = 'click.chooseroles' + this.model.id;
+            $('html').off(this.eventNamespace);
             $('html').on(this.eventNamespace, _.bind(function(e) {
                 if (this.handledFirstClick && !$(e.target).closest(this.$el).length) {
                     this.close();

nailgun/nailgun/static/templates/cluster/node.html

@@ -1,6 +1,14 @@
 <div class="node <%= node.get('status') == 'offline' ? 'off' : 'on' %>">
   <div class="nodeimg"><div class="nodeimg<%= node.get('status') %>"></div></div>
-  <h4><a href="#"><i class="icon-pencil"></i><%= node.get('name') || node.get('id') %></a></h4>
+  <% if (editingName) { %>
+    <form class="node-name-editing form-inline" style="<%= editingName ? '' : 'display:none' %>">
+      <input type="text" class="input-medium" value="<%= node.get('name') || node.get('id') %>">
+    </form>
+  <% } else { %>
+    <h4 class="node-name" style="<%= editingName ? 'display:none' : '' %>">
+      <a href="#"><i class="icon-pencil"></i><%= node.get('name') || node.get('id') %></a>
+    </h4>
+  <% } %>
   <div class="roles">
     <a href="#">
       <ul>