feat(docker): new docker view (#292)

app/components/docker/docker.html

@@ -3,139 +3,113 @@
     <a data-toggle="tooltip" title="Refresh" ui-sref="docker" ui-sref-opts="{reload: true}">
       <i class="fa fa-refresh" aria-hidden="true"></i>
     </a>
+    <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
   <rd-header-content>Docker</rd-header-content>
 </rd-header>
-<div class="row">
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon pull-left">
-          <i class="fa fa-code"></i>
-        </div>
-        <div class="title">{{ docker.Version }}</div>
-        <div class="comment">Docker version</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon pull-left">
-          <i class="fa fa-code"></i>
-        </div>
-        <div class="title">{{ docker.ApiVersion }}</div>
-        <div class="comment">API version</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-  <div class="col-lg-3 col-md-6 col-xs-12">
-    <rd-widget>
-      <rd-widget-body>
-        <div class="widget-icon pull-left">
-          <i class="fa fa-code"></i>
-        </div>
-        <div class="title">{{ docker.GoVersion }}</div>
-        <div class="comment">Go version</div>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
 
-<div class="row">
+<div class="row" ng-if="state.loaded">
-  <div class="col-lg-12">
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
     <rd-widget>
-      <rd-widget-header icon="fa-object-group" title="Engine status"></rd-widget-header>
+      <rd-widget-header icon="fa-code" title="Engine version"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <table class="table">
           <tbody>
             <tr>
-              <td>Containers</td>
+              <td>Version</td>
-              <td>{{ info.Containers }}</td>
+              <td>{{ version.Version }}</td>
             </tr>
             <tr>
-              <td>Images</td>
+              <td>API version</td>
-              <td>{{ info.Images }}</td>
+              <td>{{ version.ApiVersion }}</td>
             </tr>
             <tr>
-              <td>Debug</td>
+              <td>Go version</td>
-              <td>{{ info.Debug }}</td>
+              <td>{{ version.GoVersion }}</td>
             </tr>
             <tr>
-              <td>CPUs</td>
+              <td>OS type</td>
-              <td>{{ info.NCPU }}</td>
+              <td>{{ version.Os }}</td>
             </tr>
             <tr>
-              <td>Total Memory</td>
+              <td>OS</td>
-              <td>{{ info.MemTotal|humansize }}</td>
-            </tr>
-            <tr>
-              <td>Operating System</td>
               <td>{{ info.OperatingSystem }}</td>
             </tr>
             <tr>
-              <td>Kernel Version</td>
+              <td>Architecture</td>
-              <td>{{ info.KernelVersion }}</td>
+              <td>{{ version.Arch }}</td>
             </tr>
             <tr>
-              <td>ID</td>
+              <td>Kernel version</td>
-              <td>{{ info.ID }}</td>
+              <td>{{ version.KernelVersion }}</td>
-            </tr>
+            </tr>
-            <tr>
+          </tbody>
-              <td>Labels</td>
+        </table>
-              <td>{{ info.Labels }}</td>
+      </rd-widget-body>
-            </tr>
+    </rd-widget>
-            <tr>
+  </div>
-              <td>File Descriptors</td>
+</div>
-              <td>{{ info.NFd }}</td>
+
-            </tr>
+<div class="row" ng-if="state.loaded">
-            <tr>
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-              <td>Goroutines</td>
+    <rd-widget>
-              <td>{{ info.NGoroutines }}</td>
+      <rd-widget-header icon="fa-th" title="Engine status"></rd-widget-header>
-            </tr>
+      <rd-widget-body classes="no-padding">
-            <tr>
+        <table class="table">
-              <td>Storage Driver</td>
+          <tbody>
-              <td>{{ info.Driver }}</td>
+            <tr>
-            </tr>
+              <td>Total CPU</td>
-            <tr>
+              <td>{{ info.NCPU }}</td>
-              <td>Storage Driver Status</td>
+            </tr>
-              <td>
+            <tr>
-                <p ng-repeat="val in info.DriverStatus">
+              <td>Total memory</td>
-                  {{ val[0] }}: {{ val[1] }}
+              <td>{{ info.MemTotal|humansize }}</td>
-                </p>
+            </tr>
-              </td>
+            <tr>
-            </tr>
+              <td>Docker root directory</td>
-            <tr>
+              <td>{{ info.DockerRootDir }}</td>
-              <td>Execution Driver</td>
+            </tr>
-              <td>{{ info.ExecutionDriver }}</td>
+            <tr>
-            </tr>
+              <td>Storage driver</td>
-            <tr>
+              <td>{{ info.Driver }}</td>
-              <td>IPv4 Forwarding</td>
+            </tr>
-              <td>{{ info.IPv4Forwarding }}</td>
+            <tr>
-            </tr>
+              <td>Logging driver</td>
-            <tr>
+              <td>{{ info.LoggingDriver }}</td>
-              <td>Index Server Address</td>
+            </tr>
-              <td>{{ info.IndexServerAddress }}</td>
+            <tr ng-if="info.CgroupDriver">
-            </tr>
+              <td>Cgroup driver</td>
-            <tr>
+              <td>{{ info.CgroupDriver }}</td>
-              <td>Init Path</td>
+            </tr>
-              <td>{{ info.InitPath }}</td>
+            <tr ng-if="info.ExecutionDriver">
-            </tr>
+              <td>Execution driver</td>
-            <tr>
+              <td>{{ info.ExecutionDriver }}</td>
-              <td>Docker Root Directory</td>
+            </tr>
-              <td>{{ info.DockerRootDir }}</td>
+          </tbody>
-            </tr>
+        </table>
-            <tr>
+      </rd-widget-body>
-              <td>Init SHA1</td>
+    </rd-widget>
-              <td>{{ info.InitSha1 }}</td>
+  </div>
-            </tr>
+</div>
-            <tr>
+
-              <td>Memory Limit</td>
+<div class="row" ng-if="state.loaded && info.Plugins">
-              <td>{{ info.MemoryLimit }}</td>
+  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
-            </tr>
+    <rd-widget>
-            <tr>
+      <rd-widget-header icon="fa-plug" title="Engine plugins"></rd-widget-header>
-              <td>Swap Limit</td>
+      <rd-widget-body classes="no-padding">
-              <td>{{ info.SwapLimit }}</td>
+        <table class="table">
+          <tbody>
+            <tr ng-if="info.Plugins.Volume">
+              <td>Volume</td>
+              <td>{{ info.Plugins.Volume|arraytostr: ', '}}</td>
+            </tr>
+            <tr ng-if="info.Plugins.Network">
+              <td>Network</td>
+              <td>{{ info.Plugins.Network|arraytostr: ', '}}</td>
+            </tr>
+            <tr ng-if="info.Plugins.Authorization">
+              <td>Authorization</td>
+              <td>{{ info.Plugins.Authorization|arraytostr: ', '}}</td>
             </tr>
           </tbody>
         </table>

app/components/docker/dockerController.js

@@ -1,19 +1,24 @@
 angular.module('docker', [])
-.controller('DockerController', ['$scope', 'Info', 'Version', 'Settings',
+.controller('DockerController', ['$scope', 'Info', 'Version', 'Messages',
-function ($scope, Info, Version, Settings) {
+function ($scope, Info, Version, Messages) {
-
+  $scope.state = {
-  $scope.info = {};
+    loaded: false
-  $scope.docker = {};
-  
-  $scope.order = function(sortType) {
-    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
-    $scope.sortType = sortType;
   };
+  $scope.info = {};
+  $scope.version = {};
 
-  Version.get({}, function (d) {
+  Info.get({}, function (infoData) {
-    $scope.docker = d;
+    $scope.info = infoData;
-  });
+    Version.get({}, function (versionData) {
-  Info.get({}, function (d) {
+      $scope.version = versionData;
-    $scope.info = d;
+      $scope.state.loaded = true;
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      Messages.error("Failure", e, 'Unable to retrieve engine details');
+      $('#loadingViewSpinner').hide();
+    });
+  }, function (e) {
+    Messages.error("Failure", e, 'Unable to retrieve engine information');
+    $('#loadingViewSpinner').hide();
   });
 }]);

app/shared/filters.js

@@ -213,4 +213,13 @@ angular.module('portainer.filters', [])
   return function (ip) {
     return ip.slice(0, ip.indexOf('/'));
   };
+})
+.filter('arraytostr', function () {
+  'use strict';
+  return function (arr, separator) {
+    if (arr) {
+      return _.join(arr, separator);
+    }
+    return '';
+  };
 });

index.html

@@ -66,7 +66,7 @@
           <a ui-sref="swarm">Swarm <span class="menu-icon fa fa-object-group"></span></a>
         </li>
         <li class="sidebar-list" ng-if="!swarm">
-          <a ui-sref="docker">Docker <span class="menu-icon fa fa-cogs"></span></a>
+          <a ui-sref="docker">Docker <span class="menu-icon fa fa-th"></span></a>
         </li>
       </ul>
       <div class="sidebar-footer">