Re-implement hotkets system in the webui

glances/outputs/static/bower.json

@@ -6,6 +6,13 @@
     "angular-route": "^1.5.8",
     "lodash": "^4.13.1",
     "favico.js": "^0.3.10",
-    "angular-hotkeys-light": "^1.1.1"
+    "angular-hotkeys": "chieffancypants/angular-hotkeys#^1.7.0"
+  },
+  "overrides": {
+    "angular-hotkeys": {
+      "main": [
+        "build/hotkeys.js"
+      ]
+    }
   }
 }

glances/outputs/static/js/app.js

@@ -1,8 +1,13 @@
-var glancesApp = angular.module('glancesApp', ['ngRoute', 'glances.config', 'fps.hotkeys'])
+var glancesApp = angular.module('glancesApp', ['ngRoute', 'glances.config', 'cfp.hotkeys'])
 
 .value('CONFIG', {})
 .value('ARGUMENTS', {})
 
+.config(function(hotkeysProvider) {
+  hotkeysProvider.useNgRoute = false;
+  hotkeysProvider.includeCheatSheet = false;
+})
+
 .run(function($rootScope) {
       $rootScope.title = "Glances";
 });

glances/outputs/static/js/components/glances/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesController($scope, $rootScope, $timeout, GlancesStats, REFRESH_TIME, Hotkeys, ARGUMENTS) {
+function GlancesController($scope, $rootScope, $timeout, GlancesStats, REFRESH_TIME, hotkeys, ARGUMENTS) {
     var vm = this;
     vm.dataLoaded = false;
     vm.arguments = ARGUMENTS;
@@ -30,10 +30,207 @@ function GlancesController($scope, $rootScope, $timeout, GlancesStats, REFRESH_T
 
     vm.refreshData();
 
-    Hotkeys.registerHotkey(Hotkeys.createHotkey({
+    // A => Enable/disable AMPs
-        key: 'm',
+    hotkeys.add({
+        combo: 'A',
         callback: function () {
-          console.log('Sort processes by MEM%');
+          ARGUMENTS.disable_amps = !ARGUMENTS.disable_amps;
         }
-    }));
+    });
+
+    // d => Show/hide disk I/O stats
+    hotkeys.add({
+        combo: 'd',
+        callback: function () {
+          ARGUMENTS.disable_diskio = !ARGUMENTS.disable_diskio;
+        }
+    });
+
+    // Q => Show/hide IRQ
+    hotkeys.add({
+        combo: 'Q',
+        callback: function () {
+          ARGUMENTS.enable_irq = !ARGUMENTS.enable_irq;
+        }
+    });
+
+    // f => Show/hide filesystem stats
+    hotkeys.add({
+        combo: 'f',
+        callback: function () {
+          ARGUMENTS.disable_fs = !ARGUMENTS.disable_fs;
+        }
+    });
+
+    // n => Show/hide network stats
+    hotkeys.add({
+        combo: 'n',
+        callback: function () {
+          ARGUMENTS.disable_network = !ARGUMENTS.disable_network;
+        }
+    });
+
+    // s => Show/hide sensors stats
+    hotkeys.add({
+        combo: 's',
+        callback: function () {
+          ARGUMENTS.disable_sensors = !ARGUMENTS.disable_sensors;
+        }
+    });
+
+    // 2 => Show/hide left sidebar
+    hotkeys.add({
+        combo: '2',
+        callback: function () {
+          ARGUMENTS.disable_left_sidebar = !ARGUMENTS.disable_left_sidebar;
+        }
+    });
+
+    // z => Enable/disable processes stats
+    hotkeys.add({
+        combo: 'z',
+        callback: function () {
+          ARGUMENTS.disable_process = !ARGUMENTS.disable_process;
+        }
+    });
+
+    // SLASH => Enable/disable short processes name
+    hotkeys.add({
+        combo: '/',
+        callback: function () {
+          ARGUMENTS.process_short_name = !ARGUMENTS.process_short_name;
+        }
+    });
+
+    // D => Enable/disable Docker stats
+    hotkeys.add({
+        combo: 'D',
+        callback: function () {
+          ARGUMENTS.disable_docker = !ARGUMENTS.disable_docker;
+        }
+    });
+
+    // b => Bytes or bits for network I/O
+    hotkeys.add({
+        combo: 'b',
+        callback: function () {
+          ARGUMENTS.byte = !ARGUMENTS.byte;
+        }
+    });
+
+    // 'B' => Switch between bit/s and IO/s for Disk IO
+    hotkeys.add({
+        combo: 'B',
+        callback: function () {
+          ARGUMENTS.diskio_iops = !ARGUMENTS.diskio_iops;
+        }
+    });
+
+    // l => Show/hide alert logs
+    hotkeys.add({
+        combo: 'l',
+        callback: function () {
+          ARGUMENTS.disable_alert = !ARGUMENTS.disable_alert;
+        }
+    });
+
+    // 1 => Global CPU or per-CPU stats
+    hotkeys.add({
+        combo: '1',
+        callback: function () {
+          ARGUMENTS.percpu = !ARGUMENTS.percpu;
+        }
+    });
+
+    // h => Show/hide this help screen
+    hotkeys.add({
+        combo: 'h',
+        callback: function () {
+          ARGUMENTS.help_tag = !ARGUMENTS.help_tag;
+        }
+    });
+
+    // T => View network I/O as combination
+    hotkeys.add({
+        combo: 'T',
+        callback: function () {
+          ARGUMENTS.network_sum = !ARGUMENTS.network_sum;
+        }
+    });
+
+    // U => View cumulative network I/O
+    hotkeys.add({
+        combo: 'U',
+        callback: function () {
+          ARGUMENTS.network_cumul = !ARGUMENTS.network_cumul;
+        }
+    });
+
+    // F => Show filesystem free space
+    hotkeys.add({
+        combo: 'F',
+        callback: function () {
+          ARGUMENTS.fs_free_space = !ARGUMENTS.fs_free_space;
+        }
+    });
+
+    // 3 => Enable/disable quick look plugin
+    hotkeys.add({
+        combo: '3',
+        callback: function () {
+          ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
+        }
+    });
+
+    // 6 => Enable/disable mean gpu
+    hotkeys.add({
+        combo: '6',
+        callback: function () {
+          ARGUMENTS.meangpu = !ARGUMENTS.meangpu;
+        }
+    });
+
+    // G => Enable/disable gpu
+    hotkeys.add({
+        combo: 'G',
+        callback: function () {
+          ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
+        }
+    });
+
+    hotkeys.add({
+        combo: '5',
+        callback: function () {
+          ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
+          ARGUMENTS.disable_cpu = !ARGUMENTS.disable_cpu;
+          ARGUMENTS.disable_mem = !ARGUMENTS.disable_mem;
+          ARGUMENTS.disable_memswap = !ARGUMENTS.disable_memswap;
+          ARGUMENTS.disable_load = !ARGUMENTS.disable_load;
+          ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
+        }
+    });
+
+    // I => Show/hide IP module
+    hotkeys.add({
+        combo: 'I',
+        callback: function () {
+          ARGUMENTS.disable_ip = !ARGUMENTS.disable_ip;
+        }
+    });
+
+    // P => Enable/disable ports module
+    hotkeys.add({
+        combo: 'P',
+        callback: function () {
+          ARGUMENTS.disable_ports = !ARGUMENTS.disable_ports;
+        }
+    });
+
+    // 'W' > Enable/Disable Wifi plugin
+    hotkeys.add({
+        combo: 'W',
+        callback: function () {
+          ARGUMENTS.disable_wifi = !ARGUMENTS.disable_wifi;
+        }
+    });
 }

glances/outputs/static/js/components/plugin-process/controller.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function GlancesPluginProcessController(ARGUMENTS) {
+function GlancesPluginProcessController(ARGUMENTS, hotkeys) {
     var vm = this;
     vm.arguments = ARGUMENTS;
 
@@ -18,4 +18,67 @@ function GlancesPluginProcessController(ARGUMENTS) {
             }
         }
     };
+
+    // a => Sort processes automatically
+    hotkeys.add({
+        combo: 'a',
+        callback: function () {
+          vm.sorter.column = "cpu_percent";
+          vm.sorter.auto = true;
+        }
+    });
+
+    // c => Sort processes by CPU%
+    hotkeys.add({
+        combo: 'c',
+        callback: function () {
+          vm.sorter.column = "cpu_percent";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // m => Sort processes by MEM%
+    hotkeys.add({
+        combo: 'm',
+        callback: function () {
+          vm.sorter.column = "memory_percent";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // u => Sort processes by user
+    hotkeys.add({
+        combo: 'u',
+        callback: function () {
+          vm.sorter.column = "username";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // p => Sort processes by name
+    hotkeys.add({
+        combo: 'p',
+        callback: function () {
+          vm.sorter.column = "name";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // i => Sort processes by I/O rate
+    hotkeys.add({
+        combo: 'i',
+        callback: function () {
+          vm.sorter.column = ['io_read', 'io_write'];
+          vm.sorter.auto = false;
+        }
+    });
+
+    // t => Sort processes by time
+    hotkeys.add({
+        combo: 't',
+        callback: function () {
+          vm.sorter.column = "timemillis";
+          vm.sorter.auto = false;
+        }
+    });
 }

glances/outputs/static/public/js/main.min.js

@@ -1,8 +1,13 @@
-var glancesApp = angular.module('glancesApp', ['ngRoute', 'glances.config', 'fps.hotkeys'])
+var glancesApp = angular.module('glancesApp', ['ngRoute', 'glances.config', 'cfp.hotkeys'])
 
 .value('CONFIG', {})
 .value('ARGUMENTS', {})
 
+.config(["hotkeysProvider", function(hotkeysProvider) {
+  hotkeysProvider.useNgRoute = false;
+  hotkeysProvider.includeCheatSheet = false;
+}])
+
 .run(["$rootScope", function($rootScope) {
       $rootScope.title = "Glances";
 }]);
@@ -274,7 +279,7 @@ glancesApp.component('glances', {
 
 'use strict';
 
-function GlancesController($scope, $rootScope, $timeout, GlancesStats, REFRESH_TIME, Hotkeys, ARGUMENTS) {
+function GlancesController($scope, $rootScope, $timeout, GlancesStats, REFRESH_TIME, hotkeys, ARGUMENTS) {
     var vm = this;
     vm.dataLoaded = false;
     vm.arguments = ARGUMENTS;
@@ -304,12 +309,209 @@ function GlancesController($scope, $rootScope, $timeout, GlancesStats, REFRESH_T
 
     vm.refreshData();
 
-    Hotkeys.registerHotkey(Hotkeys.createHotkey({
+    // A => Enable/disable AMPs
-        key: 'm',
+    hotkeys.add({
+        combo: 'A',
         callback: function () {
-          console.log('Sort processes by MEM%');
+          ARGUMENTS.disable_amps = !ARGUMENTS.disable_amps;
         }
-    }));
+    });
+
+    // d => Show/hide disk I/O stats
+    hotkeys.add({
+        combo: 'd',
+        callback: function () {
+          ARGUMENTS.disable_diskio = !ARGUMENTS.disable_diskio;
+        }
+    });
+
+    // Q => Show/hide IRQ
+    hotkeys.add({
+        combo: 'Q',
+        callback: function () {
+          ARGUMENTS.enable_irq = !ARGUMENTS.enable_irq;
+        }
+    });
+
+    // f => Show/hide filesystem stats
+    hotkeys.add({
+        combo: 'f',
+        callback: function () {
+          ARGUMENTS.disable_fs = !ARGUMENTS.disable_fs;
+        }
+    });
+
+    // n => Show/hide network stats
+    hotkeys.add({
+        combo: 'n',
+        callback: function () {
+          ARGUMENTS.disable_network = !ARGUMENTS.disable_network;
+        }
+    });
+
+    // s => Show/hide sensors stats
+    hotkeys.add({
+        combo: 's',
+        callback: function () {
+          ARGUMENTS.disable_sensors = !ARGUMENTS.disable_sensors;
+        }
+    });
+
+    // 2 => Show/hide left sidebar
+    hotkeys.add({
+        combo: '2',
+        callback: function () {
+          ARGUMENTS.disable_left_sidebar = !ARGUMENTS.disable_left_sidebar;
+        }
+    });
+
+    // z => Enable/disable processes stats
+    hotkeys.add({
+        combo: 'z',
+        callback: function () {
+          ARGUMENTS.disable_process = !ARGUMENTS.disable_process;
+        }
+    });
+
+    // SLASH => Enable/disable short processes name
+    hotkeys.add({
+        combo: '/',
+        callback: function () {
+          ARGUMENTS.process_short_name = !ARGUMENTS.process_short_name;
+        }
+    });
+
+    // D => Enable/disable Docker stats
+    hotkeys.add({
+        combo: 'D',
+        callback: function () {
+          ARGUMENTS.disable_docker = !ARGUMENTS.disable_docker;
+        }
+    });
+
+    // b => Bytes or bits for network I/O
+    hotkeys.add({
+        combo: 'b',
+        callback: function () {
+          ARGUMENTS.byte = !ARGUMENTS.byte;
+        }
+    });
+
+    // 'B' => Switch between bit/s and IO/s for Disk IO
+    hotkeys.add({
+        combo: 'B',
+        callback: function () {
+          ARGUMENTS.diskio_iops = !ARGUMENTS.diskio_iops;
+        }
+    });
+
+    // l => Show/hide alert logs
+    hotkeys.add({
+        combo: 'l',
+        callback: function () {
+          ARGUMENTS.disable_alert = !ARGUMENTS.disable_alert;
+        }
+    });
+
+    // 1 => Global CPU or per-CPU stats
+    hotkeys.add({
+        combo: '1',
+        callback: function () {
+          ARGUMENTS.percpu = !ARGUMENTS.percpu;
+        }
+    });
+
+    // h => Show/hide this help screen
+    hotkeys.add({
+        combo: 'h',
+        callback: function () {
+          ARGUMENTS.help_tag = !ARGUMENTS.help_tag;
+        }
+    });
+
+    // T => View network I/O as combination
+    hotkeys.add({
+        combo: 'T',
+        callback: function () {
+          ARGUMENTS.network_sum = !ARGUMENTS.network_sum;
+        }
+    });
+
+    // U => View cumulative network I/O
+    hotkeys.add({
+        combo: 'U',
+        callback: function () {
+          ARGUMENTS.network_cumul = !ARGUMENTS.network_cumul;
+        }
+    });
+
+    // F => Show filesystem free space
+    hotkeys.add({
+        combo: 'F',
+        callback: function () {
+          ARGUMENTS.fs_free_space = !ARGUMENTS.fs_free_space;
+        }
+    });
+
+    // 3 => Enable/disable quick look plugin
+    hotkeys.add({
+        combo: '3',
+        callback: function () {
+          ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
+        }
+    });
+
+    // 6 => Enable/disable mean gpu
+    hotkeys.add({
+        combo: '6',
+        callback: function () {
+          ARGUMENTS.meangpu = !ARGUMENTS.meangpu;
+        }
+    });
+
+    // G => Enable/disable gpu
+    hotkeys.add({
+        combo: 'G',
+        callback: function () {
+          ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
+        }
+    });
+
+    hotkeys.add({
+        combo: '5',
+        callback: function () {
+          ARGUMENTS.disable_quicklook = !ARGUMENTS.disable_quicklook;
+          ARGUMENTS.disable_cpu = !ARGUMENTS.disable_cpu;
+          ARGUMENTS.disable_mem = !ARGUMENTS.disable_mem;
+          ARGUMENTS.disable_memswap = !ARGUMENTS.disable_memswap;
+          ARGUMENTS.disable_load = !ARGUMENTS.disable_load;
+          ARGUMENTS.disable_gpu = !ARGUMENTS.disable_gpu;
+        }
+    });
+
+    // I => Show/hide IP module
+    hotkeys.add({
+        combo: 'I',
+        callback: function () {
+          ARGUMENTS.disable_ip = !ARGUMENTS.disable_ip;
+        }
+    });
+
+    // P => Enable/disable ports module
+    hotkeys.add({
+        combo: 'P',
+        callback: function () {
+          ARGUMENTS.disable_ports = !ARGUMENTS.disable_ports;
+        }
+    });
+
+    // 'W' > Enable/Disable Wifi plugin
+    hotkeys.add({
+        combo: 'W',
+        callback: function () {
+          ARGUMENTS.disable_wifi = !ARGUMENTS.disable_wifi;
+        }
+    });
 }
 
 'use strict';
@@ -849,6 +1051,99 @@ function GlancesPluginPercpuController($scope, GlancesPluginHelper) {
 
 'use strict';
 
+glancesApp.component('glancesPluginProcess', {
+    controller: GlancesPluginProcessController,
+    controllerAs: 'vm',
+    templateUrl: 'components/plugin-process/view.html'
+});
+
+'use strict';
+
+function GlancesPluginProcessController(ARGUMENTS, hotkeys) {
+    var vm = this;
+    vm.arguments = ARGUMENTS;
+
+    vm.sorter = {
+        column: "cpu_percent",
+        auto: true,
+        isReverseColumn: function (column) {
+            return !(column === 'username' || column === 'name');
+        },
+        getColumnLabel: function (column) {
+            if (_.isEqual(column, ['io_read', 'io_write'])) {
+                return 'io_counters';
+            } else {
+                return column;
+            }
+        }
+    };
+
+    // a => Sort processes automatically
+    hotkeys.add({
+        combo: 'a',
+        callback: function () {
+          vm.sorter.column = "cpu_percent";
+          vm.sorter.auto = true;
+        }
+    });
+
+    // c => Sort processes by CPU%
+    hotkeys.add({
+        combo: 'c',
+        callback: function () {
+          vm.sorter.column = "cpu_percent";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // m => Sort processes by MEM%
+    hotkeys.add({
+        combo: 'm',
+        callback: function () {
+          vm.sorter.column = "memory_percent";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // u => Sort processes by user
+    hotkeys.add({
+        combo: 'u',
+        callback: function () {
+          vm.sorter.column = "username";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // p => Sort processes by name
+    hotkeys.add({
+        combo: 'p',
+        callback: function () {
+          vm.sorter.column = "name";
+          vm.sorter.auto = false;
+        }
+    });
+
+    // i => Sort processes by I/O rate
+    hotkeys.add({
+        combo: 'i',
+        callback: function () {
+          vm.sorter.column = ['io_read', 'io_write'];
+          vm.sorter.auto = false;
+        }
+    });
+
+    // t => Sort processes by time
+    hotkeys.add({
+        combo: 't',
+        callback: function () {
+          vm.sorter.column = "timemillis";
+          vm.sorter.auto = false;
+        }
+    });
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginPorts', {
     controller: GlancesPluginPortsController,
     controllerAs: 'vm',
@@ -890,36 +1185,6 @@ function GlancesPluginPortsController($scope) {
 
 'use strict';
 
-glancesApp.component('glancesPluginProcess', {
-    controller: GlancesPluginProcessController,
-    controllerAs: 'vm',
-    templateUrl: 'components/plugin-process/view.html'
-});
-
-'use strict';
-
-function GlancesPluginProcessController(ARGUMENTS) {
-    var vm = this;
-    vm.arguments = ARGUMENTS;
-
-    vm.sorter = {
-        column: "cpu_percent",
-        auto: true,
-        isReverseColumn: function (column) {
-            return !(column === 'username' || column === 'name');
-        },
-        getColumnLabel: function (column) {
-            if (_.isEqual(column, ['io_read', 'io_write'])) {
-                return 'io_counters';
-            } else {
-                return column;
-            }
-        }
-    };
-}
-
-'use strict';
-
 glancesApp.component('glancesPluginProcesscount', {
     controller: GlancesPluginProcesscountController,
     controllerAs: 'vm',
@@ -953,6 +1218,58 @@ function GlancesPluginProcesscountController($scope) {
 
 'use strict';
 
+glancesApp.component('glancesPluginQuicklook', {
+    controller: GlancesPluginQuicklookController,
+    controllerAs: 'vm',
+    templateUrl: 'components/plugin-quicklook/view.html'
+});
+
+'use strict';
+
+function GlancesPluginQuicklookController($scope, ARGUMENTS) {
+    var vm = this;
+    vm.arguments = ARGUMENTS;
+    var _view = {};
+
+    vm.mem = null;
+    vm.cpu = null;
+    vm.cpu_name = null;
+    vm.cpu_hz_current = null;
+    vm.cpu_hz = null;
+    vm.swap = null;
+    vm.percpus = [];
+
+    $scope.$on('data_refreshed', function(event, data) {
+      var stats = data.stats['quicklook'];
+      _view = data.view['quicklook'];
+
+      vm.mem = stats.mem;
+      vm.cpu = stats.cpu;
+      vm.cpu_name = stats.cpu_name;
+      vm.cpu_hz_current = stats.cpu_hz_current;
+      vm.cpu_hz = stats.cpu_hz;
+      vm.swap = stats.swap;
+      vm.percpus = [];
+
+      angular.forEach(stats.percpu, function(cpu) {
+          vm.percpus.push({
+              'number': cpu.cpu_number,
+              'total': cpu.total
+          });
+      }, this);
+    });
+
+    this.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginProcesslist', {
     controller: GlancesPluginProcesslistController,
     controllerAs: 'vm',
@@ -1029,58 +1346,6 @@ function GlancesPluginProcesslistController($scope, GlancesPluginHelper, $filter
 
 'use strict';
 
-glancesApp.component('glancesPluginQuicklook', {
-    controller: GlancesPluginQuicklookController,
-    controllerAs: 'vm',
-    templateUrl: 'components/plugin-quicklook/view.html'
-});
-
-'use strict';
-
-function GlancesPluginQuicklookController($scope, ARGUMENTS) {
-    var vm = this;
-    vm.arguments = ARGUMENTS;
-    var _view = {};
-
-    vm.mem = null;
-    vm.cpu = null;
-    vm.cpu_name = null;
-    vm.cpu_hz_current = null;
-    vm.cpu_hz = null;
-    vm.swap = null;
-    vm.percpus = [];
-
-    $scope.$on('data_refreshed', function(event, data) {
-      var stats = data.stats['quicklook'];
-      _view = data.view['quicklook'];
-
-      vm.mem = stats.mem;
-      vm.cpu = stats.cpu;
-      vm.cpu_name = stats.cpu_name;
-      vm.cpu_hz_current = stats.cpu_hz_current;
-      vm.cpu_hz = stats.cpu_hz;
-      vm.swap = stats.swap;
-      vm.percpus = [];
-
-      angular.forEach(stats.percpu, function(cpu) {
-          vm.percpus.push({
-              'number': cpu.cpu_number,
-              'total': cpu.total
-          });
-      }, this);
-    });
-
-    this.getDecoration = function (value) {
-        if (_view[value] === undefined) {
-            return;
-        }
-
-        return _view[value].decoration.toLowerCase();
-    };
-}
-
-'use strict';
-
 glancesApp.component('glancesPluginSystem', {
     controller: GlancesPluginSystemController,
     controllerAs: 'vm',
@@ -1118,25 +1383,6 @@ function GlancesPluginSystemController($scope) {
 
 'use strict';
 
-glancesApp.component('glancesPluginUptime', {
-    controller: GlancesPluginUptimeController,
-    controllerAs: 'vm',
-    templateUrl: 'components/plugin-uptime/view.html'
-});
-
-'use strict';
-
-function GlancesPluginUptimeController($scope) {
-    var vm = this;
-    vm.value = null;
-
-    $scope.$on('data_refreshed', function(event, data) {
-      vm.value = data.stats['uptime'];
-    });
-}
-
-'use strict';
-
 glancesApp.component('glancesPluginWifi', {
     controller: GlancesPluginWifiController,
     controllerAs: 'vm',
@@ -1182,3 +1428,22 @@ function GlancesPluginWifiController($scope, $filter) {
         return _view[hotpost.ssid][field].decoration.toLowerCase();
     };
 }
+
+'use strict';
+
+glancesApp.component('glancesPluginUptime', {
+    controller: GlancesPluginUptimeController,
+    controllerAs: 'vm',
+    templateUrl: 'components/plugin-uptime/view.html'
+});
+
+'use strict';
+
+function GlancesPluginUptimeController($scope) {
+    var vm = this;
+    vm.value = null;
+
+    $scope.$on('data_refreshed', function(event, data) {
+      vm.value = data.stats['uptime'];
+    });
+}

glances/outputs/static/public/js/templates.min.js

@@ -12,11 +12,11 @@ $templateCache.put('components/plugin-mem-more/view.html','<section id="mem-more
 $templateCache.put('components/plugin-memswap/view.html','<section id="memswap" class="plugin">\n    <div class="table">\n        <div class="table-row">\n            <div class="table-cell text-left title">SWAP</div>\n            <div class="table-cell">{{ vm.percent }}%</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">total:</div>\n            <div class="table-cell">{{ vm.total | bytes }}</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">used:</div>\n            <div class="table-cell" ng-class="vm.getDecoration(\'used\')">\n                {{ vm.used | bytes }}\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">free:</div>\n            <div class="table-cell">{{ vm.free | bytes }}</div>\n        </div>\n    </div>\n</section>\n');
 $templateCache.put('components/plugin-network/view.html','<div class="table-row">\n  <div class="table-cell text-left title">NETWORK</div>\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Rx/s</div>\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">Tx/s</div>\n\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx/s</div>\n\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Rx</div>\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">Tx</div>\n\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">Rx+Tx</div>\n</div>\n<div class="table-row" ng-repeat="network in vm.networks track by network.interfaceName">\n  <div class="table-cell text-left">{{ network.interfaceName | min_size }}</div>\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.rx / network.time_since_update | bytes) : (network.rx / network.time_since_update | bits) }}</div>\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.tx / network.time_since_update | bytes) : (network.tx / network.time_since_update | bits) }}</div>\n\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n  <div class="table-cell" ng-show="!vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cx / network.time_since_update | bytes) : (network.cx / network.time_since_update | bits) }}</div>\n\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeRx | bytes) : (network.cumulativeRx | bits) }}</div>\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && !vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeTx | bytes) : (network.cumulativeTx | bits) }}</div>\n\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum"></div>\n  <div class="table-cell" ng-show="vm.arguments.network_cumul && vm.arguments.network_sum">{{ vm.arguments.byte ? (network.cumulativeCx | bytes) : (network.cumulativeCx | bits) }}</div>\n</div>\n');
 $templateCache.put('components/plugin-percpu/view.html','<section id="percpu" class="plugin">\n    <div class="table">\n        <div class="table-row">\n            <div class="table-cell text-left title">PER CPU</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus">{{ percpu.total }}%</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">user:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getUserAlert(percpu)">\n                {{ percpu.user }}%\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">system:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">\n                {{ percpu.system }}%\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">idle:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus">{{ percpu.idle }}%</div>\n        </div>\n        <div class="table-row" ng-show="vm.cpus[0].iowait">\n            <div class="table-cell text-left">iowait:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">\n                {{ percpu.iowait }}%\n            </div>\n        </div>\n        <div class="table-row" ng-show="vm.cpus[0].steal">\n            <div class="table-cell text-left">steal:</div>\n            <div class="table-cell" ng-repeat="percpu in vm.cpus" ng-class="vm.getSystemAlert(percpu)">\n                {{ percpu.steal }}%\n            </div>\n        </div>\n    </div>\n</section>\n');
-$templateCache.put('components/plugin-ports/view.html','<div class="table-row" ng-repeat="port in vm.ports">\n    <div class="table-cell text-left">{{(port.description ? port.description : port.host + \' \' + port.port) | min_size: 20}}</div>\n    <div class="table-cell"></div>\n    <div ng-switch="port.status" ng-class="vm.getDecoration(port)" class="table-cell">\n        <span ng-switch-when="null">Scanning</span>\n        <span ng-switch-when="false">Timeout</span>\n        <span ng-switch-when="true">Open</span>\n        <span ng-switch-default>{{port.status * 1000.0 | number:0}}ms</span>\n    </div>\n</div>');
 $templateCache.put('components/plugin-process/view.html','<div ng-show="!vm.arguments.disable_process">\n  <glances-plugin-processcount sorter="vm.sorter"></glances-plugin-processcount>\n  <glances-plugin-amps ng-if="!vm.arguments.disable_amps"></glances-plugin-amps>\n  <glances-plugin-processlist sorter="vm.sorter"></glances-plugin-processlist>\n</div>\n<div ng-show="vm.arguments.disable_process">PROCESSES DISABLED (press \'z\' to display)</div>\n');
+$templateCache.put('components/plugin-ports/view.html','<div class="table-row" ng-repeat="port in vm.ports">\n    <div class="table-cell text-left">{{(port.description ? port.description : port.host + \' \' + port.port) | min_size: 20}}</div>\n    <div class="table-cell"></div>\n    <div ng-switch="port.status" ng-class="vm.getDecoration(port)" class="table-cell">\n        <span ng-switch-when="null">Scanning</span>\n        <span ng-switch-when="false">Timeout</span>\n        <span ng-switch-when="true">Open</span>\n        <span ng-switch-default>{{port.status * 1000.0 | number:0}}ms</span>\n    </div>\n</div>');
 $templateCache.put('components/plugin-processcount/view.html','<section id="processcount" class="plugin">\n  <span class="title">TASKS</span>\n  <span>{{ vm.total }} ({{ vm.thread }} thr),</span>\n  <span>{{ vm.running }} run,</span>\n  <span>{{ vm.sleeping }} slp,</span>\n  <span>{{ vm.stopped }} oth</span>\n  <span> sorted {{ vm.sorter.auto ? \'automatically\' : \'\' }} by {{ vm.sorter.getColumnLabel(vm.sorter.column) }}, flat view</span>\n</section>');
-$templateCache.put('components/plugin-processlist/view.html','<section id="processlist-plugin" class="plugin">\n  <div class="table">\n    <div class="table-row">\n      <div sortable-th sorter="vm.sorter" column="cpu_percent" class="table-cell">CPU%</div>\n      <div sortable-th sorter="vm.sorter" column="memory_percent" class="table-cell">MEM%</div>\n      <div class="table-cell hidden-xs hidden-sm">VIRT</div>\n      <div class="table-cell hidden-xs hidden-sm">RES</div>\n      <div class="table-cell">PID</div>\n      <div sortable-th sorter="vm.sorter" column="username" class="table-cell text-left">USER</div>\n      <div class="table-cell">NI</div>\n      <div class="table-cell">S</div>\n      <div sortable-th sorter="vm.sorter" column="timemillis" class="table-cell hidden-xs hidden-sm">TIME+</div>\n      <div sortable-th sorter="vm.sorter" column="io_read" class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">IOR/s</div>\n      <div sortable-th sorter="vm.sorter" column="io_write" class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">IOW/s</div>\n      <div sortable-th sorter="vm.sorter" column="name" class="table-cell text-left">Command</div>\n    </div>\n    <div class="table-row" ng-repeat="process in vm.processes | orderBy:vm.sorter.column:vm.sorter.isReverseColumn(vm.sorter.column) | limitTo: vm.getLimit() track by process.pid">\n      <div class="table-cell" ng-class="vm.getCpuPercentAlert(process)">{{process.cpu_percent | number:1}}</div>\n      <div class="table-cell" ng-class="vm.getMemoryPercentAlert(process)">{{process.memory_percent | number:1}}</div>\n      <div class="table-cell hidden-xs hidden-sm">{{process.memvirt | bytes}}</div>\n      <div class="table-cell hidden-xs hidden-sm">{{process.memres | bytes}}</div>\n      <div class="table-cell">{{process.pid}}</div>\n      <div class="table-cell text-left">{{process.username}}</div>\n      <div class="table-cell" ng-class="{nice: process.isNice}">{{process.nice | exclamation}}</div>\n      <div class="table-cell" ng-class="{status: process.status == \'R\'}">{{process.status}}</div>\n      <div class="table-cell hidden-xs hidden-sm">\n        <span ng-show="process.timeplus.hours > 0" class="highlight">{{ process.timeplus.hours }}h</span>{{ process.timeplus.minutes | leftPad:2:\'0\' }}:{{ process.timeplus.seconds | leftPad:2:\'0\' }}<span ng-show="process.timeplus.hours <= 0">.{{ process.timeplus.milliseconds | leftPad:2:\'0\' }}</span>\n      </div>\n      <div class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">{{process.ioRead}}</div>\n      <div class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">{{process.ioWrite}}</div>\n      <div class="table-cell text-left" ng-show="vm.arguments.process_short_name">{{process.name}}</div>\n      <div class="table-cell text-left" ng-show="!vm.arguments.process_short_name">{{process.cmdline}}</div>\n    </div>\n  </div>\n</section>\n');
 $templateCache.put('components/plugin-quicklook/view.html','<section id="quicklook-plugin" class="plugin">\n    <div class="cpu-name">\n        {{ vm.cpu_name }}\n    </div>\n    <div class="table">\n        <div class="table-row" ng-show="!vm.arguments.percpu">\n            <div class="table-cell text-left">CPU</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'cpu\') }}" role="progressbar" aria-valuenow="{{ vm.cpu }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.cpu }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ vm.cpu }}%\n            </div>\n        </div>\n        <div class="table-row" ng-show="vm.arguments.percpu" ng-repeat="percpu in vm.percpus">\n            <div class="table-cell text-left">CPU{{ percpu.number }}</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'cpu\') }}" role="progressbar" aria-valuenow="{{ percpu.total }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ percpu.total }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ percpu.total }}%\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">MEM</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'mem\') }}" role="progressbar" aria-valuenow="{{ vm.mem }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.mem }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ vm.mem }}%\n            </div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">SWAP</div>\n            <div class="table-cell">\n                <div class="progress">\n                    <div class="progress-bar progress-bar-{{ vm.getDecoration(\'swap\') }}" role="progressbar" aria-valuenow="{{ vm.swap }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ vm.swap }}%;">\n                        &nbsp;\n                    </div>\n                </div>\n            </div>\n            <div class="table-cell">\n                {{ vm.swap }}%\n            </div>\n        </div>\n    </div>\n</section>\n');
+$templateCache.put('components/plugin-processlist/view.html','<section id="processlist-plugin" class="plugin">\n  <div class="table">\n    <div class="table-row">\n      <div sortable-th sorter="vm.sorter" column="cpu_percent" class="table-cell">CPU%</div>\n      <div sortable-th sorter="vm.sorter" column="memory_percent" class="table-cell">MEM%</div>\n      <div class="table-cell hidden-xs hidden-sm">VIRT</div>\n      <div class="table-cell hidden-xs hidden-sm">RES</div>\n      <div class="table-cell">PID</div>\n      <div sortable-th sorter="vm.sorter" column="username" class="table-cell text-left">USER</div>\n      <div class="table-cell">NI</div>\n      <div class="table-cell">S</div>\n      <div sortable-th sorter="vm.sorter" column="timemillis" class="table-cell hidden-xs hidden-sm">TIME+</div>\n      <div sortable-th sorter="vm.sorter" column="io_read" class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">IOR/s</div>\n      <div sortable-th sorter="vm.sorter" column="io_write" class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">IOW/s</div>\n      <div sortable-th sorter="vm.sorter" column="name" class="table-cell text-left">Command</div>\n    </div>\n    <div class="table-row" ng-repeat="process in vm.processes | orderBy:vm.sorter.column:vm.sorter.isReverseColumn(vm.sorter.column) | limitTo: vm.getLimit() track by process.pid">\n      <div class="table-cell" ng-class="vm.getCpuPercentAlert(process)">{{process.cpu_percent | number:1}}</div>\n      <div class="table-cell" ng-class="vm.getMemoryPercentAlert(process)">{{process.memory_percent | number:1}}</div>\n      <div class="table-cell hidden-xs hidden-sm">{{process.memvirt | bytes}}</div>\n      <div class="table-cell hidden-xs hidden-sm">{{process.memres | bytes}}</div>\n      <div class="table-cell">{{process.pid}}</div>\n      <div class="table-cell text-left">{{process.username}}</div>\n      <div class="table-cell" ng-class="{nice: process.isNice}">{{process.nice | exclamation}}</div>\n      <div class="table-cell" ng-class="{status: process.status == \'R\'}">{{process.status}}</div>\n      <div class="table-cell hidden-xs hidden-sm">\n        <span ng-show="process.timeplus.hours > 0" class="highlight">{{ process.timeplus.hours }}h</span>{{ process.timeplus.minutes | leftPad:2:\'0\' }}:{{ process.timeplus.seconds | leftPad:2:\'0\' }}<span ng-show="process.timeplus.hours <= 0">.{{ process.timeplus.milliseconds | leftPad:2:\'0\' }}</span>\n      </div>\n      <div class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">{{process.ioRead}}</div>\n      <div class="table-cell hidden-xs hidden-sm" ng-show="vm.ioReadWritePresent">{{process.ioWrite}}</div>\n      <div class="table-cell text-left" ng-show="vm.arguments.process_short_name">{{process.name}}</div>\n      <div class="table-cell text-left" ng-show="!vm.arguments.process_short_name">{{process.cmdline}}</div>\n    </div>\n  </div>\n</section>\n');
 $templateCache.put('components/plugin-system/view.html','<section id="system">\n  <span ng-if="vm.isDisconnected" class="critical">Disconnected from</span>\n  <span class="title">{{ vm.hostname }}</span>\n  <span ng-show="vm.stats.isLinux" class="hidden-xs hidden-sm">({{ vm.humanReadableName }} / {{ vm.os.name }} {{ vm.os.version }})</span>\n  <span ng-show="!vm.stats.isLinux" class="hidden-xs hidden-sm">({{ vm.os.name }} {{ vm.os.version }} {{ vm.platform }})</span>\n</section>\n');
-$templateCache.put('components/plugin-uptime/view.html','<section id="uptime">\n  <span>Uptime: {{ vm.value }}</span>\n</section>\n');
+$templateCache.put('components/plugin-wifi/view.html','<section id="wifi" class="plugin table-row-group" ng-if="vm.hotspots.length > 0">\n  <div class="table-row">\n    <div class="table-cell text-left title">WIFI</div>\n    <div class="table-cell"></div>\n    <div class="table-cell">dBm</div>\n  </div>\n  <div class="table-row" ng-repeat="hotspot in vm.hotspots track by ssid">\n    <div class="table-cell text-left">{{ hotspot.ssid|limitTo:20 }} <span ng-if="hotspot.encrypted">{{ hotspot.encryption_type }}</span></div>\n    <div class="table-cell"></div>\n    <div class="table-cell" ng-class="vm.getDecoration(hotspot, \'signal\')">{{ hotspot.signal }}</div>\n  </div>\n</section>\n');
-$templateCache.put('components/plugin-wifi/view.html','<section id="wifi" class="plugin table-row-group" ng-if="vm.hotspots.length > 0">\n  <div class="table-row">\n    <div class="table-cell text-left title">WIFI</div>\n    <div class="table-cell"></div>\n    <div class="table-cell">dBm</div>\n  </div>\n  <div class="table-row" ng-repeat="hotspot in vm.hotspots track by ssid">\n    <div class="table-cell text-left">{{ hotspot.ssid|limitTo:20 }} <span ng-if="hotspot.encrypted">{{ hotspot.encryption_type }}</span></div>\n    <div class="table-cell"></div>\n    <div class="table-cell" ng-class="vm.getDecoration(hotspot, \'signal\')">{{ hotspot.signal }}</div>\n  </div>\n</section>\n');}]);
+$templateCache.put('components/plugin-uptime/view.html','<section id="uptime">\n  <span>Uptime: {{ vm.value }}</span>\n</section>\n');}]);