github.com/manicqin/nomad@v0.9.5/ui/app/templates/clients/index.hbs (about) 1 {{title "Clients"}} 2 <section class="section"> 3 {{#if isForbidden}} 4 {{partial "partials/forbidden-message"}} 5 {{else}} 6 <div class="toolbar"> 7 <div class="toolbar-item"> 8 {{#if nodes.length}} 9 {{search-box 10 searchTerm=(mut searchTerm) 11 onChange=(action resetPagination) 12 placeholder="Search clients..."}} 13 {{/if}} 14 </div> 15 <div class="toolbar-item is-right-aligned is-mobile-full-width"> 16 <div class="button-bar"> 17 {{multi-select-dropdown 18 data-test-class-facet 19 label="Class" 20 options=optionsClass 21 selection=selectionClass 22 onSelect=(action setFacetQueryParam "qpClass")}} 23 {{multi-select-dropdown 24 data-test-state-facet 25 label="State" 26 options=optionsState 27 selection=selectionState 28 onSelect=(action setFacetQueryParam "qpState")}} 29 {{multi-select-dropdown 30 data-test-datacenter-facet 31 label="Datacenter" 32 options=optionsDatacenter 33 selection=selectionDatacenter 34 onSelect=(action setFacetQueryParam "qpDatacenter")}} 35 </div> 36 </div> 37 </div> 38 {{#if sortedNodes}} 39 {{#list-pagination 40 source=sortedNodes 41 size=pageSize 42 page=currentPage as |p|}} 43 {{#list-table 44 source=p.list 45 sortProperty=sortProperty 46 sortDescending=sortDescending 47 class="with-foot" as |t|}} 48 {{#t.head}} 49 <th class="is-narrow"></th> 50 {{#t.sort-by prop="id"}}ID{{/t.sort-by}} 51 {{#t.sort-by class="is-200px is-truncatable" prop="name"}}Name{{/t.sort-by}} 52 {{#t.sort-by prop="compositeStatus"}}State{{/t.sort-by}} 53 <th>Address</th> 54 {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}} 55 <th># Allocs</th> 56 {{/t.head}} 57 {{#t.body as |row|}} 58 {{client-node-row data-test-client-node-row node=row.model onClick=(action "gotoNode" row.model)}} 59 {{/t.body}} 60 {{/list-table}} 61 <div class="table-foot"> 62 <nav class="pagination" data-test-pagination> 63 <div class="pagination-numbers"> 64 {{p.startsAt}}–{{p.endsAt}} of {{sortedNodes.length}} 65 </div> 66 {{#p.prev class="pagination-previous"}} < {{/p.prev}} 67 {{#p.next class="pagination-next"}} > {{/p.next}} 68 <ul class="pagination-list"></ul> 69 </nav> 70 </div> 71 {{/list-pagination}} 72 {{else}} 73 <div class="empty-message" data-test-empty-clients-list> 74 {{#if (eq nodes.length 0)}} 75 <h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Clients</h3> 76 <p class="empty-message-body"> 77 The cluster currently has no client nodes. 78 </p> 79 {{else if (eq filteredNodes.length 0)}} 80 <h3 data-test-empty-clients-list-headline class="empty-message-headline">No Matches</h3> 81 <p class="empty-message-body"> 82 No clients match your current filter selection. 83 </p> 84 {{else if searchTerm}} 85 <h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Matches</h3> 86 <p class="empty-message-body">No clients match the term <strong>{{searchTerm}}</strong></p> 87 {{/if}} 88 </div> 89 {{/if}} 90 {{/if}} 91 </section>