portainer/app/docker/views/networks/networksController.js

import _ from 'lodash-es';

angular.module('portainer.docker').controller('NetworksController', [
  '$q',
  '$scope',
  '$state',
  'NetworkService',
  'Notifications',
  'HttpRequestHelper',
  'EndpointProvider',
  'AgentService',
  function ($q, $scope, $state, NetworkService, Notifications, HttpRequestHelper, EndpointProvider, AgentService) {
    $scope.removeAction = function (selectedItems) {
      var actionCount = selectedItems.length;
      angular.forEach(selectedItems, function (network) {
        HttpRequestHelper.setPortainerAgentTargetHeader(network.NodeName);
        NetworkService.remove(network.Id)
          .then(function success() {
            Notifications.success('Network successfully removed', network.Name);
            var index = $scope.networks.indexOf(network);
            $scope.networks.splice(index, 1);
          })
          .catch(function error(err) {
            Notifications.error('Failure', err, 'Unable to remove network');
          })
          .finally(function final() {
            --actionCount;
            if (actionCount === 0) {
              $state.reload();
            }
          });
      });
    };

    $scope.offlineMode = false;

    $scope.getNetworks = getNetworks;

    function groupSwarmNetworksManagerNodesFirst(networks, agents) {
      const getRole = (item) => _.find(agents, (agent) => agent.NodeName === item.NodeName).NodeRole;

      const nonSwarmNetworks = _.remove(networks, (item) => item.Scope !== 'swarm');
      const grouped = _.toArray(_.groupBy(networks, (item) => item.Id));
      const sorted = _.map(grouped, (arr) => _.sortBy(arr, (item) => getRole(item)));
      const arr = _.map(sorted, (a) => {
        const item = a[0];
        for (let i = 1; i < a.length; i++) {
          item.Subs.push(a[i]);
        }
        return item;
      });
      const res = _.concat(arr, ...nonSwarmNetworks);
      return res;
    }

    function getNetworks() {
      const req = {
        networks: NetworkService.networks(true, true, true),
      };

      if ($scope.applicationState.endpoint.mode.agentProxy && $scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
        req.agents = AgentService.agents();
      }

      $q.all(req)
        .then((data) => {
          $scope.offlineMode = EndpointProvider.offlineMode();
          const networks = _.forEach(data.networks, (item) => (item.Subs = []));
          if ($scope.applicationState.endpoint.mode.agentProxy && $scope.applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE') {
            $scope.networks = groupSwarmNetworksManagerNodesFirst(data.networks, data.agents);
          } else {
            $scope.networks = networks;
          }
        })
        .catch((err) => {
          $scope.networks = [];
          Notifications.error('Failure', err, 'Unable to retrieve networks');
        });
    }

    function initView() {
      getNetworks();
    }

    initView();
  },
]);