From f084bf5d4a3271038bf1d83f93b9d12957fe6eca Mon Sep 17 00:00:00 2001
From: Floran Brutel <f.brutel@hexanet.fr>
Date: Tue, 21 Mar 2017 14:16:34 +0100
Subject: [PATCH] webui: move more plugins to components

---
 .../js/components/glances/controller.js       | 159 -----
 .../static/js/components/glances/view.html    |  36 +-
 .../static/js/components/help/component.js    |   2 +-
 .../js/components/plugin-alert/component.js   |  10 +
 .../js/components/plugin-alert/controller.js  |  73 ++
 .../js/components/plugin-alert/view.html      |  13 +
 .../js/components/plugin-cloud/controller.js  |   2 +
 .../js/components/plugin-cpu/controller.js    |   2 +
 .../js/components/plugin-diskio/component.js  |  11 +
 .../js/components/plugin-diskio/controller.js |  39 +
 .../js/components/plugin-diskio/view.html     |  18 +
 .../js/components/plugin-fs/component.js      |  11 +
 .../js/components/plugin-fs/controller.js     |  50 ++
 .../static/js/components/plugin-fs/view.html  |  18 +
 .../js/components/plugin-ip/controller.js     |   2 +
 .../js/components/plugin-load/controller.js   |   2 +
 .../components/plugin-mem-more/controller.js  |   2 +
 .../js/components/plugin-mem/controller.js    |   2 +
 .../js/components/plugin-memswap/component.js |  10 +
 .../components/plugin-memswap/controller.js   |  36 +
 .../js/components/plugin-memswap/view.html    |  22 +
 .../components/plugin-network/controller.js   |   2 +
 .../js/components/plugin-percpu/controller.js |   2 +
 .../js/components/plugin-ports/component.js   |  10 +
 .../js/components/plugin-ports/controller.js  |  39 +
 .../js/components/plugin-ports/view.html      |  12 +
 .../plugin-processcount/component.js          |  10 +
 .../plugin-processcount/controller.js         |  28 +
 .../components/plugin-processcount/view.html  |   8 +
 .../components/plugin-quicklook/controller.js |   2 +
 .../js/components/plugin-system/controller.js |  24 +-
 .../js/components/plugin-uptime/controller.js |  12 +-
 .../js/components/plugin-wifi/component.js    |  10 +
 .../js/components/plugin-wifi/controller.js   |  46 ++
 .../js/components/plugin-wifi/view.html       |  12 +
 glances/outputs/static/js/services.js         |   2 -
 glances/outputs/static/js/services/stats.js   |  11 +-
 glances/outputs/static/js/variables.js        |  35 -
 glances/outputs/static/public/js/main.min.js  | 670 ++++++++++++------
 .../outputs/static/public/js/templates.min.js |  13 +-
 40 files changed, 1001 insertions(+), 467 deletions(-)
 create mode 100644 glances/outputs/static/js/components/plugin-alert/component.js
 create mode 100644 glances/outputs/static/js/components/plugin-alert/controller.js
 create mode 100644 glances/outputs/static/js/components/plugin-alert/view.html
 create mode 100644 glances/outputs/static/js/components/plugin-diskio/component.js
 create mode 100644 glances/outputs/static/js/components/plugin-diskio/controller.js
 create mode 100644 glances/outputs/static/js/components/plugin-diskio/view.html
 create mode 100644 glances/outputs/static/js/components/plugin-fs/component.js
 create mode 100644 glances/outputs/static/js/components/plugin-fs/controller.js
 create mode 100644 glances/outputs/static/js/components/plugin-fs/view.html
 create mode 100644 glances/outputs/static/js/components/plugin-memswap/component.js
 create mode 100644 glances/outputs/static/js/components/plugin-memswap/controller.js
 create mode 100644 glances/outputs/static/js/components/plugin-memswap/view.html
 create mode 100644 glances/outputs/static/js/components/plugin-ports/component.js
 create mode 100644 glances/outputs/static/js/components/plugin-ports/controller.js
 create mode 100644 glances/outputs/static/js/components/plugin-ports/view.html
 create mode 100644 glances/outputs/static/js/components/plugin-processcount/component.js
 create mode 100644 glances/outputs/static/js/components/plugin-processcount/controller.js
 create mode 100644 glances/outputs/static/js/components/plugin-processcount/view.html
 create mode 100644 glances/outputs/static/js/components/plugin-wifi/component.js
 create mode 100644 glances/outputs/static/js/components/plugin-wifi/controller.js
 create mode 100644 glances/outputs/static/js/components/plugin-wifi/view.html
 delete mode 100644 glances/outputs/static/js/services.js
 delete mode 100644 glances/outputs/static/js/variables.js

