feat(network-creation): enhance UX with macvlan driver for swarm mode (#2082) (#2122)

* feat(network-creation): macvlan driver for swarm

* refactor(network-creation): layout rework to make it simpler with MACVLAN and keep it consistent with other drivers

* fix(network-creation): MACVLAN - parent network card is now properly saved, names are not prefixed anymore and the --attachable option is now supported

* refactor(network-creation): PR macvlan review - rework of macvlan view + code optimisation

* fix(network-creation): disable attachable and internal options on macvlan config creation

app/docker/components/network-macvlan-form/network-macvlan-form.js

@@ -0,0 +1,8 @@
+angular.module('portainer.docker').component('networkMacvlanForm', {
+  templateUrl: 'app/docker/components/network-macvlan-form/networkMacvlanForm.html',
+  controller: 'NetworkMacvlanFormController',
+  bindings: {
+    data: '=',
+    applicationState: '<'
+  }
+});

app/docker/components/network-macvlan-form/networkMacvlanForm.html

@@ -0,0 +1,108 @@
+<div>
+  <div class="col-sm-12 form-section-title">
+    Macvlan configuration
+  </div>
+  <!-- selector -->
+  <div class="form-group">
+    <span class="col-sm-12 text-muted small">
+      <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
+      To create a MACVLAN network you need to create a configuration, then create the network from this configuration.
+    </span>
+  </div>
+  <div class="col-sm-12">
+    <div class="form-group" style="margin-bottom: 0">
+      <div class="boxselector_wrapper">
+        <div>
+          <input type="radio" id="network_config" ng-model="$ctrl.data.Scope" value="local">
+          <label for="network_config">
+            <div class="boxselector_header">
+              <i class="fa fa-cog" aria-hidden="true" style="margin-right: 2px;"></i>
+              Configuration
+            </div>
+            <p>I want to configure a network before deploying it</p>
+          </label>
+        </div>
+        <div>
+          <input type="radio" id="network_deploy" ng-model="$ctrl.data.Scope" value="swarm" ng-disabled="$ctrl.availableNetworks.length === 0">
+          <label for="network_deploy" ng-class="$ctrl.availableNetworks.length === 0 ? 'boxselector_disabled' : ''">
+            <div class="boxselector_header">
+              <i class="fa fa-sitemap" aria-hidden="true" style="margin-right: 2px;"></i>
+              Creation
+            </div>
+            <p>I want to create a network from a configuration</p>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- !selector -->
+
+  <ng-form name="macvlanConfigurationForm">
+    <!-- configuration-inputs -->
+    <div ng-show="$ctrl.data.Scope === 'local'">
+      <!-- network-card-input -->
+      <div class="form-group">
+        <label for="network_card" class="col-sm-3 col-lg-2 control-label text-left">Parent network card</label>
+        <div class="col-sm-9 col-lg-10">
+          <input type="text" class="form-control" name="network_card" ng-model="$ctrl.data.ParentNetworkCard" placeholder="e.g. eth0 or ens160 ..."
+            ng-required="$ctrl.data.Scope === 'local' && !$ctrl.data.ParentNetworkCard">
+        </div>
+      </div>
+      <div class="form-group" ng-show="macvlanConfigurationForm.network_card.$invalid">
+        <div class="col-sm-12 small text-warning">
+          <div ng-messages="macvlanConfigurationForm.network_card.$error">
+            <p ng-message="required">
+              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Parent network card must be specified.</p>
+          </div>
+        </div>
+      </div>
+      <!-- network-card-input -->
+      <!-- nodes-selector -->
+      <div ng-if="$ctrl.applicationState.endpoint.mode.agentProxy && $ctrl.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'">
+        <div class="form-group">
+          <div class="col-sm-12">
+            <macvlan-nodes-datatable title-text="Select the nodes where you want to deploy the local configuration" title-icon="fa-hdd"
+              dataset="$ctrl.nodes" table-key="nodes" state="$ctrl.data.DatatableState" order-by="Hostname" show-ip-address-column="$ctrl.applicationState.endpoint.apiVersion >= 1.25"
+              access-to-node-details="!$ctrl.applicationState.application.authentication || $ctrl.isAdmin" name="node_selector"
+              ng-model="tmp" ng-required="$ctrl.requiredNodeSelection()"></macvlan-nodes-datatable>
+          </div>
+        </div>
+        <div class="form-group" ng-show="macvlanConfigurationForm.node_selector.$invalid">
+          <div class="col-sm-12 small text-warning">
+            <div ng-messages="macvlanConfigurationForm.node_selector.$error">
+              <p ng-message="required">
+                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> At least one node must be selected.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- !nodes-selector -->
+    </div>
+    <!-- configuration-inputs -->
+    <!-- deploy-inputs -->
+    <div ng-show="$ctrl.data.Scope === 'swarm'">
+      <!-- configuration-selector -->
+      <!-- network-input -->
+      <div class="form-group">
+        <label for="config_network" class="col-sm-2 col-lg-1 control-label text-left">Configuration</label>
+        <div class="col-sm-9">
+          <select class="form-control" ng-options="net.Name for net in $ctrl.availableNetworks" ng-model="$ctrl.data.SelectedNetworkConfig"
+            name="config_network" ng-required="$ctrl.requiredConfigSelection()">
+            <option selected disabled hidden value="">Select a network</option>
+          </select>
+        </div>
+      </div>
+      <!-- !network-input -->
+      <div class="form-group" ng-show="macvlanConfigurationForm.config_network.$invalid">
+        <div class="col-sm-12 small text-warning">
+          <div ng-messages="macvlanConfigurationForm.config_network.$error">
+            <p ng-message="required">
+              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Select a configuration network.</p>
+          </div>
+        </div>
+      </div>
+      <!-- !configuration-selector -->
+    </div>
+    <!-- deploy-inputs -->
+  </ng-form>
+</div>

app/docker/components/network-macvlan-form/networkMacvlanFormController.js

@@ -0,0 +1,51 @@
+angular.module('portainer.docker')
+  .controller('NetworkMacvlanFormController', ['$q', 'NodeService', 'NetworkService', 'Notifications', 'StateManager', 'Authentication',
+    function ($q, NodeService, NetworkService, Notifications, StateManager, Authentication) {
+      var ctrl = this;
+
+      ctrl.requiredNodeSelection = function () {
+        if (ctrl.data.Scope !== 'local' || ctrl.data.DatatableState === undefined) {
+          return false;
+        }
+        return ctrl.data.DatatableState.selectedItemCount === 0;
+      };
+
+      ctrl.requiredConfigSelection = function () {
+        if (ctrl.data.Scope !== 'swarm') {
+          return false;
+        }
+        return !ctrl.data.SelectedNetworkConfig;
+      };
+
+      function initComponent() {
+        if (StateManager.getState().application.authentication) {
+          var userDetails = Authentication.getUserDetails();
+          var isAdmin = userDetails.role === 1 ? true : false;
+          ctrl.isAdmin = isAdmin;
+        }
+        var provider = ctrl.applicationState.endpoint.mode.provider;
+        var apiVersion = ctrl.applicationState.endpoint.apiVersion;
+        $q.all({
+            nodes: provider !== 'DOCKER_SWARM_MODE' || NodeService.nodes(),
+            networks: NetworkService.networks(
+              provider === 'DOCKER_STANDALONE' || provider === 'DOCKER_SWARM_MODE',
+              false,
+              provider === 'DOCKER_SWARM_MODE' && apiVersion >= 1.25
+            )
+          })
+          .then(function success(data) {
+            if (data.nodes !== true) {
+              ctrl.nodes = data.nodes;
+            }
+            ctrl.availableNetworks = data.networks.filter(function (item) {
+              return item.ConfigOnly === true;
+            });
+          })
+          .catch(function error(err) {
+            Notifications.error('Failure', err, 'Unable to retrieve informations for macvlan');
+          });
+      }
+
+      initComponent();
+    }
+  ]);

app/docker/components/network-macvlan-form/networkMacvlanFormModel.js

@@ -0,0 +1,8 @@
+function MacvlanFormData() {
+  this.Scope = 'local';
+  this.SelectedNetworkConfig = '';
+  this.DatatableState = {
+    selectedItems: []
+  };
+  this.ParentNetworkCard = '';
+}