luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Alter position of logic for showing the Round Trip Time tab to prevent DOM refresh (#7377) 

* ui: Move tomography length check inside of the partial

Previously we checked the length of tomography.distances to decide
whether to show the RTT tab or not. Previous to our ember upgrade this
would not cause a DOM reload of so many elements (i.e. all of the tab
content). Since our ember upgrade, any change to tomography (so not
necessarily the length of distances) seems to fire a change to the length (even if
the length remains the same). The knock on effect of this is that the
array of tab panels seems to be recalculated (but remain the same) and
all of the tab panels are completely re-rendered, causing the scroll of
the page to be reset.

This commit moves the check for tomography.distance.length to the lower
down with the loop, which means the array of tab panels always remains
the same, which consequently means that the entire array of tab panels
is never re-rendered entirely, and therefore fixes the issue.
This commit is contained in:
John Cowen 2020-03-04 18:12:27 +00:00 committed by GitHub
parent 22dcee74ac
commit 28134b6c16
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-v2/app/templates/dc/nodes/-rtt.hbs
View File

@ -3,19 +3,19 @@
Minimum Minimum
</dt> </dt>
<dd> <dd>
{{ format-number tomography.min maximumFractionDigits=2}}ms {{format-number tomography.min maximumFractionDigits=2}}ms
</dd> </dd>
<dt> <dt>
Median Median
</dt> </dt>
<dd> <dd>
{{ format-number tomography.median maximumFractionDigits=2}}ms {{format-number tomography.median maximumFractionDigits=2}}ms
</dd> </dd>
<dt> <dt>
Maximum Maximum
</dt> </dt>
<dd> <dd>
{{ format-number tomography.max maximumFractionDigits=2}}ms {{format-number tomography.max maximumFractionDigits=2}}ms
</dd> </dd>
</dl> </dl>
{{tomography-graph tomography=tomography}} {{tomography-graph tomography=tomography}}

16
ui-v2/app/templates/dc/nodes/show.hbs
View File

@ -48,19 +48,19 @@
{{/block-slot}} {{/block-slot}}
{{#block-slot name='content'}} {{#block-slot name='content'}}
{{#each {{#each
(compact (array
(array (hash id=(slugify 'Health Checks') partial='dc/nodes/healthchecks')
(hash id=(slugify 'Health Checks') partial='dc/nodes/healthchecks') (hash id=(slugify 'Services') partial='dc/nodes/services')
(hash id=(slugify 'Services') partial='dc/nodes/services') (hash id=(slugify 'Round Trip Time') partial='dc/nodes/rtt')
(if tomography.distances (hash id=(slugify 'Round Trip Time') partial='dc/nodes/rtt') '') (hash id=(slugify 'Lock Sessions') partial='dc/nodes/sessions')
(hash id=(slugify 'Lock Sessions') partial='dc/nodes/sessions') (hash id=(slugify 'Meta Data') partial='dc/nodes/metadata')
(hash id=(slugify 'Meta Data') partial='dc/nodes/metadata')
)
) as |panel| ) as |panel|
}} }}
{{#if (or (not-eq panel.id 'round-trip-time') (gt tomography.distances.length 0)) }}
{{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}} {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
{{partial panel.partial}} {{partial panel.partial}}
{{/tab-section}} {{/tab-section}}
{{/if}}
{{/each}} {{/each}}
{{/block-slot}} {{/block-slot}}
{{/app-view}} {{/app-view}}