From 79a982ee476aefa967513c7e2eb8111cc7386df5 Mon Sep 17 00:00:00 2001 From: Chelsea Shaw Date: Thu, 1 Oct 2020 14:37:33 -0500 Subject: [PATCH] Ui/pricing metrics page setup (#10049) * Create model and adapter for metrics/activity * Query activity and return fake data on adapterError * Add stub of pricing metrics cards and search form elements to metrics template * Metrics page has pricing metrics rather than all-time tokens and requests * update metrics config model * Add metrics-config route and page * Remove metrics/http-requests route and template * remove log * Add alert banner for when tracking disabled, and add result dates * Small edits --- ui/app/adapters/metrics/activity.js | 14 ++++ ui/app/adapters/metrics/config.js | 14 ++++ .../vault/cluster/metrics-config.js | 24 +++++++ ui/app/models/metrics/activity.js | 7 ++ ui/app/models/metrics/config.js | 10 +++ ui/app/router.js | 6 +- ui/app/routes/vault/cluster/metrics-config.js | 8 +++ ui/app/routes/vault/cluster/metrics.js | 10 ++- .../vault/cluster/metrics/http-requests.js | 7 -- ui/app/routes/vault/cluster/metrics/index.js | 26 ------- ui/app/serializers/metrics/activity.js | 3 + ui/app/serializers/metrics/config.js | 12 ++++ .../vault/cluster/metrics-config.hbs | 48 +++++++++++++ ui/app/templates/vault/cluster/metrics.hbs | 70 +++++++++++++++++++ .../vault/cluster/metrics/http-requests.hbs | 21 ------ .../templates/vault/cluster/metrics/index.hbs | 15 ---- 16 files changed, 221 insertions(+), 74 deletions(-) create mode 100644 ui/app/adapters/metrics/activity.js create mode 100644 ui/app/adapters/metrics/config.js create mode 100644 ui/app/controllers/vault/cluster/metrics-config.js create mode 100644 ui/app/models/metrics/activity.js create mode 100644 ui/app/models/metrics/config.js create mode 100644 ui/app/routes/vault/cluster/metrics-config.js delete mode 100644 ui/app/routes/vault/cluster/metrics/http-requests.js delete mode 100644 ui/app/routes/vault/cluster/metrics/index.js create mode 100644 ui/app/serializers/metrics/activity.js create mode 100644 ui/app/serializers/metrics/config.js create mode 100644 ui/app/templates/vault/cluster/metrics-config.hbs create mode 100644 ui/app/templates/vault/cluster/metrics.hbs delete mode 100644 ui/app/templates/vault/cluster/metrics/http-requests.hbs delete mode 100644 ui/app/templates/vault/cluster/metrics/index.hbs diff --git a/ui/app/adapters/metrics/activity.js b/ui/app/adapters/metrics/activity.js new file mode 100644 index 0000000000..250b38cb41 --- /dev/null +++ b/ui/app/adapters/metrics/activity.js @@ -0,0 +1,14 @@ +import Application from '../application'; + +export default Application.extend({ + queryRecord() { + return this.ajax(this.urlForQuery(), 'GET').then(resp => { + resp.id = resp.request_id; + return resp; + }); + }, + + urlForQuery() { + return this.buildURL() + '/internal/counters/activity'; + }, +}); diff --git a/ui/app/adapters/metrics/config.js b/ui/app/adapters/metrics/config.js new file mode 100644 index 0000000000..f56007b7a5 --- /dev/null +++ b/ui/app/adapters/metrics/config.js @@ -0,0 +1,14 @@ +import Application from '../application'; + +export default Application.extend({ + queryRecord() { + return this.ajax(this.urlForQuery(), 'GET').then(resp => { + resp.id = resp.request_id; + return resp; + }); + }, + + urlForQuery() { + return this.buildURL() + '/internal/counters/config'; + }, +}); diff --git a/ui/app/controllers/vault/cluster/metrics-config.js b/ui/app/controllers/vault/cluster/metrics-config.js new file mode 100644 index 0000000000..6781994966 --- /dev/null +++ b/ui/app/controllers/vault/cluster/metrics-config.js @@ -0,0 +1,24 @@ +import Controller from '@ember/controller'; +import { computed } from '@ember/object'; + +export default Controller.extend({ + infoRows: computed(function() { + return [ + { + label: 'Usage data collection', + helperText: 'Enable or disable collecting data to track clients.', + valueKey: 'enabled', + }, + { + label: 'Retention period', + helperText: 'The number of months of activity logs to maintain for client tracking.', + valueKey: 'retentionMonths', + }, + { + label: 'Default display', + helperText: 'The number of months we’ll display in the Vault usage dashboard by default.', + valueKey: 'defaultReportMonths', + }, + ]; + }), +}); diff --git a/ui/app/models/metrics/activity.js b/ui/app/models/metrics/activity.js new file mode 100644 index 0000000000..68945a7555 --- /dev/null +++ b/ui/app/models/metrics/activity.js @@ -0,0 +1,7 @@ +import DS from 'ember-data'; + +export default DS.Model.extend({ + total: DS.attr('object'), + endTime: DS.attr('string'), + startTime: DS.attr('string'), +}); diff --git a/ui/app/models/metrics/config.js b/ui/app/models/metrics/config.js new file mode 100644 index 0000000000..c0aae28655 --- /dev/null +++ b/ui/app/models/metrics/config.js @@ -0,0 +1,10 @@ +import DS from 'ember-data'; + +const { attr } = DS; + +export default DS.Model.extend({ + queriesAvailable: attr('boolean'), + defaultReportMonths: attr('number'), + retentionMonths: attr('number'), + enabled: attr('string'), +}); diff --git a/ui/app/router.js b/ui/app/router.js index b507202879..9bc581a2bd 100644 --- a/ui/app/router.js +++ b/ui/app/router.js @@ -15,10 +15,7 @@ Router.map(function() { this.route('logout'); this.mount('open-api-explorer', { path: '/api-explorer' }); this.route('license'); - this.route('metrics', function() { - this.route('index', { path: '/' }); - this.route('http-requests'); - }); + this.route('metrics'); this.route('storage', { path: '/storage/raft' }); this.route('storage-restore', { path: '/storage/raft/restore' }); this.route('settings', function() { @@ -137,6 +134,7 @@ Router.map(function() { } this.route('not-found', { path: '/*path' }); + this.route('metrics-config'); }); this.route('not-found', { path: '/*path' }); }); diff --git a/ui/app/routes/vault/cluster/metrics-config.js b/ui/app/routes/vault/cluster/metrics-config.js new file mode 100644 index 0000000000..ed1a32d5e4 --- /dev/null +++ b/ui/app/routes/vault/cluster/metrics-config.js @@ -0,0 +1,8 @@ +import Route from '@ember/routing/route'; +import ClusterRoute from 'vault/mixins/cluster-route'; + +export default Route.extend(ClusterRoute, { + model() { + return this.store.queryRecord('metrics/config', {}); + }, +}); diff --git a/ui/app/routes/vault/cluster/metrics.js b/ui/app/routes/vault/cluster/metrics.js index 669017080b..df7cfcb0a6 100644 --- a/ui/app/routes/vault/cluster/metrics.js +++ b/ui/app/routes/vault/cluster/metrics.js @@ -1,8 +1,16 @@ import Route from '@ember/routing/route'; import ClusterRoute from 'vault/mixins/cluster-route'; +import { hash } from 'rsvp'; export default Route.extend(ClusterRoute, { model() { - return {}; + let config = this.store.queryRecord('metrics/config', {}); + + let activity = this.store.queryRecord('metrics/activity', {}); + + return hash({ + activity, + config, + }); }, }); diff --git a/ui/app/routes/vault/cluster/metrics/http-requests.js b/ui/app/routes/vault/cluster/metrics/http-requests.js deleted file mode 100644 index e75905e3c4..0000000000 --- a/ui/app/routes/vault/cluster/metrics/http-requests.js +++ /dev/null @@ -1,7 +0,0 @@ -import ClusterRouteBase from '../cluster-route-base'; - -export default ClusterRouteBase.extend({ - model() { - return this.store.queryRecord('metrics/http-requests', {}); - }, -}); diff --git a/ui/app/routes/vault/cluster/metrics/index.js b/ui/app/routes/vault/cluster/metrics/index.js deleted file mode 100644 index 177dc4013a..0000000000 --- a/ui/app/routes/vault/cluster/metrics/index.js +++ /dev/null @@ -1,26 +0,0 @@ -import Route from '@ember/routing/route'; -import ClusterRoute from 'vault/mixins/cluster-route'; -import { hash } from 'rsvp'; - -export default Route.extend(ClusterRoute, { - model() { - let totalEntities = this.store.queryRecord('metrics/entity', {}).then(response => { - return response.entities.total; - }); - - let httpsRequests = this.store.queryRecord('metrics/http-requests', {}).then(response => { - let reverseArray = response.counters.reverse(); - return reverseArray; - }); - - let totalTokens = this.store.queryRecord('metrics/token', {}).then(response => { - return response.service_tokens.total; - }); - - return hash({ - totalEntities, - httpsRequests, - totalTokens, - }); - }, -}); diff --git a/ui/app/serializers/metrics/activity.js b/ui/app/serializers/metrics/activity.js new file mode 100644 index 0000000000..8ea3d5fac6 --- /dev/null +++ b/ui/app/serializers/metrics/activity.js @@ -0,0 +1,3 @@ +import ApplicationSerializer from '../application'; + +export default ApplicationSerializer.extend({}); diff --git a/ui/app/serializers/metrics/config.js b/ui/app/serializers/metrics/config.js new file mode 100644 index 0000000000..0d716b9c65 --- /dev/null +++ b/ui/app/serializers/metrics/config.js @@ -0,0 +1,12 @@ +import ApplicationSerializer from '../application'; + +export default ApplicationSerializer.extend({ + normalizeResponse(store, primaryModelClass, payload, id, requestType) { + const normalizedPayload = { + id: payload.id, + ...payload.data, + enabled: payload.data.enabled.includes('enabled') ? 'On' : 'Off', + }; + return this._super(store, primaryModelClass, normalizedPayload, id, requestType); + }, +}); diff --git a/ui/app/templates/vault/cluster/metrics-config.hbs b/ui/app/templates/vault/cluster/metrics-config.hbs new file mode 100644 index 0000000000..b27882e13a --- /dev/null +++ b/ui/app/templates/vault/cluster/metrics-config.hbs @@ -0,0 +1,48 @@ + + +

+ Metrics +

+ + + +
+ +
+ +
+ {{#each infoRows as |item|}} + {{info-table-row + label=item.label + helperText=item.helperText + value=(get model item.valueKey) + }} + {{/each}} +
diff --git a/ui/app/templates/vault/cluster/metrics.hbs b/ui/app/templates/vault/cluster/metrics.hbs new file mode 100644 index 0000000000..fb2150f10e --- /dev/null +++ b/ui/app/templates/vault/cluster/metrics.hbs @@ -0,0 +1,70 @@ + + +

+ Metrics +

+ + + +
+ +
+ +
+ {{#unless (eq model.config.enabled 'On')}} + + This feature is currently disabled and data is not being collected. {{#link-to 'vault.cluster.metrics-config'}}Edit the configuration{{/link-to}} to enable tracking again. + + {{/unless}} +

The active clients metric contributes to billing. It is collected at the end of each month alongside unique entities and direct active tokens.

+

+ {{date-format model.activity.startTime "MMM DD, YYYY"}} through {{date-format model.activity.endTime "MMM DD, YYYY"}} +

+
+ + + +
+
diff --git a/ui/app/templates/vault/cluster/metrics/http-requests.hbs b/ui/app/templates/vault/cluster/metrics/http-requests.hbs deleted file mode 100644 index 225046ea61..0000000000 --- a/ui/app/templates/vault/cluster/metrics/http-requests.hbs +++ /dev/null @@ -1,21 +0,0 @@ - - - - - -

- HTTP Request Volume -

- - - - diff --git a/ui/app/templates/vault/cluster/metrics/index.hbs b/ui/app/templates/vault/cluster/metrics/index.hbs deleted file mode 100644 index d68bf74683..0000000000 --- a/ui/app/templates/vault/cluster/metrics/index.hbs +++ /dev/null @@ -1,15 +0,0 @@ - - -

- Metrics -

- - - -
- {{#if (gt model.httpsRequests.length 1) }} - - {{else}} - - {{/if}} -