2016-08-23 06:09:14 +00:00
< rd-header >
2016-08-24 03:45:44 +00:00
< rd-header-title title = "Application templates list" >
2016-08-23 06:09:14 +00:00
< a data-toggle = "tooltip" title = "Refresh" ui-sref = "templates" ui-sref-opts = "{reload: true}" >
< i class = "fa fa-refresh" aria-hidden = "true" > < / i >
< / a >
< / rd-header-title >
2016-08-24 03:45:44 +00:00
< rd-header-content > Templates< / rd-header-content >
2016-08-23 06:09:14 +00:00
< / rd-header >
2016-12-13 20:25:23 +00:00
< div id = "selectedTemplate" class = "row" ng-if = "state.selectedTemplate" >
2016-08-23 06:09:14 +00:00
< div class = "col-lg-12 col-md-12 col-xs-12" >
< rd-widget >
2016-10-27 06:55:44 +00:00
< rd-widget-custom-header icon = "state.selectedTemplate.logo" title = "state.selectedTemplate.image" >
2016-10-02 03:11:20 +00:00
< / rd-widget-custom-header >
2016-08-23 06:09:14 +00:00
< rd-widget-body classes = "padding" >
< form class = "form-horizontal" >
2016-12-15 03:33:47 +00:00
< div class = "form-group" ng-if = "globalNetworkCount === 0 && endpointMode.provider === 'DOCKER_SWARM'" >
2016-08-23 06:09:14 +00:00
< div class = "col-sm-12" >
< span class = "small text-muted" > When using Swarm, we recommend deploying containers in a shared network. Looks like you don't have any shared network, head over the < a ui-sref = "networks" > networks view< / a > to create one.< / span >
< / div >
< / div >
2016-12-15 03:33:47 +00:00
< div class = "form-group" ng-if = "endpointMode.provider === 'DOCKER_SWARM_MODE'" >
2016-09-23 04:54:58 +00:00
< div class = "col-sm-12" >
< i class = "fa fa-exclamation-triangle" aria-hidden = "true" > < / i >
< span class = "small text-muted" > App templates cannot be used with swarm-mode at the moment. You can still use them to quickly deploy containers to the Docker host.< / span >
< / div >
< / div >
2016-08-23 06:09:14 +00:00
<!-- name - and - network - inputs -->
< div class = "form-group" >
< label for = "image_registry" class = "col-sm-2 control-label text-left" > Name< / label >
< div class = "col-sm-4" >
< input type = "text" class = "form-control" ng-model = "formValues.name" placeholder = "e.g. web (optional)" >
< / div >
< label for = "container_network" class = "col-sm-2 control-label text-right" > Network< / label >
< div class = "col-sm-4" >
2016-08-24 06:32:54 +00:00
< select class = "selectpicker form-control" ng-options = "net.Name for net in availableNetworks" ng-model = "formValues.network" >
< option disabled hidden value = "" > Select a network< / option >
2016-08-23 06:09:14 +00:00
< / select >
< / div >
< / div >
<!-- !name - and - network - inputs -->
2016-10-27 06:55:44 +00:00
< div ng-repeat = "var in state.selectedTemplate.env" ng-if = "!var.set" class = "form-group" >
2016-08-24 06:32:54 +00:00
< label for = "field_{{ $index }}" class = "col-sm-2 control-label text-left" > {{ var.label }}< / label >
< div class = "col-sm-10" >
2016-12-15 03:33:47 +00:00
< select ng-if = "endpointMode.provider !== 'DOCKER_SWARM' && var.type === 'container'" ng-options = "container|containername for container in runningContainers" class = "selectpicker form-control" ng-model = "var.value" >
2016-08-24 06:32:54 +00:00
< option selected disabled hidden value = "" > Select a container< / option >
< / select >
2016-12-15 03:33:47 +00:00
< select ng-if = "endpointMode.provider === 'DOCKER_SWARM' && var.type === 'container'" ng-options = "container|swarmcontainername for container in runningContainers" class = "selectpicker form-control" ng-model = "var.value" >
2016-08-24 06:32:54 +00:00
< option selected disabled hidden value = "" > Select a container< / option >
< / select >
< input ng-if = "!var.type || !var.type === 'container'" type = "text" class = "form-control" ng-model = "var.value" id = "field_{{ $index }}" >
2016-08-23 06:09:14 +00:00
< / div >
< / div >
2016-10-27 06:55:44 +00:00
< div class = "form-group" >
< div class = "col-sm-12" >
< a class = "small interactive" ng-if = "!state.showAdvancedOptions" ng-click = "state.showAdvancedOptions = true;" >
2016-10-27 08:33:39 +00:00
< i class = "fa fa-plus space-right" aria-hidden = "true" > < / i > Show advanced options
2016-10-27 06:55:44 +00:00
< / a >
< a class = "small interactive" ng-if = "state.showAdvancedOptions" ng-click = "state.showAdvancedOptions = false;" >
2016-10-27 08:33:39 +00:00
< i class = "fa fa-minus space-right" aria-hidden = "true" > < / i > Hide advanced options
2016-10-27 06:55:44 +00:00
< / a >
< / div >
< / div >
< div class = "form-group" ng-if = "state.showAdvancedOptions" >
< label for = "container_ports" class = "col-sm-1 control-label text-left" > Port mapping< / label >
< div class = "col-sm-11" style = "margin-top: 5px;" >
2016-10-27 08:33:39 +00:00
< span class = "label label-default interactive" ng-click = "addPortBinding()" >
2016-10-27 06:55:44 +00:00
< i class = "fa fa-plus-circle" aria-hidden = "true" > < / i > map additional port
< / span >
< / div >
<!-- port - mapping - input - list -->
< div class = "col-sm-offset-1 col-sm-11 form-inline" style = "margin-top: 10px;" >
< div ng-repeat = "portBinding in formValues.ports" style = "margin-top: 2px;" >
< div class = "input-group col-sm-5 input-group-sm" >
< span class = "input-group-addon" > host< / span >
< input type = "text" class = "form-control" ng-model = "portBinding.hostPort" placeholder = "e.g. 80 or 1.2.3.4:80 (optional)" >
< / div >
< div class = "input-group col-sm-5 input-group-sm" >
< span class = "input-group-addon" > container< / span >
< input type = "text" class = "form-control" ng-model = "portBinding.containerPort" placeholder = "e.g. 80" >
< / div >
< div class = "input-group col-sm-1 input-group-sm" >
< select class = "selectpicker form-control" ng-model = "portBinding.protocol" >
< option value = "tcp" > tcp< / option >
< option value = "udp" > udp< / option >
< / select >
< span class = "input-group-btn" >
< button class = "btn btn-default" type = "button" ng-click = "removePortBinding($index)" >
< i class = "fa fa-minus" aria-hidden = "true" > < / i >
< / button >
< / span >
< / div >
< / div >
< / div >
<!-- !port - mapping - input - list -->
< / div >
<!-- !port - mapping -->
2016-10-02 03:11:20 +00:00
< div class = "form-group" >
< div class = "col-sm-12" >
< button type = "button" class = "btn btn-default btn-sm" ng-disabled = "!formValues.network" ng-click = "createTemplate()" > Create< / button >
< i id = "createContainerSpinner" class = "fa fa-cog fa-spin" style = "margin-left: 5px; display: none;" > < / i >
< / div >
< / div >
2016-08-23 06:09:14 +00:00
< / form >
< / rd-widget-body >
< / rd-widget >
< / div >
< / div >
2016-10-27 06:55:44 +00:00
< div class = "row" ng-if = "state.selectedTemplate" >
2016-10-02 03:11:20 +00:00
< / div >
< div class = "row" >
< div class = "col-lg-12 col-md-12 col-xs-12" >
< rd-widget >
< rd-widget-header icon = "fa-rocket" title = "Available templates" >
< div class = "pull-right" >
< i id = "loadTemplatesSpinner" class = "fa fa-cog fa-2x fa-spin" style = "margin-top: 5px;" > < / i >
< / div >
< / rd-widget-header >
< rd-widget-body classes = "padding" >
< div class = "template-list" >
2016-11-22 00:21:36 +00:00
< div dir-paginate = "tpl in templates | itemsPerPage: pagination_count" class = "container-template hvr-underline-from-center" id = "template_{{ tpl.index }}" ng-click = "selectTemplate(tpl.index)" >
2016-10-02 03:11:20 +00:00
< img class = "logo" ng-src = "{{ tpl.logo }}" / >
< div class = "title" > {{ tpl.title }}< / div >
< div class = "description" > {{ tpl.description }}< / div >
< / div >
2016-10-08 21:49:24 +00:00
< div ng-if = "!templates" class = "text-center text-muted" >
Loading...
< / div >
2016-10-07 04:55:09 +00:00
< div ng-if = "templates.length == 0" class = "text-center text-muted" >
No templates available.
< / div >
2016-10-02 03:11:20 +00:00
< / div >
2016-11-17 12:50:46 +00:00
< div ng-if = "templates" >
< dir-pagination-controls > < / dir-pagination-controls >
< / div >
2016-10-02 03:11:20 +00:00
< / rd-widget-body >
< / rd-widget >
2016-08-23 06:09:14 +00:00
< / div >
< / div >