e9e52e0dfe
This doesn’t include Ember Data, as we are still back on 3.12. Most changes are deprecation updates, linting fixes, and dependencies. It can be read commit-by-commit, though many of them are mechanical and skimmable. For the new linting exclusions, I’ve added them to the Tech Debt list. The decrease in test count is because linting is no longer included in ember test. There’s a new deprecation warning in the logs that can be fixed by updating Ember Power Select but when I tried that it caused it to render incorrectly, so I decided to ignore it for now and address it separately.
100 lines
3.9 KiB
Handlebars
100 lines
3.9 KiB
Handlebars
{{page-title "Clients"}}
|
|
<section class="section">
|
|
{{#if this.isForbidden}}
|
|
<ForbiddenMessage />
|
|
{{else}}
|
|
<div class="toolbar">
|
|
<div class="toolbar-item">
|
|
{{#if this.nodes.length}}
|
|
<SearchBox
|
|
@searchTerm={{mut this.searchTerm}}
|
|
@onChange={{action this.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={{this.optionsClass}}
|
|
@selection={{this.selectionClass}}
|
|
@onSelect={{action this.setFacetQueryParam "qpClass"}} />
|
|
<MultiSelectDropdown
|
|
data-test-state-facet
|
|
@label="State"
|
|
@options={{this.optionsState}}
|
|
@selection={{this.selectionState}}
|
|
@onSelect={{action this.setFacetQueryParam "qpState"}} />
|
|
<MultiSelectDropdown
|
|
data-test-datacenter-facet
|
|
@label="Datacenter"
|
|
@options={{this.optionsDatacenter}}
|
|
@selection={{this.selectionDatacenter}}
|
|
@onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
|
|
<MultiSelectDropdown
|
|
data-test-volume-facet
|
|
@label="Volume"
|
|
@options={{this.optionsVolume}}
|
|
@selection={{this.selectionVolume}}
|
|
@onSelect={{action this.setFacetQueryParam "qpVolume"}} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if this.sortedNodes}}
|
|
<ListPagination
|
|
@source={{this.sortedNodes}}
|
|
@size={{this.pageSize}}
|
|
@page={{this.currentPage}} as |p|>
|
|
<ListTable
|
|
@source={{p.list}}
|
|
@sortProperty={{this.sortProperty}}
|
|
@sortDescending={{this.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 this.resetPagination}} />
|
|
<nav class="pagination" data-test-pagination>
|
|
<div class="pagination-numbers">
|
|
{{p.startsAt}}–{{p.endsAt}} of {{this.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 this.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 this.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 this.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>{{this.searchTerm}}</strong></p>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
</section>
|