Added flavor charts

This adds jtomasek and ifarkas's capacity bars and line charts,
as well as a new non-modal line chart.  All use preset data for now.

Change-Id: Iaa4f5b3962d7682207a9ccc7d13ffe037c159e40

3 files changed, 198 insertions, 0 deletions

diff --git a/horizon/static/horizon/js/horizon.d3linechart.js b/horizon/static/horizon/js/horizon.d3linechart.js
new file mode 100644
index 00000000..d21a185d
--- /dev/null
+++ b/horizon/static/horizon/js/horizon.d3linechart.js
@@ -0,0 +1,105 @@
+/*
+    Draw a non-modal line chart in d3.
+
+    Example:
+        <div id="some_sort_of_data_chart"
+             class="line_chart"
+             data-line-url="/url/to/get/data/from"
+        </div>
+*/
+
+horizon.d3_line_chart = {
+  line_charts: [],
+
+  init: function() {
+    this.line_charts = $('div[data-line-url]');
+
+    this._initialCreation(this.line_charts);
+  },
+
+  draw: function(element, url) {
+    var self = this;
+
+    var margin = {top: 20, right: 80, bottom: 30, left: 50};
+    var width = 1000 - margin.left - margin.right;
+    var height = 400 - margin.top - margin.bottom;
+
+    var svg = d3.select("#"+element)
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    var x = d3.time.scale().range([0, width]);
+    var y = d3.scale.linear().range([height, 0]);
+
+    var xAxis = d3.svg.axis()
+                      .scale(x)
+                      .orient("bottom");
+    var yAxis = d3.svg.axis()
+                  .scale(y)
+                  .orient("left");
+
+    var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%L").parse;
+
+    var line = d3.svg.line().interpolate("linear")
+                            .x(function(d) { return x(d.date); })
+                            .y(function(d) { return y(d.value); });
+
+    var color = d3.scale.category10();
+
+    d3.json(url, function(error, data) {
+      data.forEach(function(d) {
+        d.date = parseDate(d.date);
+      });
+
+      color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'date'; }));
+
+      var usage_values = color.domain().map(function(name) {
+        return {
+          name: name,
+          values: data.map(function(d) {
+            return {date: d.date, value: d[name]};
+          })
+        };
+      });
+
+      x.domain(d3.extent(data, function(d) { return d.date; }));
+      y.domain([
+        d3.min(usage_values, function(u) { return d3.min(u.values, function(v) { return v.value; }) - 1; }),
+        d3.max(usage_values, function(u) { return d3.max(u.values, function(v) { return v.value; }) + 6; })
+      ]);
+
+      svg.append("g")
+         .attr("transform", "translate(0," + height + ")")
+         .attr("class", "axis")
+         .call(xAxis);
+      svg.append("g")
+         .attr("class", "axis")
+         .call(yAxis)
+
+      var usage = svg.selectAll(".usage")
+                    .data(usage_values)
+                    .enter().append("g");
+
+      usage.append("path")
+        .attr("d", function(d) { return line(d.values); })
+        .style("stroke", function(d) { return color(d.name); })
+        .style("fill", "none")
+        .style("stroke-width", 3);
+    });
+  },
+
+  // Draw the initial d3 bars
+  _initialCreation: function(charts) {
+    var scope = this;
+    $(charts).each(function(index, element) {
+      var chart_element = $(element);
+
+      var chart_url = chart_element.attr('data-line-url');
+
+      scope.draw($(element).attr('id'), chart_url);
+    });
+  }
+};
diff --git a/horizon/templates/horizon/_scripts.html b/horizon/templates/horizon/_scripts.html
index 201cba47..2f9ebce6 100644
--- a/horizon/templates/horizon/_scripts.html
+++ b/horizon/templates/horizon/_scripts.html
@@ -42,6 +42,7 @@
 <script src='{{ STATIC_URL }}horizon/js/horizon.capacity.js' type='text/javascript' charset='utf-8'></script>
 <script src='{{ STATIC_URL }}horizon/js/horizon.d3modallinechart.js' type='text/javascript' charset='utf-8'></script>
 <script src='{{ STATIC_URL }}horizon/js/horizon.d3circleschart.js' type='text/javascript' charset='utf-8'></script>
+<script src='{{ STATIC_URL }}horizon/js/horizon.d3linechart.js' type='text/javascript' charset='utf-8'></script>
 {% block custom_js_files %}{% endblock %}
 {% endcompress %}
 
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 18d900a4..2091eeb3 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
@@ -32,4 +32,96 @@
     <dt>{% trans "Swap Disk" %}</dt>
     <dd>{{ flavor.swap_disk.value }} {{ flavor.swap_disk.unit }}</dd>
   </dl>
+
+  <h4>{% trans "Capacities" %}</h4>
+  <hr class="header_rule">
+  <table class="capacities">
+    <tr>
+      <td class="capacity_label">{% trans "CPU" %}:</td>
+      <td>
+        <div id="cpu_capacity_usage"
+             class="capacity_bar"
+             data-capacity-limit="{{ 100 }}"
+             data-capacity-used="{{ 100 }}"
+             data-average-capacity-used="{{ 47 }}">
+        </div>
+      </td>
+      <td>
+        <a href="#" class="modal_chart">100/100 GHz</a>
+      </td>
+    </tr>
+    <tr>
+      <td class="capacity_label">{% trans "RAM" %}:</td>
+      <td>
+        <div id="ram_capacity_usage"
+             class="capacity_bar"
+             data-capacity-limit="{{ 100 }}"
+             data-capacity-used="{{ 79 }}"
+             data-average-capacity-used="{{ 47 }}">
+        </div>
+      </td>
+      <td>
+        <a href="#" class="modal_chart">79/100</a>
+      </td>
+    </tr>
+    <tr>
+      <td class="capacity_label">{% trans "Storage" %}:</td>
+      <td>
+        <div id="storage_capacity_usage"
+             class="capacity_bar"
+             data-capacity-limit="{{ 100 }}"
+             data-capacity-used="{{ 50 }}"
+             data-average-capacity-used="{{ 70 }}">
+        </div>
+      </td>
+      <td>
+        <a href="#" class="modal_chart">50/100</a>
+      </td>
+    </tr>
+    <tr>
+      <td class="capacity_label">{% trans "Network" %}:</td>
+      <td>
+        <div id="network_capacity_usage"
+             class="capacity_bar"
+             data-capacity-limit="{{ 100 }}"
+             data-capacity-used="{{ 60 }}"
+             data-average-capacity-used="{{ 70 }}">
+        </div>
+      </td>
+      <td>
+        <a href="#" class="modal_chart">60/100</a>
+      </td>
+    </tr>
+  </table>
+
+  <h4>{% trans "Active Instances" %}</h4>
+  <hr class="header_rule">
+  <table class="chart">
+    <tr>
+      <td>
+        <div id="active_instances"
+             class="line_chart"
+             data-line-url="/infrastructure/resource_management/racks/usage_data">
+        </div>
+      </td>
+    </tr>
+  </table>
 </div>
+
+<script type="text/javascript" charset="utf-8">
+  if(typeof horizon.Capacity !== 'undefined') {
+    horizon.Capacity.init();
+  } else {
+    addHorizonLoadEvent(function() {
+      horizon.Capacity.init();
+    });
+  }
+
+  if(typeof horizon.d3_line_chart !== 'undefined') {
+    horizon.d3_line_chart.init();
+  } else {
+    addHorizonLoadEvent(function() {
+      horizon.d3_line_chart.init();
+    });
+  }
+</script>