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

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

Merged
1 change: 1 addition & 0 deletions ui/app/styles/components/replication-dashboard.scss
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
}
}
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
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
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
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
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
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

This file was deleted.

14 changes: 0 additions & 14 deletions ui/lib/core/addon/templates/components/replication-dashboard.hbs
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
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
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

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

This file was deleted.

1 change: 0 additions & 1 deletion ui/lib/core/app/components/replication-toggle.js

This file was deleted.