Merge pull request #952 from alphagov/ajax-activity-page

AJAX the activity page

app/main/views/jobs.py

@@ -2,6 +2,7 @@
 import ago
 import time
 import dateutil
+import json
 from orderedset import OrderedSet
 from datetime import datetime, timedelta, timezone
 from itertools import chain
@@ -165,10 +166,28 @@ def view_job_updates(service_id, job_id):
 
 
 @main.route('/services/<service_id>/notifications/<message_type>')
-@main.route('/services/<service_id>/notifications/<message_type>.csv', endpoint="view_notifications_csv")
 @login_required
 @user_has_permissions('view_activity', admin_override=True)
 def view_notifications(service_id, message_type):
+    return render_template(
+        'views/notifications.html',
+        partials=get_notifications(service_id, message_type),
+        message_type=message_type,
+        status=request.args.get('status')
+    )
+
+
+@main.route('/services/<service_id>/notifications/<message_type>.json')
+@user_has_permissions('view_activity', admin_override=True)
+def get_notifications_as_json(service_id, message_type):
+    return jsonify(get_notifications(
+        service_id, message_type, status_override=request.args.get('status')
+    ))
+
+
+@main.route('/services/<service_id>/notifications/<message_type>.csv', endpoint="view_notifications_csv")
+@user_has_permissions('view_activity', admin_override=True)
+def get_notifications(service_id, message_type, status_override=None):
     # TODO get the api to return count of pages as well.
     page = get_page_from_request()
     if page is None:
@@ -220,26 +239,32 @@ def view_notifications(service_id, message_type):
             'Content-Type': 'text/csv; charset=utf-8',
             'Content-Disposition': 'inline; filename="notifications.csv"'
         }
-    return render_template(
-        'views/notifications.html',
-        notifications=notifications['notifications'],
-        page=page,
-        prev_page=prev_page,
-        next_page=next_page,
-        status=request.args.get('status'),
-        message_type=message_type,
-        download_link=url_for(
-            '.view_notifications_csv',
-            service_id=current_service['id'],
-            message_type=message_type,
-            status=request.args.get('status')
+    return {
+        'counts': render_template(
+            'views/activity/counts.html',
+            status=request.args.get('status'),
+            status_filters=get_status_filters(
+                current_service,
+                message_type,
+                service_api_client.get_detailed_service(service_id)['data']['statistics']
+            )
         ),
-        status_filters=get_status_filters(
-            current_service,
-            message_type,
-            service_api_client.get_detailed_service(service_id)['data']['statistics']
-        )
-    )
+        'notifications': render_template(
+            'views/activity/notifications.html',
+            notifications=notifications['notifications'],
+            page=page,
+            prev_page=prev_page,
+            next_page=next_page,
+            status=request.args.get('status'),
+            message_type=message_type,
+            download_link=url_for(
+                '.view_notifications_csv',
+                service_id=current_service['id'],
+                message_type=message_type,
+                status=request.args.get('status')
+            )
+        ),
+    }
 
 
 def get_status_filters(service, message_type, statistics):

app/templates/views/activity/counts.html

@@ -0,0 +1,9 @@
+{% from "components/pill.html" import pill %}
+
+<div class='bottom-gutter ajax-block-container'>
+  {{ pill(
+    'Status',
+    status_filters,
+    status
+  ) }}
+</div>

app/templates/views/activity/notifications.html

@@ -0,0 +1,47 @@
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/previous-next-navigation.html" import previous_next_navigation %}
+{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %}
+
+<div class="ajax-block-container">
+
+  {% if notifications %}
+    <p class="bottom-gutter">
+      <a href="{{ download_link }}" download="download" class="heading-small">Download this report</a>
+      &emsp;
+      Data available for 7 days
+    </p>
+    <div class='dashboard-table'>
+  {% endif %}
+    {% call(item, row_number) list_table(
+      notifications,
+      caption="Recent activity",
+      caption_visible=False,
+      empty_message='No messages found',
+      field_headings=['Recipient', 'Status'],
+      field_headings_visible=False
+    ) %}
+
+      {% call row_heading() %}
+        <p>
+          {{ item.to }}
+        </p>
+        <p class="hint">
+          {% if item.job %}
+            From <a href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
+          {% else %}
+            <a href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=item.template.id, version=item.template_version) }}">{{ item.template.name }}</a>
+            from an API call
+          {% endif %}
+        </p>
+      {% endcall %}
+
+      {{ notification_status_field(item) }}
+
+    {% endcall %}
+  {% if notifications %}
+    </div>
+  {% endif %}
+
+  {{ previous_next_navigation(prev_page, next_page) }}
+
+</div>

