mirror of
https://github.com/optim-enterprises-bv/vault.git
synced 2025-11-01 19:17:58 +00:00
Add Inline Alert component
This commit is contained in:
Joshua Ogle
22
ui/app/components/alert-inline.js
Normal file
22
ui/app/components/alert-inline.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import Component from '@ember/component';
|
||||
import { computed } from '@ember/object';
|
||||
|
||||
import { messageTypes } from 'vault/helpers/message-types';
|
||||
|
||||
export default Component.extend({
|
||||
type: null,
|
||||
|
||||
classNames: ['message-inline'],
|
||||
|
||||
textClass: computed('type', function() {
|
||||
if (this.get('type') == 'danger') {
|
||||
return messageTypes([this.get('type')]).glyphClass;
|
||||
}
|
||||
|
||||
return
|
||||
}),
|
||||
|
||||
alertType: computed('type', function() {
|
||||
return messageTypes([this.get('type')]);
|
||||
}),
|
||||
});
|
||||
@@ -96,3 +96,18 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-inline {
|
||||
display: flex;
|
||||
margin: -$spacing-xs 0 $spacing-l;
|
||||
|
||||
.icon {
|
||||
flex: 0;
|
||||
margin: 0 $spacing-xxs 0 0;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
.p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
8
ui/app/templates/components/alert-inline.hbs
Normal file
8
ui/app/templates/components/alert-inline.hbs
Normal file
@@ -0,0 +1,8 @@
|
||||
<ICon
|
||||
@glyph="{{alertType.glyph}}"
|
||||
@class="{{alertType.glyphClass}}"
|
||||
@size="16"
|
||||
/>
|
||||
<p class="{{textClass}}">
|
||||
{{message}}
|
||||
</p>
|
||||
@@ -125,9 +125,10 @@
|
||||
/>
|
||||
{{#if attr.options.validationAttr}}
|
||||
{{#if (and (get model valuePath) (not (get model attr.options.validationAttr)))}}
|
||||
<p class="has-text-danger">
|
||||
{{attr.options.invalidMessage}}
|
||||
</p>
|
||||
<AlertInline
|
||||
@type="danger"
|
||||
@message={{attr.options.invalidMessage}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{{#each displayErrors as |error|}}
|
||||
<AlertBanner
|
||||
@type="danger"
|
||||
@message="{{error}}"
|
||||
@message={{error}}
|
||||
data-test-error
|
||||
/>
|
||||
{{/each}}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
{{#if warning}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="{{warning}}"
|
||||
@message={{warning}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{#each inputList as |data index|}}
|
||||
|
||||
@@ -7,14 +7,18 @@
|
||||
(not model.performance.replicationDisabled)
|
||||
)
|
||||
}}
|
||||
<p data-test-demote-warning>
|
||||
<em class="has-text-danger">Caution</em>: Demoting this DR primary cluster
|
||||
would result in a DR secondary and in that mode Vault is read-only. This
|
||||
cluster is also currently operating as a Performance
|
||||
{{capitalize model.performance.modeForUrl}}, demoting it will leave your
|
||||
replication setup without a performance primary cluster until a new
|
||||
cluster is promoted.
|
||||
</p>
|
||||
|
||||
<div data-test-demote-warning>
|
||||
<AlertInline
|
||||
@type="danger"
|
||||
@message="Demoting this DR primary cluster
|
||||
would result in a DR secondary and in that mode Vault is read-only. This
|
||||
cluster is also currently operating as a Performance
|
||||
capitalize model.performance.modeForUrl}}, demoting it will leave your
|
||||
replication setup without a performance primary cluster until a new
|
||||
cluster is promoted."
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
<p>
|
||||
Demote this {{replicationDisplayMode}} primary cluster to a {{replicationDisplayMode}} secondary. The resulting secondary cluster will not
|
||||
|
||||
@@ -31,10 +31,10 @@
|
||||
The cluster will no longer be able to connect to the primary.
|
||||
{{/if}}
|
||||
</p>
|
||||
<p>
|
||||
<em class="has-text-danger">Caution</em>: re-enabling this node as a primary or secondary will
|
||||
change its cluster ID.
|
||||
</p>
|
||||
<AlertInline
|
||||
@type="danger"
|
||||
@message="Caution: re-enabling this node as a primary or secondary will change its cluster ID."
|
||||
/>
|
||||
<p>
|
||||
In the secondary case this means a wipe of the
|
||||
underlying storage when connected to a primary, and in the primary case,
|
||||
|
||||
@@ -141,9 +141,10 @@
|
||||
</select>
|
||||
</div>
|
||||
{{#if (eq mode 'secondary')}}
|
||||
<p class="help">
|
||||
<em class="has-text-danger">Caution</em>: this will <em>immediately</em> clear <strong>all</strong> data in this cluster!
|
||||
</p>
|
||||
<AlertInline
|
||||
@type="warning"
|
||||
@message="This will immediately clear all data in this cluster!"
|
||||
/>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if (eq mode 'primary')}}
|
||||
|
||||
@@ -45,10 +45,11 @@
|
||||
Force promotion of this cluster
|
||||
</label>
|
||||
</div>
|
||||
<p class="help has-text-grey">
|
||||
<em class="has-text-danger">Caution</em>: Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
|
||||
promotes the cluster even if certain safety checks fail.
|
||||
</p>
|
||||
<AlertInline
|
||||
@type="warning"
|
||||
@message="Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
|
||||
promotes the cluster even if certain safety checks fail."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
@@ -74,10 +75,11 @@
|
||||
</h4>
|
||||
<div class="content">
|
||||
<p>Promote the cluster to primary.</p>
|
||||
<p>
|
||||
<em class="has-text-danger">Caution</em>: Vault replication is not designed for active-active usage and enabling two primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected.
|
||||
If the cluster has a primary, be sure to demote it before promoting a secondary.
|
||||
</p>
|
||||
<AlertInline
|
||||
@type="warning"
|
||||
@message="Vault replication is not designed for active-active usage and enabling two primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected.
|
||||
If the cluster has a primary, be sure to demote it before promoting a secondary."
|
||||
/>
|
||||
<div class="field">
|
||||
<label for="primary_cluster_addr" class="is-label">
|
||||
Primary cluster address <em class="is-optional">(optional)</em>
|
||||
@@ -101,10 +103,11 @@
|
||||
Force promotion of this cluster
|
||||
</label>
|
||||
</div>
|
||||
<p class="help has-text-grey">
|
||||
<em class="has-text-danger">Caution</em>: Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
|
||||
promotes the cluster even if certain safety checks fail.
|
||||
</p>
|
||||
<AlertInline
|
||||
@type="warning"
|
||||
@message="Forcing promotion could result in data loss if data isn't fully replicated. Force promotion
|
||||
promotes the cluster even if certain safety checks fail."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
{{#if (gt model.credentialTypes.length 1)}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="This role has more than one <code>credential_type</code>, currently: <code>{{join ', ' model.credentialTypes}}</code>.
|
||||
Multiple credential types is deprecated and you must choose one in order to save this role."
|
||||
@message="This role has more than one credential_type, currently: {{join ', ' model.credentialTypes}}.
|
||||
Multiple credential types is deprecated and you must choose one in order to save this role."
|
||||
/>
|
||||
{{/if}}
|
||||
{{#each (if (eq mode 'edit') (drop 1 model.fields) model.fields) as |attr|}}
|
||||
|
||||
@@ -11,34 +11,28 @@
|
||||
{{/unless}}
|
||||
|
||||
<div class="box is-sideless is-fullwidth is-marginless">
|
||||
<div class="box">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-half has-text-centered">
|
||||
{{#if (eq model.httpStatus 400)}}
|
||||
<p class="box is-shadowless has-text-danger" data-test-lease-error="true">
|
||||
{{i-con glyph='close'}}
|
||||
<code class="has-text-danger">{{model.keyId}}</code> is not a valid lease ID
|
||||
</p>
|
||||
{{else if (eq model.httpStatus 404)}}
|
||||
<p class="message">
|
||||
Unable to find lease for the <code>id</code>: <code>{{model.keyId}}</code>. Try going back to the
|
||||
{{#link-to "vault.cluster.access.leases"}}lookup{{/link-to}}
|
||||
and re-entering the <code>id</code>.
|
||||
</p>
|
||||
{{else if (eq model.httpStatus 403)}}
|
||||
<p class="message">
|
||||
You don't have access to <code>{{model.keyId}}</code>. If you think you've reached this page in error, please contact your administrator.
|
||||
</p>
|
||||
{{else}}
|
||||
{{#each model.errors as |error|}}
|
||||
<p class="message">
|
||||
{{error}}
|
||||
</p>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if (eq model.httpStatus 400)}}
|
||||
<AlertBanner
|
||||
@type="danger"
|
||||
@message="{{model.keyId}} is not a valid lease ID"
|
||||
/>
|
||||
{{else if (eq model.httpStatus 404)}}
|
||||
<p class="message">
|
||||
Unable to find lease for the <code>id</code>: <code>{{model.keyId}}</code>. Try going back to the
|
||||
{{#link-to "vault.cluster.access.leases"}}lookup{{/link-to}}
|
||||
and re-entering the <code>id</code>.
|
||||
</p>
|
||||
{{else if (eq model.httpStatus 403)}}
|
||||
<p class="message">
|
||||
You don't have access to <code>{{model.keyId}}</code>. If you think you've reached this page in error, please contact your administrator.
|
||||
</p>
|
||||
{{else}}
|
||||
{{#each model.errors as |error|}}
|
||||
<p class="message">
|
||||
{{error}}
|
||||
</p>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="field is-grouped box is-fullwidth is-bottomless">
|
||||
{{#link-to "vault.cluster.access.leases" class="button"}}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
</p.levelLeft>
|
||||
</PageHeader>
|
||||
|
||||
<form class="" {{ action "savePolicy" model on="submit"}}>
|
||||
<form {{ action "savePolicy" model on="submit"}}>
|
||||
<div class="box is-bottomless is-fullwidth is-marginless">
|
||||
{{message-error model=model}}
|
||||
<NamespaceReminder @mode="create" @noun="policy" />
|
||||
|
||||
17
ui/tests/integration/components/alert-inline-test.js
Normal file
17
ui/tests/integration/components/alert-inline-test.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { render } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
module('Integration | Component | alert-inline', function(hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test('it renders', async function(assert) {
|
||||
// Set any properties with this.set('myProperty', 'value');
|
||||
// Handle any actions with this.set('myAction', function(val) { ... });
|
||||
|
||||
await render(hbs`{{alert-inline type="danger" message="test message"}}`);
|
||||
|
||||
assert.equal(this.element.textContent.trim(), 'test message');
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,6 @@
|
||||
import { clickable, collection, fillable, text, value } from 'ember-cli-page-object';
|
||||
import fields from './form-field';
|
||||
import errorText from './message-in-page';
|
||||
import errorText from './alert-banner';
|
||||
|
||||
export default {
|
||||
...fields,
|
||||
|
||||
Reference in New Issue
Block a user