feat(container-console): improve container console UX (#1031)

app/components/containerConsole/containerConsole.html

@@ -60,7 +60,7 @@
             </div>
           </div>
           <div ng-if="state.connected">
-            <label>Connected as {{::state.user || 'root'}}</label>
+            <label>Exec into container as <code>{{ ::formValues.user || 'default user' }}</code> using command <code>{{ formValues.isCustomCommand ? formValues.customCommand : formValues.command }}</code></label>
             <button type="button" class="btn btn-default" ng-click="disconnect()">Disconnect</button>
           </div>
         </form>

app/components/containerConsole/containerConsoleController.js

@@ -1,6 +1,6 @@
 angular.module('containerConsole', [])
-.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Container', 'Image', 'Exec', '$timeout', 'EndpointProvider', 'Notifications', 'ContainerHelper',
-function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvider, Notifications, ContainerHelper) {
+.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Container', 'Image', 'EndpointProvider', 'Notifications', 'ContainerHelper', 'ContainerService', 'ExecService',
+function ($scope, $stateParams, Container, Image, EndpointProvider, Notifications, ContainerHelper, ContainerService, ExecService) {
   $scope.state = {};
   $scope.state.loaded = false;
   $scope.state.connected = false;
@@ -52,13 +52,10 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
       Cmd: ContainerHelper.commandStringToArray(command)
     };
 
-    Container.exec(execConfig, function(d) {
-      if (d.message) {
-        $('#loadConsoleSpinner').hide();
-        Notifications.error('Error', {}, d.message);
-      } else {
-        var execId = d.Id;
-        resizeTTY(execId, termHeight, termWidth);
+    var execId;
+    ContainerService.createExec(execConfig)
+    .then(function success(data) {
+      execId = data.Id;
       var url = window.location.href.split('#')[0] + 'api/websocket/exec?id=' + execId + '&endpointId=' + EndpointProvider.endpointID();
       if (url.indexOf('https') > -1) {
         url = url.replace('https://', 'wss://');
@@ -66,10 +63,13 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
         url = url.replace('http://', 'ws://');
       }
       initTerm(url, termHeight, termWidth);
-      }
-    }, function (e) {
+      return ExecService.resizeTTY(execId, termHeight, termWidth, 2000);
+    })
+    .catch(function error(err) {
+      Notifications.error('Failure', err, 'Unable to exec into container');
+    })
+    .finally(function final() {
       $('#loadConsoleSpinner').hide();
-      Notifications.error('Failure', e, 'Unable to start an exec instance');
     });
   };
 
@@ -83,19 +83,6 @@ function ($scope, $stateParams, Container, Image, Exec, $timeout, EndpointProvid
     }
   };
 
-  function resizeTTY(execId, height, width) {
-    $timeout(function() {
-      Exec.resize({id: execId, height: height, width: width}, function (d) {
-        if (d.message) {
-          Notifications.error('Error', {}, 'Unable to resize TTY');
-        }
-      }, function (e) {
-        Notifications.error('Failure', {}, 'Unable to resize TTY');
-      });
-    }, 2000);
-
-  }
-
   function initTerm(url, height, width) {
     socket = new WebSocket(url);
 

app/services/docker/containerService.js

@@ -87,5 +87,23 @@ angular.module('portainer.services')
     return deferred.promise;
   };
 
+  service.createExec = function(execConfig) {
+    var deferred = $q.defer();
+
+    Container.exec(execConfig).$promise
+    .then(function success(data) {
+      if (data.message) {
+        deferred.reject({ msg: data.message, err: data.message });
+      } else {
+        deferred.resolve(data);
+      }
+    })
+    .catch(function error(err) {
+      deferred.reject(err);
+    });
+
+    return deferred.promise;
+  };
+
   return service;
 }]);

app/services/docker/execService.js

@@ -0,0 +1,27 @@
+angular.module('portainer.services')
+.factory('ExecService', ['$q', '$timeout', 'Exec', function ExecServiceFactory($q, $timeout, Exec) {
+  'use strict';
+  var service = {};
+
+  service.resizeTTY = function(execId, height, width, timeout) {
+    var deferred = $q.defer();
+
+    $timeout(function() {
+      Exec.resize({id: execId, height: height, width: width}).$promise
+      .then(function success(data) {
+        if (data.message) {
+          deferred.reject({ msg: 'Unable to exec into container', err: data.message });
+        } else {
+          deferred.resolve(data);
+        }
+      })
+      .catch(function error(err) {
+        deferred.reject({ msg: 'Unable to exec into container', err: err });
+      });
+    }, timeout);
+
+    return deferred.promise;
+  };
+
+  return service;
+}]);