From 35dbacdfffcf10f4612fc39612aa852437a3c240 Mon Sep 17 00:00:00 2001
From: Roman Usachev <ramzeska@gmail.com>
Date: Tue, 23 Feb 2016 20:47:21 +0300
Subject: [PATCH] Port bindings edit, HostConfig fix

---
 app/components/container/container.html       | 61 +++++++++++++++----
 .../container/containerController.js          | 19 ++++--
 2 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/app/components/container/container.html b/app/components/container/container.html
index 95ba886d4..8754845a5 100644
--- a/app/components/container/container.html
+++ b/app/components/container/container.html
@@ -76,37 +76,43 @@
         <tr>
             <td>Environment:</td>
             <td>
-                <div class="form-group">
+                <div ng-show="!edit">
+                    <button class="btn btn-default btn-xs pull-right" ng-click="toggleEdit()"><i class="glyphicon glyphicon-pencil"></i></button>
+                    <ul>
+                        <li ng-repeat="k in container.Config.Env">{{ k }}</li>
+                    </ul>
+                </div>
+                <div class="form-group" ng-show="edit">
                     <label>Env:</label>
 
                     <div ng-repeat="envar in newCfg.Env">
                         <div class="form-group form-inline">
                             <div class="form-group">
                                 <label class="sr-only">Variable Name:</label>
-                                <input type="text" ng-model="envar.name" class="form-control"
+                                <input type="text" ng-model="envar.name" class="form-control input-sm"
                                        placeholder="NAME"/>
                             </div>
                             <div class="form-group">
                                 <label class="sr-only">Variable Value:</label>
-                                <input type="text" ng-model="envar.value" class="form-control"
+                                <input type="text" ng-model="envar.value" class="form-control input-sm" style="width: 400px"
                                        placeholder="value"/>
                             </div>
                             <div class="form-group">
-                                <button class="btn btn-danger btn-xs form-control"
-                                        ng-click="rmEntry(newCfg.Env, envar)">Remove
+                                <button class="btn btn-danger btn-sm input-sm form-control"
+                                        ng-click="rmEntry(newCfg.Env, envar)"><i class="glyphicon glyphicon-remove"></i>
                                 </button>
                             </div>
                         </div>
                     </div>
                     <button type="button" class="btn btn-success btn-sm"
-                            ng-click="addEntry(newCfg.Env, {name: '', value: ''})">Add environment
-                        variable
+                            ng-click="addEntry(newCfg.Env, {name: '', value: ''})"><i class="glyphicon glyphicon-plus"></i> Add
                     </button>
+                    <button class="btn btn-primary btn-sm"
+                            ng-click="restartEnv()"
+                            ng-show="!container.State.Restarting">Commit and restart</button>
                 </div>
 
-                <button class="btn btn-success"
-                        ng-click="restartEnv()"
-                        ng-show="!container.State.Restarting">Restart with new env</button>
+
             </td>
         </tr>
         <tr>
@@ -132,11 +138,42 @@
         <tr>
             <td>Ports:</td>
             <td>
-                <ul style="display:inline-table">
+                <div ng-show="!edit">
+                    <button class="btn btn-default btn-xs pull-right" ng-click="toggleEdit()"><i class="glyphicon glyphicon-pencil"></i></button>
+                    <ul>
                     <li ng-repeat="(containerport, hostports) in container.NetworkSettings.Ports">
-                        {{ containerport }} => <span class="label label-default" ng-repeat="(k,v) in hostports">{{ v.HostIp }}:{{ v.HostPort }}</span>
+                        {{ containerport }} =>
+                        <span class="label label-default" style="margin-right: 5px;" ng-repeat="(k,v) in hostports">{{ v.HostIp }}:{{ v.HostPort }}</span>
                     </li>
                 </ul>
+                </div>
+                <div ng-show="edit">
+                    <div ng-repeat="(containerport, hostports) in newCfg.NetworkSettings.Ports" style="margin-bottom: 5px;">
+                        <label>{{ containerport }}</label>
+                        <div style="margin-left: 20px;">
+                            <div ng-repeat="(k,v) in hostports" class="form-group form-inline">
+                                <div class="form-group">
+                                    <input type="text" ng-model="v.HostIp" class="form-control input-sm" placeholder="IP address, ex. 0.0.0.0" />
+                                </div>
+                                <div class="form-group">
+                                    <input type="text" ng-model="v.HostPort" class="form-control input-sm"
+                                           placeholder="Port" />
+                                </div>
+                                <div class="form-group">
+                                    <button class="btn btn-danger btn-sm input-sm form-control"
+                                            ng-click="rmEntry(hostports, v)"><i class="glyphicon glyphicon-remove"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <button type="button" class="btn btn-success btn-sm"
+                                ng-click="addEntry(hostports, {HostIp: '0.0.0.0', HostPort: ''})"><i class="glyphicon glyphicon-plus"></i> Add
+                        </button>
+                    </div>
+                    <button class="btn btn-primary btn-sm"
+                            ng-click="restartEnv()"
+                            ng-show="!container.State.Restarting">Commit and restart</button>
+                </div>
             </td>
 
         </tr>
diff --git a/app/components/container/containerController.js b/app/components/container/containerController.js
index 0c0c516d4..ef3a7f3c2 100644
--- a/app/components/container/containerController.js
+++ b/app/components/container/containerController.js
@@ -4,7 +4,8 @@ angular.module('container', [])
             $scope.changes = [];
             $scope.edit = false;
             $scope.newCfg = {
-                Env: []
+                Env: [],
+                NetworkSettings: {}
             };
 
             var update = function () {
@@ -16,6 +17,8 @@ angular.module('container', [])
                     $scope.newCfg.Env = d.Config.Env.map(function(entry) {
                         return {name: entry.split('=')[0], value: entry.split('=')[1]};
                     });
+                    $scope.newCfg.NetworkSettings.Ports = angular.copy(d.NetworkSettings.Ports) || [];
+                    angular.forEach($scope.newCfg.NetworkSettings.Ports, function(conf, port, arr) { arr[port] = conf || []; });
 
                     ViewSpinner.stop();
                 }, function (e) {
@@ -73,19 +76,19 @@ angular.module('container', [])
                     return entry.name+"="+entry.value;
                 });
 
-                console.log(config);
-
+                var portBindings = angular.copy($scope.newCfg.NetworkSettings.Ports);
 
 
                 ViewSpinner.spin();
                 ContainerCommit.commit({id: $routeParams.id, tag: $scope.container.Config.Image, config: config }, function (d) {
-                    console.log(d.Id);
                     if ('Id' in d) {
                         var imageId = d.Id;
                         Image.inspect({id: imageId}, function(imageData) {
-                            console.log(imageData);
+                            // Append current host config to image with new port bindings
+                            imageData.Config.HostConfig = angular.copy($scope.container.HostConfig);
+                            imageData.Config.HostConfig.PortBindings = portBindings;
+
                             Container.create(imageData.Config, function(containerData) {
-                               console.log(containerData);
                                 // Stop current if running
                                 if ($scope.container.State.Running) {
                                     Container.stop({id: $routeParams.id}, function (d) {
@@ -229,6 +232,10 @@ angular.module('container', [])
                 array.splice(idx, 1);
             };
 
+            $scope.toggleEdit = function() {
+                $scope.edit = !$scope.edit;
+            };
+
             update();
             $scope.getChanges();
         }]);