quay/static/directives/ps-usage-graph.html

<div class="ps-usage-graph-element">
  <!-- Build Charts -->
  <div quay-show="Features.BUILD_SUPPORT">
    <div class="alert alert-warning" ng-if="data.build && data.build.job_total == null">
      Cannot load build system status. Please restart your container.
    </div>
    <div ng-if="data.build && data.build.job_total >= 0">
      <div class="col-md-6 chart-col">
        <h4>Build Queue</h4>
        <h5>
          Running Jobs: {{ data.build.running_total }} | Total Jobs: {{ data.build.job_total }}
        </h5>
        <div class="realtime-area-chart"
             data="[data.build.job_total, data.build.running_total]"
             labels="['Queued Build Jobs', 'Running Build Jobs']"
             colors="['rgb(157, 194, 211)', 'rgb(56, 122, 163)']"
             counter="counter"
             minimum="-10"
             maximum="auto"></div>
      </div>

      <div class="col-md-6 chart-col">
        <h4>Local Build Workers</h4>
        <h5>
          Local Workers: {{ data.build.workers }} | Working: {{ data.build.running_local }}
        </h5>
        <div class="realtime-area-chart"
             data="[data.build.job_total, data.build.workers, data.build.running_local]"
             labels="['Queued Build Jobs', 'Build Workers (local)', 'Running Build Jobs (local)']"
             colors="['rgb(157, 194, 211)', 'rgb(161, 208, 93)', 'rgb(210, 237, 130)']"
             counter="counter"
             minimum="-10"
             maximum="auto"></div>
      </div>
    </div>
  </div>

  <!-- CPU, Memory and Network -->
  <div class="col-md-4 chart-col">
    <h4>CPU Usage %</h4>
    <div class="realtime-line-chart" data="data.count.cpu" counter="counter"
         label-template="CPU #{x} %"
         minimum="-10" maximum="110"></div>
  </div>

  <div class="col-md-4 chart-col">
    <h4>Process Count</h4>
    <div class="realtime-line-chart" data="data.count.processes" counter="counter"
         label-template="Process Count"></div>
  </div>

  <div class="col-md-4 chart-col">
    <h4>Virtual Memory %</h4>
    <div class="realtime-line-chart" data="data.count.virtual_mem[2]" counter="counter"
         label-template="Virtual Memory %"
         minimum="-10" maximum="110"></div>
  </div>

  <div class="col-md-4 chart-col">
    <h4>Swap Memory</h4>
    <div class="realtime-line-chart" data="data.count.swap_mem[3]" counter="counter"
         label-template="Swap Memory %"></div>
  </div>

  <div class="col-md-4 chart-col">
    <h4>Network Connections</h4>
    <div class="realtime-line-chart" data="data.count.connections" counter="counter"
         label-template="Network Connection Count"></div>
  </div>

  <div class="col-md-4 chart-col">
    <h4>Network Usage (Bytes)</h4>
    <div class="realtime-line-chart" data="data.count.network" labels="['Bytes In', 'Bytes Out']" counter="counter"></div>
  </div>
</div>