CHE-1771: Add Runtime page to Workspace details

dashboard/bower.json

@@ -33,10 +33,10 @@
     "zeroclipboard": "2.2.0",
     "angular-uuid4": "0.3.0",
     "angular-file-upload": "2.0.0",
-    "jquery": "2.1.3"
-  },
-  "devDependencies": {
+    "jquery": "2.1.3",
+    "js-yaml": "3.6.1"
   },
+  "devDependencies": {},
   "resolutions": {
     "angular": "~1.4.8"
   },

dashboard/src/app/workspaces/create-workspace/select-stack/recipe/workspace-recipe.styl

@@ -1,24 +1,24 @@
 .recipe-widget
   margin-left 10px
 
-.recipe-widget md-radio-button
-  outline 0
+  md-radio-button
+    outline 0
 
-.recipe-editor
-  min-width 500px
-  max-width 1000px
-  margin-top 20px
+  .recipe-editor
+    min-width 500px
+    max-width 1000px
+    margin-top 20px
 
-.recipe-editor .CodeMirror
-  border 1px solid $list-separator-color
-  min-height 500px
+  .recipe-editor .CodeMirror
+    border 1px solid $list-separator-color
+    min-height 500px
 
-.recipe-docs-link
-  margin-top 5px
+  .recipe-docs-link
+    margin-top 5px
 
-.recipe-widget .recipe-url
-  width calc(100% - 10px)
-  margin-bottom 20px
+  .recipe-url
+    width calc(100% - 10px)
+    margin-bottom 20px
 
 .recipe-format .che-toggle-button-enabled
   color $primary-color !important

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

