From 2b04fe405c5f84be3230db3f10fa0aeba813c458 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Tue, 31 Mar 2020 14:58:59 +0100
Subject: [PATCH] ui: Use the `each key=""` parameter to force ember to reuse
 DOM (#7550)

Ember tries to reuse DOM elements when it can but as ember looks for
changes to objects rather than the DOM itself sometimes. This and the
fact that an objects identity may change even though its value hasn't,
results in ember occasionally re-mutating DOM when it doesn't need to.

The `each` helper includes a `key` attribute to hint to ember what it
should look for when deciding whether something has changed, rather than
the objects identity.

https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/each#specifying-keys

We use this here to fix an issue where DOM was being redrawn after the
user had scrolled the page and was therefore resetting the scroll back
to 0 (the top of the page)
---
 ui-v2/app/templates/dc/nodes/show.hbs        | 18 +++++++++---------
 ui-v2/app/templates/dc/services/instance.hbs |  3 ++-
 ui-v2/app/templates/dc/services/show.hbs     |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs
index 0823e3a7ddcf..84ff0d1f61f0 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
-            (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|
+            (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')
+                )
+            ) key="id" 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}}
diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs
index 6b6d13fd13f1..aad4f7b2cd53 100644
--- a/ui-v2/app/templates/dc/services/instance.hbs
+++ b/ui-v2/app/templates/dc/services/instance.hbs
@@ -87,6 +87,7 @@
             )
             selected=selectedTab
         }}
+
         {{#each
             (compact
                 (array
@@ -107,7 +108,7 @@
                     (hash id=(slugify 'Tags') partial='dc/services/tags')
                     (hash id=(slugify 'Meta Data') partial='dc/services/metadata')
                 )
-            ) as |panel|
+            ) key="id" as |panel|
         }}
             {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
                 {{partial panel.partial}}
diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs
index d963fc74d7dd..846c56f78393 100644
--- a/ui-v2/app/templates/dc/services/show.hbs
+++ b/ui-v2/app/templates/dc/services/show.hbs
@@ -49,7 +49,7 @@
 (if (not-eq chain null) (hash id=(slugify 'Routing') partial='dc/services/routing') '')
                         (hash id=(slugify 'Tags') partial='dc/services/tags')
         )
-      ) as |panel|
+      ) key="id" as |panel|
     }}
         {{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action 'change')}}
           {{partial panel.partial}}