github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/templates/clients/index.hbs (about)

     1  {{page-title "Clients"}}
     2  <section class="section">
     3    {{#if this.isForbidden}}
     4      <ForbiddenMessage />
     5    {{else}}
     6      <div class="toolbar">
     7        <div class="toolbar-item">
     8          {{#if this.nodes.length}}
     9            <SearchBox
    10              @searchTerm={{mut this.searchTerm}}
    11              @onChange={{action this.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            <MultiSelectDropdown
    18              data-test-class-facet
    19              @label="Class"
    20              @options={{this.optionsClass}}
    21              @selection={{this.selectionClass}}
    22              @onSelect={{action this.setFacetQueryParam "qpClass"}} />
    23            <MultiSelectDropdown
    24              data-test-state-facet
    25              @label="State"
    26              @options={{this.optionsState}}
    27              @selection={{this.selectionState}}
    28              @onSelect={{action this.setFacetQueryParam "qpState"}} />
    29            <MultiSelectDropdown
    30              data-test-datacenter-facet
    31              @label="Datacenter"
    32              @options={{this.optionsDatacenter}}
    33              @selection={{this.selectionDatacenter}}
    34              @onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
    35            <MultiSelectDropdown
    36              data-test-volume-facet
    37              @label="Volume"
    38              @options={{this.optionsVolume}}
    39              @selection={{this.selectionVolume}}
    40              @onSelect={{action this.setFacetQueryParam "qpVolume"}} />
    41          </div>
    42        </div>
    43      </div>
    44      {{#if this.sortedNodes}}
    45        <ListPagination
    46          @source={{this.sortedNodes}}
    47          @size={{this.pageSize}}
    48          @page={{this.currentPage}} as |p|>
    49          <ListTable
    50            @source={{p.list}}
    51            @sortProperty={{this.sortProperty}}
    52            @sortDescending={{this.sortDescending}}
    53            @class="with-foot" as |t|>
    54            <t.head>
    55              <th class="is-narrow"></th>
    56              <t.sort-by @prop="id">ID</t.sort-by>
    57              <t.sort-by @class="is-200px is-truncatable" @prop="name">Name</t.sort-by>
    58              <t.sort-by @prop="compositeStatus">State</t.sort-by>
    59              <th>Address</th>
    60              <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
    61              <th># Volumes</th>
    62              <th># Allocs</th>
    63            </t.head>
    64            <t.body as |row|>
    65              <ClientNodeRow data-test-client-node-row @node={{row.model}} @onClick={{action "gotoNode" row.model}} />
    66            </t.body>
    67          </ListTable>
    68          <div class="table-foot">
    69            <PageSizeSelect @onChange={{action this.resetPagination}} />
    70            <nav class="pagination" data-test-pagination>
    71              <div class="pagination-numbers">
    72                {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedNodes.length}}
    73              </div>
    74              <p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
    75              <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
    76              <ul class="pagination-list"></ul>
    77            </nav>
    78          </div>
    79        </ListPagination>
    80      {{else}}
    81        <div class="empty-message" data-test-empty-clients-list>
    82          {{#if (eq this.nodes.length 0)}}
    83            <h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Clients</h3>
    84            <p class="empty-message-body">
    85              The cluster currently has no client nodes.
    86            </p>
    87          {{else if (eq this.filteredNodes.length 0)}}
    88            <h3 data-test-empty-clients-list-headline class="empty-message-headline">No Matches</h3>
    89            <p class="empty-message-body">
    90              No clients match your current filter selection.
    91            </p>
    92          {{else if this.searchTerm}}
    93            <h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Matches</h3>
    94            <p class="empty-message-body">No clients match the term <strong>{{this.searchTerm}}</strong></p>
    95          {{/if}}
    96        </div>
    97      {{/if}}
    98    {{/if}}
    99  </section>