[Web UI] add ports plugin

glances/outputs/static/html/index.html

@@ -41,6 +41,7 @@
     <script type="text/javascript" src="services/plugins/glances_sensors.js"></script>
     <script type="text/javascript" src="services/plugins/glances_system.js"></script>
     <script type="text/javascript" src="services/plugins/glances_uptime.js"></script>
+    <script type="text/javascript" src="services/plugins/glances_ports.js"></script>
 
     <script type="text/javascript" src="stats_controller.js"></script>
 </head>

glances/outputs/static/html/plugins/ports.html

@@ -0,0 +1,10 @@
+<div class="table-row" ng-repeat="port in statsPorts.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="statsPorts.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>

glances/outputs/static/html/stats.html

@@ -46,6 +46,7 @@
         <div class="col-sm-6 sidebar" ng-show="!arguments.disable_left_sidebar">
             <div class="table">
                 <section id="network" class="plugin table-row-group" ng-show="!arguments.disable_network" ng-include src="'plugins/network.html'"></section>
+                <section id="ports" class="plugin table-row-group" ng-include src="'plugins/ports.html'"></section>
                 <section id="diskio" class="plugin table-row-group" ng-show="!arguments.disable_diskio && statsDiskio.disks.length > 0" ng-include src="'plugins/diskio.html'"></section>
                 <section id="fs" class="plugin table-row-group" ng-show="!arguments.disable_fs" ng-include src="'plugins/fs.html'"></section>
                 <section id="folders" class="plugin table-row-group" ng-show="!arguments.disable_fs && statsFolders.folders.length > 0" ng-include src="'plugins/folders.html'"></section>

glances/outputs/static/js/filters.js

@@ -1,6 +1,6 @@
 glancesApp.filter('min_size', function() {
-    return function(input) {
-        var max = 8;
+    return function(input, max) {
+        var max = max || 8;
         if (input.length > max) {
             return "_" + input.substring(input.length - max)
         }

glances/outputs/static/js/services/core/glances_stats.js

@@ -21,7 +21,8 @@ glancesApp.service('GlancesStats', function($http, $injector, $q, GlancesPlugin)
         'raid': 'GlancesPluginRaid',
         'sensors': 'GlancesPluginSensors',
         'system': 'GlancesPluginSystem',
-        'uptime': 'GlancesPluginUptime'
+        'uptime': 'GlancesPluginUptime',
+        'ports': 'GlancesPluginPorts'
     };
 
     this.getData = function() {

glances/outputs/static/js/services/plugins/glances_amps.js

@@ -6,7 +6,7 @@ glancesApp.service('GlancesPluginAmps', function() {
         var processes = data[_pluginName];
 
         this.processes = [];
-        angular.forEach(processes, function(process, key) {
+        angular.forEach(processes, function(process) {
             if (process.result !== null) {
                 this.processes.push(process);
             }

glances/outputs/static/js/services/plugins/glances_ports.js

@@ -0,0 +1,29 @@
+glancesApp.service('GlancesPluginPorts', function() {
+  var _pluginName = "ports";
+  this.ports = [];
+
+  this.setData = function(data, views) {
+    var ports = data[_pluginName];
+    this.ports = [];
+
+    angular.forEach(ports, function(port) {
+      this.ports.push(port);
+    }, this);
+  };
+
+  this.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';
+  };
+});

glances/outputs/static/js/stats_controller.js

@@ -41,6 +41,7 @@ glancesApp.controller('statsController', function ($scope, $rootScope, $interval
             $scope.statsSensors = GlancesStats.getPlugin('sensors');
             $scope.statsSystem = GlancesStats.getPlugin('system');
             $scope.statsUptime = GlancesStats.getPlugin('uptime');
+            $scope.statsPorts = GlancesStats.getPlugin('ports');
 
             $rootScope.title = $scope.statsSystem.hostname + ' - Glances';