Merge pull request #5672 from hashicorp/ui-alerts-update
UI: Update banner and popup alerts
This commit is contained in:
Joshua Ogle
GitHub
commit
1a4249ab0e
|
|
@ -17,6 +17,4 @@ export default Component.extend({
|
|||
alertType: computed('type', function() {
|
||||
return messageTypes([this.get('type')]);
|
||||
}),
|
||||
|
||||
messageClass: 'message-body',
|
||||
});
|
||||
|
|
@ -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')]);
|
||||
}),
|
||||
});
|
||||
|
|
@ -7,7 +7,7 @@ export default FlashMessage.extend({
|
|||
alertType: computed('flash.type', {
|
||||
get() {
|
||||
const flashType = getWithDefault(this, 'flash.type', '');
|
||||
let prefix = 'notification has-border is-';
|
||||
let prefix = 'is-';
|
||||
|
||||
return `${prefix}${flashType}`;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
.global-flash {
|
||||
position: fixed;
|
||||
max-width: 450px;
|
||||
width: 95%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
left: $spacing-s;
|
||||
margin: 10px;
|
||||
max-width: $drawer-width;
|
||||
position: fixed;
|
||||
width: 95%;
|
||||
z-index: 300;
|
||||
|
||||
.notification {
|
||||
.message {
|
||||
box-shadow: $box-shadow-high;
|
||||
margin: 20px;
|
||||
@include until($desktop) {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
.login-form {
|
||||
box-shadow: $box-shadow, $box-shadow-high;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
.message-in-page {
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: $size-10;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,9 +19,7 @@
|
|||
.splash-page-container {
|
||||
margin: $size-2 0;
|
||||
}
|
||||
|
||||
.splash-page-header {
|
||||
padding: $size-6 $size-5;
|
||||
}
|
||||
.splash-page-sub-header {
|
||||
margin: 0 $size-5 $size-6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@
|
|||
.token-expire-warning .content p {
|
||||
padding-right: $size-6;
|
||||
}
|
||||
.token-expire-warning .message-in-page {
|
||||
margin: 0;
|
||||
}
|
||||
.token-expire-warning .message {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
.unseal-warning.message,
|
||||
.unseal-warning .message-body {
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
.unseal-warning.message {
|
||||
margin: -1px -1px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,6 @@
|
|||
@import "./components/loader";
|
||||
@import "./components/login-form";
|
||||
@import "./components/masked-input";
|
||||
@import "./components/message-in-page";
|
||||
@import "./components/namespace-picker";
|
||||
@import "./components/namespace-reminder";
|
||||
@import "./components/page-header";
|
||||
|
|
|
|||
|
|
@ -1,38 +1,113 @@
|
|||
.message {
|
||||
&.is-list {
|
||||
margin: $size-10 0;
|
||||
background: $blue-010;
|
||||
border: 1px solid $blue-100;
|
||||
margin-bottom: $spacing-s;
|
||||
padding: $spacing-s $spacing-m $spacing-m $spacing-s;
|
||||
position: relative;
|
||||
|
||||
.message-icon {
|
||||
color: $blue;
|
||||
margin-right: $spacing-xs;
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
.message-body {
|
||||
color: $yellow-darkest;
|
||||
padding: 0.75rem 1.25rem;
|
||||
.close-button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $grey;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: $spacing-s;
|
||||
top: $spacing-m;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $blue-500;
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.close-button + .message-title {
|
||||
padding-right: $spacing-m;
|
||||
}
|
||||
|
||||
.message-body {
|
||||
border: 0;
|
||||
margin-top: $spacing-xxs;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $size-8;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
margin-top: $spacing-xs;
|
||||
|
||||
a,
|
||||
a:not(.button):not(.file-delete-button):not(.tag) {
|
||||
color: $blue;
|
||||
font-weight: $font-weight-semibold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-left: $spacing-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-highlight {
|
||||
background: $yellow-lightest;
|
||||
.message-body {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px $yellow;
|
||||
color: $yellow-darkest;
|
||||
background: $yellow-010;
|
||||
border: 1px solid $yellow-100;
|
||||
|
||||
.message-icon {
|
||||
color: $yellow-500;
|
||||
}
|
||||
.has-text-highlight,
|
||||
.close-button {
|
||||
color: $yellow;
|
||||
}
|
||||
.title,
|
||||
code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
.content .button {
|
||||
border-color: $yellow;
|
||||
color: $yellow-darkest;
|
||||
|
||||
.message-title {
|
||||
color: $orange-700;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 0;
|
||||
&.is-success {
|
||||
background: $green-010;
|
||||
border: 1px solid $green-100;
|
||||
|
||||
.message-icon {
|
||||
color: $green-500;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $green-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
background: $red-010;
|
||||
border: 1px solid $red-050;
|
||||
|
||||
.message-icon {
|
||||
color: $red-500;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
color: $red-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
.notification {
|
||||
padding: 1rem 2.5rem 1rem 1.5rem;
|
||||
padding: $spacing-m $spacing-m $spacing-m $spacing-s;
|
||||
|
||||
.title {
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
&.has-border {
|
||||
border: 1px solid currentColor;
|
||||
border-left-width: 10px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
// Colors that will eventually be in Structure package
|
||||
|
||||
// Vault Gray
|
||||
$vault-gray-010: #FDFDFE;
|
||||
$vault-gray-050: #F7FAFC;
|
||||
$vault-gray-100: #EBEEF5;
|
||||
$vault-gray-200: #D3DBE6;
|
||||
|
|
@ -15,6 +16,7 @@ $vault-gray: $vault-gray-500;
|
|||
$vault-gray-dark: $vault-gray-700;
|
||||
|
||||
// UI Gray
|
||||
$ui-gray-010: #FBFBFC;
|
||||
$ui-gray-050: #F7F8FA;
|
||||
$ui-gray-100: #EBEEF2;
|
||||
$ui-gray-200: #DCE0E6;
|
||||
|
|
@ -30,6 +32,7 @@ $grey-dark: $ui-gray-700;
|
|||
$grey-darkest: $ui-gray-900;
|
||||
|
||||
// Blue
|
||||
$blue-010: #FBFCFF;
|
||||
$blue-050: #F0F5FF;
|
||||
$blue-100: #BFD4FF;
|
||||
$blue-300: #5B92FF;
|
||||
|
|
@ -43,6 +46,7 @@ $blue-dark: $blue-700;
|
|||
$blue-darkest: $blue-900;
|
||||
|
||||
// Red
|
||||
$red-010: #FDFAFB;
|
||||
$red-050: #F9ECEE;
|
||||
$red-100: #EFC7CC;
|
||||
$red-300: #DB7D88;
|
||||
|
|
@ -56,6 +60,7 @@ $red-dark: $red-700;
|
|||
$red-darkest: $red-900;
|
||||
|
||||
// Green
|
||||
$green-010: #FAFDFA;
|
||||
$green-050: #ECF7ED;
|
||||
$green-100: #C6E9C9;
|
||||
$green-300: #7ACC81;
|
||||
|
|
@ -69,6 +74,7 @@ $green-dark: $green-700;
|
|||
$green-darkest: $green-900;
|
||||
|
||||
// Orange
|
||||
$orange-010: #FFFCFA;
|
||||
$orange-050: #FEF4EC;
|
||||
$orange-100: #FDE0C8;
|
||||
$orange-300: #FBB77F;
|
||||
|
|
@ -82,6 +88,7 @@ $orange-dark: $orange-700;
|
|||
$orange-darkest: $orange-900;
|
||||
|
||||
// Yellow
|
||||
$yellow-010: #FFFDF6;
|
||||
$yellow-050: #FFFBED;
|
||||
$yellow-100: #FDEEBA;
|
||||
$yellow-300: #FBD95E;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<div data-test-flash-message=true>
|
||||
<div class="columns is-mobile is-variable is-1">
|
||||
<div class="column is-narrow message-icon">
|
||||
<ICon
|
||||
@glyph="{{alertType.glyph}}"
|
||||
@class="{{alertType.glyphClass}}"
|
||||
@size="20"
|
||||
@excludeIconClass="true"
|
||||
/>
|
||||
</div>
|
||||
{{#if yieldWithoutColumn}}
|
||||
{{yield}}
|
||||
{{else}}
|
||||
<div class="column">
|
||||
<div class="message-title">
|
||||
{{or title alertType.text}}
|
||||
</div>
|
||||
{{#if message}}
|
||||
<p class="message-body">
|
||||
{{message}}
|
||||
</p>
|
||||
{{/if}}
|
||||
{{#if hasBlock}}
|
||||
<p class="message-actions">
|
||||
{{yield}}
|
||||
</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<ICon
|
||||
@glyph="{{alertType.glyph}}"
|
||||
@class="{{alertType.glyphClass}}"
|
||||
@size="16"
|
||||
/>
|
||||
<p class="{{textClass}}">
|
||||
{{message}}
|
||||
</p>
|
||||
|
|
@ -32,9 +32,11 @@
|
|||
<form {{action "saveCA" on="submit"}} data-test-generate-root-cert="true">
|
||||
<NamespaceReminder @mode="save" @noun="PKI change" />
|
||||
{{#if model.uploadPemBundle}}
|
||||
{{#message-in-page type="warning" data-test-warning=true}}
|
||||
<em>If you have already set a certificate and key, they will be overridden with the successful saving of a new <code>PEM bundle</code>.</em>
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="If you have already set a certificate and key, they will be overridden with the successful saving of a new PEM bundle."
|
||||
data-test-warning
|
||||
/>
|
||||
{{/if}}
|
||||
{{partial "partials/form-field-groups-loop"}}
|
||||
<div class="field is-grouped is-grouped-split box is-fullwidth is-bottomless">
|
||||
|
|
@ -67,9 +69,11 @@
|
|||
{{/if}}
|
||||
{{else if signIntermediate}}
|
||||
{{#if (or model.certificate)}}
|
||||
{{#message-in-page data-test-warning type="warning"}}
|
||||
If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint.
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="If using this for an Intermediate CA in Vault, copy the certificate below and write it to the PKI mount being used as an intermediate using the `Set signed Intermediate` endpoint."
|
||||
data-test-warning
|
||||
/>
|
||||
{{#each model.attrs as |attr|}}
|
||||
{{info-table-row data-test-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(get model attr.name)}}
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,11 @@
|
|||
<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
|
||||
{{message-error model=model}}
|
||||
{{#unless model.isError}}
|
||||
{{#message-in-page type="warning" data-test-warning=true}}
|
||||
You will not be able to access this information later, so please copy the information below.
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="You will not be able to access this information later, so please copy the information below."
|
||||
data-test-warning
|
||||
/>
|
||||
{{/unless}}
|
||||
{{#each model.attrs as |attr|}}
|
||||
{{#if (eq attr.type "object")}}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
<NamespaceReminder @mode={{mode}} @noun={{lowercase (humanize model.identityType)}} />
|
||||
{{message-error model=model}}
|
||||
{{#if (eq mode "merge")}}
|
||||
{{#message-in-page type="warning"}}
|
||||
Metadata on merged entities is not preserved, you will need to recreate it on the entity you merge to.
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="Metadata on merged entities is not preserved, you will need to recreate it on the entity you merge to."
|
||||
/>
|
||||
{{/if}}
|
||||
{{#each model.fields as |attr|}}
|
||||
{{form-field data-test-field attr=attr model=model}}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
{{#if model.disabled}}
|
||||
<div class="box is-shadowless is-marginless">
|
||||
{{#message-in-page type="warning" yieldWithoutColumn=true messageClass="message-body is-marginless" data-test-disabled-warning=true}}
|
||||
<div class="column">
|
||||
<strong>Attention</strong> This {{model.identityType}} is disabled. All associated tokens cannot be used, but are not revoked.
|
||||
</div>
|
||||
<div class="box is-shadowless is-marginless is-fullwidth">
|
||||
{{#if model.disabled}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@title="Attention"
|
||||
@message="This {{model.identityType}} is disabled. All associated tokens cannot be used, but are not revoked."
|
||||
yieldWithoutColumn
|
||||
data-test-disabled-warning>
|
||||
{{#if model.canEdit}}
|
||||
<div class="column is-flex-v-centered is-narrow">
|
||||
<button type="button" class="button is-orange box" {{action "enable" model}} data-test-enable=true>
|
||||
Enable
|
||||
</button>
|
||||
</div>
|
||||
{{#link-to 'vault.cluster.access.identity.show' invokeAction=(action 'enable' model) data-test-enable=true}}
|
||||
Enable
|
||||
{{/link-to}}
|
||||
{{/if}}
|
||||
{{/message-in-page}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{info-table-row label="Name" value=model.name data-test-identity-item-name=true}}
|
||||
{{info-table-row label="Type" value=model.type }}
|
||||
{{info-table-row label="ID" value=model.id }}
|
||||
{{#info-table-row label="Merged Ids" value=model.mergedEntityIds }}
|
||||
<div>
|
||||
{{#each model.mergedEntityIds as |id|}}
|
||||
<div>
|
||||
<code class="has-text-black">{{id}}</code>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/info-table-row}}
|
||||
{{#info-table-row label="Created" value=model.creationTime}}
|
||||
<time datetime={{model.creationTime}} title={{model.creationTime}}>
|
||||
{{moment-format model.creationTime 'MMM DD, YYYY [at] h:mm a'}}
|
||||
</time>
|
||||
{{/info-table-row}}
|
||||
{{#info-table-row label="Last Updated" value=model.lastUpdateTime}}
|
||||
<time datetime={{model.lastUpdateTime}} title={{model.lastUpdateTime}}>
|
||||
{{moment-format model.lastUpdateTime 'MMM DD, YYYY [at] h:mm a'}}
|
||||
</time>
|
||||
{{/info-table-row}}
|
||||
</AlertBanner>
|
||||
{{/if}}
|
||||
{{info-table-row label="Name" value=model.name data-test-identity-item-name=true}}
|
||||
{{info-table-row label="Type" value=model.type }}
|
||||
{{info-table-row label="ID" value=model.id }}
|
||||
{{#info-table-row label="Merged Ids" value=model.mergedEntityIds }}
|
||||
<div>
|
||||
{{#each model.mergedEntityIds as |id|}}
|
||||
<div>
|
||||
<code class="has-text-black">{{id}}</code>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/info-table-row}}
|
||||
{{#info-table-row label="Created" value=model.creationTime}}
|
||||
<time datetime={{model.creationTime}} title={{model.creationTime}}>
|
||||
{{moment-format model.creationTime 'MMM DD, YYYY [at] h:mm a'}}
|
||||
</time>
|
||||
{{/info-table-row}}
|
||||
{{#info-table-row label="Last Updated" value=model.lastUpdateTime}}
|
||||
<time datetime={{model.lastUpdateTime}} title={{model.lastUpdateTime}}>
|
||||
{{moment-format model.lastUpdateTime 'MMM DD, YYYY [at] h:mm a'}}
|
||||
</time>
|
||||
{{/info-table-row}}
|
||||
</div>
|
||||
|
|
@ -51,7 +51,10 @@
|
|||
</div>
|
||||
{{/each}}
|
||||
{{#if kvHasDuplicateKeys}}
|
||||
{{#message-in-page type="warning" class="is-marginless" data-test-duplicate-error-warnings=true}}
|
||||
More than one key shares the same name. Please be sure to have unique key names or some data may be lost when saving.
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="More than one key shares the same name. Please be sure to have unique key names or some data may be lost when saving."
|
||||
@class="is-marginless"
|
||||
data-test-duplicate-error-warnings
|
||||
/>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,14 @@
|
|||
</PageHeader>
|
||||
<MessageError @model={{model}} />
|
||||
{{#if isTemporary}}
|
||||
<section class="box is-sideless">
|
||||
<MessageInPage data-test-cluster-status @type="warning" @class="license-warning" data-test-warning-text>
|
||||
Your temporary license expires {{moment-from-now expirationTime}} and your vault will seal. Please enter a valid license below.
|
||||
</MessageInPage>
|
||||
<section class="box is-sideless is-fullwidth">
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="Your temporary license expires {{moment-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">
|
||||
|
|
@ -27,7 +31,7 @@
|
|||
</form>
|
||||
</section>
|
||||
{{else}}
|
||||
<section class="box is-sideless">
|
||||
<section class="box is-sideless is-fullwidth">
|
||||
<span class="title is-5">Details</span>
|
||||
{{#if showForm}}
|
||||
<form {{action "saveModel" text on="submit"}}>
|
||||
|
|
@ -61,7 +65,7 @@
|
|||
{{/if}}
|
||||
</section>
|
||||
{{/if}}
|
||||
<section class="box is-sideless is-marginless is-shadowless">
|
||||
<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|}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
{{#if displayErrors.length}}
|
||||
{{#each displayErrors as |error|}}
|
||||
{{#message-in-page type="danger" data-test-error=true}}
|
||||
{{error}}
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="danger"
|
||||
@message={{error}}
|
||||
data-test-error
|
||||
/>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
<div class="{{messageClass}} message-in-page" data-test-flash-message=true>
|
||||
<div class="columns is-mobile is-variable is-1">
|
||||
<div class="column is-narrow">
|
||||
{{i-con
|
||||
glyph=alertType.glyph
|
||||
class=alertType.glyphClass
|
||||
size=22
|
||||
excludeIconClass=true
|
||||
}}
|
||||
</div>
|
||||
{{#if yieldWithoutColumn}}
|
||||
{{yield}}
|
||||
{{else}}
|
||||
<div class="column">
|
||||
<p>
|
||||
<strong>{{alertType.text}}</strong>
|
||||
{{yield}}
|
||||
</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -149,15 +149,22 @@
|
|||
</form>
|
||||
{{else}}
|
||||
<form {{action 'onSubmit' (hash key=key) on="submit"}} id="shamir">
|
||||
<div class="box is-shadowless no-padding-bottom is-marginless">
|
||||
{{message-error errors=errors}}
|
||||
{{#if hasBlock}}
|
||||
{{yield}}
|
||||
{{else}}
|
||||
<p>{{formText}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="box is-marginless is-shadowless">
|
||||
{{#if errors}}
|
||||
<div class="box is-shadowless is-marginless no-padding-top is-fullwidth">
|
||||
{{message-error errors=errors}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if hasBlock}}
|
||||
<div class="box is-shadowless is-marginless no-padding-top is-fullwidth">
|
||||
{{yield}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if formText}}
|
||||
<div class="box is-shadowless is-marginless no-padding-top is-fullwidth">
|
||||
{{formText}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="field">
|
||||
<label for="key" class="is-label">
|
||||
Master Key Portion
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@
|
|||
</label>
|
||||
{{/if}}
|
||||
{{#if warning}}
|
||||
{{#message-in-page type="warning"}}
|
||||
{{warning}}
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message={{warning}}
|
||||
/>
|
||||
{{/if}}
|
||||
{{#each inputList as |data index|}}
|
||||
<div class="field is-grouped" data-test-string-list-row="{{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">
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@
|
|||
{{message-error model=model}}
|
||||
<NamespaceReminder @mode={{mode}} @noun="AWS role" />
|
||||
{{#if (gt model.credentialTypes.length 1)}}
|
||||
{{#message-in-page type="warning"}}
|
||||
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-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@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|}}
|
||||
{{form-field data-test-field attr=attr model=model}}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
|
||||
{{#if (gt model.credentialTypes.length 1)}}
|
||||
{{#message-in-page type="warning"}}
|
||||
This role has more than one <code>credential_type</code>, currently: <code>{{join ', ' model.credentialTypes}}</code>.
|
||||
When you next edit this role, you will have to choose a single credential type.
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="This role has more than one credential_type, currently: {{join ', ' model.credentialTypes}}.
|
||||
When you next edit this role, you will have to choose a single credential type."
|
||||
/>
|
||||
{{/if}}
|
||||
{{#each model.fields as |attr|}}
|
||||
{{#if (eq attr.name "policyDocument")}}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
<NamespaceReminder @mode="edit" @noun="secret" />
|
||||
{{#if (not-eq model.selectedVersion.version model.currentVersion)}}
|
||||
<div class="form-section">
|
||||
<MessageInPage @type="warning" @class="is-marginless">
|
||||
You are creating a new version based on data from Version {{model.selectedVersion.version}}. The current version for <code>{{model.id}}</code> is Version {{model.currentVersion}}.
|
||||
</MessageInPage>
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@class="is-marginless"
|
||||
@message="You are creating a new version based on data from Version {{model.selectedVersion.version}}. The current version for {{model.id}} is Version {{model.currentVersion}}."
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
<SecretEditDisplay
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="{{size}}" height="{{size}}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M19,3 C20.1,3 21,3.9 21,5 L21,19 C21,20.1 20.1,21 19,21 L5,21 C3.9,21 3,20.1 3,19 L3,5 C3,3.9 3.9,3 5,3 L19,3 Z M19,5 L5,5 L5,19 L19,19 L19,5 Z M15,10 C15,11.66 13.66,13 12,13 C10.34,13 9,11.66 9,10 C9,8.34 10.34,7 12,7 C13.66,7 15,8.34 15,10 Z M6,18 C6,16 10,14.9 12,14.9 C14,14.9 18,16 18,18 L18,19 L6,19 L6,18 Z"/></svg>
|
||||
|
After Width: | Height: | Size: 471 B |
|
|
@ -85,15 +85,26 @@
|
|||
{{#if flash.componentName}}
|
||||
{{component flash.componentName content=flash.content}}
|
||||
{{else}}
|
||||
<h5 class="title is-5 has-text-{{if (eq flash.type 'warning') 'dark-yellow' flash.type}}">
|
||||
{{get (message-types flash.type) "text"}}
|
||||
</h5>
|
||||
<span data-test-flash-message-body=true>
|
||||
{{flash.message}}
|
||||
</span>
|
||||
<button type="button" class="delete" {{action close}}>
|
||||
{{i-con excludeIconClass=true glyph="close" aria-label="Close"}}
|
||||
</button>
|
||||
<div class="message is-{{flash.type}}">
|
||||
<div class="columns is-mobile is-variable is-1">
|
||||
<div class="column is-narrow message-icon">
|
||||
<ICon @glyph="{{get (message-types flash.type) "glyph"}}" @size="20" @excludeIconClass="true" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<button type="button" class="close-button" {{action close}}>
|
||||
{{i-con excludeIconClass=true glyph="close" aria-label="Close"}}
|
||||
</button>
|
||||
<div class="message-title">
|
||||
{{get (message-types flash.type) "text"}}
|
||||
</div>
|
||||
{{#if flash.message}}
|
||||
<p class="message-body">
|
||||
{{flash.message}}
|
||||
</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/flash-message}}
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -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"}}
|
||||
|
|
|
|||
|
|
@ -25,9 +25,13 @@
|
|||
</ul>
|
||||
</nav>
|
||||
{{#if (eq action 'promote')}}
|
||||
<MessageInPage data-test-cluster-status @type="warning" @class="unseal-warning">
|
||||
<em>Caution</em>: Vault replication is not designed for active-active usage and enabling two performance primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected.
|
||||
</MessageInPage>
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@title="Caution"
|
||||
@message="Vault replication is not designed for active-active usage and enabling two performance primaries should never be done, as it can lead to data loss if they or their secondaries are ever reconnected."
|
||||
@class="unseal-warning"
|
||||
data-test-cluster-status
|
||||
/>
|
||||
<ReplicationActions
|
||||
@replicationMode="dr"
|
||||
@selectedAction="promote"
|
||||
|
|
|
|||
|
|
@ -32,9 +32,11 @@
|
|||
|
||||
{{#if model.signedKey}}
|
||||
<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
|
||||
{{#message-in-page type="warning" data-test-warning=true}}
|
||||
You will not be able to access this information later, so please copy the information below.
|
||||
{{/message-in-page}}
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@message="You will not be able to access this information later, so please copy the information below."
|
||||
data-test-warning
|
||||
/>
|
||||
{{#each model.attrs as |attr|}}
|
||||
{{#if (eq attr.type "object")}}
|
||||
{{info-table-row label=(capitalize (or attr.options.label (humanize (dasherize attr.name)))) value=(stringify (get model attr.name))}}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,13 @@
|
|||
</h1>
|
||||
</Page.header>
|
||||
<Page.content>
|
||||
<MessageInPage data-test-cluster-status @type="warning" @class="unseal-warning">
|
||||
{{capitalize model.name}} is {{if model.unsealed 'unsealed' 'sealed'}}
|
||||
</MessageInPage>
|
||||
<AlertBanner
|
||||
@type="warning"
|
||||
@title="{{capitalize model.name}} is {{if model.unsealed 'unsealed' 'sealed'}}"
|
||||
@message="You can unseal the vault by entering a portion of the master key. Once all portions are entered, the vault will be unsealed."
|
||||
@class="unseal-warning"
|
||||
data-test-cluster-status
|
||||
/>
|
||||
<ShamirFlow
|
||||
@action="unseal"
|
||||
@onUpdate={{action 'setUnsealState'}}
|
||||
|
|
@ -17,10 +21,6 @@
|
|||
@isComplete={{action 'isUnsealed'}}
|
||||
@threshold={{model.sealThreshold}}
|
||||
@progress={{model.sealProgress}}
|
||||
>
|
||||
<p class="has-text-grey-dark">
|
||||
Unseal the vault by entering a portion of the master key. Once all portions are entered, the vault will be unsealed.
|
||||
</p>
|
||||
</ShamirFlow>
|
||||
/>
|
||||
</Page.content>
|
||||
</SplashPage>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue