Merge pull request #734 from alphagov/refactor-dashboard-extensive

Refactor markup behind the AJAX bits of the page

app/templates/components/ajax-block.html

@@ -0,0 +1,15 @@
+{% macro ajax_block(partials, 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 %}
+    {{ partials[key]|safe }}
+  {% if not finished %}
+    </div>
+  {% endif %}
+{% endmacro %}

app/templates/partials/jobs/count.html

@@ -1,16 +1,5 @@
 {% from "components/pill.html" import pill %}
 
-<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 %}
->
-
-  <div class="bottom-gutter">
-    {{ pill('Status', counts, status) }}
-  </div>
-
+<div class="bottom-gutter">
+  {{ pill('Status', counts, status) }}
 </div>

app/templates/partials/jobs/notifications.html

@@ -1,16 +1,8 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, date_field, row_heading %}
 
-<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 %}
->
+{% if notifications %}
+  <div class="dashboard-table">
+{% endif %}
 
   {% if notifications %}
     <p class="bottom-gutter">
@@ -46,4 +38,6 @@
     {% endcall %}
   {% endcall %}
 
-</div>
+{% if notifications %}
+  </div>
+{% endif %}

app/templates/partials/jobs/status.html

@@ -1,11 +1,4 @@
-<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 %}
->
+<div>
   <p class='heading-small bottom-gutter'>
     Uploaded by {{ job.created_by.name }} on {{ job.created_at|format_datetime_short }}
   </p>

app/templates/views/dashboard/_jobs.html

