github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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            />
    14          {{/if}}
    15        </div>
    16        <div class="toolbar-item is-right-aligned is-mobile-full-width">
    17          <div class="button-bar">
    18            <MultiSelectDropdown
    19              data-test-class-facet
    20              @label="Class"
    21              @options={{this.optionsClass}}
    22              @selection={{this.selectionClass}}
    23              @onSelect={{action this.setFacetQueryParam "qpClass"}}
    24            />
    25            <MultiSelectDropdown
    26              data-test-state-facet
    27              @label="State"
    28              @options={{this.optionsState}}
    29              @selection={{this.selectionState}}
    30              @onSelect={{action this.setFacetQueryParam "qpState"}}
    31            />
    32            <MultiSelectDropdown
    33              data-test-datacenter-facet
    34              @label="Datacenter"
    35              @options={{this.optionsDatacenter}}
    36              @selection={{this.selectionDatacenter}}
    37              @onSelect={{action this.setFacetQueryParam "qpDatacenter"}}
    38            />
    39            <MultiSelectDropdown
    40              data-test-version-facet
    41              @label="Version"
    42              @options={{this.optionsVersion}}
    43              @selection={{this.selectionVersion}}
    44              @onSelect={{action this.setFacetQueryParam "qpVersion"}}
    45            />
    46            <MultiSelectDropdown
    47              data-test-volume-facet
    48              @label="Volume"
    49              @options={{this.optionsVolume}}
    50              @selection={{this.selectionVolume}}
    51              @onSelect={{action this.setFacetQueryParam "qpVolume"}}
    52            />
    53          </div>
    54        </div>
    55      </div>
    56      {{#if this.sortedNodes}}
    57        <ListPagination
    58          @source={{this.sortedNodes}}
    59          @size={{this.pageSize}}
    60          @page={{this.currentPage}}
    61          as |p|
    62        >
    63          <ListTable
    64            @source={{p.list}}
    65            @sortProperty={{this.sortProperty}}
    66            @sortDescending={{this.sortDescending}}
    67            @class="with-foot"
    68            as |t|
    69          >
    70            <t.head>
    71              <th class="is-narrow"></th>
    72              <t.sort-by @prop="id">ID</t.sort-by>
    73              <t.sort-by
    74                @class="is-200px is-truncatable"
    75                @prop="name"
    76              >Name</t.sort-by>
    77              <t.sort-by @prop="compositeStatus">State</t.sort-by>
    78              <th class="is-200px is-truncatable">Address</th>
    79              <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
    80              <t.sort-by @prop="version">Version</t.sort-by>
    81              <th># Volumes</th>
    82              <th># Allocs</th>
    83            </t.head>
    84            <t.body as |row|>
    85              <ClientNodeRow
    86                data-test-client-node-row
    87                @node={{row.model}}
    88                @onClick={{action "gotoNode" row.model}}
    89                {{keyboard-shortcut 
    90                  enumerated=true
    91                  action=(action "gotoNode" row.model)
    92                }}
    93              />
    94            </t.body>
    95          </ListTable>
    96          <div class="table-foot">
    97            <PageSizeSelect @onChange={{action this.resetPagination}} />
    98            <nav class="pagination" data-test-pagination>
    99              <div class="pagination-numbers">
   100                {{p.startsAt}}&ndash;{{p.endsAt}}
   101                of
   102                {{this.sortedNodes.length}}
   103              </div>
   104              <p.prev @class="pagination-previous">{{x-icon
   105                  "chevron-left"
   106                }}</p.prev>
   107              <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
   108              <ul class="pagination-list"></ul>
   109            </nav>
   110          </div>
   111        </ListPagination>
   112      {{else}}
   113        <div class="empty-message" data-test-empty-clients-list>
   114          {{#if (eq this.nodes.length 0)}}
   115            <h3
   116              class="empty-message-headline"
   117              data-test-empty-clients-list-headline
   118            >No Clients</h3>
   119            <p class="empty-message-body">
   120              The cluster currently has no client nodes.
   121            </p>
   122          {{else if (eq this.filteredNodes.length 0)}}
   123            <h3
   124              data-test-empty-clients-list-headline
   125              class="empty-message-headline"
   126            >No Matches</h3>
   127            <p class="empty-message-body">
   128              No clients match your current filter selection.
   129            </p>
   130          {{else if this.searchTerm}}
   131            <h3
   132              class="empty-message-headline"
   133              data-test-empty-clients-list-headline
   134            >No Matches</h3>
   135            <p class="empty-message-body">No clients match the term
   136              <strong>{{this.searchTerm}}</strong></p>
   137          {{/if}}
   138        </div>
   139      {{/if}}
   140    {{/if}}
   141  </section>