mirror of https://github.com/portainer/portainer
116 lines
4.3 KiB
HTML
116 lines
4.3 KiB
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>
|