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

Sidebranch: remove delta, toggle, and make auto-refresh #8945

Merged
merged 9 commits into from
May 8, 2020
Merged

Sidebranch: remove delta, toggle, and make auto-refresh #8945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
311d91b
change styling
Monkeychip May 4, 2020
1ece2ff
remove replication toggle
Monkeychip May 4, 2020
ec91410
modifications for auto refresh and final removal of delta and last wal
Monkeychip May 4, 2020
d4d5bc4
fix refresh issue by removing replicationMode on this.reset which con…
Monkeychip May 5, 2020
9c4fb63
remove comments
Monkeychip May 6, 2020
64bc8a0
add unknown placeholder
Monkeychip May 7, 2020
3915ab0
Merge branch 'ui/replication-status-discoverability' into ui/replicat…
Monkeychip May 7, 2020
429f781
add auto refresh to other components and remove mention of toggle
Monkeychip May 7, 2020
1bbea9b
remove meep and primary cluster heading area
Monkeychip May 7, 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
1 change: 1 addition & 0 deletions ui/app/styles/components/replication-dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,5 +63,6 @@
// prevent double lines at the bottom of the dashboard
&.box {
padding-bottom: 0;
padding-top: 1px; // at least 1px so border still shows
}
}
2 changes: 1 addition & 1 deletion ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
@title="States"
/>
<Dashboard.card
@title="Write-Ahead Logs (WALs)"
@title="Primary cluster"
/>
<Dashboard.rows/>
</Page.dashboard>
Expand Down
2 changes: 0 additions & 2 deletions ui/lib/core/addon/components/replication-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ const DEFAULTS = {
primary_cluster_addr: null,
errors: [],
id: null,
replicationMode: null,
Monkeychip marked this conversation as resolved.
Show resolved Hide resolved
force: false,
};

