Fix duplicated containers and wifi style in the webui

glances/outputs/static/js/components/glances/view.html

@@ -60,22 +60,15 @@
         <div class="row">
             <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"
+                    <glances-plugin-network id="plugin-network" class="plugin table-row-group" ng-if="!vm.arguments.disable_network"></glances-plugin-network>
-                                            ng-if="!vm.arguments.disable_network"></glances-plugin-network>
+                    <glances-plugin-wifi id="plugin-wifi" class="plugin table-row-group" ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>
-                    <glances-plugin-wifi id="plugin-wifi" class="plugin table-row-group"
+                    <glances-plugin-ports id="plugin-ports" class="plugin table-row-group" ng-if="!vm.arguments.disable_ports"></glances-plugin-ports>
-                                         ng-if="!vm.arguments.disable_wifi"></glances-plugin-wifi>
+                    <glances-plugin-diskio id="plugin-diskio" class="plugin table-row-group" ng-if="!vm.arguments.disable_diskio"></glances-plugin-diskio>
-                    <glances-plugin-ports id="plugin-ports" class="plugin table-row-group"
+                    <glances-plugin-fs id="plugin-fs" class="plugin table-row-group" ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>
-                                          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>
-                    <glances-plugin-fs id="plugin-fs" class="plugin table-row-group"
-                                       ng-if="!vm.arguments.disable_fs"></glances-plugin-fs>
                     <glances-plugin-irq id="plugin-irq" ng-if="vm.arguments.enable_irq"></glances-plugin-irq>
-                    <glances-plugin-folders id="plugin-folders"
+                    <glances-plugin-folders id="plugin-folders" ng-if="!vm.arguments.disable_folders"></glances-plugin-folders>
-                                            ng-if="!vm.arguments.disable_folders"></glances-plugin-folders>
                     <glances-plugin-raid id="plugin-raid" ng-if="!vm.arguments.raid"></glances-plugin-raid>
-                    <glances-plugin-sensors id="plugin-sensors"
+                    <glances-plugin-sensors id="plugin-sensors" ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>
-                                            ng-if="!vm.arguments.disable_sensors"></glances-plugin-sensors>
                 </div>
             </div>
             <div class="col-sm-18">

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

@@ -15,13 +15,13 @@ function GlancesPluginAmpsController($scope, GlancesStats, favicoService) {
     var loadData = function (data) {
         var processes = data.stats['amps'];
 
-        this.processes = [];
+        vm.processes = [];
         angular.forEach(processes, function (process) {
             if (process.result !== null) {
-                this.processes.push(process);
+                vm.processes.push(process);
             }
         }, this);
-    }
+    };
 
     vm.getDescriptionDecoration = function (process) {
         var count = process.count;
@@ -30,13 +30,13 @@ function GlancesPluginAmpsController($scope, GlancesStats, favicoService) {
         var decoration = "ok";
 
         if (count > 0) {
-            if ((countMin == null || count >= countMin) && (countMax == null || count <= countMax)) {
+            if ((countMin === null || count >= countMin) && (countMax === null || count <= countMax)) {
                 decoration = 'ok';
             } else {
                 decoration = 'careful';
             }
         } else {
-            decoration = countMin == null ? 'ok' : 'critical';
+            decoration = countMin === null ? 'ok' : 'critical';
         }
 
         return decoration;

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

@@ -55,7 +55,7 @@ function GlancesPluginCpuController($scope, GlancesStats) {
         }
     }
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }

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

@@ -14,15 +14,13 @@ function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS)
     });
 
     var loadData = function (data) {
-        var stats = data.stats['diskio'];
+        var stats = data.stats['diskio'] || [];
         stats = $filter('orderBy')(stats, 'disk_name');
 
-        vm.disks = [];
+        vm.disks = stats.map(function(diskioData) {
-        for (var i = 0; i < stats.length; i++) {
-            var diskioData = stats[i];
             var timeSinceUpdate = diskioData['time_since_update'];
 
-            vm.disks.push({
+            return {
                 'name': diskioData['disk_name'],
                 'bitrate': {
                     'txps': $filter('bytes')(diskioData['read_bytes'] / timeSinceUpdate),
@@ -33,7 +31,7 @@ function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS)
                     'rxps': $filter('bytes')(diskioData['write_count'] / timeSinceUpdate)
                 },
                 'alias': diskioData['alias'] !== undefined ? diskioData['alias'] : null
+            };
         });
     }
 }
-}

glances/outputs/static/js/components/plugin-diskio/view.html

@@ -6,7 +6,7 @@
     <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 track by name">
+<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>

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

