Merge pull request #1564 from nicolargo/issue1547

[WebUI] Add a new TCP connections status plugin

8 files changed, 336 insertions, 152 deletions

diff --git a/glances/outputs/static/js/components/glances/controller.js b/glances/outputs/static/js/components/glances/controller.js
index 503fad25..a851580e 100644
--- a/glances/outputs/static/js/components/glances/controller.js
+++ b/glances/outputs/static/js/components/glances/controller.js
@@ -10,6 +10,7 @@ export default function GlancesController($scope, GlancesStats, hotkeys, ARGUMEN
 
     $scope.$on('data_refreshed', function (event, data) {
         vm.hasGpu = data.stats.gpu.length > 0;
+        vm.isLinux = data.isLinux;
         vm.dataLoaded = true;
     });
 
@@ -45,6 +46,14 @@ export default function GlancesController($scope, GlancesStats, hotkeys, ARGUMEN
         }
     });
 
+    // k => Show/hide connections stats
+    hotkeys.add({
+        combo: 'k',
+        callback: function () {
+            ARGUMENTS.disable_connections = !ARGUMENTS.disable_connections;
+        }
+    });
+
     // n => Show/hide network stats
     hotkeys.add({
         combo: 'n',
diff --git a/glances/outputs/static/js/components/glances/view.html b/glances/outputs/static/js/components/glances/view.html
index 0a52e83c..4bfaced9 100644
--- a/glances/outputs/static/js/components/glances/view.html
+++ b/glances/outputs/static/js/components/glances/view.html
@@ -43,7 +43,7 @@
             <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_gpu && vm.hasGpu">
                 <glances-plugin-gpu></glances-plugin-gpu>
             </div>
-            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.argumentsdisable_mem">
+            <div class="col-sm-6 col-md-4 col-lg-3" ng-if="!vm.arguments.disable_mem">
                 <glances-plugin-mem></glances-plugin-mem>
             </div>
             <div class="col-sm-6 col-md-4 col-lg-3"
@@ -61,6 +61,7 @@
             <div class="col-sm-6 sidebar" ng-if="!vm.arguments.disable_left_sidebar">
                 <div class="table">
                     <glances-plugin-network id="plugin-network" class="plugin table-row-group" ng-if="!vm.arguments.disable_network"></glances-plugin-network>
+                    <glances-plugin-connections id="plugin-connections" class="plugin table-row-group" ng-if="vm.isLinux && !vm.arguments.disable_connections"></glances-plugin-connections>
                     <glances-plugin-wifi id="plugin-wifi" class="plugin table-row-group" ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>
                     <glances-plugin-ports id="plugin-ports" class="plugin table-row-group" ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>
                     <glances-plugin-diskio id="plugin-diskio" class="plugin table-row-group" ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>
@@ -79,4 +80,3 @@
         </div>
     </div>
 </div>
-</div>
diff --git a/glances/outputs/static/js/components/index.js b/glances/outputs/static/js/components/index.js
index e7c4752d..314a6216 100644
--- a/glances/outputs/static/js/components/index.js
+++ b/glances/outputs/static/js/components/index.js
@@ -6,6 +6,7 @@ import "./help/component";
 import "./plugin-alert/component";
 import "./plugin-amps/component";
 import "./plugin-cloud/component";
+import "./plugin-connections/component";
 import "./plugin-cpu/component";
 import "./plugin-diskio/component";
 import "./plugin-docker/component";
diff --git a/glances/outputs/static/js/components/plugin-connections/component.js b/glances/outputs/static/js/components/plugin-connections/component.js
new file mode 100644
index 00000000..86c26bd3
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-connections/component.js
@@ -0,0 +1,11 @@
+
+import angular from "angular";
+
+import GlancesPluginConnectionsController from "./controller";
+import template from "./view.html";
+
+export default angular.module("glancesApp").component("glancesPluginConnections", {
+    controller: GlancesPluginConnectionsController,
+    controllerAs: "vm",
+    templateUrl: template,
+});
diff --git a/glances/outputs/static/js/components/plugin-connections/controller.js b/glances/outputs/static/js/components/plugin-connections/controller.js
new file mode 100644
index 00000000..d9a66c29
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-connections/controller.js
@@ -0,0 +1,41 @@
+
+export default function GlancesPluginConnectionsController($scope, GlancesStats) {
+    var vm = this;
+    var _view = {};
+
+    vm.listen = null;
+    vm.initiated = null;
+    vm.established = null;
+    vm.terminated = null;
+    vm.tracked = null;
+
+    vm.$onInit = function () {
+        loadData(GlancesStats.getData());
+    };
+
+    $scope.$on('data_refreshed', function (event, data) {
+        loadData(data);
+    });
+
+    var loadData = function (data) {
+        var stats = data.stats['connections'];
+        _view = data.views['connections'];
+
+        vm.listen = stats['LISTEN'];
+        vm.initiated = stats['initiated'];
+        vm.established = stats['ESTABLISHED'];
+        vm.terminated = stats['terminated'];
+        vm.tracked = {
+            count: stats['nf_conntrack_count'],
+            max: stats['nf_conntrack_max'],
+        };
+    };
+
+    vm.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}
diff --git a/glances/outputs/static/js/components/plugin-connections/view.html b/glances/outputs/static/js/components/plugin-connections/view.html
new file mode 100644
index 00000000..09407a09
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-connections/view.html
@@ -0,0 +1,30 @@
+<div class="table-row">
+    <div class="table-cell text-left title">TCP CONNECTIONS</div>
+    <div class="table-cell"></div>
+</div>
+<div class="table-row">
+    <div class="table-cell text-left">Listen</div>
+    <div class="table-cell"></div>
+    <div class="table-cell">{{vm.listen}}</div>
+</div>
+<div class="table-row">
+    <div class="table-cell text-left">Initiated</div>
+    <div class="table-cell"></div>
+    <div class="table-cell">{{vm.initiated}}</div>
+</div>
+<div class="table-row">
+    <div class="table-cell text-left">Established</div>
+    <div class="table-cell"></div>
+    <div class="table-cell">{{vm.established}}</div>
+</div>
+<div class="table-row">
+    <div class="table-cell text-left">Terminated</div>
+    <div class="table-cell"></div>
+    <div class="table-cell">{{vm.terminated}}</div>
+</div>
+<div class="table-row">
+    <div class="table-cell text-left">Tracked</div>
+    <div class="table-cell"></div>
+    <div class="table-cell" ng-class="vm.getDecoration('nf_conntrack_percent')">{{vm.tracked.count}}/{{vm.tracked.max}}</div>
+</div>
+
diff --git a/glances/outputs/static/public/glances.js b/glances/outputs/static/public/glances.js
index 44d9658d..9fe9a3ed 100644
--- a/glances/outputs/static/public/glances.js
+++ b/glances/outputs/static/public/glances.js
@@ -17656,7 +17656,7 @@ function updateLink (link, options, obj) {
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(77), __webpack_require__(78)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(80), __webpack_require__(81)(module)))
 
 /***/ }),
 /* 4 */
