github.com/hernad/nomad@v1.6.112/ui/app/templates/clients/index.hbs (about)

     1  {{!
     2    Copyright (c) HashiCorp, Inc.
     3    SPDX-License-Identifier: MPL-2.0
     4  ~}}
     5  
     6  {{page-title "Clients"}}
     7  <section class="section">
     8    {{#if this.isForbidden}}
     9      <ForbiddenMessage />
    10    {{else}}
    11      <div class="toolbar">
    12        <div class="toolbar-item">
    13          {{#if this.nodes.length}}
    14            <SearchBox
    15              @searchTerm={{mut this.searchTerm}}
    16              @onChange={{action this.resetPagination}}
    17              @placeholder="Search clients..."
    18            />
    19          {{/if}}
    20        </div>
    21        <div class="toolbar-item is-right-aligned is-mobile-full-width">
    22          <div class="button-bar">
    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            />
    30            <MultiSelectDropdown
    31              data-test-node-pool-facet
    32              @label="Node Pool"
    33              @options={{this.optionsNodePool}}
    34              @selection={{this.selectionNodePool}}
    35              @onSelect={{action this.setFacetQueryParam "qpNodePool"}}
    36            />
    37            <MultiSelectDropdown
    38              data-test-class-facet
    39              @label="Class"
    40              @options={{this.optionsClass}}
    41              @selection={{this.selectionClass}}
    42              @onSelect={{action this.setFacetQueryParam "qpClass"}}
    43            />
    44            <MultiSelectDropdown
    45              data-test-datacenter-facet
    46              @label="Datacenter"
    47              @options={{this.optionsDatacenter}}
    48              @selection={{this.selectionDatacenter}}
    49              @onSelect={{action this.setFacetQueryParam "qpDatacenter"}}
    50            />
    51            <MultiSelectDropdown
    52              data-test-version-facet
    53              @label="Version"
    54              @options={{this.optionsVersion}}
    55              @selection={{this.selectionVersion}}
    56              @onSelect={{action this.setFacetQueryParam "qpVersion"}}
    57            />
    58            <MultiSelectDropdown
    59              data-test-volume-facet
    60              @label="Volume"
    61              @options={{this.optionsVolume}}
    62              @selection={{this.selectionVolume}}
    63              @onSelect={{action this.setFacetQueryParam "qpVolume"}}
    64            />
    65          </div>
    66        </div>
    67      </div>
    68      {{#if this.sortedNodes}}
    69        <ListPagination
    70          @source={{this.sortedNodes}}
    71          @size={{this.pageSize}}
    72          @page={{this.currentPage}}
    73          as |p|
    74        >
    75          <ListTable
    76            @source={{p.list}}
    77            @sortProperty={{this.sortProperty}}
    78            @sortDescending={{this.sortDescending}}
    79            @class="with-foot"
    80            as |t|
    81          >
    82            <t.head>
    83              <th class="is-narrow"></th>
    84              <t.sort-by @prop="id">ID</t.sort-by>
    85              <t.sort-by
    86                @class="is-200px is-truncatable"
    87                @prop="name"
    88              >Name</t.sort-by>
    89              <t.sort-by @prop="compositeStatus">State</t.sort-by>
    90              <th class="is-200px is-truncatable">Address</th>
    91              <t.sort-by @prop="nodePool">Node Pool</t.sort-by>
    92              <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
    93              <t.sort-by @prop="version">Version</t.sort-by>
    94              <th># Volumes</th>
    95              <th># Allocs</th>
    96            </t.head>
    97            <t.body as |row|>
    98              <ClientNodeRow
    99                data-test-client-node-row
   100                @node={{row.model}}
   101                @onClick={{action "gotoNode" row.model}}
   102                {{keyboard-shortcut
   103                  enumerated=true
   104                  action=(action "gotoNode" row.model)
   105                }}
   106              />
   107            </t.body>
   108          </ListTable>
   109          <div class="table-foot">
   110            <PageSizeSelect @onChange={{action this.resetPagination}} />
   111            <nav class="pagination" data-test-pagination>
   112              <div class="pagination-numbers">
   113                {{p.startsAt}}&ndash;{{p.endsAt}}
   114                of
   115                {{this.sortedNodes.length}}
   116              </div>
   117              <p.prev @class="pagination-previous">{{x-icon
   118                  "chevron-left"
   119                }}</p.prev>
   120              <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
   121              <ul class="pagination-list"></ul>
   122            </nav>
   123          </div>
   124        </ListPagination>
   125      {{else}}
   126        <div class="empty-message" data-test-empty-clients-list>
   127          {{#if (eq this.nodes.length 0)}}
   128            <h3
   129              class="empty-message-headline"
   130              data-test-empty-clients-list-headline
   131            >No Clients</h3>
   132            <p class="empty-message-body">
   133              The cluster currently has no client nodes.
   134            </p>
   135          {{else if (eq this.filteredNodes.length 0)}}
   136            <h3
   137              data-test-empty-clients-list-headline
   138              class="empty-message-headline"
   139            >No Matches</h3>
   140            <p class="empty-message-body">
   141              No clients match your current filter selection.
   142            </p>
   143          {{else if this.searchTerm}}
   144            <h3
   145              class="empty-message-headline"
   146              data-test-empty-clients-list-headline
   147            >No Matches</h3>
   148            <p class="empty-message-body">No clients match the term
   149              <strong>{{this.searchTerm}}</strong></p>
   150          {{/if}}
   151        </div>
   152      {{/if}}
   153    {{/if}}
   154  </section>