diff --git a/glances/outputs/static/js/components/glances/controller.js b/glances/outputs/static/js/components/glances/controller.js
index 1ab67dd9..23b4d555 100644
--- a/glances/outputs/static/js/components/glances/controller.js
+++ b/glances/outputs/static/js/components/glances/controller.js
@@ -3,21 +3,6 @@
 function GlancesController($interval, GlancesStats) {
     var vm = this;
 
-    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;
-            }
-        }
-    };
-
     vm.dataLoaded = false;
     vm.stats = {};
     vm.refreshData = function () {
@@ -41,148 +26,4 @@ function GlancesController($interval, GlancesStats) {
     $interval(function () {
         vm.refreshData();
     }, refreshTime * 1000); // in milliseconds
-
-    vm.onKeyDown = function ($event) {
-        switch (true) {
-            case !$event.shiftKey && $event.keyCode == keycodes.a:
-                // a => Sort processes automatically
-                vm.sorter.column = "cpu_percent";
-                vm.sorter.auto = true;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.A:
-                // A => Enable/disable AMPs
-                vm.arguments.disable_amps = !vm.arguments.disable_amps;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.c:
-                // c => Sort processes by CPU%
-                vm.sorter.column = "cpu_percent";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.m:
-                // m => Sort processes by MEM%
-                vm.sorter.column = "memory_percent";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.u:
-                // u => Sort processes by user
-                vm.sorter.column = "username";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.p:
-                // p => Sort processes by name
-                vm.sorter.column = "name";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.i:
-                // i => Sort processes by I/O rate
-                vm.sorter.column = ['io_read', 'io_write'];
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.t:
-                // t => Sort processes by time
-                vm.sorter.column = "timemillis";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.d:
-                // d => Show/hide disk I/O stats
-                vm.arguments.disable_diskio = !vm.arguments.disable_diskio;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.Q:
-                // Q => Show/hide IRQ
-                vm.arguments.enable_irq = !vm.arguments.enable_irq;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.f:
-                // f => Show/hide filesystem stats
-                vm.arguments.disable_fs = !vm.arguments.disable_fs;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.n:
-                // n => Show/hide network stats
-                vm.arguments.disable_network = !vm.arguments.disable_network;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.s:
-                // s => Show/hide sensors stats
-                vm.arguments.disable_sensors = !vm.arguments.disable_sensors;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.TWO:
-                // 2 => Show/hide left sidebar
-                vm.arguments.disable_left_sidebar = !vm.arguments.disable_left_sidebar;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.z:
-                // z => Enable/disable processes stats
-                vm.arguments.disable_process = !vm.arguments.disable_process;
-                break;
-            case $event.keyCode == keycodes.SLASH:
-                // SLASH => Enable/disable short processes name
-                vm.arguments.process_short_name = !vm.arguments.process_short_name;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.D:
-                // D => Enable/disable Docker stats
-                vm.arguments.disable_docker = !vm.arguments.disable_docker;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.b:
-                // b => Bytes or bits for network I/O
-                vm.arguments.byte = !vm.arguments.byte;
-               break;
-            case $event.shiftKey && $event.keyCode == keycodes.b:
-               // 'B' => Switch between bit/s and IO/s for Disk IO
-                vm.arguments.diskio_iops = !vm.arguments.diskio_iops;
-               break;
-            case !$event.shiftKey && $event.keyCode == keycodes.l:
-                // l => Show/hide alert logs
-                vm.arguments.disable_alert = !vm.arguments.disable_alert;
-               break;
-            case $event.shiftKey && $event.keyCode == keycodes.ONE:
-               // 1 => Global CPU or per-CPU stats
-               vm.arguments.percpu = !vm.arguments.percpu;
-               break;
-            case !$event.shiftKey && $event.keyCode == keycodes.h:
-                // h => Show/hide this help screen
-                vm.arguments.help_tag = !vm.arguments.help_tag;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.T:
-                // T => View network I/O as combination
-                vm.arguments.network_sum = !vm.arguments.network_sum;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.u:
-                // U => View cumulative network I/O
-                vm.arguments.network_cumul = !vm.arguments.network_cumul;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.f:
-                // F => Show filesystem free space
-                vm.arguments.fs_free_space = !vm.arguments.fs_free_space;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.THREE:
-                // 3 => Enable/disable quick look plugin
-                vm.arguments.disable_quicklook = !vm.arguments.disable_quicklook;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.SIX:
-                // 6 => Enable/disable mean gpu
-                vm.arguments.meangpu = !vm.arguments.meangpu;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.g:
-                // G => Enable/disable gpu
-                vm.arguments.disable_gpu = !vm.arguments.disable_gpu;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.FIVE:
-                vm.arguments.disable_quicklook = !vm.arguments.disable_quicklook;
-                vm.arguments.disable_cpu = !vm.arguments.disable_cpu;
-                vm.arguments.disable_mem = !vm.arguments.disable_mem;
-                vm.arguments.disable_memswap = !vm.arguments.disable_memswap;
-                vm.arguments.disable_load = !vm.arguments.disable_load;
-                vm.arguments.disable_gpu = !vm.arguments.disable_gpu;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.i:
-                // I => Show/hide IP module
-                vm.arguments.disable_ip = !vm.arguments.disable_ip;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.p:
-                // I => Enable/disable ports module
-                vm.arguments.disable_ports = !vm.arguments.disable_ports;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.w:
-                // 'W' > Enable/Disable Wifi plugin
-                vm.arguments.disable_wifi = !vm.arguments.disable_wifi;
-                break;
-        }
-    };
 }
diff --git a/glances/outputs/static/js/components/glances/view.html b/glances/outputs/static/js/components/glances/view.html
index 5a3b408b..0cc38982 100644
--- a/glances/outputs/static/js/components/glances/view.html
+++ b/glances/outputs/static/js/components/glances/view.html
@@ -1,12 +1,12 @@
 <div ng-keydown="vm.onKeyDown($event)" tabindex="0">
-    <div ng-show="!vm.dataLoaded" class="container-fluid" id="loading-page">
+    <div ng-if="!vm.dataLoaded" class="container-fluid" id="loading-page">
         <div class="glances-logo"></div>
         <div class="loader">Loading...</div>
     </div>
 
-    <glances-help help="vm.help" ng-show="vm.vm.argumentshelp_tag"></glances-help>
+    <glances-help help="vm.help" ng-if="vm.arguments.help_tag"></glances-help>
 
-    <div ng-show="vm.dataLoaded && !vm.vm.argumentshelp_tag" class="container-fluid">
+    <div ng-if="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">
         <div class="top-plugin">
             <div class="row">
                 <div class="col-sm-24">
@@ -31,17 +31,16 @@
         </div>
 
         <div class="row">
-            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.argumentsdisable_quicklook">
+            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.arguments.disable_quicklook">
                 <glances-plugin-quicklook stats="vm.stats" arguments="vm.arguments"></glances-plugin-quicklook>
             </div>
-            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && !vm.argumentspercpu">
+            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && !vm.arguments.percpu">
                 <glances-plugin-cpu stats="vm.stats"></glances-plugin-cpu>
             </div>
-            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && vm.argumentspercpu">
+            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && vm.arguments.percpu">
                 <glances-plugin-percpu stats="vm.stats"></glances-plugin-percpu>
             </div>
-            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"
-                 ng-if="!vm.argumentsdisable_gpu && statsGpu.gpus.length > 0">
+            <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!vm.arguments.disable_gpu && statsGpu.gpus.length > 0">
                 <glances-plugin-gpu stats="vm.stats"></glances-plugin-gpu>
             </div>
             <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">
@@ -59,13 +58,30 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-sm-6 sidebar" ng-show="!vm.arguments.disable_left_sidebar">
+            <div class="col-sm-6 sidebar" ng-if="!vm.arguments.disable_left_sidebar">
                 <div class="table">
-                    <glances-plugin-network stats="vm.stats" ng-show="!vm.arguments.disable_network"></glances-plugin-network>
+                    <glances-plugin-network stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_network"></glances-plugin-network>
+                    <glances-plugin-wifi stats="vm.stats" ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>
+                    <glances-plugin-ports stats="vm.stats" ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>
+                    <glances-plugin-diskio stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>
+                    <glances-plugin-fs stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>
+                    <glances-plugin-irq stats="vm.stats" arguments="vm.arguments" ng-if="vm.arguments.enable_irq"></glances-plugin-irq>
+                    <glances-plugin-folders stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_fs"></glances-plugin-folders>
+                    <glances-plugin-raid stats="vm.stats" arguments="vm.arguments"></glances-plugin-raid>
+                    <glances-plugin-sensors stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>
                 </div>
             </div>
             <div class="col-sm-18">
+                <glances-plugin-docker stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_docker"></glances-plugin-docker>
+                <glances-plugin-alert stats="vm.stats" ng-if="!vm.arguments.disable_alert"></glances-plugin-alert>
 
+                <div ng-show="!vm.arguments.disable_process">
+                    <glances-plugin-processcount stats="vm.stats"></glances-plugin-processcount>
+                    <glances-plugin-amps stats="vm.stats" arguments="vm.arguments" ng-if="!arguments.disable_amps"></glances-plugin-amps>
+                    <glances-plugin-processlist stats="vm.stats" arguments="vm.arguments"></glances-plugin-processlist>
+                </div>
+                <div ng-show="vm.arguments.disable_process">PROCESSES DISABLED (press 'z' to display)</div>
+            </div>
             </div>
         </div>
     </div>
diff --git a/glances/outputs/static/js/components/help/component.js b/glances/outputs/static/js/components/help/component.js
index c91fcd7c..45092e1a 100644
--- a/glances/outputs/static/js/components/help/component.js
+++ b/glances/outputs/static/js/components/help/component.js
@@ -4,7 +4,7 @@ glancesApp.component('glancesHelp', {
     controller: GlancesHelpController,
     controllerAs: 'vm',
     bindings: {
-      help: '<',
+      help: '<'
     },
     templateUrl: 'components/help/view.html'
 });
diff --git a/glances/outputs/static/js/components/plugin-alert/component.js b/glances/outputs/static/js/components/plugin-alert/component.js
new file mode 100644
index 00000000..f3f8852f
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-alert/component.js
@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginAlert', {
+    controller: GlancesPluginAlertController,
+    controllerAs: 'vm',
+    bindings: {
+      stats: '<'
+    },
+    templateUrl: 'components/plugin-alert/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-alert/controller.js b/glances/outputs/static/js/components/plugin-alert/controller.js
new file mode 100644
index 00000000..d939cc31
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-alert/controller.js
@@ -0,0 +1,73 @@
+'use strict';
+
+function GlancesPluginAlertController(favicoService) {
+    var vm = this;
+    var _alerts = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['alert'];
+        _alerts = [];
+
+        if(!_.isArray(data)) {
+            data = [];
+        }
+
+        for (var i = 0; i < data.length; i++) {
+            var alertData = data[i];
+            var alert = {};
+
+            alert.name = alertData[3];
+            alert.level = alertData[2];
+            alert.begin = alertData[0] * 1000;
+            alert.end = alertData[1] * 1000;
+            alert.ongoing = alertData[1] == -1;
+            alert.min = alertData[6];
+            alert.mean = alertData[5];
+            alert.max = alertData[4];
+
+            if (!alert.ongoing) {
+                var duration = alert.end - alert.begin;
+                var seconds = parseInt((duration / 1000) % 60)
+                    , minutes = parseInt((duration / (1000 * 60)) % 60)
+                    , hours = parseInt((duration / (1000 * 60 * 60)) % 24);
+
+                alert.duration = _.padStart(hours, 2, '0') + ":" + _.padStart(minutes, 2, '0') + ":" + _.padStart(seconds, 2, '0');
+            }
+
+            _alerts.push(alert);
+        }
+
+        if (vm.hasOngoingAlerts()) {
+            favicoService.badge(vm.countOngoingAlerts());
+        } else {
+            favicoService.reset();
+        }
+
+        data = undefined;
+    };
+
+    vm.hasAlerts = function () {
+        return _alerts.length > 0;
+    };
+
+    vm.getAlerts = function () {
+        return _alerts;
+    };
+
+    vm.count = function () {
+        return _alerts.length;
+    };
+
+    vm.hasOngoingAlerts = function () {
+        return _.filter(_alerts, { 'ongoing': true }).length > 0;
+    };
+
+    vm.countOngoingAlerts = function () {
+        return _.filter(_alerts, { 'ongoing': true }).length;
+    }
+}
diff --git a/glances/outputs/static/js/components/plugin-alert/view.html b/glances/outputs/static/js/components/plugin-alert/view.html
new file mode 100644
index 00000000..f5fa945b
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-alert/view.html
@@ -0,0 +1,13 @@
+<section id="alerts">
+    <span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>
+    <span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (lasts {{vm.count()}} entries)</span>
+</section>
+<section id="alert" class="plugin">
+    <div class="table">
+        <div class="table-row" ng-repeat="alert in vm.getAlerts()">
+            <div class="table-cell text-left">
+                {{alert.begin | date : 'yyyy-MM-dd H:mm:ss'}} ({{ alert.ongoing ? 'ongoing' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span>({{alert.max}})
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/glances/outputs/static/js/components/plugin-cloud/controller.js b/glances/outputs/static/js/components/plugin-cloud/controller.js
index 5518eb12..b9c4f984 100644
--- a/glances/outputs/static/js/components/plugin-cloud/controller.js
+++ b/glances/outputs/static/js/components/plugin-cloud/controller.js
@@ -18,5 +18,7 @@ function GlancesPluginCloudController() {
             vm.provider = 'AWS EC2';
             vm.instance =  data['instance-type'] + ' instance ' + data['instance-id'] + ' (' + data['region'] + ')';
         }
+
+        data = undefined;
     };
 }
diff --git a/glances/outputs/static/js/components/plugin-cpu/controller.js b/glances/outputs/static/js/components/plugin-cpu/controller.js
index d066a65e..79960275 100644
--- a/glances/outputs/static/js/components/plugin-cpu/controller.js
+++ b/glances/outputs/static/js/components/plugin-cpu/controller.js
@@ -50,6 +50,8 @@ function GlancesPluginCpuController() {
         if (data.syscalls) {
             vm.syscalls = Math.floor(data.syscalls / data.time_since_update);
         }
+
+        data = undefined;
     };
 
     this.getDecoration = function (value) {
diff --git a/glances/outputs/static/js/components/plugin-diskio/component.js b/glances/outputs/static/js/components/plugin-diskio/component.js
new file mode 100644
index 00000000..f79b6dbf
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-diskio/component.js
@@ -0,0 +1,11 @@
+'use strict';
+
+glancesApp.component('glancesPluginDiskio', {
+    controller: GlancesPluginDiskioController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-diskio/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-diskio/controller.js b/glances/outputs/static/js/components/plugin-diskio/controller.js
new file mode 100644
index 00000000..c706e36b
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-diskio/controller.js
@@ -0,0 +1,39 @@
+'use strict';
+
+function GlancesPluginDiskioController($filter) {
+    var vm = this;
+
+    vm.disks = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['diskio'];
+
+        data = $filter('orderBy')(data,'disk_name');
+
+        vm.disks = [];
+        for (var i = 0; i < data.length; i++) {
+            var diskioData = data[i];
+            var timeSinceUpdate = diskioData['time_since_update'];
+
+            vm.disks.push({
+                'name': diskioData['disk_name'],
+                'bitrate': {
+                    'txps': $filter('bytes')(diskioData['read_bytes'] / timeSinceUpdate),
+                    'rxps': $filter('bytes')(diskioData['write_bytes'] / timeSinceUpdate)
+                },
+                'count': {
+                    'txps': $filter('bytes')(diskioData['read_count'] / timeSinceUpdate),
+                    'rxps': $filter('bytes')(diskioData['write_count'] / timeSinceUpdate)
+                },
+                'alias': diskioData['alias'] !== undefined ? diskioData['alias'] : null
+            });
+        }
+
+        data = undefined;
+    };
+}
diff --git a/glances/outputs/static/js/components/plugin-diskio/view.html b/glances/outputs/static/js/components/plugin-diskio/view.html
new file mode 100644
index 00000000..76e0cab6
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-diskio/view.html
@@ -0,0 +1,18 @@
+<section id="diskio" class="plugin table-row-group" ng-show="vm.disks.length > 0">
+    <div class="table-row">
+        <div class="table-cell text-left title">DISK I/O</div>
+        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">R/s</div>
+        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">W/s</div>
+
+        <div class="table-cell" ng-show="vm.arguments.diskio_iops">IOR/s</div>
+        <div class="table-cell" ng-show="vm.arguments.diskio_iops">IOW/s</div>
+    </div>
+    <div class="table-row" ng-repeat="disk in vm.disks">
+        <div class="table-cell text-left">{{(disk.alias ? disk.alias : disk.name) | min_size}}</div>
+        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.txps }}</div>
+        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.rxps }}</div>
+
+        <div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.txps }}</div>
+        <div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.rxps }}</div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/glances/outputs/static/js/components/plugin-fs/component.js b/glances/outputs/static/js/components/plugin-fs/component.js
new file mode 100644
index 00000000..019d9db9
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-fs/component.js
@@ -0,0 +1,11 @@
+'use strict';
+
+glancesApp.component('glancesPluginFs', {
+    controller: GlancesPluginFsController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-fs/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-fs/controller.js b/glances/outputs/static/js/components/plugin-fs/controller.js
new file mode 100644
index 00000000..00516b77
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-fs/controller.js
@@ -0,0 +1,50 @@
+'use strict';
+
+function GlancesPluginFsController($filter) {
+    var vm = this;
+    var _view = {};
+
+    vm.fileSystems = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['fs'];
+        _view = stats.view['fs'];
+
+        vm.fileSystems = [];
+        for (var i = 0; i < data.length; i++) {
+            var fsData = data[i];
+
+            var shortMountPoint = fsData['mnt_point'];
+            if (shortMountPoint.length > 9) {
+                shortMountPoint = '_' + fsData['mnt_point'].slice(-8);
+            }
+
+            vm.fileSystems.push(fs = {
+                'name': fsData['device_name'],
+                'mountPoint': fsData['mnt_point'],
+                'shortMountPoint': shortMountPoint,
+                'percent': fsData['percent'],
+                'size': fsData['size'],
+                'used': fsData['used'],
+                'free': fsData['free']
+            });
+        }
+
+        vm.fileSystems = $filter('orderBy')(vm.fileSystems,'mnt_point');
+
+        data = undefined;
+    };
+
+    vm.getDecoration = function(mountPoint, field) {
+        if(_view[mountPoint][field] == undefined) {
+            return;
+        }
+
+        return _view[mountPoint][field].decoration.toLowerCase();
+    };
+}
diff --git a/glances/outputs/static/js/components/plugin-fs/view.html b/glances/outputs/static/js/components/plugin-fs/view.html
new file mode 100644
index 00000000..07ad3e9c
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-fs/view.html
@@ -0,0 +1,18 @@
+<section id="fs" class="plugin table-row-group">
+    <div class="table-row">
+        <div class="table-cell text-left title">FILE SYS</div>
+        <div class="table-cell">
+            <span ng-show="!vm.arguments.fs_free_space">Used</span>
+            <span ng-show="vm.arguments.fs_free_space">Free</span>
+        </div>
+        <div class="table-cell">Total</div>
+    </div>
+    <div class="table-row" ng-repeat="fs in vm.fileSystems">
+        <div class="table-cell text-left">{{ fs.shortMountPoint }} <span class="visible-lg-inline" ng-show="fs.name.length <= 20">({{ fs.name }})<span></div>
+        <div class="table-cell" ng-class="vm.getDecoration(fs.mountPoint, 'used')">
+            <span ng-show="!vm.arguments.fs_free_space">{{ fs.used | bytes }}</span>
+            <span ng-show="vm.arguments.fs_free_space">{{ fs.free | bytes }}</span>
+        </div>
+        <div class="table-cell">{{ fs.size | bytes }}</div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/glances/outputs/static/js/components/plugin-ip/controller.js b/glances/outputs/static/js/components/plugin-ip/controller.js
index 2ad71822..7d78c221 100644
--- a/glances/outputs/static/js/components/plugin-ip/controller.js
+++ b/glances/outputs/static/js/components/plugin-ip/controller.js
@@ -22,5 +22,7 @@ function GlancesPluginIpController() {
         vm.mask = data.mask;
         vm.maskCidr = data.mask_cidr;
         vm.publicAddress = data.public_address
+
+        data = undefined;
     };
 }
