From e5396091a731520479fe9ad5e077d58cdfa6390e Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Wed, 26 Oct 2016 16:29:29 +1300
Subject: [PATCH] feat(console): automatically determine command presets based
 on container image OS (#284)

---
 .../containerConsole/containerConsole.html    | 35 ++++++++++++-------
 .../containerConsoleController.js             | 33 ++++++++++++-----
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/app/components/containerConsole/containerConsole.html b/app/components/containerConsole/containerConsole.html
index 751bf738e..2ddf233fd 100644
--- a/app/components/containerConsole/containerConsole.html
+++ b/app/components/containerConsole/containerConsole.html
@@ -2,12 +2,12 @@
   <rd-header-title title="Container console">
     <i id="loadingViewSpinner" class="fa fa-cog fa-spin"></i>
   </rd-header-title>
-  <rd-header-content>
+  <rd-header-content ng-if="state.loaded">
     Containers > <a ui-sref="container({id: container.Id})">{{ container.Name|trimcontainername }}</a> > Console
   </rd-header-content>
 </rd-header>
 
-<div class="row">
+<div class="row" ng-if="state.loaded">
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-terminal" title="Console">
@@ -16,18 +16,27 @@
         </div>
       </rd-widget-header>
       <rd-widget-body>
-        <form class="form-horizontal">
-          <!-- command-list -->
-          <div class="form-group">
-            <div class="col-sm-3">
-              <select class="selectpicker form-control" ng-model="state.command">
-                <option value="bash">/bin/bash</option>
-                <option value="sh">/bin/sh</option>
-              </select>
+        <form>
+          <div class="row">
+            <!-- command-list -->
+            <div class="col-sm-4">
+              <div class="input-group">
+                <span class="input-group-addon">
+                  <i class="fa fa-linux" aria-hidden="true" ng-if="imageOS == 'linux'"></i>
+                  <i class="fa fa-windows" aria-hidden="true" ng-if="imageOS == 'windows'"></i>
+                </span>
+                <select class="form-control" ng-model="state.command" id="command">
+                  <option value="bash" ng-if="imageOS == 'linux'">/bin/bash</option>
+                  <option value="sh" ng-if="imageOS == 'linux'">/bin/sh</option>
+                  <option value="powershell" ng-if="imageOS == 'windows'">powershell</option>
+                  <option value="cmd.exe" ng-if="imageOS == 'windows'">cmd.exe</option>
+                </select>
+              </div>
             </div>
-            <div class="col-sm-9 pull-left">
-              <button type="button" class="btn btn-primary" ng-click="connect()" ng-disabled="connected">Connect</button>
-              <button type="button" class="btn btn-default" ng-click="disconnect()" ng-disabled="!connected">Disconnect</button>
+            <!-- !command-list -->
+            <div class="col-sm-8">
+              <button type="button" class="btn btn-primary" ng-click="connect()" ng-disabled="state.connected">Connect</button>
+              <button type="button" class="btn btn-default" ng-click="disconnect()" ng-disabled="!state.connected">Disconnect</button>
             </div>
           </div>
         </form>
diff --git a/app/components/containerConsole/containerConsoleController.js b/app/components/containerConsole/containerConsoleController.js
index c02a0a84c..1804ef1ca 100644
--- a/app/components/containerConsole/containerConsoleController.js
+++ b/app/components/containerConsole/containerConsoleController.js
@@ -1,9 +1,9 @@
 angular.module('containerConsole', [])
-.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Settings', 'Container', 'Exec', '$timeout', 'Messages',
-function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
+.controller('ContainerConsoleController', ['$scope', '$stateParams', 'Settings', 'Container', 'Image', 'Exec', '$timeout', 'Messages',
+function ($scope, $stateParams, Settings, Container, Image, Exec, $timeout, Messages) {
   $scope.state = {};
-  $scope.state.command = "bash";
-  $scope.connected = false;
+  $scope.state.loaded = false;
+  $scope.state.connected = false;
 
   var socket, term;
 
@@ -16,6 +16,22 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
 
   Container.get({id: $stateParams.id}, function(d) {
     $scope.container = d;
+    if (d.message) {
+      Messages.error("Error", d, 'Unable to retrieve container details');
+      $('#loadingViewSpinner').hide();
+    } else {
+      Image.get({id: d.Image}, function(imgData) {
+        $scope.imageOS = imgData.Os;
+        $scope.state.command = imgData.Os === 'windows' ? 'powershell' : 'bash';
+        $scope.state.loaded = true;
+        $('#loadingViewSpinner').hide();
+      }, function (e) {
+        Messages.error("Failure", e, 'Unable to retrieve image details');
+        $('#loadingViewSpinner').hide();
+      });
+    }
+  }, function (e) {
+    Messages.error("Failure", e, 'Unable to retrieve container details');
     $('#loadingViewSpinner').hide();
   });
 
@@ -54,7 +70,7 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
   };
 
   $scope.disconnect = function() {
-    $scope.connected = false;
+    $scope.state.connected = false;
     if (socket !== null) {
       socket.close();
     }
@@ -79,7 +95,7 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
   function initTerm(url, height, width) {
     socket = new WebSocket(url);
 
-    $scope.connected = true;
+    $scope.state.connected = true;
     socket.onopen = function(evt) {
       $('#loadConsoleSpinner').hide();
       term = new Terminal();
@@ -95,11 +111,10 @@ function ($scope, $stateParams, Settings, Container, Exec, $timeout, Messages) {
         term.write(e.data);
       };
       socket.onerror = function (error) {
-        $scope.connected = false;
-
+        $scope.state.connected = false;
       };
       socket.onclose = function(evt) {
-        $scope.connected = false;
+        $scope.state.connected = false;
       };
     };
   }