CHE-2478: add editing mode in workspace view

dashboard/src/app/index.module.ts

@@ -235,6 +235,12 @@ initModule.config(($mdThemingProvider, jsonColors) => {
   });
   $mdThemingProvider.definePalette('cheWarning', cheWarningMap);
 
+  var cheGreenMap = $mdThemingProvider.extendPalette('green', {
+    'A100': '#46AF00',
+    'contrastDefaultColor': 'light'
+  });
+  $mdThemingProvider.definePalette('cheGreen', cheGreenMap);
+
   var cheDefaultMap = $mdThemingProvider.extendPalette('blue', {
     'A400': getColor('$che-medium-blue-color')
   });
@@ -245,7 +251,6 @@ initModule.config(($mdThemingProvider, jsonColors) => {
   });
   $mdThemingProvider.definePalette('cheNotice', cheNoticeMap);
 
-
   var cheAccentMap = $mdThemingProvider.extendPalette('blue', {
     '700': getColor('$che-medium-blue-color'),
     'A400': getColor('$che-medium-blue-color'),
@@ -291,13 +296,21 @@ initModule.config(($mdThemingProvider, jsonColors) => {
     .accentPalette('cheWarning')
     .backgroundPalette('grey');
 
+  $mdThemingProvider.theme('chesave')
+    .primaryPalette('green')
+    .accentPalette('cheGreen')
+    .backgroundPalette('grey');
+
+  $mdThemingProvider.theme('checancel')
+    .primaryPalette('che')
+    .accentPalette('cheGrey')
+    .backgroundPalette('grey');
 
   $mdThemingProvider.theme('chedefault')
     .primaryPalette('che')
     .accentPalette('cheDefault')
     .backgroundPalette('grey');
 
-
   $mdThemingProvider.theme('chenotice')
     .primaryPalette('che')
     .accentPalette('cheNotice')

dashboard/src/app/workspaces/workspace-details/environments/environments.controller.ts

@@ -17,12 +17,26 @@
  * @author Oleksii Kurinnyi
  */
 export class WorkspaceEnvironmentsController {
+  cheEnvironmentRegistry;
+  environmentManager;
+
+  editorOptions;
+
+  workspaceConfig;
+  environment;
+  environmentName: string;
+  newEnvironmentName: string;
+  recipeType: string;
+  machines: Array<any>;
+  machinesViewStatus;
+
+  environmentOnChange;
 
   /**
    * Default constructor that is using resource injection
    * @ngInject for Dependency injection
    */
-  constructor($timeout, cheEnvironmentRegistry) {
+  constructor($scope, $timeout, cheEnvironmentRegistry) {
     this.cheEnvironmentRegistry = cheEnvironmentRegistry;
 
     this.editorOptions = {
@@ -37,9 +51,11 @@ export class WorkspaceEnvironmentsController {
       }
     };
 
-    this.machinesViewStatus = {};
-
-    this.init();
+    $scope.$watch(() => {
+      return this.workspaceConfig.environments;
+    }, () => {
+      this.init();
+    });
   }
 
   /**
@@ -55,6 +71,10 @@ export class WorkspaceEnvironmentsController {
     this.editorOptions.mode = this.environmentManager.editorMode;
 
     this.machines = this.environmentManager.getMachines(this.environment);
+
+    if (!this.machinesViewStatus[this.environmentName]) {
+      this.machinesViewStatus[this.environmentName] = {};
+    }
   }
 
   /**
@@ -83,6 +103,10 @@ export class WorkspaceEnvironmentsController {
       this.workspaceConfig.defaultEnv = this.newEnvironmentName;
     }
 
+    this.machinesViewStatus[this.newEnvironmentName] = this.machinesViewStatus[this.environmentName];
+
+    this.environmentName = this.newEnvironmentName;
+
     this.doUpdateEnvironments();
   }
 
@@ -93,9 +117,8 @@ export class WorkspaceEnvironmentsController {
   updateEnvironmentConfig() {
     let newEnvironment = this.environmentManager.getEnvironment(this.environment, this.machines);
     this.workspaceConfig.environments[this.newEnvironmentName] = newEnvironment;
-    return this.doUpdateEnvironments().then(() => {
-      this.init();
-    });
+    this.environment = newEnvironment;
+    return this.doUpdateEnvironments();
   }
 
   /**
@@ -107,6 +130,10 @@ export class WorkspaceEnvironmentsController {
   updateMachineName(oldName, newName) {
     let newEnvironment = this.environmentManager.renameMachine(this.environment, oldName, newName);
     this.workspaceConfig.environments[this.newEnvironmentName] = newEnvironment;
+
+    this.machinesViewStatus[this.newEnvironmentName][newName] = this.machinesViewStatus[this.newEnvironmentName][oldName];
+    delete this.machinesViewStatus[this.newEnvironmentName][oldName];
+
     return this.doUpdateEnvironments().then(() => {
       this.init();
     })

dashboard/src/app/workspaces/workspace-details/environments/environments.directive.ts

@@ -40,7 +40,7 @@ export class WorkspaceEnvironments {
 
     this.scope = {
       environmentName: '=',
-      environmentViewStatus: '=',
+      machinesViewStatus: '=',
       workspaceConfig: '=',
       environmentOnChange: '&'
     }

dashboard/src/app/workspaces/workspace-details/environments/environments.html

@@ -50,7 +50,7 @@
                             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>
+                            machine-is-opened="workspaceEnvironmentsController.machinesViewStatus[workspaceEnvironmentsController.environmentName][machine.name]"></workspace-machine-config>
 
   <!-- Recipe Content-->
   <che-label-container che-label-name="Recipe"

dashboard/src/app/workspaces/workspace-details/environments/list-env-variables/list-env-variables.html

@@ -25,6 +25,7 @@
              class="che-checkbox-area">
           <div layout="row" layout-align="start center" class="che-list-item-checkbox-main">
             <md-checkbox class="che-list-item-checkbox"
+                         aria-label="All environment variables"
                          md-theme="default"
                          ng-checked="listEnvVariablesController.isBulkChecked"
                          ng-click="listEnvVariablesController.changeBulkSelection()"></md-checkbox>

dashboard/src/app/workspaces/workspace-details/environments/list-ports/list-ports.html

@@ -25,6 +25,7 @@
              class="che-checkbox-area">
           <div layout="row" layout-align="start center" class="che-list-item-checkbox-main">
             <md-checkbox class="che-list-item-checkbox"
+                         aria-label="All ports"
                          md-theme="default"
                          ng-checked="listPortsController.isBulkChecked"
                          ng-click="listPortsController.changeBulkSelection()"></md-checkbox>

dashboard/src/app/workspaces/workspace-details/environments/machine-config/machine-config.controller.ts

@@ -17,13 +17,32 @@
  * @author Oleksii Kurinnyi
  */
 export class WorkspaceMachineConfigController {
+  $mdDialog;
+  $q;
+  $timeout;
+  lodash;
+
+  timeoutPromise;
+
+  environmentManager;
+  machine;
+  machineConfig;
+  machinesList: Array<any>;
+  machineName: string;
+  newDev: boolean;
+  newRam: number;
+
+  machineConfigOnChange;
+  machineNameOnChange;
+  machineOnDelete;
 
   /**
    * Default constructor that is using resource injection
    * @ngInject for Dependency injection
    */
-  constructor($mdDialog, $scope, $timeout, lodash) {
+  constructor($mdDialog, $q, $scope, $timeout, lodash) {
     this.$mdDialog = $mdDialog;
+    this.$q = $q;
     this.$timeout = $timeout;
     this.lodash = lodash;
 
@@ -66,27 +85,23 @@ export class WorkspaceMachineConfigController {
    * Modifies agents list in order to add or remove 'ws-agent'
    */
   enableDev() {
-    this.$timeout.cancel(this.timeoutPromise);
-
     if (this.machineConfig.isDev === this.newDev) {
       return;
     }
 
-    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);
-        }
-      });
+    // 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);
+    // add ws-agent to current machine agents list
+    this.environmentManager.setDev(this.machine, this.newDev);
 
-      this.doUpdateConfig().then(() => {
-        this.init();
-      });
-    }, 1000);
+    this.doUpdateConfig().then(() => {
+      this.init();
+    });
   }
 
   /**
@@ -96,7 +111,7 @@ export class WorkspaceMachineConfigController {
   updateRam(isFormValid) {
     this.$timeout.cancel(this.timeoutPromise);
 
-    if (!isFormValid || this.ram === this.newRam) {
+    if (!isFormValid || this.machineConfig.memoryLimitBytes === this.newRam) {
       return;
     }