From 50d33a07dfea390260d63d6627eb542cdc23bb9c Mon Sep 17 00:00:00 2001
From: Roman Usachev <ramzeska@gmail.com>
Date: Wed, 24 Feb 2016 03:13:24 +0300
Subject: [PATCH] Filesystem binds edit

---
 app/components/container/container.html       | 50 ++++++++++++++--
 .../container/containerController.js          | 59 ++++++++++++++++++-
 2 files changed, 100 insertions(+), 9 deletions(-)

diff --git a/app/components/container/container.html b/app/components/container/container.html
index 419932e95..2ec08ef6c 100644
--- a/app/components/container/container.html
+++ b/app/components/container/container.html
@@ -76,13 +76,13 @@
         <tr>
             <td>Environment:</td>
             <td>
-                <div ng-show="!edit">
-                    <button class="btn btn-default btn-xs pull-right" ng-click="toggleEdit()"><i class="glyphicon glyphicon-pencil"></i></button>
+                <div ng-show="!editEnv">
+                    <button class="btn btn-default btn-xs pull-right" ng-click="editEnv = true"><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">
+                <div class="form-group" ng-show="editEnv">
                     <label>Env:</label>
 
                     <div ng-repeat="envar in newCfg.Env">
@@ -138,8 +138,8 @@
         <tr>
             <td>Ports:</td>
             <td>
-                <div ng-show="!edit">
-                    <button class="btn btn-default btn-xs pull-right" ng-click="toggleEdit()"><i class="glyphicon glyphicon-pencil"></i></button>
+                <div ng-show="!editPorts">
+                    <button class="btn btn-default btn-xs pull-right" ng-click="editPorts = true"><i class="glyphicon glyphicon-pencil"></i></button>
                     <ul>
                     <li ng-repeat="(containerport, hostports) in container.HostConfig.PortBindings">
                         {{ containerport }} =>
@@ -147,7 +147,7 @@
                     </li>
                 </ul>
                 </div>
-                <div ng-show="edit">
+                <div ng-show="editPorts">
                     <div ng-repeat="(containerport, hostports) in newCfg.Ports" style="margin-bottom: 5px;">
                         <label>{{ containerport }}</label>
                         <div style="margin-left: 20px;">
@@ -195,6 +195,44 @@
                 <pre>{{ container.Config.Entrypoint.join(' ') }}</pre>
             </td>
         </tr>
+        <tr>
+            <td>Bindings:</td>
+            <td>
+                <div ng-show="!editBinds">
+                    <button class="btn btn-default btn-xs pull-right" ng-click="editBinds = true"><i class="glyphicon glyphicon-pencil"></i></button>
+
+                    <ul>
+                        <li ng-repeat="b in container.HostConfig.Binds">{{ b }}</li>
+                    </ul>
+                </div>
+                <div ng-show="editBinds">
+                    <div ng-repeat="(vol, b) in newCfg.Binds" class="form-group form-inline">
+                        <div class="form-group">
+                            <input type="text" ng-model="b.HostPath" class="form-control input-sm"
+                                   placeholder="Host path or volume name" style="width: 250px;" />
+                        </div>
+                        <div class="form-group">
+                            <input type="text" ng-model="b.ContPath" ng-readonly="b.DefaultBind" class="form-control input-sm" placeholder="Container path" />
+                        </div>
+                        <div class="form-group">
+                            <label><input type="checkbox" ng-model="b.ReadOnly" /> read only</label>
+                        </div>
+                        <div class="form-group">
+                            <button class="btn btn-danger btn-sm input-sm form-control"
+                                    ng-click="rmEntry(newCfg.Binds, b)"><i class="glyphicon glyphicon-remove"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <button type="button" class="btn btn-success btn-sm"
+                            ng-click="addEntry(newCfg.Binds, { ContPath: '', HostPath: '', ReadOnly: false, DefaultBind: false })"><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>
+            </td>
+        </tr>
         <tr>
             <td>Volumes:</td>
             <td>{{ container.Volumes }}</td>
