mirror of https://github.com/portainer/portainer
feat(ui): new network creation view (#37)
Anthony Lapenna
GitHub
parent
446322dcbe
commit
530eb20dfc
|
|
@ -77,6 +77,11 @@ angular.module('uifordocker', [
|
||||||
templateUrl: 'app/components/createVolume/createvolume.html',
|
templateUrl: 'app/components/createVolume/createvolume.html',
|
||||||
controller: 'CreateVolumeController'
|
controller: 'CreateVolumeController'
|
||||||
})
|
})
|
||||||
|
.state('actions.create.network', {
|
||||||
|
url: "/network",
|
||||||
|
templateUrl: 'app/components/createNetwork/createnetwork.html',
|
||||||
|
controller: 'CreateNetworkController'
|
||||||
|
})
|
||||||
.state('docker', {
|
.state('docker', {
|
||||||
url: '/docker/',
|
url: '/docker/',
|
||||||
templateUrl: 'app/components/docker/docker.html',
|
templateUrl: 'app/components/docker/docker.html',
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<div id="create-network-modal" class="modal fade">
|
|
||||||
<div class="modal-dialog">
|
|
||||||
<div class="modal-content">
|
|
||||||
<div class="modal-header">
|
|
||||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
|
|
||||||
<h3>Create network</h3>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<form novalidate role="form" name="createNetworkForm">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Name:</label>
|
|
||||||
<input type="text" placeholder='my_network'
|
|
||||||
ng-model="createNetworkConfig.Name" class="form-control"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Driver:</label>
|
|
||||||
<input type="text" placeholder='bridge'
|
|
||||||
ng-model="createNetworkConfig.Driver" class="form-control"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Subnet:</label>
|
|
||||||
<input type="text" placeholder='172.20.0.0/16'
|
|
||||||
ng-model="createNetworkConfig.IPAM.Config[0].Subnet" class="form-control"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>IPRange:</label>
|
|
||||||
<input type="text" placeholder='172.20.10.0/24'
|
|
||||||
ng-model="createNetworkConfig.IPAM.Config[0].IPRange" class="form-control"/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Gateway:</label>
|
|
||||||
<input type="text" placeholder='172.20.10.11'
|
|
||||||
ng-model="createNetworkConfig.IPAM.Config[0].Gateway" class="form-control"/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="alert alert-error" id="error-message" style="display:none">
|
|
||||||
{{ error }}
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<a href="" class="btn btn-primary" ng-click="createNetwork(createNetworkConfig)">Create</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,41 +1,58 @@
|
||||||
angular.module('createNetwork', [])
|
angular.module('createNetwork', [])
|
||||||
.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
|
.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
|
||||||
function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
|
function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
|
||||||
$scope.template = 'app/components/createNetwork/createNetwork.html';
|
$scope.formValues = {
|
||||||
|
DriverOptions: []
|
||||||
$scope.init = function () {
|
|
||||||
$scope.createNetworkConfig = {
|
|
||||||
"Name": '',
|
|
||||||
"Driver": '',
|
|
||||||
"IPAM": {
|
|
||||||
"Config": [{}]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.init();
|
$scope.config = {
|
||||||
|
Driver: 'bridge',
|
||||||
|
CheckDuplicate: true,
|
||||||
|
Internal: false
|
||||||
|
};
|
||||||
|
|
||||||
$scope.createNetwork = function addNetwork(createNetworkConfig) {
|
$scope.addDriverOption = function() {
|
||||||
if (_.isEmpty(createNetworkConfig.IPAM.Config[0])) {
|
$scope.formValues.DriverOptions.push({ name: '', value: '' });
|
||||||
delete createNetworkConfig.IPAM;
|
};
|
||||||
}
|
|
||||||
$('#error-message').hide();
|
$scope.removeDriverOption = function(index) {
|
||||||
|
$scope.formValues.DriverOptions.splice(index, 1);
|
||||||
|
};
|
||||||
|
|
||||||
|
function createNetwork(config) {
|
||||||
ViewSpinner.spin();
|
ViewSpinner.spin();
|
||||||
$('#create-network-modal').modal('hide');
|
Network.create(config, function (d) {
|
||||||
Network.create(createNetworkConfig, function (d) {
|
|
||||||
if (d.Id) {
|
if (d.Id) {
|
||||||
Messages.send("Network created", d.Id);
|
Messages.send("Network created", d.Id);
|
||||||
} else {
|
|
||||||
Messages.error('Failure', errorMsgFilter(d));
|
|
||||||
}
|
|
||||||
ViewSpinner.stop();
|
ViewSpinner.stop();
|
||||||
$scope.init();
|
|
||||||
$state.go('networks', {}, {reload: true});
|
$state.go('networks', {}, {reload: true});
|
||||||
|
} else {
|
||||||
|
ViewSpinner.stop();
|
||||||
|
Messages.error('Unable to create network', errorMsgFilter(d));
|
||||||
|
}
|
||||||
}, function (e) {
|
}, function (e) {
|
||||||
ViewSpinner.stop();
|
ViewSpinner.stop();
|
||||||
$scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
|
Messages.error('Unable to create network', e.data);
|
||||||
$('#create-network-modal').modal('show');
|
|
||||||
$('#error-message').show();
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareDriverOptions(config) {
|
||||||
|
var options = {};
|
||||||
|
$scope.formValues.DriverOptions.forEach(function (option) {
|
||||||
|
options[option.name] = option.value;
|
||||||
|
});
|
||||||
|
config.Options = options;
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareConfiguration() {
|
||||||
|
var config = angular.copy($scope.config);
|
||||||
|
prepareDriverOptions(config);
|
||||||
|
return config;
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.create = function () {
|
||||||
|
var config = prepareConfiguration();
|
||||||
|
console.log(JSON.stringify(config, null, 4));
|
||||||
|
createNetwork(config);
|
||||||
};
|
};
|
||||||
}]);
|
}]);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
<rd-header>
|
||||||
|
<rd-header-title title="Create network"></rd-header-title>
|
||||||
|
<rd-header-content>
|
||||||
|
Networks > Add network
|
||||||
|
</rd-header-content>
|
||||||
|
</rd-header>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12 col-md-12 col-xs-12">
|
||||||
|
<rd-widget>
|
||||||
|
<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 -->
|
||||||
|
<!-- driver-input -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="network_driver" class="col-sm-1 control-label text-left">Driver</label>
|
||||||
|
<div class="col-sm-11">
|
||||||
|
<input type="text" class="form-control" ng-model="config.Driver" id="network_driver" placeholder="e.g. driverName">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- !driver-input -->
|
||||||
|
<!-- driver-options -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="network_driveropts" class="col-sm-1 control-label text-left">Driver options</label>
|
||||||
|
<div class="col-sm-11">
|
||||||
|
<span class="label label-default clickable" ng-click="addDriverOption()">
|
||||||
|
<i class="fa fa-plus-circle" aria-hidden="true"></i> driver option
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<!-- driver-options-input-list -->
|
||||||
|
<div class="col-sm-offset-1 col-sm-11 form-inline" style="margin-top: 10px;">
|
||||||
|
<div ng-repeat="option in formValues.DriverOptions" style="margin-top: 2px;">
|
||||||
|
<div class="input-group col-sm-5 input-group-sm">
|
||||||
|
<span class="input-group-addon">name</span>
|
||||||
|
<input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc">
|
||||||
|
</div>
|
||||||
|
<div class="input-group col-sm-5 input-group-sm">
|
||||||
|
<span class="input-group-addon">value</span>
|
||||||
|
<input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-default" type="button" ng-click="removeDriverOption($index)">
|
||||||
|
<i class="fa fa-minus" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- !driver-options-input-list -->
|
||||||
|
</div>
|
||||||
|
<!-- !driver-options -->
|
||||||
|
<!-- internal -->
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" ng-model="config.Internal"> Restrict external access to the network
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- !internal -->
|
||||||
|
</form>
|
||||||
|
</rd-widget-body>
|
||||||
|
</rd-widget>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12 col-md-12 col-xs-12" style="text-align: center;">
|
||||||
|
<button type="button" class="btn btn-default btn-lg" ng-click="create()">Create</button>
|
||||||
|
<a type="button" class="btn btn-default btn-lg" ui-sref="networks">Cancel</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -16,10 +16,8 @@
|
||||||
</rd-widget-header>
|
</rd-widget-header>
|
||||||
<rd-widget-taskbar classes="col-lg-12">
|
<rd-widget-taskbar classes="col-lg-12">
|
||||||
<div class="pull-left">
|
<div class="pull-left">
|
||||||
<div class="btn-group" role="group" aria-label="...">
|
|
||||||
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
|
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
|
||||||
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#create-network-modal">Create new network...</button>
|
<a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pull-right">
|
<div class="pull-right">
|
||||||
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
|
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue