Show inbound messages on the dashboard

This commit adds two things:

a section on the dashboard to show how many inbound messages the
service has received in the last 7 days, and how recently an inbound
message has been received
---

Doesn’t show the contents of any messages, just like how the rest of the
dashboard is an aggregation, never individual messages.

a page to show all the inbound messages the service has received in
the last 7 days
---

This shows the first line of the message. Eventually this will link
through to a ‘conversation’ page, where a service can see all the
messages it’s received from a given phone number.

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

@@ -129,3 +129,26 @@
   }
 
 }
+
+.big-number-meta-wrapper {
+
+  position: relative;
+  margin: $gutter-half 0 $gutter 0;
+  background: $govuk-blue;
+
+  .big-number-meta {
+
+    padding: ($gutter / 3) $gutter-half;
+    color: $white;
+    pointer-events: none;
+
+    @include media(desktop) {
+      position: absolute;
+      bottom: 7px;
+      right: 5px;
+      text-align: right;
+    }
+
+  }
+
+}

app/assets/stylesheets/components/table.scss

@@ -210,3 +210,11 @@ a.table-show-more-link {
   border-bottom: 1px solid $border-colour;
   padding: 0.75em 0 0.5625em 0;
 }
+
+.wide-left-hand-column {
+  display: block;
+  max-width: 560px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

app/assets/stylesheets/views/dashboard.scss

@@ -94,3 +94,7 @@
   }
 
 }
+
+.align-with-message-body {
+  margin-top: $gutter * 5 / 6;
+}

app/main/views/dashboard.py

@@ -135,6 +135,16 @@ def monthly(service_id):
     )
 
 
+@main.route("/services/<service_id>/inbox")
+@login_required
+@user_has_permissions('manage_settings', admin_override=True)
+def inbox(service_id):
+    return render_template(
+        'views/dashboard/inbox.html',
+        messages=service_api_client.get_inbound_sms(service_id),
+    )
+
+
 def aggregate_usage(template_statistics, sort_key='count'):
     return sorted(
         template_statistics,
@@ -166,6 +176,10 @@ def get_dashboard_partials(service_id):
             'views/dashboard/_upcoming.html',
             scheduled_jobs=scheduled_jobs
         ),
+        'inbox': render_template(
+            'views/dashboard/_inbox.html',
+            inbound_sms_summary=service_api_client.get_inbound_sms_summary(service_id),
+        ),
         'totals': render_template(
             'views/dashboard/_totals.html',
             service_id=service_id,

app/notify_client/service_api_client.py

@@ -1,4 +1,5 @@
 from __future__ import unicode_literals
+
 from flask import url_for
 from app.utils import BrowsableItem
 from app.notify_client import _attach_current_user, NotifyAdminAPIClient
@@ -237,6 +238,16 @@ class ServiceAPIClient(NotifyAdminAPIClient):
             params=dict(year=year)
         )
 
+    def get_inbound_sms(self, service_id):
+        return self.get(
+            '/service/{}/inbound-sms'.format(service_id)
+        )['data']
+
+    def get_inbound_sms_summary(self, service_id):
+        return self.get(
+            '/service/{}/inbound-sms/summary'.format(service_id)
+        )
+
 
 class ServicesBrowsableItem(BrowsableItem):
     @property

app/templates/components/big-number.html

@@ -31,22 +31,25 @@
   failure_percentage,
   danger_zone=False,
   failure_link=None,
-  link=None
+  link=None,
+  show_failures=True
 ) %}
   <div class="big-number-with-status">
     {{ big_number(number, label, link=link) }}
-    <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
-      {% if failures %}
-        {% if failure_link %}
-          <a href="{{ failure_link }}">
+    {% if show_failures %}
+      <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
+        {% if failures %}
+          {% if failure_link %}
+            <a href="{{ failure_link }}">
+              {{ "{:,}".format(failures) }} failed – {{ failure_percentage }}%
+            </a>
+          {% else %}
             {{ "{:,}".format(failures) }} failed – {{ failure_percentage }}%
-          </a>
+          {% endif %}
         {% else %}
-          {{ "{:,}".format(failures) }} failed – {{ failure_percentage }}%
+          No failures
         {% endif %}
-      {% else %}
-        No failures
-      {% endif %}
-    </div>
+      </div>
+    {% endif %}
   </div>
 {% endmacro %}

app/templates/views/dashboard/_inbox.html

@@ -0,0 +1,19 @@
+{% from "components/big-number.html" import big_number, big_number_with_status %}
+
+<div class="ajax-block">
+  <div class="big-number-meta-wrapper">
+    {{
+      big_number_with_status(
+        inbound_sms_summary.count,
+        'text messages received',
+        link=url_for('.inbox', service_id=current_service.id),
+        show_failures=False
+      )
+    }}
+    <div class="big-number-meta">
+      {% if inbound_sms_summary.latest_message %}
+        latest message {{ inbound_sms_summary.latest_message | format_delta }}
+      {% endif %}
+    </div>
+  </div>
+</div>

app/templates/views/dashboard/dashboard.html

@@ -29,6 +29,8 @@
       In the last 7 days
     </h2>
 
+    {{ ajax_block(partials, updates_url, 'inbox') }}
+
     {{ ajax_block(partials, updates_url, 'totals') }}
     {{ show_more(
       url_for('.monthly', service_id=current_service.id),

app/templates/views/dashboard/inbox.html

@@ -0,0 +1,43 @@
+{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %}
+{% from "components/message-count-label.html" import message_count_label %}
+
+{% extends "withnav_template.html" %}
+
+{% block service_page_title %}
+  Inbox
+{% endblock %}
+
+{% block maincolumn_content %}
+
+  <h1 class="heading-large">
+    Received text messages
+  </h1>
+  <div>
+    {% call(item, row_number) list_table(
+      messages,
+      caption="Inbox",
+      caption_visible=False,
+      empty_message='When users text your service’s phone number ({}) you’ll see the messages here'.format(current_service.sms_sender),
+      field_headings=[
+        'From',
+        'First two lines of message'
+      ],
+      field_headings_visible=False
+    ) %}
+      {% call field() %}
+        <span class="file-list-filename" href="#">{{ item.user_number }}</span>
+        <span class="wide-left-hand-column">{{ item.content }}</span>
+      {% endcall %}
+      {% call field(align='right') %}
+        <span class="file-list-hint align-with-message-body">
+          {{ item.created_at | format_delta }}
+        </span>
+      {% endcall %}
+    {% endcall %}
+    {% if messages %}
+      <p class="table-show-more-link">
+        Showing all {{ messages | length }} messages
+      </p>
+    {% endif %}
+  </div>
+{% endblock %}