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

     1  {{page-title "Task group " this.model.name " - Job " this.model.job.name}}
     2  <div class="tabs is-subnav">
     3    <ul>
     4      <li><LinkTo @route="jobs.job.task-group" @models={{array this.model.job this.model}} @activeClass="is-active">Overview</LinkTo></li>
     5    </ul>
     6  </div>
     7  <section class="section">
     8    <h1 class="title with-flex">
     9      <span>{{this.model.name}}</span>
    10      <div>
    11        <Exec::OpenButton @job={{this.model.job}} @taskGroup={{this.model}} />
    12        {{#if this.model.scaling}}
    13        <StepperInput
    14          data-test-task-group-count-stepper
    15          aria-label={{this.tooltipText}}
    16          @min={{this.model.scaling.min}}
    17          @max={{this.model.scaling.max}}
    18          @value={{this.model.count}}
    19          @class="is-primary is-small"
    20          @disabled={{or this.model.job.runningDeployment (cannot "scale job")}}
    21          @onChange={{action "scaleTaskGroup"}}>
    22          Count
    23        </StepperInput>
    24        {{/if}}
    25      </div>
    26    </h1>
    27  
    28    <div class="boxed-section is-small">
    29      <div class="boxed-section-body inline-definitions">
    30        <span class="label">Task Group Details</span>
    31  
    32        <span class="pair" data-test-task-group-tasks><span class="term"># Tasks</span> {{this.model.tasks.length}}</span>
    33        <span class="pair" data-test-task-group-cpu><span class="term">Reserved CPU</span> {{this.model.reservedCPU}} MHz</span>
    34        <span class="pair" data-test-task-group-mem><span class="term">Reserved Memory</span> {{this.model.reservedMemory}} MiB</span>
    35        <span class="pair" data-test-task-group-disk><span class="term">Reserved Disk</span> {{this.model.reservedEphemeralDisk}} MiB</span>
    36        {{#if this.model.scaling}}
    37          <span class="pair" data-test-task-group-min><span class="term">Count Range</span>
    38            {{this.model.scaling.min}} to {{this.model.scaling.max}}
    39          </span>
    40          <span class="pair" data-test-task-group-max><span class="term">Scaling Policy?</span>
    41            {{if this.model.scaling.policy "Yes" "No"}}
    42          </span>
    43        {{/if}}
    44      </div>
    45    </div>
    46  
    47    <div class="boxed-section">
    48      <div class="boxed-section-head">
    49        <div>Allocation Status <span class="badge is-white">{{this.allocations.length}}</span></div>
    50      </div>
    51      <div class="boxed-section-body">
    52        <AllocationStatusBar @allocationContainer={{this.model.summary}} @class="split-view" as |chart|>
    53          <ol class="legend">
    54            {{#each chart.data as |datum index|}}
    55              <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
    56                <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
    57                <span class="value">{{datum.value}}</span>
    58                <span class="label">
    59                  {{datum.label}}
    60                </span>
    61              </li>
    62            {{/each}}
    63          </ol>
    64        </AllocationStatusBar>
    65      </div>
    66    </div>
    67  
    68    <div class="boxed-section">
    69      <div class="boxed-section-head">
    70        Allocations
    71        <SearchBox
    72          @searchTerm={{mut this.searchTerm}}
    73          @placeholder="Search allocations..."
    74          @onChange={{action this.resetPagination}}
    75          @class="is-inline pull-right"
    76          @inputClass="is-compact" />
    77      </div>
    78      <div class="boxed-section-body is-full-bleed">
    79        {{#if this.sortedAllocations}}
    80          <ListPagination
    81            @source={{this.sortedAllocations}}
    82            @size={{this.pageSize}}
    83            @page={{this.currentPage}}
    84            @class="allocations" as |p|>
    85            <ListTable
    86              @source={{p.list}}
    87              @sortProperty={{this.sortProperty}}
    88              @sortDescending={{this.sortDescending}}
    89              @class="with-foot" as |t|>
    90              <t.head>
    91                <th class="is-narrow"></th>
    92                <t.sort-by @prop="shortId">ID</t.sort-by>
    93                <t.sort-by @prop="createIndex" @title="Create Index">Created</t.sort-by>
    94                <t.sort-by @prop="modifyIndex" @title="Modify Index">Modified</t.sort-by>
    95                <t.sort-by @prop="statusIndex">Status</t.sort-by>
    96                <t.sort-by @prop="jobVersion">Version</t.sort-by>
    97                <t.sort-by @prop="node.shortId">Client</t.sort-by>
    98                <th>Volume</th>
    99                <th>CPU</th>
   100                <th>Memory</th>
   101              </t.head>
   102              <t.body @key="model.id" as |row|>
   103                <AllocationRow @data-test-allocation={{row.model.id}} @allocation={{row.model}} @context="taskGroup" @onClick={{action "gotoAllocation" row.model}} />
   104              </t.body>
   105            </ListTable>
   106            <div class="table-foot">
   107              <PageSizeSelect @onChange={{action this.resetPagination}} />
   108              <nav class="pagination">
   109                <div class="pagination-numbers">
   110                  {{p.startsAt}}&ndash;{{p.endsAt}} of {{this.sortedAllocations.length}}
   111                </div>
   112                <p.prev @class="pagination-previous">{{x-icon "chevron-left"}}</p.prev>
   113                <p.next @class="pagination-next">{{x-icon "chevron-right"}}</p.next>
   114                <ul class="pagination-list"></ul>
   115              </nav>
   116            </div>
   117          </ListPagination>
   118        {{else}}
   119          {{#if this.allocations.length}}
   120            <div class="boxed-section-body">
   121              <div class="empty-message" data-test-empty-allocations-list>
   122                <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Matches</h3>
   123                <p class="empty-message-body">No allocations match the term <strong>{{this.searchTerm}}</strong></p>
   124              </div>
   125            </div>
   126          {{else}}
   127            <div class="boxed-section-body">
   128              <div class="empty-message" data-test-empty-allocations-list>
   129                <h3 class="empty-message-headline" data-test-empty-allocations-list-headline>No Allocations</h3>
   130                <p class="empty-message-body">No allocations have been placed.</p>
   131              </div>
   132            </div>
   133          {{/if}}
   134        {{/if}}
   135      </div>
   136    </div>
   137  
   138    <LifecycleChart @tasks={{this.model.tasks}} />
   139  
   140    {{#if this.model.scaleState.isVisible}}
   141      {{#if this.shouldShowScaleEventTimeline}}
   142        <div data-test-scaling-timeline class="boxed-section">
   143          <div class="boxed-section-head is-hollow">
   144            Scaling Timeline
   145          </div>
   146          <div class="boxed-section-body">
   147            <ScaleEventsChart @events={{this.sortedScaleEvents}} />
   148          </div>
   149        </div>
   150      {{/if}}
   151  
   152      <div data-test-scaling-events class="boxed-section">
   153        <div class="boxed-section-head">
   154          Recent Scaling Events
   155        </div>
   156        <div class="boxed-section-body">
   157          <ScaleEventsAccordion @events={{this.sortedScaleEvents}} />
   158        </div>
   159      </div>
   160    {{/if}}
   161  
   162    {{#if this.model.volumes.length}}
   163      <div data-test-volumes class="boxed-section">
   164        <div class="boxed-section-head">
   165          Volume Requirements
   166        </div>
   167        <div class="boxed-section-body is-full-bleed">
   168          <ListTable @source={{this.model.volumes}} as |t|>
   169            <t.head>
   170              <th>Name</th>
   171              <th>Type</th>
   172              <th>Source</th>
   173              <th>Permissions</th>
   174            </t.head>
   175            <t.body as |row|>
   176              <tr data-test-volume>
   177                <td data-test-volume-name>
   178                  {{#if row.model.isCSI}}
   179                    <LinkTo @route="csi.volumes.volume" @model={{row.model.source}} @query={{hash volumeNamespace=row.model.namespace.id}}>
   180                      {{row.model.name}}
   181                    </LinkTo>
   182                  {{else}}
   183                    {{row.model.name}}
   184                  {{/if}}
   185                </td>
   186                <td data-test-volume-type>{{row.model.type}}</td>
   187                <td data-test-volume-source>{{row.model.source}}</td>
   188                <td data-test-volume-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
   189              </tr>
   190            </t.body>
   191          </ListTable>
   192        </div>
   193      </div>
   194    {{/if}}
   195  </section>