From 1a6bb3717167931db2459caa9bdd73dab47d2102 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 12 Apr 2016 15:05:27 +0100
Subject: [PATCH] =?UTF-8?q?Tidy=20up=20the=20=E2=80=98Activity=E2=80=99=20?=
 =?UTF-8?q?table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                              | 14 +++++
 app/assets/stylesheets/components/table.scss |  8 +++
 app/templates/components/table.html          |  6 ++
 app/templates/views/notifications.html       | 59 ++++++++++----------
 requirements.txt                             |  1 +
 5 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index f06598b62..f2714a8cc 100644
--- a/app/__init__.py
+++ b/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)
diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
index ddb9c5eef..b2364a746 100644
--- a/app/assets/stylesheets/components/table.scss
+++ b/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 {
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index f6a1ed0fe..5f96508ce 100644
--- a/app/templates/components/table.html
+++ b/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" }}
diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html
index 6c669f521..fe2fafc6f 100644
--- a/app/templates/views/notifications.html
+++ b/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 %}
\ No newline at end of file
+    {{ 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 %}
diff --git a/requirements.txt b/requirements.txt
index 3b1b1088c..7647b9166 100644
--- a/requirements.txt
+++ b/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