Make the live deployment view match wireframes

* Add system load graphs
* Add node distribution
* Remove node status

Change-Id: Ic240d65c681bdc9948057e71577b207f75c96e56

tuskar_boxes/overview/views.py

@@ -12,10 +12,15 @@
 #    License for the specific language governing permissions and limitations
 #    under the License.
 
+import collections
+
+from django.core.urlresolvers import reverse
 import django.utils.text
+from openstack_dashboard.api import base as api_base
+
 from tuskar_ui import api
 from tuskar_ui.infrastructure.overview import views
-
+from tuskar_ui.utils import metering
 from tuskar_boxes.overview import forms
 
 
@@ -114,10 +119,31 @@ class IndexView(views.IndexView):
             context['flavors'] = list(
                 _flavor_data(self.request, flavors, flavor_roles))
         else:
-            context['nodes'] = list(_node_data(
+            nodes = list(_node_data(
                 self.request,
                 api.node.Node.list(self.request, maintenance=False),
             ))
+
+            nodes.sort(key=lambda node: node.get('role_name'))
+            nodes.reverse()
+
+            context['nodes'] = nodes
+            distribution = collections.Counter()
+
+            for node in nodes:
+                distribution[node['role_name']] += 1
+            for role in context['roles']:
+                role['distribution'] = int(float(distribution[role['name']]) /
+                                           len(nodes) * 100)
+
+            if api_base.is_service_enabled(self.request, 'metering'):
+                for role in context['roles']:
+                    role['graph_url'] = (
+                        reverse('horizon:infrastructure:roles:performance',
+                                args=[role['id']]) + '?' +
+                        metering.url_part('hardware.cpu.load.1min', False) +
+                        '&date_options=1'
+                    )
         return context
 
     def get_progress_update(self, request, data):

tuskar_boxes/static/tuskar_boxes/scss/tuskar_boxes.scss

@@ -112,3 +112,25 @@
 .boxes-flavor {
     padding-bottom: 10px;
 }
+
+.role-distribution {
+    .roles-graph-label {
+        margin-top: 8px;
+    }
+    .role-controller {
+        color: #ce5c00;
+    }
+    .role-compute {
+        color: #4e9a06;
+    }
+    .role-swift-storage {
+        color: #204a87;
+    }
+    .role-cinder-storage {
+        color: #5c3566;
+    }
+}
+
+.roles-graph-label {
+    margin-top: 12px;
+}

tuskar_boxes/templates/tuskar_boxes/overview/index.html

@@ -43,13 +43,39 @@
   </div>
   <div class="col-xs-8">
     {% if stack %}
-      {% include "tuskar_boxes/overview/role_nodes_status.html" %}
+      {% if stack.is_deployed and stack.is_initialized %}
+        {% include "tuskar_boxes/overview/role_nodes_live.html" %}
+      {% else %}
+        {% include "tuskar_boxes/overview/role_nodes_status.html" %}
+      {% endif %}
     {% else %}
       {% include "tuskar_boxes/overview/role_nodes_edit.html" %}
     {% endif %}
   </div>
 </div>
 
+<div class="row">
+  <div class="col-xs-12">
+    {% if stack and stack.is_deployed and stack.is_initialized %}
+        <h4>Nodes Distribution</h4>
+        <div class="role-distribution">
+            {% for role in roles %}
+                {% if role.distribution %}
+                <span class="role-{{ role.name|slugify }}">
+                    {{ role.name|capfirst }}: {{ role.distribution }}%
+                </span>
+                {% endif %}
+            {% endfor %}
+        </div>
+        <div class="boxes-nodes">
+            {% for node in nodes %}{% spaceless %}
+                <div class="boxes-node boxes-role-{{ node.role_slug }}"></div>
+            {% endspaceless %}{% endfor %}
+        </div>
+    {% endif %}
+  </div>
+</div>
+
 <script type="text/javascript">
 (window.$ || window.addHorizonLoadEvent)(function () {
     $('div.boxes-node').popover({

tuskar_boxes/templates/tuskar_boxes/overview/role_nodes_live.html

@@ -0,0 +1,35 @@
+{% load i18n %}
+{% load url from future %}
+{% load horizon %}
+
+<div class="row">
+    <div class="col-xs-7">
+        <h4>{% trans "Deployment Roles" %}</h4>
+    </div>
+    <div class="col-xs-5">
+        <div class="roles-graph-label">
+            {% trans "System Load in Last Hour" %}
+        </div>
+    </div>
+</div>
+<div class="row">
+  <div class="deploy-role-status col-xs-12">
+  {% for role in roles %}
+    <div class="boxes-role boxes-role-{{ role.name|slugify }} clearfix">
+        <div class="col-xs-1 deploy-role-count">
+          {{ role.deployed_node_count }}
+        </div>
+        <div class="col-xs-6 deploy-role-name">
+          <strong class="deployment-roles-label">{{ role.name|capfirst }}</strong>
+        </div>
+        <div class="col-xs-5 deploy-role-graph">
+            {% if role.graph_url %}
+                {% include "infrastructure/_performance_chart.html" with url=role.graph_url %}
+            {% else %}
+                {% trans "Metering service disabled" %}
+            {% endif %}
+        </div>
+      </div>
+  {% endfor %}
+  </div>
+</div>