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

{{page-title "Jobs"}}
<section class="section">
  <div class="toolbar">
    <div class="toolbar-item">
      {{#if this.visibleJobs.length}}
        <SearchBox
          data-test-jobs-search
          @searchTerm={{mut this.searchTerm}}
          @onChange={{action this.resetPagination}}
          @placeholder="Search jobs..." />
      {{/if}}
    </div>
    {{#if (media "isMobile")}}
      <div class="toolbar-item is-right-aligned">
        {{#if (can "run job" namespace=this.qpNamespace)}}
          <LinkTo @route="jobs.run" @query={{hash namespace=this.qpNamespace}} data-test-run-job class="button is-primary">Run Job</LinkTo>
        {{else}}
          <button
            data-test-run-job
            class="button is-primary is-disabled tooltip is-right-aligned"
            aria-label="You don’t have permission to run jobs"
            disabled
            type="button"
          >Run Job</button>
        {{/if}}
      </div>
    {{/if}}
    <div class="toolbar-item is-right-aligned is-mobile-full-width">
      <div class="button-bar">
        {{#if this.system.shouldShowNamespaces}}
          <SingleSelectDropdown
            data-test-namespace-facet
            @label="Namespace"
            @options={{this.optionsNamespaces}}
            @selection={{this.qpNamespace}}
            @onSelect={{action (queue
              (action this.cacheNamespace)
              (action this.setFacetQueryParam "qpNamespace")
            )}} />
        {{/if}}
        <MultiSelectDropdown
          data-test-type-facet
          @label="Type"
          @options={{this.optionsType}}
          @selection={{this.selectionType}}
          @onSelect={{action this.setFacetQueryParam "qpType"}} />
        <MultiSelectDropdown
          data-test-status-facet
          @label="Status"
          @options={{this.optionsStatus}}
          @selection={{this.selectionStatus}}
          @onSelect={{action this.setFacetQueryParam "qpStatus"}} />
        <MultiSelectDropdown
          data-test-datacenter-facet
          @label="Datacenter"
          @options={{this.optionsDatacenter}}
          @selection={{this.selectionDatacenter}}
          @onSelect={{action this.setFacetQueryParam "qpDatacenter"}} />
        <MultiSelectDropdown
          data-test-prefix-facet
          @label="Prefix"
          @options={{this.optionsPrefix}}
          @selection={{this.selectionPrefix}}
          @onSelect={{action this.setFacetQueryParam "qpPrefix"}} />
      </div>
    </div>
    {{#if (not (media "isMobile"))}}
      <div class="toolbar-item is-right-aligned">
        {{#if (can "run job" namespace=this.qpNamespace)}}
          <LinkTo @route="jobs.run" @query={{hash namespace=this.qpNamespace}} data-test-run-job class="button is-primary">Run Job</LinkTo>
        {{else}}
          <button
            data-test-run-job
            class="button is-primary is-disabled tooltip is-right-aligned"
            aria-label="You don’t have permission to run jobs"
            disabled
            type="button"
          >Run Job</button>
        {{/if}}
      </div>
    {{/if}}
  </div>
  {{#if this.isForbidden}}
    <ForbiddenMessage />
  {{else}}
    {{#if this.sortedJobs}}
      <ListPagination
        @source={{this.sortedJobs}}
        @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>
            <t.sort-by @prop="name">Name</t.sort-by>
            {{#if this.system.shouldShowNamespaces}}
              <t.sort-by @prop="namespace.name">Namespace</t.sort-by>
            {{/if}}
            <t.sort-by @prop="status">Status</t.sort-by>
            <t.sort-by @prop="type">Type</t.sort-by>
            <t.sort-by @prop="priority">Priority</t.sort-by>
            <th>Groups</th>
            <th class="is-3">Summary</th>
          </t.head>
          <t.body @key="model.id" as |row|>
            <JobRow @data-test-job-row={{row.model.plainId}} @job={{row.model}} @onClick={{action "gotoJob" row.model}} />
          </t.body>
        </ListTable>
        <div class="table-foot">
          <PageSizeSelect @onChange={{action this.resetPagination}} />
          <nav class="pagination">
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedJobs.length}}
              {{#if this.searchTerm}}
                <em>({{dec this.sortedJobs.length this.filteredJobs.length}} hidden by search term)</em>
              {{/if}}
            </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 data-test-empty-jobs-list class="empty-message">
        {{#if (eq this.visibleJobs.length 0)}}
          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Jobs</h3>
          <p class="empty-message-body">
            The cluster is currently empty.
          </p>
        {{else if (eq this.filteredJobs.length 0)}}
          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
          <p class="empty-message-body">
            No jobs match your current filter selection.
          </p>
        {{else if this.searchTerm}}
          <h3 data-test-empty-jobs-list-headline class="empty-message-headline">No Matches</h3>
          <p class="empty-message-body">No jobs match the term <strong>{{this.searchTerm}}</strong></p>
        {{/if}}
      </div>
    {{/if}}
  {{/if}}
</section>