Track xhrs in the watchable adapter and expose cancellation methods

ui/app/adapters/job.js

@@ -32,10 +32,19 @@ export default Watchable.extend({
   },
 
   findRecord(store, type, id, snapshot) {
-    const [name, namespace] = JSON.parse(id);
+    const [, namespace] = JSON.parse(id);
     const namespaceQuery = namespace && namespace !== 'default' ? { namespace } : {};
 
-    return this._super(store, type, name, snapshot, namespaceQuery);
+    return this._super(store, type, id, snapshot, namespaceQuery);
+  },
+
+  urlForFindRecord(id, type, hash) {
+    const [name, namespace] = JSON.parse(id);
+    let url = this._super(name, type, hash);
+    if (namespace && namespace !== 'default') {
+      url += `?${namespace}`;
+    }
+    return url;
   },
 
   findAllocations(job) {

ui/app/adapters/watchable.js

@@ -1,4 +1,4 @@
-import { get } from '@ember/object';
+import { get, computed } from '@ember/object';
 import { assign } from '@ember/polyfills';
 import { copy } from '@ember/object/internals';
 import { makeArray } from '@ember/array';
@@ -10,6 +10,27 @@ export default ApplicationAdapter.extend({
   watchList: service(),
   store: service(),
 
+  xhrs: computed(function() {
+    return {};
+  }),
+
+  ajaxOptions(url) {
+    const ajaxOptions = this._super(...arguments);
+
+    const previousBeforeSend = ajaxOptions.beforeSend;
+    ajaxOptions.beforeSend = function(jqXHR) {
+      if (previousBeforeSend) {
+        previousBeforeSend(...arguments);
+      }
+      this.get('xhrs')[url] = jqXHR;
+      jqXHR.always(() => {
+        delete this.get('xhrs')[url];
+      });
+    };
+
+    return ajaxOptions;
+  },
+
   findAll(store, type, sinceToken, snapshotRecordArray, additionalParams = {}) {
     const params = copy(additionalParams, true);
     const url = this.urlForFindAll(type.modelName);
@@ -71,4 +92,34 @@ export default ApplicationAdapter.extend({
     }
     return this._super(...arguments);
   },
+
+  cancelFindRecord(modelName, id) {
+    const url = this.urlForFindRecord(id, modelName);
+    const xhr = this.get('xhrs')[url];
+    if (xhr) {
+      xhr.abort();
+    }
+  },
+
+  cancelFindAll(modelName) {
+    const xhr = this.get('xhrs')[this.urlForFindAll(modelName)];
+    if (xhr) {
+      xhr.abort();
+    }
+  },
+
+  cancelReloadRelationship(model, relationshipName) {
+    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();
+      const xhr = this.get('xhrs')[url];
+      if (xhr) {
+        xhr.abort();
+      }
+    }
+  },
 });

ui/app/serializers/job.js

@@ -1,4 +1,3 @@
-import { get } from '@ember/object';
 import { assign } from '@ember/polyfills';
 import ApplicationSerializer from './application';
 import queryString from 'npm:query-string';
@@ -44,7 +43,7 @@ export default ApplicationSerializer.extend({
 
     const jobURL = this.store
       .adapterFor(modelName)
-      .buildURL(modelName, hash.PlainId, hash, 'findRecord');
+      .buildURL(modelName, hash.ID, hash, 'findRecord');
 
     return assign(this._super(...arguments), {
       summary: {