github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/templates/jobs/job/clients.hbs (about)

     1  {{page-title "Job " this.job.name " clients"}}
     2  <JobSubnav @job={{this.job}} />
     3  <section class="section">
     4    {{#if this.nodes.length}}
     5      <div class="toolbar">
     6        <div class="toolbar-item">
     7          <SearchBox
     8            data-test-clients-search
     9            @searchTerm={{mut this.searchTerm}}
    10            @onChange={{action this.resetPagination}}
    11            @placeholder="Search clients..."
    12          />
    13        </div>
    14        <div class="toolbar-item is-right-aligned">
    15          <div class="button-bar">
    16            <MultiSelectDropdown
    17              data-test-job-status-facet
    18              @label="Job Status"
    19              @options={{this.optionsJobStatus}}
    20              @selection={{this.selectionStatus}}
    21              @onSelect={{action this.setFacetQueryParam "qpStatus"}}
    22            />
    23            <MultiSelectDropdown
    24              data-test-datacenter-facet
    25              @label="Datacenter"
    26              @options={{this.optionsDatacenter}}
    27              @selection={{this.selectionDatacenter}}
    28              @onSelect={{action this.setFacetQueryParam "qpDatacenter"}}
    29            />
    30            <MultiSelectDropdown
    31              data-test-client-class-facet
    32              @label="Client Class"
    33              @options={{this.optionsClientClass}}
    34              @selection={{this.selectionClientClass}}
    35              @onSelect={{action this.setFacetQueryParam "qpClientClass"}}
    36            />
    37          </div>
    38        </div>
    39      </div>
    40      {{#if this.sortedClients}}
    41        <ListPagination
    42          @source={{this.sortedClients}}
    43          @size={{this.pageSize}}
    44          @page={{this.currentPage}}
    45          @class="clients" as |p|
    46        >
    47          <ListTable
    48            @source={{p.list}}
    49            @sortProperty={{this.sortProperty}}
    50            @sortDescending={{this.sortDescending}}
    51            @class="with-foot" as |t|
    52          >
    53            <t.head>
    54              <t.sort-by @prop="node.id">Client ID</t.sort-by>
    55              <t.sort-by @prop="node.name" class="is-200px is-truncatable">Client Name</t.sort-by>
    56              <t.sort-by @prop="createTime" @title="Create Time">Created</t.sort-by>
    57              <t.sort-by @prop="modifyTime" @title="Modify Time">Modified</t.sort-by>
    58              <t.sort-by @prop="jobStatus">Job Status</t.sort-by>
    59              <th class="is-3">Allocation Summary</th>
    60            </t.head>
    61            <t.body as |row|>
    62              <JobClientStatusRow
    63                @row={{row}}
    64                @onClick={{this.gotoClient}}
    65              />
    66            </t.body>
    67          </ListTable>
    68          <div class="table-foot">
    69            <nav class="pagination">
    70              <div class="pagination-numbers">
    71                {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedClients.length}}
    72              </div>
    73              <p.prev @class="pagination-previous"> &lt; </p.prev>
    74              <p.next @class="pagination-next"> &gt; </p.next>
    75              <ul class="pagination-list"></ul>
    76            </nav>
    77          </div>
    78        </ListPagination>
    79      {{else}}
    80        <div class="boxed-section-body">
    81          <div class="empty-message" data-test-empty-clients-list>
    82            <h3 class="empty-message-headline" data-test-empty-clients-list-headline>
    83              No Matches
    84            </h3>
    85            <p class="empty-message-body">
    86              No clients match the term
    87              <strong>
    88                {{this.searchTerm}}
    89              </strong>
    90            </p>
    91          </div>
    92        </div>
    93      {{/if}}
    94    {{else}}
    95      <div class="boxed-section-body">
    96        <div class="empty-message" data-test-empty-clients-list>
    97          <h3 class="empty-message-headline" data-test-empty-clients-list-headline>
    98            No Clients
    99          </h3>
   100          <p class="empty-message-body">
   101            No clients available.
   102          </p>
   103        </div>
   104      </div>
   105    {{/if}}
   106  </section>