open-nomad/ui/app/templates/components/job-deployment/deployment-metrics.hbs

<div class="columns deployment-metrics">
  <div class="column nowrap">
    <div class="metric-group">
      <div class="metric {{if (eq this.deployment.placedCanaries this.deployment.desiredCanaries) "is-primary"}} {{if (eq this.deployment.desiredCanaries 0) "is-faded"}}">
        <h3 class="label">Canaries</h3>
        <p data-test-deployment-metric="canaries" class="value">{{this.deployment.placedCanaries}} / {{this.deployment.desiredCanaries}}</p>
      </div>
    </div>

    <div class="metric-group">
      <div class="metric">
        <h3 class="label">Placed</h3>
        <p data-test-deployment-metric="placed" class="value">{{this.deployment.placedAllocs}}</p>
      </div>
      <div class="metric">
        <h3 class="label">Desired</h3>
        <p data-test-deployment-metric="desired" class="value">{{this.deployment.desiredTotal}}</p>
      </div>
    </div>

    <div class="metric-group">
      <div class="metric {{if (gt this.deployment.healthyAllocs 0) "is-primary" "is-faded"}}">
        <h3 class="label">Healthy</h3>
        <p data-test-deployment-metric="healthy" class="value">{{this.deployment.healthyAllocs}}</p>
      </div>
    </div>

    <div class="metric-group">
      <div class="metric {{if (gt this.deployment.unhealthyAllocs 0) "is-danger" "is-faded"}}">
        <h3 class="label">Unhealthy</h3>
        <p data-test-deployment-metric="unhealthy" class="value">{{this.deployment.unhealthyAllocs}}</p>
      </div>
    </div>
  </div>
  <div class="column">
    <div data-test-deployment-notification class="notification {{this.deployment.statusClass}}">
      {{this.deployment.statusDescription}}
    </div>
  </div>
</div>