UI: Replace the adapter cancellation methods with a cancellation token system

ui/app/adapters/watchable.js

@@ -1,4 +1,4 @@
-import { get, computed } from '@ember/object';
+import { get } from '@ember/object';
 import { assign } from '@ember/polyfills';
 import { inject as service } from '@ember/service';
 import queryString from 'query-string';
@@ -9,52 +9,24 @@ export default ApplicationAdapter.extend({
   watchList: service(),
   store: service(),
 
-  xhrs: computed(function() {
-    return {
-      list: {},
-      track(key, xhr) {
-        if (this.list[key]) {
-          this.list[key].push(xhr);
-        } else {
-          this.list[key] = [xhr];
-        }
-      },
-      cancel(key) {
-        while (this.list[key] && this.list[key].length) {
-          this.remove(key, this.list[key][0]);
-        }
-      },
-      remove(key, xhr) {
-        if (this.list[key]) {
-          xhr.abort();
-          this.list[key].removeObject(xhr);
-        }
-      },
-    };
-  }),
-
-  ajaxOptions() {
+  ajaxOptions(url, type, options) {
     const ajaxOptions = this._super(...arguments);
-    const key = this.xhrKey(...arguments);
-
-    const previousBeforeSend = ajaxOptions.beforeSend;
-    ajaxOptions.beforeSend = function(jqXHR) {
-      if (previousBeforeSend) {
-        previousBeforeSend(...arguments);
-      }
-      this.xhrs.track(key, jqXHR);
-      jqXHR.always(() => {
-        this.xhrs.remove(key, jqXHR);
-      });
-    };
+    const abortToken = (options || {}).abortToken;
+    if (abortToken) {
+      delete options.abortToken;
+
+      const previousBeforeSend = ajaxOptions.beforeSend;
+      ajaxOptions.beforeSend = function(jqXHR) {
+        abortToken.capture(jqXHR);
+        if (previousBeforeSend) {
+          previousBeforeSend(...arguments);
+        }
+      };
+    }
 
     return ajaxOptions;
   },
 
-  xhrKey(url, method /* options */) {
-    return `${method} ${url}`;
-  },
-
   findAll(store, type, sinceToken, snapshotRecordArray, additionalParams = {}) {
     const params = assign(this.buildQuery(), additionalParams);
     const url = this.urlForFindAll(type.modelName);
@@ -63,7 +35,9 @@ export default ApplicationAdapter.extend({
       params.index = this.watchList.getIndexFor(url);
     }
 
+    const abortToken = get(snapshotRecordArray || {}, 'adapterOptions.abortToken');
     return this.ajax(url, 'GET', {
+      abortToken,
       data: params,
     });
   },
@@ -76,7 +50,9 @@ export default ApplicationAdapter.extend({
       params.index = this.watchList.getIndexFor(url);
     }
 
+    const abortToken = get(snapshot || {}, 'adapterOptions.abortToken');
     return this.ajax(url, 'GET', {
+      abortToken,
       data: params,
     }).catch(error => {
       if (error instanceof AbortError) {
@@ -86,7 +62,8 @@ export default ApplicationAdapter.extend({
     });
   },
 
-  reloadRelationship(model, relationshipName, watch = false) {
+  reloadRelationship(model, relationshipName, options = { watch: false, abortToken: null }) {
+    const { watch, abortToken } = options;
     const relationship = model.relationshipFor(relationshipName);
     if (relationship.kind !== 'belongsTo' && relationship.kind !== 'hasMany') {
       throw new Error(
@@ -110,6 +87,7 @@ export default ApplicationAdapter.extend({
       }
 
       return this.ajax(url, 'GET', {
+        abortToken,
         data: params,
       }).then(
         json => {
@@ -143,39 +121,4 @@ export default ApplicationAdapter.extend({
 
     return this._super(...arguments);
   },
-
-  cancelFindRecord(modelName, id) {
-    if (!modelName || id == null) {
-      return;
-    }
-    const url = this.urlForFindRecord(id, modelName);
-    this.xhrs.cancel(`GET ${url}`);
-  },
-
-  cancelFindAll(modelName) {
-    if (!modelName) {
-      return;
-    }
-    let url = this.urlForFindAll(modelName);
-    const params = queryString.stringify(this.buildQuery());
-    if (params) {
-      url = `${url}?${params}`;
-    }
-    this.xhrs.cancel(`GET ${url}`);
-  },
-
-  cancelReloadRelationship(model, relationshipName) {
-    if (!model || !relationshipName) {
-      return;
-    }
-    const relationship = model.relationshipFor(relationshipName);
-    if (relationship.kind !== 'belongsTo' && relationship.kind !== 'hasMany') {
-      throw new Error(
-        `${relationship.key} must be a belongsTo or hasMany, instead it was ${relationship.kind}`
-      );
-    } else {
-      const url = model[relationship.kind](relationship.key).link();
-      this.xhrs.cancel(`GET ${url}`);
-    }
-  },
 });

ui/app/utils/classes/xhr-token.js

@@ -0,0 +1,11 @@
+export default class XHRToken {
+  capture(xhr) {
+    this._xhr = xhr;
+  }
+
+  abort() {
+    if (this._xhr) {
+      this._xhr.abort();
+    }
+  }
+}

ui/app/utils/properties/watch.js

@@ -3,12 +3,14 @@ import { get } from '@ember/object';
 import RSVP from 'rsvp';
 import { task } from 'ember-concurrency';
 import wait from 'nomad-ui/utils/wait';
+import XHRToken from 'nomad-ui/utils/classes/xhr-token';
 import config from 'nomad-ui/config/environment';
 
 const isEnabled = config.APP.blockingQueries !== false;
 
 export function watchRecord(modelName) {
   return task(function*(id, throttle = 2000) {
+    const token = new XHRToken();
     if (typeof id === 'object') {
       id = get(id, 'id');
     }
@@ -17,59 +19,58 @@ export function watchRecord(modelName) {
         yield RSVP.all([
           this.store.findRecord(modelName, id, {
             reload: true,
-            adapterOptions: { watch: true },
+            adapterOptions: { watch: true, abortToken: token },
           }),
           wait(throttle),
         ]);
       } catch (e) {
         yield e;
         break;
       } finally {
-        this.store
-          .adapterFor(modelName)
-          .cancelFindRecord(modelName, id);
+        token.abort();
       }
     }
   }).drop();
 }
 
 export function watchRelationship(relationshipName) {
   return task(function*(model, throttle = 2000) {
+    const token = new XHRToken();
     while (isEnabled && !Ember.testing) {
       try {
         yield RSVP.all([
           this.store
             .adapterFor(model.constructor.modelName)
-            .reloadRelationship(model, relationshipName, true),
+            .reloadRelationship(model, relationshipName, { watch: true, abortToken: token }),
           wait(throttle),
         ]);
       } catch (e) {
         yield e;
         break;
       } finally {
-        this.store
-          .adapterFor(model.constructor.modelName)
-          .cancelReloadRelationship(model, relationshipName);
+        token.abort();
       }
     }
   }).drop();
 }
 
 export function watchAll(modelName) {
   return task(function*(throttle = 2000) {
+    const token = new XHRToken();
     while (isEnabled && !Ember.testing) {
       try {
         yield RSVP.all([
-          this.store.findAll(modelName, { reload: true, adapterOptions: { watch: true } }),
+          this.store.findAll(modelName, {
+            reload: true,
+            adapterOptions: { watch: true, abortToken: token },
+          }),
           wait(throttle),
         ]);
       } catch (e) {
         yield e;
         break;
       } finally {
-        this.store
-          .adapterFor(modelName)
-          .cancelFindAll(modelName);
+        token.abort();
       }
     }
   }).drop();