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

Jump to bottom

Sidebranch: DR Secondary Dashboard - pr4 #8706

Merged
merged 17 commits into from Apr 13, 2020
Merged

Sidebranch: DR Secondary Dashboard - pr4 #8706

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
8359291
setup styling for delta
Monkeychip Apr 8, 2020
5300391
clean up
Monkeychip Apr 8, 2020
6cf855f
Merge branch 'ui/replication-status-discoverability' into ui/dr-secon…
Monkeychip Apr 8, 2020
08426cc
replication table remove and rename model to data
Monkeychip Apr 8, 2020
67182fb
remove old replication header component now that it is in addons
Monkeychip Apr 8, 2020
9ce336b
move replication secondary card component
Monkeychip Apr 8, 2020
0df6903
calc delta
Monkeychip Apr 8, 2020
ee65375
clean up
Monkeychip Apr 8, 2020
338365c
remove unused components that are now in addon
Monkeychip Apr 13, 2020
7268a5e
address pr comments
Monkeychip Apr 13, 2020
c26fc8f
remove test
Monkeychip Apr 13, 2020
e0dc189
fix failing test
Monkeychip Apr 13, 2020
bfde73f
address pr comments
Monkeychip Apr 13, 2020
2412f01
attempting to fix test
Monkeychip Apr 13, 2020
4811cfb
move to computed components
Monkeychip Apr 13, 2020
731b5b7
fix test error
Monkeychip Apr 13, 2020
8b981fd
fix state of null error
Monkeychip Apr 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 15 additions & 24 deletions ui/app/styles/components/replication-dashboard.scss
View file
Open in desktop
Expand Up @@ -46,37 +46,28 @@
}

