github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/templates/jobs/index.hbs (about)

     1  {{page-title "Jobs"}}
     2  <section class="section">
     3    {{#if this.isForbidden}}
     4      <ForbiddenMessage />
     5    {{else}}
     6      <div class="toolbar">
     7        <div class="toolbar-item">
     8          {{#if this.visibleJobs.length}}
     9            <SearchBox
    10              data-test-jobs-search
    11              @searchTerm={{mut this.searchTerm}}
    12              @onChange={{action this.resetPagination}}
    13              @placeholder="Search jobs..." />
    14          {{/if}}
    15        </div>
    16        {{#if (media "isMobile")}}
    17          <div class="toolbar-item is-right-aligned">
    18            {{#if (can "run job")}}
    19              <LinkTo @route="jobs.run" data-test-run-job class="button is-primary">Run Job</LinkTo>
    20            {{else}}
    21              <button
    22                data-test-run-job
    23                class="button is-primary is-disabled tooltip is-right-aligned"
    24                aria-label="You don’t have permission to run jobs"
    25                disabled
    26                type="button"
    27              >Run Job</button>
    28            {{/if}}
    29          </div>
    30        {{/if}}
    31        <div class="toolbar-item is-right-aligned is-mobile-full-width">
    32          <div class="button-bar">
    33            <MultiSelectDropdown
    34              data-test-type-facet
    35              @label="Type"
    36              @options={{this.optionsType}}
    37              @selection={{this.selectionType}}
    38              @onSelect={{action this.setFacetQueryParam "qpType"}} />
    39            <MultiSelectDropdown
    40              data-test-status-facet
    41              @label="Status"
    42              @options={{this.optionsStatus}}
    43              @selection={{this.selectionStatus}}
    44              @onSelect={{action this.setFacetQueryParam "qpStatus"}} />
    45            <MultiSelectDropdown
    46              data-test-datacenter-facet
    47              @label="Datacenter"
    48              @options={{this.optionsDatacenter}}
    49              @selection={{this.selectionDatacenter}}
    50              @onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
    51            <MultiSelectDropdown
    52              data-test-prefix-facet
    53              @label="Prefix"
    54              @options={{this.optionsPrefix}}
    55              @selection={{this.selectionPrefix}}
    56              @onSelect={{action this.setFacetQueryParam "qpPrefix"}} />
    57          </div>
    58        </div>
    59        {{#if (not (media "isMobile"))}}
    60          <div class="toolbar-item is-right-aligned">
    61            {{#if (can "run job")}}
    62              <LinkTo @route="jobs.run" data-test-run-job class="button is-primary">Run Job</LinkTo>
    63            {{else}}
    64              <button
    65                data-test-run-job
    66                class="button is-primary is-disabled tooltip is-right-aligned"
    67                aria-label="You don’t have permission to run jobs"
    68                disabled
    69                type="button"
    70              >Run Job</button>
    71            {{/if}}
    72          </div>
    73        {{/if}}
    74      </div>
    75      {{#if this.sortedJobs}}
    76        <ListPagination
    77          @source={{this.sortedJobs}}
    78          @size={{this.pageSize}}
    79          @page={{this.currentPage}} as |p|>
    80          <ListTable
    81            @source={{p.list}}
    82            @sortProperty={{this.sortProperty}}
    83            @sortDescending={{this.sortDescending}}
    84            @class="with-foot" as |t|>
    85            <t.head>
    86              <t.sort-by @prop="name">Name</t.sort-by>
    87              <t.sort-by @prop="status">Status</t.sort-by>
    88              <t.sort-by @prop="type">Type</t.sort-by>
    89              <t.sort-by @prop="priority">Priority</t.sort-by>
    90              <th>Groups</th>
    91              <th class="is-3">Summary</th>
    92            </t.head>
    93            <t.body @key="model.id" as |row|>
    94              <JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} @onClick={{action "gotoJob" row.model}} />
    95            </t.body>
    96          </ListTable>
    97          <div class="table-foot">
    98            <PageSizeSelect @onChange={{action this.resetPagination}} />
    99            <nav class="pagination">
   100              <div class="pagination-numbers">
   101                {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedJobs.length}}
   102                {{#if this.searchTerm}}
   103                  <em>({{dec this.sortedJobs.length this.filteredJobs.length}} hidden by search term)</em>
   104                {{/if}}
   105              </div>
   106              <p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</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 data-test-empty-jobs-list class="empty-message">
   114          {{#if (eq this.visibleJobs.length 0)}}
   115            <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
   116            <p class="empty-message-body">
   117              The cluster is currently empty.
   118            </p>
   119          {{else if (eq this.filteredJobs.length 0)}}
   120            <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
   121            <p class="empty-message-body">
   122              No jobs match your current filter selection.
   123            </p>
   124          {{else if this.searchTerm}}
   125            <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
   126            <p class="empty-message-body">No jobs match the term <strong>{{this.searchTerm}}</strong></p>
   127          {{/if}}
   128        </div>
   129      {{/if}}
   130    {{/if}}
   131  </section>