Tidy up the ‘Activity’ table

This table had a lot of columns, which meant that some of them became
very narrow, wrapping the text awkwardly.

This commit groups some of the data into a chunk, which occupies the
first column.

app/__init__.py

@@ -2,6 +2,7 @@ import os
 import re
 
 import dateutil
+import datetime
 import urllib
 from flask import (
     Flask,
@@ -20,6 +21,7 @@ from pygments import highlight
 from pygments.lexers import JavascriptLexer
 from pygments.formatters import HtmlFormatter
 from werkzeug.exceptions import abort
+from babel.dates import format_timedelta
 
 from app.notify_client.api_client import ServiceAPIClient
 from app.notify_client.api_key_api_client import ApiKeyApiClient
@@ -100,6 +102,7 @@ def create_app():
     application.add_template_filter(valid_phone_number)
     application.add_template_filter(linkable_name)
     application.add_template_filter(format_date)
+    application.add_template_filter(format_delta)
 
     application.after_request(useful_headers_after_request)
     application.after_request(save_service_after_request)
@@ -185,6 +188,17 @@ def format_date(date):
     return date.strftime('%A %d %B %Y')
 
 
+def format_delta(date):
+    date = dateutil.parser.parse(date)
+    native = date.replace(tzinfo=None)
+    difference = native - datetime.datetime.now()
+    return format_timedelta(
+        datetime.timedelta(seconds=difference.total_seconds()),
+        add_direction=True,
+        format='short'
+    )
+
+
 def valid_phone_number(phone_number):
     try:
         validate_phone_number(phone_number)

app/assets/stylesheets/components/table.scss

@@ -77,6 +77,14 @@
     width: 15px;
   }
 
+  p {
+    margin: 0 0 5px 0;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
 }
 
 .table-field-heading {

app/templates/components/table.html

@@ -67,6 +67,12 @@
   {% endcall %}
 {%- endmacro %}
 
+{% macro link_field(text, link) -%}
+  {% call field() %}
+    <a href="{{ link }}">{{ text }}</a>
+  {% endcall %}
+{%- endmacro %}
+
 {% macro boolean_field(yes) -%}
   {% call field(status='yes' if yes else 'no') %}
     {{ "Yes" if yes else "No" }}

app/templates/views/notifications.html

@@ -1,5 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/table.html" import list_table, field, right_aligned_field_heading %}
+{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading %}
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 
 {% block page_title %}
@@ -21,37 +21,40 @@
       <a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['failed'], page=1) }}">Failed messages</a>
     </p>
 
-    {% call(item, row_number) list_table(
-      notifications,
-      caption="Recent activity",
-      caption_visible=False,
-      empty_message='You haven’t sent any notifications yet',
-      field_headings=['Recipient', 'Template', 'Type', 'Job', 'Status', 'Time'])
-    %}
-      {% call field() %}
+  {% call(item, row_number) list_table(
+    notifications,
+    caption="Recent activity",
+    caption_visible=False,
+    empty_message='No messages found',
+    field_headings=['Recipient', 'Status', 'Started'],
+    field_headings_visible=False
+  ) %}
+
+    {% call field() %}
+      <p>
         {{ item.to }}
-      {% endcall %}
-      {% call field() %}
+      </p>
+      <p class="hint">
         <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">{{ item.template.name }}</a>
-      {% endcall %}
-      {% call field() %}
-        {{ item.template.template_type }}
-      {% endcall %}
-      {% call field() %}
+        sent from
         {% if item.job %}
           <a href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
+        {% else %}
+          an API call
         {% endif %}
-      {% endcall %}
-      {% call field() %}
-        {{ item.status }}
-      {% endcall %}
-      {% call field() %}
-        {{ item.created_at | format_datetime }}
-      {% endcall %}
+      </p>
     {% endcall %}
-    <p class="table-show-more-link">
-      <a href="{{ request.url }}&download=csv">Download csv</a>
-    </p>
-    {{ previous_next_navigation(prev_page, next_page) }}
 
-{% endblock %}
+    {{ text_field(item.status|title) }}
+
+    {% call field(align='right') %}
+      {{ item.created_at|format_delta }}
+    {% endcall %}
+
+  {% endcall %}
+  <p class="table-show-more-link">
+    <a href="{{ request.url }}&download=csv">Download csv</a>
+  </p>
+  {{ previous_next_navigation(prev_page, next_page) }}
+
+{% endblock %}

requirements.txt

@@ -11,6 +11,7 @@ Flask-Bcrypt==0.6.2
 credstash==1.8.0
 boto3==1.2.3
 Pygments==2.0.2
+Babel==2.3.3
 
 git+https://github.com/alphagov/notifications-python-client.git@0.3.1#egg=notifications-python-client==0.3.1