@@ -15,16 +15,14 @@ function GlancesPluginDockerController($scope, GlancesStats) {
 
     var loadData = function (data) {
         var stats = data.stats['docker'];
-        this.containers = [];
+        vm.containers = [];
 
         if (_.isEmpty(stats)) {
             return;
         }
 
-        for (var i = 0; i < stats['containers'].length; i++) {
+        vm.containers = stats['containers'].map(function(containerData) {
-            var containerData = stats['containers'][i];
+            return {
-
-            var container = {
                 'id': containerData.Id,
                 'name': containerData.Names[0].split('/').splice(-1)[0],
                 'status': containerData.Status,
@@ -39,9 +37,7 @@ function GlancesPluginDockerController($scope, GlancesStats) {
                 'command': containerData.Command,
                 'image': containerData.Image
             };
-
+        });
-            vm.containers.push(container);
-        }
 
         vm.version = stats['version']['Version'];
     }

glances/outputs/static/js/components/plugin-docker/view.html

@@ -1,4 +1,4 @@
-<section id="containers" class="plugin" ng-if="vm.containers.length">
+<section id="containers-plugin" class="plugin" ng-if="vm.containers.length">
     <span class="title">CONTAINERS</span> {{ vm.containers.length }} (served by Docker {{ vm.version }})
 
     <div class="table">
@@ -13,7 +13,7 @@
             <div class="table-cell">TX/s</div>
             <div class="table-cell text-left">Command</div>
         </div>
-        <div class="table-row" ng-repeat="container in vm.containers">
+        <div class="table-row" ng-repeat="container in vm.containers track by container.id">
             <div class="table-cell text-left">{{ container.name }}</div>
             <div class="table-cell" ng-class="container.status == 'Paused' ? 'careful' : 'ok'">{{ container.status }}
             </div>

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

@@ -25,9 +25,9 @@ function GlancesPluginLoadController($scope, GlancesStats) {
         vm.min1 = stats['min1'];
         vm.min5 = stats['min5'];
         vm.min15 = stats['min15'];
-    }
+    };
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }

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

@@ -27,7 +27,7 @@ function GlancesPluginMemController($scope, GlancesStats) {
         vm.free = stats['free'];
     }
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }

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

@@ -25,9 +25,9 @@ function GlancesPluginMemswapController($scope, GlancesStats) {
         vm.total = stats['total'];
         vm.used = stats['used'];
         vm.free = stats['free'];
-    }
+    };
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }

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

@@ -39,9 +39,9 @@ function GlancesPluginQuicklookController($scope, GlancesStats, ARGUMENTS) {
                 'total': cpu.total
             });
         }, this);
-    }
+    };
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }

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

@@ -40,11 +40,11 @@ function GlancesPluginRaidController($scope, GlancesStats) {
         });
 
         vm.disks = disks;
-    }
+    };
 
     vm.hasDisks = function () {
-        return this.disks.length > 0;
+        return vm.disks.length > 0;
-    }
+    };
 
     vm.getAlert = function (disk) {
         if (disk.inactive) {
@@ -56,5 +56,5 @@ function GlancesPluginRaidController($scope, GlancesStats) {
         }
 
         return 'ok'
-    }
+    };
 }

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

@@ -20,7 +20,7 @@ function GlancesPluginSensorsController($scope, GlancesStats, GlancesPluginHelpe
         });
 
         vm.sensors = data;
