portainer/app/docker/views/containers/stats/containerstats.html

<page-header
  title="'Container statistics'"
  breadcrumbs="[
    { label:'Containers', link:'docker.containers' },
    { 
      label:(container.Name | trimcontainername),
      link: 'docker.containers.container', 
      linkParams:container.Id
    }, 'Stats']"
>
</page-header>

<div class="row">
  <div class="col-md-12">
    <rd-widget>
      <rd-widget-header icon="info" feather-icon="true" title-text="About statistics"> </rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="form-group">
            <div class="col-sm-12">
              <span class="small text-muted">
                This view displays real-time statistics about the container <b>{{ container.Name | trimcontainername }}</b> as well as a list of the running processes inside this
                container.
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="refreshRate" class="col-sm-3 col-md-2 col-lg-2 margin-sm-top control-label text-left"> Refresh rate </label>
            <div class="col-sm-3 col-md-2">
              <select id="refreshRate" ng-model="state.refreshRate" ng-change="changeUpdateRepeater()" class="form-control">
                <option value="1">1s</option>
                <option value="3">3s</option>
                <option value="5">5s</option>
                <option value="10">10s</option>
                <option value="30">30s</option>
                <option value="60">60s</option>
              </select>
            </div>
            <span>
              <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
            </span>
          </div>
          <div class="form-group" ng-if="state.networkStatsUnavailable">
            <div class="col-sm-12">
              <span class="small text-muted"> <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i> Network stats are unavailable for this container. </span>
            </div>
          </div>
          <div class="form-group" ng-if="state.ioStatsUnavailable">
            <div class="col-sm-12">
              <span class="small text-muted"> <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i> I/O stats are unavailable for this container. </span>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-12">
    <rd-widget>
      <rd-widget-header icon="bar-chart" feather-icon="true" title-text="Memory usage"></rd-widget-header>
      <rd-widget-body>
        <div class="chart-container" style="position: relative">
          <canvas id="memoryChart" width="770" height="300"></canvas>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>

  <div class="col-lg-6 col-md-6 col-sm-12">
    <rd-widget>
      <rd-widget-header icon="bar-chart" feather-icon="true" title-text="CPU usage"></rd-widget-header>
      <rd-widget-body>
        <div class="chart-container" style="position: relative">
          <canvas id="cpuChart" width="770" height="300"></canvas>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>

  <div class="col-lg-6 col-md-6 col-sm-12" ng-if="!state.networkStatsUnavailable">
    <rd-widget>
      <rd-widget-header icon="bar-chart" feather-icon="true" title-text="Network usage (aggregate)"></rd-widget-header>
      <rd-widget-body>
        <div class="chart-container" style="position: relative">
          <canvas id="networkChart" width="770" height="300"></canvas>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>

  <div class="col-lg-6 col-md-6 col-sm-12" ng-if="!state.ioStatsUnavailable">
    <rd-widget>
      <rd-widget-header icon="bar-chart" feather-icon="true" title-text="I/O usage (aggregate)"></rd-widget-header>
      <rd-widget-body>
        <div class="chart-container" style="position: relative">
          <canvas id="ioChart" width="770" height="300"></canvas>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
    <container-processes-datatable
      title-text="Processes"
      title-icon="list"
      dataset="processInfo.Processes"
      headerset="processInfo.Titles"
      table-key="container-processes"
    ></container-processes-datatable>
  </div>
</div>