40332963ef
This updates to Ember 3.16 but leaves Ember Data at 3.12 so we don’t need to use the model fragments beta. It can be reviewed on a commit-by-commit basis: blueprint updates, fixes for test failures, and the removal of now-deprecated partials. It’s not a true update to Octane as that would involve turning on template-only components by default, which breaks various things. We can accomplish that separately and then add the edition setting to package.json.
100 lines
3.8 KiB
Handlebars
100 lines
3.8 KiB
Handlebars
{{title "Clients"}}
|
|
<section class="section">
|
|
{{#if isForbidden}}
|
|
<ForbiddenMessage />
|
|
{{else}}
|
|
<div class="toolbar">
|
|
<div class="toolbar-item">
|
|
{{#if nodes.length}}
|
|
<SearchBox
|
|
@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">
|
|
<MultiSelectDropdown
|
|
data-test-class-facet
|
|
@label="Class"
|
|
@options={{optionsClass}}
|
|
@selection={{selectionClass}}
|
|
@onSelect={{action setFacetQueryParam "qpClass"}} />
|
|
<MultiSelectDropdown
|
|
data-test-state-facet
|
|
@label="State"
|
|
@options={{optionsState}}
|
|
@selection={{selectionState}}
|
|
@onSelect={{action setFacetQueryParam "qpState"}} />
|
|
<MultiSelectDropdown
|
|
data-test-datacenter-facet
|
|
@label="Datacenter"
|
|
@options={{optionsDatacenter}}
|
|
@selection={{selectionDatacenter}}
|
|
@onSelect={{action setFacetQueryParam "qpDatacenter"}} />
|
|
<MultiSelectDropdown
|
|
data-test-volume-facet
|
|
@label="Volume"
|
|
@options={{optionsVolume}}
|
|
@selection={{selectionVolume}}
|
|
@onSelect={{action setFacetQueryParam "qpVolume"}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if sortedNodes}}
|
|
<ListPagination
|
|
@source={{sortedNodes}}
|
|
@size={{pageSize}}
|
|
@page={{currentPage}} as |p|>
|
|
<ListTable
|
|
@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|>
|
|
<ClientNodeRow data-test-client-node-row @node={{row.model}} @onClick={{action "gotoNode" row.model}} />
|
|
</t.body>
|
|
</ListTable>
|
|
<div class="table-foot">
|
|
<PageSizeSelect @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>
|
|
</ListPagination>
|
|
{{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>
|