Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Replication Action: Promote to use modal flow #9122

Merged
merged 4 commits into from
Jun 2, 2020
Merged

Refactor Replication Action: Promote to use modal flow #9122

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
28104ee
Refactor Replication Action: Promote to use modal flow
chelshaw Jun 2, 2020
9bbaca3
Remove options toggle from promote modal
chelshaw Jun 2, 2020
e684789
Use replicationMode instead of replicationDisplayMode for determining…
chelshaw Jun 2, 2020
1281778
Remove extreanneous space
chelshaw Jun 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
172 changes: 70 additions & 102 deletions ui/lib/core/addon/templates/components/replication-action-promote.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,56 @@
{{#if (and (eq replicationMode 'dr') (eq model.replicationAttrs.modeForUrl 'secondary'))}}
<div class="box is-marginless is-shadowless">
<div class="action-block is-rounded">
<div class="action-block-info">
<h4 class="title is-5 is-marginless">
Promote cluster
</h4>
<p>
This cluster is currently running as a DR Replication Secondary.
Promote the cluster to a primary by entering DR Operation Token.
Promote this cluster to a {{replicationDisplayMode}} primary
</p>
<div class="field">
<label for="dr_operation_token" class="is-label">
DR Operation Token
</label>
<div class="control">
{{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}}
</div>
</div>
<ToggleButton
@class="is-block"
@toggleAttr="showOptions"
@toggleTarget={{this}}
@openLabel="Hide options"
@closedLabel="Options"
/>
{{#if showOptions}}
<div class="box is-marginless">
</div>

<div class="action-block-action">
<button
class="button is-tertiary"
onclick={{action (mut isModalActive) true}}
data-test-replication-action-trigger
>
Update
</button>
</div>
</div>

<Modal
@title="Promote cluster?"
@onClose={{action (mut isModalActive) false}}
@isActive={{isModalActive}}
@type="warning"
@showCloseButton={{true}}
>
<section class="modal-card-body">
<div class="box is-shadowless is-fullwidth is-sideless">

{{#if (eq replicationMode "dr")}}
<p class="has-bottom-margin-m">
To promote this DR Replication Secondary to a primary, enter the DR Operation token.
</p>
{{/if}}
<p class="has-bottom-margin-m">
Vault Replication is not designed for active-active usage. 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>

<div data-test-promote-dr-inputs>
{{#if (eq replicationMode "dr")}}
<div class="field is-borderless">
<label for="dr_operation_token" class="is-label is-size-6">
DR Operation Token
</label>
<div class="control">
{{input class="input" id="dr_operation_token" name="dr_operation_token" value=dr_operation_token}}
</div>
</div>
{{/if}}
<div class="field">
<label for="primary_cluster_addr" class="is-label">
<label for="primary_cluster_addr" class="is-label is-size-6">
Primary cluster address <em class="is-optional">(optional)</em>
</label>
<div class="control">
Expand All @@ -41,89 +69,29 @@
checked={{force}}
onchange={{action (mut force) value="target.checked"}}
/>
<label for="forcePromote" class="is-label">
<label for="forcePromote" class="is-label is-size-6">
Force promotion of this cluster
</label>
<p>Promote the cluster even if certain safety checks fail. This could result in data loss of data isn't fully replicated</p>
</div>
<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}}
</div>
<div class="box is-marginless is-shadowless">
<div class="field">
<div class="control">
<ConfirmAction
@buttonClasses="button is-primary"
@confirmTitle="Promote this cluster?"
@confirmMessage="This will affect how your Vault data is replicated."
@confirmButtonText="Promote"
@horizontalPosition="auto-left"
@onConfirmAction={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force)}}
>
Promote cluster
</ConfirmAction>
</div>
</div>
</div>
{{else}}
<h4 class="title is-5 is-marginless">
Promote cluster
</h4>
<div class="content">
<p>Promote the cluster to primary.
<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."
/>
</p>
<div class="field">
<label for="primary_cluster_addr" class="is-label">
Primary cluster address <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input class="input" id="primary_cluster_addr" name="primary_cluster_addr" value=primary_cluster_addr}}
</div>
<p class="help has-text-grey">
Overrides the cluster address that the primary gives to secondary nodes.
</p>
</div>
<div class="field">
<div class="b-checkbox">
<input type="checkbox"
id="forcePromote"
class="styled"
checked={{force}}
onchange={{action (mut force) value="target.checked"}}
/>
<label for="forcePromote" class="is-label">
Force promotion of this cluster
</label>
</div>
<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">
<div class="control">
<ConfirmAction
@buttonClasses="button is-primary"
@confirmTitle="Promote this cluster?"
@confirmMessage="This will affect how your Vault data is replicated."
@confirmButtonText="Promote"
@horizontalPosition="auto-left"
@onConfirmAction={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash primary_cluster_addr=primary_cluster_addr force=force)}}
>
Promote cluster
</ConfirmAction>
</div>
</div>
{{/if}}
</section>
<footer class="modal-card-foot modal-card-foot-outlined">
<button
class="button is-primary"
disabled={{if (and (eq replicationMode "dr") (not dr_operation_token)) true}}
onclick={{action "onSubmit" "promote" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token primary_cluster_addr=primary_cluster_addr force=force)}}
data-test-promote-confirm-button
>
Promote
</button>
<button
class="button is-secondary"
onclick={{action (mut isModalActive) false}}
data-test-promote-cancel-button>
Cancel
</button>
</footer>
</Modal>