From f8b092c2014fec06f2e7758cf6bc373eb9ae1fb5 Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Thu, 11 Apr 2024 08:07:48 -0700 Subject: [PATCH] UI: Add acme route and tab (#26355) --- ui/app/components/clients/no-data.hbs | 2 + ui/app/components/clients/page/acme.hbs | 14 ++++++ ui/app/components/clients/page/acme.ts | 8 ++++ ui/app/components/clients/page/counts.hbs | 38 +++++++++++++++- ui/app/components/clients/page/overview.ts | 2 +- ui/app/components/clients/page/sync.hbs | 6 ++- ui/app/components/clients/page/token.hbs | 3 +- ui/app/components/clients/running-total.hbs | 2 +- ui/app/components/clients/usage-stats.hbs | 2 +- ui/app/components/sidebar/nav/clients.hbs | 31 +++++++++++++ ui/app/components/sidebar/nav/cluster.hbs | 7 ++- ui/app/controllers/vault/cluster/clients.ts | 16 ------- ui/app/router.js | 3 +- .../vault/cluster/clients/counts/acme.ts | 8 ++++ ui/app/templates/vault/cluster/clients.hbs | 44 +------------------ .../vault/cluster/clients/config.hbs | 8 ++++ .../vault/cluster/clients/counts/acme.hbs | 13 ++++++ .../vault/cluster/clients/counts/token.hbs | 1 - .../templates/vault/cluster/clients/edit.hbs | 8 ++++ .../clients/counts/overview-test.js | 2 +- ui/tests/acceptance/sidebar-nav-test.js | 16 ++++++- .../components/clients/usage-stats-test.js | 8 ++-- 22 files changed, 168 insertions(+), 74 deletions(-) create mode 100644 ui/app/components/clients/page/acme.hbs create mode 100644 ui/app/components/clients/page/acme.ts create mode 100644 ui/app/components/sidebar/nav/clients.hbs delete mode 100644 ui/app/controllers/vault/cluster/clients.ts create mode 100644 ui/app/routes/vault/cluster/clients/counts/acme.ts create mode 100644 ui/app/templates/vault/cluster/clients/counts/acme.hbs diff --git a/ui/app/components/clients/no-data.hbs b/ui/app/components/clients/no-data.hbs index e988f82440..b6fa080dcd 100644 --- a/ui/app/components/clients/no-data.hbs +++ b/ui/app/components/clients/no-data.hbs @@ -7,11 +7,13 @@ {{else}} {{#if @config.canEdit}} +
+

ACME usage

+

This data can be used to understand how many ACME clients have been + used for the queried + {{if this.isDateRange "date range" "month"}}. Each ACME request is counted as one client.

+
+ + \ No newline at end of file diff --git a/ui/app/components/clients/page/acme.ts b/ui/app/components/clients/page/acme.ts new file mode 100644 index 0000000000..5d3a3b434c --- /dev/null +++ b/ui/app/components/clients/page/acme.ts @@ -0,0 +1,8 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: BUSL-1.1 + */ + +import ActivityComponent from '../activity'; + +export default class ClientsAcmePageComponent extends ActivityComponent {} diff --git a/ui/app/components/clients/page/counts.hbs b/ui/app/components/clients/page/counts.hbs index e30ce47897..bd62c6cc09 100644 --- a/ui/app/components/clients/page/counts.hbs +++ b/ui/app/components/clients/page/counts.hbs @@ -3,6 +3,14 @@ SPDX-License-Identifier: BUSL-1.1 ~}} + + +

+ Vault Usage Metrics +

+
+
+

