feat(networks): add UAC (#1196)

app/components/createNetwork/createNetworkController.js

@@ -1,12 +1,17 @@
 angular.module('createNetwork', [])
-.controller('CreateNetworkController', ['$q', '$scope', '$state', 'PluginService', 'Notifications', 'Network', 'LabelHelper',
-function ($q, $scope, $state, PluginService, Notifications, Network, LabelHelper) {
+.controller('CreateNetworkController', ['$q', '$scope', '$state', 'PluginService', 'Notifications', 'NetworkService', 'LabelHelper', 'Authentication', 'ResourceControlService', 'FormValidator',
+function ($q, $scope, $state, PluginService, Notifications, NetworkService, LabelHelper, Authentication, ResourceControlService, FormValidator) {
 
   $scope.formValues = {
     DriverOptions: [],
     Subnet: '',
     Gateway: '',
-    Labels: []
+    Labels: [],
+    AccessControlData: new AccessControlFormData()
+  };
+
+  $scope.state = {
+    formValidationError: ''
   };
 
   $scope.availableNetworkDrivers = [];
@@ -40,23 +45,6 @@ function ($q, $scope, $state, PluginService, Notifications, Network, LabelHelper
     $scope.formValues.Labels.splice(index, 1);
   };
 
-  function createNetwork(config) {
-    $('#createNetworkSpinner').show();
-    Network.create(config, function (d) {
-      if (d.message) {
-        $('#createNetworkSpinner').hide();
-        Notifications.error('Unable to create network', {}, d.message);
-      } else {
-        Notifications.success('Network created', d.Id);
-        $('#createNetworkSpinner').hide();
-        $state.go('networks', {}, {reload: true});
-      }
-    }, function (e) {
-      $('#createNetworkSpinner').hide();
-      Notifications.error('Failure', e, 'Unable to create network');
-    });
-  }
-
   function prepareIPAMConfiguration(config) {
     if ($scope.formValues.Subnet) {
       var ipamConfig = {};
@@ -88,9 +76,47 @@ function ($q, $scope, $state, PluginService, Notifications, Network, LabelHelper
     return config;
   }
 
+  function validateForm(accessControlData, isAdmin) {
+    $scope.state.formValidationError = '';
+    var error = '';
+    error = FormValidator.validateAccessControl(accessControlData, isAdmin);
+
+    if (error) {
+      $scope.state.formValidationError = error;
+      return false;
+    }
+    return true;
+  }
+
   $scope.create = function () {
-    var config = prepareConfiguration();
-    createNetwork(config);
+    $('#createResourceSpinner').show();
+
+    var networkConfiguration = prepareConfiguration();
+    var accessControlData = $scope.formValues.AccessControlData;
+    var userDetails = Authentication.getUserDetails();
+    var isAdmin = userDetails.role === 1 ? true : false;
+
+    if (!validateForm(accessControlData, isAdmin)) {
+      $('#createResourceSpinner').hide();
+      return;
+    }
+
+    NetworkService.create(networkConfiguration)
+    .then(function success(data) {
+      var networkIdentifier = data.Id;
+      var userId = userDetails.ID;
+      return ResourceControlService.applyResourceControl('network', networkIdentifier, userId, accessControlData, []);
+    })
+    .then(function success() {
+      Notifications.success('Network successfully created');
+      $state.go('networks', {}, {reload: true});
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'An error occured during network creation');
+    })
+    .finally(function final() {
+      $('#createResourceSpinner').hide();
+    });
   };
 
   function initView() {

app/components/createNetwork/createnetwork.html

@@ -121,6 +121,9 @@
             </div>
           </div>
           <!-- !internal -->
+          <!-- access-control -->
+          <por-access-control-form form-data="formValues.AccessControlData" ng-if="applicationState.application.authentication"></por-access-control-form>
+          <!-- !access-control -->
           <!-- actions -->
           <div class="col-sm-12 form-section-title">
             Actions
@@ -129,7 +132,8 @@
             <div class="col-sm-12">
               <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Name" ng-click="create()">Create network</button>
               <a type="button" class="btn btn-default btn-sm" ui-sref="networks">Cancel</a>
-              <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+              <i id="createResourceSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
+              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
             </div>
           </div>
           <!-- !actions -->

app/components/network/network.html

@@ -48,6 +48,15 @@
   </div>
 </div>
 
+<!-- access-control-panel -->
+<por-access-control-panel
+  ng-if="network && applicationState.application.authentication"
+  resource-id="network.Id"
+  resource-control="network.ResourceControl"
+  resource-type="'network'">
+</por-access-control-panel>
+<!-- !access-control-panel -->
+
 <div class="row" ng-if="!(network.Options | emptyobject)">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>

app/components/network/networkController.js

@@ -1,6 +1,6 @@
 angular.module('network', [])
-.controller('NetworkController', ['$scope', '$state', '$stateParams', '$filter', 'Network', 'Container', 'ContainerHelper', 'Notifications',
-function ($scope, $state, $stateParams, $filter, Network, Container, ContainerHelper, Notifications) {
+.controller('NetworkController', ['$scope', '$state', '$stateParams', '$filter', 'Network', 'NetworkService', 'Container', 'ContainerHelper', 'Notifications',
+function ($scope, $state, $stateParams, $filter, Network, NetworkService, Container, ContainerHelper, Notifications) {
 
   $scope.removeNetwork = function removeNetwork(networkId) {
     $('#loadingViewSpinner').show();
@@ -82,7 +82,7 @@ function ($scope, $state, $stateParams, $filter, Network, Container, ContainerHe
 
   function initView() {
     $('#loadingViewSpinner').show();
-    Network.get({id: $stateParams.id}).$promise
+    NetworkService.network($stateParams.id)
     .then(function success(data) {
       $scope.network = data;
       var endpointProvider = $scope.applicationState.endpoint.mode.provider;

app/components/networks/networks.html

@@ -8,46 +8,6 @@
   <rd-header-content>Networks</rd-header-content>
 </rd-header>
 
-<div class="row">
-  <div class="col-lg-12 col-md-12 col-xs-12">
-    <rd-widget>
-      <rd-widget-header icon="fa-plus" title="Add a network">
-      </rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal">
-          <!-- name-input -->
-          <div class="form-group">
-            <label for="network_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="config.Name" id="network_name" placeholder="e.g. myNetwork">
-            </div>
-          </div>
-          <!-- !name-input -->
-          <!-- tag-note -->
-          <div class="form-group" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM' || applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
-            <div class="col-sm-12">
-              <span class="small text-muted">Note: The network will be created using the overlay driver and will allow containers to communicate across the hosts of your cluster.</span>
-            </div>
-          </div>
-          <div class="form-group" ng-if="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE' || applicationState.endpoint.mode.provider === 'VMWARE_VIC'">
-            <div class="col-sm-12">
-              <span class="small text-muted">Note: The network will be created using the bridge driver.</span>
-            </div>
-          </div>
-          <!-- !tag-note -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="!config.Name" ng-click="createNetwork()">Create</button>
-              <button type="button" class="btn btn-primary btn-sm" ui-sref="actions.create.network">Advanced settings...</button>
-              <i id="createNetworkSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
-            </div>
-          </div>
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
-
 <div class="row">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
@@ -66,6 +26,7 @@
       <rd-widget-taskbar classes="col-lg-12">
         <div class="pull-left">
           <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
+          <a class="btn btn-primary" type="button" ui-sref="actions.create.network"><i class="fa fa-plus space-right" aria-hidden="true"></i>Add network</a>
         </div>
         <div class="pull-right">
           <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
@@ -80,54 +41,61 @@
                   <input type="checkbox" ng-model="allSelected" ng-change="selectItems(allSelected)" />
                 </th>
                 <th>
-                  <a ui-sref="networks" ng-click="order('Name')">
+                  <a ng-click="order('Name')">
                     Name
                     <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                     <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
                 <th>
-                  <a ui-sref="networks" ng-click="order('Id')">
+                  <a ng-click="order('Id')">
                     Id
                     <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                     <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
                 <th>
-                  <a ui-sref="networks" ng-click="order('Scope')">
+                  <a ng-click="order('Scope')">
                     Scope
                     <span ng-show="sortType == 'Scope' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                     <span ng-show="sortType == 'Scope' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
                 <th>
-                  <a ui-sref="networks" ng-click="order('Driver')">
+                  <a ng-click="order('Driver')">
                     Driver
                     <span ng-show="sortType == 'Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                     <span ng-show="sortType == 'Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
                 <th>
-                  <a ui-sref="networks" ng-click="order('IPAM.Driver')">
+                  <a ng-click="order('IPAM.Driver')">
                     IPAM Driver
                     <span ng-show="sortType == 'IPAM.Driver' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                     <span ng-show="sortType == 'IPAM.Driver' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
                 <th>
-                  <a ui-sref="networks" ng-click="order('IPAM.Config[0].Subnet')">
+                  <a ng-click="order('IPAM.Config[0].Subnet')">
                     IPAM Subnet
                     <span ng-show="sortType == 'IPAM.Config[0].Subnet' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                     <span ng-show="sortType == 'IPAM.Config[0].Subnet' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
                 <th>
-                  <a ui-sref="networks" ng-click="order('IPAM.Config[0].Gateway')">
+                  <a ng-click="order('IPAM.Config[0].Gateway')">
                     IPAM Gateway
                     <span ng-show="sortType == 'IPAM.Config[0].Gateway' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
                     <span ng-show="sortType == 'IPAM.Config[0].Gateway' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
                   </a>
                 </th>
+                <th ng-if="applicationState.application.authentication">
+                  <a ng-click="order('ResourceControl.Ownership')">
+                    Ownership
+                    <span ng-show="sortType == 'ResourceControl.Ownership' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'ResourceControl.Ownership' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                  </a>
+                </th>
               </tr>
             </thead>
             <tbody>
@@ -140,12 +108,18 @@
                 <td>{{ network.IPAM.Driver }}</td>
                 <td>{{ network.IPAM.Config[0].Subnet ? network.IPAM.Config[0].Subnet : '-' }}</td>
                 <td>{{ network.IPAM.Config[0].Gateway ? network.IPAM.Config[0].Gateway : '-' }}</td>
+                <td ng-if="applicationState.application.authentication">
+                  <span>
+                    <i ng-class="network.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
+                    {{ network.ResourceControl.Ownership ? network.ResourceControl.Ownership : network.ResourceControl.Ownership = 'public' }}
+                  </span>
+                </td>
               </tr>
               <tr ng-if="!networks">
-                <td colspan="8" class="text-center text-muted">Loading...</td>
+                <td colspan="9" class="text-center text-muted">Loading...</td>
               </tr>
               <tr ng-if="networks.length == 0">
-                <td colspan="8" class="text-center text-muted">No networks available.</td>
+                <td colspan="9" class="text-center text-muted">No networks available.</td>
               </tr>
             </tbody>
           </table>

app/components/networks/networksController.js

@@ -1,51 +1,17 @@
 angular.module('networks', [])
-.controller('NetworksController', ['$scope', '$state', 'Network', 'Notifications', 'Pagination',
-function ($scope, $state, Network, Notifications, Pagination) {
+.controller('NetworksController', ['$scope', '$state', 'Network', 'NetworkService', 'Notifications', 'Pagination',
+function ($scope, $state, Network, NetworkService, Notifications, Pagination) {
   $scope.state = {};
   $scope.state.pagination_count = Pagination.getPaginationCount('networks');
   $scope.state.selectedItemCount = 0;
   $scope.state.advancedSettings = false;
   $scope.sortType = 'Name';
   $scope.sortReverse = false;
-  $scope.config = {
-    Name: ''
-  };
 
   $scope.changePaginationCount = function() {
     Pagination.setPaginationCount('networks', $scope.state.pagination_count);
   };
 
-  function prepareNetworkConfiguration() {
-    var config = angular.copy($scope.config);
-    if ($scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM' || $scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
-      config.Driver = 'overlay';
-      // Force IPAM Driver to 'default', should not be required.
-      // See: https://github.com/docker/docker/issues/25735
-      config.IPAM = {
-        Driver: 'default'
-      };
-    }
-    return config;
-  }
-
-  $scope.createNetwork = function() {
-    $('#createNetworkSpinner').show();
-    var config = prepareNetworkConfiguration();
-    Network.create(config, function (d) {
-      if (d.message) {
-        $('#createNetworkSpinner').hide();
-        Notifications.error('Unable to create network', {}, d.message);
-      } else {
-        Notifications.success('Network created', d.Id);
-        $('#createNetworkSpinner').hide();
-        $state.reload();
-      }
-    }, function (e) {
-      $('#createNetworkSpinner').hide();
-      Notifications.error('Failure', e, 'Unable to create network');
-    });
-  };
-
   $scope.order = function(sortType) {
     $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
     $scope.sortType = sortType;
@@ -99,13 +65,17 @@ function ($scope, $state, Network, Notifications, Pagination) {
 
   function initView() {
     $('#loadNetworksSpinner').show();
-    Network.query({}, function (d) {
-      $scope.networks = d;
-      $('#loadNetworksSpinner').hide();
-    }, function (e) {
-      $('#loadNetworksSpinner').hide();
-      Notifications.error('Failure', e, 'Unable to retrieve networks');
+
+    NetworkService.networks(true, true, true, true)
+    .then(function success(data) {
+      $scope.networks = data;
+    })
+    .catch(function error(err) {
       $scope.networks = [];
+      Notifications.error('Failure', err, 'Unable to retrieve networks');
+    })
+    .finally(function final() {
+      $('#loadNetworksSpinner').hide();
     });
   }