2016-08-17 05:25:42 +00:00
< rd-header >
2018-06-06 16:12:35 +00:00
< rd-header-title title-text = "Create network" > < / rd-header-title >
2020-04-10 21:54:53 +00:00
< rd-header-content > < a ui-sref = "docker.networks" > Networks< / a > > Add network < / rd-header-content >
2016-08-17 05:25:42 +00:00
< / rd-header >
< div class = "row" >
< div class = "col-lg-12 col-md-12 col-xs-12" >
< rd-widget >
< rd-widget-body >
2018-08-16 10:29:15 +00:00
< form class = "form-horizontal" name = "networkCreationForm" >
2016-08-17 05:25:42 +00:00
<!-- name - input -->
< div class = "form-group" >
2018-08-16 10:29:15 +00:00
< label for = "network_name" class = "col-sm-2 col-lg-1 control-label text-left" > Name< / label >
< div class = "col-sm-10 col-lg-11" >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "config.Name" id = "network_name" placeholder = "e.g. myNetwork" / >
2016-08-17 05:25:42 +00:00
< / div >
< / div >
<!-- !name - input -->
2017-03-27 12:44:39 +00:00
< div class = "col-sm-12 form-section-title" >
Driver configuration
< / div >
2016-08-17 05:25:42 +00:00
<!-- driver - input -->
< div class = "form-group" >
2017-03-27 12:44:39 +00:00
< label for = "network_driver" class = "col-sm-2 col-lg-1 control-label text-left" > Driver< / label >
2018-08-16 10:29:15 +00:00
< div class = "col-sm-10 col-lg-11" >
2017-09-06 13:11:38 +00:00
< select class = "form-control" ng-options = "driver for driver in availableNetworkDrivers" ng-model = "config.Driver" ng-if = "availableNetworkDrivers.length > 0" >
< option disabled hidden value = "" > Select a driver< / option >
< / select >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "config.Driver" id = "network_driver" placeholder = "e.g. driverName" ng-if = "availableNetworkDrivers.length === 0" / >
2016-08-17 05:25:42 +00:00
< / div >
< / div >
<!-- !driver - input -->
<!-- driver - options -->
< div class = "form-group" >
2017-03-27 12:44:39 +00:00
< div class = "col-sm-12" style = "margin-top: 5px;" >
< label class = "control-label text-left" >
Driver options
2020-04-10 21:54:53 +00:00
< portainer-tooltip
position="bottom"
message="Driver options are specific to the selected driver. Please refer to the selected driver documentation."
>< / portainer-tooltip >
2017-03-27 12:44:39 +00:00
< / label >
< span class = "label label-default interactive" style = "margin-left: 10px;" ng-click = "addDriverOption()" >
< i class = "fa fa-plus-circle" aria-hidden = "true" > < / i > add driver option
2016-08-17 05:25:42 +00:00
< / span >
< / div >
<!-- driver - options - input - list -->
2017-03-27 12:44:39 +00:00
< div class = "col-sm-12 form-inline" style = "margin-top: 10px;" >
2016-08-17 05:25:42 +00:00
< 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 >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "option.name" placeholder = "e.g. com.docker.network.bridge.enable_icc" / >
2016-08-17 05:25:42 +00:00
< / div >
< div class = "input-group col-sm-5 input-group-sm" >
< span class = "input-group-addon" > value< / span >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "option.value" placeholder = "e.g. true" / >
2016-08-17 05:25:42 +00:00
< / div >
2017-03-27 12:44:39 +00:00
< button class = "btn btn-sm btn-danger" type = "button" ng-click = "removeDriverOption($index)" >
< i class = "fa fa-trash" aria-hidden = "true" > < / i >
< / button >
2016-08-17 05:25:42 +00:00
< / div >
< / div >
<!-- !driver - options - input - list -->
< / div >
<!-- !driver - options -->
2018-08-16 10:29:15 +00:00
<!-- macvlan - management -->
< network-macvlan-form ng-show = "config.Driver === 'macvlan'" data = "formValues.Macvlan" application-state = "applicationState" > < / network-macvlan-form >
<!-- !macvlan - management -->
< div ng-hide = "config.Driver === 'macvlan' && formValues.Macvlan.Scope === 'swarm'" >
< div class = "col-sm-12 form-section-title" >
Network configuration
< / div >
<!-- subnet - gateway - inputs -->
< div class = "form-group" >
< label for = "network_subnet" class = "col-sm-2 col-lg-1 control-label text-left" > Subnet< / label >
< div class = "col-sm-4 col-lg-5" >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "formValues.Subnet" id = "network_subnet" placeholder = "e.g. 172.20.0.0/16" / >
2018-08-16 10:29:15 +00:00
< / div >
< label for = "network_gateway" class = "col-sm-2 col-lg-1 control-label text-left" > Gateway< / label >
< div class = "col-sm-4 col-lg-5" >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "formValues.Gateway" id = "network_gateway" placeholder = "e.g. 172.20.10.11" / >
2018-08-16 10:29:15 +00:00
< / div >
< / div >
<!-- !subnet - gateway - inputs -->
<!-- iprange - auxaddr - inputs -->
< div class = "form-group" >
< label for = "network_iprange" class = "col-sm-2 col-lg-1 control-label text-left" > IP range< / label >
< div class = "col-sm-4 col-lg-5" >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "formValues.IPRange" id = "network_iprange" placeholder = "e.g. 172.20.10.128/25" / >
2018-08-16 10:29:15 +00:00
< / div >
< label for = "network_auxaddr" class = "col-sm-2 col-lg-1 control-label text-left" > Exclude IPs< / label >
< div class = "col-sm-4 col-lg-5" >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "formValues.AuxAddress" id = "network_auxaddr" placeholder = "e.g. my-router=172.20.10.129" / >
2018-08-16 10:29:15 +00:00
< / div >
< / div >
<!-- !iprange - auxaddr - inputs -->
< / div >
2017-03-27 12:44:39 +00:00
< div class = "col-sm-12 form-section-title" >
Advanced configuration
2016-08-17 05:25:42 +00:00
< / div >
2016-12-25 20:32:17 +00:00
<!-- labels -->
< div class = "form-group" >
2017-03-27 12:44:39 +00:00
< div class = "col-sm-12" style = "margin-top: 5px;" >
< label class = "control-label text-left" > Labels< / label >
2020-04-10 21:54:53 +00:00
< span class = "label label-default interactive" style = "margin-left: 10px;" ng-click = "addLabel()" > < i class = "fa fa-plus-circle" aria-hidden = "true" > < / i > add label < / span >
2016-12-25 20:32:17 +00:00
< / div >
<!-- labels - input - list -->
2017-03-27 12:44:39 +00:00
< div class = "col-sm-12 form-inline" style = "margin-top: 10px;" >
2016-12-25 20:32:17 +00:00
< div ng-repeat = "label in formValues.Labels" style = "margin-top: 2px;" >
< div class = "input-group col-sm-5 input-group-sm" >
< span class = "input-group-addon" > name< / span >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "label.key" placeholder = "e.g. com.example.foo" / >
2016-12-25 20:32:17 +00:00
< / div >
< div class = "input-group col-sm-5 input-group-sm" >
< span class = "input-group-addon" > value< / span >
2020-04-10 21:54:53 +00:00
< input type = "text" class = "form-control" ng-model = "label.value" placeholder = "e.g. bar" / >
2016-12-25 20:32:17 +00:00
< / div >
2017-03-27 12:44:39 +00:00
< button class = "btn btn-sm btn-danger" type = "button" ng-click = "removeLabel($index)" >
< i class = "fa fa-trash" aria-hidden = "true" > < / i >
< / button >
2016-12-25 20:32:17 +00:00
< / div >
< / div >
<!-- !labels - input - list -->
< / div >
<!-- !labels -->
2017-03-27 12:44:39 +00:00
<!-- internal -->
2018-08-16 10:29:15 +00:00
< div class = "form-group" ng-hide = "config.Driver === 'macvlan' && formValues.Macvlan.Scope === 'local'" >
2017-03-27 12:44:39 +00:00
< div class = "col-sm-12" >
< label for = "ownership" class = "control-label text-left" >
Restrict external access to the network
< / label >
2018-08-16 10:29:15 +00:00
< label name = "ownership" class = "switch" style = "margin-left: 20px;" >
2020-04-10 21:54:53 +00:00
< input type = "checkbox" ng-model = "config.Internal" / >
2018-08-16 10:29:15 +00:00
< i > < / i >
2017-03-27 12:44:39 +00:00
< / label >
< / div >
< / div >
<!-- !internal -->
2018-08-16 10:29:15 +00:00
<!-- attachable -->
< div class = "form-group" ng-hide = "config.Driver === 'macvlan' && formValues.Macvlan.Scope === 'local'" >
< div class = "col-sm-12" >
< label for = "attachable" class = "control-label text-left" >
Enable manual container attachment
< / label >
< label name = "attachable" class = "switch" style = "margin-left: 20px;" >
2020-04-10 21:54:53 +00:00
< input type = "checkbox" ng-model = "config.Attachable" / >
2018-08-16 10:29:15 +00:00
< i > < / i >
< / label >
< / div >
< / div >
<!-- !attachable -->
2020-04-10 21:54:53 +00:00
< div
ng-if="
applicationState.endpoint.mode.agentProxy & &
applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' & &
config.Driver !== 'overlay' & &
config.Driver !== 'macvlan'
"
>
2018-05-06 07:15:57 +00:00
< div class = "col-sm-12 form-section-title" >
Deployment
< / div >
<!-- node - selection -->
2020-04-10 21:54:53 +00:00
< node-selector model = "formValues.NodeName" > < / node-selector >
2018-05-06 07:15:57 +00:00
<!-- !node - selection -->
< / div >
2017-09-19 14:58:30 +00:00
<!-- access - control -->
< por-access-control-form form-data = "formValues.AccessControlData" ng-if = "applicationState.application.authentication" > < / por-access-control-form >
<!-- !access - control -->
2017-03-27 12:44:39 +00:00
<!-- actions -->
< div class = "col-sm-12 form-section-title" >
Actions
< / div >
< div class = "form-group" >
< div class = "col-sm-12" >
2020-04-10 21:54:53 +00:00
< button
type="button"
class="btn btn-primary btn-sm"
ng-disabled="state.actionInProgress || !config.Name || (config.Driver === 'macvlan' & & networkCreationForm.$invalid)"
ng-click="create()"
button-spinner="state.actionInProgress"
>
2017-11-12 21:39:12 +00:00
< span ng-hide = "state.actionInProgress" > Create the network< / span >
< span ng-show = "state.actionInProgress" > Creating network...< / span >
2017-11-12 19:27:28 +00:00
< / button >
2017-09-19 14:58:30 +00:00
< i id = "createResourceSpinner" class = "fa fa-cog fa-spin" style = "margin-left: 5px; display: none;" > < / i >
< span class = "text-danger" ng-if = "state.formValidationError" style = "margin-left: 5px;" > {{ state.formValidationError }}< / span >
2017-03-27 12:44:39 +00:00
< / div >
< / div >
<!-- !actions -->
2016-08-17 05:25:42 +00:00
< / form >
< / rd-widget-body >
< / rd-widget >
< / div >
2020-04-10 21:54:53 +00:00
< / div >