From fea1a5e9a529ed13945e1e945e784ec416cc86ea Mon Sep 17 00:00:00 2001
From: Ana Krivokapic <akrivoka@redhat.com>
Date: Thu, 4 Dec 2014 18:05:58 +0100
Subject: [PATCH] Add node counts to the plan edit view

Change-Id: I531095cb150e9c09e8a3d8c9e43ffd039981120d
---
 .../static/tuskar_boxes/js/tuskar.boxes.js    |  5 +++-
 .../tuskar_boxes/scss/tuskar_boxes.scss       | 13 +++++++++
 .../tuskar_boxes/overview/_node_info.html     |  2 +-
 .../overview/role_nodes_edit.html             | 29 ++++++++++++++-----
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js b/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
index fdaa402..c7a4228 100644
--- a/tuskar_boxes/static/tuskar_boxes/js/tuskar.boxes.js
+++ b/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('&nbsp;');
         }
         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() {
diff --git a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss b/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
index 820203c..918a228 100644
--- a/tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss
+++ b/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;
+}
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/_node_info.html b/tuskar_boxes/templates/tuskar_boxes/overview/_node_info.html
index 19f0663..7740605 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/_node_info.html
+++ b/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>
diff --git a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html b/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
index a115fbc..2bae742 100644
--- a/tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_edit.html
+++ b/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">