From 71eb3feac914df04b09506ee1279eb1f18d44895 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Wed, 24 Aug 2016 10:58:55 +1200
Subject: [PATCH] feat(containers): update the containers view to add a column
 with exposed ports (#157)

---
 .../container/containerController.js          |  1 -
 app/components/containers/containers.html     | 31 +++++++++++--------
 .../containers/containersController.js        |  2 +-
 app/shared/viewmodel.js                       |  7 +++++
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/components/container/containerController.js b/app/components/container/containerController.js
index 3138289d6..2cca1ab25 100644
--- a/app/components/container/containerController.js
+++ b/app/components/container/containerController.js
@@ -100,7 +100,6 @@ function ($scope, $state, $stateParams, $filter, Container, ContainerCommit, Mes
     var registry = _.toLower($scope.config.Registry);
     var imageConfig = createImageConfig(image, registry);
     ContainerCommit.commit({id: $stateParams.id, tag: imageConfig.tag, repo: imageConfig.repo}, function (d) {
-      console.log(JSON.stringify(d, null, 4));
       update();
       $('#createImageSpinner').hide();
       Messages.send("Container commited", $stateParams.id);
diff --git a/app/components/containers/containers.html b/app/components/containers/containers.html
index b0b83b72f..30989f821 100644
--- a/app/components/containers/containers.html
+++ b/app/components/containers/containers.html
@@ -52,6 +52,13 @@
                   <span ng-show="sortType == 'Names' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
+              <th>
+                <a ui-sref="containers" ng-click="order('Image')">
+                  Image
+                  <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+              </th>
               <th ng-if="state.displayIP">
                 <a ui-sref="containers" ng-click="order('IP')">
                   IP Address
@@ -67,17 +74,10 @@
                 </a>
               </th>
               <th>
-                <a ui-sref="containers" ng-click="order('Image')">
-                  Image
-                  <span ng-show="sortType == 'Image' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Image' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
-                </a>
-              </th>
-              <th>
-                <a ui-sref="containers" ng-click="order('Command')">
-                  Command
-                  <span ng-show="sortType == 'Command' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
-                  <span ng-show="sortType == 'Command' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                <a ui-sref="containers" ng-click="order('Ports')">
+                  Exposed Ports
+                  <span ng-show="sortType == 'Ports' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                  <span ng-show="sortType == 'Ports' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                 </a>
               </th>
             </tr>
@@ -88,10 +88,15 @@
               <td><span class="label label-{{ container.Status|containerstatusbadge }}">{{ container.Status|containerstatus }}</span></td>
               <td ng-if="swarm"><a ui-sref="container({id: container.Id})">{{ container|swarmcontainername}}</a></td>
               <td ng-if="!swarm"><a ui-sref="container({id: container.Id})">{{ container|containername}}</a></td>
+              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
               <td ng-if="state.displayIP">{{ container.IP ? container.IP : '-' }}</td>
               <td ng-if="swarm">{{ container.hostIP }}</td>
-              <td><a ui-sref="image({id: container.Image})">{{ container.Image }}</a></td>
-              <td>{{ container.Command|truncate:60 }}</td>
+              <td>
+                <a ng-if="container.Ports.length > 0" ng-repeat="p in container.Ports" class="image-tag" ng-href="http://{{p.host}}:{{p.public}}" target="_blank">
+                  <i class="fa fa-external-link" aria-hidden="true"></i> {{ p.private }}
+                </a>
+                <span ng-if="container.Ports.length == 0" >-</span>
+              </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/components/containers/containersController.js b/app/components/containers/containersController.js
index 0db7b4dc8..66e236cb3 100644
--- a/app/components/containers/containersController.js
+++ b/app/components/containers/containersController.js
@@ -6,7 +6,7 @@ function ($scope, Container, Info, Settings, Messages, Config, errorMsgFilter) {
   $scope.state.displayAll = Settings.displayAll;
   $scope.state.displayIP = false;
   $scope.sortType = 'State';
-  $scope.sortReverse = true;
+  $scope.sortReverse = false;
   $scope.state.selectedItemCount = 0;
 
   $scope.order = function (sortType) {
diff --git a/app/shared/viewmodel.js b/app/shared/viewmodel.js
index 4e9939940..ec02f1755 100644
--- a/app/shared/viewmodel.js
+++ b/app/shared/viewmodel.js
@@ -19,6 +19,13 @@ function ContainerViewModel(data) {
   this.Image = data.Image;
   this.Command = data.Command;
   this.Checked = false;
+  this.Ports = [];
+  for (var i = 0; i < data.Ports.length; ++i) {
+    var p = data.Ports[i];
+    if (p.PublicPort) {
+      this.Ports.push({ host: p.IP, private: p.PrivatePort, public: p.PublicPort });
+    }
+  }
 }
 
 function createEventDetails(event) {