Merge pull request #512 from alphagov/ajax-patching

Patch update sections of the page on AJAX

app/assets/javascripts/updateContent.js

@@ -4,6 +4,8 @@
   GOVUK.timeCache = {};
   GOVUK.resultCache = {};
 
+  var dd = new diffDOM();
+
   let getter = function(resource, interval, render) {
 
     if (
@@ -21,8 +23,11 @@
 
   };
 
-  let poller = (resource, key, component, interval) => () => getter(
+  let poller = (resource, key, $component, interval) => () => getter(
-    resource, interval, response => component.html(response[key])
+    resource, interval, response => dd.apply(
+      $component.get(0),
+      dd.diff($component.get(0), $(response[key]).get(0))
+    )
   );
 
   Modules.UpdateContent = function() {

app/templates/partials/jobs/count.html

@@ -1,13 +1,25 @@
 {% from "components/big-number.html" import big_number %}
-<ul class="grid-row job-totals">
+
-  <li class="column-one-quarter">
+<div
-    {{ big_number(
+  {% if not finished_at %}
-      counts.queued, 'queued'
+    data-module="update-content"
-    )}}
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-  </li>
+    data-key="counts"
-  <li class="column-one-quarter">
+    aria-live="polite"
-    {{ big_number(
+  {% endif %}
-      counts.sent, 'processed'
+>
-    )}}
+
-  </li>
+  <ul class="grid-row job-totals">
-</ul>
+    <li class="column-one-quarter">
+      {{ big_number(
+        counts.queued, 'queued'
+      )}}
+    </li>
+    <li class="column-one-quarter">
+      {{ big_number(
+        counts.sent, 'processed'
+      )}}
+    </li>
+  </ul>
+
+</div>

app/templates/partials/jobs/notifications.html

@@ -1,22 +1,35 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading %}
 
-{% call(item, row_number) list_table(
+<div
-  notifications,
+  {% if not finished_at %}
-  caption=uploaded_file_name,
+    data-module="update-content"
-  caption_visible=False,
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-  empty_message="No messages to show yet",
+    data-key="notifications"
-  field_headings=[
+    aria-live="polite"
-    'Recipient',
+  {% endif %}
-    right_aligned_field_heading('Status')
+>
-  ]
+
-) %}
+  <div>
-  {% call field() %}
+    {% call(item, row_number) list_table(
-    {{ item.to }}
+      notifications,
-  {% endcall %}
+      caption=uploaded_file_name,
-  {% call field(
+      caption_visible=False,
-    align='right',
+      empty_message="No messages to show yet",
-    status='error' if item.status == 'Failed' else 'default'
+      field_headings=[
-  ) %}
+        'Recipient',
-    {{ item.status|title }} at {{ item.sent_at|format_time }}
+        right_aligned_field_heading('Status')
-  {% endcall %}
+      ]
-{% endcall %}
+    ) %}
+      {% call field() %}
+        {{ item.to }}
+      {% endcall %}
+      {% call field(
+        align='right',
+        status='error' if item.status == 'Failed' else 'default'
+      ) %}
+        {{ item.status|title }} at {{ item.sent_at|format_time }}
+      {% endcall %}
+    {% endcall %}
+  </div>
+
+</div>

app/templates/partials/jobs/status.html

@@ -1,9 +1,20 @@
-{% if finished_at %}
+<div
-  <p class='heading-small'>
+  {% if not finished_at %}
-    Finished {{ finished_at|format_datetime }}
+    data-module="update-content"
-  </p>
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-{% else %}
+    data-key="status"
-  <p class='heading-small'>
+    aria-live="polite"
-    Started {{ uploaded_at|format_datetime }}
+  {% endif %}
-  </p>
+>
-{% endif %}
+
+  {% if finished_at %}
+    <p class='heading-small'>
+      Finished {{ finished_at|format_datetime }}
+    </p>
+  {% else %}
+    <p class='heading-small'>
+      Started {{ uploaded_at|format_datetime }}
+    </p>
+  {% endif %}
+
+</div>

app/templates/views/dashboard/dashboard.html

@@ -18,13 +18,6 @@
       {% include 'views/dashboard/no-permissions-banner.html' %}
     {% endif %}
 
-      <div
+    {% include 'views/dashboard/today.html' %}
-        data-module="update-content"
-        data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-        data-key="today"
-        data-interval-seconds="10"
-      >
-        {% include 'views/dashboard/today.html' %}
-      </div>
 
 {% endblock %}

app/templates/views/dashboard/today.html

@@ -1,33 +1,41 @@
 {% from "components/big-number.html" import big_number_with_status %}
 
-<h2 class="heading-medium">
+<div
-  In the last 7 days
+  data-module="update-content"
-</h2>
+  data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
-<div class="grid-row bottom-gutter">
+  data-key="today"
-  <div class="column-half">
+  data-interval-seconds="2"
-    {{ big_number_with_status(
+  aria-live="polite"
-      statistics.get('emails_delivered', 0),
+>
-      'email' if statistics.get('emails_delivered') == 1 else 'emails',
+  <h2 class="heading-medium">
-      statistics.get('emails_failed'),
+    In the last 7 days
-      statistics.get('emails_failure_rate', 0.0),
+  </h2>
-      statistics.get('emails_failure_rate', 0)|float > 3,
+  <div class="grid-row bottom-gutter">
-      failure_link=url_for(".view_notifications", service_id=current_service.id, template_type='email', status='failed')
+    <div class="column-half">
-    ) }}
+      {{ big_number_with_status(
-  </div>
+        statistics.get('emails_delivered', 0),
-  <div class="column-half">
+        'email' if statistics.get('emails_delivered') == 1 else 'emails',
-    {{ big_number_with_status(
+        statistics.get('emails_failed'),
-      statistics.get('sms_requested', 0),
+        statistics.get('emails_failure_rate', 0.0),
-      'text message' if statistics.get('sms_requested') == 1 else 'text messages',
+        statistics.get('emails_failure_rate', 0)|float > 3,
-      statistics.get('sms_failed'),
+        failure_link=url_for(".view_notifications", service_id=current_service.id, template_type='email', status='failed')
-      statistics.get('sms_failure_rate', 0.0),
+      ) }}
-      statistics.get('sms_failure_rate', 0)|float > 3,
+    </div>
-      failure_link=url_for(".view_notifications", service_id=current_service.id, template_type='sms', status='failed')
+    <div class="column-half">
-    ) }}
+      {{ big_number_with_status(
+        statistics.get('sms_requested', 0),
+        'text message' if statistics.get('sms_requested') == 1 else 'text messages',
+        statistics.get('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, template_type='sms', status='failed')
+      ) }}
+    </div>
   </div>
+  {% with period = "in the last 7 days" %}
+    {% include 'views/dashboard/template-statistics.html' %}
+  {% endwith %}
+  <p class='table-show-more-link'>
+    <a href="{{ url_for('.template_history', service_id=current_service.id) }}">See all templates used this year</a>
+  </p>
 </div>
-{% with period = "in the last 7 days" %}
-  {% include 'views/dashboard/template-statistics.html' %}
-{% endwith %}
-<p class='table-show-more-link'>
-  <a href="{{ url_for('.template_history', service_id=current_service.id) }}">See all templates used this year</a>
-</p>

app/templates/views/jobs/job.html

@@ -30,40 +30,10 @@
       )}}
     {% endif %}
 