diff --git a/glances/outputs/static/js/components/plugin-load/controller.js b/glances/outputs/static/js/components/plugin-load/controller.js
index 4ac09903..df75f250 100644
--- a/glances/outputs/static/js/components/plugin-load/controller.js
+++ b/glances/outputs/static/js/components/plugin-load/controller.js
@@ -22,6 +22,8 @@ function GlancesPluginLoadController() {
       vm.min1 = data['min1'];
       vm.min5 = data['min5'];
       vm.min15 = data['min15'];
+
+        data = undefined;
     };
 
     this.getDecoration = function(value) {
diff --git a/glances/outputs/static/js/components/plugin-mem-more/controller.js b/glances/outputs/static/js/components/plugin-mem-more/controller.js
index d3352847..afe59b37 100644
--- a/glances/outputs/static/js/components/plugin-mem-more/controller.js
+++ b/glances/outputs/static/js/components/plugin-mem-more/controller.js
@@ -20,5 +20,7 @@ function GlancesPluginMemMoreController() {
         vm.inactive = data['inactive'];
         vm.buffers = data['buffers'];
         vm.cached = data['cached'];
+
+        data = undefined;
     };
 }
diff --git a/glances/outputs/static/js/components/plugin-mem/controller.js b/glances/outputs/static/js/components/plugin-mem/controller.js
index ab5c8d82..67f7e68a 100644
--- a/glances/outputs/static/js/components/plugin-mem/controller.js
+++ b/glances/outputs/static/js/components/plugin-mem/controller.js
@@ -22,6 +22,8 @@ function GlancesPluginMemController() {
         vm.total = data['total'];
         vm.used = data['used'];
         vm.free = data['free'];
+
+        data = undefined;
     };
 
     this.getDecoration = function (value) {
diff --git a/glances/outputs/static/js/components/plugin-memswap/component.js b/glances/outputs/static/js/components/plugin-memswap/component.js
new file mode 100644
index 00000000..2f6961f5
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-memswap/component.js
@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginMemswap', {
+    controller: GlancesPluginMemswapController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-memswap/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-memswap/controller.js b/glances/outputs/static/js/components/plugin-memswap/controller.js
new file mode 100644
index 00000000..f27d7fde
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-memswap/controller.js
@@ -0,0 +1,36 @@
+'use strict';
+
+function GlancesPluginMemswapController() {
+    var vm = this;
+    var _view = {};
+
+    vm.percent = null;
+    vm.total = null;
+    vm.used = null;
+    vm.free = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['memswap'];
+        _view = stats.view['memswap'];
+
+        vm.percent = data['percent'];
+        vm.total = data['total'];
+        vm.used = data['used'];
+        vm.free = data['free'];
+
+        data = undefined;
+    };
+
+    this.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}
diff --git a/glances/outputs/static/js/components/plugin-memswap/view.html b/glances/outputs/static/js/components/plugin-memswap/view.html
new file mode 100644
index 00000000..590b2484
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-memswap/view.html
@@ -0,0 +1,22 @@
+<section id="memswap" class="plugin">
+    <div class="table">
+        <div class="table-row">
+            <div class="table-cell text-left title">SWAP</div>
+            <div class="table-cell">{{ vm.percent }}%</div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">total:</div>
+            <div class="table-cell">{{ vm.total | bytes }}</div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">used:</div>
+            <div class="table-cell" ng-class="vm.getDecoration('used')">
+                {{ vm.used | bytes }}
+            </div>
+        </div>
+        <div class="table-row">
+            <div class="table-cell text-left">free:</div>
+            <div class="table-cell">{{ vm.free | bytes }}</div>
+        </div>
+    </div>
+</section>
diff --git a/glances/outputs/static/js/components/plugin-network/controller.js b/glances/outputs/static/js/components/plugin-network/controller.js
index e5ba3e51..f51cf0c3 100644
--- a/glances/outputs/static/js/components/plugin-network/controller.js
+++ b/glances/outputs/static/js/components/plugin-network/controller.js
@@ -32,5 +32,7 @@ function GlancesPluginNetworkController($filter) {
         }
 
         vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
+
+        data = undefined;
     };
 }
diff --git a/glances/outputs/static/js/components/plugin-percpu/controller.js b/glances/outputs/static/js/components/plugin-percpu/controller.js
index 8c4cebcd..e1acc9f0 100644
--- a/glances/outputs/static/js/components/plugin-percpu/controller.js
+++ b/glances/outputs/static/js/components/plugin-percpu/controller.js
@@ -26,6 +26,8 @@ function GlancesPluginPercpuController(GlancesPluginHelper) {
                 'steal': cpuData.steal
             });
         }
