John Cowen 6ffe0e6fe4
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)
2020-03-31 14:58:59 +01:00

67 lines
2.5 KiB
Handlebars

{{title item.Node}}
{{#app-view class="node show"}}
{{#block-slot name='notification' as |status type|}}
{{!TODO: Move sessions to its own folder within nodes }}
{{partial 'dc/nodes/notifications'}}
{{/block-slot}}
{{#block-slot name='breadcrumbs'}}
<ol>
<li><a data-test-back href={{href-to 'dc.nodes'}}>All Nodes</a></li>
</ol>
{{/block-slot}}
{{#block-slot name='header'}}
<h1>
{{ item.Node }}
</h1>
<label for="toolbar-toggle"></label>
{{tab-nav
items=(compact
(array
'Health Checks'
'Services'
(if tomography.distances 'Round Trip Time' '')
'Lock Sessions'
'Meta Data'
)
)
selected=selectedTab
}}
{{/block-slot}}
{{#block-slot name='actions'}}
{{#feedback-dialog type='inline'}}
{{#block-slot name='action' as |success error|}}
{{#copy-button success=(action success) error=(action error) clipboardText=item.Address title='copy IP address to clipboard'}}
{{item.Address}}
{{/copy-button}}
{{/block-slot}}
{{#block-slot name='success' as |transition|}}
<p class={{transition}}>
Copied IP Address!
</p>
{{/block-slot}}
{{#block-slot name='error' as |transition|}}
<p class={{transition}}>
Sorry, something went wrong!
</p>
{{/block-slot}}
{{/feedback-dialog}}
{{/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')
)
) key="id" as |panel|
}}
{{#tab-section id=panel.id selected=(eq (if selectedTab selectedTab '') panel.id) onchange=(action "change")}}
{{partial panel.partial}}
{{/tab-section}}
{{/each}}
{{/block-slot}}
{{/app-view}}