@@ -17671,8 +17671,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__module__ = __webpack_require__(12);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__services__ = __webpack_require__(15);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components__ = __webpack_require__(20);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__filters__ = __webpack_require__(110);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__directives__ = __webpack_require__(111);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__filters__ = __webpack_require__(113);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__directives__ = __webpack_require__(114);
 
 
 
@@ -57133,30 +57133,31 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__plugin_alert_component__ = __webpack_require__(27);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__plugin_amps_component__ = __webpack_require__(30);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__plugin_cloud_component__ = __webpack_require__(33);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__plugin_cpu_component__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__plugin_diskio_component__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__plugin_docker_component__ = __webpack_require__(42);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__plugin_folders_component__ = __webpack_require__(45);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__plugin_fs_component__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__plugin_gpu_component__ = __webpack_require__(51);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__plugin_ip_component__ = __webpack_require__(54);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__plugin_irq_component__ = __webpack_require__(57);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__plugin_load_component__ = __webpack_require__(60);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__plugin_mem_component__ = __webpack_require__(63);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__plugin_mem_more_component__ = __webpack_require__(66);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__plugin_memswap_component__ = __webpack_require__(69);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__plugin_network_component__ = __webpack_require__(72);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__plugin_percpu_component__ = __webpack_require__(75);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__plugin_ports_component__ = __webpack_require__(80);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__plugin_process_component__ = __webpack_require__(83);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__plugin_processcount_component__ = __webpack_require__(86);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__plugin_processlist_component__ = __webpack_require__(89);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_23__plugin_quicklook_component__ = __webpack_require__(92);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_24__plugin_raid_component__ = __webpack_require__(95);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_25__plugin_sensors_component__ = __webpack_require__(98);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_26__plugin_system_component__ = __webpack_require__(101);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_27__plugin_uptime_component__ = __webpack_require__(104);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_28__plugin_wifi_component__ = __webpack_require__(107);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__plugin_connections_component__ = __webpack_require__(36);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__plugin_cpu_component__ = __webpack_require__(39);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__plugin_diskio_component__ = __webpack_require__(42);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__plugin_docker_component__ = __webpack_require__(45);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__plugin_folders_component__ = __webpack_require__(48);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__plugin_fs_component__ = __webpack_require__(51);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__plugin_gpu_component__ = __webpack_require__(54);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__plugin_ip_component__ = __webpack_require__(57);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__plugin_irq_component__ = __webpack_require__(60);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__plugin_load_component__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__plugin_mem_component__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__plugin_mem_more_component__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__plugin_memswap_component__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__plugin_network_component__ = __webpack_require__(75);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__plugin_percpu_component__ = __webpack_require__(78);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__plugin_ports_component__ = __webpack_require__(83);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__plugin_process_component__ = __webpack_require__(86);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__plugin_processcount_component__ = __webpack_require__(89);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_23__plugin_processlist_component__ = __webpack_require__(92);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_24__plugin_quicklook_component__ = __webpack_require__(95);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_25__plugin_raid_component__ = __webpack_require__(98);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_26__plugin_sensors_component__ = __webpack_require__(101);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_27__plugin_system_component__ = __webpack_require__(104);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_28__plugin_uptime_component__ = __webpack_require__(107);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_29__plugin_wifi_component__ = __webpack_require__(110);
 
 // import all components
 
