jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update Chart.js to new version and show full fqdn for apps

Browse Source
This commit is contained in:
Johannes Zellner
2018-04-12 11:45:12 +02:00
parent 87e7e9fa07
commit 34187d76b6
5 changed files with 93 additions and 3536 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/graphs.js
+72 -54
View File
@@ -10,7 +10,6 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
$scope.memoryUsageSystem = [];
$scope.memoryUsageApps = [];
$scope.activeApp = null;
$scope.memoryChart = null;
$scope.installedApps = Client.getInstalledApps();
@@ -40,21 +39,16 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
sum: bytesToGigaBytes(used.datapoints[0][0] + reserved.datapoints[0][0] + free.datapoints[0][0])
};
var tmp = [{
value: $scope.diskUsage[type].used,
color: "#2196F3",
highlight: "#82C4F8",
label: "Used"
}, {
value: $scope.diskUsage[type].free,
color:"#27CE65",
highlight: "#76E59F",
label: "Free"
}];
var tmp = {
datasets: [{
data: [$scope.diskUsage[type].used, $scope.diskUsage[type].free],
backgroundColor: ['#2196F3', '#76E59F']
}],
labels: ['Used', 'Free']
};
var ctx = $('#' + type + 'DiskUsageChart').get(0).getContext('2d');
var myChart = new Chart(ctx);
myChart.Doughnut(tmp);
new Chart(ctx, { type: 'doughnut', data: tmp, options: { legend: { display: false }} });
}
$scope.setMemoryApp = function (app, color) {
@@ -68,50 +62,61 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
else target = 'summarize(collectd.localhost.table-' + app.id + '-memory.gauge-rss, "' + timeBucketSize + 'min", "avg")';
Client.graphs([target], '-' + timePeriod + 'min', function (error, result) {
if (error) return console.log(error);
if (error) return console.log('Unable to get graphs.', error);
// translate the data from bytes to MB
var data = result[0].datapoints.map(function (d) { return parseInt((d[0] / 1024 / 1024).toFixed(2)); });
var labels = data.map(function (d, index) {
var datapoints = result[0].datapoints.map(function (d) { return parseInt((d[0] / 1024 / 1024).toFixed(2)); });
var labels = datapoints.map(function (d, index) {
var dateTime = new Date(Date.now() - ((timePeriod - (index * timeBucketSize)) * 60 *1000));
return ('0' + dateTime.getHours()).slice(-2) + ':00';
});
var tmp = {
var data = {
labels: labels,
datasets: [{
label: 'Memory',
fillColor: color || "#82C4F8",
strokeColor: color || "#2196F3",
pointColor: color || "rgba(151,187,205,1)",
pointStrokeColor: "#ffffff",
pointHighlightFill: color || "#82C4F8",
pointHighlightStroke: color || "#82C4F8",
data: data
backgroundColor: color || "#82C4F8",
borderColor: color || "#2196F3",
borderWidth: 2,
pointBackgroundColor: color || "rgba(151,187,205,1)",
pointBorderColor: color || "#2196F3",
pointHoverBackgroundColor: color || "#82C4F8",
pointHoverBorderColor: color || "#82C4F8",
data: datapoints
}]
};
var ctx = $('#memoryAppChart').get(0).getContext('2d');
var chart = new Chart(ctx);
var scaleStepWidth;
var scaleMax = 0;
if ($scope.activeApp === 'system') {
console.log(Client.getConfig().memory);
scaleStepWidth = Math.round(Client.getConfig().memory / (1024 * 1024) / 10); // scaleSteps is 10
scaleMax = Client.getConfig().memory;
} else {
var memoryLimit = $scope.activeApp.memoryLimit || $scope.activeApp.manifest.memoryLimit || (256 * 1024 * 1024);
scaleStepWidth = Math.round(memoryLimit / (1024 * 1024) / 10); // scaleSteps is 10
scaleMax = $scope.activeApp.memoryLimit || $scope.activeApp.manifest.memoryLimit || (256 * 1024 * 1024);
}
var stepSize;
if (scaleMax >= (8 * 1024 * 1024 * 1024)) stepSize = 1024;
else if (scaleMax >= (4 * 1024 * 1024 * 1024)) stepSize = 512;
else if (scaleMax >= (2 * 1024 * 1024 * 1024)) stepSize = 256;
else stepSize = 128;
var options = {
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: scaleStepWidth,
scaleStartValue: 0
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: Math.round(scaleMax / (1024 * 1024)),
stepSize: stepSize,
beginAtZero: true
}
}]
}
};
if ($scope.memoryChart) $scope.memoryChart.destroy();
$scope.memoryChart = chart.Line(tmp, options);
var ctx = $('#memoryAppChart').get(0).getContext('2d');
new Chart(ctx, { type: 'line', data: data, options: options });
});
};
@@ -164,10 +169,18 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
};
});
var ctx = $('#memoryUsageSystemChart').get(0).getContext('2d');
var chart = new Chart(ctx).Doughnut($scope.memoryUsageSystem);
var tmp = {
datasets: [{
data: result.map(function (data) { return bytesToMegaBytes(data.datapoints[0][0]); }),
backgroundColor: result.map(function (data, index) { return targetsInfo[index].color; })
}],
labels: result.map(function (data, index) { return targetsInfo[index].label; })
};
$('#memoryUsageSystemChart').get(0).onclick = function (event) {
var ctx = $('#memoryUsageSystemChart').get(0).getContext('2d');
new Chart(ctx, { type: 'doughnut', data: tmp, options: { legend: { display: false }}});
$('#memoryUsageSystemChart').get(0).onclick = function () {
$scope.setMemoryApp('system');
};
});
@@ -212,19 +225,24 @@ angular.module('Application').controller('GraphsController', ['$scope', '$locati
};
});
var ctx = $('#memoryUsageAppsChart').get(0).getContext('2d');
var chart = new Chart(ctx).Doughnut($scope.memoryUsageApps);
$('#memoryUsageAppsChart').get(0).onclick = function (event) {
var activeBars = chart.getSegmentsAtEvent(event);
// dismiss non chart clicks
if (!activeBars || !activeBars[0]) return;
// try to find the app for this segment
var selectedDataInfo = targetsInfo.filter(function (info) { return info.label === activeBars[0].label; })[0];
if (selectedDataInfo) $scope.setMemoryApp(selectedDataInfo.app, selectedDataInfo.color);
var tmp = {
datasets: [{
data: aggregatedResult.map(function (data) { return bytesToMegaBytes(data.datapoints[0][0]); }),
backgroundColor: aggregatedResult.map(function (data, index) { return targetsInfo[index].color; })
}],
labels: aggregatedResult.map(function (data, index) { return targetsInfo[index].label; })
};
var options = {
onClick: function (event, dataset) {
var selectedDataInfo = targetsInfo.find(function (info) { return info.label === dataset[0]._model.label; });
if (selectedDataInfo) $scope.setMemoryApp(selectedDataInfo.app, selectedDataInfo.color);
},
legend: { display: false }
};
var ctx = $('#memoryUsageAppsChart').get(0).getContext('2d');
new Chart(ctx, { type: 'doughnut', data: tmp, options: options });
});
};