@@ -1,12 +1,12 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading %}
-{% from "components/big-number.html" import big_number %}
+{% from "components/big-number.html" import big_number -%}
 
 <div class='dashboard-table'>
   {% call(item, row_number) list_table(
     jobs,
-    caption="Recent batch jobs",
+    caption="Recent files uploaded",
     caption_visible=False,
-    empty_message='You haven’t sent any batch messages yet',
+    empty_message='You haven’t uploaded any files recently',
     field_headings=[
       'File',
       'Sending',

app/templates/views/dashboard/_totals.html

@@ -0,0 +1,27 @@
+{% from "components/big-number.html" import big_number_with_status %}
+{% from "components/message-count-label.html" import message_count_label %}
+
+<div class="grid-row">
+  <div class="column-half">
+    {{ big_number_with_status(
+      statistics.emails_requested,
+      message_count_label(statistics.emails_requested, 'email', suffix=''),
+      statistics.emails_failed,
+      statistics.get('emails_failure_rate', 0.0),
+      statistics.get('emails_failure_rate', 0)|float > 3,
+      failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='failed'),
+      link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed')
+    ) }}
+  </div>
+  <div class="column-half">
+    {{ big_number_with_status(
+      statistics.sms_requested,
+      message_count_label(statistics.sms_requested, 'sms', suffix=''),
+      statistics.sms_failed,
+      statistics.get('sms_failure_rate', 0.0),
+      statistics.get('sms_failure_rate', 0)|float > 3,
+      failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='failed'),
+      link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed')
+    ) }}
+  </div>
+</div>

app/templates/views/dashboard/_usage.html

@@ -0,0 +1,23 @@
+{% from "components/big-number.html" import big_number %}
+
+<div class='grid-row'>
+  <div class='column-half'>
+    <div class="keyline-block">
+      {{ big_number("Unlimited", 'free email allowance', smaller=True) }}
+    </div>
+  </div>
+  <div class='column-half'>
+    <div class="keyline-block">
+      {% if sms_chargeable %}
+        {{ big_number(
+          (sms_chargeable * sms_rate),
+          'spent on text messages',
+          currency="£",
+          smaller=True
+        ) }}
+      {% else %}
+        {{ big_number(sms_allowance_remaining, 'free text messages left', smaller=True) }}
+      {% endif %}
+    </div>
+  </div>
+</div>

app/templates/views/dashboard/dashboard.html

@@ -1,5 +1,11 @@
 {% extends "withnav_template.html" %}
 
+{% from "components/big-number.html" import big_number, big_number_with_status %}
+{% 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
 {% endblock %}
@@ -21,7 +27,37 @@
     <h2 class="heading-medium">
       In the last 7 days
     </h2>
-    {% include 'views/dashboard/today.html' %}
+
+    {{ ajax_block(partials, updates_url, 'totals') }}
+    {{ show_more(
+      url_for('.weekly', service_id=current_service.id),
+      'Compare to previous weeks'
+    ) }}
+
+    {% if partials['has_template_statistics'] %}
+      {{ ajax_block(partials, updates_url, 'template-statistics') }}
+      {{ show_more(
+        url_for('.template_history', service_id=current_service.id),
+        'See all templates used this year'
+      ) }}
+    {% endif %}
+
+    {% if partials['has_jobs'] %}
+      {{ ajax_block(partials, updates_url, 'jobs') }}
+      {{ show_more(
+        url_for('.view_jobs', service_id=current_service.id),
+        'See all uploaded files'
+      ) }}
+    {% endif %}
+
+    {% if current_user.has_permissions(['manage_settings'], admin_override=True) %}
+      <h2 class='heading-medium'>This year</h2>
+      {{ ajax_block(partials, updates_url, 'usage') }}
+      {{ show_more(
+        url_for(".usage", service_id=current_service['id']),
+        'See usage breakdown'
+      ) }}
+    {% endif %}
 
   </div>
 

app/templates/views/dashboard/jobs.html

@@ -1,26 +0,0 @@
-{% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}
-
-{% call(item, row_number) list_table(
-  jobs,
-  caption="Recent batch jobs",
-  empty_message='You haven’t sent any batch messages yet',
-  field_headings=['File', 'Started', right_aligned_field_heading('Rows')]
-) %}
-  {% call field() %}
-    <a href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
-    {{ item.created_at|format_datetime }}
-  {% endcall %}
-  {% call field() %}
-
-  {% endcall %}
-  {% call field(align='right') %}
-    {{ item.notification_count }}
-  {% endcall %}
-{% endcall %}
-{% if more_jobs_to_show %}
-  {% if current_user.has_permissions(['send_texts', 'send_emails', 'send_letters']) %}
-    <p class="table-show-more-link">
-      <a href="{{ url_for('.view_jobs', service_id=current_service.id) }}">See all sent batch messages</a>
-    </p>
-  {% endif %}
-{% endif %}

app/templates/views/dashboard/today.html

@@ -1,90 +0,0 @@
-{% from "components/big-number.html" import big_number, big_number_with_status %}
-{% 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 %}
-
-<div
-  data-module="update-content"
-  data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-  data-key="today"
-  data-interval-seconds="2"
-  aria-live="polite"
->
-  <div class="grid-row">
-    <div class="column-half">
-      {{ big_number_with_status(
-        statistics.emails_requested,
-        message_count_label(statistics.emails_requested, 'email', suffix=''),
-        statistics.emails_failed,
-        statistics.get('emails_failure_rate', 0.0),
-        statistics.get('emails_failure_rate', 0)|float > 3,
-        failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='failed'),
-        link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed')
-      ) }}
-    </div>
-    <div class="column-half">
-      {{ big_number_with_status(
-        statistics.sms_requested,
-        message_count_label(statistics.sms_requested, 'sms', suffix=''),
-        statistics.sms_failed,
-        statistics.get('sms_failure_rate', 0.0),
-        statistics.get('sms_failure_rate', 0)|float > 3,
-        failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='failed'),
-        link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed')
-      ) }}
-    </div>
-    <div class="column-whole">
-      {{ show_more(
-        url_for('.weekly', service_id=current_service.id),
-        'Compare to previous weeks'
-      ) }}
-    </div>
-  </div>
-
-  {% if template_statistics|length %}
-    {% include 'views/dashboard/template-statistics.html' %}
-    {{ show_more(
-      url_for('.template_history', service_id=current_service.id),
-      'See all templates used this year'
-    ) }}
-  {% endif %}
-
-  {% if jobs %}
-    {% include 'views/dashboard/_jobs.html' %}
-    {{ show_more(
-      url_for('.view_jobs', service_id=current_service.id),
-      'See all uploaded files'
-    ) }}
-  {% endif %}
-
-  {% if current_user.has_permissions(['manage_settings'], admin_override=True) %}
-    <h2 class='heading-medium'>This year</h2>
-
-    <div class='grid-row'>
-      <div class='column-half'>
-        <div class="keyline-block">
-          {{ big_number("Unlimited", 'free email allowance', smaller=True) }}
-        </div>
-      </div>
-      <div class='column-half'>
-        <div class="keyline-block">
-          {% if sms_chargeable %}
-            {{ big_number(
-              (sms_chargeable * sms_rate),
-              'spent on text messages',
-              currency="£",
-              smaller=True
-            ) }}
-          {% else %}
-            {{ big_number(sms_allowance_remaining, 'free text messages left', smaller=True) }}
-          {% endif %}
-        </div>
-      </div>
-    </div>
-    {{ show_more(
-      url_for(".usage", service_id=current_service['id']),
-      'See usage breakdown'
-    ) }}
-  {% endif %}
-
-</div>

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,10 +29,8 @@
       )}}
     {% endif %}
 
-    {% include 'partials/jobs/status.html' %}
-
-    {% include 'partials/jobs/count.html' %}
-
-    {% include 'partials/jobs/notifications.html' %}
+    {{ ajax_block(partials, updates_url, 'status', finished=finished) }}
+    {{ ajax_block(partials, updates_url, 'counts', finished=finished) }}
+    {{ ajax_block(partials, updates_url, 'notifications', finished=finished) }}
 
 {% endblock %}