Circle charts real numbers of racks and nodes

- adding real number of nodes to rack detail page
- adding real number of racks to resource class detail page
- enhancing the circle charts

Change-Id: I8cf71973a02843ceaf5f17c39f0aa7bd1eba2c83

7 files changed, 149 insertions, 41 deletions

diff --git a/horizon/static/horizon/js/horizon.d3circleschart.js b/horizon/static/horizon/js/horizon.d3circleschart.js
index 3ec6f146..fad0b7d8 100644
--- a/horizon/static/horizon/js/horizon.d3circleschart.js
+++ b/horizon/static/horizon/js/horizon.d3circleschart.js
@@ -88,6 +88,7 @@ horizon.d3_circles_chart = {
     this.size = jquery_element.data('size');
     this.time = jquery_element.data('time');
     this.url = jquery_element.data('url');
+
     this.final_url = this.url;
     if (this.final_url.indexOf('?') > -1){
       this.final_url += '&time=' + this.time;
@@ -109,8 +110,9 @@ horizon.d3_circles_chart = {
             // not delete and create
             $(self.html_element).html("");
 
-            self.data = data
-            self.chart_class.render(self.html_element, self.size, self.data);
+            self.data = data.data;
+            self.settings = data.settings;
+            self.chart_class.render(self.html_element, self.size, self.data, self.settings);
           })
           .fail(function() {
             // FIXME add proper fail message
@@ -135,7 +137,8 @@ horizon.d3_circles_chart = {
     // this.charts.add_or_update(chart)
     chart.refresh();
   },
-  render: function(html_element, size, data){
+  render: function(html_element, size, data, settings){
+    var self = this;
     // FIXME rewrite to scatter plot once we have some cool D3 chart
     // library
     var width = size + 4,
@@ -167,13 +170,25 @@ horizon.d3_circles_chart = {
         .attr("r", round)//function(d) { return d.r; })// can be sent form server
         .attr("cx", center_x)
         .attr("cy", center_y)
-        .attr("stroke", "black")
+        .attr("stroke", "grey")
         .attr("stroke-width", function(d) {
           return 1;
         })
-        .style("fill", function(d) {return d.color; })
-        .on("mouseover", function(d){tooltip.html("Rack XY <br/>" + d.status);
-                                     tooltip.style("visibility", "visible");})
+        .style("fill", function(d) {
+          if (d.color){
+            return d.color;
+          } else if (settings.scale == "linear_color_scale"){
+            return self.linear_color_scale(d.percentage, settings.domain, settings.range)
+
+          }
+        })
+        .on("mouseover", function(d){
+          if (d.tooltip) {
+            tooltip.html(d.tooltip);
+          } else {
+            tooltip.html(d.name + "<br/>" + d.status);
+          }
+          tooltip.style("visibility", "visible");})
         .on("mousemove", function(d){tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
         .on("mouseout", function(d){tooltip.style("visibility", "hidden");});
         ;
@@ -185,6 +200,12 @@ horizon.d3_circles_chart = {
 
     */
   },
+  linear_color_scale: function(percentage, domain, range){
+    usage_color = d3.scale.linear()
+      .domain(domain)
+      .range(range);
+    return usage_color(percentage);
+  },
   bind_commands: function (){
     var change_time_command_selector = 'select[data-circles-chart-command="change_time"]';
     var change_url_command_selector = '[data-circles-chart-command="change_url"]';
@@ -218,14 +239,14 @@ horizon.d3_circles_chart = {
       // Invoker of the command should know about it's receiver.
       // Also invoker brings all parameters of the command.
       this.receiver_selector = invoker.data('receiver');
-      this.new_time = invoker.val();
+      this.new_time = invoker.find("option:selected").val();
 
       this.execute = execute;
       function execute(){
           var self = this;
           $(this.receiver_selector).each(function(){
             // change time of the chart
-            $(this).data('time', this.new_time);
+            $(this).data('time', self.new_time);
             // refresh the chart
             chart_class.refresh(this)
           });
@@ -242,7 +263,7 @@ horizon.d3_circles_chart = {
         var self = this;
         $(this.receiver_selector).each(function(){
           // change time of the chart
-          $(this).data('url', this.new_url);
+          $(this).data('url', self.new_url);
           // refresh the chart
           chart_class.refresh(this)
         });
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/racks/urls.py b/openstack_dashboard/dashboards/infrastructure/resource_management/racks/urls.py
index 4f95d240..0ade63a0 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/racks/urls.py
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/racks/urls.py
@@ -32,5 +32,7 @@ urlpatterns = patterns(VIEW_MOD,
     url(RACKS % 'edit_status/', EditRackStatusView.as_view(),
                                 name='edit_status'),
     url(RACKS % 'detail', DetailView.as_view(), name='detail'),
-    url(RACKS % 'top_communicating.json', 'top_communicating'),
+    url(RACKS % 'top_communicating.json', 'top_communicating',
+        name='top_communicating'),
+    url(RACKS % 'node_health.json', 'node_health', name='node_health'),
 )
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py b/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py
index 4268c29f..2ab8bf82 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/racks/views.py
@@ -174,25 +174,26 @@ class UsageDataView(View):
 
 
 def top_communicating(request, rack_id=None):
+    # FIXME replace mock data
     random.seed()
     data = []
-    statuses = ["OFF", "Good", "Something is wrong", "Disaster"]
+    statuses = ["Insane level of communication",
+                "High level of communication",
+                "Normal level of communication",
+                "Low level of communication"]
 
-    number_of_elements = random.randint(50, 60)
-    for index in range(number_of_elements):
+    rack = api.tuskar.Rack.get(request, rack_id)
+    for node in rack.nodes:
         status = random.randint(0, 3)
         percentage = random.randint(0, 100)
 
-        # count black/white color depending to percentage
-        # FIXME encapsulate the algoritm of getting color to the library,
-        # If the algorithm will be used in multiple places. Then pass the
-        # alghoritm name and parameters.
-        # If it will be used only in one place, pass the color directly.
-        color_n = 255 / 100 * percentage
-        color = "rgb(%s, %s, %s)" % (color_n, color_n, color_n)
+        tooltip = ("<p>Node: <strong>{0}</strong></p><p>{1}</p>").format(
+            node['id'],
+            statuses[status])
 
-        data.append({'color': color,
+        data.append({'tooltip': tooltip,
                      'status': statuses[status],
+                     'scale': 'linear_color_scale',
                      'percentage': percentage,
                      'id': "FIXME_RACK id",
                      'name': "FIXME name",
@@ -200,5 +201,44 @@ def top_communicating(request, rack_id=None):
 
         data.sort(key=lambda x: x['percentage'])
 
-    return HttpResponse(simplejson.dumps(data),
+    # FIXME dynamically set the max domain, based on data
+    settings = {'scale': 'linear_color_scale',
+                'domain': [0, max([datum['percentage'] for datum in data])],
+                'range': ["#000060", "#99FFFF"]}
+    res = {'data': data,
+           'settings': settings}
+    return HttpResponse(simplejson.dumps(res),
+        mimetype="application/json")
+
+
+def node_health(request, rack_id=None):
+    # FIXME replace mock data
+    random.seed()
+    data = []
+    statuses = ["Good", "Warnings", "Disaster"]
+    colors = ["rgb(244,244,244)", "rgb(240,170,0)", "rgb(200,0,0)"]
+
+    rack = api.tuskar.Rack.get(request, rack_id)
+
+    for node in rack.nodes:
+        rand_index = random.randint(0, 2)
+        percentage = (2 - rand_index) * 50
+        color = colors[rand_index]
+
+        tooltip = ("<p>Node: <strong>{0}</strong></p><p>{1}</p>").format(
+            node['id'],
+            statuses[rand_index])
+
+        data.append({'tooltip': tooltip,
+                     'color': color,
+                     'status': statuses[rand_index],
+                     'percentage': percentage,
+                     'id': node['id'],
+                     'name': node['id'],
+                     'url': "FIXME url"})
+
+        data.sort(key=lambda x: x['percentage'])
+
+    res = {'data': data}
+    return HttpResponse(simplejson.dumps(res),
         mimetype="application/json")
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/urls.py b/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/urls.py
index c767dfe9..8f4b4125 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/urls.py
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/urls.py
@@ -18,9 +18,11 @@ from .views import (CreateView, UpdateView, DetailView, UpdateRacksView,
                     UpdateFlavorsView)
 
 RESOURCE_CLASS = r'^(?P<resource_class_id>[^/]+)/%s$'
+VIEW_MOD = 'openstack_dashboard.dashboards.infrastructure.' \
+           'resource_management.resource_classes.views'
 
 urlpatterns = patterns(
-    '',
+    VIEW_MOD,
     url(r'^create$', CreateView.as_view(), name='create'),
     url(r'^(?P<resource_class_id>[^/]+)/$',
         DetailView.as_view(), name='detail'),
@@ -28,4 +30,7 @@ urlpatterns = patterns(
     url(RESOURCE_CLASS % 'update_racks', UpdateRacksView.as_view(),
         name='update_racks'),
     url(RESOURCE_CLASS % 'update_flavors', UpdateFlavorsView.as_view(),
-        name='update_flavors'))
+        name='update_flavors'),
+    url(RESOURCE_CLASS % 'rack_health.json', 'rack_health',
+        name='rack_health'),
+)
diff --git a/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/views.py b/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/views.py
index 910f9385..272057df 100644
--- a/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/views.py
+++ b/openstack_dashboard/dashboards/infrastructure/resource_management/resource_classes/views.py
@@ -20,8 +20,11 @@
 Views for managing resource classes
 """
 import logging
+import random
 
 from django.core.urlresolvers import reverse_lazy, reverse
+from django.http import HttpResponse
+from django.utils import simplejson
 from django.utils.translation import ugettext_lazy as _
 
 from horizon import tabs
@@ -116,3 +119,38 @@ class DetailView(tabs.TabView):
         resource_class = self.get_data()
         return self.tab_group_class(request, resource_class=resource_class,
                                     **kwargs)
+
+
+def rack_health(request, resource_class_id=None):
+    # FIXME replace mock data
+    random.seed()
+    data = []
+    statuses = ["Good", "Warnings", "Disaster"]
+    colors = ["rgb(244,244,244)", "rgb(240,170,0)", "rgb(200,0,0)"]
+
+    resource_class = (api.tuskar.
+                      ResourceClass.get(request,
+                                        resource_class_id))
+
+    for rack in resource_class.list_racks:
+        rand_index = random.randint(0, 2)
+        percentage = (2 - rand_index) * 50
+        color = colors[rand_index]
+
+        tooltip = ("<p>Rack: <strong>{0}</strong></p><p>{1}</p>").format(
+            rack.name,
+            statuses[rand_index])
+
+        data.append({'tooltip': tooltip,
+                     'color': color,
+                     'status': statuses[rand_index],
+                     'percentage': percentage,
+                     'id': rack.id,
+                     'name': rack.name,
+                     'url': "FIXME url"})
+
+        data.sort(key=lambda x: x['percentage'])
+
+    res = {'data': data}
+    return HttpResponse(simplejson.dumps(res),
+        mimetype="application/json")
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 81facdc3..ba282df7 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
@@ -73,7 +73,7 @@
         <div id="most_contacting_racks"
              class="communication_chart"
              data-chart-type="circles_chart"
-             data-url="/infrastructure/racks/1/top_communicating.json?cond=from"
+             data-url="{% url 'horizon:infrastructure:resource_management:racks:top_communicating' rack.id %}?cond=from"
              data-time="now"
              data-size="22">
         </div>
@@ -84,7 +84,7 @@
         <div id="most_contacted_racks"
              class="communication_chart"
              data-chart-type="circles_chart"
-             data-url="/infrastructure/racks/1/top_communicating.json?cond=to"
+             data-url="{% url 'horizon:infrastructure:resource_management:racks:top_communicating' rack.id %}?cond=to"
              data-time="now"
              data-size="22">
         </div>
@@ -109,28 +109,28 @@
         data-circles-chart-command="change_url"
         data-receiver="#rack_health_chart">
       <li class="active">
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=overall_health" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=overall_health" href="#">
           Overall Health</a>
       </li>
       <li>
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=alerts" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=alerts" href="#">
           Alerts</a>
       </li>
       <li>
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=capacities" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=capacities" href="#">
           Capacities</a>
       </li>
       <li>
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=status" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}?type=status" href="#">
           Status</a>
       </li>
     </ul>
     <div id ="rack_health_chart"
          class="health_chart"
          data-chart-type="circles_chart"
-         data-url="/infrastructure/racks/1/top_communicating.json?cond=health"
+         data-url="{% url 'horizon:infrastructure:resource_management:racks:node_health' rack.id %}"
          data-time="now"
-         data-size="40">
+         data-size="22">
     </div>
   </div>
 </div>
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 618a05cc..1d07531c 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
@@ -140,26 +140,27 @@
         data-circles-chart-command="change_url"
         data-receiver=".rack_health_chart">
       <li class="active">
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=overall_health" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=overall_health" href="#">
           Overall Health</a>
       </li>
       <li>
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=alerts" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=alerts" href="#">
           Alerts</a>
       </li>
       <li>
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=capacities" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=capacities" href="#">
           Capacities</a>
       </li>
       <li>
-        <a data-url="/infrastructure/racks/1/top_communicating.json?type=status" href="#">
+        <a data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}?type=status" href="#">
           Status</a>
       </li>
     </ul>
-    <h5>Region 1<h5>
+    <!--<h5>Region 1<h5>
     <div class="rack_health_chart"
          data-chart-type="circles_chart"
          data-url="/infrastructure/racks/1/top_communicating.json?region=1"
+         data-region=1 //// implement region parameter
          data-time="now"
          data-size="10">
     </div>
@@ -167,15 +168,16 @@
     <div class="rack_health_chart"
          data-chart-type="circles_chart"
          data-url="/infrastructure/racks/1/top_communicating.json?region=2"
+         data-region=1 //// implement region parameter
          data-time="now"
          data-size="10">
     </div>
-    <h5>Region 3<h5>
+    <h5>Region 3<h5>-->
     <div class="rack_health_chart"
          data-chart-type="circles_chart"
-         data-url="/infrastructure/racks/1/top_communicating.json?region=3"
+         data-url="{% url 'horizon:infrastructure:resource_management:resource_classes:rack_health' resource_class.id %}"
          data-time="now"
-         data-size="10">
+         data-size="22">
     </div>
   </div>
 </div>