Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Client count config view #12422

Merged
merged 6 commits into from Aug 25, 2021
Merged

Client count config view #12422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1e58488
Client count config view
arnav28 Aug 24, 2021
9cc98c9
Fixed integration tests
arnav28 Aug 24, 2021
3bc9e5b
Added changelog
arnav28 Aug 24, 2021
aae65ac
Update switch label on toggle
arnav28 Aug 24, 2021
e47d0f9
Code cleanup
arnav28 Aug 25, 2021
8eabf6c
Fixed test
arnav28 Aug 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelog/12422.txt
View file
Open in desktop
@@ -0,0 +1,3 @@
```release-note:improvement
ui: updated client tracking config view
```
66 changes: 36 additions & 30 deletions ui/app/components/pricing-metrics-config.js
View file
Open in desktop
Expand Up @@ -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',
Expand All @@ -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;
}
}
63 changes: 48 additions & 15 deletions ui/app/templates/components/pricing-metrics-config.hbs
View file
Open in desktop
@@ -1,13 +1,46 @@
{{#if (eq mode "edit")}}
{{#if (eq @mode "edit")}}
<form onsubmit={{action "onSaveChanges"}} data-test-pricing-metrics-config-form>
<div class="box is-sideless is-fullwidth is-marginless">
<MessageError @model={{model}} @errorMessage={{error}} />
{{#each model.configAttrs as |attr|}}
<FormField
data-test-field
@attr={{attr}}
@model={{model}}
/>
<MessageError @model={{@model}} @errorMessage={{this.error}} />
{{#each @model.configAttrs as |attr|}}
{{#if (and (eq attr.type "string") (eq attr.options.editType "boolean"))}}
<label class="is-label">Usage data collection</label>
{{#if attr.options.helpText}}
<p class="sub-text">{{attr.options.helpText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
{{/if}}
<div class="control is-flex has-bottom-margin-l">
<input data-test-field type="checkbox" id="{{attr.name}}" name={{attr.name}} class="switch is-rounded is-success is-small" checked={{eq (get @model attr.name) attr.options.trueValue}}
onchange={{action (action "updateBooleanValue" attr) value="target.checked"}} />
<label for="{{attr.name}}">
{{#if (eq @model.enabled "Off")}}
Data collection is off
{{else}}
Data collection is on
{{/if}}
</label>
</div>
{{else if (eq attr.type "number")}}
<div class="has-top-margin-s">
<label for="{{attr.name}}" class="is-label">
{{ attr.options.label }}
</label>
{{#if attr.options.subText}}
<p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
{{/if}}
<div class="control">
<input
data-test-field
id={{attr.name}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no chance there would be two of the same fields on the same page? e.g. two with the same attr.name?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nope, should not happen.

disabled={{eq @model.enabled "Off"}}
autocomplete="off"
spellcheck="false"
onchange={{action (mut (get @model attr.name)) value="target.value"}}
value={{or (get @model attr.name) attr.options.defaultValue}}
class="input"
maxLength={{attr.options.characterLimit}} />
</div>
</div>
{{/if}}
{{/each}}
</div>
<div class="field is-grouped-split box is-fullwidth is-bottomless">
Expand All @@ -29,14 +62,14 @@
</div>
</form>
<Modal
@title={{modalTitle}}
@onClose={{action (mut modalOpen) false}}
@isActive={{modalOpen}}
@title={{this.modalTitle}}
@onClose={{action (mut this.modalOpen) false}}
@isActive={{this.modalOpen}}
@type="warning"
@showCloseButton={{true}}
>
<section class="modal-card-body">
{{#if (eq model.enabled "On")}}
{{#if (eq @model.enabled "On")}}
<p class="has-bottom-margin-s">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.</p>
<p>If you’ve previously enabled usage tracking, that historical data will still be available to you.</p>
{{else}}
Expand All @@ -56,19 +89,19 @@
<button
type="button"
class="button is-primary"
onclick={{perform save}}
onclick={{perform this.save}}
>
Continue
</button>
</footer>
</Modal>
{{else}}
<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics-config-table>
{{#each infoRows as |item|}}
{{#each this.infoRows as |item|}}
<InfoTableRow
@label={{item.label}}
@helperText={{item.helperText}}
@value={{get model item.valueKey}}
@value={{get @model item.valueKey}}
/>
{{/each}}
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions ui/tests/integration/components/pricing-metrics-config-test.js
View file
Open in desktop
Expand Up @@ -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: () => {},
Expand Down Expand Up @@ -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) {
Expand Down
17 changes: 14 additions & 3 deletions ui/yarn.lock
View file
Open in desktop
Expand Up @@ -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==
Expand Down Expand Up @@ -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==
Expand All @@ -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"
Expand Down Expand Up @@ -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==
Expand Down