09067b4eb7
There are two changes here, and some caveats/commentary: 1. The “State“ table column was actually sorting only by status. The state was not an actual property, just something calculated in each client row, as a product of status, isEligible, and isDraining. This PR adds isDraining as a component of compositeState so it can be used for sorting. 2. The Sortable mixin declares dependent keys that cause the sort to be live-updating, but only if the members of the array change, such as if a new client is added, but not if any of the sortable properties change. This PR adds a SortableFactory function that generates a mixin whose listSorted computed property includes dependent keys for the sortable properties, so the table will live-update if any of the sortable properties change, not just the array members. There’s a warning if you use SortableFactory without dependent keys and via the original Sortable interface, so we can eventually migrate away from it.
92 lines
3.4 KiB
Handlebars
92 lines
3.4 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")}}
|
|
</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># 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">
|
|
<nav class="pagination" data-test-pagination>
|
|
<div class="pagination-numbers">
|
|
{{p.startsAt}}–{{p.endsAt}} of {{sortedNodes.length}}
|
|
</div>
|
|
{{#p.prev class="pagination-previous"}} < {{/p.prev}}
|
|
{{#p.next class="pagination-next"}} > {{/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>
|