From 0b74b4177d7cd8c44c622ece9b08446ebfd91115 Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinnyi@codenvy.com>
Date: Thu, 15 Sep 2016 20:04:51 +0300
Subject: [PATCH] CHE-2451: workspace environment page enhancement

Signed-off-by: Oleksii Kurinnyi <okurinnyi@codenvy.com>
---
 .../environments/environments.controller.js   |  6 +++-
 .../environments/environments.directive.js    |  1 +
 .../environments/environments.html            | 29 ++++++++++---------
 .../machine-config.controller.js              | 10 ++++++-
 .../machine-config/machine-config.html        | 28 +++++++++++-------
 .../machine-config/machine-config.styl        |  4 +++
 .../workspace-details.controller.js           |  3 +-
 .../workspace-details/workspace-details.html  |  2 +-
 8 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/dashboard/src/app/workspaces/workspace-details/environments/environments.controller.js b/dashboard/src/app/workspaces/workspace-details/environments/environments.controller.js
index 8a37c4fd69fc..05660a92a1d7 100644
--- a/dashboard/src/app/workspaces/workspace-details/environments/environments.controller.js
+++ b/dashboard/src/app/workspaces/workspace-details/environments/environments.controller.js
@@ -40,6 +40,8 @@ export class WorkspaceEnvironmentsController {
       }
     };
 
+    this.machinesViewStatus = {};
+
     this.init();
   }
 
