open-nomad/ui/app/templates/jobs/job/task-group.hbs

<Breadcrumb @crumb={{this.breadcrumb}} />
{{page-title "Task group " this.model.name " - Job " this.model.job.name}}
<div class="tabs is-subnav">
  <ul>
    <li>
      <LinkTo
        @route="jobs.job.task-group"
        @models={{array this.model.job this.model}}
        @activeClass="is-active"
      >
        Overview
      </LinkTo>
    </li>
  </ul>
</div>
<section class="section">
  <h1 class="title with-flex">
    <span>
      {{this.model.name}}
    </span>
    <div>
      <Exec::OpenButton @job={{this.model.job}} @taskGroup={{this.model}} />
      {{#if this.model.scaling}}
        <StepperInput
          data-test-task-group-count-stepper
          aria-label={{this.tooltipText}}
          @min={{this.model.scaling.min}}
          @max={{this.model.scaling.max}}
          @value={{this.model.count}}
          @class="is-primary is-small"
          @disabled={{or
            this.model.job.runningDeployment
            (cannot "scale job" namespace=this.model.job.namespace.name)
          }}
          @onChange={{action "scaleTaskGroup"}}
        >
          Count
        </StepperInput>
      {{/if}}
    </div>
  </h1>
  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">
      <span class="label">
        Task Group Details
      </span>
      <span class="pair" data-test-task-group-tasks>
        <span class="term">
          # Tasks
        </span>
        {{this.model.tasks.length}}
      </span>
      <span class="pair" data-test-task-group-cpu>
        <span class="term">
          Reserved CPU
        </span>
        {{format-scheduled-hertz this.model.reservedCPU}}
      </span>
      <span class="pair" data-test-task-group-mem>
        <span class="term">
          Reserved Memory
        </span>
        {{format-scheduled-bytes this.model.reservedMemory start="MiB"}}
        {{#if (gt this.model.reservedMemoryMax this.model.reservedMemory)}}
          ({{format-scheduled-bytes this.model.reservedMemoryMax start="MiB"}}Max)
        {{/if}}
      </span>
      <span class="pair" data-test-task-group-disk>
        <span class="term">
          Reserved Disk
        </span>
        {{format-scheduled-bytes this.model.reservedEphemeralDisk start="MiB"}}
      </span>
      {{#if this.model.scaling}}
        <span class="pair" data-test-task-group-min>
          <span class="term">
            Count Range
          </span>
          {{this.model.scaling.min}}
          to
          {{this.model.scaling.max}}
        </span>
        <span class="pair" data-test-task-group-max>
          <span class="term">
            Scaling Policy?
          </span>
          {{if this.model.scaling.policy "Yes" "No"}}
        </span>
      {{/if}}
    </div>
  </div>
  <div class="boxed-section">
    <div class="boxed-section-head">
      <div>
        Allocation Status
        <span class="badge is-white">
          {{this.allocations.length}}
        </span>
      </div>
    </div>
    <div class="boxed-section-body">
      <AllocationStatusBar
        @allocationContainer={{this.model.summary}}
        @class="split-view" as |chart|
      >
        <ol class="legend">
          {{#each chart.data as |datum index|}}
            <li
              class="{{datum.className}}

                {{if (eq datum.label chart.activeDatum.label) "is-active"}}

                {{if (eq datum.value 0) "is-empty"}}"
            >
              <JobPage::Parts::SummaryLegendItem @datum={{datum}} @index={{index}} />
            </li>
          {{/each}}
        </ol>
      </AllocationStatusBar>
    </div>
  </div>
  <div class="boxed-section">
    <div class="boxed-section-head">
      Allocations
      <div class="pull-right is-subsection">
        <MultiSelectDropdown
          data-test-allocation-status-facet
          @label="Status"
          @options={{this.optionsAllocationStatus}}
          @selection={{this.selectionStatus}}
          @onSelect={{action this.setFacetQueryParam "qpStatus"}}
        />
        <MultiSelectDropdown
          data-test-allocation-client-facet
          @label="Client"
          @options={{this.optionsClients}}
          @selection={{this.selectionClient}}
          @onSelect={{action this.setFacetQueryParam "qpClient"}}
        />
        <SearchBox
          @searchTerm={{mut this.searchTerm}}
          @placeholder="Search allocations..."
          @onChange={{action this.resetPagination}}
          @class="is-padded"
          @inputClass="is-compact"
        />
      </div>
    </div>
    <div class="boxed-section-body is-full-bleed">
      {{#if this.sortedAllocations}}
        <ListPagination
          @source={{this.sortedAllocations}}
          @size={{this.pageSize}}
          @page={{this.currentPage}}
          @class="allocations" as |p|
        >
          <ListTable
            @source={{p.list}}
            @sortProperty={{this.sortProperty}}
            @sortDescending={{this.sortDescending}}
            @class="with-foot" as |t|
          >
            <t.head>
              <th class="is-narrow"></th>
              <t.sort-by @prop="shortId">
                ID
              </t.sort-by>
              <t.sort-by @prop="createIndex" @title="Create Index">
                Created
              </t.sort-by>
              <t.sort-by @prop="modifyIndex" @title="Modify Index">
                Modified
              </t.sort-by>
              <t.sort-by @prop="statusIndex">
                Status
              </t.sort-by>
              <t.sort-by @prop="jobVersion">
                Version
              </t.sort-by>
              <t.sort-by @prop="node.shortId">
                Client
              </t.sort-by>
              <th>
                Volume
              </th>
              <th>
                CPU
              </th>
              <th>
                Memory
              </th>
            </t.head>
            <t.body @key="model.id" as |row|>
              <AllocationRow
                @data-test-allocation={{row.model.id}}
                @allocation={{row.model}}
                @context="taskGroup"
                @onClick={{action "gotoAllocation" 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.sortedAllocations.length}}
              </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 if this.allocations.length}}
        <div class="boxed-section-body">
          <div class="empty-message" data-test-empty-allocations-list>
            <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>
              No Matches
            </h3>
            <p class="empty-message-body">
              No allocations match the term
              <strong>
                {{this.searchTerm}}
              </strong>
            </p>
          </div>
        </div>
      {{else}}
        <div class="boxed-section-body">
          <div class="empty-message" data-test-empty-allocations-list>
            <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>
              No Allocations
            </h3>
            <p class="empty-message-body">
              No allocations have been placed.
            </p>
          </div>
        </div>
      {{/if}}
    </div>
  </div>
  <LifecycleChart @tasks={{this.model.tasks}} />
  {{#if this.model.scaleState.isVisible}}
    {{#if this.shouldShowScaleEventTimeline}}
      <div data-test-scaling-timeline class="boxed-section">
        <div class="boxed-section-head is-hollow">
          Scaling Timeline
        </div>
        <div class="boxed-section-body">
          <ScaleEventsChart @events={{this.sortedScaleEvents}} />
        </div>
      </div>
    {{/if}}
    <div data-test-scaling-events class="boxed-section">
      <div class="boxed-section-head">
        Recent Scaling Events
      </div>
      <div class="boxed-section-body">
        <ScaleEventsAccordion @events={{this.sortedScaleEvents}} />
      </div>
    </div>
  {{/if}}
  {{#if this.model.volumes.length}}
    <div data-test-volumes class="boxed-section">
      <div class="boxed-section-head">
        Volume Requirements
      </div>
      <div class="boxed-section-body is-full-bleed">
        <ListTable @source={{this.model.volumes}} as |t|>
          <t.head>
            <th>
              Name
            </th>
            <th>
              Type
            </th>
            <th>
              Source
            </th>
            <th>
              Permissions
            </th>
          </t.head>
          <t.body as |row|>
            <tr data-test-volume>
              <td data-test-volume-name>
                {{#if row.model.isCSI}}
                  <LinkTo
                    @route="csi.volumes.volume"
                    @model={{concat row.model.source "@" row.model.namespace.id}}
                  >
                    {{row.model.name}}
                  </LinkTo>
                {{else}}
                  {{row.model.name}}
                {{/if}}
              </td>
              <td data-test-volume-type>
                {{row.model.type}}
              </td>
              <td data-test-volume-source>
                {{row.model.source}}
              </td>
              <td data-test-volume-permissions>
                {{if row.model.readOnly "Read" "Read/Write"}}
              </td>
            </tr>
          </t.body>
        </ListTable>
      </div>
    </div>
  {{/if}}
</section>