ui/lib/shared/addon/components/info-multi-stats/template.hbs

{{#multi-container-stats model=model linkName=linkName emitMaps=true as |stats|}}
  {{#liquid-if (eq mode "small") class=(if stats.loading 'child-loading')}}
    {{#if stats.loading}}
      <div class="text-muted text-small vertical-middle">Connecting&hellip;</div>
    {{else if stats.active}}
      {{spark-line
        data=stats.cpuTotal
        width=smallWidth height=smallHeight
        prefix="containersPage.table.sparkPrefixCpu"
        formatter="percent"
        gradient="cpu"
        minMax=100
      }}

      {{spark-line
        data=stats.memory
        width=smallWidth height=smallHeight
        prefix="containersPage.table.sparkPrefixMemory"
        formatter="mib"
        gradient="memory"
        maxDoubleInital=true
      }}

      {{spark-line
        data=stats.networkTotal
        width=smallWidth height=smallHeight
        prefix="containersPage.table.sparkPrefixNetwork"
        formatter="kbps"
        gradient="network"
        minMax=100
      }}

      {{spark-line
        data=stats.storageTotal
        width=smallWidth height=smallHeight
        prefix="containersPage.table.sparkPrefixStorage"
        formatter="kbps"
        gradient="storage"
        minMax=100
      }}

      <button class="btn btn-sm bg-transparent" style="vertical-align: top" {{action "toggle"}}><i class="icon icon-plus-circle"></i></button>
    {{else}}
      <div class="text-muted text-small">Stats not available</div>
    {{/if}}
  {{/liquid-if}}
  {{#if (eq mode "large")}}
    {{#ember-wormhole to=largeTargetId}}
      <div>
        {{#if stats.loading}}
          <div class="row">
            <div class="col span-12 text-center">
              <div class="text-muted text-small vertical-middle">Connecting&hellip;</div>
            </div>
          </div>
        {{else if stats.active}}
          <div class="row">
            <div class="col span-6">
              <h2>{{t 'infoMultiStats.cpuSection.labelText'}}</h2>
              {{graph-area
                model=stats
                fields=cpuFields
                formatter="percent"
                gradient="cpu"
                minMax=100
              }}
            </div>
            <div class="col span-6">
              <h2>{{t 'infoMultiStats.memorySection.labelText'}}</h2>
              {{graph-area
                model=stats
                fields=memoryFields
                formatter="mib"
                gradient="memory"
                maxDoubleInital=true
              }}
            </div>
          </div>
          <div class="row">
            <div class="col span-6">
              <h2>{{t 'infoMultiStats.networkSection.labelText'}}</h2>
              {{graph-area
                model=stats
                fields=networkFields
                formatter="kbps"
                gradient="network"
                minMax=100
              }}
            </div>
            <div class="col span-6">
              <h2>{{t 'infoMultiStats.storageSection.labelText'}}</h2>
              {{graph-area
                model=stats
                fields=storageFields
                formatter="kbps"
                gradient="storage"
                minMax=100
              }}
            </div>
          </div>
          <button class="btn btn-sm bg-transparent" style="vertical-align: top" {{action "toggle"}}><i class="icon icon-minus-circle"></i></button>
        {{else}}
          <div class="row">
            <div class="col span-12 text-center">
              <div class="text-muted text-small">Stats not available</div>
            </div>
          </div>
        {{/if}}
      </div>
    {{/ember-wormhole}}
  {{/if}}
{{/multi-container-stats}}