Re-implement docker plugin in the webui

5 files changed, 125 insertions, 0 deletions

diff --git a/glances/outputs/static/js/components/plugin-docker/component.js b/glances/outputs/static/js/components/plugin-docker/component.js
new file mode 100644
index 00000000..8ca79a72
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-docker/component.js
@@ -0,0 +1,7 @@
+'use strict';
+
+glancesApp.component('glancesPluginDocker', {
+    controller: GlancesPluginDockerController,
+    controllerAs: 'vm',
+    templateUrl: 'components/plugin-docker/view.html'
+});
diff --git a/glances/outputs/static/js/components/plugin-docker/controller.js b/glances/outputs/static/js/components/plugin-docker/controller.js
new file mode 100644
index 00000000..3785050e
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-docker/controller.js
@@ -0,0 +1,40 @@
+'use strict';
+
+function GlancesPluginDockerController($scope) {
+    var vm = this;
+    vm.containers = [];
+    vm.version = null;
+
+    $scope.$on('data_refreshed', function(event, data) {
+      var stats = data.stats['docker'];
+      this.containers = [];
+
+      if(_.isEmpty(stats)) {
+          return;
+      }
+
+      for (var i = 0; i < stats['containers'].length; i++) {
+          var containerData = stats['containers'][i];
+
+          var container = {
+              'id': containerData.Id,
+              'name': containerData.Names[0].split('/').splice(-1)[0],
+              'status': containerData.Status,
+              'cpu': containerData.cpu.total,
+              'memory': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
+              'ior': containerData.io.ior != undefined ? containerData.io.ior : '?',
+              'iow': containerData.io.iow != undefined ? containerData.io.iow : '?',
+              'io_time_since_update': containerData.io.time_since_update,
+              'rx': containerData.network.rx != undefined ? containerData.network.rx : '?',
+              'tx': containerData.network.tx != undefined ? containerData.network.tx : '?',
+              'net_time_since_update': containerData.network.time_since_update,
+              'command': containerData.Command,
+              'image': containerData.Image
+          };
+
+          vm.containers.push(container);
+      }
+
+      vm.version = stats['version']['Version'];
+    });
+}
diff --git a/glances/outputs/static/js/components/plugin-docker/view.html b/glances/outputs/static/js/components/plugin-docker/view.html
new file mode 100644
index 00000000..b22b8e4b
--- /dev/null
+++ b/glances/outputs/static/js/components/plugin-docker/view.html
@@ -0,0 +1,28 @@
+<section id="containers" class="plugin" ng-show="vm.containers.length">
+  <span class="title">CONTAINERS</span> {{ vm.containers.length }} (served by Docker {{ vm.version }})
+
+  <div class="table">
+      <div class="table-row">
+          <div class="table-cell text-left">Name</div>
+          <div class="table-cell">Status</div>
+          <div class="table-cell">CPU%</div>
+          <div class="table-cell">MEM</div>
+          <div class="table-cell">IOR/s</div>
+          <div class="table-cell">IOW/s</div>
+          <div class="table-cell">RX/s</div>
+          <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-cell text-left">{{ container.name }}</div>
+          <div class="table-cell" ng-class="container.status == 'Paused' ? 'careful' : 'ok'">{{ container.status }}</div>
+          <div class="table-cell">{{ container.cpu | number:1 }}</div>
+          <div class="table-cell">{{ container.memory | bytes }}</div>
+          <div class="table-cell">{{ container.ior / container.io_time_since_update | bits }}</div>
+          <div class="table-cell">{{ container.iow / container.io_time_since_update | bits }}</div>
+          <div class="table-cell">{{ container.rx / container.net_time_since_update | bits }}</div>
+          <div class="table-cell">{{ container.tx / container.net_time_since_update | bits }}</div>
+          <div class="table-cell text-left">{{ container.command }}</div>
+      </div>
+  </div>
+</section>
diff --git a/glances/outputs/static/public/js/main.min.js b/glances/outputs/static/public/js/main.min.js
index 4a7e0f1e..97baf8c6 100644
--- a/glances/outputs/static/public/js/main.min.js
+++ b/glances/outputs/static/public/js/main.min.js
@@ -787,6 +787,55 @@ function GlancesPluginDiskioController($scope, $filter, ARGUMENTS) {
 
 'use strict';
 
+glancesApp.component('glancesPluginDocker', {
+    controller: GlancesPluginDockerController,
+    controllerAs: 'vm',
+    templateUrl: 'components/plugin-docker/view.html'
+});
+
+'use strict';
+
+function GlancesPluginDockerController($scope) {
+    var vm = this;
+    vm.containers = [];
+    vm.version = null;
+
+    $scope.$on('data_refreshed', function(event, data) {
+      var stats = data.stats['docker'];
+      this.containers = [];
+
+      if(_.isEmpty(stats)) {
+          return;
+      }
+
+      for (var i = 0; i < stats['containers'].length; i++) {
+          var containerData = stats['containers'][i];
+
+          var container = {
+              'id': containerData.Id,
+              'name': containerData.Names[0].split('/').splice(-1)[0],
+              'status': containerData.Status,
+              'cpu': containerData.cpu.total,
+              'memory': containerData.memory.usage != undefined ? containerData.memory.usage : '?',
+              'ior': containerData.io.ior != undefined ? containerData.io.ior : '?',
+              'iow': containerData.io.iow != undefined ? containerData.io.iow : '?',
+              'io_time_since_update': containerData.io.time_since_update,
+              'rx': containerData.network.rx != undefined ? containerData.network.rx : '?',
+              'tx': containerData.network.tx != undefined ? containerData.network.tx : '?',
+              'net_time_since_update': containerData.network.time_since_update,
+              'command': containerData.Command,
+              'image': containerData.Image
+          };
+
+          vm.containers.push(container);
+      }
+
+      vm.version = stats['version']['Version'];
+    });
+}
+
+'use strict';
+
 glancesApp.component('glancesPluginFs', {
     controller: GlancesPluginFsController,
     controllerAs: 'vm',
diff --git a/glances/outputs/static/public/js/templates.min.js b/glances/outputs/static/public/js/templates.min.js
index ab382d4c..b9a00fae 100644
--- a/glances/outputs/static/public/js/templates.min.js
+++ b/glances/outputs/static/public/js/templates.min.js
@@ -5,6 +5,7 @@ $templateCache.put('components/plugin-amps/view.html','<section id="alerts">\n
 $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','<div class="table-row" ng-show="vm.disks.length > 0">\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 track by name">\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');
+$templateCache.put('components/plugin-docker/view.html','<section id="containers" class="plugin" ng-show="vm.containers.length">\n  <span class="title">CONTAINERS</span> {{ vm.containers.length }} (served by Docker {{ vm.version }})\n\n  <div class="table">\n      <div class="table-row">\n          <div class="table-cell text-left">Name</div>\n          <div class="table-cell">Status</div>\n          <div class="table-cell">CPU%</div>\n          <div class="table-cell">MEM</div>\n          <div class="table-cell">IOR/s</div>\n          <div class="table-cell">IOW/s</div>\n          <div class="table-cell">RX/s</div>\n          <div class="table-cell">TX/s</div>\n          <div class="table-cell text-left">Command</div>\n      </div>\n      <div class="table-row" ng-repeat="container in vm.containers">\n          <div class="table-cell text-left">{{ container.name }}</div>\n          <div class="table-cell" ng-class="container.status == \'Paused\' ? \'careful\' : \'ok\'">{{ container.status }}</div>\n          <div class="table-cell">{{ container.cpu | number:1 }}</div>\n          <div class="table-cell">{{ container.memory | bytes }}</div>\n          <div class="table-cell">{{ container.ior / container.io_time_since_update | bits }}</div>\n          <div class="table-cell">{{ container.iow / container.io_time_since_update | bits }}</div>\n          <div class="table-cell">{{ container.rx / container.net_time_since_update | bits }}</div>\n          <div class="table-cell">{{ container.tx / container.net_time_since_update | bits }}</div>\n          <div class="table-cell text-left">{{ container.command }}</div>\n      </div>\n  </div>\n</section>\n');
 $templateCache.put('components/plugin-fs/view.html','<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');
 $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');