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 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}} />
        </t.body>
      </ListTable>
      <div class="table-foot">
        <PageSizeSelect @onChange={{action this.resetPagination}} />
        <nav class="pagination">
          <div class="pagination-numbers">
            {{p.startsAt}}
            –
            {{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}}
</section>