Add node counts to the plan edit view

Change-Id: I531095cb150e9c09e8a3d8c9e43ffd039981120d

tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js

@@ -38,18 +38,21 @@ tuskar.boxes = (function () {
       var role = 0;
       $flavor.find('div.boxes-nodes div.boxes-node').each(function () {
         var $this = $(this);
-        $this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage');
+        $this.removeClass('boxes-role-controller boxes-role-compute boxes-role-cinder-storage boxes-role-swift-storage boxes-role-none');
         while (count >= roles[role_names[role]]) {
           role += 1;
           count = 0;
         }
         if (!role_names[role]) {
           $(this).html('free');
+          $(this).addClass('boxes-role-none');
         } else {
           $this.addClass('boxes-role-' + role_names[role]).html(' ');
         }
         count += 1;
       });
+      var free_nodes = $flavor.find('div.boxes-nodes div.boxes-role-none').length;
+      $flavor.find('span.free-nodes').text(free_nodes);
     }
 
     function update_boxes() {

tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss

@@ -99,3 +99,16 @@
     background-color: #999;
     border-style: solid;
 }
+
+.free-nodes {
+    font-weight: bold;
+}
+
+.separator-line {
+    border-bottom: 1px solid #999;
+    margin-bottom: 5px;
+}
+
+.boxes-flavor {
+    padding-bottom: 10px;
+}

tuskar_boxes/templates/tuskar_boxes/overview/_node_info.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <div
-  class="boxes-node"
+  class="boxes-node boxes-role-none"
   data-toggle="popover"
   title="{{ node.role_name|title|default:_('Free') }} {% trans 'node' %}"
   data-content="<dl>

tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html

@@ -26,14 +26,27 @@
 <h4>{% trans "Available Flavors" %}</h4>
 {% for flavor in flavors %}
 <div class="boxes-flavor" data-flavor="{{ flavor.name }}">
-    <p>
-    <strong>{% trans "Flavor:" %}</strong>
-        <i>{{ flavor.name }}</i>
-        {{ flavor.cpu_arch }},
-        {{ flavor.vcpus }} CPU,
-        {{ flavor.ram }}MB RAM,
-        {{ flavor.disk }}GB Disk
-    </p>
+  <div class="row">
+    <div class="col-md-9">
+      <strong>{% trans "Flavor:" %}</strong>
+      <i>{{ flavor.name }}</i>
+      {{ flavor.cpu_arch }},
+      {{ flavor.vcpus }} CPU,
+      {{ flavor.ram }}MB RAM,
+      {{ flavor.disk }}GB Disk
+    </div>
+    <div class="col-md-3">
+      <span class="pull-right">
+        {% trans "Free Nodes:" %}
+        <span class="free-nodes"></span> / {{ flavor.nodes|length }}
+      </span>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="separator-line"></div>
+    </div>
+  </div>
     <div class="row">
         <div class="col-xs-5">
             <div class="boxes-drop-roles">