Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 21:39:40 +02:00
Code Issues Releases Activity

feat(container-stats): display cache in memory usage chart (#2383)

Browse source
This commit is contained in:
Yassir Hannoun 2018-10-28 03:45:02 +01:00 • committed by Anthony Lapenna
parent fe6ca042f3
commit 07c1e1bc3e
3 changed files with 180 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/docker/models/container.js
View file

@ -65,6 +65,7 @@ function ContainerViewModel(data) {
function ContainerStatsViewModel(data) {
this.Date = data.read;
this.MemoryUsage = data.memory_stats.usage - data.memory_stats.stats.cache;
this.MemoryCache = data.memory_stats.stats.cache;
this.PreviousCPUTotalUsage = data.precpu_stats.cpu_usage.total_usage;
this.PreviousCPUSystemUsage = data.precpu_stats.system_cpu_usage;
this.CurrentCPUTotalUsage = data.cpu_stats.cpu_usage.total_usage;

3
app/docker/views/containers/stats/containerStatsController.js
View file

@ -31,9 +31,8 @@ function ($q, $scope, $transition$, $document, $interval, ContainerService, Char
function updateMemoryChart(stats, chart) {
var label = moment(stats.Date).format('HH:mm:ss');
var value = stats.MemoryUsage;
ChartService.UpdateMemoryChart(label, value, chart);
ChartService.UpdateMemoryChart(label, stats.MemoryUsage, stats.MemoryCache, chart);
}
function updateCPUChart(stats, chart) {

52
app/portainer/services/chartService.js
View file

@ -7,7 +7,7 @@ angular.module('portainer.app')
var service = {};
function defaultChartOptions(pos, tooltipCallback, scalesCallback) {
function defaultChartOptions(pos, tooltipCallback, scalesCallback, isStacked) {
return {
animation: { duration: 0 },
responsiveAnimationDuration: 0,
@ -26,6 +26,7 @@ angular.module('portainer.app')
hover: { animationDuration: 0 },
scales: {
yAxes: [{
stacked: isStacked,
ticks: {
beginAtZero: true,
callback: scalesCallback
@ -58,12 +59,46 @@ angular.module('portainer.app')
});
}
function CreateMemoryChart(context, tooltipCallback, scalesCallback) {
return new Chart(context, {
type: 'line',
data: {
labels: [],
datasets: [
{
label: 'Memory',
data: [],
fill: true,
backgroundColor: 'rgba(151,187,205,0.4)',
borderColor: 'rgba(151,187,205,0.6)',
pointBackgroundColor: 'rgba(151,187,205,1)',
pointBorderColor: 'rgba(151,187,205,1)',
pointRadius: 2,
borderWidth: 2
},
{
label: 'Cache',
data: [],
fill: true,
backgroundColor: 'rgba(255,180,174,0.4)',
borderColor: 'rgba(255,180,174,0.6)',
pointBackgroundColor: 'rgba(255,180,174,1)',
pointBorderColor: 'rgba(255,180,174,1)',
pointRadius: 2,
borderWidth: 2
}
]
},
options: defaultChartOptions('nearest', tooltipCallback, scalesCallback, true)
});
}
service.CreateCPUChart = function (context) {
return CreateChart(context, 'CPU', percentageBasedTooltipLabel, percentageBasedAxisLabel);
};
service.CreateMemoryChart = function (context) {
return CreateChart(context, 'Memory', byteBasedTooltipLabel, byteBasedAxisLabel);
return CreateMemoryChart(context, byteBasedTooltipLabel, byteBasedAxisLabel);
};
service.CreateNetworkChart = function (context) {
@ -112,7 +147,18 @@ angular.module('portainer.app')
chart.update(0);
}
service.UpdateMemoryChart = UpdateChart;
service.UpdateMemoryChart = function UpdateChart(label, memoryValue, cacheValue, chart) {
chart.data.labels.push(label);
chart.data.datasets[0].data.push(memoryValue);
chart.data.datasets[1].data.push(cacheValue);
if (chart.data.datasets[0].data.length > CHART_LIMIT) {
chart.data.labels.pop();
chart.data.datasets[0].data.pop();
}
chart.update(0);
};
service.UpdateCPUChart = UpdateChart;
service.UpdateNetworkChart = function (label, rx, tx, chart) {