Merge pull request #674 from alphagov/js-updater-update

Improve AJAX behaviour when server is slow/erroring

app/assets/javascripts/updateContent.js

@@ -1,48 +1,49 @@
-(function(GOVUK, Modules) {
+(function(Modules) {
   "use strict";
 
-  GOVUK.timeCache = {};
-  GOVUK.resultCache = {};
-
+  var queues = {};
   var dd = new diffDOM();
 
-  let getter = function(resource, interval, render) {
+  var getRenderer = $component => response => dd.apply(
+    $component.get(0),
+    dd.diff($component.get(0), $(response[$component.data('key')]).get(0))
+  );
 
-    if (
-      GOVUK.resultCache[resource] &&
-      (Date.now() < GOVUK.timeCache[resource])
-    ) {
-      render(GOVUK.resultCache[resource]);
-    } else {
-      GOVUK.timeCache[resource] = Date.now() + interval;
-      $.get(
-        resource,
-        response => render(GOVUK.resultCache[resource] = response)
-      );
-    }
+  var getQueue = resource => (
+    queues[resource] = queues[resource] || []
+  );
 
+  var flushQueue = function(queue, response) {
+    while(queue.length) queue.shift()(response);
   };
 
-  let poller = (resource, key, $component, interval) => () => getter(
-    resource, interval, response => dd.apply(
-      $component.get(0),
-      dd.diff($component.get(0), $(response[key]).get(0))
-    )
-  );
+  var clearQueue = queue => (queue.length = 0);
+
+  var poll = function(renderer, resource, queue, interval) {
+
+    if (queue.push(renderer) === 1) $.ajax(
+      resource
+    ).done(
+      response => flushQueue(queue, response)
+    ).fail(
+      () => clearQueue(queue)
+    );
+
+    setTimeout(
+      () => poll(...arguments), interval
+    );
+
+  };
 
   Modules.UpdateContent = function() {
 
-    this.start = function(component) {
+    this.start = component => poll(
+      getRenderer($(component)),
+      $(component).data('resource'),
+      getQueue($(component).data('resource')),
+      ($(component).data('interval-seconds') || 1.5) * 1000
+    );
 
-      const $component = $(component);
-      interval = ($(component).data("interval-seconds") * 1000) || 1500;
-
-      setInterval(
-        poller($component.data('resource'), $component.data('key'), $component, interval),
-        interval / 5
-      );
-
-    };
   };
 
-})(window.GOVUK, window.GOVUK.Modules);
+})(window.GOVUK.Modules);

app/templates/partials/jobs/count.html

@@ -2,9 +2,9 @@
 
 <div
   {% if not finished %}
-    {#data-module="update-content"
+    data-module="update-content"
     data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id)}}"
-    data-key="counts"#}
+    data-key="counts"
     aria-live="polite"
   {% endif %}
 >

app/templates/partials/jobs/notifications.html

@@ -2,9 +2,9 @@
 
 <div
   {% if not finished %}
-    {#data-module="update-content"
+    data-module="update-content"
     data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id)}}"
-    data-key="notifications"#}
+    data-key="notifications"
     aria-live="polite"
   {% endif %}
 >

app/templates/partials/jobs/status.html

@@ -1,8 +1,8 @@
 <div
   {% if not finished %}
-    {#data-module="update-content"
+    data-module="update-content"
     data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id)}}"
-    data-key="status"#}
+    data-key="status"
     aria-live="polite"
   {% endif %}
 >

app/templates/views/dashboard/today.html

@@ -4,10 +4,10 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, hidden_field_heading %}
 
 <div
-  {#data-module="update-content"
+  data-module="update-content"
   data-resource="{{url_for(".service_dashboard_updates", service_id=current_service.id)}}"
   data-key="today"
-  data-interval-seconds="2"#}
+  data-interval-seconds="2"
   aria-live="polite"
 >
   <div class="grid-row">