Unprovisioned node detail page

Change-Id: Ie70c098a4e81e1a122e77863260669ca180f6869

10 files changed, 157 insertions, 58 deletions

diff --git a/horizon/static/horizon/js/horizon.capacity.js b/horizon/static/horizon/js/horizon.capacity.js
index 7578da74..f1e5eb4f 100644
--- a/horizon/static/horizon/js/horizon.capacity.js
+++ b/horizon/static/horizon/js/horizon.capacity.js
@@ -12,10 +12,13 @@
     With this capacity bar, you then need to add some data- HTML attributes
     to the div #your_capacity_bar_id. The available data- attributes are:
 
-      data-capacity-used="integer" REQUIRED
+      data-chart-type="capacity_bar_chart" REQUIRED
+          Must be "capacity_bar_chart".
+
+      data-capacity-used="integer" OPTIONAL
           Integer representing the total number used by the user.
 
-      data-capacity-limit="integer" REQUIRED
+      data-capacity-limit="integer" OPTIONAL
           Integer representing the total quota limit the user has. Note this IS
           NOT the amount remaining they can use, but the total original capacity.
 
@@ -28,7 +31,7 @@ horizon.Capacity = {
 
   //  Determines the capacity bars to be used for capacity display.
   init: function() {
-    this.capacity_bars = $('div[data-capacity-used]');
+    this.capacity_bars = $('div[data-chart-type="capacity_bar_chart"]');
 
     // Draw the capacity bars
     this._initialCreation(this.capacity_bars);
@@ -55,7 +58,7 @@ horizon.Capacity = {
         .attr("width", w)
         .attr("height", h)
         .style("background-color", "white")
-        .append("g")
+        .append("g");
 
     // background - unused resources
     bar.append("rect")
@@ -66,56 +69,62 @@ horizon.Capacity = {
       .attr("ry", lvl_curve)
       .style("fill", bkgrnd)
       .style("stroke", "#000000")
-      .style("stroke-width", 1)
+      .style("stroke-width", 1);
 
     // used resources
-    bar.append("rect")
-      .attr("class", "usedbar")
-      .attr("y", 0)
-      .attr("id", "test")
-      .attr("width", 0)
-      .attr("height", h)
-      .attr("rx", lvl_curve)
-      .attr("ry", lvl_curve)
-      .style("fill", usage_color(used_perc))
-      .style("stroke", "#000000")
-      .style("stroke-width", 1)
-      .attr("d", used_perc)
-      .transition()
-        .duration(500)
-        .attr("width", used_perc + "%")
+    if (used_perc) {
+      bar.append("rect")
+         .attr("class", "usedbar")
+         .attr("y", 0)
+         .attr("id", "test")
+         .attr("width", 0)
+         .attr("height", h)
+         .attr("rx", lvl_curve)
+         .attr("ry", lvl_curve)
+         .style("fill", usage_color(used_perc))
+         .style("stroke", "#000000")
+         .style("stroke-width", 1)
+         .attr("d", used_perc)
+         .transition()
+            .duration(500)
+            .attr("width", used_perc + "%");
+      }
 
     // average
-    bar.append("rect")
-      .attr("y",1)
-      .attr("x", 0)
-      .attr("class", "average")
-      .attr("height", h-2)
-      .attr("width", 1)
-      .style("fill", "black")
-      .transition()
-        .duration(500)
-        .attr("x", average_perc + "%")
+    if (average_perc) {
+      bar.append("rect")
+         .attr("y",1)
+         .attr("x", 0)
+         .attr("class", "average")
+         .attr("height", h-2)
+         .attr("width", 1)
+         .style("fill", "black")
+         .transition()
+            .duration(500)
+            .attr("x", average_perc + "%");
+    }
 
     // used text
-    bar.append("text")
-      .text(used_perc + "%")
-      .attr("y", 8)
-      .attr("x", 3)
-      .attr("dominant-baseline", "middle")
-      .attr("font-size", 10)
-      .transition()
-        .duration(500)
-        .attr("x", function() {
-          // position the percentage label
-          if (used_perc > 99 && used_px > 25){
-            return used_px - 30;
-          } else if (used_px > 25) {
-            return used_px - 25;
-          } else {
-            return used_px + 3;
-          }
-        })
+    if (used_perc) {
+      bar.append("text")
+         .text(used_perc + "%")
+         .attr("y", 8)
+         .attr("x", 3)
+         .attr("dominant-baseline", "middle")
+         .attr("font-size", 10)
+         .transition()
+            .duration(500)
+            .attr("x", function() {
+              // position the percentage label
+              if (used_perc > 99 && used_px > 25){
+                return used_px - 30;
+              } else if (used_px > 25) {
+                return used_px - 25;
+              } else {
+                return used_px + 3;
+              }
+            });
+    }
   },
 
 
@@ -137,7 +146,7 @@ horizon.Capacity = {
 
       if (!isNaN(capacity_limit) && !isNaN(capacity_used)) {
         var percentage_used = Math.round((capacity_used / capacity_limit) * 100);
-        var used_px = progress_element.width() / 100 * percentage_used
+        var used_px = progress_element.width() / 100 * percentage_used;
 
       } else { // If NaN percentage_used is 0
         var percentage_used = 0;
@@ -148,3 +157,7 @@ horizon.Capacity = {
     });
   }
 };
+
+horizon.addInitFunction(function () {
+  horizon.Capacity.init();
+});
diff --git a/openstack_dashboard/api/tuskar.py b/openstack_dashboard/api/tuskar.py
index e6031867..964f3d61 100644
--- a/openstack_dashboard/api/tuskar.py
+++ b/openstack_dashboard/api/tuskar.py
@@ -242,6 +242,10 @@ class Node(StringIdAPIResourceWrapper):
             self._vm_capacity = Capacity(vm_capacity)
         return self._vm_capacity
 
+    @property
+    def is_provisioned(self):
+        return False
+
 
 class Rack(StringIdAPIResourceWrapper):
     """Wrapper for the Rack object  returned by the
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html
index 3a6905e0..fd31a776 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/flavors/_detail_overview.html
@@ -45,6 +45,7 @@
         <td>
           <div id="cpu_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ flavor.vcpu.value }}"
                data-capacity-used="{{ flavor.vcpu.usage }}"
                data-average-capacity-used="{{ flavor.vcpu.average }}">
@@ -59,6 +60,7 @@
         <td>
           <div id="ram_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ flavor.ram.value }}"
                data-capacity-used="{{ flavor.ram.usage }}"
                data-average-capacity-used="{{ flavor.ram.average }}">
@@ -73,6 +75,7 @@
         <td>
           <div id="root_disk_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ flavor.root_disk.value }}"
                data-capacity-used="{{ flavor.root_disk.usage }}"
                data-average-capacity-used="{{ flavor.root_disk.average }}">
@@ -87,6 +90,7 @@
         <td>
           <div id="ephemeral_disk_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ flavor.ephemeral_disk.value }}"
                data-capacity-used="{{ flavor.ephemeral_disk.usage }}"
                data-average-capacity-used="{{ flavor.ephemeral_disk.average }}">
@@ -101,6 +105,7 @@
         <td>
           <div id="swap_disk_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ flavor.swap_disk.value }}"
                data-capacity-used="{{ flavor.swap_disk.usage }}"
                data-average-capacity-used="{{ flavor.swap_disk.average }}">
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
index f1acd571..22510e53 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/_detail_overview.html
@@ -42,9 +42,11 @@
     <table class="capacities">
       <tr>
         <td class="capacity_label">{% trans "CPU" %}:</td>
+        {% if node.is_provisioned %}
         <td>
           <div id="cpu_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ node.cpu.value }}"
                data-capacity-used="{{ node.cpu.usage }}"
                data-average-capacity-used="{{ 2 }}">
@@ -53,12 +55,23 @@
         <td>
           <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.cpu.usage }}/{{ node.cpu.value }} {{ node.cpu.unit }}</a>
         </td>
+        {% else %}
+        <td>
+          <div id="cpu_capacity_usage"
+               class="capacity_bar"
+               data-chart-type="capacity_bar_chart">
+          </div>
+        </td>
+        <td></td>
+        {% endif %}
       </tr>
       <tr>
         <td class="capacity_label">{% trans "RAM" %}:</td>
+        {% if node.is_provisioned %}
         <td>
           <div id="ram_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ node.ram.value }}"
                data-capacity-used="{{ node.ram.usage }}"
                data-average-capacity-used="{{ 12 }}">
@@ -67,12 +80,23 @@
         <td>
           <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.ram.usage }}/{{ node.ram.value }} {{ node.ram.unit }}</a>
         </td>
+        {% else %}
+        <td>
+          <div id="ram_capacity_usage"
+               class="capacity_bar"
+               data-chart-type="capacity_bar_chart">
+          </div>
+        </td>
+        <td></td>
+        {% endif %}
       </tr>
       <tr>
         <td class="capacity_label">{% trans "Storage" %}:</td>
+        {% if node.is_provisioned %}
         <td>
           <div id="storage_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ node.storage.value }}"
                data-capacity-used="{{ node.storage.usage }}"
                data-average-capacity-used="{{ 6 }}">
@@ -81,12 +105,23 @@
         <td>
           <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.storage.usage }}/{{ node.storage.value }} {{ node.storage.unit }}</a>
         </td>
+        {% else %}
+        <td>
+          <div id="storage_capacity_usage"
+               class="capacity_bar"
+               data-chart-type="capacity_bar_chart">
+          </div>
+        </td>
+        <td></td>
+        {% endif %}
       </tr>
       <tr>
         <td class="capacity_label">{% trans "Network" %}:</td>
+        {% if node.is_provisioned %}
         <td>
           <div id="network_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ node.network.value }}"
                data-capacity-used="{{ node.network.usage }}"
                data-average-capacity-used="{{ 40 }}">
@@ -95,7 +130,50 @@
         <td>
           <a href="#" data-chart-type="modal_line_chart" data-url="/infrastructure/resource_management/racks/usage_data">{{ node.network.usage }}/{{ node.network.value }} {{ node.network.unit }}</a>
         </td>
+        {% else %}
+        <td>
+          <div id="network_capacity_usage"
+               class="capacity_bar"
+               data-chart-type="capacity_bar_chart">
+          </div>
+        </td>
+        <td></td>
+        {% endif %}
       </tr>
     </table>
   </div>
 </div>
+
+<div class="row-fluid detail">
+  <div class="span6">
+    <h4>{% trans "Summary of Instances and Usage" %}</h4>
+    <hr class="header_rule">
+    {% if node.is_provisioned %}
+
+    {% else %}
+    <p>{% trans "No data available yet." %}</p>
+    {% endif %}
+  </div>
+
+  <div class="span6">
+    <h4>{% trans "Active alerts" %}</h4>
+    <hr class="header_rule">
+    {% if node.is_provisioned %}
+
+    {% else %}
+    <p>{% trans "No data available yet." %}</p>
+    {% endif %}
+  </div>
+</div>
+
+<div class="row-fluid detail">
+  <div class="span6">
+    <h4>{% trans "Top Communicating Nodes" %}</h4>
+    <hr class="header_rule">
+    {% if node.is_provisioned %}
+
+    {% else %}
+    <p>{% trans "No data available yet." %}</p>
+    {% endif %}
+  </div>
+</div>
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/detail.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/detail.html
index aff31d5c..42f2f73d 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/detail.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/nodes/detail.html
@@ -30,6 +30,7 @@
       <td>
         <div id="node_usage"
              class="capacity_bar"
+             data-chart-type="capacity_bar_chart"
              data-capacity-limit="{{ node.vm_capacity.value }}"
              data-capacity-used="{{ node.vm_capacity.usage }}"
              data-average-capacity-used="{{ 4 }}">
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 ba282df7..78e8ea11 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
@@ -38,6 +38,7 @@
         <td>
           <div id="{{ capacity.name }}_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ capacity.value }}"
                data-capacity-used="{{ capacity.usage }}"
                data-average-capacity-used="{{ capacity.average }}">
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/detail.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/detail.html
index 54a0d744..050fa0a2 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/detail.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/racks/detail.html
@@ -35,6 +35,7 @@
       <td>
         <div id="rack_usage"
              class="capacity_bar"
+             data-chart-type="capacity_bar_chart"
              data-capacity-limit="{{ rack.vm_capacity.value }}"
              data-capacity-used="{{ rack.vm_capacity.usage }}"
              data-average-capacity-used="{{ 4 }}">
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
index 1d07531c..60570dd7 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/_detail_overview.html
@@ -36,6 +36,7 @@
         <td>
           <div id="cpu_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ resource_class.cpu.value }}"
                data-capacity-used="{{ resource_class.cpu.usage }}"
                data-average-capacity-used="{{ 12 }}">
@@ -50,6 +51,7 @@
         <td>
           <div id="ram_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ resource_class.ram.value }}"
                data-capacity-used="{{ resource_class.ram.usage }}"
                data-average-capacity-used="{{ 12 }}">
@@ -64,6 +66,7 @@
         <td>
           <div id="storage_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ resource_class.storage.value }}"
                data-capacity-used="{{ resource_class.storage.usage }}"
                data-average-capacity-used="{{ 12 }}">
@@ -78,6 +81,7 @@
         <td>
           <div id="network_capacity_usage"
                class="capacity_bar"
+               data-chart-type="capacity_bar_chart"
                data-capacity-limit="{{ resource_class.network.value }}"
                data-capacity-used="{{ resource_class.network.usage }}"
                data-average-capacity-used="{{ 12 }}">
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/detail.html b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/detail.html
index 114e01a3..3d28a224 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/detail.html
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/templates/resource_management/resource_classes/detail.html
@@ -24,6 +24,7 @@
       <td>
         <div id="resource_class_usage"
              class="capacity_bar"
+             data-chart-type="capacity_bar_chart"
              data-capacity-limit="{{ resource_class.vm_capacity.value }}"
              data-capacity-used="{{ resource_class.vm_capacity.usage }}"
              data-average-capacity-used="{{ 4 }}">
diff --git a/openstack_dashboard/dashboards/infrastructure/templates/infrastructure/base_detail.html b/openstack_dashboard/dashboards/infrastructure/templates/infrastructure/base_detail.html
index 5fe69021..f7274ea7 100644
--- a/openstack_dashboard/dashboards/infrastructure/templates/infrastructure/base_detail.html
+++ b/openstack_dashboard/dashboards/infrastructure/templates/infrastructure/base_detail.html
@@ -24,13 +24,4 @@
   </div>
 </div>
 
-<script type="text/javascript" charset="utf-8">
-  if(typeof horizon.Capacity !== 'undefined') {
-    horizon.Capacity.init();
-  } else {
-    addHorizonLoadEvent(function() {
-      horizon.Capacity.init();
-    });
-  }
-</script>
 {% endblock %}