On namespace change on a job detail page, redirect to /jobs

And reload jobs for the new namespace.

ui/app/controllers/jobs.js

@@ -13,24 +13,29 @@ export default Controller.extend({
 
   // The namespace query param should act as an alias to the system active namespace.
   // But query param defaults can't be CPs: https://github.com/emberjs/ember.js/issues/9819
-  syncNamespaceService: observer('jobNamespace', function() {
-    const newNamespace = this.get('jobNamespace');
-    const currentNamespace = this.get('system.activeNamespace.id');
+  syncNamespaceService: forwardNamespace('jobNamespace', 'system.activeNamespace'),
+  syncNamespaceParam: forwardNamespace('system.activeNamespace', 'jobNamespace'),
+
+  actions: {
+    refreshRoute() {
+      return true;
+    },
+  },
+});
+
+function forwardNamespace(source, destination) {
+  return observer(source, `${source}.id`, function() {
+    const newNamespace = this.get(`${source}.id`) || this.get(source);
+    const currentNamespace = this.get(`${destination}.id`) || this.get(destination);
     const bothAreDefault =
       (currentNamespace == undefined || currentNamespace === 'default') &&
       (newNamespace == undefined || newNamespace === 'default');
 
     if (currentNamespace !== newNamespace && !bothAreDefault) {
-      this.set('system.activeNamespace', newNamespace);
+      this.set(destination, newNamespace);
       run.next(() => {
         this.send('refreshRoute');
       });
     }
-  }),
-
-  actions: {
-    refreshRoute() {
-      return true;
-    },
-  },
-});
+  });
+}

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

 import Ember from 'ember';
+import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 const { Controller, computed, inject } = Ember;
 
