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/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 %}