100 lines
3.8 KiB
Handlebars
100 lines
3.8 KiB
Handlebars
{{title "Clients"}}
|
|
<section class="section">
|
|
{{#if isForbidden}}
|
|
{{partial "partials/forbidden-message"}}
|
|
{{else}}
|
|
<div class="toolbar">
|
|
<div class="toolbar-item">
|
|
{{#if nodes.length}}
|
|
{{search-box
|
|
searchTerm=(mut searchTerm)
|
|
onChange=(action resetPagination)
|
|
placeholder="Search clients..."}}
|
|
{{/if}}
|
|
</div>
|
|
<div class="toolbar-item is-right-aligned is-mobile-full-width">
|
|
<div class="button-bar">
|
|
{{multi-select-dropdown
|
|
data-test-class-facet
|
|
label="Class"
|
|
options=optionsClass
|
|
selection=selectionClass
|
|
onSelect=(action setFacetQueryParam "qpClass")}}
|
|
{{multi-select-dropdown
|
|
data-test-state-facet
|
|
label="State"
|
|
options=optionsState
|
|
selection=selectionState
|
|
onSelect=(action setFacetQueryParam "qpState")}}
|
|
{{multi-select-dropdown
|
|
data-test-datacenter-facet
|
|
label="Datacenter"
|
|
options=optionsDatacenter
|
|
selection=selectionDatacenter
|
|
onSelect=(action setFacetQueryParam "qpDatacenter")}}
|
|
{{multi-select-dropdown
|
|
data-test-volume-facet
|
|
label="Volume"
|
|
options=optionsVolume
|
|
selection=selectionVolume
|
|
onSelect=(action setFacetQueryParam "qpVolume")}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if sortedNodes}}
|
|
{{#list-pagination
|
|
source=sortedNodes
|
|
size=pageSize
|
|
page=currentPage as |p|}}
|
|
{{#list-table
|
|
source=p.list
|
|
sortProperty=sortProperty
|
|
sortDescending=sortDescending
|
|
class="with-foot" as |t|}}
|
|
{{#t.head}}
|
|
<th class="is-narrow"></th>
|
|
{{#t.sort-by prop="id"}}ID{{/t.sort-by}}
|
|
{{#t.sort-by class="is-200px is-truncatable" prop="name"}}Name{{/t.sort-by}}
|
|
{{#t.sort-by prop="compositeStatus"}}State{{/t.sort-by}}
|
|
<th>Address</th>
|
|
{{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}}
|
|
<th># Volumes</th>
|
|
<th># Allocs</th>
|
|
{{/t.head}}
|
|
{{#t.body as |row|}}
|
|
{{client-node-row data-test-client-node-row node=row.model onClick=(action "gotoNode" row.model)}}
|
|
{{/t.body}}
|
|
{{/list-table}}
|
|
<div class="table-foot">
|
|
{{page-size-select onChange=(action resetPagination)}}
|
|
<nav class="pagination" data-test-pagination>
|
|
<div class="pagination-numbers">
|
|
{{p.startsAt}}–{{p.endsAt}} of {{sortedNodes.length}}
|
|
</div>
|
|
{{#p.prev class="pagination-previous"}}{{x-icon "chevron-left"}}{{/p.prev}}
|
|
{{#p.next class="pagination-next"}}{{x-icon "chevron-right"}}{{/p.next}}
|
|
<ul class="pagination-list"></ul>
|
|
</nav>
|
|
</div>
|
|
{{/list-pagination}}
|
|
{{else}}
|
|
<div class="empty-message" data-test-empty-clients-list>
|
|
{{#if (eq nodes.length 0)}}
|
|
<h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Clients</h3>
|
|
<p class="empty-message-body">
|
|
The cluster currently has no client nodes.
|
|
</p>
|
|
{{else if (eq filteredNodes.length 0)}}
|
|
<h3 data-test-empty-clients-list-headline class="empty-message-headline">No Matches</h3>
|
|
<p class="empty-message-body">
|
|
No clients match your current filter selection.
|
|
</p>
|
|
{{else if searchTerm}}
|
|
<h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Matches</h3>
|
|
<p class="empty-message-body">No clients match the term <strong>{{searchTerm}}</strong></p>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</section>
|