luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

UI/license page with autoload (#11778)

This commit is contained in:
Chelsea Shaw 2021-06-07 12:44:39 -05:00 committed by GitHub
parent 69d0242db9
commit 468331fa61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 147 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
changelog/11778.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: update license page with relevant autoload info
```

31
ui/app/adapters/license.js
View File

@ -1,36 +1,7 @@
import ClusterAdapter from './cluster';
export default ClusterAdapter.extend({
queryRecord() {
return this._super(...arguments).then(resp => {
resp.data.id = resp.data.license_id;
return resp.data;
});
},
createRecord(store, type, snapshot) {
let id = snapshot.attr('licenseId');
return this._super(...arguments).then(() => {
return {
id,
};
});
},
updateRecord(store, type, snapshot) {
let id = snapshot.attr('licenseId');
return this._super(...arguments).then(() => {
return {
id,
};
});
},
pathForType() {
return 'license';
},
urlForUpdateRecord() {
return this.buildURL() + '/license';
return 'license/status';
},
});

55
ui/app/components/license-info.js
View File

@ -1,22 +1,32 @@
import { equal } from '@ember/object/computed';
import Component from '@ember/component';
import Component from '@glimmer/component';
import { allFeatures } from 'vault/helpers/all-features';
import { computed } from '@ember/object';
export default Component.extend({
expirationTime: '',
startTime: '',
licenseId: '',
features: null,
model: null,
text: '',
showForm: false,
isTemporary: equal('licenseId', 'temporary'),
featuresInfo: computed('features', 'model.performanceStandbyCount', function() {
/**
* @module LicenseInfo
*
* @example
* ```js
* <LicenseInfo
* @startTime="2020-03-12T23:20:50.52Z"
* @expirationTime="2021-05-12T23:20:50.52Z"
* @licenseId="some-license-id"
* @features={{array 'Namespaces' 'DR Replication'}}
* @autoloaded={{true}}
* @performanceStandbyCount=1
* />
*
* @param {string} startTime - RFC3339 formatted timestamp of when the license became active
* @param {string} expirationTime - RFC3339 formatted timestamp of when the license will expire
* @param {string} licenseId - unique ID of the license
* @param {Array<string>} features - Array of feature names active on license
* @param {boolean} autoloaded - Whether the license is autoloaded
* @param {number} performanceStandbyCount - Number of performance standbys active
*/
export default class LicenseInfoComponent extends Component {
get featuresInfo() {
return allFeatures().map(feature => {
let active = this.features.includes(feature);
let active = this.args.features.includes(feature);
if (active && feature === 'Performance Standby') {
let count = this.model.performanceStandbyCount;
let count = this.args.performanceStandbyCount;
return {
name: feature,
active: count ? active : false,
@ -25,14 +35,5 @@ export default Component.extend({
}
return { name: feature, active };
});
}),
saveModel() {},
actions: {
saveModel(text) {
this.saveModel(text);
},
toggleForm() {
this.toggleProperty('showForm');
},
},
});
}
}

15
ui/app/controllers/vault/cluster/license.js
View File

@ -1,15 +0,0 @@
import Controller from '@ember/controller';
export default Controller.extend({
licenseSuccess() {
this.send('doRefresh');
},
licenseError() {
//eat the error (handled in MessageError component)
},
actions: {
saveModel({ text }) {
this.model.save({ text }).then(() => this.licenseSuccess(), () => this.licenseError());
},
},
});

2
ui/app/models/license.js
View File

@ -24,6 +24,6 @@ export default Model.extend({
features: attr('array'),
licenseId: attr('string'),
startTime: attr('string'),
text: attr('string'),
performanceStandbyCount: attr('number'),
autoloaded: attr('boolean'),
});

6
ui/app/routes/vault/cluster/license.js
View File

@ -13,10 +13,4 @@ export default Route.extend(ClusterRoute, {
model() {
return this.store.queryRecord('license', {});
},
actions: {
doRefresh() {
this.refresh();
},
},
});

20
ui/app/serializers/license.js Normal file
View File

@ -0,0 +1,20 @@
import ApplicationSerializer from './application';
export default ApplicationSerializer.extend({
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
let transformedPayload = { autoloaded: payload.autoloading_used, license_id: 'no-license' };
if (payload.autoloaded) {
transformedPayload = {
...transformedPayload,
...payload.autoloaded,
};
} else if (payload.stored) {
transformedPayload = {
...transformedPayload,
...payload.stored,
};
}
transformedPayload.id = transformedPayload.license_id;
return this._super(store, primaryModelClass, transformedPayload, id, requestType);
},
});

81
ui/app/templates/components/license-info.hbs
View File

