open-consul/ui-v2/app/templates/dc/nodes/index.hbs
Kenia d0c4312923 ui: Redesign Service List page (#7605)
* Create GridCollection for nodes page with styling

* Update ListCollection styling

* Update TagList styling

* Create CompositeRow styling component

* Update ConsulServiceList component with styling

* Create service health-checks helper

* Add InstanceCount to the service model

* Add tag-svg to codebase

* Create and update tests for service-list page

* Upgrade @hashicorp/consul-api-double to 2.14.0
2020-05-12 17:14:25 +00:00

72 lines
2.7 KiB
Handlebars

{{title 'Nodes'}}
<AppView @class="node list">
<BlockSlot @name="header">
<h1>
Nodes <em>{{format-number items.length}} total</em>
</h1>
<label for="toolbar-toggle"></label>
</BlockSlot>
<BlockSlot @name="toolbar">
{{#if (gt items.length 0) }}
<CatalogFilter @searchable={{array searchableHealthy searchableUnhealthy}} @search={{s}} @status={{filters.status}} @onchange={{action "filter"}} />
{{/if}}
</BlockSlot>
<BlockSlot @name="content">
{{#if (gt unhealthy.length 0) }}
<div class="unhealthy">
<h2>Unhealthy Nodes</h2>
<div>
{{! think about 2 differing views here }}
<ul>
<ChangeableSet @dispatcher={{searchableUnhealthy}}>
<BlockSlot @name="set" as |unhealthy|>
{{#each unhealthy as |item|}}
<HealthcheckedResource @tagName="li" @data-test-node={{item.Node}} @href={{href-to "dc.nodes.show" item.Node}} @name={{item.Node}} @address={{item.Address}} @checks={{item.Checks}}>
<BlockSlot @name="icon">
{{#if (eq item.Address leader.Address)}}
<span data-test-leader={{leader.Address}} data-tooltip="Leader">Leader</span>
{{/if}}
</BlockSlot>
</HealthcheckedResource>
{{/each}}
</BlockSlot>
<BlockSlot @name="empty">
<p>
There are no unhealthy nodes for that search.
</p>
</BlockSlot>
</ChangeableSet>
</ul>
</div>
</div>
{{/if}}
{{#if (gt healthy.length 0) }}
<div class="healthy">
<h2>Healthy Nodes</h2>
<ChangeableSet @dispatcher={{searchableHealthy}}>
<BlockSlot @name="set" as |healthy|>
<GridCollection @cellHeight={{92}} @items={{healthy}} as |item index|>
<HealthcheckedResource @data-test-node={{item.Node}} @href={{href-to "dc.nodes.show" item.Node}} @name={{item.Node}} @address={{item.Address}} @checks={{item.Checks}}>
<BlockSlot @name="icon">
{{#if (eq item.Address leader.Address)}}
<span data-test-leader={{leader.Address}} data-tooltip="Leader">Leader</span>
{{/if}}
</BlockSlot>
</HealthcheckedResource>
</GridCollection>
</BlockSlot>
<BlockSlot @name="empty">
<p>
There are no healthy nodes for that search.
</p>
</BlockSlot>
</ChangeableSet>
</div>
{{/if}}
{{#if (and (eq healthy.length 0) (eq unhealthy.length 0)) }}
<p>
There are no nodes.
</p>
{{/if}}
</BlockSlot>
</AppView>