Skip to content

Commit

Permalink
Replication Management Sidebranch: Replication Action Disable (#9061)
Browse files Browse the repository at this point in the history
Set up dr-secondary management page with new action flow

* Create confirmation-modal component

* Refactor replication-dr-secondary splash page to replication manage page

* Refactor replication-action-disable component to use confirmation modal

* Add details/manage tab to replication-dr-secondary section
  • Loading branch information
chelshaw authored May 29, 2020
1 parent 83c8944 commit 585ef4a
Show file tree
Hide file tree
Showing 14 changed files with 350 additions and 195 deletions.
13 changes: 11 additions & 2 deletions ui/app/styles/components/action-block.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
display: grid;
padding: $spacing-m $spacing-l;
line-height: inherit;
grid-gap: $spacing-m;

@include until($mobile) {
@include stacked-grid();
Expand All @@ -20,7 +21,7 @@

.action-block-info {
@include until($mobile) {
@include stacked-grid();
@include stacked-content();
}
}

Expand All @@ -42,17 +43,25 @@
}
}

/* Action Block Grid */
.replication-actions-grid-layout {
display: flex;
flex-wrap: wrap;
margin: $spacing-m 0;
@include until($tablet) {
display: block;
}
}

.replication-actions-grid-item {
flex-basis: 50%;
padding: 5px;
padding: $spacing-s;
}

.replication-actions-grid-item .action-block {
height: 100%;
width: 100%;
@include until($tablet) {
height: inherit;
}
}
22 changes: 22 additions & 0 deletions ui/app/styles/components/modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@
}
}

.modal-card-title.title {
display: flex;
align-items: center;
}

pre {
background-color: inherit;
}
Expand All @@ -52,3 +57,20 @@ pre {
color: $yellow-dark;
}
}

.modal-confirm-section .is-help {
color: $grey;
margin: $spacing-xxs 0;
strong {
color: inherit;
}
}

.modal-confirm-section {
margin: $spacing-xl 0 $spacing-m;
}

.modal-card-foot-outlined {
background: #f7f8fa;
border-top: 1px solid #bac1cc;
}
5 changes: 5 additions & 0 deletions ui/app/styles/core/helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -158,3 +158,8 @@
.has-border-danger {
border: 1px solid $danger;
}

