Merge pull request #4032 from hashicorp/b-ui-namespace-breadcrumbs

UI: Namespace related bugs

ui/app/adapters/job.js

@@ -46,6 +46,18 @@ export default Watchable.extend({
     return url;
   },
 
+  xhrKey(url, method, options = {}) {
+    const namespace = options.data && options.data.namespace;
+    if (namespace) {
+      return `${url}?namespace=${namespace}`;
+    }
+    return url;
+  },
+
+  relationshipFallbackLinks: {
+    summary: '/summary',
+  },
+
   findAllocations(job) {
     const url = `${this.buildURL('job', job.get('id'), job, 'findRecord')}/allocations`;
     return this.ajax(url, 'GET', { data: this.buildQuery() }).then(allocs => {

ui/app/adapters/watchable.js

@@ -13,30 +13,34 @@ export default ApplicationAdapter.extend({
     return {};
   }),
 
-  ajaxOptions(url) {
+  ajaxOptions() {
     const ajaxOptions = this._super(...arguments);
+    const key = this.xhrKey(...arguments);
 
     const previousBeforeSend = ajaxOptions.beforeSend;
     ajaxOptions.beforeSend = function(jqXHR) {
       if (previousBeforeSend) {
         previousBeforeSend(...arguments);
       }
-      this.get('xhrs')[url] = jqXHR;
+      this.get('xhrs')[key] = jqXHR;
       jqXHR.always(() => {
-        delete this.get('xhrs')[url];
+        delete this.get('xhrs')[key];
       });
     };
 
     return ajaxOptions;
   },
 
+  xhrKey(url /* method, options */) {
+    return url;
+  },
+
   findAll(store, type, sinceToken, snapshotRecordArray, additionalParams = {}) {
     const params = assign(this.buildQuery(), additionalParams);
     const url = this.urlForFindAll(type.modelName);
 
     if (get(snapshotRecordArray || {}, 'adapterOptions.watch')) {
       params.index = this.get('watchList').getIndexFor(url);
-      this.cancelFindAll(type.modelName);
     }
 
     return this.ajax(url, 'GET', {
@@ -50,7 +54,6 @@ export default ApplicationAdapter.extend({
 
     if (get(snapshot || {}, 'adapterOptions.watch')) {
       params.index = this.get('watchList').getIndexFor(url);
-      this.cancelFindRecord(type.modelName, id);
     }
 
     return this.ajax(url, 'GET', {
@@ -75,11 +78,15 @@ export default ApplicationAdapter.extend({
 
       if (watch) {
         params.index = this.get('watchList').getIndexFor(url);
-        this.cancelReloadRelationship(model, relationshipName);
       }
 
+      // Avoid duplicating existing query params by passing them to ajax
+      // in the URL and in options.data
       if (url.includes('?')) {
-        params = assign(queryString.parse(url.split('?')[1]), params);
+        const paramsInUrl = queryString.parse(url.split('?')[1]);
+        Object.keys(paramsInUrl).forEach(key => {
+          delete params[key];
+        });
       }
 
       return this.ajax(url, 'GET', {
@@ -130,7 +137,12 @@ export default ApplicationAdapter.extend({
     if (!modelName) {
       return;
     }
-    const xhr = this.get('xhrs')[this.urlForFindAll(modelName)];
+    let url = this.urlForFindAll(modelName);
+    const params = queryString.stringify(this.buildQuery());
+    if (params) {
+      url = `${url}?${params}`;
+    }
+    const xhr = this.get('xhrs')[url];
     if (xhr) {
       xhr.abort();
     }

ui/app/components/job-page/parts/summary.js

@@ -1,7 +1,23 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
 
 export default Component.extend({
+  store: service(),
+
   job: null,
 
+  // TEMPORARY: https://github.com/emberjs/data/issues/5209
+  // The summary relationship can be broken under exact load
+  // order. This ensures that the summary is always shown, even
+  // if the summary link on the job is broken.
+  summary: computed('job.summary.content', function() {
+    const summary = this.get('job.summary');
+    if (summary.get('content')) {
+      return summary;
+    }
+    return this.get('store').peekRecord('job-summary', this.get('job.id'));
+  }),
+
   classNames: ['boxed-section'],
 });

ui/app/controllers/allocations/allocation.js

@@ -10,9 +10,9 @@ export default Controller.extend({
         label: this.get('model.job.name'),
         args: [
           'jobs.job',
-          this.get('model.job'),
+          this.get('model.job.plainId'),
           qpBuilder({
-            jobNamespace: this.get('model.namespace.name') || 'default',
+            jobNamespace: this.get('model.job.namespace.name') || 'default',
           }),
         ],
       },

ui/app/controllers/jobs/job.js

@@ -10,7 +10,7 @@ export default Controller.extend({
         label: this.get('model.name'),
         args: [
           'jobs.job',
-          this.get('model'),
+          this.get('model.plainId'),
           qpBuilder({
             jobNamespace: this.get('model.namespace.name') || 'default',
           }),

ui/app/controllers/jobs/job/index.js

@@ -5,6 +5,7 @@ import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 export default Controller.extend(WithNamespaceResetting, {
   system: service(),
+
   jobController: controller('jobs.job'),
 
   queryParams: {

ui/app/routes/jobs/job/index.js

@@ -10,7 +10,7 @@ export default Route.extend(WithWatchers, {
     }
     controller.set('watchers', {
       model: this.get('watch').perform(model),
-      summary: this.get('watchSummary').perform(model),
+      summary: this.get('watchSummary').perform(model.get('summary')),
       evaluations: this.get('watchEvaluations').perform(model),
       deployments: model.get('supportsDeployments') && this.get('watchDeployments').perform(model),
       list: model.get('hasChildren') && this.get('watchAll').perform(),
@@ -19,7 +19,7 @@ export default Route.extend(WithWatchers, {
 
   watch: watchRecord('job'),
   watchAll: watchAll('job'),
-  watchSummary: watchRelationship('summary'),
+  watchSummary: watchRecord('job-summary'),
   watchEvaluations: watchRelationship('evaluations'),
   watchDeployments: watchRelationship('deployments'),
 

ui/app/templates/components/job-page/parts/summary.hbs

@@ -1,16 +1,16 @@
 <div class="boxed-section-head">
   <div>
     {{#if job.hasChildren}}
-      Children Status <span class="badge is-white">{{job.totalChildren}}</span>
+      Children Status <span class="badge is-white">{{summary.totalChildren}}</span>
     {{else}}
-      Allocation Status <span class="badge is-white">{{job.totalAllocs}}</span>
+      Allocation Status <span class="badge is-white">{{summary.totalAllocs}}</span>
     {{/if}}
   </div>
 </div>
 <div class="boxed-section-body">
   {{#component (if job.hasChildren "children-status-bar" "allocation-status-bar")
-    allocationContainer=job
-    job=job
+    allocationContainer=summary
+    job=summary
     class="split-view" as |chart|}}
     <ol data-test-legend class="legend">
       {{#each chart.data as |datum index|}}