Skip to content

Commit

Permalink
Refactor Replication Action: Promote to use modal flow (#9122)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chelshaw
chelshaw authored Jun 2, 2020
1 parent 585ef4a commit 77a0fcd
Showing 1 changed file with 70 additions and 102 deletions.
172 changes: 70 additions & 102 deletions ui/lib/core/addon/templates/components/replication-action-promote.hbs
View file
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>

0 comments on commit 77a0fcd

Please sign in to comment.