Skip to content

Commit

Permalink
Ui/replication mgmt/update primary action (#9149)
Browse files Browse the repository at this point in the history 
* Update Primary replication action uses modal flow

* Update modal max-height to accommodate for the navbar
  • Loading branch information
@chelshaw
chelshaw committed Jun 5, 2020
1 parent 6f0411d commit 6a63041
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 161 deletions.
2 changes: 2 additions & 0 deletions ui/app/styles/components/modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
.modal-card {
box-shadow: $box-shadow-highest;
border: 1px solid $grey-light;
max-height: calc(100vh - 70px);
margin-top: 60px;

&-head {
border-radius: 0;
Expand Down
2 changes: 1 addition & 1 deletion ui/lib/core/addon/helpers/replication-action-for-mode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const ACTIONS = {
dr: {
primary: ['disable', 'recover', 'reindex', 'demote'],
// TODO: add disable, recover, reindex and update-primary when API is ready
secondary: ['promote'],
secondary: ['promote', 'update-primary'],
bootstrapping: ['disable', 'recover', 'reindex'],
},
};
Expand Down
239 changes: 95 additions & 144 deletions ui/lib/core/addon/templates/components/replication-action-update-primary.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,153 +1,104 @@
{{#if (and (eq replicationMode 'dr') (eq model.replicationAttrs.modeForUrl 'secondary'))}}
<div class="box is-marginless is-shadowless">
<div class="action-block is-rounded" data-test-update-primary-replication>
<div class="action-block-info">
<h4 class="title is-5 is-marginless">
Update primary
</h4>
<p>
Change a secondary cluster’s assigned primary cluster using a secondary
activation token. This does not wipe all data in the cluster.
Change this secondary's assigned primary cluster
</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>
<div class="field">
<label for="secondary-token" class="is-label">
Secondary activation token
</label>
<div class="control">
{{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}}
</div>

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

<Modal
@title="Update primary"
@onClose={{action (mut isModalActive) false}}
@isActive={{isModalActive}}
@type="warning"
@showCloseButton={{true}}
>
<section class="modal-card-body">
<p class="has-bottom-margin-m">
Use a secondary activation token to change this secondary’s assigned primary. This does not wipe all data in the cluster.
</p>

<div data-test-update-primary-inputs>
{{#if (eq replicationMode "dr")}}
<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>
</div>
<ToggleButton
@class="is-block"
@toggleAttr="showOptions"
@toggleTarget={{this}}
@openLabel="Hide options"
@closedLabel="Options"
/>
{{#if showOptions}}
<div class="box is-marginless">
<div class="field">
<label for="primary_api_addr" class="is-label">
Primary API address <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}}
</div>
<p class="help">
Set this to the API address (normal Vault address) to override the
value embedded in the token.
</p>
{{/if}}
<div class="field">
<label for="secondary-token" class="is-label">
Secondary activation token
</label>
<div class="control">
{{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}}
</div>
<div class="field">
<label for="ca_file" class="is-label">
CA file <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input value=ca_file id="ca_file" name="ca_file" class="input"}}
</div>
<p class="help">
Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary.
</p>
</div>
<div class="field">
<label for="primary_api_addr" class="is-label">
Primary API address <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}}
</div>
<div class="field">
<label for="ca_path" class="is-label">
CA path <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input value=ca_path id="ca_path" name="ca_file" class="input"}}
</div>
<p class="help">
Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary.
</p>
<p class="help">
Set this to the API address (normal Vault address) to override the
value embedded in the token.
</p>
</div>
<div class="field">
<label for="ca_file" class="is-label">
CA file <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input value=ca_file id="ca_file" name="ca_file" class="input"}}
</div>
<p class="help">
Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary.
</p>
</div>
{{/if}}
</div>

