feat(containers): update the containers view to add a column with exposed ports (#157)

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);

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>

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) {

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) {