From c5b1fd3aa7078bbc4d09042dbc6fee60a70f6dc3 Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Thu, 7 May 2020 21:18:55 -0700 Subject: [PATCH 1/2] Changing namespaces now situationally redirects to jobs or volumes Changing namespaces can be done anywhere in the app even though many Nomad resources aren't namespace-sensitive (e.g., clients, plugins). A user changing namespaces is an intent to reset context, "now I want to begin a task that relates to Namespace X". Where that task begins used to always be the Jobs list, since it was the only namespace sensitive resource. Now with CSI Volumes, "square 1" is Volumes if the namespace is changed from a storage page. --- ui/app/components/gutter-menu.js | 8 +++- ui/tests/acceptance/namespaces-test.js | 56 ++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/ui/app/components/gutter-menu.js b/ui/app/components/gutter-menu.js index 6c7871ecc56..46c02d1374a 100644 --- a/ui/app/components/gutter-menu.js +++ b/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') }, }); }, diff --git a/ui/tests/acceptance/namespaces-test.js b/ui/tests/acceptance/namespaces-test.js index 812b136078e..d25e8d369de 100644 --- a/ui/tests/acceptance/namespaces-test.js +++ b/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); + }); }); From 804029c9a26416391e2c106b6aa20635892d80bb Mon Sep 17 00:00:00 2001 From: Michael Lange Date: Thu, 7 May 2020 21:38:19 -0700 Subject: [PATCH 2/2] The active namespace is now shared between jobs and storage --- ui/app/templates/components/gutter-menu.hbs | 18 ++++++++++++++++-- ui/tests/acceptance/jobs-list-test.js | 12 ++++++++++++ ui/tests/acceptance/volumes-list-test.js | 12 ++++++++++++ ui/tests/pages/layout.js | 1 + 4 files changed, 41 insertions(+), 2 deletions(-) diff --git a/ui/app/templates/components/gutter-menu.hbs b/ui/app/templates/components/gutter-menu.hbs index e531a8c61ef..7878a4baf02 100644 --- a/ui/app/templates/components/gutter-menu.hbs +++ b/ui/app/templates/components/gutter-menu.hbs @@ -51,13 +51,27 @@ Workload

Integrations

Cluster diff --git a/ui/tests/acceptance/jobs-list-test.js b/ui/tests/acceptance/jobs-list-test.js index 5e0a15c6883..1a23555abcb 100644 --- a/ui/tests/acceptance/jobs-list-test.js +++ b/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, diff --git a/ui/tests/acceptance/volumes-list-test.js b/ui/tests/acceptance/volumes-list-test.js index 4c15ff44ac4..e48108a5df8 100644 --- a/ui/tests/acceptance/volumes-list-test.js +++ b/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]); diff --git a/ui/tests/pages/layout.js b/ui/tests/pages/layout.js index e276310bb14..257caf2e804 100644 --- a/ui/tests/pages/layout.js +++ b/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"]'), }, });