open-nomad/ui/app/templates/components/job-page/parts/summary.hbs

<ListAccordion data-test-job-summary @source={{array job}} @key="id" @startExpanded={{isExpanded}} @onToggle={{action persist}} as |a|>
  <a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
    <div class="columns">
      <div class="column is-minimum nowrap">
        {{#if a.item.hasChildren}}
          Children Status
          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
            {{a.item.summary.totalChildren}}
          </span>
        {{else}}
          Allocation Status
          <span class="badge {{if a.isOpen "is-white" "is-light"}}">
            {{a.item.summary.totalAllocs}}
          </span>
        {{/if}}
      </div>

      {{#if (not a.isOpen)}}
        <div class="column">
          <div class="inline-chart bumper-left">
            {{#if a.item.hasChildren}}
              {{#if (gt a.item.totalChildren 0)}}
                <ChildrenStatusBar @job={{a.item}} @isNarrow={{true}} />
              {{else}}
                <em class="is-faded">No Children</em>
              {{/if}}
            {{else}}
              <AllocationStatusBar @allocationContainer={{a.item}} @isNarrow={{true}} />
            {{/if}}
          </div>
        </div>
      {{/if}}
    </div>
  </a.head>
  <a.body>
    {{#component (if a.item.hasChildren "children-status-bar" "allocation-status-bar")
    allocationContainer=a.item.summary
    job=a.item.summary
    class="split-view" as |chart|}}
    <ol data-test-legend class="legend">
      {{#each chart.data as |datum index|}}
        <li class="{{datum.className}} {{if (eq datum.label chart.activeDatum.label) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
          <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
          <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
          <span class="label">
            {{datum.label}}
          </span>
        </li>
      {{/each}}
    </ol>
  {{/component}}
  </a.body>
</ListAccordion>