@@ -57191,6 +57192,7 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
 
 
 
+
 /***/ }),
 /* 21 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -57235,6 +57237,7 @@ function GlancesController($scope, GlancesStats, hotkeys, ARGUMENTS) {
 
     $scope.$on('data_refreshed', function (event, data) {
         vm.hasGpu = data.stats.gpu.length > 0;
+        vm.isLinux = data.isLinux;
         vm.dataLoaded = true;
     });
 
@@ -57270,6 +57273,14 @@ function GlancesController($scope, GlancesStats, hotkeys, ARGUMENTS) {
         }
     });
 
+    // k => Show/hide connections stats
+    hotkeys.add({
+        combo: 'k',
+        callback: function () {
+            ARGUMENTS.disable_connections = !ARGUMENTS.disable_connections;
+        }
+    });
+
     // n => Show/hide network stats
     hotkeys.add({
         combo: 'n',
@@ -57449,7 +57460,7 @@ function GlancesController($scope, GlancesStats, hotkeys, ARGUMENTS) {
 /***/ (function(module, exports) {
 
 var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/glances/view.html';
-var html = "<div>\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 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></glances-plugin-system>\n                    </div>\n                    <div class=\"pull-left\">\n                        <glances-plugin-ip></glances-plugin-ip>\n                    </div>\n                    <div class=\"pull-right\">\n                        <glances-plugin-uptime></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></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></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></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></glances-plugin-percpu>\n            </div>\n            <div class=\"col-sm-6 col-md-4 col-lg-3\" ng-if=\"!vm.arguments.disable_gpu && vm.hasGpu\">\n                <glances-plugin-gpu></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></glances-plugin-mem>\n            </div>\n            <div class=\"col-sm-6 col-md-4 col-lg-3\"\n                 ng-if=\"!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && vm.hasGpu)\">\n                <glances-plugin-mem-more></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></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></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 id=\"plugin-network\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_network\"></glances-plugin-network>\n                    <glances-plugin-wifi id=\"plugin-wifi\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_wifi\"></glances-plugin-wifi>\n                    <glances-plugin-ports id=\"plugin-ports\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_ports\"></glances-plugin-ports>\n                    <glances-plugin-diskio id=\"plugin-diskio\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_diskio\"></glances-plugin-diskio>\n                    <glances-plugin-fs id=\"plugin-fs\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_fs\"></glances-plugin-fs>\n                    <glances-plugin-irq id=\"plugin-irq\" class=\"plugin table-row-group\" ng-if=\"vm.arguments.enable_irq\"></glances-plugin-irq>\n                    <glances-plugin-folders id=\"plugin-folders\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_folders\"></glances-plugin-folders>\n                    <glances-plugin-raid id=\"plugin-raid\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.raid\"></glances-plugin-raid>\n                    <glances-plugin-sensors id=\"plugin-sensors\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_sensors\"></glances-plugin-sensors>\n                </div>\n            </div>\n            <div class=\"col-sm-18\">\n                <glances-plugin-docker ng-if=\"!vm.arguments.disable_docker\"></glances-plugin-docker>\n                <glances-plugin-alert ng-if=\"!vm.arguments.disable_alert\"></glances-plugin-alert>\n                <glances-plugin-process></glances-plugin-process>\n            </div>\n        </div>\n    </div>\n</div>\n</div>\n";
+var html = "<div>\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 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></glances-plugin-system>\n                    </div>\n                    <div class=\"pull-left\">\n                        <glances-plugin-ip></glances-plugin-ip>\n                    </div>\n                    <div class=\"pull-right\">\n                        <glances-plugin-uptime></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></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></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></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></glances-plugin-percpu>\n            </div>\n            <div class=\"col-sm-6 col-md-4 col-lg-3\" ng-if=\"!vm.arguments.disable_gpu && vm.hasGpu\">\n                <glances-plugin-gpu></glances-plugin-gpu>\n            </div>\n            <div class=\"col-sm-6 col-md-4 col-lg-3\" ng-if=\"!vm.arguments.disable_mem\">\n                <glances-plugin-mem></glances-plugin-mem>\n            </div>\n            <div class=\"col-sm-6 col-md-4 col-lg-3\"\n                 ng-if=\"!vm.arguments.disable_mem && !(!vm.arguments.disable_gpu && vm.hasGpu)\">\n                <glances-plugin-mem-more></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></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></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 id=\"plugin-network\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_network\"></glances-plugin-network>\n                    <glances-plugin-connections id=\"plugin-connections\" class=\"plugin table-row-group\" ng-if=\"vm.isLinux && !vm.arguments.disable_connections\"></glances-plugin-connections>\n                    <glances-plugin-wifi id=\"plugin-wifi\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_wifi\"></glances-plugin-wifi>\n                    <glances-plugin-ports id=\"plugin-ports\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_ports\"></glances-plugin-ports>\n                    <glances-plugin-diskio id=\"plugin-diskio\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_diskio\"></glances-plugin-diskio>\n                    <glances-plugin-fs id=\"plugin-fs\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_fs\"></glances-plugin-fs>\n                    <glances-plugin-irq id=\"plugin-irq\" class=\"plugin table-row-group\" ng-if=\"vm.arguments.enable_irq\"></glances-plugin-irq>\n                    <glances-plugin-folders id=\"plugin-folders\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_folders\"></glances-plugin-folders>\n                    <glances-plugin-raid id=\"plugin-raid\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.raid\"></glances-plugin-raid>\n                    <glances-plugin-sensors id=\"plugin-sensors\" class=\"plugin table-row-group\" ng-if=\"!vm.arguments.disable_sensors\"></glances-plugin-sensors>\n                </div>\n            </div>\n            <div class=\"col-sm-18\">\n                <glances-plugin-docker ng-if=\"!vm.arguments.disable_docker\"></glances-plugin-docker>\n                <glances-plugin-alert ng-if=\"!vm.arguments.disable_alert\"></glances-plugin-alert>\n                <glances-plugin-process></glances-plugin-process>\n            </div>\n        </div>\n    </div>\n</div>\n";
 window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
 module.exports = path;
 
@@ -57768,6 +57779,87 @@ module.exports = path;
 
 
 
+/* unused harmony default export */ var _unused_webpack_default_export = (__WEBPACK_IMPORTED_MODULE_0_angular___default.a.module("glancesApp").component("glancesPluginConnections", {
+    controller: __WEBPACK_IMPORTED_MODULE_1__controller__["a" /* default */],
+    controllerAs: "vm",
+    templateUrl: __WEBPACK_IMPORTED_MODULE_2__view_html___default.a,
+}));
+
+
+/***/ }),
+/* 37 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (immutable) */ __webpack_exports__["a"] = GlancesPluginConnectionsController;
+
+function GlancesPluginConnectionsController($scope, GlancesStats) {
+    var vm = this;
+    var _view = {};
+
+    vm.listen = null;
+    vm.initiated = null;
+    vm.established = null;
+    vm.terminated = null;
+    vm.tracked = null;
+
+    vm.$onInit = function () {
+        loadData(GlancesStats.getData());
+    };
+
+    $scope.$on('data_refreshed', function (event, data) {
+        loadData(data);
+    });
+
+    var loadData = function (data) {
+        var stats = data.stats['connections'];
+        _view = data.views['connections'];
+
+        vm.listen = stats['LISTEN'];
+        vm.initiated = stats['initiated'];
+        vm.established = stats['ESTABLISHED'];
+        vm.terminated = stats['terminated'];
+        vm.tracked = {
+            count: stats['nf_conntrack_count'],
+            max: stats['nf_conntrack_max'],
+        };
+    };
+
+    vm.getDecoration = function (value) {
+        if (_view[value] === undefined) {
+            return;
+        }
+
+        return _view[value].decoration.toLowerCase();
+    };
+}
+
+
+/***/ }),
+/* 38 */
+/***/ (function(module, exports) {
+
+var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/plugin-connections/view.html';
+var html = "<div class=\"table-row\">\n    <div class=\"table-cell text-left title\">TCP CONNECTIONS</div>\n    <div class=\"table-cell\"></div>\n</div>\n<div class=\"table-row\">\n    <div class=\"table-cell text-left\">Listen</div>\n    <div class=\"table-cell\"></div>\n    <div class=\"table-cell\">{{vm.listen}}</div>\n</div>\n<div class=\"table-row\">\n    <div class=\"table-cell text-left\">Initiated</div>\n    <div class=\"table-cell\"></div>\n    <div class=\"table-cell\">{{vm.initiated}}</div>\n</div>\n<div class=\"table-row\">\n    <div class=\"table-cell text-left\">Established</div>\n    <div class=\"table-cell\"></div>\n    <div class=\"table-cell\">{{vm.established}}</div>\n</div>\n<div class=\"table-row\">\n    <div class=\"table-cell text-left\">Terminated</div>\n    <div class=\"table-cell\"></div>\n    <div class=\"table-cell\">{{vm.terminated}}</div>\n</div>\n<div class=\"table-row\">\n    <div class=\"table-cell text-left\">Tracked</div>\n    <div class=\"table-cell\"></div>\n    <div class=\"table-cell\" ng-class=\"vm.getDecoration('nf_conntrack_percent')\">{{vm.tracked.count}}/{{vm.tracked.max}}</div>\n</div>\n\n";
+window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
+module.exports = path;
+
+/***/ }),
+/* 39 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_angular__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(40);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(41);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__view_html__);
+
+
+
+
+
+
 /* unused harmony default export */ var _unused_webpack_default_export = (__WEBPACK_IMPORTED_MODULE_0_angular___default.a.module("glancesApp").component("glancesPluginCpu", {
     controller: __WEBPACK_IMPORTED_MODULE_1__controller__["a" /* default */],
     controllerAs: 'vm',
@@ -57776,7 +57868,7 @@ module.exports = path;
 
 
 /***/ }),
-/* 37 */
+/* 40 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -57850,7 +57942,7 @@ function GlancesPluginCpuController($scope, GlancesStats) {
 
 
 /***/ }),
