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

UI: Part 3.5 - hds adoption replace <Modal> #23448

Merged
merged 4 commits into from
Oct 2, 2023
Merged

UI: Part 3.5 - hds adoption replace <Modal> #23448

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
29fc6f4
replication-promote modal
hellobontempo Oct 2, 2023
ec01458
replication component modals
hellobontempo Oct 2, 2023
d723b0a
replication add secondary modal
hellobontempo Oct 2, 2023
bc2bfea
move update text for diff
hellobontempo Oct 2, 2023
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
167 changes: 83 additions & 84 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
Expand Up @@ -27,100 +27,99 @@
</div>
</div>

<Modal
@title="Promote cluster?"
@onClose={{action (mut this.isModalActive) false}}
@isActive={{this.isModalActive}}
@type="warning"
@showCloseButton={{true}}
>
<section class="modal-card-body">
{{#if (eq this.replicationMode "dr")}}
{{#if this.isModalActive}}
<Hds::Modal id="replication-promote-modal" @color="warning" @onClose={{fn (mut this.isModalActive) false}} as |M|>
<M.Header @icon="alert-triangle">
Promote cluster?
</M.Header>
<M.Body>
{{#if (eq this.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">
To promote this DR Replication Secondary to a primary, enter the DR Operation token.
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>
{{/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 this.replicationMode "dr")}}
<div class="field is-borderless">
<label for="dr_operation_token_promote" class="is-label is-size-6">
DR Operation Token
<div data-test-promote-dr-inputs>
{{#if (eq this.replicationMode "dr")}}
<div class="field is-borderless">
<label for="dr_operation_token_promote" class="is-label is-size-6">
DR Operation Token
</label>
<div class="control">
<Input
class="input"
id="dr_operation_token_promote"
name="dr_operation_token_promote"
@value={{this.dr_operation_token_promote}}
/>
</div>
</div>
{{/if}}
<div class="field">
<label for="primary_cluster_addr" class="is-label is-size-6">
Primary cluster address
<em class="is-optional">(optional)</em>
</label>
<div class="control">
<Input
class="input"
id="dr_operation_token_promote"
name="dr_operation_token_promote"
@value={{this.dr_operation_token_promote}}
id="primary_cluster_addr"
name="primary_cluster_addr"
@value={{this.primary_cluster_addr}}
/>
</div>
<p class="help">
Overrides the cluster address that the primary gives to secondary nodes.
</p>
</div>
{{/if}}
<div class="field">
<label for="primary_cluster_addr" class="is-label is-size-6">
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={{this.primary_cluster_addr}} />
</div>
<p class="help">
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={{this.force}}
onchange={{action (mut this.force) value="target.checked"}}
/>
<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 class="field">
<div class="b-checkbox">
<input
type="checkbox"
id="forcePromote"
class="styled"
checked={{this.force}}
onchange={{action (mut this.force) value="target.checked"}}
/>
<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>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot modal-card-foot-outlined">
<button
type="button"
class="button is-primary"
disabled={{if (and (eq this.replicationMode "dr") (not this.dr_operation_token_promote)) true}}
onclick={{action
"onSubmit"
"promote"
this.model.replicationAttrs.modeForUrl
(hash
dr_operation_token_promote=this.dr_operation_token_promote
primary_cluster_addr=this.primary_cluster_addr
force=this.force
)
}}
data-test-promote-confirm-button
>
Promote
</button>
<button
type="button"
class="button is-secondary"
onclick={{action (mut this.isModalActive) false}}
data-test-promote-cancel-button
>
Cancel
</button>
</footer>
</Modal>
</M.Body>
<M.Footer as |F|>
<Hds::ButtonSet>
<Hds::Button
disabled={{if (and (eq this.replicationMode "dr") (not this.dr_operation_token_promote)) true}}
{{on
"click"
(fn
this.onSubmit
"promote"
this.model.replicationAttrs.modeForUrl
(hash
dr_operation_token_promote=this.dr_operation_token_promote
primary_cluster_addr=this.primary_cluster_addr
force=this.force
)
)
}}
data-test-promote-confirm-button
@text="Promote"
/>
<Hds::Button @color="secondary" @text="Cancel" {{on "click" F.close}} data-test-promote-cancel-button />
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}
44 changes: 18 additions & 26 deletions ui/lib/core/addon/templates/components/replication-action-recover.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,21 @@
</div>
</div>

<Modal
@title="Begin recovery?"
@onClose={{action (mut this.isModalActive) false}}
@isActive={{this.isModalActive}}
@type="warning"
@showCloseButton={{true}}
>
<section class="modal-card-body">
<p>
If replication is in an adverse state, we can begin recovery. This will attempt to recover to continue syncing.
</p>
</section>
<footer class="modal-card-foot modal-card-foot-outlined">
<button type="button" class="button is-primary" onclick={{action "onSubmit" "recover"}} data-test-recover-confirm-button>
Recover
</button>
<button
type="button"
class="button is-secondary"
onclick={{action (mut this.isModalActive) false}}
data-test-recover-cancel-button
>
Cancel
</button>
</footer>
</Modal>
{{#if this.isModalActive}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-10-02 at 12 58 16 PM

<Hds::Modal id="replication-recover-modal" @color="warning" @onClose={{fn (mut this.isModalActive) false}} as |M|>
<M.Header @icon="alert-triangle">
Begin recovery?
</M.Header>
<M.Body>
<p>
If replication is in an adverse state, we can begin recovery. This will attempt to recover to continue syncing.
</p>
</M.Body>
<M.Footer as |F|>
<Hds::ButtonSet>
<Hds::Button @text="Recover" {{on "click" (fn this.onSubmit "recover")}} data-test-recover-confirm-button />
<Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} data-test-recover-cancel-button />
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}
56 changes: 24 additions & 32 deletions ui/lib/core/addon/templates/components/replication-action-reindex.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,27 @@
</button>
</div>
</div>
<Modal
@title="Begin reindex?"
@onClose={{action (mut this.isModalActive) false}}
@isActive={{this.isModalActive}}
@type="warning"
@showCloseButton={{true}}
>
<section class="modal-card-body">
<p class="has-bottom-margin-m">
Reindexing can cause a very long delay depending on the number and size of objects in the data store.
{{if this.model.replicationAttrs.isPrimary "You should always re-index your secondary first."}}
</p>
<p>
Progress will be shown, and you will
{{if this.model.replicationAttrs.isPrimary "not"}}
be able to use Vault during this time.
</p>
</section>
<footer class="modal-card-foot modal-card-foot-outlined">
<button type="button" class="button is-primary" onclick={{action "onSubmit" "reindex"}} data-test-reindex-confirm-button>
Reindex
</button>
<button
type="button"
class="button is-secondary"
onclick={{action (mut this.isModalActive) false}}
data-test-reindex-cancel-button
>
Cancel
</button>
</footer>
</Modal>
{{#if this.isModalActive}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-10-02 at 1 07 13 PM

<Hds::Modal id="replication-reindex-modal" @color="warning" @onClose={{fn (mut this.isModalActive) false}} as |M|>
<M.Header @icon="alert-triangle">
Begin reindex?
</M.Header>
<M.Body>
<p class="has-bottom-margin-m">
Reindexing can cause a very long delay depending on the number and size of objects in the data store.
{{if this.model.replicationAttrs.isPrimary "You should always re-index your secondary first."}}
</p>
<p>
Progress will be shown, and you will
{{if this.model.replicationAttrs.isPrimary "not"}}
be able to use Vault during this time.
</p>
</M.Body>
<M.Footer as |F|>
<Hds::ButtonSet>
<Hds::Button @text="Reindex" {{on "click" (fn this.onSubmit "reindex")}} data-test-reindex-confirm-button />
<Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} data-test-reindex-cancel-button />
</Hds::ButtonSet>
</M.Footer>
</Hds::Modal>
{{/if}}
Loading