Put counts into the notification filters

We can filter notifications on the activity page by state.

This commit adds counts to those filters.

This is mainly so that we can consistently do the same thing on the job
page later on.

app/assets/stylesheets/components/pill.scss

@@ -5,9 +5,9 @@
   a,
   span {
     display: block;
-    padding: 10px;  
+    padding: 10px;
     flex-grow: 1;
-    text-align: center;
+    text-align: left;
 
     &:first-child {
       margin-left: 0;
@@ -24,6 +24,12 @@
     color: $link-colour;
     border: 1px solid $panel-colour;
     position: relative;
+    text-decoration: none;
+    cursor: pointer;
+
+    .pill-label {
+      text-decoration: underline;
+    }
 
     &:hover {
       color: $text-colour;

app/main/views/jobs.py

@@ -18,6 +18,7 @@ from app import (
     job_api_client,
     notification_api_client,
     service_api_client,
+    statistics_api_client,
     current_service,
     format_datetime_short)
 from app.main import main
@@ -26,7 +27,7 @@ from app.utils import (
     generate_previous_next_dict,
     user_has_permissions,
     generate_notifications_csv)
-from app.statistics_utils import sum_of_statistics
+from app.statistics_utils import sum_of_statistics, statistics_by_state
 
 
 def _parse_filter_args(filter_dict):
@@ -180,6 +181,9 @@ def view_notifications(service_id, message_type):
         template_type=[message_type],
         status=filter_args.get('status'),
         limit_days=current_app.config['ACTIVITY_STATS_LIMIT_DAYS'])
+    service_statistics_by_state = statistics_by_state(sum_of_statistics(
+        statistics_api_client.get_statistics_for_service(service_id, limit_days=7)['data']
+    ))
     view_dict = dict(
         message_type=message_type,
         status=request.args.get('status')
@@ -230,16 +234,20 @@ def view_notifications(service_id, message_type):
             status=request.args.get('status')
         ),
         status_filters=[
-            [item[0], item[1], url_for(
-                '.view_notifications',
-                service_id=current_service['id'],
-                message_type=message_type,
-                status=item[1]
-            )] for item in [
-                ['Processed', 'sending,delivered,failed'],
-                ['Sending', 'sending'],
-                ['Delivered', 'delivered'],
-                ['Failed', 'failed'],
+            [
+                item[0], item[1],
+                url_for(
+                    '.view_notifications',
+                    service_id=current_service['id'],
+                    message_type=message_type,
+                    status=item[1]
+                ),
+                service_statistics_by_state[message_type][item[0]]
+            ] for item in [
+                ['processed', 'sending,delivered,failed'],
+                ['sending', 'sending'],
+                ['delivered', 'delivered'],
+                ['failed', 'failed'],
             ]
         ]
     )

app/statistics_utils.py

@@ -48,3 +48,24 @@ def add_rates_to(delivery_statistics):
         ),
         **delivery_statistics
     )
+
+
+def statistics_by_state(statistics):
+    return {
+        'sms': {
+            'processed': statistics['sms_requested'],
+            'sending': (
+                statistics['sms_requested'] - statistics['sms_failed'] - statistics['sms_delivered']
+            ),
+            'delivered': statistics['sms_delivered'],
+            'failed': statistics['sms_failed']
+        },
+        'email': {
+            'processed': statistics['emails_requested'],
+            'sending': (
+                statistics['emails_requested'] - statistics['emails_failed'] - statistics['emails_delivered']
+            ),
+            'delivered': statistics['emails_delivered'],
+            'failed': statistics['emails_failed']
+        }
+    }

app/templates/components/pill.html

@@ -1,3 +1,5 @@
+{% from 'components/big-number.html' import big_number %}
+
 {% macro pill(
   title,
   items=[],
@@ -5,12 +7,19 @@
 ) %}
   <nav role='navigation' class='pill' aria-labelledby="pill_{{title}}">
     <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
-    {% for label, option, link in items %}
+    {% for label, option, link, count in items %}
       {% if current_value == option %}
-        <span aria-hidden="true">{{ label }}</span>
+        <span aria-hidden="true">
       {% else %}
-        <a href="{{ link }}">{{ label }}</a>
+        <a href="{{ link }}">
+      {% endif %}
+          {{ big_number(count, smaller=True) }}
+          <div class="pill-label">{{ label }}</div>
+      {% if current_value == option %}
+        </span>
+      {% else %}
+        </a>
       {% endif %}
     {% endfor %}
   </nav>
-{% endmacro %}
+{% endmacro %}

app/templates/views/notifications.html

@@ -15,7 +15,7 @@
 
     <span class="visually-hidden">
       {%- if request_args.get('status') != 'delivered,failed' -%}
-        {%- for label, option, _ in status_filters -%}
+        {%- for label, option, _, _ in status_filters -%}
           {%- if request_args.get('status', 'delivered,failed') == option -%}{{label}} {% endif -%}
         {%- endfor -%}
       {%- endif -%}

tests/app/test_statistics_utils.py

@@ -1,6 +1,6 @@
 import pytest
 
-from app.statistics_utils import sum_of_statistics, add_rates_to
+from app.statistics_utils import sum_of_statistics, add_rates_to, statistics_by_state
 
 
 @pytest.mark.parametrize('delivery_statistics', [
@@ -96,3 +96,20 @@ def test_add_rates_keeps_original_raw_data():
     assert resp['emails_requested'] == 2
     assert resp['sms_failed'] == 3
     assert resp['sms_requested'] == 4
+
+
+def test_service_statistics_by_state():
+    resp = statistics_by_state({
+        'emails_requested': 3,
+        'emails_failed': 1,
+        'emails_delivered': 1,
+        'sms_requested': 3,
+        'sms_failed': 1,
+        'sms_delivered': 1
+    })
+
+    for message_type in ['email', 'sms']:
+        assert resp[message_type]['processed'] == 3
+        assert resp[message_type]['sending'] == 1
+        assert resp[message_type]['delivered'] == 1
+        assert resp[message_type]['failed'] == 1