diff --git a/src/index.html b/src/index.html index d28433a04..f1850649e 100644 --- a/src/index.html +++ b/src/index.html @@ -138,7 +138,6 @@
  • Domains & Certs
  • Email
  • Event Log
    • -
  • Graphs
  • Network
  • Notifications {{ notifications.length }}
  • Settings
    • diff --git a/src/js/index.js b/src/js/index.js index e206c1ab7..4aa039047 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -132,9 +132,6 @@ app.config(['$routeProvider', function ($routeProvider) { }).when('/branding', { controller: 'BrandingController', templateUrl: 'views/branding.html?<%= revision %>' - }).when('/graphs', { - controller: 'GraphsController', - templateUrl: 'views/graphs.html?<%= revision %>' }).when('/network', { controller: 'NetworkController', templateUrl: 'views/network.html?<%= revision %>' diff --git a/src/theme.scss b/src/theme.scss index fd5b43071..a5f0885cc 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -1150,13 +1150,9 @@ footer { } // ---------------------------- -// Graphs classes +// System classes // ---------------------------- -.graphs { - text-align: center; -} - .color-indicator { display: inline-block; width: 3px; diff --git a/src/views/graphs.html b/src/views/graphs.html deleted file mode 100644 index 083b43e46..000000000 --- a/src/views/graphs.html +++ /dev/null @@ -1,42 +0,0 @@ -
    - -
    -
    -
    - {{ errorMessage }} -
    -
    - -
    -

    Memory

    -
    - -
    -
    -
    -

    Apps

    -
    - -
    -
    -
    -

    System

    -
    - -
    -
    -
    - -
    - -
    -
    -

    System

    -

    {{ activeApp.fqdn }}

    -
    - -

    Memory consumption in MB.

    -
    -
    -
    -
    diff --git a/src/views/graphs.js b/src/views/graphs.js deleted file mode 100644 index 09c9215ea..000000000 --- a/src/views/graphs.js +++ /dev/null @@ -1,249 +0,0 @@ -'use strict'; - -/* global Chart:false */ -/* global asyncForEach:false */ -/* global angular:false */ -/* global $:false */ - -angular.module('Application').controller('GraphsController', ['$scope', '$location', 'Client', function ($scope, $location, Client) { - Client.onReady(function () { if (!Client.getUserInfo().isAtLeastAdmin) $location.path('/'); }); - - $scope.memoryUsageSystem = []; - $scope.memoryUsageApps = []; - $scope.activeApp = null; - $scope.memory = null; - - $scope.errorMessage = ''; - - $scope.installedApps = Client.getInstalledApps(); - - // we use 1024 to match free -m output (which is not si units) - function bytesToMegaBytes(value) { - return (value/1024/1024).toFixed(2); - } - - // http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript - function getRandomColor() { - var letters = '0123456789ABCDEF'.split(''); - var color = '#'; - for (var i = 0; i < 6; i++ ) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; - } - - var colorIndex = 0; - var colors = [ '#2196F3', '#3995b1', '#f0ad4e', '#ff4c4c' ]; - function getNextColor() { - if (colors[colorIndex+1]) return colors[colorIndex++]; - return getRandomColor(); - } - - $scope.setError = function (context, error) { - $scope.errorMessage = 'Error loading ' + context + ' : ' + error.message; - }; - - $scope.setMemoryApp = function (app, color) { - $scope.activeApp = app; - - var timePeriod = 12 * 60; // in minutes - var timeBucketSize = 60; // in minutes - - var target; - if (app === 'system') target = 'summarize(sum(collectd.localhost.memory.memory-used, collectd.localhost.swap.swap-used), "' + timeBucketSize + 'min", "avg")'; - 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 $scope.setError('memory', error); - - // translate the data from bytes to MB - 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 data = { - labels: labels, - datasets: [{ - label: 'Memory', - 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 scaleMax = 0; - if ($scope.activeApp === 'system') { - scaleMax = $scope.memory.memory + $scope.memory.swap; - } else { - 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 = { - legend: { - display: false - }, - scales: { - yAxes: [{ - ticks: { - min: 0, - max: Math.round(scaleMax / (1024 * 1024)), - stepSize: stepSize, - beginAtZero: true - } - }] - } - }; - - var ctx = $('#memoryAppChart').get(0).getContext('2d'); - new Chart(ctx, { type: 'line', data: data, options: options }); - }); - }; - - $scope.updateMemorySystemChart = function () { - var targets = []; - var targetsInfo = []; - - targets.push('summarize(collectd.localhost.memory.memory-used, "1min", "avg")'); - targetsInfo.push({ label: 'Memory (RAM)', color: '#2196F3' }); - - targets.push('summarize(collectd.localhost.swap.swap-used, "1min", "avg")'); - targetsInfo.push({ label: 'Swap', color: '#2196A9' }); - - targets.push('summarize(sum(collectd.localhost.memory.memory-buffered, collectd.localhost.memory.memory-cached), "1min", "avg")'); - targetsInfo.push({ label: 'Memory (Cached)', color: '#f0ad4e' }); - - targets.push('summarize(collectd.localhost.swap.swap-cached, "1min", "avg")'); - targetsInfo.push({ label: 'Swap (Cached)', color: '#f0cd4e' }); - - targets.push('summarize(collectd.localhost.memory.memory-free, "1min", "avg")'); - targetsInfo.push({ label: 'Memory (Free)', color: '#27DD65' }); - - targets.push('summarize(collectd.localhost.swap.swap-free, "1min", "avg")'); - targetsInfo.push({ label: 'Swap (Free)', color: '#27CE65' }); - - Client.graphs(targets, '-1min', {}, function (error, result) { - if (error) return $scope.setError('memory', error); - - $scope.memoryUsageSystem = result.map(function (data, index) { - return { - value: bytesToMegaBytes(data.datapoints[0][0]), - color: targetsInfo[index].color, - highlight: targetsInfo[index].color, - label: targetsInfo[index].label - }; - }); - - 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; }) - }; - - var options = { - onClick: function (/*event, dataset*/) { - $scope.setMemoryApp('system'); - }, - legend: { display: false } - }; - - var ctx = $('#memoryUsageSystemChart').get(0).getContext('2d'); - new Chart(ctx, { type: 'doughnut', data: tmp, options: options }); - }); - }; - - $scope.updateMemoryAppsChart = function () { - var targets = []; - var targetsInfo = []; - - colorIndex = 0; - $scope.installedApps.forEach(function (app) { - targets.push('summarize(collectd.localhost.table-' + app.id + '-memory.gauge-rss, "1min", "avg")'); - targetsInfo.push({ - label: app.fqdn, - color: getNextColor(), - app: app - }); - }); - - // we split up the request, to avoid too large query strings into graphite - var tmp = []; - var aggregatedResult= []; - - while (targets.length > 0) tmp.push(targets.splice(0, 10)); - - asyncForEach(tmp, function (targets, callback) { - Client.graphs(targets, '-1min', {}, function (error, result) { - if (error) return callback(error); - - aggregatedResult = aggregatedResult.concat(result); - - callback(null); - }); - }, function (error) { - if (error) return $scope.setError('memory', error); - - $scope.memoryUsageApps = aggregatedResult.map(function (data, index) { - return { - value: bytesToMegaBytes(data.datapoints[0][0]), - color: targetsInfo[index].color, - highlight: targetsInfo[index].color, - label: targetsInfo[index].label - }; - }); - - 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 }); - }); - }; - - function getMemory(callback) { - Client.memory(function (error, memory) { - if (error) console.error(error); - - $scope.memory = memory; - - callback(); - }); - } - - Client.onReady(function () { - getMemory(function () { - $scope.updateMemorySystemChart(); - $scope.updateMemoryAppsChart(); - $scope.setMemoryApp('system'); - }); - }); - - $('.modal-backdrop').remove(); -}]);