Split the JSON responses into one key per section

Previously, the AJAX update for the dashboard was returning a big blob
of JSON with one key.

This commit splits it up to return:

- one key for each section of the page
- each containing a smaller chunk of HTML rendered from a partial

The jobs page was already working this way (pretty much) but just needed
a little tweaking to get it the same.

app/main/views/dashboard.py

@@ -57,11 +57,24 @@ def service_dashboard(service_id):
 @login_required
 @user_has_permissions('view_activity', admin_override=True)
 def service_dashboard_updates(service_id):
+    dashboard_statistics = get_dashboard_statistics_for_service(service_id)
     return jsonify(**{
-        'today': render_template(
+        'totals': render_template(
-            'views/dashboard/today.html',
+            'views/dashboard/_totals.html',
-            **get_dashboard_statistics_for_service(service_id)
+            **dashboard_statistics
-        )
+        ),
+        'template-statistics': render_template(
+            'views/dashboard/template-statistics.html',
+            **dashboard_statistics
+        ),
+        'jobs': render_template(
+            'views/dashboard/_jobs.html',
+            **dashboard_statistics
+        ),
+        'usage': render_template(
+            'views/dashboard/_usage.html',
+            **dashboard_statistics
+        ),
     })
 
 

app/templates/partials/jobs/count.html

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

app/templates/partials/jobs/notifications.html

@@ -1,17 +1,6 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, date_field, row_heading %}
 
-<div
+<div class="dashboard-table">
-  {% 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 %}
     <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>
@@ -45,5 +34,4 @@
       {{ item.status|format_notification_status(item.template.template_type) }}
     {% endcall %}
   {% endcall %}
-
 </div>

app/templates/partials/jobs/status.html

@@ -1,12 +1,3 @@
-<div
+<p class='heading-small bottom-gutter'>
-  {% if not finished %}
+  Uploaded by {{ job.created_by.name }} on {{ job.created_at|format_datetime_short }}
-    data-module="update-content"
+</p>
-    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 %}
->
-  <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/_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

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

@@ -32,47 +32,64 @@
     <div
       data-module="update-content"
       data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-      data-key="today"
+      data-key="totals"
       data-interval-seconds="2"
       aria-live="polite"
     >
-      <div class="grid-row">
+      {% include 'views/dashboard/_totals.html' %}
-        {% include 'views/dashboard/_totals.html' %}
-        <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>
-        {% include 'views/dashboard/_jobs.html' %}
-        {{ show_more(
-          url_for(".usage", service_id=current_service['id']),
-          'See usage breakdown'
-        ) }}
-      {% endif %}
-
     </div>
+    {{ 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"
+      >
+        {% include 'views/dashboard/template-statistics.html' %}
+      </div>
+      {{ show_more(
+        url_for('.template_history', service_id=current_service.id),
+        'See all templates used this year'
+      ) }}
+    {% 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' %}
+      {{ 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
+        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"
+      >
+        {% include 'views/dashboard/_usage.html' %}
+      </div>
+      {{ 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/jobs/job.html

@@ -28,10 +28,40 @@
       )}}
     {% endif %}
 
-    {% include 'partials/jobs/status.html' %}
+    <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 %}
+    >
+      {% include 'partials/jobs/status.html' %}
+    </div>
 
-    {% include 'partials/jobs/count.html' %}
+    <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 %}
+    >
+      {% include 'partials/jobs/count.html' %}
+    </div>
 
-    {% include 'partials/jobs/notifications.html' %}
+    <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 %}
+    >
+      {% include 'partials/jobs/notifications.html' %}
+    </div>
 
 {% endblock %}