add az distribution pie chart (#1452)

deploy-board/deploy_board/templates/groups/group_side_panel.html

@@ -71,6 +71,14 @@ <h4 class="panel-title pull-left">Group Config</h4>
 </div>
 {% endif %}
 
+<div class="row">
+  <a type="button" href="/groups/{{ group_name }}/host-az-dist/"
+          class="deployToolTip btn btn-default btn-block"
+      data-toggle="tooltip" title="Show host ditribution among availability zones">
+      <span class="glyphicon glyphicon-stats"></span> Availability Zone Distribution
+  </a>
+</div>
+
 <div class="panel panel-default">
     <div class="panel-heading clearfix">
         <h4 class="panel-title pull-left">Environments</h4>

deploy-board/deploy_board/templates/groups/host_az_dist.tmpl

@@ -0,0 +1,31 @@
+{% load utils %}
+
+{% block content %}
+  <div id="container" style="width: 75%;">
+    <h2>Host Distribution Among Availability Zones</h2>
+    <canvas id="pie-chart"></canvas>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script>
+    var config = {
+      type: 'pie',
+      data: {
+        datasets: [{
+          data: {{ data|safe }},
+          label: 'Host'
+        }],
+        labels: {{ labels|safe }}
+      },
+      options: {
+        responsive: false
+      }
+    };
+
+    window.onload = function() {
+      var ctx = document.getElementById('pie-chart').getContext('2d');
+      window.myPie = new Chart(ctx, config);
+    };
+  </script>
+
+{% endblock %}

deploy-board/deploy_board/webapp/arcee_urls.py

@@ -67,6 +67,7 @@
     url(r'^groups/names', group_view.get_group_names),
     url(r'^groups/search/(?P<group_name>[a-zA-Z0-9\-_]+)/$', group_view.search_groups),
     url(r'^groups/search/$', group_view.group_landing),
+    url(r'^groups/(?P<group_name>[a-zA-Z0-9\-_]+)/host-az-dist/$', group_view.get_host_az_dist),
     url(r'^groups/(?P<group_name>[a-zA-Z0-9\-_]+)/$', group_view.GroupDetailView.as_view()),
     url(r'^groups/(?P<group_name>[a-zA-Z0-9\-_]+)/config/$', group_view.GroupConfigView.as_view()),
     url(r'^groups/(?P<group_name>[a-zA-Z0-9\-_]+)/envs/', group_view.get_envs),

deploy-board/deploy_board/webapp/group_view.py

@@ -13,15 +13,17 @@
 # limitations under the License.
 
 
-from deploy_board.settings import IS_PINTEREST, PHOBOS_URL
+from deploy_board.settings import CMDB_API_HOST, IS_PINTEREST, PHOBOS_URL
 from django.middleware.csrf import get_token
 from django.shortcuts import render, redirect
 from django.views.generic import View
 from django.template.loader import render_to_string
 from django.http import HttpResponse
 from django.contrib import messages
 from django.contrib.messages import get_messages
+from collections import Counter
 import json
+import requests
 import logging
 import traceback
 from itertools import groupby
@@ -1464,6 +1466,20 @@ def get_health_check_activities(request, group_name):
     })
 
 
+def get_host_az_dist(request, group_name):
+    host_az_dist = requests.post(url = CMDB_API_HOST+"/v2/query", json={
+            "query": "tags.Autoscaling:{} AND state:running".format(group_name),
+            "fields": "location"
+        }
+    )
+
+    counter = Counter([x['location'] for x in host_az_dist.json()])
+
+    return render(request, 'groups/host_az_dist.tmpl', {
+        'labels': list(counter.keys()),
+        'data': list(counter.values()),
+    })
+
 def get_health_check_details(request, id):
     health_check = autoscaling_groups_helper.get_health_check(request, id)
     env = environs_helper.get(request, health_check.get('env_id'))