Re-implement docker plugin in the webui

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

+'use strict';
+
+glancesApp.component('glancesPluginDocker', {
+    controller: GlancesPluginDockerController,
+    controllerAs: 'vm',
+    templateUrl: 'components/plugin-docker/view.html'
+});

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

+'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'];
+    });
+}

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

+<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>