From 4dbcdd103ad39f8e4b5b6d772f8d25928ddc8bb6 Mon Sep 17 00:00:00 2001 From: Seth Hoenig Date: Fri, 1 Nov 2024 21:58:13 -0500 Subject: [PATCH] ui: show region in header gutter when only one region exists (#24320) * ui: show region in header gutter when only one region exists This PR adds a plain text label of the region to the header when there is only one region present. Before, nothing was showin in this case, and a dropdown was shown on federated clusters. The use case here is for operators of multiple non-federated Nomad clusters, when all the UI's involved otherwise look identical. * [ui] Signing in with a token explicitly sets the region dropdown activeRegion (#24347) * Signing in with a token explicitly sets the region dropdown activeREgion * Test and Select a Region default text * Account for 403 on mocked agent members req * Dont show the region if it isnt set in agent config * Small padding css change * unit test condition moved to stubbable acceptance test --------- Co-authored-by: Phil Renaud --- .changelog/24320.txt | 3 ++ ui/app/controllers/settings/tokens.js | 10 ++++++- ui/app/services/system.js | 8 ++++- ui/app/styles/core/navbar.scss | 11 +++++++ .../templates/components/region-switcher.hbs | 11 +++++-- ui/mirage/config.js | 7 ++++- ui/tests/acceptance/regions-test.js | 29 +++++++++++++++++-- ui/tests/pages/layout.js | 5 ++++ ui/tests/unit/adapters/job-test.js | 3 ++ 9 files changed, 80 insertions(+), 7 deletions(-) create mode 100644 .changelog/24320.txt diff --git a/.changelog/24320.txt b/.changelog/24320.txt new file mode 100644 index 00000000000..9152496a96f --- /dev/null +++ b/.changelog/24320.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Show region in header when only one region exists, and set it immediately upon logging in with a token +``` diff --git a/ui/app/controllers/settings/tokens.js b/ui/app/controllers/settings/tokens.js index 74e2728f3d2..074086001e5 100644 --- a/ui/app/controllers/settings/tokens.js +++ b/ui/app/controllers/settings/tokens.js @@ -23,7 +23,7 @@ export default class Tokens extends Controller { @service token; @service store; @service router; - + @service system; queryParams = ['code', 'state', 'jwtAuthMethod']; @tracked secret = this.token.secret; @@ -164,6 +164,14 @@ export default class Tokens extends Controller { // Refetch the token and associated policies this.token.get('fetchSelfTokenAndPolicies').perform().catch(); + if (!this.system.activeRegion) { + this.system.get('defaultRegion').then((res) => { + if (res.region) { + this.system.set('activeRegion', res.region); + } + }); + } + this.signInStatus = 'success'; this.token.set('tokenNotFound', false); }, diff --git a/ui/app/services/system.js b/ui/app/services/system.js index d1408a3c4f2..f88163b4bb0 100644 --- a/ui/app/services/system.js +++ b/ui/app/services/system.js @@ -57,7 +57,7 @@ export default class SystemService extends Service { }); } - @computed + @computed('token.selfToken') get defaultRegion() { const token = this.token; return PromiseObject.create({ @@ -110,6 +110,12 @@ export default class SystemService extends Service { return this.get('regions.length') > 1; } + get hasNonDefaultRegion() { + return this.get('regions') + .toArray() + .some((region) => region !== 'global'); + } + @computed('activeRegion', 'defaultRegion.region', 'shouldShowRegions') get shouldIncludeRegion() { return ( diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 9e9d08be16d..a26dee23ef4 100644 --- a/ui/app/styles/core/navbar.scss +++ b/ui/app/styles/core/navbar.scss @@ -142,6 +142,17 @@ $secondaryNavbarHeight: 4.5rem; display: flex; align-items: center; + &.single-region { + display: block; + padding: 0; + font-size: 1em; + color: rgba($primary-invert, 0.9); + + > span { + font-weight: 500; + } + } + &.is-gutter { width: $gutter-width; display: block; diff --git a/ui/app/templates/components/region-switcher.hbs b/ui/app/templates/components/region-switcher.hbs index 5c3eafb1e42..9d9817295b8 100644 --- a/ui/app/templates/components/region-switcher.hbs +++ b/ui/app/templates/components/region-switcher.hbs @@ -12,10 +12,17 @@ @tagName="div" @triggerClass={{this.decoration}} @options={{this.sortedRegions}} - @selected={{this.system.activeRegion}} + @selected={{or this.system.activeRegion 'Select a Region'}} @searchEnabled={{false}} @onChange={{action this.gotoRegion}} as |region|> - Region: {{region}} + {{#if this.system.activeRegion}} + Region: + {{/if}} + {{region}} +{{else if this.system.hasNonDefaultRegion}} +
+ Region: {{this.system.activeRegion}} +
{{/if}} diff --git a/ui/mirage/config.js b/ui/mirage/config.js index 2067aa081a6..0e780ae612f 100644 --- a/ui/mirage/config.js +++ b/ui/mirage/config.js @@ -708,7 +708,12 @@ export default function () { return this.serialize(volume); }); - this.get('/agent/members', function ({ agents, regions }) { + this.get('/agent/members', function ({ agents, regions }, req) { + const tokenPresent = req.requestHeaders['X-Nomad-Token']; + if (!tokenPresent) { + return new Response(403, {}, 'Forbidden'); + } + const firstRegion = regions.first(); return { ServerRegion: firstRegion ? firstRegion.id : null, diff --git a/ui/tests/acceptance/regions-test.js b/ui/tests/acceptance/regions-test.js index 48ccdda3bb4..a17529fd3b9 100644 --- a/ui/tests/acceptance/regions-test.js +++ b/ui/tests/acceptance/regions-test.js @@ -15,6 +15,7 @@ import JobsList from 'nomad-ui/tests/pages/jobs/list'; import ClientsList from 'nomad-ui/tests/pages/clients/list'; import Layout from 'nomad-ui/tests/pages/layout'; import Allocation from 'nomad-ui/tests/pages/allocations/detail'; +import Tokens from 'nomad-ui/tests/pages/settings/tokens'; module('Acceptance | regions (only one)', function (hooks) { setupApplicationTest(hooks); @@ -35,21 +36,23 @@ module('Acceptance | regions (only one)', function (hooks) { await a11yAudit(assert); }); - test('when there is only one region, the region switcher is not shown in the nav bar and the region is not in the page title', async function (assert) { + test('when there is only one region, and it is the default one, the region switcher is not shown in the nav bar and the region is not in the page title', async function (assert) { server.create('region', { id: 'global' }); await JobsList.visit(); assert.notOk(Layout.navbar.regionSwitcher.isPresent, 'No region switcher'); + assert.notOk(Layout.navbar.singleRegion.isPresent, 'No single region'); assert.ok(document.title.includes('Jobs')); }); - test('when the only region is not named "global", the region switcher still is not shown', async function (assert) { + test('when the only region is not named "global", the region switcher still is not shown, but the single region name is', async function (assert) { server.create('region', { id: 'some-region' }); await JobsList.visit(); assert.notOk(Layout.navbar.regionSwitcher.isPresent, 'No region switcher'); + assert.ok(Layout.navbar.singleRegion.isPresent, 'Single region'); }); test('pages do not include the region query param', async function (assert) { @@ -218,4 +221,26 @@ module('Acceptance | regions (many)', function (hooks) { } }); }); + + test('Signing in sets the active region', async function (assert) { + window.localStorage.clear(); + let managementToken = server.create('token'); + await Tokens.visit(); + assert.equal( + Layout.navbar.regionSwitcher.text, + 'Select a Region', + 'Region picker says "Select a Region" before signing in' + ); + await Tokens.secret(managementToken.secretId).submit(); + assert.equal( + window.localStorage.nomadActiveRegion, + 'global', + 'Region is set in localStorage after signing in' + ); + assert.equal( + Layout.navbar.regionSwitcher.text, + 'Region: global', + 'Region picker says "Region: global" after signing in' + ); + }); }); diff --git a/ui/tests/pages/layout.js b/ui/tests/pages/layout.js index 3fbca6063f8..d521bd382a0 100644 --- a/ui/tests/pages/layout.js +++ b/ui/tests/pages/layout.js @@ -28,6 +28,11 @@ export default create({ }), }, + singleRegion: { + scope: '.single-region', + text: text(), + }, + search: { scope: '[data-test-search-parent]', diff --git a/ui/tests/unit/adapters/job-test.js b/ui/tests/unit/adapters/job-test.js index c7d57b51f31..d6437ac0e21 100644 --- a/ui/tests/unit/adapters/job-test.js +++ b/ui/tests/unit/adapters/job-test.js @@ -468,6 +468,9 @@ module('Unit | Adapter | Job', function (hooks) { }); test('when the region is set to the default region, requests are made without the region query param', async function (assert) { + const secret = 'here is the secret'; + this.subject().set('token.secret', secret); + await this.initializeUI({ region: 'region-1' }); const { pretender } = this.server;