+
+        data = undefined;
     };
 
     vm.getUserAlert = function(cpu) {
diff --git a/glances/outputs/static/js/components/plugin-ports/component.js b/glances/outputs/static/js/components/plugin-ports/component.js
new file mode 100644
index 00000000..6dd3a7c0
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-ports/component.js
@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginPorts', {
+    controller: GlancesPluginPortsController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-ports/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-ports/controller.js b/glances/outputs/static/js/components/plugin-ports/controller.js
new file mode 100644
index 00000000..7c192c9c
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-ports/controller.js
@@ -0,0 +1,39 @@
+'use strict';
+
+function GlancesPluginPortsController($filter) {
+    var vm = this;
+
+    vm.ports = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['ports'];
+
+        vm.ports = [];
+        angular.forEach(ports, function(port) {
+            vm.ports.push(port);
+        }, this);
+
+        data = undefined;
+    };
+
+    vm.getDecoration = function(port) {
+        if (port.status === null) {
+            return 'careful';
+        }
+
+        if (port.status === false) {
+            return 'critical';
+        }
+
+        if (port.rtt_warning !== null && port.status > port.rtt_warning) {
+            return 'warning';
+        }
+
+        return 'ok';
+    };
+}
diff --git a/glances/outputs/static/js/components/plugin-ports/view.html b/glances/outputs/static/js/components/plugin-ports/view.html
new file mode 100644
index 00000000..dc1a6553
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-ports/view.html
@@ -0,0 +1,12 @@
+<section id="ports" class="plugin table-row-group">
+    <div class="table-row" ng-repeat="port in vm.ports">
+        <div class="table-cell text-left">{{(port.description ? port.description : port.host + ' ' + port.port) | min_size: 20}}</div>
+        <div class="table-cell"></div>
+        <div ng-switch="port.status" ng-class="vm.getDecoration(port)" class="table-cell">
+            <span ng-switch-when="null">Scanning</span>
+            <span ng-switch-when="false">Timeout</span>
+            <span ng-switch-when="true">Open</span>
+            <span ng-switch-default>{{port.status * 1000.0 | number:0}}ms</span>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/glances/outputs/static/js/components/plugin-processcount/component.js b/glances/outputs/static/js/components/plugin-processcount/component.js
new file mode 100644
index 00000000..61fef4e9
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-processcount/component.js
@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginProcesscount', {
+    controller: GlancesPluginProcesscountController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-processcount/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-processcount/controller.js b/glances/outputs/static/js/components/plugin-processcount/controller.js
new file mode 100644
index 00000000..b7f84ae9
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-processcount/controller.js
@@ -0,0 +1,28 @@
+'use strict';
+
+function GlancesPluginProcesscountController() {
+    var vm = this;
+
+    vm.total  = null;
+    vm.running = null;
+    vm.sleeping = null;
+    vm.stopped = null;
+    vm.thread = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['processcount'];
+
+        vm.total = data['total'] || 0;
+        vm.running = data['running'] || 0;
+        vm.sleeping = data['sleeping'] || 0;
+        vm.stopped = data['stopped'] || 0;
+        vm.thread = data['thread'] || 0;
+
+        data = undefined;
+    };
+}
diff --git a/glances/outputs/static/js/components/plugin-processcount/view.html b/glances/outputs/static/js/components/plugin-processcount/view.html
new file mode 100644
index 00000000..52d03f02
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-processcount/view.html
@@ -0,0 +1,8 @@
+<section id="processcount" class="plugin">
+  <span class="title">TASKS</span>
+  <span>{{ vm.total }} ({{ vm.thread }} thr),</span>
+  <span>{{ vm.running }} run,</span>
+  <span>{{ vm.sleeping }} slp,</span>
+  <span>{{ vm.stopped }} oth</span>
+  <span> sorted {{ sorter.auto ? 'automatically' : '' }} by {{ sorter.getColumnLabel(sorter.column) }}, flat view</span>
+</section>
\ No newline at end of file
diff --git a/glances/outputs/static/js/components/plugin-quicklook/controller.js b/glances/outputs/static/js/components/plugin-quicklook/controller.js
index 493f3e32..2bbc1cc3 100644
--- a/glances/outputs/static/js/components/plugin-quicklook/controller.js
+++ b/glances/outputs/static/js/components/plugin-quicklook/controller.js
@@ -35,6 +35,8 @@ function GlancesPluginQuicklookController() {
                 'total': cpu.total
             });
         }, this);
