From d4f01451618d66b15347affe7af45834f20f36fb Mon Sep 17 00:00:00 2001 From: Anthony Lapenna Date: Thu, 27 Oct 2016 19:55:44 +1300 Subject: [PATCH] feat(templates): allow to edit template port mapping (#293) * feat(templates): allow to edit template port mapping * refactor(templates): remove advanced template configuration feature --- app/app.js | 3 - .../createContainerController.js | 17 ++---- app/components/templates/templates.html | 53 ++++++++++++++++-- .../templates/templatesController.js | 55 ++++++++++++++----- app/shared/helpers.js | 5 +- 5 files changed, 99 insertions(+), 34 deletions(-) diff --git a/app/app.js b/app/app.js index 435cd23af..5a1fda021 100644 --- a/app/app.js +++ b/app/app.js @@ -81,9 +81,6 @@ angular.module('portainer', [ }) .state('actions.create.container', { url: "/container", - params: { - template: null - }, templateUrl: 'app/components/createContainer/createcontainer.html', controller: 'CreateContainerController' }) diff --git a/app/components/createContainer/createContainerController.js b/app/components/createContainer/createContainerController.js index e71855c9e..94adb02ec 100644 --- a/app/components/createContainer/createContainerController.js +++ b/app/components/createContainer/createContainerController.js @@ -1,29 +1,25 @@ angular.module('createContainer', []) -.controller('CreateContainerController', ['$scope', '$state', '$stateParams', 'Config', 'Info', 'Container', 'Image', 'Volume', 'Network', 'TemplateHelper', 'Messages', -function ($scope, $state, $stateParams, Config, Info, Container, Image, Volume, Network, TemplateHelper, Messages) { - - if ($stateParams.template) { - $scope.template = $stateParams.template; - } +.controller('CreateContainerController', ['$scope', '$state', '$stateParams', 'Config', 'Info', 'Container', 'Image', 'Volume', 'Network', 'Messages', +function ($scope, $state, $stateParams, Config, Info, Container, Image, Volume, Network, Messages) { $scope.formValues = { alwaysPull: true, Console: 'none', - Volumes: $scope.template && $scope.template.volumes ? TemplateHelper.getVolumeBindings($scope.template.volumes) : [], + Volumes: [], Registry: '' }; $scope.imageConfig = {}; $scope.config = { - Image: $scope.template ? $scope.template.image : '', - Env: $scope.template && $scope.template.env ? TemplateHelper.getEnvBindings($scope.template.env) : [], + Image: '', + Env: [], ExposedPorts: {}, HostConfig: { RestartPolicy: { Name: 'no' }, - PortBindings: $scope.template ? TemplateHelper.getPortBindings($scope.template.ports) : [], + PortBindings: [], Binds: [], NetworkMode: 'bridge', Privileged: false @@ -237,5 +233,4 @@ function ($scope, $state, $stateParams, Config, Info, Container, Image, Volume, createContainer(config); } }; - }]); diff --git a/app/components/templates/templates.html b/app/components/templates/templates.html index ef953029d..29716599c 100644 --- a/app/components/templates/templates.html +++ b/app/components/templates/templates.html @@ -7,10 +7,10 @@ Templates -
+
- +
@@ -39,7 +39,7 @@
-
+
+
+
+ + Show advanced options + + + Hide advanced options + +
+
+
+ +
+ + map additional port + +
+ +
+
+
+ host + +
+
+ container + +
+
+ + + + +
+
+
+ +
+
-
@@ -64,7 +107,7 @@
-
+
diff --git a/app/components/templates/templatesController.js b/app/components/templates/templatesController.js index 3d8eb783b..179b256cc 100644 --- a/app/components/templates/templatesController.js +++ b/app/components/templates/templatesController.js @@ -1,14 +1,26 @@ angular.module('templates', []) -.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'Messages', -function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, Image, Volume, Network, Templates, Messages) { - $scope.selectedTemplate = null; +.controller('TemplatesController', ['$scope', '$q', '$state', '$filter', 'Config', 'Info', 'Container', 'ContainerHelper', 'Image', 'Volume', 'Network', 'Templates', 'TemplateHelper', 'Messages', +function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, Image, Volume, Network, Templates, TemplateHelper, Messages) { + $scope.state = { + selectedTemplate: null, + showAdvancedOptions: false + }; $scope.formValues = { network: "", - name: "" + name: "", + ports: [] }; var selectedItem = -1; + $scope.addPortBinding = function() { + $scope.formValues.ports.push({ hostPort: '', containerPort: '', protocol: 'tcp' }); + }; + + $scope.removePortBinding = function(index) { + $scope.formValues.ports.splice(index, 1); + }; + // TODO: centralize, already present in createContainerController function createContainer(config) { Container.create(config, function (d) { @@ -74,6 +86,26 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, }; } + function preparePortBindings(config, ports) { + var bindings = {}; + ports.forEach(function (portBinding) { + if (portBinding.containerPort) { + var key = portBinding.containerPort + "/" + portBinding.protocol; + var binding = {}; + if (portBinding.hostPort && portBinding.hostPort.indexOf(':') > -1) { + var hostAndPort = portBinding.hostPort.split(':'); + binding.HostIp = hostAndPort[0]; + binding.HostPort = hostAndPort[1]; + } else { + binding.HostPort = portBinding.hostPort; + } + bindings[key] = [binding]; + config.ExposedPorts[key] = {}; + } + }); + config.HostConfig.PortBindings = bindings; + } + function createConfigFromTemplate(template) { var containerConfig = getInitialConfiguration(); containerConfig.Image = template.image; @@ -95,12 +127,7 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, } }); } - if (template.ports) { - template.ports.forEach(function (p) { - containerConfig.ExposedPorts[p] = {}; - containerConfig.HostConfig.PortBindings[p] = [{ HostPort: ""}]; - }); - } + preparePortBindings(containerConfig, $scope.formValues.ports); return containerConfig; } @@ -128,7 +155,7 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, $scope.createTemplate = function() { $('#createContainerSpinner').show(); - var template = $scope.selectedTemplate; + var template = $scope.state.selectedTemplate; var containerConfig = createConfigFromTemplate(template); var imageConfig = { fromImage: template.image.split(':')[0], @@ -144,11 +171,13 @@ function ($scope, $q, $state, $filter, Config, Info, Container, ContainerHelper, $('#template_' + id).toggleClass("container-template--selected"); if (selectedItem === id) { selectedItem = -1; - $scope.selectedTemplate = null; + $scope.state.selectedTemplate = null; } else { $('#template_' + selectedItem).toggleClass("container-template--selected"); selectedItem = id; - $scope.selectedTemplate = $scope.templates[id]; + var selectedTemplate = $scope.templates[id]; + $scope.state.selectedTemplate = selectedTemplate; + $scope.formValues.ports = selectedTemplate.ports ? TemplateHelper.getPortBindings(selectedTemplate.ports) : []; } }; diff --git a/app/shared/helpers.js b/app/shared/helpers.js index 4f700b99d..87ba6873f 100644 --- a/app/shared/helpers.js +++ b/app/shared/helpers.js @@ -64,6 +64,7 @@ angular.module('portainer.helpers', []) }); return bindings; }, + //Not used atm, may prove useful later getVolumeBindings: function(volumes) { var bindings = []; volumes.forEach(function (volume) { @@ -71,6 +72,7 @@ angular.module('portainer.helpers', []) }); return bindings; }, + //Not used atm, may prove useful later getEnvBindings: function(env) { var bindings = []; env.forEach(function (envvar) { @@ -85,5 +87,4 @@ angular.module('portainer.helpers', []) return bindings; } }; -}]) -; +}]);