feat(networks): add ipv6 support (#3717)

* feat(portainer-core): add ipv6 support

* feat(networks): add few changes

* refacto(networks): write regex once

* fix(networks): fix indentation

* refacto(networks): use foreach instead map and pluralize ipvxconfig

* refacto(networks): pluralize ipvxconfig

* feat(networks): support ipv6 with ports

* feat(networks): add an explicit error message

* fix(networks): hide ipv6 configuration when creating macvlan

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html

@@ -34,17 +34,25 @@
           <thead>
             <tr>
               <th>Network</th>
-              <th>IP Address</th>
+              <th>
+                IP Address
+                <a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
+                  <i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
+                </a>
+              </th>
               <th>Gateway</th>
               <th>MAC Address</th>
               <th authorization="DockerNetworkDisconnect">Actions</th>
             </tr>
           </thead>
           <tbody>
-            <tr dir-paginate="(key, value) in $ctrl.dataset | itemsPerPage: $ctrl.state.paginatedItemLimit" ng-class="{ active: item.Checked }">
-              <td
-                ><a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a></td
-              >
+            <tr dir-paginate-start="(key, value) in $ctrl.dataset | itemsPerPage: $ctrl.state.paginatedItemLimit" ng-class="{active: item.Checked}" ng-click="$ctrl.expandItem(value, !value.Expanded)">
+              <td>
+                <a ng-if="$ctrl.itemCanExpand(value)">
+                  <i ng-class="{ 'fas fa-angle-down': value.Expanded, 'fas fa-angle-right': !value.Expanded }" class="space-right" aria-hidden="true"></i>
+                </a>
+                <a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a>
+              </td>
               <td>{{ value.IPAddress || '-' }}</td>
               <td>{{ value.Gateway || '-' }}</td>
               <td>{{ value.MacAddress || '-' }}</td>
@@ -61,6 +69,15 @@
                 </button>
               </td>
             </tr>
+            <tr dir-paginate-end ng-show="value.Expanded" ng-style="{background: (value.Highlighted ? '#d5e8f3' : '#f5f5f5')}">
+              <td colspan="1"></td>
+              <td colspan="1">
+                {{ value.GlobalIPv6Address }}
+              </td>
+              <td colspan="3">
+                {{ value.IPv6Gateway || '-' }}
+              </td>
+            </tr>
             <tr ng-if="!$ctrl.dataset">
               <td colspan="5" class="text-center text-muted">Loading...</td>
             </tr>

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.js

@@ -1,6 +1,6 @@
 angular.module('portainer.docker').component('containerNetworksDatatable', {
   templateUrl: './containerNetworksDatatable.html',
-  controller: 'GenericDatatableController',
+  controller: 'ContainerNetworksDatatableController',
   bindings: {
     titleText: '@',
     titleIcon: '@',

app/docker/components/datatables/container-networks-datatable/containerNetworksDatatableController.js

@@ -0,0 +1,81 @@
+import _ from 'lodash-es';
+
+angular.module('portainer.docker')
+  .controller('ContainerNetworksDatatableController', ['$scope', '$controller', 'DatatableService',
+    function ($scope, $controller, DatatableService) {
+
+      angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
+      this.state = Object.assign(this.state, {
+        expandedItems: [],
+        expandAll: true
+      });
+
+      this.expandItem = function (item, expanded) {
+        if (!this.itemCanExpand(item)) {
+          return;
+        }
+
+        item.Expanded = expanded;
+        if (!expanded) {
+          item.Highlighted = false;
+        }
+        if (!item.Expanded) {
+          this.state.expandAll = false;
+        }
+      };
+
+      this.itemCanExpand = function (item) {
+        return item.GlobalIPv6Address !== '';
+      }
+
+      this.hasExpandableItems = function () {
+        return _.filter(this.dataset, (item) => this.itemCanExpand(item)).length;
+      };
+
+      this.expandAll = function () {
+        this.state.expandAll = !this.state.expandAll;
+        _.forEach(this.dataset, (item) => {
+          if (this.itemCanExpand(item)) {
+            this.expandItem(item, this.state.expandAll);
+          }
+        });
+      };
+
+      this.$onInit = function () {
+        this.setDefaults();
+        this.prepareTableFromDataset();
+
+        this.state.orderBy = this.orderBy;
+        var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
+        if (storedOrder !== null) {
+          this.state.reverseOrder = storedOrder.reverse;
+          this.state.orderBy = storedOrder.orderBy;
+        }
+
+        var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
+        if (textFilter !== null) {
+          this.state.textFilter = textFilter;
+          this.onTextFilterChange();
+        }
+
+        var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
+        if (storedFilters !== null) {
+          this.filters = storedFilters;
+        }
+        if (this.filters && this.filters.state) {
+          this.filters.state.open = false;
+        }
+
+        var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
+        if (storedSettings !== null) {
+          this.settings = storedSettings;
+          this.settings.open = false;
+        }
+
+        _.forEach(this.dataset, (item) => {
+          item.Expanded = true;
+          item.Highlighted = true;
+        });
+      };
+    }
+  ]);

app/docker/components/datatables/containers-datatable/containersDatatable.html

@@ -232,13 +232,6 @@
                   Created
                 </a>
               </th>
-              <th ng-show="$ctrl.columnVisibility.columns.ip.display">
-                <a ng-click="$ctrl.changeOrderBy('IP')">
-                  IP Address
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
               <th ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">
                 <a ng-click="$ctrl.changeOrderBy('NodeName')">
                   Host
@@ -313,7 +306,6 @@
               <td ng-show="$ctrl.columnVisibility.columns.created.display">
                 {{ item.Created | getisodatefromtimestamp }}
               </td>
-              <td ng-show="$ctrl.columnVisibility.columns.ip.display">{{ item.IP ? item.IP : '-' }}</td>
               <td ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">{{ item.NodeName ? item.NodeName : '-' }}</td>
               <td ng-show="$ctrl.columnVisibility.columns.ports.display">
                 <a

app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.html

@@ -20,13 +20,13 @@
   <span style="margin-left: 10px;" class="label label-info image-tag space-left" ng-if="item.ResourceControl.System">System</span>
 </td>
 <td>{{ item.StackName ? item.StackName : '-' }}</td>
-<td>{{ item.Scope }}</td>
 <td>{{ item.Driver }}</td>
 <td>{{ item.Attachable }}</td>
-<td>{{ item.Internal }}</td>
 <td>{{ item.IPAM.Driver }}</td>
-<td>{{ item.IPAM.Config[0].Subnet ? item.IPAM.Config[0].Subnet : '-' }}</td>
-<td>{{ item.IPAM.Config[0].Gateway ? item.IPAM.Config[0].Gateway : '-' }}</td>
+<td>{{ item.IPAM.IPV4Configs[0].Subnet ? item.IPAM.IPV4Configs[0].Subnet : '-' }}</td>
+<td>{{ item.IPAM.IPV4Configs[0].Gateway ? item.IPAM.IPV4Configs[0].Gateway : '-' }}</td>
+<td>{{ item.IPAM.IPV6Configs[0].Subnet ? item.IPAM.IPV6Configs[0].Subnet : '-' }}</td>
+<td>{{ item.IPAM.IPV6Configs[0].Gateway ? item.IPAM.IPV6Configs[0].Gateway : '-' }}</td>
 <td ng-if="parentCtrl.showHostColumn">{{ item.NodeName ? item.NodeName : '-' }}</td>
 <td ng-if="parentCtrl.showOwnershipColumn">
   <span>

app/docker/components/datatables/networks-datatable/networksDatatable.html

@@ -95,13 +95,6 @@
                   <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
                 </a>
               </th>
-              <th>
-                <a ng-click="$ctrl.changeOrderBy('Scope')">
-                  Scope
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Scope' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Scope' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('Driver')">
                   Driver
@@ -116,13 +109,6 @@
                   <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder"></i>
                 </a>
               </th>
-              <th>
-                <a ng-click="$ctrl.changeOrderBy('Internal')">
-                  Internal
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Internal' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Internal' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
               <th>
                 <a ng-click="$ctrl.changeOrderBy('IPAM.Driver')">
                   IPAM Driver
@@ -131,17 +117,31 @@
                 </a>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAM.Config[0].Subnet')">
-                  IPAM Subnet
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.Config[0].Subnet' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.Config[0].Subnet' && $ctrl.state.reverseOrder"></i>
+                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')">
+                  IPV4 IPAM Subnet
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder"></i>
                 </a>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAM.Config[0].Gateway')">
-                  IPAM Gateway
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.Config[0].Gateway' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.Config[0].Gateway' && $ctrl.state.reverseOrder"></i>
+                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')">
+                  IPV4 IPAM Gateway
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')">
+                  IPV6 IPAM Subnet
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder"></i>
+                </a>
+              </th>
+              <th>
+                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')">
+                  IPV6 IPAM Gateway
+                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && !$ctrl.state.reverseOrder"></i>
+                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder"></i>
                 </a>
               </th>
               <th ng-if="$ctrl.showHostColumn">