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.

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
Changes from all commits
Commits
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
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>