feat(templates): allow to edit template port mapping (#293)

* feat(templates): allow to edit template port mapping * refactor(templates): remove advanced template configuration feature
2016-10-27 19:55:44 +13:00 · 2016-10-27 19:55:44 +13:00 · d4f0145161
parent fa53339fea
commit d4f0145161
5 changed files with 99 additions and 34 deletions
--- 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'
    })
--- 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);
    }
  };
-
 }]);
--- a/app/components/templates/templates.html
+++ b/app/components/templates/templates.html
@ -7,10 +7,10 @@
  <rd-header-content>Templates</rd-header-content>
 </rd-header>

-<div class="row" ng-if="selectedTemplate">
+<div class="row" ng-if="state.selectedTemplate">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
-      <rd-widget-custom-header icon="selectedTemplate.logo" title="selectedTemplate.image">
+      <rd-widget-custom-header icon="state.selectedTemplate.logo" title="state.selectedTemplate.image">
      </rd-widget-custom-header>
      <rd-widget-body classes="padding">
        <form class="form-horizontal">
@ -39,7 +39,7 @@
            </div>
          </div>
          <!-- !name-and-network-inputs -->
-          <div ng-repeat="var in selectedTemplate.env" ng-if="!var.set" class="form-group">
+          <div ng-repeat="var in state.selectedTemplate.env" ng-if="!var.set" class="form-group">
            <label for="field_{{ $index }}" class="col-sm-2 control-label text-left">{{ var.label }}</label>
            <div class="col-sm-10">
              <select ng-if="(!swarm || swarm && swarm_mode) && var.type === 'container'" ng-options="container|containername for container in runningContainers" class="selectpicker form-control" ng-model="var.value">
@ -51,10 +51,53 @@
              <input ng-if="!var.type || !var.type === 'container'" type="text" class="form-control" ng-model="var.value" id="field_{{ $index }}">
            </div>
          </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <a class="small interactive" ng-if="!state.showAdvancedOptions" ng-click="state.showAdvancedOptions = true;">
+                <i class="fa fa-plus text-icon" aria-hidden="true"></i> Show advanced options
+              </a>
+              <a class="small interactive" ng-if="state.showAdvancedOptions" ng-click="state.showAdvancedOptions = false;">
+                <i class="fa fa-minus text-icon" aria-hidden="true"></i> Hide advanced options
+              </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;">
+              <span class="label label-default clickable" ng-click="addPortBinding()">
+                <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 -->
          <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>
-              <button type="button" class="btn btn-default btn-sm" ui-sref="actions.create.container({template: selectedTemplate})">Advanced configuration...</button>
              <i id="createContainerSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
            </div>
          </div>
@ -64,7 +107,7 @@
  </div>
 </div>

-<div class="row" ng-if="selectedTemplate">
+<div class="row" ng-if="state.selectedTemplate">

 </div>

--- 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) : [];
    }
  };

--- 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;
    }
  };
-}])
-;
+}]);