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

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