open-consul/ui-v2/app/templates/dc/services/show.hbs
John Cowen ef891a23b5
ui: Improve layout of node cards on large and small screens (#4761)
1. The grid based unhealthy cards are now clamped to only four wide
maximum. This means that on larger screen the cards are much wider
meaning you can view more information. Grid gutters are also clamped at
a certain ideal width screen, remaining responsive for anything below
this.

2. The healthy node columns are finally responsive following the same
column rules as unhealthy nodes
2018-10-11 10:19:06 +01:00

67 lines
2.6 KiB
Handlebars

{{#app-view class="service show"}}
{{#block-slot 'breadcrumbs'}}
<ol>
<li><a data-test-back href={{href-to 'dc.services'}}>All Services</a></li>
</ol>
{{/block-slot}}
{{#block-slot 'header'}}
<h1>
{{ item.Service.Service }}
<span data-test-external-source="{{service/external-source item.Service}}" style={{{ concat 'background-image: ' (css-var (concat '--' (service/external-source item.Service) '-color-svg') 'none')}}} data-tooltip="Registered via {{service/external-source item.Service}}">Registered via {{service/external-source item.Service}}</span>
</h1>
{{/block-slot}}
{{#block-slot 'toolbar'}}
{{#if (gt items.length 0) }}
{{catalog-filter filters=healthFilters search=filters.s status=filters.status onchange=(action 'filter')}}
{{/if}}
{{/block-slot}}
{{#block-slot 'content'}}
{{#if (gt item.Tags.length 0)}}
<dl>
<dt>Tags</dt>
<dd data-test-tags>
{{#each item.Tags as |item|}}
<span>{{item}}</span>
{{/each}}
</dd>
</dl>
{{/if}}
{{#if (gt unhealthy.length 0) }}
<div data-test-unhealthy class="unhealthy">
<h2>Unhealthy Nodes</h2>
<div>
<ul>
{{#each unhealthy as |item|}}
{{healthchecked-resource
tagName='li'
data-test-node=item.Node.Node
href=(href-to 'dc.nodes.show' item.Node.Node)
name=item.Node.Node
service=item.Service.ID
address=(concat (default item.Service.Address item.Node.Address) ':' item.Service.Port)
checks=item.Checks
}}
{{/each}}
</ul>
</div>
</div>
{{/if}}
{{#if (gt healthy.length 0) }}
<div data-test-healthy class="healthy">
<h2>Healthy Nodes</h2>
{{#list-collection cellHeight=113 items=healthy as |item index|}}
{{healthchecked-resource
href=(href-to 'dc.nodes.show' item.Node.Node)
data-test-node=item.Node.Node
name=item.Node.Node
service=item.Service.ID
address=(concat (default item.Service.Address item.Node.Address) ':' item.Service.Port)
checks=item.Checks
status=item.Checks.[0].Status
}}
{{/list-collection}}
</div>
{{/if}}
{{/block-slot}}
{{/app-view}}