open-nomad/ui/app/templates/clients/index.hbs

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

{{page-title "Clients"}}
<section class="section">
  {{#if this.isForbidden}}
    <ForbiddenMessage />
  {{else}}
    <div class="toolbar">
      <div class="toolbar-item">
        {{#if this.nodes.length}}
          <SearchBox
            @searchTerm={{mut this.searchTerm}}
            @onChange={{action this.resetPagination}}
            @placeholder="Search clients..."
          />
        {{/if}}
      </div>
      <div class="toolbar-item is-right-aligned is-mobile-full-width">
        <div class="button-bar">
          <MultiSelectDropdown
            data-test-class-facet
            @label="Class"
            @options={{this.optionsClass}}
            @selection={{this.selectionClass}}
            @onSelect={{action this.setFacetQueryParam "qpClass"}}
          />
          <MultiSelectDropdown
            data-test-state-facet
            @label="State"
            @options={{this.optionsState}}
            @selection={{this.selectionState}}
            @onSelect={{action this.setFacetQueryParam "qpState"}}
          />
          <MultiSelectDropdown
            data-test-datacenter-facet
            @label="Datacenter"
            @options={{this.optionsDatacenter}}
            @selection={{this.selectionDatacenter}}
            @onSelect={{action this.setFacetQueryParam "qpDatacenter"}}
          />
          <MultiSelectDropdown
            data-test-version-facet
            @label="Version"
            @options={{this.optionsVersion}}
            @selection={{this.selectionVersion}}
            @onSelect={{action this.setFacetQueryParam "qpVersion"}}
          />
          <MultiSelectDropdown
            data-test-volume-facet
            @label="Volume"
            @options={{this.optionsVolume}}
            @selection={{this.selectionVolume}}
            @onSelect={{action this.setFacetQueryParam "qpVolume"}}
          />
        </div>
      </div>
    </div>
    {{#if this.sortedNodes}}
      <ListPagination
        @source={{this.sortedNodes}}
        @size={{this.pageSize}}
        @page={{this.currentPage}}
        as |p|
      >
        <ListTable
          @source={{p.list}}
          @sortProperty={{this.sortProperty}}
          @sortDescending={{this.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>
            <t.sort-by @prop="compositeStatus">State</t.sort-by>
            <th class="is-200px is-truncatable">Address</th>
            <t.sort-by @prop="datacenter">Datacenter</t.sort-by>
            <t.sort-by @prop="version">Version</t.sort-by>
            <th># Volumes</th>
            <th># Allocs</th>
          </t.head>
          <t.body as |row|>
            <ClientNodeRow
              data-test-client-node-row
              @node={{row.model}}
              @onClick={{action "gotoNode" row.model}}
              {{keyboard-shortcut 
                enumerated=true
                action=(action "gotoNode" row.model)
              }}
            />
          </t.body>
        </ListTable>
        <div class="table-foot">
          <PageSizeSelect @onChange={{action this.resetPagination}} />
          <nav class="pagination" data-test-pagination>
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}}
              of
              {{this.sortedNodes.length}}
            </div>
            <p.prev @class="pagination-previous">{{x-icon
                "chevron-left"
              }}</p.prev>
            <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
            <ul class="pagination-list"></ul>
          </nav>
        </div>
      </ListPagination>
    {{else}}
      <div class="empty-message" data-test-empty-clients-list>
        {{#if (eq this.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>
        {{else if (eq this.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>
        {{else if this.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>{{this.searchTerm}}</strong></p>
        {{/if}}
      </div>
    {{/if}}
  {{/if}}
</section>