mirror of
https://github.com/portainer/portainer.git
synced 2025-08-07 23:05:26 +02:00
refactor(docker networks): migrate docker network detail view to react EE-2196 (#6700)
* Migrate network details to react
This commit is contained in:
Ali
GitHub
parent
9650aa56c7
commit
2e0555dbca
24 changed files with 981 additions and 261 deletions
|
|
@ -1,133 +0,0 @@
|
|||
<rd-header>
|
||||
<rd-header-title title-text="Network details"></rd-header-title>
|
||||
<rd-header-content>
|
||||
<a ui-sref="docker.networks">Networks</a> > <a ui-sref="docker.networks.network({id: network.Id})">{{ network.Name }}</a>
|
||||
</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-sitemap" title-text="Network details"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>{{ network.Name }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>
|
||||
{{ network.Id }}
|
||||
<button authorization="DockerNetworkDelete" ng-if="allowRemove()" class="btn btn-xs btn-danger" ng-click="removeNetwork(network.Id)"
|
||||
><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Delete this network</button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Driver</td>
|
||||
<td>{{ network.Driver }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Scope</td>
|
||||
<td>{{ network.Scope }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Attachable</td>
|
||||
<td>{{ network.Attachable }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Internal</td>
|
||||
<td>{{ network.Internal }}</td>
|
||||
</tr>
|
||||
<tr ng-if="network.IPAM.IPV4Configs.length > 0" ng-repeat-start="config in network.IPAM.IPV4Configs">
|
||||
<td>IPV4 Subnet - {{ config.Subnet }}</td>
|
||||
<td>IPV4 Gateway - {{ config.Gateway }}</td>
|
||||
</tr>
|
||||
<tr ng-if="network.IPAM.IPV4Configs.length > 0" ng-repeat-end>
|
||||
<td>IPV4 IP range - {{ config.IPRange }}</td>
|
||||
<td
|
||||
>IPV4 Excluded Ips<span ng-repeat="auxAddress in config.AuxiliaryAddresses"> - {{ auxAddress }}</span></td
|
||||
>
|
||||
</tr>
|
||||
<tr ng-if="network.IPAM.IPV6Configs.length > 0" ng-repeat-start="config in network.IPAM.IPV6Configs">
|
||||
<td>IPV6 Subnet - {{ config.Subnet }}</td>
|
||||
<td>IPV6 Gateway - {{ config.Gateway }}</td>
|
||||
</tr>
|
||||
<tr ng-if="network.IPAM.IPV6Configs.length > 0" ng-repeat-end>
|
||||
<td>IPV6 IP range - {{ config.IPRange }}</td>
|
||||
<td
|
||||
>IPV6 Excluded Ips<span ng-repeat="auxAddress in config.AuxiliaryAddresses"> - {{ auxAddress }}</span></td
|
||||
>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- access-control-panel -->
|
||||
<access-control-panel
|
||||
ng-if="network"
|
||||
resource-id="network.Id"
|
||||
resource-control="network.ResourceControl"
|
||||
resource-type="resourceType"
|
||||
disable-ownership-change="isSystemNetwork()"
|
||||
on-update-success="(onUpdateResourceControlSuccess)"
|
||||
>
|
||||
</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>
|
||||
<rd-widget-header icon="fa-cogs" title-text="Network options"></rd-widget-header>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr ng-repeat="(key, value) in network.Options">
|
||||
<td>{{ key }}</td>
|
||||
<td>{{ value }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-if="containersInNetwork.length > 0">
|
||||
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||
<rd-widget>
|
||||
<rd-widget-header icon="fa-server" title-text="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 authorization="DockerNetworkDisconnect">Actions</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="container in containersInNetwork">
|
||||
<td
|
||||
><a ui-sref="docker.containers.container({ id: container.Id, nodeName: nodeName })">{{ container.Name }}</a></td
|
||||
>
|
||||
<td>{{ container.IPv4Address || '-' }}</td>
|
||||
<td>{{ container.IPv6Address || '-' }}</td>
|
||||
<td>{{ container.MacAddress || '-' }}</td>
|
||||
<td authorization="DockerNetworkDisconnect">
|
||||
<button type="button" class="btn btn-xs btn-danger" ng-click="containerLeaveNetwork(network, container)"
|
||||
><i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Leave Network</button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</rd-widget-body>
|
||||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import { ResourceControlType } from '@/portainer/access-control/types';
|
||||
import DockerNetworkHelper from 'Docker/helpers/networkHelper';
|
||||
|
||||
angular.module('portainer.docker').controller('NetworkController', [
|
||||
'$scope',
|
||||
'$state',
|
||||
'$transition$',
|
||||
'$filter',
|
||||
'NetworkService',
|
||||
'Container',
|
||||
'Notifications',
|
||||
'HttpRequestHelper',
|
||||
'NetworkHelper',
|
||||
function ($scope, $state, $transition$, $filter, NetworkService, Container, Notifications, HttpRequestHelper, NetworkHelper) {
|
||||
$scope.resourceType = ResourceControlType.Network;
|
||||
|
||||
$scope.onUpdateResourceControlSuccess = function () {
|
||||
$state.reload();
|
||||
};
|
||||
|
||||
$scope.removeNetwork = function removeNetwork() {
|
||||
NetworkService.remove($transition$.params().id, $transition$.params().id)
|
||||
.then(function success() {
|
||||
Notifications.success('Network removed', $transition$.params().id);
|
||||
$state.go('docker.networks', {});
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to remove network');
|
||||
});
|
||||
};
|
||||
|
||||
$scope.containerLeaveNetwork = function containerLeaveNetwork(network, container) {
|
||||
HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
|
||||
NetworkService.disconnectContainer($transition$.params().id, container.Id, false)
|
||||
.then(function success() {
|
||||
Notifications.success('Container left network', $transition$.params().id);
|
||||
$state.go('docker.networks.network', { id: network.Id }, { reload: true });
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to disconnect container from network');
|
||||
});
|
||||
};
|
||||
|
||||
$scope.isSystemNetwork = function () {
|
||||
return $scope.network && NetworkHelper.isSystemNetwork($scope.network);
|
||||
};
|
||||
|
||||
$scope.allowRemove = function () {
|
||||
return !$scope.isSystemNetwork();
|
||||
};
|
||||
|
||||
function filterContainersInNetwork(network, containers) {
|
||||
var containersInNetwork = [];
|
||||
containers.forEach(function (container) {
|
||||
var containerInNetwork = network.Containers[container.Id];
|
||||
if (containerInNetwork) {
|
||||
containerInNetwork.Id = container.Id;
|
||||
// Name is not available in Docker 1.9
|
||||
if (!containerInNetwork.Name) {
|
||||
containerInNetwork.Name = $filter('trimcontainername')(container.Names[0]);
|
||||
}
|
||||
containersInNetwork.push(containerInNetwork);
|
||||
}
|
||||
});
|
||||
$scope.containersInNetwork = containersInNetwork;
|
||||
}
|
||||
|
||||
function getContainersInNetwork(network) {
|
||||
var apiVersion = $scope.applicationState.endpoint.apiVersion;
|
||||
if (network.Containers) {
|
||||
if (apiVersion < 1.24) {
|
||||
Container.query(
|
||||
{},
|
||||
function success(data) {
|
||||
var containersInNetwork = data.filter(function filter(container) {
|
||||
if (container.HostConfig.NetworkMode === network.Name) {
|
||||
return container;
|
||||
}
|
||||
});
|
||||
filterContainersInNetwork(network, containersInNetwork);
|
||||
},
|
||||
function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve containers in network');
|
||||
}
|
||||
);
|
||||
} else {
|
||||
Container.query(
|
||||
{
|
||||
filters: { network: [$transition$.params().id] },
|
||||
},
|
||||
function success(data) {
|
||||
filterContainersInNetwork(network, data);
|
||||
},
|
||||
function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve containers in network');
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initView() {
|
||||
var nodeName = $transition$.params().nodeName;
|
||||
HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);
|
||||
$scope.nodeName = nodeName;
|
||||
NetworkService.network($transition$.params().id)
|
||||
.then(function success(data) {
|
||||
$scope.network = data;
|
||||
getContainersInNetwork(data);
|
||||
$scope.network.IPAM.IPV4Configs = DockerNetworkHelper.getIPV4Configs($scope.network.IPAM.Config);
|
||||
$scope.network.IPAM.IPV6Configs = DockerNetworkHelper.getIPV6Configs($scope.network.IPAM.Config);
|
||||
})
|
||||
.catch(function error(err) {
|
||||
Notifications.error('Failure', err, 'Unable to retrieve network info');
|
||||
});
|
||||
}
|
||||
|
||||
initView();
|
||||
},
|
||||
]);
|
||||
Loading…
Add table
Add a link
Reference in a new issue