open-nomad/ui/app/templates/components/task-row.hbs

<td class="is-narrow">
  {{#unless this.task.driverStatus.healthy}}
    <span
      data-test-icon="unhealthy-driver"
      class="tooltip text-center"
      aria-label="{{this.task.driver}} is unhealthy"
    >
      {{x-icon "alert-triangle" class="is-warning"}}
    </span>
  {{/unless}}
</td>
<td data-test-name class="nowrap">
  <LinkTo
    @route="allocations.allocation.task"
    @models={{array this.task.allocation this.task}}
    class="is-primary"
  >
    {{this.task.name}}
    {{#if this.task.isConnectProxy}}
      <ProxyTag @class="bumper-left" />
    {{/if}}
  </LinkTo>
</td>
<td data-test-state>
  {{this.task.state}}
</td>
<td data-test-message>
  {{#if this.task.events.lastObject.message}}
    {{this.task.events.lastObject.message}}
  {{else}}
    <em>
      No message
    </em>
  {{/if}}
</td>
<td data-test-time>
  {{format-ts this.task.events.lastObject.time}}
</td>
<td data-test-volumes>
  <ul>
    {{#each this.task.task.volumeMounts as |volume|}}
      <li data-test-volume>
        <strong>
          {{volume.volume}}
          :
        </strong>
        {{#if volume.isCSI}}
          <LinkTo
            @route="csi.volumes.volume"
            @model={{concat
              (format-volume-name
                source=volume.source
                isPerAlloc=volume.volumeDeclaration.perAlloc
                volumeExtension=this.task.allocation.volumeExtension)
              "@"
              volume.namespace.id
            }}
          >
          {{format-volume-name
            source=volume.source
            isPerAlloc=volume.volumeDeclaration.perAlloc
            volumeExtension=this.task.allocation.volumeExtension}}
          </LinkTo>
        {{else}}
          {{volume.source}}
        {{/if}}
      </li>
    {{/each}}
  </ul>
</td>
<td data-test-cpu class="is-1 has-text-centered">
  {{#if this.task.isRunning}}
    {{#if (and (not this.cpu) this.fetchStats.isRunning)}}
      ...
    {{else if this.statsError}}
      <span
        class="tooltip text-center"
        role="tooltip"
        aria-label="Couldn't collect stats"
      >
        {{x-icon "alert-triangle" class="is-warning"}}
      </span>
    {{else}}
      <div
        class="inline-chart is-small tooltip"
        role="tooltip"
        aria-label="{{format-hertz this.cpu.used}}
           /
          {{format-hertz this.taskStats.reservedCPU}}"
      >
        <progress
          class="progress is-info is-small"
          value="{{this.cpu.percent}}"
          max="1"
        >
          {{this.cpu.percent}}
        </progress>
      </div>
    {{/if}}
  {{/if}}
</td>
<td data-test-mem class="is-1 has-text-centered">
  {{#if this.task.isRunning}}
    {{#if (and (not this.memory) this.fetchStats.isRunning)}}
      ...
    {{else if this.statsError}}
      <span
        class="tooltip is-small text-center"
        role="tooltip"
        aria-label="Couldn't collect stats"
      >
        {{x-icon "alert-triangle" class="is-warning"}}
      </span>
    {{else}}
      <div
        class="inline-chart tooltip"
        role="tooltip"
        aria-label="{{format-bytes this.memory.used}}
           /
          {{format-bytes this.taskStats.reservedMemory start="MiB"}}"
      >
        <progress
          class="progress is-danger is-small"
          value="{{this.memory.percent}}"
          max="1"
        >
          {{this.memory.percent}}
        </progress>
      </div>
    {{/if}}
  {{/if}}
</td>