Expand All @@ -19,7 +18,6 @@ export default Component.extend(ReplicationActions, DEFAULTS, {
replicationMode: null,
model: null,
cluster: alias('model'),

reset() {
if (!this || this.isDestroyed || this.isDestroying) {
return;
Expand Down
27 changes: 15 additions & 12 deletions ui/lib/core/addon/components/replication-dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export default Component.extend({
const isSecondary = this.isSecondary;
return isSecondary && state && clusterStates([state]).isSyncing;
}),
isReindexing: computed('replicationDetails', function() {
isReindexing: computed('replicationDetails.{reindex_in_progress}', function() {
const { replicationDetails } = this;
return !!replicationDetails.reindex_in_progress;
}),
reindexingStage: computed('replicationDetails', function() {
reindexingStage: computed('replicationDetails.{reindex_stage}', function() {
const { replicationDetails } = this;
const stage = replicationDetails.reindex_stage;
// specify the stage if we have one
Expand All @@ -27,16 +27,19 @@ export default Component.extend({
}
return '';
}),
reindexingProgress: computed('replicationDetails', function() {
// TODO: use this value to display a progress bar
const { reindex_building_progress, reindex_building_total } = this.replicationDetails;
let progress = 0;
reindexingProgress: computed(
'replicationDetails.{reindex_building_progress,reindex_building_total}',
Copy link
Contributor

Choose a reason for hiding this comment

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

i'm not entirely positive this will work if reindexing_building_progress or reindex_building_total doesn't exist, which is often the case. did you test it out? otherwise i'll work on it in my next pr 🔨

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I didn't test it so that would be great if you could 🔨 it on your next pr 😁

function() {
// TODO: use this value to display a progress bar
const { reindex_building_progress, reindex_building_total } = this.replicationDetails;
let progress = 0;

if (reindex_building_progress && reindex_building_total) {
// convert progress to a percentage
progress = (reindex_building_progress / reindex_building_total) * 100;
}
if (reindex_building_progress && reindex_building_total) {
// convert progress to a percentage
progress = (reindex_building_progress / reindex_building_total) * 100;
}

return progress;
}),
return progress;
}
),
});
2 changes: 1 addition & 1 deletion ui/lib/core/addon/components/replication-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default Component.extend({
const replicationMode = model.replicationMode;
return model[replicationMode];
}),
isDisabled: computed('replicationDetails', function() {
isDisabled: computed('replicationDetails.{mode}', function() {
if (this.replicationDetails.mode === 'disabled' || this.replicationDetails.mode === 'primary') {
return true;
}
Expand Down
15 changes: 6 additions & 9 deletions ui/lib/core/addon/components/replication-secondary-card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,19 @@ export default Component.extend({
layout,
title: null,
replicationDetails: null,
state: computed('replicationDetails', function() {
state: computed('replicationDetails.{state}', function() {
Monkeychip marked this conversation as resolved.
Show resolved Hide resolved
return this.replicationDetails && this.replicationDetails.state
? this.replicationDetails.state
: 'unknown';
}),
connection: computed('replicationDetails', function() {
connection: computed('replicationDetails.{connection_state}', function() {
return this.replicationDetails.connection_state ? this.replicationDetails.connection_state : 'unknown';
}),
lastWAL: computed('replicationDetails', function() {
return this.replicationDetails && this.replicationDetails.lastWAL ? this.replicationDetails.lastWAL : 0;
}),
lastRemoteWAL: computed('replicationDetails', function() {
lastRemoteWAL: computed('replicationDetails.{lastRemoteWAL}', function() {
return this.replicationDetails && this.replicationDetails.lastRemoteWAL
? this.replicationDetails.lastRemoteWAL
: 0;
}),
delta: computed('replicationDetails', function() {
return Math.abs(this.get('lastWAL') - this.get('lastRemoteWAL'));
}),
inSyncState: computed('state', function() {
// if our definition of what is considered 'synced' changes,
// we should use the clusterStates helper instead
Expand All @@ -57,4 +51,7 @@ export default Component.extend({
}
return false;
}),
primaryClusterAddr: computed('replicationDetails.{primaryClusterAddr}', function() {
return this.replicationDetails.primaryClusterAddr;
}),
});
4 changes: 2 additions & 2 deletions ui/lib/core/addon/components/replication-table-rows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ export default Component.extend({
classNames: ['replication-table-rows'],
replicationDetails: null,
clusterMode: null,
merkleRoot: computed('replicationDetails', function() {
merkleRoot: computed('replicationDetails.{merkleRoot}', function() {
return this.replicationDetails.merkleRoot || 'unknown';
}),
clusterId: computed('replicationDetails', function() {
clusterId: computed('replicationDetails.{clusterId}', function() {
return this.replicationDetails.clusterId || 'unknown';
}),
});
7 changes: 0 additions & 7 deletions ui/lib/core/addon/components/replication-toggle.js
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions ui/lib/core/addon/templates/components/replication-dashboard.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,4 @@
<div class="replication-dashboard box is-sideless is-fullwidth is-marginless" data-test-replication-dashboard>
{{#if isSecondary}}
<h2 class="has-text-weight-semibold is-size-4 has-bottom-margin-xs">
Primary Cluster
</h2>
<p class="has-text-grey is-size-8">
If you set a primary_cluster_addr when enabling replication, it will appear here.
</p>
{{#if replicationDetails.primaryClusterAddr}}
<code data-test-primary-cluster-address>{{replicationDetails.primaryClusterAddr}}</code>
{{else}}
<code>no known primary cluster address</code>
{{/if}}
{{/if}}

{{#if isReindexing}}
<AlertBanner
@title={{concat "Re-indexing in progress" reindexingStage}}
Expand Down
1 change: 0 additions & 1 deletion ui/lib/core/addon/templates/components/replication-page.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
{{yield
(hash
header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
toggle=(component 'replication-toggle')
dashboard=(component
'replication-dashboard'
data=model
Expand Down
45 changes: 21 additions & 24 deletions ui/lib/core/addon/templates/components/replication-secondary-card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}" data-test-replication-secondary-card>
{{!-- Check if State or WAL Card --}}
{{#if (eq title "States")}}
<h3 class="title is-5 grid-item-title card-title">{{title}}</h3>
<h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
<div class="grid-item-left">
{{#if (get (cluster-states state) "isOk")}}
<h6 class="title is-6">state</h6>
Expand Down Expand Up @@ -45,34 +45,31 @@
</h2>
<h2 class="title is-3 grid-item-right-bottom" data-test-connection>{{connection}}</h2>
{{else}}
<h3 class="title is-5 grid-item-title card-title">{{title}}
<ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
<T.trigger>
<Icon @glyph={{"check-circle-outline" }} @size="m" class={{"has-text-grey"}} />
</T.trigger>
<T.content @class="tool-tip">
<div class="box">
There may be a difference between last remote WAL and last WAL entry from primary. If it persists over time,
investigate.
<LearnLink @path="/vault/operations/monitor-replication#are-my-dr-clusters-in-sync" @class="has-text-white">
Learn more
</LearnLink>
</div>
</T.content>
</ToolTip>
</h3>
<h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
<div class="grid-item-left">
<h6 class="title is-6">Delta</h6>
<p class="has-text-grey is-size-8">The difference between the last remote WAL and the last WAL entry from the primary.</p>
<h6 class="title is-6">last_remote_wal</h6>
<p class="has-text-grey is-size-8">The last WAL index that the secondary received from the primary. Updates every 10 seconds.</p>
</div>
<div class="grid-item-right">
<h6 class="title is-6">last_wal</h6>
<p class="has-text-grey is-size-8" data-test-lastWAL>{{lastWAL}}</p>
<h6 class="title is-6">primary_cluster_addr</h6>
{{#if primaryClusterAddr}}
<span>
<a
href={{primaryClusterAddr}}
class="link"
target="_blank"
rel="noreferrer noopener"
>
{{primaryClusterAddr}}
Copy link
Contributor

Choose a reason for hiding this comment

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

this is interesting -- this link doesn't actually work for me because it's taking me to https://127.0.0.1:8201 (presumably the cluster address itself) instead of http://localhost:4200/ui/ (the UI server). if the intention of this link is to be able to click through to the other UI, how do we use the cluster address to find the UI? we are going to need to solve this problem for the known secondaries table as well. 🤔

Copy link
Contributor

Choose a reason for hiding this comment

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

related: this scenario should be included in the acceptance tests somehow...

Copy link
Contributor Author

@Monkeychip Monkeychip May 8, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Good call. Let me see if I can dig up any info on this and I'll also try and add an acceptance test for it. I'll address in the next PR as I suspect I'll be delayed a bit on getting feedback.

</a>
</span>
{{else}}
<p class="has-text-grey is-size-8">unknown</p>
{{/if}}
</div>
<code class="title is-3 grid-item-left-bottom" data-test-delta>{{format-number delta}}</code>
<h2 class="title is-3 grid-item-left-bottom">{{format-number lastRemoteWAL}}</h2>
<div class="grid-item-right-bottom">
<h6 class="title is-6">last_remote_wal</h6>
<p class="has-text-grey is-size-8" data-test-lastRemoteWAL>{{lastRemoteWAL}}</p>
{{!-- Empty --}}
</div>
{{/if}}
</div>
10 changes: 0 additions & 10 deletions ui/lib/core/addon/templates/components/replication-toggle.hbs
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion ui/lib/core/app/components/replication-toggle.js
View file
Open in desktop

This file was deleted.