Make a macro for the AJAX update module

This is less repetitive than typing out the HTML with all its attributes
every time.

It also lets us wrap up the idea of ‘finished’ as a parameter, so the
AJAX code will only be initiated when it’s needed, eg if a job is still
processing.

app/main/views/dashboard.py

@@ -49,6 +49,7 @@ def service_dashboard(service_id):
     return render_template(
         'views/dashboard/dashboard.html',
         templates=service_api_client.get_service_templates(service_id)['data'],
+        updates_url=url_for(".service_dashboard_updates", service_id=service_id),
         **get_dashboard_statistics_for_service(service_id)
     )
 

app/main/views/jobs.py

@@ -97,7 +97,13 @@ def view_job(service_id, job_id):
             prefix=current_service['name']
         ),
         counts=_get_job_counts(job, request.args.get('help', 0)),
-        status=request.args.get('status', '')
+        status=request.args.get('status', ''),
+        updates_url=url_for(
+            ".view_job_updates",
+            service_id=service_id,
+            job_id=job['id'],
+            status=request.args.get('status', '')
+        )
     )
 
 

app/templates/components/ajax-block.html

@@ -0,0 +1,15 @@
+{% macro ajax_block(url, key, interval=2, finished=False) %}
+  {% if not finished %}
+    <div
+      data-module="update-content"
+      data-resource="{{ url }}"
+      data-key="{{ key }}"
+      data-interval-seconds="{{ interval }}"
+      aria-live="polite"
+    >
+  {% endif %}
+    {{ caller() }}
+  {% if not finished %}
+    </div>
+  {% endif %}
+{% endmacro %}

app/templates/partials/jobs/notifications.html

@@ -1,6 +1,9 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, date_field, row_heading %}
 
-<div class="dashboard-table">
+{% if notifications %}
+  <div class="dashboard-table">
+{% endif %}
+
   {% if notifications %}
     <p class="bottom-gutter">
       <a href="{{ url_for('.view_job_csv', service_id=current_service.id, job_id=job.id, status=status) }}" download="download" class="heading-small">Download as a CSV file</a>
@@ -34,4 +37,7 @@
       {{ item.status|format_notification_status(item.template.template_type) }}
     {% endcall %}
   {% endcall %}
-</div>
+
+{% if notifications %}
+  </div>
+{% endif %}

app/templates/partials/jobs/status.html

@@ -1,3 +1,5 @@
-<p class='heading-small bottom-gutter'>
-  Uploaded by {{ job.created_by.name }} on {{ job.created_at|format_datetime_short }}
-</p>
+<div>
+  <p class='heading-small bottom-gutter'>
+    Uploaded by {{ job.created_by.name }} on {{ job.created_at|format_datetime_short }}
+  </p>
+</div>

app/templates/views/dashboard/dashboard.html

@@ -4,6 +4,7 @@
 {% from "components/show-more.html" import show_more %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}
+{% from "components/ajax-block.html" import ajax_block %}
 
 {% block page_title %}
   {{ current_service.name }} – GOV.UK Notify
@@ -29,30 +30,18 @@
       In the last 7 days
     </h2>
 
-    <div
-      data-module="update-content"
-      data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-      data-key="totals"
-      data-interval-seconds="2"
-      aria-live="polite"
-    >
+    {% call ajax_block(updates_url, 'totals') %}
       {% include 'views/dashboard/_totals.html' %}
-    </div>
+    {% endcall %}
     {{ show_more(
       url_for('.weekly', service_id=current_service.id),
       'Compare to previous weeks'
     ) }}
 
     {% if template_statistics|length %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-        data-key="template-statistics"
-        data-interval-seconds="2"
-        aria-live="polite"
-      >
+      {% call ajax_block(updates_url, 'template-statistics') %}
         {% include 'views/dashboard/template-statistics.html' %}
-      </div>
+      {% endcall %}
       {{ show_more(
         url_for('.template_history', service_id=current_service.id),
         'See all templates used this year'
@@ -60,14 +49,9 @@
     {% endif %}
 
     {% if jobs %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-        data-key="jobs"
-        data-interval-seconds="2"
-        aria-live="polite"
-      >
-      {% include 'views/dashboard/_jobs.html' %}
+      {% call ajax_block(updates_url, 'jobs') %}
+        {% include 'views/dashboard/_jobs.html' %}
+      {% endcall %}
       {{ show_more(
         url_for('.view_jobs', service_id=current_service.id),
         'See all uploaded files'
@@ -76,15 +60,9 @@
 
     {% if current_user.has_permissions(['manage_settings'], admin_override=True) %}
       <h2 class='heading-medium'>This year</h2>
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-        data-key="usage"
-        data-interval-seconds="2"
-        aria-live="polite"
-      >
+      {% call ajax_block(updates_url, 'usage') %}
         {% include 'views/dashboard/_usage.html' %}
-      </div>
+      {% endcall %}
       {{ show_more(
         url_for(".usage", service_id=current_service['id']),
         'See usage breakdown'

app/templates/views/jobs/job.html

@@ -2,6 +2,7 @@
 {% from "components/banner.html" import banner %}
 {% from "components/sms-message.html" import sms_message %}
 {% from "components/email-message.html" import email_message %}
+{% from "components/ajax-block.html" import ajax_block %}
 
 {% block page_title %}
   {{ uploaded_file_name }} – GOV.UK Notify
@@ -28,40 +29,16 @@
       )}}
     {% endif %}
 
-    <div
-      {% if not finished %}
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id, status=status, help=request.args.get('help', 0))}}"
-        data-key="status"
-        aria-live="polite"
-      {% endif %}
-    >
+    {% call ajax_block(updates_url, 'status', finished=finished) %}
       {% include 'partials/jobs/status.html' %}
-    </div>
+    {% endcall %}
 
-    <div
-      {% if not finished %}
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id, status=status, help=request.args.get('help', 0))}}"
-        data-key="counts"
-        aria-live="polite"
-      {% endif %}
-    >
+    {% call ajax_block(updates_url, 'counts', finished=finished) %}
       {% include 'partials/jobs/count.html' %}
-    </div>
+    {% endcall %}
 
-    <div
-      {% if notifications %}
-        class='dashboard-table'
-      {% endif %}
-      {% if not finished %}
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id, status=request.args.get('status'), help=request.args.get('help'))}}"
-        data-key="notifications"
-        aria-live="polite"
-      {% endif %}
-    >
+    {% call ajax_block(updates_url, 'notifications', finished=finished) %}
       {% include 'partials/jobs/notifications.html' %}
-    </div>
+    {% endcall %}
 
 {% endblock %}