Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Replication Management Sidebranch: Replication Action Disable (#9061)
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
Showing
14 changed files
with
357 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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
74
ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 39 additions & 61 deletions
100
ui/app/templates/vault/cluster/replication-dr-promote/index.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
46
ui/lib/core/addon/templates/components/confirmation-modal.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.