-    }
+    };
 
     vm.getAlert = function (sensor) {
         var current = sensor.type == 'battery' ? 100 - sensor.value : sensor.value;

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

@@ -17,6 +17,7 @@ function GlancesPluginWifiController($scope, $filter, GlancesStats) {
     var loadData = function (data) {
         var stats = data.stats['wifi'];
         _view = data.views['wifi'];
+        //stats = [{"ssid": "Freebox-40A258", "encrypted": true, "signal": -45, "key": "ssid", "encryption_type": "wpa2", "quality": "65/70"}];
 
         vm.hotspots = [];
         for (var i = 0; i < stats.length; i++) {
@@ -35,10 +36,10 @@ function GlancesPluginWifiController($scope, $filter, GlancesStats) {
         }
 
         vm.hotspots = $filter('orderBy')(vm.hotspots, 'ssid');
-    }
+    };
 
     vm.getDecoration = function (hotpost, field) {
-        if (_view[hotpost.ssid][field] == undefined) {
+        if (_view[hotpost.ssid][field] === undefined) {
             return;
         }
 

glances/outputs/static/js/components/plugin-wifi/view.html

@@ -1,13 +1,11 @@
-<section id="wifi" class="plugin table-row-group" ng-if="vm.hotspots.length > 0">
+<div class="table-row" 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 track by ssid">
+<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>

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

@@ -637,13 +637,13 @@ function GlancesPluginAmpsController($scope, GlancesStats, favicoService) {
     var loadData = function (data) {
         var processes = data.stats['amps'];
 
-        this.processes = [];
+        vm.processes = [];
         angular.forEach(processes, function (process) {
             if (process.result !== null) {
-                this.processes.push(process);
+                vm.processes.push(process);
             }
         }, this);
-    }
+    };
 
     vm.getDescriptionDecoration = function (process) {
         var count = process.count;
@@ -652,13 +652,13 @@ function GlancesPluginAmpsController($scope, GlancesStats, favicoService) {
         var decoration = "ok";
 
         if (count > 0) {
-            if ((countMin == null || count >= countMin) && (countMax == null || count <= countMax)) {
+            if ((countMin === null || count >= countMin) && (countMax === null || count <= countMax)) {
                 decoration = 'ok';
             } else {
                 decoration = 'careful';
             }
         } else {
-            decoration = countMin == null ? 'ok' : 'critical';
+            decoration = countMin === null ? 'ok' : 'critical';
         }
 
         return decoration;
@@ -764,7 +764,7 @@ function GlancesPluginCpuController($scope, GlancesStats) {
         }
     }
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }
@@ -797,15 +797,13 @@ function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS)
     });
 
     var loadData = function (data) {
-        var stats = data.stats['diskio'];
+        var stats = data.stats['diskio'] || [];
         stats = $filter('orderBy')(stats, 'disk_name');
 
-        vm.disks = [];
+        vm.disks = stats.map(function(diskioData) {
-        for (var i = 0; i < stats.length; i++) {
-            var diskioData = stats[i];
             var timeSinceUpdate = diskioData['time_since_update'];
 
-            vm.disks.push({
+            return {
                 'name': diskioData['disk_name'],
                 'bitrate': {
                     'txps': $filter('bytes')(diskioData['read_bytes'] / timeSinceUpdate),
@@ -816,10 +814,10 @@ function GlancesPluginDiskioController($scope, $filter, GlancesStats, ARGUMENTS)
                     'rxps': $filter('bytes')(diskioData['write_count'] / timeSinceUpdate)
                 },
                 'alias': diskioData['alias'] !== undefined ? diskioData['alias'] : null
+            };
         });
     }
 }
-}
 
 'use strict';
 
@@ -846,16 +844,14 @@ function GlancesPluginDockerController($scope, GlancesStats) {
 
     var loadData = function (data) {
         var stats = data.stats['docker'];
-        this.containers = [];
+        vm.containers = [];
 
         if (_.isEmpty(stats)) {
             return;
         }
 
-        for (var i = 0; i < stats['containers'].length; i++) {
+        vm.containers = stats['containers'].map(function(containerData) {
-            var containerData = stats['containers'][i];
+            return {
-
-            var container = {
                 'id': containerData.Id,
                 'name': containerData.Names[0].split('/').splice(-1)[0],
                 'status': containerData.Status,
@@ -870,9 +866,7 @@ function GlancesPluginDockerController($scope, GlancesStats) {
                 'command': containerData.Command,
                 'image': containerData.Image
             };
-
+        });
-            vm.containers.push(container);
-        }
 
         vm.version = stats['version']['Version'];
     }
@@ -1186,9 +1180,9 @@ function GlancesPluginLoadController($scope, GlancesStats) {
         vm.min1 = stats['min1'];
         vm.min5 = stats['min5'];
         vm.min15 = stats['min15'];
-    }
+    };
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }
@@ -1234,7 +1228,7 @@ function GlancesPluginMemController($scope, GlancesStats) {
         vm.free = stats['free'];
     }
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }
@@ -1314,9 +1308,9 @@ function GlancesPluginMemswapController($scope, GlancesStats) {
         vm.total = stats['total'];
         vm.used = stats['used'];
         vm.free = stats['free'];
-    }
+    };
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }
@@ -1327,54 +1321,6 @@ function GlancesPluginMemswapController($scope, GlancesStats) {
 
 'use strict';
 
-glancesApp.component('glancesPluginNetwork', {
-    controller: GlancesPluginNetworkController,
-    controllerAs: 'vm',
-    templateUrl: 'components/plugin-network/view.html'
-});
-
-'use strict';
-
-function GlancesPluginNetworkController($scope, $filter, GlancesStats, ARGUMENTS) {
-    var vm = this;
-    vm.arguments = ARGUMENTS;
-    vm.networks = [];
-
-    vm.$onInit = function () {
-        loadData(GlancesStats.getData());
-    };
-
-    $scope.$on('data_refreshed', function (event, data) {
-        loadData(data);
-    });
-
-    var loadData = function (data) {
-        var networkStats = data.stats['network'];
-
-        vm.networks = [];
-        for (var i = 0; i < networkStats.length; i++) {
-            var networkData = networkStats[i];
-
-            var network = {
-                'interfaceName': networkData['interface_name'],
-                'rx': networkData['rx'],
-                'tx': networkData['tx'],
-                'cx': networkData['cx'],
-                'time_since_update': networkData['time_since_update'],
-                'cumulativeRx': networkData['cumulative_rx'],
-                'cumulativeTx': networkData['cumulative_tx'],
-                'cumulativeCx': networkData['cumulative_cx']
-            };
-
-            vm.networks.push(network);
-        }
-
-        vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
-    }
-}
-
-'use strict';
-
 glancesApp.component('glancesPluginPercpu', {
     controller: GlancesPluginPercpuController,
     controllerAs: 'vm',
@@ -1426,6 +1372,54 @@ function GlancesPluginPercpuController($scope, GlancesStats, GlancesPluginHelper
 
 'use strict';
 
+glancesApp.component('glancesPluginNetwork', {
+    controller: GlancesPluginNetworkController,
+    controllerAs: 'vm',
+    templateUrl: 'components/plugin-network/view.html'
+});
+
+'use strict';
+
+function GlancesPluginNetworkController($scope, $filter, GlancesStats, ARGUMENTS) {
+    var vm = this;
+    vm.arguments = ARGUMENTS;
+    vm.networks = [];
+
+    vm.$onInit = function () {
+        loadData(GlancesStats.getData());
+    };
+
+    $scope.$on('data_refreshed', function (event, data) {
+        loadData(data);
+    });
+
+    var loadData = function (data) {
+        var networkStats = data.stats['network'];
+
+        vm.networks = [];
+        for (var i = 0; i < networkStats.length; i++) {
+            var networkData = networkStats[i];
+
+            var network = {
+                'interfaceName': networkData['interface_name'],
+                'rx': networkData['rx'],
+                'tx': networkData['tx'],
+                'cx': networkData['cx'],
+                'time_since_update': networkData['time_since_update'],
+                'cumulativeRx': networkData['cumulative_rx'],
+                'cumulativeTx': networkData['cumulative_tx'],
+                'cumulativeCx': networkData['cumulative_cx']
+            };
+
+            vm.networks.push(network);
+        }
+
+        vm.networks = $filter('orderBy')(vm.networks, 'interfaceName');
+    }
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginPorts', {
     controller: GlancesPluginPortsController,
     controllerAs: 'vm',
@@ -1742,9 +1736,9 @@ function GlancesPluginQuicklookController($scope, GlancesStats, ARGUMENTS) {
                 'total': cpu.total
             });
         }, this);
-    }
+    };
 
-    this.getDecoration = function (value) {
+    vm.getDecoration = function (value) {
         if (_view[value] === undefined) {
             return;
         }
@@ -1803,11 +1797,11 @@ function GlancesPluginRaidController($scope, GlancesStats) {
         });
 
         vm.disks = disks;
-    }
+    };
 
     vm.hasDisks = function () {
-        return this.disks.length > 0;
+        return vm.disks.length > 0;
-    }
+    };
 
     vm.getAlert = function (disk) {
         if (disk.inactive) {
@@ -1819,7 +1813,7 @@ function GlancesPluginRaidController($scope, GlancesStats) {
         }
 
         return 'ok'
-    }
+    };
 }
 
 'use strict';
@@ -1852,7 +1846,7 @@ function GlancesPluginSensorsController($scope, GlancesStats, GlancesPluginHelpe
         });
 
         vm.sensors = data;
-    }
+    };
 
     vm.getAlert = function (sensor) {
         var current = sensor.type == 'battery' ? 100 - sensor.value : sensor.value;
@@ -1960,6 +1954,7 @@ function GlancesPluginWifiController($scope, $filter, GlancesStats) {
     var loadData = function (data) {
         var stats = data.stats['wifi'];
         _view = data.views['wifi'];
+        //stats = [{"ssid": "Freebox-40A258", "encrypted": true, "signal": -45, "key": "ssid", "encryption_type": "wpa2", "quality": "65/70"}];
 
         vm.hotspots = [];
         for (var i = 0; i < stats.length; i++) {
@@ -1978,10 +1973,10 @@ function GlancesPluginWifiController($scope, $filter, GlancesStats) {
         }
 
         vm.hotspots = $filter('orderBy')(vm.hotspots, 'ssid');
-    }
+    };
 
     vm.getDecoration = function (hotpost, field) {
-        if (_view[hotpost.ssid][field] == undefined) {
+        if (_view[hotpost.ssid][field] === undefined) {
             return;
         }