@@ -84,7 +86,9 @@ export class WorkspaceEnvironmentsController {
   updateEnvironmentConfig() {
     let newEnvironment = this.environmentManager.getEnvironment(this.environment, this.machines);
     this.workspaceConfig.environments[this.newEnvironmentName] = newEnvironment;
-    return this.doUpdateEnvironments();
+    return this.doUpdateEnvironments().then(() => {
+      this.init();
+    });
   }
 
   /**
diff --git a/dashboard/src/app/workspaces/workspace-details/environments/environments.directive.js b/dashboard/src/app/workspaces/workspace-details/environments/environments.directive.js
index 744073a9e0f7..0199eec94809 100644
--- a/dashboard/src/app/workspaces/workspace-details/environments/environments.directive.js
+++ b/dashboard/src/app/workspaces/workspace-details/environments/environments.directive.js
@@ -40,6 +40,7 @@ export class WorkspaceEnvironments {
 
     this.scope = {
       environmentName: '=',
+      environmentViewStatus: '=',
       workspaceConfig: '=',
       environmentOnChange: '&'
     }
diff --git a/dashboard/src/app/workspaces/workspace-details/environments/environments.html b/dashboard/src/app/workspaces/workspace-details/environments/environments.html
index a765116a778e..3228a7880b5d 100644
--- a/dashboard/src/app/workspaces/workspace-details/environments/environments.html
+++ b/dashboard/src/app/workspaces/workspace-details/environments/environments.html
@@ -38,8 +38,23 @@
     </ng-form>
   </che-label-container>
 
+  <!-- Machines -->
+  <che-label-container ng-if="workspaceEnvironmentsController.environment.machines.length"
+                       che-label-name="Machines"
+                       class="che-label-container-last">
+  </che-label-container>
+  <workspace-machine-config ng-repeat="machine in workspaceEnvironmentsController.machines"
+                            machine-name="machine.name"
+                            machines-list="workspaceEnvironmentsController.machines"
+                            environment-manager="workspaceEnvironmentsController.environmentManager"
+                            machine-name-on-change="workspaceEnvironmentsController.updateMachineName(oldName,newName)"
+                            machine-config-on-change="workspaceEnvironmentsController.updateEnvironmentConfig()"
+                            machine-on-delete="workspaceEnvironmentsController.deleteMachine(name)"
+                            machine-is-opened="workspaceEnvironmentsController.machinesViewStatus[machine.name]"></workspace-machine-config>
+
   <!-- Recipe Content-->
   <che-label-container che-label-name="Recipe"
+                       che-label-description="The contents of the runtime started by the workspace."
                        ng-if="workspaceEnvironmentsController.environment.recipe.content">
     <div layout="row" layout-wrap>
       <div flex class="recipe-editor">
@@ -56,18 +71,4 @@
                    che-copy-clipboard="true"
                    class="recipe-location"></che-text-info>
   </che-label-container>
-
-  <!-- Machines -->
-  <che-label-container ng-if="workspaceEnvironmentsController.environment.machines.length"
-                       che-label-name="Machines"
-                       class="che-label-container-last">
-  </che-label-container>
-  <workspace-machine-config ng-repeat="machine in workspaceEnvironmentsController.machines"
-                            machine-name="machine.name"
-                            machines-list="workspaceEnvironmentsController.machines"
-                            environment-manager="workspaceEnvironmentsController.environmentManager"
-                            machine-name-on-change="workspaceEnvironmentsController.updateMachineName(oldName,newName)"
-                            machine-config-on-change="workspaceEnvironmentsController.updateEnvironmentConfig()"
-                            machine-on-delete="workspaceEnvironmentsController.deleteMachine(name)"
-                            machine-is-opened="$first"></workspace-machine-config>
 </div>
diff --git a/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.controller.js b/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.controller.js
index 78ab8a2d62cc..1f92c54c8dc8 100644
--- a/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.controller.js
+++ b/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.controller.js
@@ -65,7 +65,7 @@ export class WorkspaceMachineConfigController {
   /**
    * Modifies agents list in order to add or remove 'ws-agent'
    */
-  updateDev() {
+  enableDev() {
     this.$timeout.cancel(this.timeoutPromise);
 
     if (this.machineConfig.isDev === this.newDev) {
@@ -73,6 +73,14 @@ export class WorkspaceMachineConfigController {
     }
 
     this.timeoutPromise = this.$timeout(() => {
+      // remove ws-agent from machine which is the dev machine now
+      this.machinesList.forEach((machine) => {
+        if (this.environmentManager.isDev(machine)) {
+          this.environmentManager.setDev(machine, false);
+        }
+      });
+
+      // add ws-agent to current machine agents list
       this.environmentManager.setDev(this.machine, this.newDev);
 
       this.doUpdateConfig().then(() => {
diff --git a/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.html b/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.html
index e9a70153e091..5e00fa1c2ef4 100644
--- a/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.html
+++ b/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.html
@@ -15,13 +15,16 @@
   <!-- Title -->
   <div class="config-title-row" layout="row"
        layout-align="start center"
-       flex>
-    <div ng-click="workspaceMachineConfigController.machineIsOpened=!workspaceMachineConfigController.machineIsOpened">
+       flex
+       ng-click="workspaceMachineConfigController.machineIsOpened=!workspaceMachineConfigController.machineIsOpened"
+       mouseover="hover=true" mouseout="hover=false">
+    <div>
       <i class="config-title-action-show fa"
          ng-class="{'fa-chevron-circle-down': workspaceMachineConfigController.machineIsOpened, 'fa-chevron-circle-up': !workspaceMachineConfigController.machineIsOpened}"></i>
     </div>
     <div class="config-title">{{workspaceMachineConfigController.machineName}}</div>
     <div class="config-title-action-edit"
+         tooltip="Edit"
          ng-if="workspaceMachineConfigController.machineConfig.canRenameMachine"
          ng-click="workspaceMachineConfigController.showEditDialog($event)">
       <i class="config-title-action-edit fa fa-pencil" aria-hidden="true"></i>
@@ -36,32 +39,35 @@
                          ng-if="workspaceMachineConfigController.machineConfig.source">
       <div class="config-paragraph">
         <p ng-repeat="(key, val) in workspaceMachineConfigController.machineConfig.source">
-          <span class="recipe-item-name" ng-hide="$first && $last">{{key}}:</span>{{val}}
+          <span class="recipe-item-name">{{key}}:</span>{{val}}
         </p>
       </div>
     </che-label-container>
 
     <!-- RAM -->
     <che-label-container che-label-name="RAM">
-      <ng-form flex layout="column" name="workspaceMachineConfigForm">
-        <che-workspace-ram-allocation-slider ng-model="workspaceMachineConfigController.newRam"
-                                             che-on-change="workspaceMachineConfigController.updateRam(workspaceMachineConfigForm.$valid)"></che-workspace-ram-allocation-slider>
-      </ng-form>
+      <div class="config-ram">
+        <ng-form flex layout="column" name="workspaceMachineConfigForm">
+          <che-workspace-ram-allocation-slider ng-model="workspaceMachineConfigController.newRam"
+                                               che-on-change="workspaceMachineConfigController.updateRam(workspaceMachineConfigForm.$valid)"></che-workspace-ram-allocation-slider>
+        </ng-form>
+      </div>
     </che-label-container>
 
     <!-- Is Dev -->
     <che-label-container che-label-name="Dev">
       <div class="config-dev-machine-switch">
         <md-switch ng-model="workspaceMachineConfigController.newDev"
-                   ng-change="workspaceMachineConfigController.updateDev()"
+                   ng-change="workspaceMachineConfigController.enableDev()"
+                   ng-disabled="workspaceMachineConfigController.machineConfig.isDev"
                    aria-label="Dev machine">
-          <span class="config-dev-machine-info">Used as dev machine, injects dev services into machine</span>
+          <span class="config-dev-machine-info">Injects terminal, SSH and IDE tooling.</span>
         </md-switch>
       </div>
     </che-label-container>
 
     <!-- Ports -->
-    <che-label-container che-label-name="Ports">
+    <che-label-container che-label-name="Exposed Ports">
       <div class="config-params-table">
         <list-ports servers="workspaceMachineConfigController.machineConfig.servers"
                     servers-on-change="workspaceMachineConfigController.updateServers()"></list-ports>
@@ -83,7 +89,7 @@
                          che-label-description="Environment should contain at least one machine."
                          ng-if="workspaceMachineConfigController.machineConfig.canDeleteMachine">
       <che-button-danger che-button-title="Delete"
-                         ng-disabled="workspaceMachineConfigController.machinesList.length === 1"
+                         ng-disabled="workspaceMachineConfigController.machineConfig.isDev"
                          ng-click="workspaceMachineConfigController.deleteMachine()"></che-button-danger>
     </che-label-container>
   </div>
diff --git a/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.styl b/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.styl
index db5da7e2373f..69058277be25 100644
--- a/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.styl
+++ b/dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.styl
@@ -8,6 +8,7 @@
   .config-title-row
     padding 15px 0
     border-bottom 1px solid $list-separator-color
+    cursor pointer
 
     .config-title
       padding 0 17px
@@ -36,6 +37,9 @@
       color $disabled-color
       margin-right 5px
 
+  .config-ram
+    margin-bottom -26px
+
   .config-params
     padding 0 70px
     background-color $light-gray-color
diff --git a/dashboard/src/app/workspaces/workspace-details/workspace-details.controller.js b/dashboard/src/app/workspaces/workspace-details/workspace-details.controller.js
index 3dd5ca41d398..0ad75060735f 100644
--- a/dashboard/src/app/workspaces/workspace-details/workspace-details.controller.js
+++ b/dashboard/src/app/workspaces/workspace-details/workspace-details.controller.js
@@ -177,6 +177,7 @@ export class WorkspaceDetailsController {
       defer.resolve();
       return defer.promise;
     }
+
     return this.doUpdateWorkspace();
   }
 
@@ -191,7 +192,7 @@ export class WorkspaceDetailsController {
     promise.then((data) => {
       this.workspaceName = data.config.name;
       this.updateWorkspaceData();
-      this.cheNotification.showInfo('Workspace is successfully updated.');
+      this.cheNotification.showInfo('Workspace updated.');
       return this.$location.path('/workspace/' + this.namespace + '/' + this.workspaceName);
     }, (error) => {
       this.isLoading = false;
diff --git a/dashboard/src/app/workspaces/workspace-details/workspace-details.html b/dashboard/src/app/workspaces/workspace-details/workspace-details.html
index 23c50b6deb66..52c0bafcf54e 100644
--- a/dashboard/src/app/workspaces/workspace-details/workspace-details.html
+++ b/dashboard/src/app/workspaces/workspace-details/workspace-details.html
@@ -104,7 +104,7 @@
     <!-- Environment tabs -->
     <md-tab ng-repeat="(environmentName, environmentValue) in workspaceDetailsCtrl.copyWorkspaceDetails.config.environments">
       <md-tab-label>
-        <span class="che-tab-label-title">Environments</span>
+        <span class="che-tab-label-title">Runtime</span>
       </md-tab-label>
       <md-tab-body>
         <workspace-environments environment-name="environmentName"