Merge pull request #335 from alphagov/dashboard-updates

Dashboard updates

app/assets/javascripts/updateContent.js

@@ -1,12 +1,10 @@
 (function(GOVUK, Modules) {
   "use strict";
 
-  const interval = 1500; // milliseconds
-
   GOVUK.timeCache = {};
   GOVUK.resultCache = {};
 
-  let getter = function(resource, render) {
+  let getter = function(resource, interval, render) {
 
     if (
       GOVUK.resultCache[resource] &&
@@ -23,8 +21,8 @@
 
   };
 
-  let poller = (resource, key, component) => () => getter(
-    resource, response => component.html(response[key])
+  let poller = (resource, key, component, interval) => () => getter(
+    resource, interval, response => component.html(response[key])
   );
 
   Modules.UpdateContent = function() {
@@ -32,9 +30,10 @@
     this.start = function(component) {
 
       const $component = $(component);
+      interval = ($(component).data("interval-seconds") * 1000) || 1500;
 
       setInterval(
-        poller($component.data('resource'), $component.data('key'), $component),
+        poller($component.data('resource'), $component.data('key'), $component, interval),
         interval / 5
       );
 

app/assets/stylesheets/components/big-number.scss

@@ -25,21 +25,13 @@
     padding-bottom: 0;
   }
 
+  %big-number-status,
   .big-number-status {
 
+    @include core-19;
     display: block;
     background: $green;
-    position: relative;
-
-    &-error-percentage {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: $error-colour;
-      z-index: 1;
-    }
+    padding: 15px;
 
     a {
 
@@ -52,16 +44,11 @@
 
     }
 
-    .big-number {
-      @include bold-19;
-      position: relative;
-      z-index: 2;
-    }
-
-    .big-number-label {
-      display: inline;
-    }
+  }
 
+  .big-number-status-failing {
+    @extend %big-number-status;
+    background: $error-colour;
   }
 
 }

app/main/views/dashboard.py

@@ -1,7 +1,8 @@
 from flask import (
     render_template,
     session,
-    flash
+    flash,
+    jsonify
 )
 
 from flask_login import login_required
@@ -36,28 +37,41 @@ def service_dashboard(service_id):
         free_text_messages_remaining='250,000',
         spent_this_month='0.00',
         service=service['data'],
-        statistics=expand_statistics(statistics),
+        statistics=add_rates_to(statistics),
         templates=templates,
         service_id=str(service_id))
 
 
-def expand_statistics(statistics, danger_zone=25):
+@main.route("/services/<service_id>/dashboard.json")
+@login_required
+def service_dashboard_updates(service_id):
 
-    if not statistics or not statistics[0]:
-        return {}
+    statistics = statistics_api_client.get_statistics_for_service(service_id)['data']
 
-    today = statistics[0]
-
-    today.update({
-        'emails_failure_rate':
-            int(today['emails_error'] / today['emails_requested'] * 100) if today['emails_requested'] else 0,
-        'sms_failure_rate':
-            int(today['sms_error'] / today['sms_requested'] * 100) if today['sms_requested'] else 0
+    return jsonify(**{
+        'today': render_template(
+            'views/dashboard/today.html',
+            statistics=add_rates_to(statistics),
+        )
     })
 
+
+def add_rates_to(delivery_statistics):
+
+    if not delivery_statistics or not delivery_statistics[0]:
+        return {}
+
+    today = delivery_statistics[0]
+
     today.update({
-        'emails_percentage_of_danger_zone': min(today['emails_failure_rate'] / (danger_zone / 100), 100),
-        'sms_percentage_of_danger_zone': min(today['sms_failure_rate'] / (danger_zone / 100), 100)
+        'emails_failure_rate': (
+            "{0:.1f}".format((today['emails_error'] / today['emails_requested'] * 100))
+            if today['emails_requested'] else 0
+        ),
+        'sms_failure_rate': (
+            "{0:.1f}".format((today['sms_error'] / today['sms_requested'] * 100))
+            if today['sms_requested'] else 0
+        )
     })
 
     return today

app/templates/components/big-number.html

@@ -6,12 +6,15 @@
 {% endmacro %}
 
 
-{% macro big_number_with_status(number, label, status_number, status_label, percentage_bad=0) %}
+{% macro big_number_with_status(number, label, failures, failure_percentage, danger_zone=False) %}
   <div class="big-number-with-status">
     {{ big_number(number, label) }}
-    <div class="big-number-status">
-      <div class="big-number-status-error-percentage" style="opacity: {{ percentage_bad / 100 }}"></div>
-      {{ big_number(status_number, status_label) }}
+    <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
+      {% if failures %}
+        {{ failures }} failed – {{ failure_percentage }}%
+      {% else %}
+        No failures
+      {% endif %}
     </div>
   </div>
 {% endmacro %}

app/templates/views/dashboard/dashboard.html

@@ -13,7 +13,16 @@
   {% if not jobs %}
     {% include 'views/dashboard/get-started.html' %}
   {% else %}
-    {% include 'views/dashboard/today.html' %}
+
+    <div
+      data-module="update-content"
+      data-resource="{{url_for(".service_dashboard_updates", service_id=service_id)}}"
+      data-key="today"
+      data-interval-seconds="10"
+    >
+      {% include 'views/dashboard/today.html' %}
+    </div>
+    
     {% include 'views/dashboard/jobs.html' %}
   {% endif %}
 

app/templates/views/dashboard/today.html

@@ -8,18 +8,18 @@
     {{ big_number_with_status(
       statistics.get('emails_requested', 0),
       'email' if statistics.get('emails_requested') == 1 else 'emails',
-      '{}%'.format(statistics.get('emails_failure_rate', 0)),
-      'failed',
-      statistics.get('emails_percentage_of_danger_zone', 0)
+      statistics.get('emails_error'),
+      statistics.get('emails_failure_rate', 0.0),
+      statistics.get('emails_failure_rate', 0)|float > 3
     ) }}
   </div>
   <div class="column-half">
     {{ big_number_with_status(
       statistics.get('sms_requested', 0),
       'text message' if statistics.get('sms_requested') == 1 else 'text messages',
-      '{}%'.format(statistics.get('sms_failure_rate', 0)),
-      'failed',
-      statistics.get('sms_percentage_of_danger_zone', 0)
+      statistics.get('sms_error'),
+      statistics.get('sms_failure_rate', 0.0),
+      statistics.get('sms_failure_rate', 0)|float > 3
     ) }}
   </div>
 </div>