Merge pull request #7896 from hashicorp/f-ui/csi-namespace-issue

UI: CSI namespace bugs

ui/app/components/gutter-menu.js

@@ -37,7 +37,13 @@ export default Component.extend({
   gotoJobsForNamespace(namespace) {
     if (!namespace || !namespace.get('id')) return;
 
-    this.router.transitionTo('jobs', {
+    // Jobs and CSI Volumes are both namespace-sensitive. Changing namespaces is
+    // an intent to reset context, but where to reset to depends on where the namespace
+    // is being switched from. Jobs take precedence, but if the namespace is switched from
+    // a storage-related page, context should be reset to volumes.
+    const destination = this.router.currentRouteName.startsWith('csi.') ? 'csi.volumes' : 'jobs';
+
+    this.router.transitionTo(destination, {
       queryParams: { namespace: namespace.get('id') },
     });
   },

ui/app/templates/components/gutter-menu.hbs

@@ -51,13 +51,27 @@
         Workload
       </p>
       <ul class="menu-list">
-        <li>{{#link-to "jobs" activeClass="is-active" data-test-gutter-link="jobs"}}Jobs{{/link-to}}</li>
+        <li>
+          {{#link-to "jobs"
+            (query-params jobNamespace=system.activeNamespace.id)
+            activeClass="is-active"
+            data-test-gutter-link="jobs"}}
+            Jobs
+          {{/link-to}}
+        </li>
       </ul>
       <p class="menu-label is-minor">
         Integrations
       </p>
       <ul class="menu-list">
-        <li>{{#link-to "csi" activeClass="is-active" data-test-gutter-link="csi"}}Storage <span class="tag is-small">Beta</span>{{/link-to}}</li>
+        <li>
+          {{#link-to "csi"
+            (query-params volumeNamespace=system.activeNamespace.id)
+            activeClass="is-active"
+            data-test-gutter-link="storage"}}
+            Storage <span class="tag is-small">Beta</span>
+          {{/link-to}}
+        </li>
       </ul>
       <p class="menu-label">
         Cluster

ui/tests/acceptance/jobs-list-test.js

@@ -4,6 +4,7 @@ import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import pageSizeSelect from './behaviors/page-size-select';
 import JobsList from 'nomad-ui/tests/pages/jobs/list';
+import Layout from 'nomad-ui/tests/pages/layout';
 
 let managementToken, clientToken;
 
@@ -341,6 +342,17 @@ module('Acceptance | jobs list', function(hooks) {
     assert.equal(JobsList.jobs.length, 1, 'Only one job shown due to query param');
   });
 
+  test('the active namespace is carried over to the storage pages', async function(assert) {
+    server.createList('namespace', 2);
+
+    const namespace = server.db.namespaces[1];
+    await JobsList.visit({ namespace: namespace.id });
+
+    await Layout.gutter.visitStorage();
+
+    assert.equal(currentURL(), `/csi/volumes?namespace=${namespace.id}`);
+  });
+
   pageSizeSelect({
     resourceName: 'job',
     pageObject: JobsList,

ui/tests/acceptance/namespaces-test.js

@@ -1,8 +1,13 @@
+import { currentURL } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { selectChoose } from 'ember-power-select/test-support';
 import JobsList from 'nomad-ui/tests/pages/jobs/list';
+import ClientsList from 'nomad-ui/tests/pages/clients/list';
+import Allocation from 'nomad-ui/tests/pages/allocations/detail';
+import PluginsList from 'nomad-ui/tests/pages/storage/plugins/list';
+import VolumesList from 'nomad-ui/tests/pages/storage/volumes/list';
 
 module('Acceptance | namespaces (disabled)', function(hooks) {
   setupApplicationTest(hooks);
@@ -38,6 +43,10 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
     server.createList('job', 5);
   });
 
+  hooks.afterEach(function() {
+    window.localStorage.clear();
+  });
+
   test('the namespace switcher lists all namespaces', async function(assert) {
     const namespaces = server.db.namespaces;
 
@@ -105,4 +114,51 @@ module('Acceptance | namespaces (enabled)', function(hooks) {
       'Namespace query param on second request'
     );
   });
+
+  test('changing the namespace in the clients hierarchy navigates to the jobs page', async function(assert) {
+    const namespace = server.db.namespaces[1];
+
+    await ClientsList.visit();
+    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+
+    assert.equal(currentURL(), `/jobs?namespace=${namespace.name}`);
+  });
+
+  test('changing the namespace in the allocations hierarchy navigates to the jobs page', async function(assert) {
+    const namespace = server.db.namespaces[1];
+    const allocation = server.create('allocation', { job: server.db.jobs[0] });
+
+    await Allocation.visit({ id: allocation.id });
+    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+
+    assert.equal(currentURL(), `/jobs?namespace=${namespace.name}`);
+  });
+
+  test('changing the namespace in the storage hierarchy navigates to the volumes page', async function(assert) {
+    const namespace = server.db.namespaces[1];
+
+    await PluginsList.visit();
+    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+
+    assert.equal(currentURL(), `/csi/volumes?namespace=${namespace.name}`);
+  });
+
+  test('changing the namespace refreshes the volumes list when on the volumes page', async function(assert) {
+    const namespace = server.db.namespaces[1];
+
+    await VolumesList.visit();
+
+    let requests = server.pretender.handledRequests.filter(req =>
+      req.url.startsWith('/v1/volumes')
+    );
+    assert.equal(requests.length, 1);
+    assert.equal(requests[0].queryParams.namespace, undefined);
+
+    // TODO: handle this with Page Objects
+    await selectChoose('[data-test-namespace-switcher]', namespace.name);
+
+    requests = server.pretender.handledRequests.filter(req => req.url.startsWith('/v1/volumes'));
+    assert.equal(requests.length, 2);
+    assert.equal(requests[1].queryParams.namespace, namespace.name);
+  });
 });

ui/tests/acceptance/volumes-list-test.js

@@ -4,6 +4,7 @@ import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import pageSizeSelect from './behaviors/page-size-select';
 import VolumesList from 'nomad-ui/tests/pages/storage/volumes/list';
+import Layout from 'nomad-ui/tests/pages/layout';
 
 const assignWriteAlloc = (volume, alloc) => {
   volume.writeAllocs.add(alloc);
@@ -142,6 +143,17 @@ module('Acceptance | volumes list', function(hooks) {
     assert.equal(VolumesList.volumes.objectAt(0).name, volume2.id);
   });
 
+  test('the active namespace is carried over to the jobs pages', async function(assert) {
+    server.createList('namespace', 2);
+
+    const namespace = server.db.namespaces[1];
+    await VolumesList.visit({ namespace: namespace.id });
+
+    await Layout.gutter.visitJobs();
+
+    assert.equal(currentURL(), `/jobs?namespace=${namespace.id}`);
+  });
+
   test('when accessing volumes is forbidden, a message is shown with a link to the tokens page', async function(assert) {
     server.pretender.get('/v1/volumes', () => [403, {}, null]);
 

ui/tests/pages/layout.js

@@ -27,5 +27,6 @@ export default create({
     visitJobs: clickable('[data-test-gutter-link="jobs"]'),
     visitClients: clickable('[data-test-gutter-link="clients"]'),
     visitServers: clickable('[data-test-gutter-link="servers"]'),
+    visitStorage: clickable('[data-test-gutter-link="storage"]'),
   },
 });