app/templates/views/notifications.html

@@ -1,8 +1,5 @@
 {% extends "withnav_template.html" %}
-{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %}
-{% from "components/previous-next-navigation.html" import previous_next_navigation %}
-{% from "components/page-footer.html" import page_footer %}
-{% from "components/pill.html" import pill %}
+{% from "components/ajax-block.html" import ajax_block %}
 {% from "components/message-count-label.html" import message_count_label, recipient_count_label %}
 
 {% block page_title %}
@@ -12,69 +9,19 @@
 {% block maincolumn_content %}
 
   <h1 class="heading-large">
-
-    <span class="visually-hidden">
-      {%- if status != 'delivered,failed' -%}
-        {%- for label, option, _, _ in status_filters -%}
-          {%- if status == option -%}{{label}} {% endif -%}
-        {%- endfor -%}
-      {%- endif -%}
-    </span>
-
-    {{- message_count_label(99, message_type, suffix='') | capitalize }}
-
+    {{ message_count_label(99, message_type, suffix='') | capitalize }}
   </h1>
 
-  <div class='bottom-gutter'>
-    {{ pill(
-      'Status',
-      status_filters,
-      status
-    ) }}
-  </div>
+  {{ ajax_block(
+    partials,
+    url_for('.get_notifications_as_json', service_id=current_service.id, message_type=message_type, status=status),
+    'counts'
+  ) }}
 
-  {% if notifications %}
-    <p class="bottom-gutter">
-      <a href="{{ download_link }}" download="download" class="heading-small">Download this report</a>
-      &emsp;
-      Data available for 7 days
-    </p>
-  {% endif %}
-
-
-  {% if notifications %}
-    <div class='dashboard-table'>
-  {% endif %}
-    {% call(item, row_number) list_table(
-      notifications,
-      caption="Recent activity",
-      caption_visible=False,
-      empty_message='No messages found',
-      field_headings=['Recipient', 'Status'],
-      field_headings_visible=False
-    ) %}
-
-      {% call row_heading() %}
-        <p>
-          {{ item.to }}
-        </p>
-        <p class="hint">
-          {% if item.job %}
-            From <a href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
-          {% else %}
-            <a href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=item.template.id, version=item.template_version) }}">{{ item.template.name }}</a>
-            from an API call
-          {% endif %}
-        </p>
-      {% endcall %}
-
-      {{ notification_status_field(item) }}
-
-    {% endcall %}
-  {% if notifications %}
-    </div>
-  {% endif %}
-
-  {{ previous_next_navigation(prev_page, next_page) }}
+  {{ ajax_block(
+    partials,
+    url_for('.get_notifications_as_json', service_id=current_service.id, message_type=message_type, status=status),
+    'notifications'
+  ) }}
 
 {% endblock %}

tests/app/main/views/test_jobs.py

@@ -338,6 +338,15 @@ def test_can_show_notifications(
         assert csv_response.get_data(as_text=True) == csv_content
         assert 'text/csv' in csv_response.headers['Content-Type']
 
+        json_response = client.get(url_for(
+            'main.get_notifications_as_json',
+            service_id=service_one['id'],
+            message_type=message_type,
+            status=status_argument
+        ))
+        json_content = json.loads(json_response.get_data(as_text=True))
+        assert json_content.keys() == {'counts', 'notifications'}
+
 
 def test_should_show_notifications_for_a_service_with_next_previous(
     app_,