diff --git a/app/components/container/containerController.js b/app/components/container/containerController.js
index 9977ff37b..56881de7a 100644
--- a/app/components/container/containerController.js
+++ b/app/components/container/containerController.js
@@ -2,7 +2,9 @@ angular.module('container', [])
     .controller('ContainerController', ['$scope', '$routeParams', '$location', 'Container', 'ContainerCommit', 'Image', 'Messages', 'ViewSpinner', '$timeout',
         function ($scope, $routeParams, $location, Container, ContainerCommit, Image, Messages, ViewSpinner, $timeout) {
             $scope.changes = [];
-            $scope.edit = false;
+            $scope.editEnv = false;
+            $scope.editPorts = false;
+            $scope.editBinds = false;
             $scope.newCfg = {
                 Env: [],
                 Ports: {}
@@ -14,11 +16,46 @@ angular.module('container', [])
                     $scope.container = d;
                     $scope.container.edit = false;
                     $scope.container.newContainerName = d.Name;
+
+                    // fill up env
                     $scope.newCfg.Env = d.Config.Env.map(function(entry) {
                         return {name: entry.split('=')[0], value: entry.split('=')[1]};
                     });
-                    $scope.newCfg.Ports = angular.copy(d.HostConfig.PortBindings) || [];
-                    angular.forEach($scope.newCfg.Ports, function(conf, port, arr) { arr[port] = conf || []; });
+
+                    // fill up ports
+                    $scope.newCfg.Ports = {};
+                    angular.forEach(d.Config.ExposedPorts, function(i, port) {
+                        $scope.newCfg.Ports[port] = d.HostConfig.PortBindings[port] || [];
+                    });
+                    //angular.forEach($scope.newCfg.Ports, function(conf, port, arr) { arr[port] = conf || []; });
+
+                    // fill up bindings
+                    $scope.newCfg.Binds = [];
+                    var defaultBinds = {};
+                    angular.forEach(d.Config.Volumes, function(value, vol) {
+                        defaultBinds[vol] = { ContPath: vol, HostPath: '', ReadOnly: false, DefaultBind: true };
+                    });
+                    angular.forEach(d.HostConfig.Binds, function(binding, i) {
+                        var mountpoint = binding.split(':')[0];
+                        var vol = binding.split(':')[1] || '';
+                        var ro = binding.split(':').length > 2 && binding.split(':')[2] == 'ro';
+                        var defaultBind = false;
+                        if (vol == '') {
+                            vol = mountpoint;
+                            mountpoint = '';
+                        }
+
+                        if (vol in defaultBinds) {
+                            delete defaultBinds[vol];
+                            defaultBind = true;
+                        }
+                        $scope.newCfg.Binds.push({ ContPath: vol, HostPath: mountpoint, ReadOnly: ro, DefaultBind: defaultBind });
+                    });
+                    angular.forEach(defaultBinds, function(bind) {
+                        $scope.newCfg.Binds.push(bind);
+                    });
+
+                    console.log($scope.newCfg);
 
                     ViewSpinner.stop();
                 }, function (e) {
@@ -78,6 +115,21 @@ angular.module('container', [])
 
                 var portBindings = angular.copy($scope.newCfg.Ports);
 
+                var binds = [];
+                angular.forEach($scope.newCfg.Binds, function(b) {
+                    if (b.ContPath != '') {
+                        var bindLine = '';
+                        if (b.HostPath != '') {
+                            bindLine = b.HostPath + ':';
+                        }
+                        bindLine += b.ContPath;
+                        if (b.ReadOnly) {
+                            bindLine += ':ro';
+                        }
+                        binds.push(bindLine);
+                    }
+                });
+
 
                 ViewSpinner.spin();
                 ContainerCommit.commit({id: $routeParams.id, tag: $scope.container.Config.Image, config: config }, function (d) {
@@ -87,6 +139,7 @@ angular.module('container', [])
                             // Append current host config to image with new port bindings
                             imageData.Config.HostConfig = angular.copy($scope.container.HostConfig);
                             imageData.Config.HostConfig.PortBindings = portBindings;
+                            imageData.Config.HostConfig.Binds = binds;
 
                             Container.create(imageData.Config, function(containerData) {
                                 // Stop current if running