@ -3,72 +3,29 @@
<h1 class="title is-3">License</h1>
</p.levelLeft>
</PageHeader>
<MessageError @model={{model}} />
{{#if isTemporary}}
<section class="box is-sideless is-fullwidth">
<AlertBanner
@type="warning"
@message="Your temporary license expires in {{date-from-now expirationTime}} and your vault will seal. Please enter a valid license below."
@class="license-warning"
data-test-cluster-status
data-test-warning-text
/>
<span class="title is-5" data-test-temp-license>Temporary license</span>
<form {{action "saveModel" text on="submit"}}>
<div class="box is-shadowless is-fullwidth is-marginless">
<div class="field">
<label for="license-id" class="is-label">License</label>
<div class="control">
<Input @id="license-id" @value={{text}} @autocomplete="off" class="input" data-test-text-input="data-test-text-input" />
</div>
</div>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button is-primary" data-test-save-button>Save</button>
</div>
</div>
</form>
</section>
{{else}}
<section class="box is-sideless is-fullwidth">
<span class="title is-5">Details</span>
{{#if showForm}}
<form {{action "saveModel" text on="submit"}}>
<div class="field">
<label for="license-id" class="is-label">License</label>
<div class="control">
<Input @id="license-id" @value={{text}} @autocomplete="off" class="input" data-test-text-input="data-test-text-input" />
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-primary" data-test-save-button>Save</button>
</div>
<div class="control">
<button type="button" {{action "toggleForm"}} class="button" data-test-cancel-button>Cancel</button>
</div>
</div>
</form>
{{else}}
<div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
<InfoTableRow @label="License ID" @value={{licenseId}} />
<InfoTableRow @label="Valid from" @value={{startTime}}>
{{date-format startTime 'MMM dd, yyyy hh:mm:ss a'}} to {{date-format expirationTime 'MMM dd, yyyy hh:mm:ss a'}}
<section class="box is-sideless is-marginless is-shadowless is-fullwidth">
<span class="title is-5">Details</span>
<div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
<InfoTableRow @label="License ID" @value={{@licenseId}} @data-test-detail-row={{true}} />
<InfoTableRow @label="Valid from" @value={{@startTime}} @data-test-detail-row={{true}}>
{{date-format @startTime 'MMM dd, yyyy hh:mm:ss a'}} to {{date-format @expirationTime 'MMM dd, yyyy hh:mm:ss a'}}
</InfoTableRow>
<InfoTableRow @label="License state" @value={{if @autoloaded "Autoloaded" "Stored"}} @data-test-detail-row={{true}}>
{{#if @autoloaded}}
Autoloaded
{{else}}
Stored
<Icon @glyph="alert-triangle" class="has-text-highlight" /> <span class="is-size-8">Stored licenses will be deprecated in Vault 1.11. We recommend autoloading your license. Read more <a href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license" rel="noreferrer noopener" target="_blank" >here</a>.</span>
{{/if}}
</InfoTableRow>
</div>
<div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
<div class="control">
<button type="button" {{action "toggleForm"}} class="button" data-test-enter-button>Enter new license</button>
</div>
</div>
{{/if}}
</section>
{{/if}}
</div>
</section>
<section class="box is-sideless is-marginless is-shadowless is-fullwidth">
<span class="title is-5">Features</span>
<div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
{{#each featuresInfo as |info|}}
{{#each this.featuresInfo as |info|}}
<InfoTableRow @label={{info.name}} @value={{if info.active "Active" "Not Active"}} @data-test-feature-row="data-test-feature-row">
{{#if info.active}}
<Icon

5
ui/app/templates/vault/cluster/license.hbs
View File

@ -3,7 +3,6 @@
@expirationTime={{model.expirationTime}}
@licenseId={{model.licenseId}}
@features={{model.features}}
@text={{model.text}}
@saveModel={{action "saveModel"}}
@model={{model}}
@autoloaded={{model.autoloaded}}
@performanceStandbyCount={{model.performanceStandbyCount}}
/>

2
ui/app/templates/vault/cluster/unseal.hbs
View File

@ -21,7 +21,7 @@
@bottomBorder={{true}}
@message="Your Vault license has terminated and Vault is sealed. To unseal, add a current license to your configuration and restart Vault."
>
<p class="align-right"><a href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license" rel="noreferrer noopener">License documentation</a></p>
<p class="align-right"><a href="https://learn.hashicorp.com/tutorials/nomad/hashicorp-enterprise-license" target="_blank" rel="noreferrer noopener">License documentation</a></p>
</EmptyState>
</div>
</div>

3
ui/config/environment.js
View File

@ -45,6 +45,9 @@ module.exports = function(environment) {
ENV.APP.LOG_TRANSITIONS = true;
// ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
// ENV.APP.LOG_VIEW_LOOKUPS = true;
// ENV['ember-cli-mirage'] = {
// enabled: true,
// };
}
if (environment === 'test') {

29
ui/mirage/config.js
View File

@ -1,3 +1,5 @@
const EXPIRY_DATE = '2021-05-12T23:20:50.52Z';
export default function() {
this.namespace = 'v1';
@ -29,6 +31,33 @@ export default function() {
};
});
this.get('/sys/license/status', function() {
return {
autoloading_used: false,
stored: {
expiration_time: EXPIRY_DATE,
features: ['DR Replication', 'Namespaces', 'Lease Count Quotas', 'Automated Snapshots'],
license_id: '0eca7ef8-ebc0-f875-315e-3cc94a7870cf',
performance_standby_count: 0,
start_time: '2020-04-28T00:00:00Z',
},
persisted_autoload: {
expiration_time: EXPIRY_DATE,
features: ['DR Replication', 'Namespaces', 'Lease Count Quotas', 'Automated Snapshots'],
license_id: '0eca7ef8-ebc0-f875-315e-3cc94a7870cf',
performance_standby_count: 0,
start_time: '2020-04-28T00:00:00Z',
},
autoloaded: {
expiration_time: EXPIRY_DATE,
features: ['DR Replication', 'Namespaces', 'Lease Count Quotas', 'Automated Snapshots'],
license_id: '0eca7ef8-ebc0-f875-315e-3cc94a7870cf',
performance_standby_count: 0,
start_time: '2020-04-28T00:00:00Z',
},
};
});
this.get('/sys/health', function() {
return {
initialized: true,

101
ui/tests/integration/components/license-info-test.js
View File

@ -3,7 +3,6 @@ import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import sinon from 'sinon';
import { create } from 'ember-cli-page-object';
import license from '../../pages/components/license-info';
import { allFeatures } from 'vault/helpers/all-features';
@ -15,39 +14,6 @@ const component = create(license);
module('Integration | Component | license info', function(hooks) {
setupRenderingTest(hooks);
const LICENSE_WARNING_TEXT = `Warning Your temporary license expires in 30 minutes and your vault will seal. Please enter a valid license below.`;
test('it renders properly for temporary license', async function(assert) {
const now = Date.now();
this.set('licenseId', 'temporary');
this.set('expirationTime', addMinutes(now, 30));
this.set('startTime', now);
this.set('features', ['HSM', 'Namespaces']);
await render(
hbs`<LicenseInfo @licenseId={{this.licenseId}} @expirationTime={{this.expirationTime}} @startTime={{this.startTime}} @features={{this.features}}/>`
);
assert.equal(component.warning, LICENSE_WARNING_TEXT, 'it renders warning text including time left');
assert.equal(component.hasSaveButton, true, 'it renders the save button');
assert.equal(component.hasTextInput, true, 'it renders text input for new license');
assert.equal(component.featureRows.length, FEATURES.length, 'it renders all of the features');
assert.equal(component.featureRows.objectAt(0).featureName, 'HSM', 'it renders HSM feature');
assert.equal(
component.featureRows.objectAt(0).featureStatus,
'Active',
'it renders Active for HSM feature'
);
assert.equal(
component.featureRows.objectAt(1).featureName,
'Performance Replication',
'it renders Performance Replication feature name'
);
assert.equal(
component.featureRows.objectAt(1).featureStatus,
'Not Active',
'it renders Not Active for Performance Replication'
);
});
test('it renders feature status properly for features associated with license', async function(assert) {
const now = Date.now();
this.set('licenseId', 'temporary');
@ -57,58 +23,55 @@ module('Integration | Component | license info', function(hooks) {
await render(
hbs`<LicenseInfo @licenseId={{this.licenseId}} @expirationTime={{this.expirationTime}} @startTime={{this.startTime}} @features={{this.features}}/>`
);
assert.equal(component.detailRows.length, 3, 'Shows License ID, Valid from, and License State rows');
assert.equal(component.featureRows.length, FEATURES.length, 'it renders all of the features');
let activeFeatures = component.featureRows.filter(f => f.featureStatus === 'Active');
assert.equal(activeFeatures.length, 2);
assert.equal(activeFeatures.length, 2, 'Has two features listed as active');
});
test('it renders properly for non-temporary license', async function(assert) {
test('it renders properly for autoloaded license', async function(assert) {
const now = Date.now();
this.set('licenseId', 'test');
this.set('expirationTime', addMinutes(now, 30));
this.set('autoloaded', true);
this.set('startTime', now);
this.set('features', ['HSM', 'Namespaces']);
await render(
hbs`<LicenseInfo @licenseId={{this.licenseId}} @expirationTime={{this.expirationTime}} @startTime={{this.startTime}} @features={{this.features}}/>`
hbs`<LicenseInfo
@licenseId={{this.licenseId}}
@expirationTime={{this.expirationTime}}
@startTime={{this.startTime}}
@features={{this.features}}
@autoloaded={{true}}
/>`
);
assert.equal(component.hasWarning, false, 'it does not have a warning');
assert.equal(component.hasSaveButton, false, 'it does not render the save button');
assert.equal(component.hasTextInput, false, 'it does not render the text input for new license');
assert.equal(component.hasEnterButton, true, 'it renders the button to toggle license form');
let row = component.detailRows.filterBy('rowName', 'License state')[0];
assert.equal(row.rowValue, 'Autoloaded', 'Shows autoloaded status');
});
test('it shows and hides license form when enter and cancel buttons are clicked', async function(assert) {
test('it renders properly for stored license', async function(assert) {
const now = Date.now();
this.set('licenseId', 'test');
this.set('expirationTime', addMinutes(now, 30));
this.set('autoloaded', false);
this.set('startTime', now);
this.set('features', ['HSM', 'Namespaces']);
await render(
hbs`<LicenseInfo @licenseId={{this.licenseId}} @expirationTime={{this.expirationTime}} @startTime={{this.startTime}} @features={{this.features}}/>`
hbs`<LicenseInfo
@licenseId={{this.licenseId}}
@expirationTime={{this.expirationTime}}
@startTime={{this.startTime}}
@features={{this.features}}
@autoloaded={{false}}
/>`
);
await component.enterButton();
assert.equal(component.hasSaveButton, true, 'it does not render the save button');
assert.equal(component.hasTextInput, true, 'it does not render the text input for new license');
assert.equal(component.hasEnterButton, false, 'it renders the button to toggle license form');
await component.cancelButton();
assert.equal(component.hasSaveButton, false, 'it does not render the save button');
assert.equal(component.hasTextInput, false, 'it does not render the text input for new license');
assert.equal(component.hasEnterButton, true, 'it renders the button to toggle license form');
});
test('it calls saveModel when save button is clicked', async function(assert) {
const now = Date.now();
this.set('licenseId', 'temporary');
this.set('expirationTime', addMinutes(now, 30));
this.set('startTime', now);
this.set('features', ['HSM', 'Namespaces']);
this.set('saveModel', sinon.spy());
await render(
hbs`<LicenseInfo @licenseId={{this.licenseId}} @expirationTime={{this.expirationTime}} @startTime={{this.startTime}} @features={{this.features}} @saveModel={{this.saveModel}}/>`
let row = component.detailRows.filterBy('rowName', 'License state')[0];
assert.ok(
row.rowValue.includes(
'Stored licenses will be deprecated in Vault 1.11. We recommend autoloading your license.'
),
'Stored license includes recommendation to autoload'
);
await component.text('ABCDE12345');
await component.saveButton();
assert.ok(this.saveModel.calledOnce);
});
test('it renders Performance Standby as inactive if count is 0', async function(assert) {
@ -136,7 +99,13 @@ module('Integration | Component | license info', function(hooks) {
this.set('features', ['Performance Standby', 'Namespaces']);
await render(
hbs`<LicenseInfo @licenseId={{this.licenseId}} @expirationTime={{this.expirationTime}} @startTime={{this.startTime}} @features={{this.features}} @model={{this.model}}/>`
hbs`<LicenseInfo
@licenseId={{this.licenseId}}
@expirationTime={{this.expirationTime}}
@startTime={{this.startTime}}
@features={{this.features}}
@performanceStandbyCount={{this.model.performanceStandbyCount}}
/>`
);
let row = component.featureRows.filterBy('featureName', 'Performance Standby')[0];

16
ui/tests/pages/components/license-info.js
View File

@ -1,16 +1,10 @@
import { clickable, fillable, text, isPresent, collection } from 'ember-cli-page-object';
import { text, collection } from 'ember-cli-page-object';
export default {
text: fillable('[data-test-text-input]'),
isTemp: isPresent('[data-test-temp-license]'),
hasTextInput: isPresent('[data-test-text-input]'),
saveButton: clickable('[data-test-save-button]'),
hasSaveButton: isPresent('[data-test-save-button]'),
enterButton: clickable('[data-test-enter-button]'),
hasEnterButton: isPresent('[data-test-enter-button]'),
cancelButton: clickable('[data-test-cancel-button]'),
hasWarning: isPresent('[data-test-warning-text]'),
warning: text('[data-test-warning-text]'),
detailRows: collection('[data-test-detail-row]', {
rowName: text('[data-test-row-label]'),
rowValue: text('.column.is-flex'),
}),
featureRows: collection('[data-test-feature-row]', {
featureName: text('[data-test-row-label]'),
featureStatus: text('[data-test-feature-status]'),