Display alarm counts in horizon navbar

-This commit makes use of the new extensible header functionality
 in horizon to display the current alarm counts
-When the header is clicked the user is redirected to the alarms
 panel.  If the user is in the admin dashboard they will be sent
 to the admin's alarm panel

Change-Id: Iff6b3b8d7f2efe4107ff3c0639b115f99552e257
Implements: blueprint alarm-header
Signed-off-by: Tyler Smith <tyler.smith@windriver.com>

enabled/_4020_project_alarms_vitrage_panel.py

@@ -25,3 +25,6 @@ ADD_INSTALLED_APPS = ['vitrage_dashboard.alarms']
 ADD_ANGULAR_MODULES = ['horizon.dashboard.project.vitrage']
 
 AUTO_DISCOVER_STATIC_FILES = True
+
+ADD_HEADER_SECTIONS = \
+    ['vitrage_dashboard.alarms.views.AlarmBannerView', ]

vitrage_dashboard/alarms/templates/alarms/banner.html

@@ -0,0 +1,22 @@
+{% load i18n %}
+{% block alarm_banner %}
+  <div class="vitrage-alarm-banner" style="cursor:pointer" onclick="
+   var path=document.location.pathname;
+   var dash=~path.indexOf('admin') ? 'admin/vitrageadminalarms/':'project/vitragealarms/';
+   document.location.href = document.location.href.replace(path,$(window).attr('WEBROOT')+dash);">
+    {% trans " CRITICAL " %}
+    <span class="badge {% if counts.CRITICAL != 0 %}badge-red{% endif %}">{{ counts.CRITICAL}}</span>
+    {% trans "SEVERE " %}
+    <span class="badge {% if counts.SEVERE != 0 %}badge-orange{% endif %}">{{ counts.SEVERE }}</span>
+    {% trans " WARNING " %}
+    <span class="badge {% if counts.WARNING != 0 %}badge-yellow{% endif %}">{{ counts.WARNING }}</span>
+    {% if counts.OK %}
+    {% trans " OK " %}
+    <span class="badge {% if counts.OK != 0 %}badge-green{% endif %}">{{ counts.OK }}</span>
+    {% endif %}
+    {% if counts.NA %}
+    {% trans " N/A " %}
+    <span class="badge {% if counts.NA != 0 %}badge-gray{% endif %}">{{ counts.NA }}</span>
+    {% endif %}
+  </div>
+{% endblock %}

vitrage_dashboard/alarms/views.py

@@ -14,6 +14,8 @@
 
 from horizon import views
 
+from vitrage_dashboard.api import vitrage
+
 import json
 
 
@@ -30,3 +32,15 @@ class IndexView(views.APIView):
         }
         context['TOPOLOGY_VITRAGE_SETTINGS'] = json.dumps(topology_settings)
         return context
+
+
+class AlarmBannerView(views.HorizonTemplateView):
+    template_name = 'alarms/banner.html'
+
+    def get_context_data(self, **kwargs):
+        context = super(AlarmBannerView, self).get_context_data(**kwargs)
+
+        is_admin = 'admin' in self.request.META.get('HTTP_REFERER')
+        counts = vitrage.alarm_counts(self.request, is_admin)
+        context['counts'] = counts
+        return context

vitrage_dashboard/api/vitrage.py

@@ -66,6 +66,12 @@ def alarms(request, vitrage_id='all', all_tenants='false'):
                                              all_tenants=all_tenants)
 
 
+def alarm_counts(request, all_tenants='false'):
+    counts = vitrageclient(request).alarm.count(all_tenants=all_tenants)
+    counts['NA'] = counts.get("N/A")
+    return counts
+
+
 def rca(request, alarm_id, all_tenants='false'):
     return vitrageclient(request).rca.get(alarm_id=alarm_id,
                                           all_tenants=all_tenants)

vitrage_dashboard/dashboard/static/dashboard/project/components/alarms/alarms.scss

@@ -41,3 +41,16 @@
     overflow: hidden;
   }
 }
+
+.vitrage-alarm-banner {
+  border: 1px solid rgba(0,0,0,0.1);
+  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
+  padding: 3px;
+  margin-top: -4px;
+  margin-bottom: -4px;
+  padding-left: 18px;
+
+  span {
+    vertical-align: baseline;
+  }
+}

vitrage_dashboard/dashboard/static/dashboard/project/vitrage.scss

@@ -12,26 +12,49 @@
 @import 'templateList/templateList.scss';
 @import 'components/template/templateContainer.scss';
 
+.badge {
+  padding: 3px 15px;
+  margin-right: 18px;
+}
+
+.badge-red{
+  background-color: #FA3C3C;
+}
 .red {
   color: #FA3C3C;
 }
 
+.badge-orange {
+  background-color: #fc9d00;
+}
 .orange {
   color: #fc9d00;
 }
 
+.badge-yellow {
+  background-color: #FFC600;
+}
 .yellow {
   color: #FFC600;
 }
 
+.badge-green {
+  background-color: #87CE53;
+}
 .green {
   color: #87CE53;
 }
 
+.badge-olive {
+  background-color: #97A560;
+}
 .olive {
   color: #97A560;
 }
 
+.badge-gray {
+  background-color: #AEAEAE;
+}
 .gray {
   color: #AEAEAE;
 }