open-consul/ui-v2/app/templates/dc/nodes/index.hbs

137 lines
4.7 KiB
Handlebars

{{title 'Nodes'}}
<EventSource @src={{items}} />
{{#let (selectable-key-values
(array "" "All (Any Status)")
(array "critical" "Critical Checks")
(array "warning" "Warning Checks")
(array "passing" "Passing Checks")
selected=filterBy
)
as |filter|
}}
<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) }}
<SearchBar
data-test-catalog-filter
@value={{search}}
@onsearch={{action (mut search) value="target.value"}}
@selected={{filter.selected}}
@options={{filter.items}}
@onchange={{action (mut filterBy) value='target.value'}}
/>
{{/if}}
</BlockSlot>
<BlockSlot @name="content">
{{#let (filter-by "Checks" (action "isUnhealthy") items) as |unhealthy|}}
{{#if (gt unhealthy.length 0) }}
<div class="unhealthy">
<h2>Unhealthy Nodes</h2>
<div>
{{! think about 2 differing views here }}
<ul>
<ChangeableSet
@dispatcher={{
searchable
'unhealthyNode'
(if (eq filter.selected.key "")
unhealthy
(filter-by "Checks" (action "hasStatus" filter.selected.key) unhealthy filter.selected.key)
)
}}
@terms={{search}}
>
<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">
<li class="empty">
<EmptyState>
<BlockSlot @name="header">
<h2>No nodes found</h2>
</BlockSlot>
<BlockSlot @name="body">
<p>
There don't seem to be any nodes matching that search.
</p>
</BlockSlot>
</EmptyState>
</li>
</BlockSlot>
</ChangeableSet>
</ul>
</div>
</div>
{{/if}}
{{/let}}
{{#let (filter-by "Checks" (action "isHealthy") items) as |healthy|}}
{{#if (gt healthy.length 0) }}
<div class="healthy">
<h2>Healthy Nodes</h2>
<ChangeableSet
@dispatcher={{
searchable
'healthyNode'
(if (eq filter.selected.key "")
healthy
(filter-by "Checks" (action "hasStatus" filter.selected.key) healthy filter.selected.key)
)
}}
@terms={{search}}
>
<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">
<EmptyState>
<BlockSlot @name="header">
<h2>No nodes found</h2>
</BlockSlot>
<BlockSlot @name="body">
<p>
There don't seem to be any nodes matching that search.
</p>
</BlockSlot>
</EmptyState>
</BlockSlot>
</ChangeableSet>
</div>
{{/if}}
{{/let}}
{{#if (eq items.length 0) }}
<EmptyState @allowLogin={{true}}>
<BlockSlot @name="header">
<h2>Welcome to Nodes</h2>
</BlockSlot>
<BlockSlot @name="body">
<p>
There don't seem to be any nodes, or you may not have access to view nodes yet.
</p>
</BlockSlot>
</EmptyState>
{{/if}}
</BlockSlot>
</AppView>
{{/let}}