luxolus
/
open-nomad
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity
open-nomad/ui/app/templates/clients/index.hbs

100 lines
3.8 KiB
Handlebars
Raw Normal View History

UI: Add page titles (#5924) This uses ember-page-title to add dynamic page titles throughout the route hierarchy. When there’s more than one region, the current current region is added before the final entry of “- Nomad”.
2019-07-17 20:02:58 +00:00
{{title "Clients"}}
Use page-layout for clients routes
2018-07-25 22:02:49 +00:00
<section class="section">
{{#if isForbidden}}
{{partial "partials/forbidden-message"}}
{{else}}
Replaces .columns with .toolbar on the clients page
2019-03-07 05:05:59 +00:00
<div class="toolbar">
Change clients/jobs facets to always right-align This changes the templates so the element that contains the search box is always present, instead hiding only the box itself when there’s nothing to search. Keeping the empty element lets it take up its flexbox space so the facets will no longer be in the centre.
2019-05-15 18:25:30 +00:00
<div class="toolbar-item">
{{#if nodes.length}}
Add the resetPagination hook to search boxes across the app
2018-10-30 17:52:54 +00:00
{{search-box
searchTerm=(mut searchTerm)
onChange=(action resetPagination)
placeholder="Search clients..."}}
Change clients/jobs facets to always right-align This changes the templates so the element that contains the search box is always present, instead hiding only the box itself when there’s nothing to search. Keeping the empty element lets it take up its flexbox space so the facets will no longer be in the centre.
2019-05-15 18:25:30 +00:00
{{/if}}
</div>
Replaces .columns with .toolbar on the clients page
2019-03-07 05:05:59 +00:00
<div class="toolbar-item is-right-aligned is-mobile-full-width">
<div class="button-bar">
Implement faceted search on the clients page
2019-02-12 04:01:46 +00:00
{{multi-select-dropdown
Test coverage for clients faceted search
2019-02-12 19:26:36 +00:00
data-test-class-facet
Implement faceted search on the clients page
2019-02-12 04:01:46 +00:00
label="Class"
options=optionsClass
selection=selectionClass
onSelect=(action setFacetQueryParam "qpClass")}}
{{multi-select-dropdown
Update client list to combine statuses (#5789) The draining, eligibility, and status fields now all show under a combined state column. Draining takes precedence, then (in)eligibility; if neither of those is true, the status displays.
2019-06-19 17:11:17 +00:00
data-test-state-facet
label="State"
options=optionsState
selection=selectionState
onSelect=(action setFacetQueryParam "qpState")}}
Implement faceted search on the clients page
2019-02-12 04:01:46 +00:00
{{multi-select-dropdown
Test coverage for clients faceted search
2019-02-12 19:26:36 +00:00
data-test-datacenter-facet
Implement faceted search on the clients page
2019-02-12 04:01:46 +00:00
label="Datacenter"
options=optionsDatacenter
selection=selectionDatacenter
onSelect=(action setFacetQueryParam "qpDatacenter")}}
Add a volume facet to the clients list page
2020-03-13 07:18:05 +00:00
{{multi-select-dropdown
data-test-volume-facet
label="Volume"
options=optionsVolume
selection=selectionVolume
onSelect=(action setFacetQueryParam "qpVolume")}}
Implement faceted search on the clients page
2019-02-12 04:01:46 +00:00
</div>
Use page-layout for clients routes
2018-07-25 22:02:49 +00:00
</div>
Implement faceted search on the clients page
2019-02-12 04:01:46 +00:00
</div>
Remove inverse block for list-pagination (#6523) As the angle bracket invocation RFC says: > There is no dedicated syntax for passing an "else" block > directly. If needed, that can be passed using the named > blocks syntax. https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#block Unfortunately, using a contextual component doesn’t help as the yield inside that component will still result in content rendering that would show when the source isn’t empty. So we decided to change the interface so you have to check whether the source is empty before using it, which aligns with how list-table works.
2019-10-24 12:05:43 +00:00
{{#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}}
UI: Fix client sorting (#6817) 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.
2019-12-12 19:06:54 +00:00
{{#t.sort-by prop="compositeStatus"}}State{{/t.sort-by}}
Remove inverse block for list-pagination (#6523) As the angle bracket invocation RFC says: > There is no dedicated syntax for passing an "else" block > directly. If needed, that can be passed using the named > blocks syntax. https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#block Unfortunately, using a contextual component doesn’t help as the yield inside that component will still result in content rendering that would show when the source isn’t empty. So we decided to change the interface so you have to check whether the source is empty before using it, which aligns with how list-table works.
2019-10-24 12:05:43 +00:00
<th>Address</th>
{{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}}
Add volume to the client row
2020-02-12 03:52:04 +00:00
<th># Volumes</th>
Remove inverse block for list-pagination (#6523) As the angle bracket invocation RFC says: > There is no dedicated syntax for passing an "else" block > directly. If needed, that can be passed using the named > blocks syntax. https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#block Unfortunately, using a contextual component doesn’t help as the yield inside that component will still result in content rendering that would show when the source isn’t empty. So we decided to change the interface so you have to check whether the source is empty before using it, which aligns with how list-table works.
2019-10-24 12:05:43 +00:00
<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">
Repeat new pagination pattern throughout the app
2020-03-31 04:29:30 +00:00
{{page-size-select onChange=(action resetPagination)}}
Remove inverse block for list-pagination (#6523) As the angle bracket invocation RFC says: > There is no dedicated syntax for passing an "else" block > directly. If needed, that can be passed using the named > blocks syntax. https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#block Unfortunately, using a contextual component doesn’t help as the yield inside that component will still result in content rendering that would show when the source isn’t empty. So we decided to change the interface so you have to check whether the source is empty before using it, which aligns with how list-table works.
2019-10-24 12:05:43 +00:00
<nav class="pagination" data-test-pagination>
<div class="pagination-numbers">
{{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedNodes.length}}
</div>
Repeat new pagination pattern throughout the app
2020-03-31 04:29:30 +00:00
{{#p.prev class="pagination-previous"}}{{x-icon "chevron-left"}}{{/p.prev}}
{{#p.next class="pagination-next"}}{{x-icon "chevron-right"}}{{/p.next}}
Remove inverse block for list-pagination (#6523) As the angle bracket invocation RFC says: > There is no dedicated syntax for passing an "else" block > directly. If needed, that can be passed using the named > blocks syntax. https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#block Unfortunately, using a contextual component doesn’t help as the yield inside that component will still result in content rendering that would show when the source isn’t empty. So we decided to change the interface so you have to check whether the source is empty before using it, which aligns with how list-table works.
2019-10-24 12:05:43 +00:00
<ul class="pagination-list"></ul>
</nav>
</div>
{{/list-pagination}}
Empty states for clients
2017-09-30 01:33:57 +00:00
{{else}}
Use page-layout for clients routes
2018-07-25 22:02:49 +00:00
<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>
Test coverage for clients faceted search
2019-02-12 19:26:36 +00:00
{{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>
Use page-layout for clients routes
2018-07-25 22:02:49 +00:00
{{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>
Remove inverse block for list-pagination (#6523) As the angle bracket invocation RFC says: > There is no dedicated syntax for passing an "else" block > directly. If needed, that can be passed using the named > blocks syntax. https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md#block Unfortunately, using a contextual component doesn’t help as the yield inside that component will still result in content rendering that would show when the source isn’t empty. So we decided to change the interface so you have to check whether the source is empty before using it, which aligns with how list-table works.
2019-10-24 12:05:43 +00:00
{{/if}}
Use page-layout for clients routes
2018-07-25 22:02:49 +00:00
{{/if}}
</section>