.grid-item-title {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 1;
grid-column: 1 / span 2;

display: flex;
}
.grid-item-state {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 2;
grid-row-end: 2;
.grid-item-left {
grid-column: 1/1;
grid-row: 2/2;
}
.grid-item-wal {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 2;
.grid-item-right {
grid-column: 2/2;
grid-row: 2/2;
}
.grid-item-stream {
grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 3;
grid-row-end: 3;
.grid-item-left-bottom {
grid-column: 1/1;
grid-row: 3/3;

display: flex;
align-items: center;
}
.grid-item-status {
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 3;
.grid-item-right-bottom {
grid-column: 2/2;
grid-row: 3/3;
}
}
}
Expand Down
26 changes: 4 additions & 22 deletions ui/app/templates/vault/cluster/replication-dr-promote/details.hbs
View file
Open in desktop
Expand Up @@ -12,31 +12,13 @@
@componentToRender='replication-secondary-card' as |Dashboard|>
<Dashboard.card
@title="States"
@property_1="state"
@property_2="connection_state"
@description_1="How this cluster is communicating with others at this moment."
@description_2="coming"
@metric_1={{if model.dr.state model.dr.state 'unknown'}}
{{!-- ARG TODO this might be wrong, could be connection_state --}}
@metric_2={{if model.drStateDisplay model.drStateDisplay 'unknown'}}
@data={{model}}
/>
<Dashboard.card
<Dashboard.card
@title="Write-Ahead Logs (WALs)"
@property_1="last_wal"
@property_2="last_remote_wal"
@property_3="Delta"
@description_3="The difference between the last remote WAL and the last WAL entry from the primary."
{{!-- last_wal which comes from the primary --}}
@metric_1={{if model.dr.lastWAL (format-number model.dr.lastWAL) '0'}}
{{!-- last_remote_wal which comes from the secondary --}}
@metric_2={{if model.dr.lastRemoteWAL (format-number model.dr.lastRemoteWAL) '0'}}
/>
<Dashboard.rows
@metric_1={{if model.dr.merkleRoot model.dr.merkleRoot 'unknown'}}
@metric_2={{if model.dr.mode model.dr.mode 'unknown'}}
@metric_3={{if model.dr.clusterId model.dr.clusterId 'unknown'}}
@syncProgress={{if model.dr.syncProgress syncProgress false}}
@data={{model}}
/>
<Dashboard.rows @data={{model.dr}}/>
</Page.dashboard>
</ReplicationPage>
</div>
Expand Down
8 changes: 6 additions & 2 deletions ui/lib/core/addon/components/replication-secondary-card.js
View file
Open in desktop
Expand Up @@ -10,7 +10,11 @@ import layout from '../templates/components/replication-secondary-card';

export default Component.extend({
layout,
delta: computed(function() {
return Math.abs(this.metric_1 - this.metric_2);
delta: computed('data', function() {
// last_wal
Monkeychip marked this conversation as resolved.
Show resolved Hide resolved
let lastWAL = this.data.dr.lastWAL || 0;
// last_remote_wal
let lastRemoteWAL = this.data.dr.lastRemoteWAL || 0;
return Math.abs(lastWAL - lastRemoteWAL);
}),
});
92 changes: 40 additions & 52 deletions ui/lib/core/addon/templates/components/replication-secondary-card.hbs
View file
Open in desktop
@@ -1,65 +1,53 @@
<div class="selectable-card is-rounded card-container">
<h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
<div class="grid-item-state">
{{#if property_3}}
<code class="has-text-black">{{property_3}}</code>
<p class="has-text-grey is-size-8">{{description_3}}</p>
{{else}}
<code class="has-text-black">{{property_1}}</code>
<p class="has-text-grey is-size-8">{{description_1}}</p>
{{/if}}
</div>
<div class="grid-item-wal">
{{!-- Check if card is for showing Delta information --}}
{{#if @property_3}}
<code class="has-text-black">{{property_1}}</code>
<p class="has-text-grey is-size-8">{{metric_1}}</p>
{{else}}
<code class="has-text-black">{{property_2}}</code>
<p class="has-text-grey is-size-8">{{description_2}}</p>
{{/if}}
</div>

{{#if @property_3}}
<h2 class="title-number grid-item-stream">{{format-number delta}}
{{!-- Check if State or WAL Card --}}
{{#if (eq title "States")}}
<h3 class="title is-4 grid-item-title card-title">{{title}}</h3>
Monkeychip marked this conversation as resolved.
Show resolved Hide resolved
<div class="grid-item-left">
<code class="has-text-black">state</code>
<p class="has-text-grey is-size-8">How this cluster is communicating with others at this moment.</p>
</div>
<div class="grid-item-right">
<code class="has-text-black">connection_state</code>
<p class="has-text-grey is-size-8">The health of the connection between this cluster and others.</p>
</div>
{{!-- ARG TODO connection state is likely wrong here, waiting for reply from RFC --}}
<h2 class="title-number grid-item-left-bottom">{{if data.dr.state data.dr.state 'unknown'}}</h2>
Monkeychip marked this conversation as resolved.
Show resolved Hide resolved
<h2 class="title-number is-5 grid-item-right-bottom">{{if data.drStateDisplay data.drStateDisplay 'unknown'}}</h2>
{{else}}
<h3 class="title is-4 grid-item-title card-title">{{title}}
<ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
<T.trigger>
<Icon
{{!-- ARG TODO replace false and true with correct variable --}}
@glyph={{if (gt delta 0) "alert-triangle" "check-circle-outline" }}
@size="l"
class={{if (gt delta 0) "has-text-highlight" "has-text-success"}}
@glyph={{"check-circle-outline" }}
@size="m"
class={{"has-text-grey"}}
/>
</T.trigger>
<T.content @class="tool-tip">
<div class="box">
{{#if (gt delta 0)}}
There is a difference between last remote WAL and last WAL entry from primary.
This maybe a syncing issue.
<LearnLink
@path="/vault/operations/monitor-replication#are-my-dr-clusters-in-sync"
@class="has-text-white"
>
Learn more
</LearnLink>
{{else}}
Everything is up to date!
{{/if}}
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>
</h2>
{{else}}
<h2 class="title-number grid-item-stream">{{metric_1}}</h2>
{{/if}}

{{#if @property_3}}
<div class="grid-item-status">
<code class="has-text-black">{{property_2}}</code>
<p class="has-text-grey is-size-8">{{metric_2}}</p>
</div>
{{else}}
<h2 class="title-number is-5 grid-item-status">{{metric_2}}</h2>
</h3>
<div class="grid-item-left">
<code class="has-text-black">Delta</code>
<p class="has-text-grey is-size-8">The difference between the last remote WAL and the last WAL entry from the primary.</p>
</div>
<div class="grid-item-right">
<code class="has-text-black">last_wal</code>
<p class="has-text-grey is-size-8">{{if data.dr.lastWAL (format-number data.dr.lastWAL) '0'}}</p>
</div>
<h2 class="title-number grid-item-left-bottom">{{format-number delta}}</h2>
<div class="grid-item-right-bottom">
<code class="has-text-black">last_remote_wal</code>
<p class="has-text-grey is-size-8">{{if data.dr.lastRemoteWAL (format-number data.dr.lastRemoteWAL) '0'}}</p>
</div>
{{/if}}

</div>