From 85a07237b1d435984cb8d70783e8721b530b7345 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Mon, 13 Feb 2017 22:39:02 +1300
Subject: [PATCH] =?UTF-8?q?feat(swarm):=20display=20the=20IP=20address=20o?=
 =?UTF-8?q?f=20each=20node=20when=20API=20Version=20>=3D=20=E2=80=A6=20(#5?=
 =?UTF-8?q?95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/swarm/swarm.html         | 56 ++++++++++++++-----------
 app/components/swarm/swarmController.js |  4 +-
 app/models/node.js                      |  4 ++
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/app/components/swarm/swarm.html b/app/components/swarm/swarm.html
index 661dbd710..5bead69b7 100644
--- a/app/components/swarm/swarm.html
+++ b/app/components/swarm/swarm.html
@@ -163,57 +163,65 @@
           <thead>
             <tr>
               <th>
-                <a ui-sref="swarm" ng-click="order('Description.Hostname')">
+                <a ui-sref="swarm" ng-click="order('Hostname')">
                   Name
-                  <span ng-show="sortType == 'Description.Hostname' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Description.Hostname' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <span ng-show="sortType == 'Hostname' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Hostname' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="swarm" ng-click="order('Spec.Role')">
+                <a ui-sref="swarm" ng-click="order('Role')">
                   Role
-                  <span ng-show="sortType == 'Spec.Role' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Spec.Role' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <span ng-show="sortType == 'Role' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Role' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="swarm" ng-click="order('Description.Resources.NanoCPUs')">
+                <a ui-sref="swarm" ng-click="order('CPUs')">
                   CPU
-                  <span ng-show="sortType == 'Description.Resources.NanoCPUs' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Description.Resources.NanoCPUs' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <span ng-show="sortType == 'CPUs' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'CPUs' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="swarm" ng-click="order('Description.Resources.MemoryBytes')">
+                <a ui-sref="swarm" ng-click="order('Memory')">
                   Memory
-                  <span ng-show="sortType == 'Description.Resources.MemoryBytes' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Description.Resources.MemoryBytes' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <span ng-show="sortType == 'Memory' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Memory' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="swarm" ng-click="order('Description.Engine.EngineVersion')">
+                <a ui-sref="swarm" ng-click="order('EngineVersion')">
                   Engine
-                  <span ng-show="sortType == 'Description.Engine.EngineVersion' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Description.Engine.EngineVersion' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <span ng-show="sortType == 'EngineVersion' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'EngineVersion' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
+              <th ng-if="applicationState.endpoint.apiVersion >= 1.25">
+                <a ui-sref="swarm" ng-click="order('Addr')">
+                  IP Address
+                  <span ng-show="sortType == 'Addr' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Addr' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
               <th>
-                <a ui-sref="swarm" ng-click="order('node.Status.State')">
+                <a ui-sref="swarm" ng-click="order('Status')">
                   Status
-                  <span ng-show="sortType == 'node.Status.State' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'node.Status.State' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  <span ng-show="sortType == 'Status' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Status' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
             </tr>
           </thead>
           <tbody>
             <tr dir-paginate="node in (state.filteredNodes = (nodes | filter:state.filter | orderBy:sortType:sortReverse | itemsPerPage: state.pagination_count))">
-              <td><a ui-sref="node({id: node.ID})">{{ node.Description.Hostname }}</a></td>
-              <td>{{ node.Spec.Role }}</td>
-              <td>{{ node.Description.Resources.NanoCPUs / 1000000000 }}</td>
-              <td>{{ node.Description.Resources.MemoryBytes|humansize }}</td>
-              <td>{{ node.Description.Engine.EngineVersion }}</td>
-              <td><span class="label label-{{ node.Status.State|nodestatusbadge }}">{{ node.Status.State }}</span></td>
+              <td><a ui-sref="node({id: node.ID})">{{ node.Hostname }}</a></td>
+              <td>{{ node.Role }}</td>
+              <td>{{ node.CPUs / 1000000000 }}</td>
+              <td>{{ node.Memory|humansize }}</td>
+              <td>{{ node.EngineVersion }}</td>
+              <td ng-if="applicationState.endpoint.apiVersion >= 1.25">{{ node.Addr }}</td>
+              <td><span class="label label-{{ node.Status|nodestatusbadge }}">{{ node.Status }}</span></td>
             </tr>
           </tbody>
         </table>
diff --git a/app/components/swarm/swarmController.js b/app/components/swarm/swarmController.js
index 713db07ef..4855caf69 100644
--- a/app/components/swarm/swarmController.js
+++ b/app/components/swarm/swarmController.js
@@ -28,7 +28,9 @@ function ($scope, Info, Version, Node, Pagination) {
     $scope.info = d;
     if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
       Node.query({}, function(d) {
-        $scope.nodes = d;
+        $scope.nodes = d.map(function (node) {
+          return new NodeViewModel(node);
+        });
         var CPU = 0, memory = 0;
         angular.forEach(d, function(node) {
           CPU += node.Description.Resources.NanoCPUs;
diff --git a/app/models/node.js b/app/models/node.js
index 49aab6a13..1362d0885 100644
--- a/app/models/node.js
+++ b/app/models/node.js
@@ -27,6 +27,10 @@ function NodeViewModel(data) {
   this.Plugins = data.Description.Engine.Plugins;
   this.Status = data.Status.State;
 
+  if (data.Status.Addr) {
+    this.Addr = data.Status.Addr;
+  }
+
   if (data.ManagerStatus) {
     this.Leader = data.ManagerStatus.Leader;
     this.Reachability = data.ManagerStatus.Reachability;