diff --git a/src/views/system.html b/src/views/system.html index 1ca73195a..a6a530fb3 100644 --- a/src/views/system.html +++ b/src/views/system.html @@ -64,6 +64,75 @@ +
+

Graphs

+
+ + + +
+
+
+
+ {{ disks.errorMessage }} +
+
+ +
+
+

+
+
+
+
+
+

{{ disk.filesystem }} mounted at {{ disk.mountpoint }} {{ disk.available | prettyDiskSize }} of {{ disk.size | prettyDiskSize }} available

+
+
+
+
+

This {{ disk.type }} disk contains:

+ +
+
+
+
+ + + +
+ + +
+ + + +
+ + +
+ + +
+ + +
+ + +

Services

@@ -162,42 +231,4 @@ - -
-

Disk Usage

-
- -
-
-
-
- {{ disks.errorMessage }} -
-
- -
-
-

-
-
-
-
-
-

{{ disk.filesystem }} mounted at {{ disk.mountpoint }} {{ disk.available | prettyDiskSize }} of {{ disk.size | prettyDiskSize }} available

-
-
-
-
-

This {{ disk.type }} disk contains:

- -
-
-
-
- diff --git a/src/views/system.js b/src/views/system.js index d992cf4ea..3eb6f9ee8 100644 --- a/src/views/system.js +++ b/src/views/system.js @@ -3,6 +3,7 @@ /* global angular:false */ /* global $:false */ /* global asyncForEach */ +/* global Chart */ angular.module('Application').controller('SystemController', ['$scope', '$location', '$timeout', 'Client', function ($scope, $location, $timeout, Client) { Client.onReady(function () { if (!Client.getUserInfo().isAtLeastAdmin) $location.path('/'); }); @@ -13,6 +14,7 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati $scope.hasRedisServices = false; $scope.redisServicesExpanded = false; $scope.memory = null; + $scope.activeTab = 0; // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript function getRandomColor() { @@ -260,6 +262,87 @@ angular.module('Application').controller('SystemController', ['$scope', '$locati } }; + $scope.graphs = { + error: {}, + + period: 6, + periodLabel: '6 hours', + memoryChart: null, + diskChart: null, + + setPeriod: function (hours, label) { + $scope.graphs.period = hours; + $scope.graphs.periodLabel = label; + $scope.graphs.show(); + }, + + show: function () { + // both in minutes + var timePeriod = $scope.graphs.period * 60; + var timeBucketSize = $scope.graphs.period > 24 ? (6*60) : 5; + + function fillGraph(canvasId, data, label, chartPropertyName, max, valueDivider) { + // translate the data from bytes to MB + var datapoints = data.datapoints.map(function (d) { return parseInt((d[0] / valueDivider).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 data = { + labels: labels, + datasets: [{ + label: label, + backgroundColor: '#82C4F844', + borderColor: '#2196F3', + borderWidth: 1, + radius: 2, + pointBackgroundColor: 'rgba(151,187,205,1)', + pointBorderColor: '#2196F3', + pointHoverBackgroundColor: '#82C4F8', + pointHoverBorderColor: '#82C4F8', + data: datapoints + }] + }; + + var options = { + maintainAspectRatio: true, + aspectRatio: 2.5, + legend: { + display: false + }, + tooltips: { + intersect: false + }, + scales: { + yAxes: [{ + ticks: { + min: 0, + max: max, + beginAtZero: true + } + }] + } + }; + + var ctx = $(canvasId).get(0).getContext('2d'); + + if ($scope.graphs[chartPropertyName]) $scope.graphs[chartPropertyName].destroy(); + $scope.graphs[chartPropertyName] = new Chart(ctx, { type: 'line', data: data, options: options }); + } + + var systemMemoryuery = 'summarize(sum(collectd.localhost.memory.memory-used, collectd.localhost.swap.swap-used), "' + timeBucketSize + 'min", "avg")'; + var cpuQuery = 'summarize(sum(collectd.localhost.aggregation-cpu-average.cpu-system, collectd.localhost.aggregation-cpu-average.cpu-user), "' + timeBucketSize + 'min", "avg")'; + + Client.graphs([ systemMemoryuery, cpuQuery ], '-' + timePeriod + 'min', {}, function (error, result) { + if (error) return console.error(error); + + fillGraph('#graphsSystemMemoryChart', result[0], 'Memory', 'memoryChart', Number.parseInt($scope.memory.memory / 1024 / 1024), 1024 * 1024); + fillGraph('#graphsCPUChart', result[1], 'CPU Usage', 'cpuChart', 100, 1); + }); + } + }; + Client.onReady(function () { Client.memory(function (error, memory) { if (error) console.error(error);