-/* 38 */
+/* 41 */
 /***/ (function(module, exports) {
 
 var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/plugin-cpu/view.html';
@@ -57859,14 +57951,14 @@ window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, htm
 module.exports = path;
 
 /***/ }),
-/* 39 */
+/* 42 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_angular__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(41);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(43);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(44);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__view_html__);
 
 
@@ -57882,7 +57974,7 @@ module.exports = path;
 
 
 /***/ }),
-/* 40 */
+/* 43 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -57926,7 +58018,7 @@ function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS)
 
 
 /***/ }),
-/* 41 */
+/* 44 */
 /***/ (function(module, exports) {
 
 var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/plugin-diskio/view.html';
@@ -57935,14 +58027,14 @@ window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, htm
 module.exports = path;
 
 /***/ }),
-/* 42 */
+/* 45 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_angular__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(43);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(44);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(46);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(47);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__view_html__);
 
 
@@ -57958,7 +58050,7 @@ module.exports = path;
 
 
 /***/ }),
-/* 43 */
+/* 46 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -58009,7 +58101,7 @@ function GlancesPluginDockerController($scope, GlancesStats) {
 
 
 /***/ }),
-/* 44 */
+/* 47 */
 /***/ (function(module, exports) {
 
 var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/plugin-docker/view.html';
@@ -58018,14 +58110,14 @@ window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, htm
 module.exports = path;
 
 /***/ }),