@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) 2015-2016 Codenvy, S.A.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *   Codenvy, S.A. - initial API and implementation
+ */
+'use strict';
+
+/**
+ * @ngdoc controller
+ * @name workspace.details.controller:WorkspaceEnvironmentsController
+ * @description This class is handling the controller for details of workspace : section environments
+ * @author Oleksii Kurinnyi
+ */
+export class WorkspaceEnvironmentsController {
+
+  /**
+   * Default constructor that is using resource injection
+   * @ngInject for Dependency injection
+   */
+  constructor($timeout, cheEnvironmentRegistry) {
+    this.cheEnvironmentRegistry = cheEnvironmentRegistry;
+
+    this.editorOptions = {
+      lineWrapping: true,
+      lineNumbers: false,
+      readOnly: true,
+      gutters: [],
+      onLoad: (editor) => {
+        $timeout(() => {
+          editor.refresh();
+        }, 1000);
+      }
+    };
+
+    this.machinesViewStatus = {};
+
+    this.init();
+  }
+
+  /**
+   * Sets initial values
+   */
+  init() {
+    this.newEnvironmentName = this.environmentName;
+    this.environment = this.workspaceConfig.environments[this.environmentName];
+
+    this.recipeType = this.environment.recipe.type;
+    this.environmentManager = this.cheEnvironmentRegistry.getEnvironmentManager(this.recipeType);
+
+    this.editorOptions.mode = this.environmentManager.editorMode;
+
+    this.machines = this.environmentManager.getMachines(this.environment);
+  }
+
+  /**
+   * Returns true if environment name is unique
+   *
+   * @param name {string} environment name to validate
+   * @returns {boolean}
+   */
+  isUnique(name) {
+    return name === this.environmentName || !this.workspaceConfig.environments[name];
+  }
+
+  /**
+   * Updates name of environment
+   * @param isFormValid {boolean}
+   */
+  updateEnvironmentName(isFormValid) {
+    if (!isFormValid || this.newEnvironmentName === this.environmentName) {
+      return;
+    }
+
+    this.workspaceConfig.environments[this.newEnvironmentName] = this.environment;
+    delete this.workspaceConfig.environments[this.environmentName];
+
+    if (this.workspaceConfig.defaultEnv === this.environmentName) {
+      this.workspaceConfig.defaultEnv = this.newEnvironmentName;
+    }
+
+    this.doUpdateEnvironments();
+  }
+
+  /**
+   * Callback which is called in order to update environment config
+   * @returns {Promise}
+   */
+  updateEnvironmentConfig() {
+    let newEnvironment = this.environmentManager.getEnvironment(this.environment, this.machines);
+    this.workspaceConfig.environments[this.newEnvironmentName] = newEnvironment;
+    return this.doUpdateEnvironments().then(() => {
+      this.init();
+    });
+  }
+
+  /**
+   * Callback which is called in order to rename specified machine
+   * @param oldName
+   * @param newName
+   * @returns {*}
+   */
+  updateMachineName(oldName, newName) {
+    let newEnvironment = this.environmentManager.renameMachine(this.environment, oldName, newName);
+    this.workspaceConfig.environments[this.newEnvironmentName] = newEnvironment;
+    return this.doUpdateEnvironments().then(() => {
+      this.init();
+    })
+  }
+
+  /**
+   * Callback which is called in order to delete specified machine
+   * @param name
+   * @returns {*}
+   */
+  deleteMachine(name) {
+    let newEnvironment = this.environmentManager.deleteMachine(this.environment, name);
+    this.workspaceConfig.environments[this.newEnvironmentName] = newEnvironment;
+    return this.doUpdateEnvironments().then(() => {
+      this.init();
+    })
+  }
+
+  /**
+   * Calls parent controller's callback to update environment
+   * @returns {IPromise<TResult>|*|Promise.<TResult>}
+   */
+  doUpdateEnvironments() {
+    return this.environmentOnChange();
+  }
+
+}

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

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2015-2016 Codenvy, S.A.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *   Codenvy, S.A. - initial API and implementation
+ */
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name workspaces.details.directive:workspaceEnvironments
+ * @restrict E
+ * @element
+ *
+ * @description
+ * <workspace-environments></workspace-environmentss>` for displaying workspace environments.
+ *
+ * @usage
+ *   <workspace-environments></workspace-environments>
+ *
+ * @author Oleksii Kurinnyi
+ */
+export class WorkspaceEnvironments {
+
+  /**
+   * Default constructor that is using resource
+   * @ngInject for Dependency injection
+   */
+  constructor () {
+    this.restrict = 'E';
+    this.templateUrl = 'app/workspaces/workspace-details/environments/environments.html';
+
+    this.controller = 'WorkspaceEnvironmentsController';
+    this.controllerAs = 'workspaceEnvironmentsController';
+    this.bindToController = true;
+
+    this.scope = {
+      environmentName: '=',
+      environmentViewStatus: '=',
+      workspaceConfig: '=',
+      environmentOnChange: '&'
+    }
+  }
+}
+

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

@@ -0,0 +1,74 @@
+<!--
+
+    Copyright (c) 2015 Codenvy, S.A.
+    All rights reserved. This program and the accompanying materials
+    are made available under the terms of the Eclipse Public License v1.0
+    which accompanies this distribution, and is available at
+    http://www.eclipse.org/legal/epl-v10.html
+
+    Contributors:
+      Codenvy, S.A. - initial API and implementation
+
+-->
+<div class="workspace-environments">
+
+  <!-- Name -->
+  <che-label-container che-label-name="Name">
+    <ng-form flex layout="column" name="workspaceEnvironmentsForm">
+      <div layout="column" class="workspace-environments-input">
+        <che-input che-form="workspaceEnvironmentsForm"
+                   che-name="name"
+                   che-place-holder="Name of the environment"
+                   aria-label="Name of the environment"
+                   ng-model="workspaceEnvironmentsController.newEnvironmentName"
+                   ng-change="workspaceEnvironmentsController.updateEnvironmentName(workspaceEnvironmentsForm.$valid)"
+                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 2000, 'blur': 0 } }"
+                   custom-validator="workspaceEnvironmentsController.isUnique($value)"
+                   required
+                   ng-maxlength="128"
+                   ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
+          <div ng-message="required">A name is required.</div>
+          <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.
+          </div>
+          <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
+          <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
+          <div ng-message="customValidator">This environment name is already used.</div>
+        </che-input>
+      </div>
+    </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">
+        <ui-codemirror ui-codemirror="workspaceEnvironmentsController.editorOptions"
+                       ng-model="workspaceEnvironmentsController.environment.recipe.content"></ui-codemirror>
+      </div>
+    </div>
+  </che-label-container>
+  <!-- OR Location -->
+  <che-label-container che-label-name="Recipe Location"
+                       ng-if="workspaceEnvironmentsController.recipeType !== 'dockerimage' && workspaceEnvironmentsController.environment.recipe.location">
+    <che-text-info che-text="workspaceEnvironmentsController.environment.recipe.location"
+                   che-href="workspaceEnvironmentsController.environment.recipe.location"
+                   che-copy-clipboard="true"
+                   class="recipe-location"></che-text-info>
+  </che-label-container>
+</div>

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

@@ -0,0 +1,17 @@
+.workspace-environments
+  padding 0 14px 14px
+
+  .workspace-environments-input
+    margin -6px 0
+
+  .recipe-editor
+    margin -4px 0
+    min-width 500px
+    max-width 1000px
+
+    .CodeMirror
+      height auto
+      border 1px solid $list-separator-color
+
+  .recipe-location a
+    word-break break-all

dashboard/src/app/workspaces/workspace-details/environments/list-env-variables/add-variable-dialog/add-variable-dialog.controller.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2015-2016 Codenvy, S.A.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *   Codenvy, S.A. - initial API and implementation
+ */
+'use strict';
+
+/**
+ * @ngdoc controller
+ * @name list.environment.variables.controller:AddVariableDialogController
+ * @description This class is handling the controller for the dialog box about adding the environment variable.
+ * @author Oleksii Kurinnyi
+ */
+export class AddVariableDialogController {
+
+  /**
+   * Default constructor that is using resource
+   * @ngInject for Dependency injection
+   */
+  constructor($mdDialog) {
+    this.$mdDialog = $mdDialog;
+    this.updateInProgress = false;
+
+    this.name = '';
+    this.value = '';
+  }
+
+  isUnique(name) {
+    return !this.variables[name];
+  }
+
+  /**
+   * It will hide the dialog box.
+   */
+  hide() {
+    this.$mdDialog.hide();
+  }
+
+  /**
+   * Adds new environment variable
+   */
+  addVariable() {
+    this.updateInProgress = true;
+
+    this.callbackController.updateEnvVariable(this.name, this.value).finally(() => {
+      this.updateInProgress = false;
+      this.hide();
+    });
+  }
+
+}