Node details accordion

nailgun/static/css/main.css

@@ -2408,8 +2408,11 @@ h6.page-title {
   height: 62px;
   overflow: hidden;
   background: url(../img/node_image_outline.png) no-repeat top left;
-  margin-top: 10px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
+}
+
+.node-popup .span7 {
+  padding-top: 17px;
 }
 
 .simple-mode-title, .simple-type-title {
@@ -2988,7 +2991,3 @@ select[name=release] option {
 #nodeDetailsAccordion .nested-object div, #nodeDetailsAccordion .nested-object div label {
   font-weight: normal;
 }
-
-.accordion-heading a {
-  cursor: default;
-}

nailgun/static/js/views/dialogs.js

@@ -264,6 +264,14 @@ function(models, simpleMessageTemplate, createClusterDialogTemplate, changeClust
 
     views.ShowNodeInfoDialog = views.Dialog.extend({
         template: _.template(showNodeInfoTemplate),
+        events: {
+            'click a.accordion-toggle': 'stopHiddenEventPropagation'
+        },
+        stopHiddenEventPropagation: function(e) {
+            this.$(e.target).parent().siblings('.accordion-body').on('hidden', function(e) {
+                e.stopPropagation();
+            });
+        },
         initialize: function(options) {
             _.defaults(this, options);
         },

nailgun/static/templates/dialogs/show_node.html

@@ -1,8 +1,11 @@
+<div class="modal-header">
+  <button type="button" class="close" data-dismiss="modal">&times;</button>
+  <h3><%- node.get('name') %></h3>
+</div>
 <div class="modal-body node-popup enable-selection">
   <div class="row-fluid">
     <div class="span5"><div class="node-image-outline"></div></div>
     <div class="span7">
-      <h4><%- node.get('name') %></h4>
       <div><strong>Manufacturer: </strong><%- node.get('manufacturer') ? node.get('manufacturer') : '?' %></div>
       <div><strong>MAC Address: </strong><%- node.get('mac') ? node.get('mac') : '?' %></div>
     </div>
@@ -11,8 +14,8 @@
     <% var meta = node.get('meta') %>
       <% _.each(_.keys(meta), function(field) { %>
         <div class="accordion-group">
-          <div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#nodeDetailsAccordion" href="#"><%- field %></a></div>
-          <div class="accordion-body collapse in" id="<%- field %>">
+          <div class="accordion-heading"><a class="accordion-toggle" data-toggle="collapse" data-parent="#nodeDetailsAccordion" href="#<%- field %>"><%- field %></a></div>
+          <div class="accordion-body collapse" id="<%- field %>">
             <div class="accordion-inner">
               <% if (_.isArray(meta[field])) { %>
                 <% if (field == 'interfaces') meta[field] = _.sortBy(meta[field], function(el) {return el.name;}) %>