This dashboard surfaces Vault client usage over time. @@ -103,7 +111,7 @@ {{#if this.filteredActivity}} {{#if this.upgradeExplanations}} - + Client count data contains {{pluralize this.upgradeExplanations.length "upgrade"}} @@ -138,6 +146,34 @@ {{/if}} +

+ + {{! CLIENT COUNT PAGE COMPONENTS RENDER HERE }} {{yield}} {{else if (and (not @config.billingStartTimestamp) (not @startTimestamp))}} diff --git a/ui/app/components/clients/page/overview.ts b/ui/app/components/clients/page/overview.ts index ceaf8870d1..4eae68bf1c 100644 --- a/ui/app/components/clients/page/overview.ts +++ b/ui/app/components/clients/page/overview.ts @@ -5,4 +5,4 @@ import ActivityComponent from '../activity'; -export default ActivityComponent; +export default class ClientsOverviewPageComponent extends ActivityComponent {} diff --git a/ui/app/components/clients/page/sync.hbs b/ui/app/components/clients/page/sync.hbs index c4e1565161..1a4571bf1b 100644 --- a/ui/app/components/clients/page/sync.hbs +++ b/ui/app/components/clients/page/sync.hbs @@ -63,7 +63,11 @@
{{/if}} {{else}} - + @@ -96,7 +97,7 @@ this.isCurrentMonth "Only totals are available when viewing the current month. To see a breakdown of new and total clients for this month, select the 'Current Billing Period' filter." }}" - @isSecretsSyncActivated={{@isSecretsSyncActivated}} + @showSecretSyncs={{false}} @totalUsageCounts={{this.tokenUsageCounts}} /> {{/if}} \ No newline at end of file diff --git a/ui/app/components/clients/running-total.hbs b/ui/app/components/clients/running-total.hbs index 53f6fefb54..378417391f 100644 --- a/ui/app/components/clients/running-total.hbs +++ b/ui/app/components/clients/running-total.hbs @@ -118,7 +118,7 @@ @isCurrentMonth "Only totals are available when viewing the current month. To see a breakdown of new and total clients for this month, select the 'Current billing period' filter." }}" - @isSecretsSyncActivated={{@isSecretsSyncActivated}} + @showSecretSyncs={{@isSecretsSyncActivated}} @totalUsageCounts={{@runningTotals}} /> {{/if}} diff --git a/ui/app/components/clients/usage-stats.hbs b/ui/app/components/clients/usage-stats.hbs index 92339bb3c9..3bd8eb6089 100644 --- a/ui/app/components/clients/usage-stats.hbs +++ b/ui/app/components/clients/usage-stats.hbs @@ -47,7 +47,7 @@ data-test-stat-text="non-entity-clients" /> - {{#if @isSecretsSyncActivated}} + {{#if @showSecretSyncs}}
+ + + Client Count + + + {{#if @canReadConfig}} + + {{/if}} + \ No newline at end of file diff --git a/ui/app/components/sidebar/nav/cluster.hbs b/ui/app/components/sidebar/nav/cluster.hbs index d58f6155b3..7f1d1c6991 100644 --- a/ui/app/components/sidebar/nav/cluster.hbs +++ b/ui/app/components/sidebar/nav/cluster.hbs @@ -82,7 +82,12 @@ /> {{/if}} {{#if (and (has-permission "clients" routeParams="activity") (not this.cluster.dr.isSecondary))}} - + {{/if}} {{#if (and diff --git a/ui/app/controllers/vault/cluster/clients.ts b/ui/app/controllers/vault/cluster/clients.ts deleted file mode 100644 index 4461cbc7e1..0000000000 --- a/ui/app/controllers/vault/cluster/clients.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -import Controller from '@ember/controller'; -import { service } from '@ember/service'; -import type VersionService from 'vault/services/version'; - -export default class ClientsController extends Controller { - @service declare readonly version: VersionService; - - get hasSecretsSync() { - return this.version.hasSecretsSync; - } -} diff --git a/ui/app/router.js b/ui/app/router.js index b8c60245f5..879f17542c 100644 --- a/ui/app/router.js +++ b/ui/app/router.js @@ -29,8 +29,9 @@ Router.map(function () { this.route('clients', function () { this.route('counts', function () { this.route('overview'); - this.route('sync'); this.route('token'); + this.route('sync'); + this.route('acme'); }); this.route('config'); this.route('edit'); diff --git a/ui/app/routes/vault/cluster/clients/counts/acme.ts b/ui/app/routes/vault/cluster/clients/counts/acme.ts new file mode 100644 index 0000000000..bdb6b802e7 --- /dev/null +++ b/ui/app/routes/vault/cluster/clients/counts/acme.ts @@ -0,0 +1,8 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: BUSL-1.1 + */ + +import Route from '@ember/routing/route'; + +export default class ClientsCountsAcmeRoute extends Route {} diff --git a/ui/app/templates/vault/cluster/clients.hbs b/ui/app/templates/vault/cluster/clients.hbs index ff2287a00f..b00f1da018 100644 --- a/ui/app/templates/vault/cluster/clients.hbs +++ b/ui/app/templates/vault/cluster/clients.hbs @@ -3,47 +3,5 @@ SPDX-License-Identifier: BUSL-1.1 ~}} - - -

- Vault Usage Metrics -

-
-
- -
- -
- + {{outlet}} \ No newline at end of file diff --git a/ui/app/templates/vault/cluster/clients/config.hbs b/ui/app/templates/vault/cluster/clients/config.hbs index 829c68bd38..03d8e6e840 100644 --- a/ui/app/templates/vault/cluster/clients/config.hbs +++ b/ui/app/templates/vault/cluster/clients/config.hbs @@ -3,6 +3,14 @@ SPDX-License-Identifier: BUSL-1.1 ~}} + + +

+ Configuration +

+
+
+ {{#if @model.canEdit}} diff --git a/ui/app/templates/vault/cluster/clients/counts/acme.hbs b/ui/app/templates/vault/cluster/clients/counts/acme.hbs new file mode 100644 index 0000000000..4c46cadb5b --- /dev/null +++ b/ui/app/templates/vault/cluster/clients/counts/acme.hbs @@ -0,0 +1,13 @@ +{{! + Copyright (c) HashiCorp, Inc. + SPDX-License-Identifier: BUSL-1.1 +~}} + + \ No newline at end of file diff --git a/ui/app/templates/vault/cluster/clients/counts/token.hbs b/ui/app/templates/vault/cluster/clients/counts/token.hbs index a20b6c7828..bbd6348415 100644 --- a/ui/app/templates/vault/cluster/clients/counts/token.hbs +++ b/ui/app/templates/vault/cluster/clients/counts/token.hbs @@ -8,7 +8,6 @@ @versionHistory={{this.model.versionHistory}} @startTimestamp={{this.model.startTimestamp}} @endTimestamp={{this.model.endTimestamp}} - @isSecretsSyncActivated={{this.model.isSecretsSyncActivated}} @namespace={{this.countsController.ns}} @mountPath={{this.countsController.mountPath}} /> \ No newline at end of file diff --git a/ui/app/templates/vault/cluster/clients/edit.hbs b/ui/app/templates/vault/cluster/clients/edit.hbs index 0a56269763..2b12f20c82 100644 --- a/ui/app/templates/vault/cluster/clients/edit.hbs +++ b/ui/app/templates/vault/cluster/clients/edit.hbs @@ -3,4 +3,12 @@ SPDX-License-Identifier: BUSL-1.1 ~}} + + +

+ Edit Configuration +

+
+
+ \ No newline at end of file diff --git a/ui/tests/acceptance/clients/counts/overview-test.js b/ui/tests/acceptance/clients/counts/overview-test.js index db1b06edeb..8fc4701c0c 100644 --- a/ui/tests/acceptance/clients/counts/overview-test.js +++ b/ui/tests/acceptance/clients/counts/overview-test.js @@ -43,7 +43,7 @@ module('Acceptance | clients | overview', function (hooks) { test('it should render the correct tabs', async function (assert) { assert.dom(GENERAL.tab('overview')).exists(); assert.dom(GENERAL.tab('token')).exists(); - assert.dom(GENERAL.tab('config')).exists(); + assert.dom(GENERAL.tab('acme')).exists(); }); test('it should render charts', async function (assert) { diff --git a/ui/tests/acceptance/sidebar-nav-test.js b/ui/tests/acceptance/sidebar-nav-test.js index 14af0d1a2a..c54209bced 100644 --- a/ui/tests/acceptance/sidebar-nav-test.js +++ b/ui/tests/acceptance/sidebar-nav-test.js @@ -105,7 +105,7 @@ module('Acceptance | sidebar navigation', function (hooks) { assert.expect(7); await click(link('Tools')); - assert.dom(panel('Tools')).exists('Access nav panel renders'); + assert.dom(panel('Tools')).exists('Tools nav panel renders'); const links = [ { label: 'Wrap', route: '/vault/tools/wrap' }, @@ -122,6 +122,20 @@ module('Acceptance | sidebar navigation', function (hooks) { } }); + test('it should link to correct routes at the client counts level', async function (assert) { + assert.expect(7); + await click(link('Client Count')); + assert.dom(panel('Client Count')).exists('Client counts nav panel renders'); + assert.strictEqual(currentURL(), '/vault/clients/counts/overview', 'Top level nav link renders overview'); + assert.dom(link('Vault Usage Metrics')).hasClass('active'); + await click(link('Configuration')); + assert.strictEqual(currentURL(), '/vault/clients/config', 'Clients configuration renders'); + assert.dom(link('Configuration')).hasClass('active'); + await click(link('Vault Usage Metrics')); + assert.strictEqual(currentURL(), '/vault/clients/counts/overview', 'Sub nav link navigates to overview'); + assert.dom(link('Vault Usage Metrics')).hasClass('active'); + }); + test('it should display access nav when mounting and configuring auth methods', async function (assert) { await click(link('Access')); await click('[data-test-auth-enable]'); diff --git a/ui/tests/integration/components/clients/usage-stats-test.js b/ui/tests/integration/components/clients/usage-stats-test.js index 38f55d5516..76d2a3d83a 100644 --- a/ui/tests/integration/components/clients/usage-stats-test.js +++ b/ui/tests/integration/components/clients/usage-stats-test.js @@ -12,12 +12,12 @@ module('Integration | Component | clients/usage-stats', function (hooks) { setupRenderingTest(hooks); hooks.beforeEach(function () { - this.isSecretsSyncActivated = false; + this.showSecretSyncs = false; this.counts = {}; this.renderComponent = async () => await render( - hbs`` + hbs`` ); }); @@ -72,7 +72,7 @@ module('Integration | Component | clients/usage-stats', function (hooks) { }); test('with secrets sync activated', async function (assert) { - this.isSecretsSyncActivated = true; + this.showSecretSyncs = true; await this.renderComponent(); @@ -83,7 +83,7 @@ module('Integration | Component | clients/usage-stats', function (hooks) { }); test('with secrets sync NOT activated', async function (assert) { - this.isSecretsSyncActivated = false; + this.showSecretSyncs = false; await this.renderComponent();