Put some statistics on the dashboard

This commit adds two new sections to the dashboard

1. A banner telling you about trial mode, including a count of how many messages
   you have left today, which is a restriction of trial mode

2. Panels with counts of how many emails and text messages have been sent in a
   day, plus the failure rates for each

It does **not**:
- link through to any further information about what trial mode is (coming
  later)
- link through to pages for the failure rates (coming later)
- change the ‘recent jobs’ section to ‘recent notifications’

app/assets/stylesheets/_grids.scss

@@ -2,6 +2,10 @@
   @include grid-column(3/4);
 }
 
+.column-one-sixth {
+  @include grid-column(1/6);
+}
+
 .column-one-eighth {
   @include grid-column(1/8);
 }
@@ -16,7 +20,7 @@
 }
 
 .bottom-gutter-2-3 {
-  margin-bottom: $gutter * 2/3;
+  margin-bottom: $gutter-two-thirds;
 }
 
 .align-with-heading {

app/assets/stylesheets/components/banner.scss

@@ -26,9 +26,8 @@
 
 }
 
-.banner-with-tick,
+%banner-with-tick,
-.banner-default-with-tick {
+.banner-with-tick {
-  @extend %banner;
   padding: $gutter-half ($gutter + $gutter-half);
   background-image: file-url('tick-white.png');
   background-size: 19px;
@@ -37,6 +36,11 @@
   font-weight: bold;
 }
 
+.banner-default-with-tick {
+  @extend %banner;
+  @extend %banner-with-tick;
+}
+
 .banner-dangerous {
 
   @extend %banner;
@@ -54,13 +58,15 @@
 
 }
 
+%banner-tip,
 .banner-tip {
 
   @extend %banner;
-  background: $yellow;
+  @include bold-19;
+  background-color: $yellow;
   color: $text-colour;
   text-align: left;
-  font-weight: bold;
+  margin-top: 0;
 
   a {
     &:link,
@@ -76,6 +82,12 @@
 
 }
 
+.banner-tip-with-tick {
+  @extend %banner-with-tick;
+  @extend %banner-tip;
+  background-image: file-url('tick-black.png');
+}
+
 .banner-info,
 .banner-important {
   @extend %banner;
@@ -91,3 +103,30 @@
 .banner-info {
   background-image: file-url('icon-information-2x.png');
 }
+
+.banner-mode {
+
+  @extend %banner;
+  background: $govuk-blue;
+  color: $white;
+  margin-top: $gutter;
+
+  .heading-medium {
+    margin-top: 0;
+  }
+
+  a {
+
+    &:link,
+    &:visited {
+      color: $white;
+    }
+
+    &:hover,
+    &:active {
+      color: $light-blue-25;
+    }
+
+  }
+
+}

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

@@ -1,3 +1,4 @@
+%big-number,
 .big-number {
 
   @include bold-48($tabular-numbers: true);
@@ -5,6 +6,62 @@
   &-label {
     @include core-19;
     display: block;
+    padding-bottom: $gutter-half;
+  }
+
+}
+
+.big-number-with-status {
+
+  @extend %big-number;
+  background: $text-colour;
+  color: $white;
+
+  .big-number {
+    padding: 15px;
+  }
+
+  .big-number-label {
+    padding-bottom: 0;
+  }
+
+  .big-number-status {
+
+    display: block;
+    background: $green;
+    position: relative;
+
+    &-error-percentage {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: $error-colour;
+      z-index: 1;
+    }
+
+    a {
+
+      &:link,
+      &:visited,
+      &:active,
+      &:hover {
+        color: $white;
+      }
+
+    }
+
+    .big-number {
+      @include bold-19;
+      position: relative;
+      z-index: 2;
+    }
+
+    .big-number-label {
+      display: inline;
+    }
+
   }
 
 }

app/main/views/dashboard.py

@@ -8,7 +8,7 @@ from flask_login import login_required
 from app.main import main
 from app.main.dao.services_dao import get_service_by_id
 from app.main.dao import templates_dao
-from app import job_api_client
+from app import job_api_client, statistics_api_client
 
 
 @main.route("/services/<service_id>/dashboard")
@@ -27,11 +27,35 @@ def service_dashboard(service_id):
         message = 'You have successfully accepted your invitation and been added to {}'.format(service_name)
         flash(message, 'default_with_tick')
 
+    statistics = statistics_api_client.get_statistics_for_service(service_id)['data']
+
     return render_template(
-        'views/service_dashboard.html',
+        'views/dashboard/dashboard.html',
         jobs=jobs[:5],
         more_jobs_to_show=(len(jobs) > 5),
         free_text_messages_remaining='250,000',
         spent_this_month='0.00',
-        template_count=len(templates),
+        service=service['data'],
+        statistics=expand_statistics(statistics),
+        templates=templates,
         service_id=str(service_id))
+
+
+def expand_statistics(statistics, danger_zone=25):
+
+    if not statistics or not statistics[0]:
+        return {}
+
+    today = statistics[0]
+
+    today.update({
+        'emails_failure_rate': int(today['emails_error'] / today['emails_requested'] * 100),
+        'sms_failure_rate': int(today['sms_error'] / today['sms_requested'] * 100)
+    })
+
+    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)
+    })
+
+    return today