<div class="box is-marginless is-shadowless">
<div class="field">
<div class="control">
<ConfirmAction
@buttonClasses="button is-primary"
@confirmTitle="Update primary?"
@confirmMessage="This will update this cluster's primary."
@confirmButtonText="Update"
@horizontalPosition="auto-left"
@onConfirmAction={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash dr_operation_token=dr_operation_token token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
>
Update primary
</ConfirmAction>
<div class="field">
<label for="ca_path" class="is-label">
CA path <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input value=ca_path id="ca_path" name="ca_file" class="input"}}
</div>
<p class="help">
Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary.
</p>
</div>
</div>
</div>
{{else}}
<h4 class="title is-5 is-marginless">
Update primary
</h4>
<div class="content">
<p>
Change a secondary cluster’s assigned primary cluster using a secondary
activation token. This does not wipe all data in the cluster.
</p>
</div>
<div class="field">
<label for="secondary-token" class="is-label">
Secondary activation token
</label>
<div class="control">
{{textarea value=token id="secondary-token" name="secondary-token" class="textarea"}}
</div>
</div>
<div class="field">
<label for="primary_api_addr" class="is-label">
Primary API address <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input class="input" value=primary_api_addr id="primary_api_addr" name="primary_api_addr"}}
</div>
<p class="help has-text-grey">
Set this to the API address (normal Vault address) to override the
value embedded in the token.
</p>
</div>
<div class="field">
<label for="ca_file" class="is-label">
CA file <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input value=ca_file id="ca_file" name="ca_file" class="input"}}
</div>
<p class="help has-text-grey">
Specifies the path to a CA root file (PEM format) that the secondary can use when unwrapping the token from the primary.
</p>
</div>
<div class="field">
<label for="ca_path" class="is-label">
CA path <em class="is-optional">(optional)</em>
</label>
<div class="control">
{{input value=ca_path id="ca_path" name="ca_file" class="input"}}
</div>
<p class="help has-text-grey">
Specifies the path to a CA root directory containing PEM-format files that the secondary can use when unwrapping the token from the primary.
</p>
</div>

<div class="field">
<div class="control">
<ConfirmAction
@buttonClasses="button is-primary"
@confirmTitle="Update primary?"
@confirmMessage="This will update this cluster's primary."
@confirmButtonText="Update"
@horizontalPosition="auto-left"
@onConfirmAction={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
>
Update primary
</ConfirmAction>
</div>
</div>
{{/if}}
</section>
<footer class="modal-card-foot modal-card-foot-outlined">
<button
class="button is-primary"
onclick={{action "onSubmit" "update-primary" model.replicationAttrs.modeForUrl (hash token=token primary_api_addr=primary_api_addr ca_path=ca_path ca_file=ca_file)}}
data-test-confirm-action-trigger
>
Update
</button>
<button
class="button is-secondary"
onclick={{action (mut isModalActive) false}}
data-test-update-primary-cancel-button>
Cancel
</button>
</footer>
</Modal>
30 changes: 14 additions & 16 deletions ui/tests/integration/components/replication-actions-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,22 +99,20 @@ module('Integration | Component | replication actions', function(hooks) {
['promote', 'secondary', { primary_cluster_addr: 'cluster addr' }],
false,
],

// don't yet update-primary for dr
// [
// 'performance',
// 'secondary',
// 'update-primary',
// 'Update primary',
// async function() {
// await fillIn('#secondary-token', 'token');
// await blur('#secondary-token');
// await fillIn('#primary_api_addr', 'addr');
// await blur('#primary_api_addr');
// },
// ['update-primary', 'secondary', { token: 'token', primary_api_addr: 'addr' }],
// true,
// ],
[
'performance',
'secondary',
'update-primary',
'Update primary',
async function() {
await fillIn('#secondary-token', 'token');
await blur('#secondary-token');
await fillIn('#primary_api_addr', 'addr');
await blur('#primary_api_addr');
},
['update-primary', 'secondary', { token: 'token', primary_api_addr: 'addr' }],
false,
],
];

for (let [
Expand Down

0 comments on commit 6a63041

Please sign in to comment.