feat(network-details): add list of containers in network (#302)

- shows all containers currently connected to the network
- abillity to disconect a container from the network
- fix error when a container is not connected to any networks

app/components/network/network.html

@@ -65,3 +65,34 @@
     </rd-widget>
   </div>
 </div>
+
+
+<div class="row" ng-if="!(network.Containers | emptyobject)">
+  <div class="col-lg-12 col-md-12 col-xs-12">
+    <rd-widget>
+      <rd-widget-header icon="fa-server" title="Containers in network"></rd-widget-header>
+      <rd-widget-body classes="no-padding">
+        <table class="table">
+          <thead>
+            <th>Container Name</th>
+            <th>IPv4 Address</th>
+            <th>IPv6 Address</th>
+            <th>MacAddress</th>
+            <th>Actions</th>
+          </thead>
+          <tbody>
+            <tr ng-repeat="container in containersInNetwork">
+              <td><a ui-sref="container({id: container.Id})">{{ container.Name }}</a></td>
+              <td>{{ container.IPv4Address || '-' }}</td>
+              <td>{{ container.IPv6Address || '-' }}</td>
+              <td>{{ container.MacAddress || '-' }}</td>
+              <td>
+                <button type="button" class="btn btn-xs btn-danger" ng-click="containerLeaveNetwork(network, container.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Leave Network</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/components/network/networkController.js

@@ -1,6 +1,6 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', '$state', '$stateParams', 'Network', 'Messages',
-function ($scope, $state, $stateParams, Network, Messages) {
+.controller('NetworkController', ['$scope', '$state', '$stateParams', 'Network', 'Container', 'ContainerHelper', 'Messages',
+function ($scope, $state, $stateParams, Network, Container, ContainerHelper, Messages) {
 
   $scope.removeNetwork = function removeNetwork(networkId) {
     $('#loadingViewSpinner').show();
@@ -19,12 +19,53 @@ function ($scope, $state, $stateParams, Network, Messages) {
     });
   };
 
-  $('#loadingViewSpinner').show();
-  Network.get({id: $stateParams.id}, function (d) {
-    $scope.network = d;
-    $('#loadingViewSpinner').hide();
-  }, function (e) {
-    $('#loadingViewSpinner').hide();
-    Messages.error("Failure", e, "Unable to retrieve network info");
-  });
+  $scope.containerLeaveNetwork = function containerLeaveNetwork(network, containerId) {
+    $('#loadingViewSpinner').show();
+    Network.disconnect({id: $stateParams.id}, { Container: containerId, Force: false }, function (d) {
+      if (d.message) {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Error", {}, d.message);
+      } else {
+        $('#loadingViewSpinner').hide();
+        Messages.send("Container left network", $stateParams.id);
+        $state.go('network', {id: network.Id}, {reload: true});
+      }
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to disconnect container from network");
+    });
+  };
+
+  function getNetwork() {
+    $('#loadingViewSpinner').show();
+    Network.get({id: $stateParams.id}, function (d) {
+      $scope.network = d;
+      getContainersInNetwork(d);
+      $('#loadingViewSpinner').hide();
+    }, function (e) {
+      $('#loadingViewSpinner').hide();
+      Messages.error("Failure", e, "Unable to retrieve network info");
+    });
+  }
+
+  function getContainersInNetwork(network) {
+    if (network.Containers) {
+      Container.query({
+        filters: {network: [$stateParams.id]}
+      }, function (containersInNetworkResult) {
+        if ($scope.containersToHideLabels) {
+          containersInNetworkResult = ContainerHelper.hideContainers(containersInNetworkResult, $scope.containersToHideLabels);
+        }
+        var containersInNetwork = [];
+        containersInNetworkResult.forEach(function(container) {
+          var containerInNetwork = network.Containers[container.Id];
+          containerInNetwork.Id = container.Id;
+          containersInNetwork.push(containerInNetwork);
+        });
+        $scope.containersInNetwork = containersInNetwork;
+      });
+    }
+  }
+
+  getNetwork();
 }]);

app/shared/services.js

@@ -6,7 +6,7 @@ angular.module('portainer.services', ['ngResource', 'ngSanitize'])
         return $resource(Settings.url + '/containers/:id/:action', {
             name: '@name'
         }, {
-            query: {method: 'GET', params: {all: 0, action: 'json'}, isArray: true},
+            query: {method: 'GET', params: {all: 0, action: 'json', filters: '@filters' }, isArray: true},
             get: {method: 'GET', params: {action: 'json'}},
             stop: {method: 'POST', params: {id: '@id', t: 5, action: 'stop'}},
             restart: {method: 'POST', params: {id: '@id', t: 5, action: 'restart'}},