Add 'Summary of instances and Usage' chart to Rack detail page

Change-Id: I62b4fbe454c37d6b28192fbe25215af134677516

2 files changed, 86 insertions, 1 deletions

diff --git a/openstack_dashboard/api/tuskar.py b/openstack_dashboard/api/tuskar.py
index 540168b2..08bd304c 100644
--- a/openstack_dashboard/api/tuskar.py
+++ b/openstack_dashboard/api/tuskar.py
@@ -411,6 +411,40 @@ class Rack(StringIdAPIResourceWrapper):
         # used)
         return [node for node in self.list_nodes if node.alerts]
 
+    @property
+    def list_flavors(self):
+        if not hasattr(self, '_flavors'):
+            # FIXME just a mock of used instances, add real values
+            used_instances = 0
+
+            added_flavors = tuskarclient(self.request).flavors\
+                                .list(self.resource_class.id)
+            self._flavors = []
+            for f in added_flavors:
+                flavor_obj = Flavor(f)
+                #flavor_obj.max_vms = f.max_vms
+
+                # FIXME just a mock of used instances, add real values
+                used_instances += 2
+                flavor_obj.used_instances = used_instances
+                self._flavors.append(flavor_obj)
+
+        return self._flavors
+
+    @property
+    def all_used_instances(self):
+        return [flavor.used_instances for flavor in self.list_flavors]
+
+    @property
+    def total_instances(self):
+        # FIXME just mock implementation, add proper one
+        return sum(self.all_used_instances)
+
+    @property
+    def remaining_capacity(self):
+        # FIXME just mock implementation, add proper one
+        return 100 - self.total_instances
+
 
 class ResourceClass(StringIdAPIResourceWrapper):
     """Wrapper for the ResourceClass object  returned by the
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
index 2728f6e0..48e12b00 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/_detail_overview.html
@@ -1,5 +1,6 @@
 {% load i18n sizeformat %}
 {% load url from future %}
+{% load chart_helpers %}
 
 <div class="info row-fluid detail">
   <div class="span4">
@@ -61,7 +62,57 @@
   <div class="span6">
     <h4>{% trans "Summary of instances and Usage" %}</h4>
     <hr class="header_rule">
-    TODO
+    <div>
+      <strong>{{ rack.total_instances }}</strong> instances
+      <strong>{{ rack.remaining_capacity }}%</strong>  capacity remaining
+    </div>
+
+    <div class="flavor_usage_bar"
+         data-popup-free='{{ rack|remaining_capacity_by_flavors }}'
+         data-single-bar-orientation="horizontal"
+         data-single-bar-height="50"
+         data-single-bar-width="100%"
+         data-single-bar-used="{{ rack|all_used_instances }}"
+         data-single-bar-auto-scale-selector=".flavors_scale_selector"
+         data-single-bar-color-scale-range='["#000060", "#99FFFF"]'>
+    </div>
+
+    <table class="flavor_usages">
+      <tr>
+        {% for flavor in rack.list_flavors %}
+          <td class="flavor_usage_label">
+            <a href="{% url 'horizon:infrastructure:resource_management:flavors:detail' flavor.id %}">{{ flavor.name }}</a>
+          </td>
+        {% endfor %}
+      </tr>
+      <tr>
+        {% for flavor in rack.list_flavors %}
+          <td>
+            <div class="flavor_usage_bar flavors_scale_selector"
+                 data-popup-average='<p>Average capacity consumed by instances of {{flavor.name}} flavor in {{rack.name}} class.</p>
+                                     <p>{{ flavor.used_instances }}%, <strong>{{ flavor.used_instances }} instances</strong></p>'
+                 data-single-bar-orientation="vertical"
+                 data-single-bar-height="100%"
+                 data-single-bar-width="40"
+                 data-single-bar-used="{{ flavor.used_instances }}"
+                 data-single-bar-average-used="{{ 50 }}"
+                 data-single-bar-auto-scale-selector=".flavors_scale_selector"
+                 data-single-bar-color-scale-range='["#000060", "#99FFFF"]'>
+            </div>
+          </td>
+        {% endfor %}
+      </tr>
+      <tr>
+        {% for flavor in resource_class.list_flavors %}
+          <td class="modal_chart flavor_usage_text"><a href="{{ "#" }}">{{ flavor.used_instances }}%</a></td>
+        {% endfor %}
+      </tr>
+      <tr>
+        {% for flavor in resource_class.list_flavors %}
+          <td class="flavor_usage_text">{{ flavor.used_instances }} inst.</td>
+        {% endfor %}
+      </tr>
+    </table>
    </div>
 
   <div class="span6 alerts">