github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(container-stats): adapt stats view when networks stats unavailable (#1244)

pull/1251/head
Anthony Lapenna 2017-09-27 09:47:11 +02:00 committed by GitHub
parent 0bdcff09f8
commit 1263866548
2 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/containerStats/containerStats.html
View File

@ -38,6 +38,13 @@
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i> <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
</span> </span>
</div> </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>
</form> </form>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
@ -45,7 +52,8 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4 col-md-6 col-sm-12"> <div ng-class="{true: 'col-md-6 col-sm-12', false: 'col-lg-4 col-md-6 col-sm-12'}[state.networkStatsUnavailable]">
<!-- <div class="col-lg-4 col-md-6 col-sm-12"> -->
<rd-widget> <rd-widget>
<rd-widget-header icon="fa-area-chart" title="Memory usage"></rd-widget-header> <rd-widget-header icon="fa-area-chart" title="Memory usage"></rd-widget-header>
<rd-widget-body> <rd-widget-body>
@ -55,7 +63,7 @@
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div> </div>
<div class="col-lg-4 col-md-6 col-sm-12"> <div ng-class="{true: 'col-md-6 col-sm-12', false: 'col-lg-4 col-md-6 col-sm-12'}[state.networkStatsUnavailable]">
<rd-widget> <rd-widget>
<rd-widget-header icon="fa-area-chart" title="CPU usage"></rd-widget-header> <rd-widget-header icon="fa-area-chart" title="CPU usage"></rd-widget-header>
<rd-widget-body> <rd-widget-body>
@ -65,7 +73,7 @@
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div> </div>
<div class="col-lg-4 col-md-12 col-sm-12"> <div class="col-lg-4 col-md-12 col-sm-12" ng-if="!state.networkStatsUnavailable">
<rd-widget> <rd-widget>
<rd-widget-header icon="fa-area-chart" title="Network usage"></rd-widget-header> <rd-widget-header icon="fa-area-chart" title="Network usage"></rd-widget-header>
<rd-widget-body> <rd-widget-body>

16
app/components/containerStats/containerStatsController.js
View File

@ -3,7 +3,8 @@ angular.module('containerStats', [])
function ($q, $scope, $transition$, $document, $interval, ContainerService, ChartService, Notifications, Pagination) { function ($q, $scope, $transition$, $document, $interval, ContainerService, ChartService, Notifications, Pagination) {
$scope.state = { $scope.state = {
refreshRate: '5' refreshRate: '5',
networkStatsUnavailable: false
}; };
$scope.state.pagination_count = Pagination.getPaginationCount('stats_processes'); $scope.state.pagination_count = Pagination.getPaginationCount('stats_processes');
@ -32,11 +33,13 @@ function ($q, $scope, $transition$, $document, $interval, ContainerService, Char
} }
function updateNetworkChart(stats, chart) { function updateNetworkChart(stats, chart) {
var rx = stats.Networks[0].rx_bytes; if (stats.Networks.length > 0) {
var tx = stats.Networks[0].tx_bytes; var rx = stats.Networks[0].rx_bytes;
var label = moment(stats.Date).format('HH:mm:ss'); var tx = stats.Networks[0].tx_bytes;
var label = moment(stats.Date).format('HH:mm:ss');
ChartService.UpdateNetworkChart(label, rx, tx, chart); ChartService.UpdateNetworkChart(label, rx, tx, chart);
}
} }
function updateMemoryChart(stats, chart) { function updateMemoryChart(stats, chart) {
@ -85,6 +88,9 @@ function ($q, $scope, $transition$, $document, $interval, ContainerService, Char
.then(function success(data) { .then(function success(data) {
var stats = data.stats; var stats = data.stats;
$scope.processInfo = data.top; $scope.processInfo = data.top;
if (stats.Networks.length === 0) {
$scope.state.networkStatsUnavailable = true;
}
updateNetworkChart(stats, networkChart); updateNetworkChart(stats, networkChart);
updateMemoryChart(stats, memoryChart); updateMemoryChart(stats, memoryChart);
updateCPUChart(stats, cpuChart); updateCPUChart(stats, cpuChart);