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',
|
||||
controller: 'CreateVolumeController'
|
||||
})
|
||||
.state('actions.create.network', {
|
||||
url: "/network",
|
||||
templateUrl: 'app/components/createNetwork/createnetwork.html',
|
||||
controller: 'CreateNetworkController'
|
||||
})
|
||||
.state('docker', {
|
||||
url: '/docker/',
|
||||
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', [])
|
||||
.controller('CreateNetworkController', ['$scope', '$state', 'Messages', 'Network', 'ViewSpinner', 'errorMsgFilter',
|
||||
function ($scope, $state, Messages, Network, ViewSpinner, errorMsgFilter) {
|
||||
$scope.template = 'app/components/createNetwork/createNetwork.html';
|
||||
|
||||
$scope.init = function () {
|
||||
$scope.createNetworkConfig = {
|
||||
"Name": '',
|
||||
"Driver": '',
|
||||
"IPAM": {
|
||||
"Config": [{}]
|
||||
}
|
||||
};
|
||||
$scope.formValues = {
|
||||
DriverOptions: []
|
||||
};
|
||||
|
||||
$scope.init();
|
||||
$scope.config = {
|
||||
Driver: 'bridge',
|
||||
CheckDuplicate: true,
|
||||
Internal: false
|
||||
};
|
||||
|
||||
$scope.createNetwork = function addNetwork(createNetworkConfig) {
|
||||
if (_.isEmpty(createNetworkConfig.IPAM.Config[0])) {
|
||||
delete createNetworkConfig.IPAM;
|
||||
}
|
||||
$('#error-message').hide();
|
||||
$scope.addDriverOption = function() {
|
||||
$scope.formValues.DriverOptions.push({ name: '', value: '' });
|
||||
};
|
||||
|
||||
$scope.removeDriverOption = function(index) {
|
||||
$scope.formValues.DriverOptions.splice(index, 1);
|
||||
};
|
||||
|
||||
function createNetwork(config) {
|
||||
ViewSpinner.spin();
|
||||
$('#create-network-modal').modal('hide');
|
||||
Network.create(createNetworkConfig, function (d) {
|
||||
Network.create(config, function (d) {
|
||||
if (d.Id) {
|
||||
Messages.send("Network created", d.Id);
|
||||
ViewSpinner.stop();
|
||||
$state.go('networks', {}, {reload: true});
|
||||
} else {
|
||||
Messages.error('Failure', errorMsgFilter(d));
|
||||
ViewSpinner.stop();
|
||||
Messages.error('Unable to create network', errorMsgFilter(d));
|
||||
}
|
||||
ViewSpinner.stop();
|
||||
$scope.init();
|
||||
$state.go('networks', {}, {reload: true});
|
||||
}, function (e) {
|
||||
ViewSpinner.stop();
|
||||
$scope.error = "Cannot pull image " + imageName + " Reason: " + e.data;
|
||||
$('#create-network-modal').modal('show');
|
||||
$('#error-message').show();
|
||||
Messages.error('Unable to create network', e.data);
|
||||
});
|
||||
}
|
||||
|
||||
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-taskbar classes="col-lg-12">
|
||||
<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-default" data-toggle="modal" data-target="#create-network-modal">Create new network...</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount">Remove</button>
|
||||
<a class="btn btn-default" type="button" ui-sref="actions.create.network">Add network</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue