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)
hashicorp · Mar 31, 2020 · 2b04fe4 · 2b04fe4
1 parent 4c1e50d
commit 2b04fe4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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}}