-export default Controller.extend({
+export default Controller.extend(WithNamespaceResetting, {
   jobController: inject.controller('jobs.job'),
 
   job: computed.alias('model.job'),

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

 import Ember from 'ember';
+import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 const { Controller, computed, inject } = Ember;
 
-export default Controller.extend({
+export default Controller.extend(WithNamespaceResetting, {
   jobController: inject.controller('jobs.job'),
 
   job: computed.alias('model'),

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

 import Ember from 'ember';
 import Sortable from 'nomad-ui/mixins/sortable';
+import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 const { Controller, computed, inject } = Ember;
 
-export default Controller.extend(Sortable, {
+export default Controller.extend(Sortable, WithNamespaceResetting, {
   system: inject.service(),
   jobController: inject.controller('jobs.job'),
 

ui/app/controllers/jobs/job/task-group.js

 import Ember from 'ember';
 import Sortable from 'nomad-ui/mixins/sortable';
 import Searchable from 'nomad-ui/mixins/searchable';
+import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 const { Controller, computed, inject } = Ember;
 
-export default Controller.extend(Sortable, Searchable, {
+export default Controller.extend(Sortable, Searchable, WithNamespaceResetting, {
   jobController: inject.controller('jobs.job'),
 
   queryParams: {

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

 import Ember from 'ember';
+import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
 const { Controller, computed, inject } = Ember;
 
-export default Controller.extend({
+export default Controller.extend(WithNamespaceResetting, {
   jobController: inject.controller('jobs.job'),
 
   job: computed.alias('model'),

ui/app/mixins/with-namespace-resetting.js

+import Ember from 'ember';
+
+const { Mixin, inject } = Ember;
+
+export default Mixin.create({
+  system: inject.service(),
+  jobsController: inject.controller('jobs'),
+
+  actions: {
+    gotoJobs(namespace) {
+      // Since the setupController hook doesn't fire when transitioning up the
+      // route hierarchy, the two sides of the namespace bindings need to be manipulated
+      // in order for the jobs route model to reload.
+      this.set('system.activeNamespace', this.get('jobsController.jobNamespace'));
+      this.set('jobsController.jobNamespace', namespace.get('id'));
+      this.transitionToRoute('jobs');
+    },
+  },
+});

ui/app/templates/jobs/job/definition.hbs

@@ -3,7 +3,7 @@
     {{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
   {{/each}}
 {{/global-header}}
-{{#gutter-menu class="page-body"}}
+{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
   {{partial "jobs/job/subnav"}}
   <section class="section">
     <div class="boxed-section">

ui/app/templates/jobs/job/deployments.hbs

@@ -3,7 +3,7 @@
     {{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
   {{/each}}
 {{/global-header}}
-{{#gutter-menu class="page-body"}}
+{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
   {{partial "jobs/job/subnav"}}
   <section class="section">
     {{job-deployments-stream deployments=deployments}}

ui/app/templates/jobs/job/index.hbs

@@ -3,7 +3,7 @@
     {{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
   {{/each}}
 {{/global-header}}
-{{#gutter-menu class="page-body"}}
+{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
   {{partial "jobs/job/subnav"}}
   <section class="section">
     <h1 class="title">

ui/app/templates/jobs/job/task-group.hbs

@@ -10,7 +10,7 @@
     {{/link-to}}
   {{/each}}
 {{/global-header}}
-{{#gutter-menu class="page-body"}}
+{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
   <div class="tabs is-subnav">
     <ul>
       <li>{{#link-to "jobs.job.task-group" model.job model activeClass="is-active"}}Overview{{/link-to}}</li>

ui/app/templates/jobs/job/versions.hbs

@@ -3,7 +3,7 @@
     {{#link-to params=breadcrumb.args class="breadcrumb"}}{{breadcrumb.label}}{{/link-to}}
   {{/each}}
 {{/global-header}}
-{{#gutter-menu class="page-body"}}
+{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
   {{partial "jobs/job/subnav"}}
   <section class="section">
     {{job-versions-stream versions=versions verbose=true}}

ui/mirage/factories/job.js

@@ -58,6 +58,10 @@ export default Factory.extend({
         namespace,
         namespaceId: namespace,
       });
+    } else {
+      job.update({
+        namespace: job.namespaceId,
+      });
     }
 
     const jobSummary = server.create('job-summary', {

ui/tests/acceptance/job-detail-test.js

@@ -301,9 +301,8 @@ moduleForAcceptance('Acceptance | job detail (with namespaces)', {
   beforeEach() {
     server.createList('namespace', 2);
     server.create('node');
-    server.create('job');
-    job = server.db.jobs[0];
-    visit(`/jobs/${job.id}`);
+    job = server.create('job', { namespaceId: server.db.namespaces[1].name });
+    server.createList('job', 3, { namespaceId: server.db.namespaces[0].name });
   },
 });
 
@@ -311,7 +310,6 @@ test('when there are namespaces, the job detail page states the namespace for th
   assert
 ) {
   const namespace = server.db.namespaces.find(job.namespaceId);
-
   visit(`/jobs/${job.id}?namespace=${namespace.name}`);
 
   andThen(() => {
@@ -321,3 +319,36 @@ test('when there are namespaces, the job detail page states the namespace for th
     );
   });
 });
+
+test('when switching namespaces, the app redirects to /jobs with the new namespace', function(
+  assert
+) {
+  const namespace = server.db.namespaces.find(job.namespaceId);
+  const otherNamespace = server.db.namespaces.toArray().find(ns => ns !== namespace).name;
+  const label = otherNamespace === 'default' ? 'Default Namespace' : otherNamespace;
+
+  visit(`/jobs/${job.id}?namespace=${namespace.name}`);
+
+  andThen(() => {
+    selectChoose('.namespace-switcher', label);
+  });
+
+  andThen(() => {
+    assert.equal(currentURL().split('?')[0], '/jobs', 'Navigated to /jobs');
+    const jobs = server.db.jobs
+      .where({ namespace: otherNamespace })
+      .sortBy('modifyIndex')
+      .reverse();
+    assert.equal(findAll('.job-row').length, jobs.length, 'Shows the right number of jobs');
+    jobs.forEach((job, index) => {
+      assert.equal(
+        $(findAll('.job-row')[index])
+          .find('td:eq(0)')
+          .text()
+          .trim(),
+        job.name,
+        `Job ${index} is right`
+      );
+    });
+  });
+});