-/* 45 */
+/* 48 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_angular__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(46);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(47);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(49);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(50);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__view_html__);
 
 
@@ -58041,7 +58133,7 @@ module.exports = path;
 
 
 /***/ }),
-/* 46 */
+/* 49 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -58098,7 +58190,7 @@ function GlancesPluginFoldersController($scope, GlancesStats) {
 
 
 /***/ }),
-/* 47 */
+/* 50 */
 /***/ (function(module, exports) {
 
 var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/plugin-folders/view.html';
@@ -58107,14 +58199,14 @@ window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, htm
 module.exports = path;
 
 /***/ }),
-/* 48 */
+/* 51 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_angular__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(49);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(50);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(52);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(53);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__view_html__);
 
 
@@ -58130,7 +58222,7 @@ module.exports = path;
 
 
 /***/ }),
-/* 49 */
+/* 52 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -58188,7 +58280,7 @@ function GlancesPluginFsController($scope, $filter, GlancesStats, ARGUMENTS) {
 
 
 /***/ }),
-/* 50 */
+/* 53 */
 /***/ (function(module, exports) {
 
 var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/plugin-fs/view.html';
@@ -58197,14 +58289,14 @@ window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, htm
 module.exports = path;
 
 /***/ }),
-/* 51 */
+/* 54 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_angular__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(52);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(53);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__controller__ = __webpack_require__(55);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html__ = __webpack_require__(56);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__view_html___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2__view_html__);
 
 
@@ -58220,7 +58312,7 @@ module.exports = path;
 
 
 /***/ }),
-/* 52 */
+/* 55 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -58294,7 +58386,7 @@ function GlancesPluginGpuController($scope, GlancesStats, ARGUMENTS) {
 
 
 /***/ }),
-/* 53 */
+/* 56 */
 /***/ (function(module, exports) {
 
 var path = '/Users/floranbrutel/dev/glances/glances/outputs/static/js/components/plugin-gpu/view.html';
@@ -58303,14 +58395,14 @@ window.angular.module('ng').run(['$templateCache', function(c)