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 e83fb1882c
commit 468e82dcf9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 11 deletions

View File

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

View File

@ -48,19 +48,19 @@
{{/block-slot}}
{{#block-slot name='content'}}
{{#each
(compact
(array
(hash id=(slugify 'Health Checks') partial='dc/nodes/healthchecks')
(hash id=(slugify 'Services') partial='dc/nodes/services')
(if tomography.distances (hash id=(slugify 'Round Trip Time') partial='dc/nodes/rtt') '')
(hash id=(slugify 'Round Trip Time') partial='dc/nodes/rtt')
(hash id=(slugify 'Lock Sessions') partial='dc/nodes/sessions')
(hash id=(slugify 'Meta Data') partial='dc/nodes/metadata')
)
) 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")}}
{{partial panel.partial}}
{{/tab-section}}
{{/if}}
{{/each}}
{{/block-slot}}
{{/app-view}}