diff --git a/changelog/12422.txt b/changelog/12422.txt
new file mode 100644
index 0000000000000..728b4a36e876e
--- /dev/null
+++ b/changelog/12422.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: updated client tracking config view
+```
\ No newline at end of file
diff --git a/ui/app/components/pricing-metrics-config.js b/ui/app/components/pricing-metrics-config.js
index 50ad103545b72..a61ef3d3420cf 100644
--- a/ui/app/components/pricing-metrics-config.js
+++ b/ui/app/components/pricing-metrics-config.js
@@ -10,19 +10,19 @@
* @param {string} [mode=show] - mode is either show or edit. Show results in a table with the config, show has a form.
*/
-import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
import { task } from 'ember-concurrency';
-export default Component.extend({
- router: service(),
- mode: 'show',
- model: null,
+export default class PricingMetricsConfigComponent extends Component {
+ @service router;
+ @tracked mode = 'show';
+ @tracked modalOpen = false;
+ error = null;
- error: null,
- modalOpen: false,
- infoRows: computed(function() {
+ get infoRows() {
return [
{
label: 'Usage data collection',
@@ -40,35 +40,41 @@ export default Component.extend({
valueKey: 'defaultReportMonths',
},
];
- }),
- modalTitle: computed('model.enabled', function() {
+ }
+
+ get modalTitle() {
let content = 'Turn usage tracking off?';
- if (this.model.enabled === 'On') {
+ if (this.args.model && this.args.model.enabled === 'On') {
content = 'Turn usage tracking on?';
}
return content;
- }),
+ }
- save: task(function*() {
- let model = this.model;
+ @(task(function*() {
try {
- yield model.save();
+ yield this.args.model.save();
} catch (err) {
- this.set('error', err.message);
+ this.error = err.message;
return;
}
this.router.transitionTo('vault.cluster.metrics.config');
- }).drop(),
+ }).drop())
+ save;
+
+ @action
+ updateBooleanValue(attr, value) {
+ let valueToSet = value === true ? attr.options.trueValue : attr.options.falseValue;
+ this.args.model[attr.name] = valueToSet;
+ }
- actions: {
- onSaveChanges: function(evt) {
- evt.preventDefault();
- const changed = this.model.changedAttributes();
- if (!changed.enabled) {
- this.save.perform();
- return;
- }
- this.set('modalOpen', true);
- },
- },
-});
+ @action
+ onSaveChanges(evt) {
+ evt.preventDefault();
+ const changed = this.args.model.changedAttributes();
+ if (!changed.enabled) {
+ this.save.perform();
+ return;
+ }
+ this.modalOpen = true;
+ }
+}
diff --git a/ui/app/templates/components/pricing-metrics-config.hbs b/ui/app/templates/components/pricing-metrics-config.hbs
index 4581569bbf8d8..b6813735770cf 100644
--- a/ui/app/templates/components/pricing-metrics-config.hbs
+++ b/ui/app/templates/components/pricing-metrics-config.hbs
@@ -1,13 +1,46 @@
-{{#if (eq mode "edit")}}
+{{#if (eq @mode "edit")}}
- {{#if (eq model.enabled "On")}}
+ {{#if (eq @model.enabled "On")}}
Vault will start tracking data starting from today’s date, {{date-format (now) "d MMMM yyyy"}}. You will not be able to see or query usage until the end of the month.
If you’ve previously enabled usage tracking, that historical data will still be available to you.
{{else}}
@@ -56,7 +89,7 @@
Continue
@@ -64,11 +97,11 @@
{{else}}
- {{#each infoRows as |item|}}
+ {{#each this.infoRows as |item|}}
{{/each}}
diff --git a/ui/package.json b/ui/package.json
index 29a72148e1af5..05225e58a73b2 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -93,7 +93,7 @@
"ember-cli-string-helpers": "^4.0.0",
"ember-cli-terser": "^4.0.0",
"ember-composable-helpers": "^4.3.0",
- "ember-concurrency": "^1.3.0",
+ "ember-concurrency": "^2.1.2",
"ember-concurrency-test-waiter": "^0.3.2",
"ember-copy": "^1.0.0",
"ember-cp-validations": "^4.0.0-beta.12",
diff --git a/ui/tests/integration/components/pricing-metrics-config-test.js b/ui/tests/integration/components/pricing-metrics-config-test.js
index 40760dab6a293..592b9fbd64a3e 100644
--- a/ui/tests/integration/components/pricing-metrics-config-test.js
+++ b/ui/tests/integration/components/pricing-metrics-config-test.js
@@ -32,9 +32,9 @@ module('Integration | Component | pricing-metrics-config', function(hooks) {
retentionMonths: 24,
defaultReportMonths: 12,
configAttrs: [
- createAttr('enabled', 'boolean'),
- createAttr('retentionMonths', 'string'),
- createAttr('defaultReportMonths', 'string'),
+ createAttr('enabled', 'string', { editType: 'boolean' }),
+ createAttr('retentionMonths', 'number'),
+ createAttr('defaultReportMonths', 'number'),
],
changedAttributes: () => ({}),
save: () => {},
@@ -76,8 +76,8 @@ module('Integration | Component | pricing-metrics-config', function(hooks) {
`);
assert.dom('[data-test-pricing-metrics-config-form]').exists('Pricing metrics config form exists');
- const fields = document.querySelectorAll('[data-test-field] input');
- assert.equal(fields.length, 3, 'renders 3 input fields');
+ const fields = document.querySelectorAll('[data-test-field]');
+ assert.equal(fields.length, 3, 'renders 3 fields');
});
test('it shows a modal with correct messaging when disabling', async function(assert) {
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 20373c586a03a..bcb121b06ea88 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -7827,7 +7827,7 @@ ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1:
json-stable-stringify "^1.0.1"
strip-bom "^3.0.0"
-ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1:
+ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.6.3, ember-cli-htmlbars@^5.7.1:
version "5.7.1"
resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.7.1.tgz#eb5b88c7d9083bc27665fb5447a9b7503b32ce4f"
integrity sha512-9laCgL4tSy48orNoQgQKEHp93MaqAs9ZOl7or5q+8iyGGJHW6sVXIYrVv5/5O9HfV6Ts8/pW1rSoaeKyLUE+oA==
@@ -8216,7 +8216,7 @@ ember-concurrency-test-waiter@^0.3.2:
dependencies:
ember-cli-babel "^6.6.0"
-"ember-concurrency@^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0", ember-concurrency@^1.3.0:
+"ember-concurrency@^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/ember-concurrency/-/ember-concurrency-1.3.0.tgz#66f90fb792687470bcee1172adc0ebf33f5e8b9c"
integrity sha512-DwGlfWFpYyAkTwsedlEtK4t1DznJSculAW6Vq5S1C0shVPc5b6tTpHB2FFYisannSYkm+wpm1f1Pd40qiNPtOQ==
@@ -8225,6 +8225,17 @@ ember-concurrency-test-waiter@^0.3.2:
ember-compatibility-helpers "^1.2.0"
ember-maybe-import-regenerator "^0.1.6"
+ember-concurrency@^2.1.2:
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/ember-concurrency/-/ember-concurrency-2.1.2.tgz#a27178fb24951933fa72dd7cf1dca852693cc5c1"
+ integrity sha512-xC6L/SKuM08e9TK5igkSEwbAtkX2sqrj9Xap9G3zYSYdAIO7fcS6ZNEaD5e+dVXwPqH3tOIq41ZT7fqQ7mQ0KQ==
+ dependencies:
+ "@glimmer/tracking" "^1.0.2"
+ ember-cli-babel "^7.22.1"
+ ember-cli-htmlbars "^5.6.3"
+ ember-compatibility-helpers "^1.2.0"
+ ember-destroyable-polyfill "^2.0.2"
+
ember-copy@1.0.0, ember-copy@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/ember-copy/-/ember-copy-1.0.0.tgz#426554ba6cf65920f31d24d0a3ca2cb1be16e4aa"
@@ -8280,7 +8291,7 @@ ember-debug-handlers-polyfill@^1.1.1:
resolved "https://registry.yarnpkg.com/ember-debug-handlers-polyfill/-/ember-debug-handlers-polyfill-1.1.1.tgz#e9ae0a720271a834221179202367421b580002ef"
integrity sha512-lO7FBAqJjzbL+IjnWhVfQITypPOJmXdZngZR/Vdn513W4g/Q6Sjicao/mDzeDCb48Y70C4Facwk0LjdIpSZkRg==
-ember-destroyable-polyfill@^2.0.3:
+ember-destroyable-polyfill@^2.0.2, ember-destroyable-polyfill@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/ember-destroyable-polyfill/-/ember-destroyable-polyfill-2.0.3.tgz#1673ed66609a82268ef270a7d917ebd3647f11e1"
integrity sha512-TovtNqCumzyAiW0/OisSkkVK93xnVF4NRU6+FN0ubpfwEOpRrmM2RqDwXI6YAChCgSHON1cz0DfQStpA1Gjuuw==