Chunk events by day

Scanning the page is difficult at the moment because it’s hard to tell
how far apart in time events are, and thereby determine which events
might be related.

Grouping the events by day quickly lets users narrow their focus to
a meaningful subset of the events.

app/__init__.py

@@ -328,6 +328,10 @@ def format_date_short(date):
     return _format_datetime_short(utc_string_to_aware_gmt_datetime(date))
 
 
+def format_date_human(date):
+    return get_human_day(date)
+
+
 def _format_datetime_short(datetime):
     return datetime.strftime('%d %B').lstrip('0')
 
@@ -681,6 +685,7 @@ def add_template_filters(application):
         valid_phone_number,
         linkable_name,
         format_date,
+        format_date_human,
         format_date_normal,
         format_date_short,
         format_datetime_relative,

app/assets/stylesheets/main.scss

@@ -75,6 +75,7 @@ $path: '/static/images/';
 @import 'views/template';
 @import 'views/notification';
 @import 'views/send';
+@import 'views/history';
 
 // TODO: break this up
 @import 'app';

app/assets/stylesheets/views/history.scss

@@ -0,0 +1,29 @@
+$item-top-padding: $gutter-half;
+
+.history-list {
+
+  @include core-19;
+  margin-bottom: $gutter;
+
+  &-item {
+
+    padding: $item-top-padding 0 $gutter-half 0;
+    border-top: 1px solid $border-colour;
+    position: relative;
+
+    &:last-child {
+      border-bottom: 1px solid $border-colour;
+    }
+
+  }
+
+  &-user {
+    display: block;
+  }
+
+  &-time {
+    display: block;
+    color: $secondary-text-colour;
+  }
+
+}

app/main/views/history.py

@@ -1,5 +1,8 @@
+from collections import defaultdict
+
 from flask import render_template
 
+from app import current_service, format_date_numeric
 from app.main import main
 from app.utils import user_has_permissions
 
@@ -7,4 +10,17 @@ from app.utils import user_has_permissions
 @main.route("/services/<service_id>/history")
 @user_has_permissions('manage_service')
 def history(service_id):
-    return render_template('views/temp-history.html')
+    return render_template(
+        'views/temp-history.html',
+        days=_chunk_events_by_day(current_service.history)
+    )
+
+
+def _chunk_events_by_day(events):
+
+    days = defaultdict(list)
+
+    for event in reversed(events):
+        days[format_date_numeric(event.time)].append(event)
+
+    return sorted(days.items(), reverse=True)

app/templates/views/temp-history.html

@@ -10,12 +10,28 @@ Service and API key history
 
   {{ page_header("Service and API key history") }}
 
-  <ul>
-    {% for event in current_service.history|reverse %}
-      <li>
-        {{ event.time|format_datetime_relative }} {{ event.user_id }}<br />
-        {{ event|string }}
-      </li>
-    {% endfor %}
-  </ul>
+  {% for day, events in days %}
+    <h2 class="heading-small top-gutter">
+      {{ events[0].time|format_date_human|title }}
+    </h2>
+    <ul class="bottom-gutter">
+      {% for event in events %}
+        <li class="history-list-item">
+          <div class="grid-row">
+            <div class="column-one-third">
+              <div class="history-list-user">
+                {{ event.user_id }}
+              </div>
+              <div class="history-list-time">
+                {{ event.time|format_time }}
+              </div>
+            </div>
+            <div class="column-two-thirds">
+              {{ event }}
+            </div>
+        </li>
+      {% endfor%}
+    </ul>
+  {% endfor %}
+
 {% endblock %}