+
+        data = undefined;
     };
 
     this.getDecoration = function (value) {
diff --git a/glances/outputs/static/js/components/plugin-system/controller.js b/glances/outputs/static/js/components/plugin-system/controller.js
index 1d0bb457..5a5f60da 100644
--- a/glances/outputs/static/js/components/plugin-system/controller.js
+++ b/glances/outputs/static/js/components/plugin-system/controller.js
@@ -3,7 +3,7 @@
 function GlancesPluginSystemController() {
     var vm = this;
 
-    vm.hostname  = null;
+    vm.hostname = null;
     vm.platform = null;
     vm.humanReadableName = null;
     vm.os = {
@@ -12,17 +12,19 @@ function GlancesPluginSystemController() {
     };
 
     vm.$onChanges = function (changes) {
-      var stats = changes.stats.currentValue;
-      if (stats === undefined || stats.stats === undefined) {
-        return;
-      }
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
 
-      var data = stats.stats['system'];
+        var data = stats.stats['system'];
 
-      vm.hostname = data['hostname'];
-      vm.platform = data['platform'];
-      vm.os.name = data['os_name'];
-      vm.os.version = data['os_version'];
-      vm.humanReadableName = data['hr_name'];
+        vm.hostname = data['hostname'];
+        vm.platform = data['platform'];
+        vm.os.name = data['os_name'];
+        vm.os.version = data['os_version'];
+        vm.humanReadableName = data['hr_name'];
+
+        data = undefined;
     };
 }
diff --git a/glances/outputs/static/js/components/plugin-uptime/controller.js b/glances/outputs/static/js/components/plugin-uptime/controller.js
index 9cdc0850..351f5fdd 100644
--- a/glances/outputs/static/js/components/plugin-uptime/controller.js
+++ b/glances/outputs/static/js/components/plugin-uptime/controller.js
@@ -3,14 +3,14 @@
 function GlancesPluginUptimeController() {
     var vm = this;
 
-    this.value = null
+    vm.value = null;
 
     vm.$onChanges = function (changes) {
-      var stats = changes.stats.currentValue;
-      if (stats === undefined || stats.stats === undefined) {
-        return;
-      }
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
 
-      vm.value = stats.stats['uptime'];
+        vm.value = stats.stats['uptime'];
     };
 }
diff --git a/glances/outputs/static/js/components/plugin-wifi/component.js b/glances/outputs/static/js/components/plugin-wifi/component.js
new file mode 100644
index 00000000..52be6b17
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-wifi/component.js
@@ -0,0 +1,10 @@
+'use strict';
+
+glancesApp.component('glancesPluginWifi', {
+    controller: GlancesPluginWifiController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-wifi/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-wifi/controller.js b/glances/outputs/static/js/components/plugin-wifi/controller.js
new file mode 100644
index 00000000..03721f6c
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-wifi/controller.js
@@ -0,0 +1,46 @@
+'use strict';
+
+function GlancesPluginWifiController($filter) {
+    var vm = this;
+    var _view = {};
+
+    vm.hotspots = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['wifi'];
+        _view = stats.view['wifi'];
+
+        vm.hotspots = [];
+        for (var i = 0; i < data.length; i++) {
+            var hotspotData = data[i];
+
+            if (hotspotData['ssid'] === '') {
+                continue;
+            }
+
+            vm.hotspots.push({
+                'ssid': hotspotData['ssid'],
+                'encrypted': hotspotData['encrypted'],
+                'signal': hotspotData['signal'],
+                'encryption_type': hotspotData['encryption_type']
+            });
+        }
+
+        vm.hotspots = $filter('orderBy')(vm.hotspots, 'ssid');
+
+        data = undefined;
+    };
+
+    vm.getDecoration = function(hotpost, field) {
+        if(_view[hotpost.ssid][field] == undefined) {
+            return;
+        }
+
+        return _view[hotpost.ssid][field].decoration.toLowerCase();
+    };
+}
diff --git a/glances/outputs/static/js/components/plugin-wifi/view.html b/glances/outputs/static/js/components/plugin-wifi/view.html
new file mode 100644
index 00000000..7d826051
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-wifi/view.html
@@ -0,0 +1,12 @@
+<section id="wifi" class="plugin table-row-group" ng-if="vm.hotspots.length > 0">
+  <div class="table-row">
+    <div class="table-cell text-left title">WIFI</div>
+    <div class="table-cell"></div>
+    <div class="table-cell">dBm</div>
+  </div>
+  <div class="table-row" ng-repeat="hotspot in vm.hotspots">
+    <div class="table-cell text-left">{{ hotspot.ssid|limitTo:20 }} <span ng-if="hotspot.encrypted">{{ hotspot.encryption_type }}</span></div>
+    <div class="table-cell"></div>
+    <div class="table-cell" ng-class="vm.getDecoration(hotspot, 'signal')">{{ hotspot.signal }}</div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/glances/outputs/static/js/services.js b/glances/outputs/static/js/services.js
deleted file mode 100644
index 139597f9..00000000
--- a/glances/outputs/static/js/services.js
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/glances/outputs/static/js/services/stats.js b/glances/outputs/static/js/services/stats.js
index dbdd98c2..0ddc0723 100644
--- a/glances/outputs/static/js/services/stats.js
+++ b/glances/outputs/static/js/services/stats.js
@@ -1,5 +1,4 @@
 glancesApp.service('GlancesStats', function($http, $q, GlancesPluginHelper) {
-    var _stats = [], _views = [], _limits = [], _config = {};
 
     this.getData = function() {
         return $q.all([
@@ -15,24 +14,18 @@ glancesApp.service('GlancesStats', function($http, $q, GlancesPluginHelper) {
 
     this.getAllStats = function() {
         return $http.get('/api/2/all').then(function (response) {
-            _stats = response.data;
-
             return response.data;
         });
     };
 
     this.getAllLimits = function() {
         return $http.get('/api/2/all/limits').then(function (response) {
-            _limits = response.data;
-
             return response.data;
         });
     };
 
     this.getAllViews = function() {
         return $http.get('/api/2/all/views').then(function (response) {
-            _views = response.data;
-
             return response.data;
         });
     };
@@ -45,9 +38,7 @@ glancesApp.service('GlancesStats', function($http, $q, GlancesPluginHelper) {
 
     this.getConfig = function() {
         return $http.get('/api/2/config').then(function (response) {
-            _config = response.data;
-
-            return _config;
+            return response.data;
         });
     };
 
diff --git a/glances/outputs/static/js/variables.js b/glances/outputs/static/js/variables.js
deleted file mode 100644
index 3517d844..00000000
--- a/glances/outputs/static/js/variables.js
+++ /dev/null
@@ -1,35 +0,0 @@
-var keycodes = {
-	'a' : '65',
-	'c' : '67',
-	'm' : '77',
-	'p' : '80',
-	'i' : '73',
-	't' : '84',
-	'u' : '85',
-	'd' : '68',
-	'f' : '70',
-	'n' : '78',
-	's' : '83',
-	'z' : '90',
-	'e' : '69',
-	'SLASH': '191',
-	'D' : '68',
-	'b' : '66',
-	'l' : '76',
-	'w' : '87',
-	'x' : '88',
-	'ONE': '49',
-	'TWO': '50',
-	'THREE': '51',
-	'FOUR': '52',
-	'FIVE': '53',
-	'SIX': '54',
-	'h' : '72',
-	'T' : '84',
-	'F' : '70',
-	'g' : '71',
-	'r' : '82',
-	'q' : '81',
-	'A' : '65',
-	'Q' : '81'
-}
diff --git a/glances/outputs/static/public/js/main.min.js b/glances/outputs/static/public/js/main.min.js
index 95372003..accf2c86 100644
--- a/glances/outputs/static/public/js/main.min.js
+++ b/glances/outputs/static/public/js/main.min.js
@@ -186,45 +186,6 @@ glancesApp.filter('timedelta', ["$filter", function($filter) {
     }
 }]);
 
-
-
-
-var keycodes = {
-	'a' : '65',
-	'c' : '67',
-	'm' : '77',
-	'p' : '80',
-	'i' : '73',
-	't' : '84',
-	'u' : '85',
-	'd' : '68',
-	'f' : '70',
-	'n' : '78',
-	's' : '83',
-	'z' : '90',
-	'e' : '69',
-	'SLASH': '191',
-	'D' : '68',
-	'b' : '66',
-	'l' : '76',
-	'w' : '87',
-	'x' : '88',
-	'ONE': '49',
-	'TWO': '50',
-	'THREE': '51',
-	'FOUR': '52',
-	'FIVE': '53',
-	'SIX': '54',
-	'h' : '72',
-	'T' : '84',
-	'F' : '70',
-	'g' : '71',
-	'r' : '82',
-	'q' : '81',
-	'A' : '65',
-	'Q' : '81'
-}
-
 glancesApp.service('favicoService', function() {
 
   var favico = new Favico({
@@ -284,7 +245,6 @@ glancesApp.service('GlancesPluginHelper', function () {
 });
 
 glancesApp.service('GlancesStats', ["$http", "$q", "GlancesPluginHelper", function($http, $q, GlancesPluginHelper) {
-    var _stats = [], _views = [], _limits = [], _config = {};
 
     this.getData = function() {
         return $q.all([
@@ -300,24 +260,18 @@ glancesApp.service('GlancesStats', ["$http", "$q", "GlancesPluginHelper", functi
 
     this.getAllStats = function() {
         return $http.get('/api/2/all').then(function (response) {
-            _stats = response.data;
-
             return response.data;
         });
     };
 
     this.getAllLimits = function() {
         return $http.get('/api/2/all/limits').then(function (response) {
-            _limits = response.data;
-
             return response.data;
         });
     };
 
     this.getAllViews = function() {
         return $http.get('/api/2/all/views').then(function (response) {
-            _views = response.data;
-
             return response.data;
         });
     };
@@ -330,9 +284,7 @@ glancesApp.service('GlancesStats', ["$http", "$q", "GlancesPluginHelper", functi
 
     this.getConfig = function() {
         return $http.get('/api/2/config').then(function (response) {
-            _config = response.data;
-
-            return _config;
+            return response.data;
         });
     };
 
@@ -350,6 +302,23 @@ glancesApp.service('GlancesStats', ["$http", "$q", "GlancesPluginHelper", functi
 }]);
 'use strict';
 
+glancesApp.component('glancesHelp', {
+    controller: GlancesHelpController,
+    controllerAs: 'vm',
+    bindings: {
+      help: '<'
+    },
+    templateUrl: 'components/help/view.html'
+});
+
+'use strict';
+
+function GlancesHelpController() {
+    var vm = this;
+}
+
+'use strict';
+
 glancesApp.component('glances', {
     controller: GlancesController,
     bindings: {
@@ -366,21 +335,6 @@ glancesApp.component('glances', {
 function GlancesController($interval, GlancesStats) {
     var vm = this;
 
-    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;
-            }
-        }
-    };
-
     vm.dataLoaded = false;
     vm.stats = {};
     vm.refreshData = function () {
@@ -404,167 +358,91 @@ function GlancesController($interval, GlancesStats) {
     $interval(function () {
         vm.refreshData();
     }, refreshTime * 1000); // in milliseconds
-
-    vm.onKeyDown = function ($event) {
-        switch (true) {
-            case !$event.shiftKey && $event.keyCode == keycodes.a:
-                // a => Sort processes automatically
-                vm.sorter.column = "cpu_percent";
-                vm.sorter.auto = true;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.A:
-                // A => Enable/disable AMPs
-                vm.arguments.disable_amps = !vm.arguments.disable_amps;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.c:
-                // c => Sort processes by CPU%
-                vm.sorter.column = "cpu_percent";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.m:
-                // m => Sort processes by MEM%
-                vm.sorter.column = "memory_percent";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.u:
-                // u => Sort processes by user
-                vm.sorter.column = "username";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.p:
-                // p => Sort processes by name
-                vm.sorter.column = "name";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.i:
-                // i => Sort processes by I/O rate
-                vm.sorter.column = ['io_read', 'io_write'];
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.t:
-                // t => Sort processes by time
-                vm.sorter.column = "timemillis";
-                vm.sorter.auto = false;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.d:
-                // d => Show/hide disk I/O stats
-                vm.arguments.disable_diskio = !vm.arguments.disable_diskio;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.Q:
-                // Q => Show/hide IRQ
-                vm.arguments.enable_irq = !vm.arguments.enable_irq;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.f:
-                // f => Show/hide filesystem stats
-                vm.arguments.disable_fs = !vm.arguments.disable_fs;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.n:
-                // n => Show/hide network stats
-                vm.arguments.disable_network = !vm.arguments.disable_network;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.s:
-                // s => Show/hide sensors stats
-                vm.arguments.disable_sensors = !vm.arguments.disable_sensors;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.TWO:
-                // 2 => Show/hide left sidebar
-                vm.arguments.disable_left_sidebar = !vm.arguments.disable_left_sidebar;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.z:
-                // z => Enable/disable processes stats
-                vm.arguments.disable_process = !vm.arguments.disable_process;
-                break;
-            case $event.keyCode == keycodes.SLASH:
-                // SLASH => Enable/disable short processes name
-                vm.arguments.process_short_name = !vm.arguments.process_short_name;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.D:
-                // D => Enable/disable Docker stats
-                vm.arguments.disable_docker = !vm.arguments.disable_docker;
-                break;
-            case !$event.shiftKey && $event.keyCode == keycodes.b:
-                // b => Bytes or bits for network I/O
-                vm.arguments.byte = !vm.arguments.byte;
-               break;
-            case $event.shiftKey && $event.keyCode == keycodes.b:
-               // 'B' => Switch between bit/s and IO/s for Disk IO
-                vm.arguments.diskio_iops = !vm.arguments.diskio_iops;
-               break;
-            case !$event.shiftKey && $event.keyCode == keycodes.l:
-                // l => Show/hide alert logs
-                vm.arguments.disable_alert = !vm.arguments.disable_alert;
-               break;
-            case $event.shiftKey && $event.keyCode == keycodes.ONE:
-               // 1 => Global CPU or per-CPU stats
-               vm.arguments.percpu = !vm.arguments.percpu;
-               break;
-            case !$event.shiftKey && $event.keyCode == keycodes.h:
-                // h => Show/hide this help screen
-                vm.arguments.help_tag = !vm.arguments.help_tag;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.T:
-                // T => View network I/O as combination
-                vm.arguments.network_sum = !vm.arguments.network_sum;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.u:
-                // U => View cumulative network I/O
-                vm.arguments.network_cumul = !vm.arguments.network_cumul;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.f:
-                // F => Show filesystem free space
-                vm.arguments.fs_free_space = !vm.arguments.fs_free_space;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.THREE:
-                // 3 => Enable/disable quick look plugin
-                vm.arguments.disable_quicklook = !vm.arguments.disable_quicklook;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.SIX:
-                // 6 => Enable/disable mean gpu
-                vm.arguments.meangpu = !vm.arguments.meangpu;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.g:
-                // G => Enable/disable gpu
-                vm.arguments.disable_gpu = !vm.arguments.disable_gpu;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.FIVE:
-                vm.arguments.disable_quicklook = !vm.arguments.disable_quicklook;
-                vm.arguments.disable_cpu = !vm.arguments.disable_cpu;
-                vm.arguments.disable_mem = !vm.arguments.disable_mem;
-                vm.arguments.disable_memswap = !vm.arguments.disable_memswap;
-                vm.arguments.disable_load = !vm.arguments.disable_load;
-                vm.arguments.disable_gpu = !vm.arguments.disable_gpu;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.i:
-                // I => Show/hide IP module
-                vm.arguments.disable_ip = !vm.arguments.disable_ip;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.p:
-                // I => Enable/disable ports module
-                vm.arguments.disable_ports = !vm.arguments.disable_ports;
-                break;
-            case $event.shiftKey && $event.keyCode == keycodes.w:
-                // 'W' > Enable/Disable Wifi plugin
-                vm.arguments.disable_wifi = !vm.arguments.disable_wifi;
-                break;
-        }
-    };
 }
 
 'use strict';
 
-glancesApp.component('glancesHelp', {
-    controller: GlancesHelpController,
+glancesApp.component('glancesPluginAlert', {
+    controller: GlancesPluginAlertController,
     controllerAs: 'vm',
     bindings: {
-      help: '<',
+      stats: '<'
     },
-    templateUrl: 'components/help/view.html'
+    templateUrl: 'components/plugin-alert/view.html'
 });
 
 'use strict';
 
-function GlancesHelpController() {
+function GlancesPluginAlertController(favicoService) {
     var vm = this;
+    var _alerts = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['alert'];
+        _alerts = [];
+
+        if(!_.isArray(data)) {
+            data = [];
+        }
+
+        for (var i = 0; i < data.length; i++) {
+            var alertData = data[i];
+            var alert = {};
+
+            alert.name = alertData[3];
+            alert.level = alertData[2];
+            alert.begin = alertData[0] * 1000;
+            alert.end = alertData[1] * 1000;
+            alert.ongoing = alertData[1] == -1;
+            alert.min = alertData[6];
+            alert.mean = alertData[5];
+            alert.max = alertData[4];
+
+            if (!alert.ongoing) {
+                var duration = alert.end - alert.begin;
+                var seconds = parseInt((duration / 1000) % 60)
+                    , minutes = parseInt((duration / (1000 * 60)) % 60)
+                    , hours = parseInt((duration / (1000 * 60 * 60)) % 24);
+
+                alert.duration = _.padStart(hours, 2, '0') + ":" + _.padStart(minutes, 2, '0') + ":" + _.padStart(seconds, 2, '0');
+            }
+
+            _alerts.push(alert);
+        }
+
+        if (vm.hasOngoingAlerts()) {
+            favicoService.badge(vm.countOngoingAlerts());
+        } else {
+            favicoService.reset();
+        }
+
+        data = undefined;
+    };
+
+    vm.hasAlerts = function () {
+        return _alerts.length > 0;
+    };
+
+    vm.getAlerts = function () {
+        return _alerts;
+    };
+
+    vm.count = function () {
+        return _alerts.length;
+    };
+
+    vm.hasOngoingAlerts = function () {
+        return _.filter(_alerts, { 'ongoing': true }).length > 0;
+    };
+
+    vm.countOngoingAlerts = function () {
+        return _.filter(_alerts, { 'ongoing': true }).length;
+    }
 }
 
 'use strict';
@@ -598,6 +476,8 @@ function GlancesPluginCloudController() {
             vm.provider = 'AWS EC2';
             vm.instance =  data['instance-type'] + ' instance ' + data['instance-id'] + ' (' + data['region'] + ')';
         }
+
+        data = undefined;
     };
 }
 
@@ -664,6 +544,8 @@ function GlancesPluginCpuController() {
         if (data.syscalls) {
             vm.syscalls = Math.floor(data.syscalls / data.time_since_update);
         }
+
+        data = undefined;
     };
 
     this.getDecoration = function (value) {
@@ -677,6 +559,121 @@ function GlancesPluginCpuController() {
 
 'use strict';
 
+glancesApp.component('glancesPluginDiskio', {
+    controller: GlancesPluginDiskioController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-diskio/view.html'
+});
+
+'use strict';
+
+function GlancesPluginDiskioController($filter) {
+    var vm = this;
+
+    vm.disks = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['diskio'];
+
+        data = $filter('orderBy')(data,'disk_name');
+
+        vm.disks = [];
+        for (var i = 0; i < data.length; i++) {
+            var diskioData = data[i];
+            var timeSinceUpdate = diskioData['time_since_update'];
+
+            vm.disks.push({
+                'name': diskioData['disk_name'],
+                'bitrate': {
+                    'txps': $filter('bytes')(diskioData['read_bytes'] / timeSinceUpdate),
+                    'rxps': $filter('bytes')(diskioData['write_bytes'] / timeSinceUpdate)
+                },
+                'count': {
+                    'txps': $filter('bytes')(diskioData['read_count'] / timeSinceUpdate),
+                    'rxps': $filter('bytes')(diskioData['write_count'] / timeSinceUpdate)
+                },
+                'alias': diskioData['alias'] !== undefined ? diskioData['alias'] : null
+            });
+        }
+
+        data = undefined;
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginFs', {
+    controller: GlancesPluginFsController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<',
+        arguments: '<'
+    },
+    templateUrl: 'components/plugin-fs/view.html'
+});
+
+'use strict';
+
+function GlancesPluginFsController($filter) {
+    var vm = this;
+    var _view = {};
+
+    vm.fileSystems = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['fs'];
+        _view = stats.view['fs'];
+
+        vm.fileSystems = [];
+        for (var i = 0; i < data.length; i++) {
+            var fsData = data[i];
+
+            var shortMountPoint = fsData['mnt_point'];
+            if (shortMountPoint.length > 9) {
+                shortMountPoint = '_' + fsData['mnt_point'].slice(-8);
+            }
+
+            vm.fileSystems.push(fs = {
+                'name': fsData['device_name'],
+                'mountPoint': fsData['mnt_point'],
+                'shortMountPoint': shortMountPoint,
+                'percent': fsData['percent'],
+                'size': fsData['size'],
+                'used': fsData['used'],
+                'free': fsData['free']
+            });
+        }
+
+        vm.fileSystems = $filter('orderBy')(vm.fileSystems,'mnt_point');
+
+        data = undefined;
+    };
+
+    vm.getDecoration = function(mountPoint, field) {
+        if(_view[mountPoint][field] == undefined) {
+            return;
+        }
+
+        return _view[mountPoint][field].decoration.toLowerCase();
+    };
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginIp', {
     controller: GlancesPluginIpController,
     controllerAs: 'vm',
@@ -711,6 +708,8 @@ function GlancesPluginIpController() {
         vm.mask = data.mask;
         vm.maskCidr = data.mask_cidr;
         vm.publicAddress = data.public_address
+
+        data = undefined;
     };
 }
 
@@ -749,6 +748,8 @@ function GlancesPluginLoadController() {
       vm.min1 = data['min1'];
       vm.min5 = data['min5'];
       vm.min15 = data['min15'];
+
+        data = undefined;
     };
 
     this.getDecoration = function(value) {
@@ -795,6 +796,8 @@ function GlancesPluginMemController() {
         vm.total = data['total'];
         vm.used = data['used'];
         vm.free = data['free'];
+
+        data = undefined;
     };
 
     this.getDecoration = function (value) {
@@ -839,6 +842,56 @@ function GlancesPluginMemMoreController() {
         vm.inactive = data['inactive'];
         vm.buffers = data['buffers'];
         vm.cached = data['cached'];
+
+        data = undefined;
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginMemswap', {
+    controller: GlancesPluginMemswapController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-memswap/view.html'
+});
+
+'use strict';
+
+function GlancesPluginMemswapController() {
+    var vm = this;
+    var _view = {};
+
+    vm.percent = null;
+    vm.total = null;
+    vm.used = null;
+    vm.free = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['memswap'];
+        _view = stats.view['memswap'];
+
+        vm.percent = data['percent'];
+        vm.total = data['total'];
+        vm.used = data['used'];
+        vm.free = data['free'];
+
+        data = undefined;
+    };
+
+    this.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
     };
 }
 
@@ -888,6 +941,8 @@ function GlancesPluginNetworkController($filter) {
         }
 
         vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
+
+        data = undefined;
     };
 }
 
@@ -930,6 +985,8 @@ function GlancesPluginPercpuController(GlancesPluginHelper) {
                 'steal': cpuData.steal
             });
         }
+
+        data = undefined;
     };
 
     vm.getUserAlert = function(cpu) {
@@ -943,6 +1000,97 @@ function GlancesPluginPercpuController(GlancesPluginHelper) {
 
 'use strict';
 
+glancesApp.component('glancesPluginPorts', {
+    controller: GlancesPluginPortsController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-ports/view.html'
+});
+
+'use strict';
+
+function GlancesPluginPortsController($filter) {
+    var vm = this;
+
+    vm.ports = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['ports'];
+
+        vm.ports = [];
+        angular.forEach(ports, function(port) {
+            vm.ports.push(port);
+        }, this);
+
+        data = undefined;
+    };
+
+    vm.getDecoration = function(port) {
+        if (port.status === null) {
+            return 'careful';
+        }
+
+        if (port.status === false) {
+            return 'critical';
+        }
+
+        if (port.rtt_warning !== null && port.status > port.rtt_warning) {
+            return 'warning';
+        }
+
+        return 'ok';
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginProcesscount', {
+    controller: GlancesPluginProcesscountController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-processcount/view.html'
+});
+
+'use strict';
+
+function GlancesPluginProcesscountController() {
+    var vm = this;
+
+    vm.total  = null;
+    vm.running = null;
+    vm.sleeping = null;
+    vm.stopped = null;
+    vm.thread = null;
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['processcount'];
+
+        vm.total = data['total'] || 0;
+        vm.running = data['running'] || 0;
+        vm.sleeping = data['sleeping'] || 0;
+        vm.stopped = data['stopped'] || 0;
+        vm.thread = data['thread'] || 0;
+
+        data = undefined;
+    };
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginQuicklook', {
     controller: GlancesPluginQuicklookController,
     controllerAs: 'vm',
@@ -990,6 +1138,8 @@ function GlancesPluginQuicklookController() {
                 'total': cpu.total
             });
         }, this);
+
+        data = undefined;
     };
 
     this.getDecoration = function (value) {
@@ -1018,7 +1168,7 @@ glancesApp.component('glancesPluginSystem', {
 function GlancesPluginSystemController() {
     var vm = this;
 
-    vm.hostname  = null;
+    vm.hostname = null;
     vm.platform = null;
     vm.humanReadableName = null;
     vm.os = {
@@ -1027,18 +1177,20 @@ function GlancesPluginSystemController() {
     };
 
     vm.$onChanges = function (changes) {
-      var stats = changes.stats.currentValue;
-      if (stats === undefined || stats.stats === undefined) {
-        return;
-      }
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
 
-      var data = stats.stats['system'];
+        var data = stats.stats['system'];
 
-      vm.hostname = data['hostname'];
-      vm.platform = data['platform'];
-      vm.os.name = data['os_name'];
-      vm.os.version = data['os_version'];
-      vm.humanReadableName = data['hr_name'];
+        vm.hostname = data['hostname'];
+        vm.platform = data['platform'];
+        vm.os.name = data['os_name'];
+        vm.os.version = data['os_version'];
+        vm.humanReadableName = data['hr_name'];
+
+        data = undefined;
     };
 }
 
@@ -1058,15 +1210,73 @@ glancesApp.component('glancesPluginUptime', {
 function GlancesPluginUptimeController() {
     var vm = this;
 
-    this.value = null
+    vm.value = null;
 
     vm.$onChanges = function (changes) {
-      var stats = changes.stats.currentValue;
-      if (stats === undefined || stats.stats === undefined) {
-        return;
-      }
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
 
-      vm.value = stats.stats['uptime'];
+        vm.value = stats.stats['uptime'];
+    };
+}
+
+'use strict';
+
+glancesApp.component('glancesPluginWifi', {
+    controller: GlancesPluginWifiController,
+    controllerAs: 'vm',
+    bindings: {
+        stats: '<'
+    },
+    templateUrl: 'components/plugin-wifi/view.html'
+});
+
+'use strict';
+
+function GlancesPluginWifiController($filter) {
+    var vm = this;
+    var _view = {};
+
+    vm.hotspots = [];
+
+    vm.$onChanges = function (changes) {
+        var stats = changes.stats.currentValue;
+        if (stats === undefined || stats.stats === undefined) {
+            return;
+        }
+
+        var data = stats.stats['wifi'];
+        _view = stats.view['wifi'];
+
+        vm.hotspots = [];
+        for (var i = 0; i < data.length; i++) {
+            var hotspotData = data[i];
+
+            if (hotspotData['ssid'] === '') {
+                continue;
+            }
+
+            vm.hotspots.push({
+                'ssid': hotspotData['ssid'],
+                'encrypted': hotspotData['encrypted'],
+                'signal': hotspotData['signal'],
+                'encryption_type': hotspotData['encryption_type']
+            });
+        }
+
+        vm.hotspots = $filter('orderBy')(vm.hotspots, 'ssid');
+
+        data = undefined;
+    };
+
+    vm.getDecoration = function(hotpost, field) {
+        if(_view[hotpost.ssid][field] == undefined) {
+            return;
+        }
+
+        return _view[hotpost.ssid][field].decoration.toLowerCase();
     };
 }
 
diff --git a/glances/outputs/static/public/js/templates.min.js b/glances/outputs/static/public/js/templates.min.js
index 165ae141..bcd2d0da 100644
--- a/glances/outputs/static/public/js/templates.min.js
+++ b/glances/outputs/static/public/js/templates.min.js
@@ -1,13 +1,20 @@
-angular.module('glancesApp').run(['$templateCache', function($templateCache) {$templateCache.put('components/glances/view.html','<div ng-keydown="vm.onKeyDown($event)" tabindex="0">\n    <div ng-show="!vm.dataLoaded" class="container-fluid" id="loading-page">\n        <div class="glances-logo"></div>\n        <div class="loader">Loading...</div>\n    </div>\n\n    <glances-help help="vm.help" ng-show="vm.vm.argumentshelp_tag"></glances-help>\n\n    <div ng-show="vm.dataLoaded && !vm.vm.argumentshelp_tag" class="container-fluid">\n        <div class="top-plugin">\n            <div class="row">\n                <div class="col-sm-24">\n                    <div class="pull-left">\n                        <glances-plugin-system stats="vm.stats"></glances-plugin-system>\n                    </div>\n                    <div class="pull-left">\n                        <glances-plugin-ip stats="vm.stats" arguments="vm.arguments"></glances-plugin-ip>\n                    </div>\n                    <div class="pull-right">\n                        <glances-plugin-uptime stats="vm.stats"></glances-plugin-uptime>\n                    </div>\n                </div>\n                <div class="row">\n                    <div class="col-sm-24">\n                        <div class="pull-left">\n                            <glances-plugin-cloud stats="vm.stats"></glances-plugin-cloud>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class="row">\n            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.argumentsdisable_quicklook">\n                <glances-plugin-quicklook stats="vm.stats" arguments="vm.arguments"></glances-plugin-quicklook>\n            </div>\n            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && !vm.argumentspercpu">\n                <glances-plugin-cpu stats="vm.stats"></glances-plugin-cpu>\n            </div>\n            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.argumentsdisable_cpu && vm.argumentspercpu">\n                <glances-plugin-percpu stats="vm.stats"></glances-plugin-percpu>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"\n                 ng-if="!vm.argumentsdisable_gpu && statsGpu.gpus.length > 0">\n                <glances-plugin-gpu stats="vm.stats"></glances-plugin-gpu>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">\n                <glances-plugin-mem stats="vm.stats"></glances-plugin-mem>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"\n                 ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && statsGpu.gpus.length > 0)">\n                <glances-plugin-mem-more stats="vm.stats"></glances-plugin-mem-more>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_memswap">\n                <glances-plugin-memswap stats="vm.stats"></glances-plugin-memswap>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_load">\n                <glances-plugin-load stats="vm.stats"></glances-plugin-load>\n            </div>\n        </div>\n        <div class="row">\n            <div class="col-sm-6 sidebar" ng-show="!vm.arguments.disable_left_sidebar">\n                <div class="table">\n                    <glances-plugin-network stats="vm.stats" ng-show="!vm.arguments.disable_network"></glances-plugin-network>\n                </div>\n            </div>\n            <div class="col-sm-18">\n\n            </div>\n        </div>\n    </div>\n</div>\n');
-$templateCache.put('components/help/view.html','  <div  class="container-fluid">\n    <div class="row">\n        <div class="col-sm-12 col-lg-24">{{vm.help.version}} {{vm.help.psutil_version}}</div>\n    </div>\n    <div class="row">&nbsp;</div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-24">{{vm.help.configuration_file}}</div>\n    </div>\n    <div class="row">&nbsp;</div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_auto}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_network}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_alert}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_mem}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.percpu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_user}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_ip}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_proc}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_docker}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_io}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.view_network_io_combination}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu_times}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.view_cumulative_network}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_diskio}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesytem_freespace}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesystem}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_vm.help}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_network}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.diskio_iops}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_sensors}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_top_menu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_left_sidebar}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_amp}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_process_stats}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_irq}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_gpu}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_mean_gpu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_quick_look}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_short_processname}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_ports}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n\n  </div>\n');
+angular.module('glancesApp').run(['$templateCache', function($templateCache) {$templateCache.put('components/help/view.html','  <div  class="container-fluid">\n    <div class="row">\n        <div class="col-sm-12 col-lg-24">{{vm.help.version}} {{vm.help.psutil_version}}</div>\n    </div>\n    <div class="row">&nbsp;</div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-24">{{vm.help.configuration_file}}</div>\n    </div>\n    <div class="row">&nbsp;</div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_auto}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_network}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_alert}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_mem}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.percpu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_user}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_ip}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_proc}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_docker}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_io}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.view_network_io_combination}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.sort_cpu_times}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.view_cumulative_network}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_diskio}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesytem_freespace}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_filesystem}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_vm.help}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_network}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.diskio_iops}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_sensors}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_top_menu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_left_sidebar}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_amp}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_process_stats}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.show_hide_irq}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_gpu}}</div>\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_mean_gpu}}</div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_quick_look}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_short_processname}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n    <div class="row">\n        <div class="col-sm-12 col-lg-6">{{vm.help.enable_disable_ports}}</div>\n        <div class="col-sm-12 col-lg-6"></div>\n    </div>\n\n  </div>\n');
+$templateCache.put('components/glances/view.html','<div ng-keydown="vm.onKeyDown($event)" tabindex="0">\n    <div ng-if="!vm.dataLoaded" class="container-fluid" id="loading-page">\n        <div class="glances-logo"></div>\n        <div class="loader">Loading...</div>\n    </div>\n\n    <glances-help help="vm.help" ng-if="vm.arguments.help_tag"></glances-help>\n\n    <div ng-if="vm.dataLoaded && !vm.arguments.help_tag" class="container-fluid">\n        <div class="top-plugin">\n            <div class="row">\n                <div class="col-sm-24">\n                    <div class="pull-left">\n                        <glances-plugin-system stats="vm.stats"></glances-plugin-system>\n                    </div>\n                    <div class="pull-left">\n                        <glances-plugin-ip stats="vm.stats" arguments="vm.arguments"></glances-plugin-ip>\n                    </div>\n                    <div class="pull-right">\n                        <glances-plugin-uptime stats="vm.stats"></glances-plugin-uptime>\n                    </div>\n                </div>\n                <div class="row">\n                    <div class="col-sm-24">\n                        <div class="pull-left">\n                            <glances-plugin-cloud stats="vm.stats"></glances-plugin-cloud>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class="row">\n            <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="!vm.arguments.disable_quicklook">\n                <glances-plugin-quicklook stats="vm.stats" arguments="vm.arguments"></glances-plugin-quicklook>\n            </div>\n            <div class="col-sm-6 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && !vm.arguments.percpu">\n                <glances-plugin-cpu stats="vm.stats"></glances-plugin-cpu>\n            </div>\n            <div class="col-sm-12 col-md-8 col-lg-6" ng-if="!vm.arguments.disable_cpu && vm.arguments.percpu">\n                <glances-plugin-percpu stats="vm.stats"></glances-plugin-percpu>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="!vm.arguments.disable_gpu && statsGpu.gpus.length > 0">\n                <glances-plugin-gpu stats="vm.stats"></glances-plugin-gpu>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">\n                <glances-plugin-mem stats="vm.stats"></glances-plugin-mem>\n            </div>\n            <div class="hidden-xs hidden-sm col-md-4 col-lg-3"\n                 ng-if="!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && statsGpu.gpus.length > 0)">\n                <glances-plugin-mem-more stats="vm.stats"></glances-plugin-mem-more>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_memswap">\n                <glances-plugin-memswap stats="vm.stats"></glances-plugin-memswap>\n            </div>\n            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_load">\n                <glances-plugin-load stats="vm.stats"></glances-plugin-load>\n            </div>\n        </div>\n        <div class="row">\n            <div class="col-sm-6 sidebar" ng-if="!vm.arguments.disable_left_sidebar">\n                <div class="table">\n                    <glances-plugin-network stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_network"></glances-plugin-network>\n                    <glances-plugin-wifi stats="vm.stats" ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>\n                    <glances-plugin-ports stats="vm.stats" ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>\n                    <glances-plugin-diskio stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>\n                    <glances-plugin-fs stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>\n                    <glances-plugin-irq stats="vm.stats" arguments="vm.arguments" ng-if="vm.arguments.enable_irq"></glances-plugin-irq>\n                    <glances-plugin-folders stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_fs"></glances-plugin-folders>\n                    <glances-plugin-raid stats="vm.stats" arguments="vm.arguments"></glances-plugin-raid>\n                    <glances-plugin-sensors stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>\n                </div>\n            </div>\n            <div class="col-sm-18">\n                <glances-plugin-docker stats="vm.stats" arguments="vm.arguments" ng-if="!vm.arguments.disable_docker"></glances-plugin-docker>\n                <glances-plugin-alert stats="vm.stats" ng-if="!vm.arguments.disable_alert"></glances-plugin-alert>\n\n                <div ng-show="!vm.arguments.disable_process">\n                    <glances-plugin-processcount stats="vm.stats"></glances-plugin-processcount>\n                    <glances-plugin-amps stats="vm.stats" arguments="vm.arguments" ng-if="!arguments.disable_amps"></glances-plugin-amps>\n                    <glances-plugin-processlist stats="vm.stats" arguments="vm.arguments"></glances-plugin-processlist>\n                </div>\n                <div ng-show="vm.arguments.disable_process">PROCESSES DISABLED (press \'z\' to display)</div>\n            </div>\n            </div>\n        </div>\n    </div>\n</div>\n');
+$templateCache.put('components/plugin-alert/view.html','<section id="alerts">\n    <span class="title" ng-if="!vm.hasAlerts()">No warning or critical alert detected</span>\n    <span class="title" ng-if="vm.hasAlerts()">Warning or critical alerts (lasts {{vm.count()}} entries)</span>\n</section>\n<section id="alert" class="plugin">\n    <div class="table">\n        <div class="table-row" ng-repeat="alert in vm.getAlerts()">\n            <div class="table-cell text-left">\n                {{alert.begin | date : \'yyyy-MM-dd H:mm:ss\'}} ({{ alert.ongoing ? \'ongoing\' : alert.duration }}) - <span ng-hide="alert.ongoing">{{alert.level}} on</span> <span class="{{ alert.level | lowercase }}">{{alert.name}}</span>({{alert.max}})\n            </div>\n        </div>\n    </div>\n</section>');
 $templateCache.put('components/plugin-cloud/view.html','<section id="cloud">\n  <span class="title">{{ vm.provider }}</span> {{ vm.instance }}\n</section>\n');
 $templateCache.put('components/plugin-cpu/view.html','<section id="cpu" class="plugin">\n    <div class="row">\n        <div class="col-sm-24 col-md-12 col-lg-8">\n            <div class="table">\n                <div class="table-row">\n                    <div class="table-cell text-left title">CPU</div>\n                    <div class="table-cell">{{ vm.total }}%</div>\n                </div>\n                <div class="table-row">\n                    <div class="table-cell text-left">user:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'user\')">\n                        {{ vm.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-class="vm.getDecoration(\'system\')">\n                        {{ vm.system }}%\n                    </div>\n                </div>\n                <div class="table-row">\n                    <div class="table-cell text-left">idle:</div>\n                    <div class="table-cell">{{ vm.idle }}%</div>\n                </div>\n            </div>\n        </div>\n        <div class="hidden-xs hidden-sm col-md-12 col-lg-8">\n            <div class="table">\n                <div class="table-row">\n                    <div class="table-cell text-left">nice:</div>\n                    <div class="table-cell">\n                        {{ vm.nice }}%\n                    </div>\n                </div>\n                <div class="table-row" ng-show="vm.irq != undefined">\n                    <div class="table-cell text-left">irq:</div>\n                    <div class="table-cell">\n                        {{ vm.irq }}%\n                    </div>\n                </div>\n                <div class="table-row" ng-show="vm.iowait != undefined">\n                    <div class="table-cell text-left">iowait:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'iowait\')">\n                        {{ vm.iowait }}%\n                    </div>\n                </div>\n                <div class="table-row" ng-show="vm.steal != undefined">\n                    <div class="table-cell text-left">steal:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'steal\')">\n                        {{ vm.steal }}%\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class="hidden-xs hidden-sm hidden-md col-lg-8">\n            <div class="table">\n                <div class="table-row" ng-if="vm.ctx_switches">\n                    <div class="table-cell text-left">ctx_sw:</div>\n                    <div class="table-cell" ng-class="vm.getDecoration(\'ctx_switches\')">\n                        {{ vm.ctx_switches }}\n                    </div>\n                </div>\n                <div class="table-row" ng-if="vm.interrupts">\n                    <div class="table-cell text-left">inter:</div>\n                    <div class="table-cell">\n                        {{ vm.interrupts }}\n                    </div>\n                </div>\n                <div class="table-row" ng-if="vm.soft_interrupts">\n                    <div class="table-cell text-left">sw_int:</div>\n                    <div class="table-cell">\n                        {{ vm.soft_interrupts }}\n                    </div>\n                </div>\n                <div class="table-row" ng-if="!statsSystem.isLinux() && vm.syscalls">\n                    <div class="table-cell text-left">syscal:</div>\n                    <div class="table-cell">\n                        {{ vm.syscalls }}\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</section>\n');
+$templateCache.put('components/plugin-diskio/view.html','<section id="diskio" class="plugin table-row-group" ng-show="vm.disks.length > 0">\n    <div class="table-row">\n        <div class="table-cell text-left title">DISK I/O</div>\n        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">R/s</div>\n        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">W/s</div>\n\n        <div class="table-cell" ng-show="vm.arguments.diskio_iops">IOR/s</div>\n        <div class="table-cell" ng-show="vm.arguments.diskio_iops">IOW/s</div>\n    </div>\n    <div class="table-row" ng-repeat="disk in vm.disks">\n        <div class="table-cell text-left">{{(disk.alias ? disk.alias : disk.name) | min_size}}</div>\n        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.txps }}</div>\n        <div class="table-cell" ng-show="!vm.arguments.diskio_iops">{{disk.bitrate.rxps }}</div>\n\n        <div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.txps }}</div>\n        <div class="table-cell" ng-show="vm.arguments.diskio_iops">{{disk.count.rxps }}</div>\n    </div>\n</section>');
+$templateCache.put('components/plugin-fs/view.html','<section id="fs" class="plugin table-row-group">\n    <div class="table-row">\n        <div class="table-cell text-left title">FILE SYS</div>\n        <div class="table-cell">\n            <span ng-show="!vm.arguments.fs_free_space">Used</span>\n            <span ng-show="vm.arguments.fs_free_space">Free</span>\n        </div>\n        <div class="table-cell">Total</div>\n    </div>\n    <div class="table-row" ng-repeat="fs in vm.fileSystems">\n        <div class="table-cell text-left">{{ fs.shortMountPoint }} <span class="visible-lg-inline" ng-show="fs.name.length <= 20">({{ fs.name }})<span></div>\n        <div class="table-cell" ng-class="vm.getDecoration(fs.mountPoint, \'used\')">\n            <span ng-show="!vm.arguments.fs_free_space">{{ fs.used | bytes }}</span>\n            <span ng-show="vm.arguments.fs_free_space">{{ fs.free | bytes }}</span>\n        </div>\n        <div class="table-cell">{{ fs.size | bytes }}</div>\n    </div>\n</section>');
 $templateCache.put('components/plugin-ip/view.html','<section id="ip" ng-if="vm.address != undefined && !vm.arguments.disable_ip">\n  &nbsp;-&nbsp;<span class="title">IP</span>&nbsp;<span>{{ vm.address }}/{{ vm.maskCidr }}</span>&nbsp;<span ng-if="vm.publicAddress" class="title">Pub</span>&nbsp;<span>{{ vm.publicAddress }}</span>\n</section>\n');
 $templateCache.put('components/plugin-load/view.html','<section id="load" class="plugin" ng-if="vm.cpucore != undefined">\n  <div class="table">\n      <div class="table-row">\n          <div class="table-cell text-left title">LOAD</div>\n          <div class="table-cell">{{ vm.cpucore }}-core</div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">1 min:</div>\n          <div class="table-cell">\n              {{ vm.min1 | number : 2}}\n          </div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">5 min:</div>\n          <div class="table-cell" ng-class="vm.getDecoration(\'min5\')">\n              {{ vm.min5 | number : 2}}\n          </div>\n      </div>\n      <div class="table-row">\n          <div class="table-cell text-left">15 min:</div>\n          <div class="table-cell" ng-class="vm.getDecoration(\'min15\')">\n              {{ vm.min15 | number : 2}}\n          </div>\n      </div>\n  </div>\n</section>\n');
 $templateCache.put('components/plugin-mem/view.html','<section id="mem" class="plugin">\n    <div class="table">\n        <div class="table-row">\n            <div class="table-cell text-left title">MEM</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:2 }}\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-mem-more/view.html','<section id="mem-more" class="plugin">\n    <div class="table">\n        <div class="table-row">\n            <div class="table-cell text-left">active:</div>\n            <div class="table-cell">{{ vm.active | bytes }}</div>\n        </div>\n        <div class="table-row">\n            <div class="table-cell text-left">inactive:</div>\n            <div class="table-cell">{{ vm.inactive | bytes }}</div>\n        </div>\n        <div class="table-row" ng-show="vm.buffers != undefined">\n            <div class="table-cell text-left">buffers:</div>\n            <div class="table-cell">{{ vm.buffers | bytes }}</div>\n        </div>\n        <div class="table-row" ng-show="vm.cached != undefined">\n            <div class="table-cell text-left">cached:</div>\n            <div class="table-cell">{{ vm.cached | bytes }}</div>\n        </div>\n    </div>\n</section>\n');
+$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','<section id="network" class="plugin table-row-group">\n  <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">\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</section>');
 $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','<section id="ports" class="plugin table-row-group">\n    <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>\n</section>');
+$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 {{ sorter.auto ? \'automatically\' : \'\' }} by {{ sorter.getColumnLabel(sorter.column) }}, flat view</span>\n</section>');
 $templateCache.put('components/plugin-quicklook/view.html','<section id="quicklook" 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-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');}]);
\ No newline at end of file
+$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">\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>');}]);
\ No newline at end of file