From 28134b6c16318dda44d71157d59d217dfd0798a5 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Wed, 4 Mar 2020 18:12:27 +0000
Subject: [PATCH] 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.
---
 ui-v2/app/templates/dc/nodes/-rtt.hbs |  6 +++---
 ui-v2/app/templates/dc/nodes/show.hbs | 16 ++++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui-v2/app/templates/dc/nodes/-rtt.hbs b/ui-v2/app/templates/dc/nodes/-rtt.hbs
index ff64e3a47..429eead2d 100644
--- a/ui-v2/app/templates/dc/nodes/-rtt.hbs
+++ b/ui-v2/app/templates/dc/nodes/-rtt.hbs
@@ -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}}
diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs
index e2b69aefe..0823e3a7d 100644
--- a/ui-v2/app/templates/dc/nodes/show.hbs
+++ b/ui-v2/app/templates/dc/nodes/show.hbs
@@ -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 'Lock Sessions') partial='dc/nodes/sessions')
-                            (hash id=(slugify 'Meta Data') partial='dc/nodes/metadata')
-                )
+            (array
+              (hash id=(slugify 'Health Checks') partial='dc/nodes/healthchecks')
+              (hash id=(slugify 'Services') partial='dc/nodes/services')
+              (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}}