-    {% if not finished_at %}
+    {% include 'partials/jobs/status.html' %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-        data-key="status"
-      >
-    {% endif %}
-      {% include 'partials/jobs/status.html' %}
-    {% if not finished_at %}
-      </div>
-    {% endif %}
 
-    {% if not finished_at %}
+    {% include 'partials/jobs/count.html' %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-        data-key="counts"
-      >
-    {% endif %}
-      {% include 'partials/jobs/count.html' %}
-    {% if not finished_at %}
-      </div>
-    {% endif %}
 
-    {% if not finished_at %}
+    {% include 'partials/jobs/notifications.html' %}
-      <div
-        data-module="update-content"
-        data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job_id)}}"
-        data-key="notifications"
-      >
-    {% endif %}
-      {% include 'partials/jobs/notifications.html' %}
-    {% if not finished_at %}
-      </div>
-    {% endif %}
 
 {% endblock %}

gulpfile.babel.js

@@ -68,7 +68,8 @@ gulp.task('javascripts', () => gulp
   .pipe(plugins.uglify())
   .pipe(plugins.addSrc.prepend([
     paths.npm + 'jquery/dist/jquery.min.js',
-    paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js'
+    paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
+    paths.npm + 'diff-dom/diffDOM.js'
   ]))
   .pipe(plugins.concat('all.js'))
   .pipe(gulp.dest(paths.dist + 'javascripts/'))

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "babel-core": "6.3.26",
     "babel-preset-es2015": "6.3.13",
+    "diff-dom": "2.0.3",
     "govuk-elements-sass": "1.1.1",
     "govuk_frontend_toolkit": "4.6.0",
     "govuk_template_jinja": "https://github.com/alphagov/govuk_template/releases/download/v0.17.1/jinja_govuk_template-0.17.1.tgz",