<rd-header>
  <rd-header-title title-text="Container statistics"></rd-header-title>
  <rd-header-content>
    <a ui-sref="docker.containers">Containers</a> &gt; <a ui-sref="docker.containers.container({id: container.Id})">{{ container.Name | trimcontainername }}</a> &gt; Stats
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-md-12">
    <rd-widget>
      <rd-widget-header icon="fa-info-circle" 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="fa-chart-area" 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="fa-chart-area" 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="fa-chart-area" 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="fa-chart-area" 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="fa-tasks"
      dataset="processInfo.Processes"
      headerset="processInfo.Titles"
      table-key="container-processes"
    ></container-processes-datatable>
  </div>
</div>
