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

<td class="is-narrow">
  {{#if (not task.driverStatus.healthy)}}
    <span data-test-icon="unhealthy-driver" class="tooltip text-center" aria-label="{{task.driver}} is unhealthy">
      {{x-icon "warning" class="is-warning"}}
    </span>
  {{/if}}
</td>
<td data-test-name class="nowrap">
  <LinkTo @route="allocations.allocation.task" @models={{array task.allocation task}} class="is-primary">
    {{task.name}}
    {{#if task.isConnectProxy}}
      <ProxyTag @class="bumper-left" />
    {{/if}}
  </LinkTo>
</td>
<td data-test-state>{{task.state}}</td>
<td data-test-message>
  {{#if task.events.lastObject.message}}
    {{task.events.lastObject.message}}
  {{else}}
    <em>No message</em>
  {{/if}}
</td>
<td data-test-time>{{format-ts task.events.lastObject.time}}</td>
<td data-test-volumes>
  <ul>
    {{#each task.task.volumeMounts as |volume|}}
      <li data-test-volume>
        <strong>{{volume.volume}}:</strong>
        {{#if volume.isCSI}}
          <LinkTo @route="csi.volumes.volume" @model={{volume.volume}} @query={{hash volumeNamespace=volume.namespace.id}}>
            {{volume.source}}
          </LinkTo>
        {{else}}
          {{volume.source}}
        {{/if}}
      </li>
    {{/each}}
  </ul>
</td>
<td data-test-ports>
  <ul>
    {{#let task.resources.networks.firstObject as |network|}}
      {{#each network.ports as |port|}}
        <li data-test-port>
          <strong>{{port.name}}:</strong>
          <a href="http://{{network.ip}}:{{port.port}}" target="_blank" rel="noopener noreferrer">{{network.ip}}:{{port.port}}</a>
        </li>
      {{/each}}
    {{/let}}
  </ul>
</td>
<td data-test-cpu class="is-1 has-text-centered">
  {{#if task.isRunning}}
    {{#if (and (not cpu) fetchStats.isRunning)}}
      ...
    {{else if statsError}}
      <span class="tooltip text-center" role="tooltip" aria-label="Couldn't collect stats">
        {{x-icon "warning" class="is-warning"}}
      </span>
    {{else}}
      <div class="inline-chart is-small tooltip" role="tooltip" aria-label="{{cpu.used}} / {{taskStats.reservedCPU}} MHz">
        <progress
          class="progress is-info is-small"
          value="{{cpu.percent}}"
          max="1">
          {{cpu.percent}}
        </progress>
      </div>
    {{/if}}
  {{/if}}
</td>
<td data-test-mem class="is-1 has-text-centered">
  {{#if task.isRunning}}
    {{#if (and (not memory) fetchStats.isRunning)}}
      ...
    {{else if statsError}}
      <span class="tooltip is-small text-center" role="tooltip" aria-label="Couldn't collect stats">
        {{x-icon "warning" class="is-warning"}}
      </span>
    {{else}}
      <div class="inline-chart tooltip" role="tooltip" aria-label="{{format-bytes memory.used}} / {{taskStats.reservedMemory}} MiB">
        <progress
          class="progress is-danger is-small"
          value="{{memory.percent}}"
          max="1">
          {{memory.percent}}
        </progress>
      </div>
    {{/if}}
  {{/if}}
</td>