open-nomad/ui/app/templates/allocations/allocation/task/index.hbs

{{title "Task " this.model.name}}
<TaskSubnav @task={{this.model}} />
<section class="section">
  {{#if this.error}}
    <div data-test-inline-error class="notification is-danger">
      <div class="columns">
        <div class="column">
          <h3 data-test-inline-error-title class="title is-4">{{this.error.title}}</h3>
          <p data-test-inline-error-body>{{this.error.description}}</p>
        </div>
        <div class="column is-centered is-minimum">
          <button data-test-inline-error-close class="button is-danger" onclick={{action this.onDismiss}} type="button">Okay</button>
        </div>
      </div>
    </div>
  {{/if}}

  <h1 class="title with-flex" data-test-title>
    <div>
      {{this.model.name}}
      {{#if this.model.isConnectProxy}}
        <ProxyTag @class="bumper-left" />
      {{/if}}
      <span class="{{unless this.model.isConnectProxy "bumper-left"}} tag {{this.model.stateClass}}" data-test-state>{{this.model.state}}</span>
    </div>
    <div>
      {{#if this.model.isRunning}}
        <div class="two-step-button">
          <Exec::OpenButton
            @job={{this.model.task.taskGroup.job}}
            @taskGroup={{this.model.task.taskGroup}}
            @allocation={{this.model.allocation}}
            @task={{this.model.task}} />
        </div>
        <TwoStepButton
          data-test-restart
          @alignRight={{true}}
          @idleText="Restart"
          @cancelText="Cancel"
          @confirmText="Yes, Restart"
          @confirmationMessage="Are you sure? This will restart the task in-place."
          @awaitingConfirmation={{this.restartTask.isRunning}}
          @disabled={{this.restartTask.isRunning}}
          @onConfirm={{perform this.restartTask}} />
      {{/if}}
    </div>
  </h1>

  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Task Details</span>
      <span class="pair" data-test-started-at>
        <span class="term">Started At</span>
        {{format-ts this.model.startedAt}}
      </span>
      {{#if this.model.finishedAt}}
        <span class="pair">
          <span class="term">Finished At</span>
          {{format-ts this.model.finishedAt}}
        </span>
      {{/if}}
      <span class="pair">
        <span class="term">Driver</span>
        {{this.model.task.driver}}
      </span>
      <span class="pair">
        <span class="term">Lifecycle</span>
        <span data-test-lifecycle>{{this.model.task.lifecycleName}}</span>
      </span>
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head is-hollow">
      Resource Utilization
    </div>
    <div class="boxed-section-body">
      {{#if this.model.isRunning}}
        <div class="columns">
          <div class="column">
            <PrimaryMetric @resource={{this.model}} @metric="cpu" />
          </div>
          <div class="column">
            <PrimaryMetric @resource={{this.model}} @metric="memory" />
          </div>
        </div>
      {{else}}
        <div data-test-resource-error class="empty-message">
          <h3 data-test-resource-error-headline class="empty-message-headline">Task isn't running</h3>
          <p class="empty-message-body">Only running tasks utilize resources.</p>
        </div>
      {{/if}}
    </div>
  </div>

  {{#if this.model.task.volumeMounts.length}}
    <div data-test-volumes class="boxed-section">
      <div class="boxed-section-head">
        Volumes
      </div>
      <div class="boxed-section-body is-full-bleed">
        <ListTable @source={{this.model.task.volumeMounts}} as |t|>
          <t.head>
            <th>Name</th>
            <th>Destination</th>
            <th>Permissions</th>
            <th>Client Source</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={{row.model.volume}} @query={{hash volumeNamespace=row.model.namespace.id}}>
                    {{row.model.volume}}
                  </LinkTo>
                {{else}}
                  {{row.model.volume}}
                {{/if}}
              </td>
              <td data-test-volume-destination><code>{{row.model.destination}}</code></td>
              <td data-test-volume-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
              <td data-test-volume-client-source>{{row.model.source}}</td>
            </tr>
          </t.body>
        </ListTable>
      </div>
    </div>
  {{/if}}

  <div class="boxed-section">
    <div class="boxed-section-head">
      Recent Events
    </div>
    <div class="boxed-section-body is-full-bleed">
      <ListTable @source={{reverse this.model.events}} @class="is-striped" as |t|>
        <t.head>
          <th class="is-3">Time</th>
          <th class="is-1">Type</th>
          <th>Description</th>
        </t.head>
        <t.body as |row|>
          <tr data-test-task-event>
            <td data-test-task-event-time>{{format-ts row.model.time}}</td>
            <td data-test-task-event-type>{{row.model.type}}</td>
            <td data-test-task-event-message>
              {{#if row.model.message}}
                {{row.model.message}}
              {{else}}
                <em>No message</em>
              {{/if}}
            </td>
          </tr>
        </t.body>
      </ListTable>
    </div>
  </div>
</section>