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

60 lines
2.1 KiB
Handlebars

{{title item.Service.Service}}
{{#app-view class="service show"}}
{{#block-slot name='notification' as |status type|}}
{{partial 'dc/services/notifications'}}
{{/block-slot}}
{{#block-slot name='breadcrumbs'}}
<ol>
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
</ol>
{{/block-slot}}
{{#block-slot name='header'}}
<h1>
{{item.Service.Service}}
{{#with (service/external-source item.Service) as |externalSource|}}
{{#with (css-var (concat '--' externalSource '-color-svg') 'none') as |bg|}}
{{#if (not-eq bg 'none')}}
<span data-test-external-source={{externalSource}} style={{{concat 'background-image:' bg}}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
{{/if}}
{{/with}}
{{/with}}
{{#if (eq item.Service.Kind 'connect-proxy')}}
<span class="kind-proxy">Proxy</span>
{{else if (eq item.Service.Kind 'mesh-gateway')}}
<span class="kind-proxy">Mesh Gateway</span>
{{/if}}
</h1>
<label for="toolbar-toggle"></label>
{{tab-nav
items=(compact
(array
'Instances'
(if (not-eq chain null) 'Routing' '')
'Tags'
)
)
selected=selectedTab
}}
{{/block-slot}}
{{#block-slot name='actions'}}
{{#if urls.service}}
{{#templated-anchor data-test-dashboard-anchor href=urls.service vars=(hash Datacenter=dc Service=(hash Name=item.Service.Service)) rel="external"}}Open Dashboard{{/templated-anchor}}
{{/if}}
{{/block-slot}}
{{#block-slot name='content'}}
{{#each
(compact
(array
(hash id=(slugify 'Instances') partial='dc/services/instances')
(if (not-eq chain null) (hash id=(slugify 'Routing') partial='dc/services/routing') '')
(hash id=(slugify 'Tags') partial='dc/services/tags')
)
) 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}}