app/templates/components/banner.html

@@ -1,19 +1,9 @@
 {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None) %}
   <div class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'>
-    {% if subhead %}
+    {% if subhead -%}
-      <div class="grid-row">
+        {{ subhead }}&ensp;
-        <div class="column-one-third">
+    {%- endif -%}
-          {{ subhead }}
-        </div>
-        <div class="column-two-thirds">
-    {% endif %}
-
     {{ body }}
-
-    {% if subhead %}
-        </div>
-      </div>
-    {% endif %}
     {% if delete_button %}
       <form method='post'>
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />

app/templates/components/big-number.html

@@ -4,3 +4,14 @@
     <span class="big-number-label">{{ label }}</span>
   </div>
 {% endmacro %}
+
+
+{% macro big_number_with_status(number, label, status_number, status_label, percentage_bad=0) %}
+  <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>
+  </div>
+{% endmacro %}

app/templates/views/choose-template.html

@@ -37,9 +37,9 @@
       {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters'], or_=True) %}
       {{ banner(
         """
-          Send yourself a test message
+          Send yourself a test
         """,
-        subhead='Next step',
+        subhead='Next step:',
         type="tip"
       )}}
       {% endif %}

app/templates/views/dashboard/dashboard.html

@@ -0,0 +1,20 @@
+{% extends "withnav_template.html" %}
+
+{% block page_title %}
+  {{ session.get('service_name', 'Dashboard') }} – GOV.UK Notify
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  {% if service.restricted %}
+    {% include 'views/dashboard/trial-mode-banner.html' %}
+  {% endif %}
+
+  {% if not jobs %}
+    {% include 'views/dashboard/get-started.html' %}
+  {% else %}
+    {% include 'views/dashboard/today.html' %}
+    {% include 'views/dashboard/jobs.html' %}
+  {% endif %}
+
+{% endblock %}

app/templates/views/dashboard/get-started.html

@@ -0,0 +1,19 @@
+{% from "components/banner.html" import banner_wrapper %}
+
+<h2 class="heading-medium">Get started</h2>
+<ol class="grid-row">
+  {% if current_user.has_permissions(['manage_templates']) %}
+    <li class="column-half">
+      {% call banner_wrapper(type="tip", subhead='1.' if not templates else None, with_tick=templates|length) %}
+        <a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}'>Add a template</a>
+      {% endcall %}
+    </li>
+  {% endif %}
+  {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
+    <li class="column-half">
+      {% call banner_wrapper(type="tip", subhead='2.') %}
+        <a href='{{ url_for(".choose_template", service_id=service_id, template_type="sms") }}'>Send yourself a message</a>
+      {% endcall %}
+    </li>
+  {% endif %}
+</ol>

app/templates/views/dashboard/jobs.html

@@ -0,0 +1,28 @@
+{% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}
+
+{% call(item) list_table(
+  jobs,
+  caption="Recent batch jobs",
+  empty_message='You haven’t sent any text messages yet',
+  field_headings=['File', 'Started', right_aligned_field_heading('Rows'), right_aligned_field_heading('Sent')]
+) %}
+  {% call field() %}
+    <a href="{{ url_for('.view_job', service_id=service_id, job_id=item.id) }}">{{ item.original_file_name }}</a>
+  {% endcall %}
+  {% call field() %}
+    {{ item.created_at|format_datetime }}
+  {% endcall %}
+  {% call field(align='right') %}
+    {{ item.notification_count }}
+  {% endcall %}
+  {% call field(align='right') %}
+    {{ item.notifications_sent }}
+  {% endcall %}
+{% endcall %}
+{% if more_jobs_to_show %}
+  {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
+    <p class="table-show-more-link">
+      <a href="{{ url_for('.view_jobs', service_id=service_id) }}">See all sent text messages</a>
+    </p>
+  {% endif %}
+{% endif %}

app/templates/views/dashboard/today.html

@@ -0,0 +1,25 @@
+{% from "components/big-number.html" import big_number_with_status %}
+
+<h2 class="heading-medium">
+  Sent today
+</h2>
+<div class="grid-row">
+  <div class="column-half">
+    {{ 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)
+    ) }}
+  </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)
+    ) }}
+  </div>
+</div>

app/templates/views/dashboard/trial-mode-banner.html