ul.bullet {
list-style: disc;
padding-left: $spacing-m;
}
74 changes: 37 additions & 37 deletions ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
<section class="section">
<div class="container is-widescreen">
<ReplicationPage @model={{model}} as |Page|>
<Page.header
@showTabs={{false}}
<Page.header
@showTabs={{true}}
/>
{{#if Page.isDisabled}}
<EmptyState
@title="Disaster Recovery secondary not set up"
@message={{Page.message}}
@icon="alert-circle-outline"
@bottomBorder={{true}}
>
<nav class="breadcrumb">
<ul class="is-grouped-split">
<li>
{{#link-to "vault.cluster.secrets.backends" }}
<span class="sep"/>
Go back
{{/link-to}}
</li>
<li>
<LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
Need help?
</LearnLink>
</li>
</ul>
</nav>
</EmptyState>
{{else}}
<Page.dashboard
{{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
@componentToRender='replication-secondary-card' as |Dashboard|>
<Dashboard.card
@title="States"
/>
{{#if Page.isDisabled}}
<EmptyState
@title="Disaster Recovery secondary not set up"
@message={{Page.message}}
@icon="alert-circle-outline"
@bottomBorder={{true}}
>
<nav class="breadcrumb">
<ul class="is-grouped-split">
<li>
{{#link-to "vault.cluster.secrets.backends" }}
<span class="sep"/>
Go back
{{/link-to}}
</li>
<li>
<LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
Need help?
</LearnLink>
</li>
</ul>
</nav>
</EmptyState>
{{else}}
<Page.dashboard
{{!-- passing in component to render so that the yielded components are flexible based on the dashboard --}}
@componentToRender='replication-secondary-card' as |Dashboard|>
<Dashboard.card
@title="States"
/>
<Dashboard.card
@title="Primary cluster"
/>
<Dashboard.rows/>
</Page.dashboard>
<Dashboard.card
@title="Primary cluster"
/>
<Dashboard.rows/>
</Page.dashboard>
{{/if}}
</ReplicationPage>
</div>
Expand Down
100 changes: 39 additions & 61 deletions ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
Original file line number Diff line number Diff line change
@@ -1,62 +1,40 @@
<SplashPage as |Page|>
<Page.header>
<h1 class="title is-4">
Disaster Recovery secondary is&nbsp;enabled
</h1>
</Page.header>
<Page.content>
<nav class="tabs sub-nav is-marginless">
<ul>
<li class="{{if (eq action '') 'is-active'}}">
{{#link-to 'vault.cluster.replication-dr-promote' (query-params action='')}}
Operation token
{{/link-to}}
</li>
<li class="{{if (eq action 'update') 'is-active'}}">
{{#link-to 'vault.cluster.replication-dr-promote' (query-params action='update')}}
Update primary
{{/link-to}}
</li>
<li class="{{if (eq action 'promote') 'is-active'}}">
{{#link-to 'vault.cluster.replication-dr-promote' (query-params action='promote')}}
Promote
{{/link-to}}
</li>
</ul>
</nav>
{{#if (eq action 'promote')}}
<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
<section class="section">
<div class="container is-widescreen">
<ReplicationPage @model={{model}} as |Page|>
<Page.header
@showTabs={{true}}
/>
<ReplicationActions
@replicationMode="dr"
@selectedAction="promote"
@model={{model}}
/>
{{/if}}
{{#if (eq action 'update')}}
<ReplicationActions
@replicationMode="dr"
@selectedAction="update-primary"
@model={{model}}
/>
{{/if}}
{{#unless action}}
<ShamirFlow
@action="generate-dr-operation-token"
@buttonText="Promote cluster"
@fetchOnInit=true
@generateAction=true
>
<p>
Generate an Operation Token by entering a portion of the master key.
Once all portions are entered, the generated operation token may be used to manage your secondary Disaster Recovery cluster.
</p>
</ShamirFlow>
{{/unless}}
</Page.content>
</SplashPage>
{{#if Page.isDisabled}}
<EmptyState
@title="Disaster Recovery secondary not set up"
@message={{Page.message}}
@icon="alert-circle-outline"
@bottomBorder={{true}}
>
<nav class="breadcrumb">
<ul class="is-grouped-split">
<li>
{{#link-to "vault.cluster.secrets.backends" }}
<span class="sep"/>
Go back
{{/link-to}}
</li>
<li>
<LearnLink @path="/vault/operations/ops-disaster-recovery" @class="has-text-grey">
Need help?
</LearnLink>
</li>
</ul>
</nav>
</EmptyState>
{{else}}
<section>
<ReplicationActions
@replicationMode="dr"
@model={{model}}
/>
</section>
{{/if}}
</ReplicationPage>
</div>
</section>
35 changes: 35 additions & 0 deletions ui/lib/core/addon/components/confirmation-modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/**
* @module ConfirmationModal
* ConfirmationModal components are used to provide an alternative to ConfirmationButton that automatically prompts the user to fill in confirmation text before they can continue with a potentially destructive action. It is built off the Modal component
*
* @example
* ```js
* <ConfirmationModal
* @onConfirm={action "destructiveAction"}
* @title="Do Dangerous Thing?"
* @isActive={{isModalActive}}
* @onClose={{action (mut isModalActive) false}}
* />
* ```
* @param {function} onConfirm - onConfirm is the action that happens when user clicks onConfirm after filling in the confirmation block
* @param {boolean} isActive - Controls whether the modal is "active" eg. visible or not.
* @param {string} title - Title of the modal
* @param {function} onClose - specify what to do when user attempts to close modal
* @param {string} [buttonText=Confirm] - Button text on the confirm button
* @param {string} [confirmText=Yes] - The confirmation text that the user must type before continuing
* @param {string} [buttonClass=is-danger] - extra class to add to confirm button (eg. "is-danger")
* @param {sting} [type=warning] - Applies message-type styling to header. Override to default with empty string
* @param {string} [toConfirmMsg] - Finishes the sentence "Type YES to confirm ..."
*/

import Component from '@ember/component';
import layout from '../templates/components/confirmation-modal';

export default Component.extend({
layout,
buttonClass: 'is-danger',
buttonText: 'Confirm',
confirmText: 'Yes',
type: 'warning',
toConfirmMsg: '',
});
46 changes: 46 additions & 0 deletions ui/lib/core/addon/templates/components/confirmation-modal.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<Modal
@title={{title}}
@onClose={{onClose}}
@isActive={{isActive}}
@type={{type}}
@showCloseButton={{true}}
>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">

{{yield}}

<div class="modal-confirm-section">
<p class="has-text-weight-semibold is-size-6">
Confirm
</p>
<p class="is-help">Type <strong>{{confirmText}}</strong> to confirm {{toConfirmMsg}}</p>
{{input
type="text"
value=confirmationInput
name="confirmationInput"
class="input has-margin-top"
autocomplete="off"
spellcheck="false"
data-test-confirmation-modal-input="confirmationInput"
}}
</div>
</div>
</section>
<footer class="modal-card-foot modal-card-foot-outlined">
<button
class="button {{buttonClass}}"
disabled={{unless (eq confirmationInput confirmText) true}}
onclick={{onConfirm}}
data-test-confirm-button
>
{{buttonText}}
</button>
<button
class="button is-secondary"
onclick={{action (mut isActive) false}}
data-test-cancel-button>
Cancel
</button>
</footer>
</Modal>
2 changes: 1 addition & 1 deletion ui/lib/core/addon/templates/components/modal.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
data-test-modal-glyph={{glyph.glyph}}
/>
{{/if}}
{{title}}
<span>{{title}}</span>
</h2>
{{#if showCloseButton}}
<button class="delete" aria-label="close" onclick={{onClose}} data-test-modal-close-button></button>
Expand Down
Loading

0 comments on commit 585ef4a

Please sign in to comment.