@@ -0,0 +1,24 @@
+{% from "components/banner.html" import banner_wrapper %}
+{% from "components/big-number.html" import big_number %}
+
+{% call banner_wrapper(type="mode") %}
+
+  <div class="grid-row">
+    <div class="column-one-half">
+      <h2 class="heading-medium">Trial mode</h2>
+      <p>
+        We’ll only deliver messages to you and members of your team
+
+      </p>
+    </div>
+    <div class="column-one-sixth">
+      &nbsp;
+    </div>
+    <div class="column-one-third">
+      {{ big_number(
+        service.limit - statistics.get('emails_requested', 0) - statistics.get('sms_requested', 0),
+        'messages left today'
+      ) }}
+    </div>
+  </div>
+{% endcall %}

app/templates/views/service_dashboard.html

@@ -1,74 +0,0 @@
-{% extends "withnav_template.html" %}
-{% from "components/banner.html" import banner_wrapper %}
-{% from "components/table.html" import list_table, field, right_aligned_field_heading %}
-{% from "components/big-number.html" import big_number %}
-
-{% block page_title %}
-  {{ session.get('service_name', 'Dashboard') }} – GOV.UK Notify
-{% endblock %}
-
-{% block maincolumn_content %}
-
-    <ul class="grid-row job-totals">
-      <li class="column-half">
-        {{ big_number(
-          free_text_messages_remaining,
-          'free text messages remaining'
-        )}}
-      </li>
-      <li class="column-half">
-        {{ big_number(
-          '£' + spent_this_month,
-          'spent this month'
-        )}}
-      </li>
-    </ul>
-
-    {% if not template_count and not jobs %}
-      {% call banner_wrapper(subhead='Get started', type="tip") %}
-        <ol>
-          {% if current_user.has_permissions(['manage_templates']) %}
-            <li>
-              <a href='{{ url_for(".add_service_template", service_id=service_id, template_type="sms") }}'>Add a template</a>
-            </li>
-          {% endif %}
-          {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
-            <li>
-              <a href='{{ url_for(".choose_template", service_id=service_id, template_type="sms") }}'>Send yourself a text message</a>
-            </li>
-          {% endif %}
-        </ol>
-      {% endcall %}
-    {% elif not jobs %}
-      {% call banner_wrapper(subhead='Next step', type="tip") %}
-        {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
-          <a href='{{ url_for(".choose_template", service_id=service_id, template_type="sms") }}'>Send yourself a text message</a>
-        {% endif %}
-      {% endcall %}
-    {% else %}
-      {% call(item) list_table(
-        jobs,
-        caption="Recent text messages",
-        empty_message='You haven’t sent any text messages yet',
-        field_headings=['Job', 'Created', right_aligned_field_heading('completion')]
-      ) %}
-        {% call field() %}
-          <a href="{{ url_for('.view_job', service_id=service_id, job_id=item.id) }}">{{ item.original_file_name }}</a>
-        {% endcall %}
-        {% call field() %}
-          {{ item.created_at|format_datetime }}
-        {% endcall %}
-        {% call field(align='right') %}
-          {{ (item.notifications_sent / item.notification_count * 100)|round|int }}%
-        {% endcall %}
-      {% endcall %}
-      {% if more_jobs_to_show %}
-        {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
-          <p class="table-show-more-link">
-            <a href="{{ url_for('.view_jobs', service_id=service_id) }}">See all sent text messages</a>
-          </p>
-        {% endif %}
-      {% endif %}
-    {% endif %}
-
-{% endblock %}

tests/app/main/views/test_accept_invite.py

@@ -275,6 +275,7 @@ def test_new_invited_user_verifies_and_added_to_service(app_,
                                                         mock_accept_invite,
                                                         mock_get_service,
                                                         mock_get_service_templates,
+                                                        mock_get_service_statistics,
                                                         mock_get_jobs):
 
     with app_.test_request_context():

tests/app/main/views/test_dashboard.py

@@ -35,6 +35,7 @@ def _test_dashboard_menu(mocker, app_, usr, service, permissions):
             mocker.patch('app.user_api_client.get_user', return_value=usr)
             mocker.patch('app.user_api_client.get_user_by_email', return_value=usr)
             mocker.patch('app.notifications_api_client.get_service', return_value={'data': service})
+            mocker.patch('app.statistics_api_client.get_statistics_for_service', return_value={'data': [{}]})
             client.login(usr)
             return client.get(url_for('main.service_dashboard', service_id=service['id']))
 

tests/conftest.py

@@ -157,7 +157,7 @@ def mock_delete_service(mocker, mock_get_service):
 @pytest.fixture(scope='function')
 def mock_get_service_statistics(mocker):
     def _create(service_id):
-        return {'data': []}
+        return {'data': [{}]}
 
     return mocker.patch(
         'app.statistics_api_client.get_statistics_for_service', side_effect=_create)