reworked overview tab

replace "select" with "che-select" Signed-off-by: Oleksii Kurinnyi <[email protected]>
eclipse-che · Jul 14, 2020 · 44e1f26 · 44e1f26
1 parent 1c2f251
commit 44e1f26
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 90 deletions.
diff --git a/.../workspaces/workspace-details/workspace-overview/workspace-details-overview.controller.ts b/.../workspaces/workspace-details/workspace-overview/workspace-details-overview.controller.ts
@@ -18,7 +18,7 @@ import { WorkspaceDetailsService } from '../workspace-details.service';
 import { CheKubernetesNamespace } from '../../../../components/api/che-kubernetes-namespace.factory';
 import { CheDashboardConfigurationService } from '../../../../components/branding/che-dashboard-configuration.service';
 import { TogglableFeature } from '../../../../components/branding/branding.constant';
-import { STORAGE_TYPE } from '../../../../components/api/storage-type';
+import { StorageType } from '../../../../components/api/storage-type';
 
 const STARTING = WorkspaceStatus[WorkspaceStatus.STARTING];
 const RUNNING = WorkspaceStatus[WorkspaceStatus.RUNNING];
@@ -55,6 +55,8 @@ export class WorkspaceDetailsOverviewController {
    */
   infrastructureNamespace: string;
   enabledKubernetesNamespaceSelector: boolean = false;
+  storageTypeOptions: Array<{ name: string }>;
+  storageType: string;
 
   private $location: ng.ILocationService;
   private $mdDialog: ng.material.IDialogService;
@@ -80,8 +82,6 @@ export class WorkspaceDetailsOverviewController {
   private isLoading: boolean;
   private isEphemeralMode: boolean;
   private attributes: che.IWorkspaceConfigAttributes;
-  private storageType: { label: any; id: number; description:string};
-  private storageDescription: string;
   private attributesCopy: che.IWorkspaceConfigAttributes;
   private workspaceDeletePromise: ng.IPromise<void>;
 
@@ -138,36 +138,29 @@ export class WorkspaceDetailsOverviewController {
 
     this.enabledKubernetesNamespaceSelector = this.cheDashboardConfigurationService.enabledFeature(TogglableFeature.KUBERNETES_NAMESPACE_SELECTOR);
 
+    this.storageTypeOptions = StorageType.getAllowedTypes().map(type => ({ name: type }));
+
     this.init();
   }
 
   init(): void {
     this.attributes = this.cheWorkspace.getWorkspaceDataManager().getAttributes(this.workspaceDetails);
     this.name = this.cheWorkspace.getWorkspaceDataManager().getName(this.workspaceDetails);
     this.isEphemeralMode = this.attributes && this.attributes.persistVolumes ? !JSON.parse(this.attributes.persistVolumes) : false;
-    this.storageType = this.getStorageType();
-    this.storageDescription = this.storageType.description;
     this.attributesCopy = angular.copy(this.cheWorkspace.getWorkspaceDataManager().getAttributes(this.workspaceDetails));
 
-    this.updateInfrastructureNamespace();
-  }
-
-  getStorageType() {
-    if (!this.attributes) {
-      return STORAGE_TYPE.EPHEMERAL;
-    }
-    if (this.attributes.persistVolumes as string === 'true') {
-      return STORAGE_TYPE.PERSISTENT;
-    }
-    if (this.attributes.persistVolumes as string === 'false')
-       if (this.attributes.asyncPersist as string === 'true') {
-        return STORAGE_TYPE.ASYNCHRONOUS;
-      }
-      else {
-        return STORAGE_TYPE.EPHEMERAL;
+    if (!this.attributes || this.attributes.persistVolumes === 'true') {
+      this.storageType = StorageType.PERSISTENT;
+    } else {
+      if (this.attributes.asyncPersist === 'true') {
+        this.storageType = StorageType.ASYNCHRONOUS;
+      } else {
+        this.storageType = StorageType.EPHEMERAL;
       }
-  }
+    }
 
+    this.updateInfrastructureNamespace();
+  }
 
   /**
    * Returns namespace by its ID
@@ -383,47 +376,66 @@ export class WorkspaceDetailsOverviewController {
     this.onChange();
   }
 
-  getSupportedStorageTypes() {
-    return [STORAGE_TYPE.PERSISTENT, STORAGE_TYPE.EPHEMERAL, STORAGE_TYPE.ASYNCHRONOUS]
+  showStorageTypeDescription(): ng.IPromise<void> {
+    const title = 'Storage Types';
+    const content = StorageType.getAllDescriptions();
+    return this.$mdDialog.show({
+      clickOutsideToClose: true,
+      controller: ['$scope', ($scope) => {
+        $scope.hide = () => {
+          this.$mdDialog.hide();
+        };
+        $scope.cancel = () => {
+          this.$mdDialog.cancel();
+        };
+      }],
+      template: `
+        <che-popup title="${title}" on-close="cancel()">
+          <div class="che-confirm-dialog-notification" ng-init="enableButton=false">
+            <div>${content}</div>
+            <div layout="row" flex layout-align="end end">
+              <che-button-notice che-button-title="Close"
+                id="cancel-dialog-button"
+                ng-click="cancel()">
+              </che-button-notice>
+            </div>
+          </div>
+        </che-popup>
+      `,
+    });
   }
 
-  updateStorageType() {
-    switch (this.storageType.id) {
-        case STORAGE_TYPE.PERSISTENT.id: {
-          this.storageDescription = STORAGE_TYPE.PERSISTENT.description;
-          if (!this.attributesCopy) {
-            this.attributes = undefined;
+  onStorageTypeChanged(type: StorageType): void {
+    switch (type) {
+      case StorageType.PERSISTENT: {
+        if (!this.attributesCopy) {
+          delete this.attributes;
+        } else {
+          if (this.attributesCopy.persistVolumes === 'true') {
+            this.attributes.persistVolumes = 'true';
+            delete this.attributes.asyncPersist;
           } else {
-            if ((this.attributesCopy.persistVolumes as string) === 'true') {
-              (this.attributes.persistVolumes as string) = 'true';
-              delete this.attributes.asyncPersist;
-            } else {
-              delete this.attributes.persistVolumes;
-              delete this.attributes.asyncPersist;
-              if (Object.keys(this.attributes).length === 0) {
-                this.attributes = undefined;
-              }
+            delete this.attributes.persistVolumes;
+            delete this.attributes.asyncPersist;
+            if (Object.keys(this.attributes).length === 0) {
+              delete this.attributes;
             }
           }
-          break;
-        }
-        case STORAGE_TYPE.EPHEMERAL.id: {
-          this.storageDescription = STORAGE_TYPE.EPHEMERAL.description;
-          this.attributes = this.attributes || {};
-          this.attributes.persistVolumes = 'false';
-          delete this.attributes.asyncPersist;
-          break;
-        }
-        case STORAGE_TYPE.ASYNCHRONOUS.id: {
-          this.storageDescription = STORAGE_TYPE.ASYNCHRONOUS.description;
-          this.attributes = this.attributes || {};
-          this.attributes.persistVolumes = 'false';
-          this.attributes.asyncPersist = 'true';
-          break;
-        }
-        default: {
-          break;
         }
+        break;
+      }
+      case StorageType.EPHEMERAL: {
+        this.attributes = this.attributes || {};
+        this.attributes.persistVolumes = 'false';
+        delete this.attributes.asyncPersist;
+        break;
+      }
+      case StorageType.ASYNCHRONOUS: {
+        this.attributes = this.attributes || {};
+        this.attributes.persistVolumes = 'false';
+        this.attributes.asyncPersist = 'true';
+        break;
+      }
     }
     this.cheWorkspace.getWorkspaceDataManager().setAttributes(this.workspaceDetails, this.attributes);
     this.onChange();

diff --git a/src/app/workspaces/workspace-details/workspace-overview/workspace-details-overview.html b/src/app/workspaces/workspace-details/workspace-overview/workspace-details-overview.html
@@ -58,15 +58,20 @@
     </div>
   </che-label-container>
   <!-- Storage type -->
-  <che-label-container che-label-name="Storage Type" che-label-description="Temporary Storage allows for faster I/O but may have limited storage and is not persistent.">
+  <che-label-container che-label-name="Storage Type">
     <div layout="row">
-      <div flex="15">
-        <select class="che-version-dropdown" ng-model="workspaceDetailsOverviewController.storageType"
-                ng-change="workspaceDetailsOverviewController.updateStorageType()"
-                ng-options="item as item.label for item in workspaceDetailsOverviewController.getSupportedStorageTypes() track by item.id">
-        </select>
+      <div flex="40">
+        <che-select
+          che-value="workspaceDetailsOverviewController.storageType"
+          che-on-select="workspaceDetailsOverviewController.onStorageTypeChanged($value)"
+          che-option-values="workspaceDetailsOverviewController.storageTypeOptions"></che-select>
+        </che-select>
+      </div>
+      <div flex class="learn-more-button">
+        <a ng-click="workspaceDetailsOverviewController.showStorageTypeDescription();">
+          Learn more about storage type
+        </a>
       </div>
-      <div flex class="storage-type-description">{{workspaceDetailsOverviewController.storageDescription}}</div>
     </div>
   </che-label-container>
   <!-- Export workspace -->

diff --git a/src/app/workspaces/workspace-details/workspace-overview/workspace-details-overview.styl b/src/app/workspaces/workspace-details/workspace-overview/workspace-details-overview.styl
@@ -92,4 +92,12 @@
   .che-label-container-content .workspace-overview-action-buttons
     margin-top 20px
 
+  .che-select-container
+    margin-top 10px
 
+    .md-select-value
+      span:first-child
+        margin-bottom 5px
+
+  .learn-more-button
+    padding-top 10px
diff --git a/src/components/api/storage-type.ts b/src/components/api/storage-type.ts
@@ -11,19 +11,18 @@
  */
 'use strict';
 
-export const STORAGE_TYPE = {
-  'PERSISTENT': { id: 1, label: 'Persistent', description: 'Persistent Storage slow I/O but persistent.' },
-  'EPHEMERAL': { id: 2, label: 'Ephemeral', description: 'Ephemeral Storage allows for faster I/O but may have limited storage and is not persistent.' },
-  'ASYNCHRONOUS': { id: 3, label: 'Asynchronous', description: 'Experimental feature: Asynchronous storage is combination of Ephemeral and Persistent storage. Allows for faster I/O and keep your changes, will backup on stop and restore on start workspace.' }
-}
-
 export enum StorageType {
   'ASYNCHRONOUS' = 'Asynchronous',
   'EPHEMERAL' = 'Ephemeral',
   'PERSISTENT' = 'Persistent',
 }
 
 export namespace StorageType {
+  // temporary func that returns allowed storage types
+  // should be removed in favour of an API method as soon as it is implemented
+  export function getAllowedTypes(): StorageType[] {
+    return [StorageType.EPHEMERAL, StorageType.PERSISTENT];
+  }
   export function getTypeDescription(type: StorageType): string {
     switch (type) {
       case StorageType.ASYNCHRONOUS:

diff --git a/src/components/widget/select/che-select.directive.ts b/src/components/widget/select/che-select.directive.ts
@@ -40,34 +40,21 @@ export class CheSelect {
       placeHolder: '@chePlaceHolder',
       optionValues: '=cheOptionValues',
       myName: '=cheName',
-      myForm: '=cheForm'
+      myForm: '=cheForm',
+      onSelect: '&?cheOnSelect'
     };
   }
 
   template($element: ng.IAugmentedJQuery, $attrs: ICheSelectAttributes): string {
     return `<div class="che-select desktop-untouched">
-      <!-- Mobile version -->
-      <md-input-container class="che-select-mobile" hide-gt-xs>
-        <label ng-if="labelName">{{value ? labelName : placeHolder}}</label>
-        <md-select ng-model="value"
-                   name="${$attrs.cheName}"
-                   md-container-class="che-custom-dropdown"
-                   placeholder="{{placeHolder}}">
-          <md-option ng-value="optionValue.id ? optionValue.id : optionValue.name"
-                     ng-repeat="optionValue in optionValues">{{optionValue.name}}
-          </md-option>
-        </md-select>
-        <!-- display error messages for the form -->
-        <div ng-messages="myForm.${$attrs.cheName}.$error"></div>
-      </md-input-container>
-
-      <!-- Desktop version -->
       <div class="che-select-desktop" hide-xs layout="column" flex>
         <div layout="row" flex layout-align="start start">
           <label flex="15" ng-if="labelName">{{labelName}}: </label>
 
           <div layout="column" class="che-select-container" flex="{{labelName ? 85 : 'none'}}">
             <md-select ng-model="value"
+                       ng-change="onSelect({ $value: value })"
+                       ng-model-options="{trackBy: '$value.id'}"
                        name="desk${$attrs.cheName}"
                        md-container-class="che-custom-dropdown"
                        placeholder="{{placeHolder}}">

diff --git a/src/components/widget/select/che-select.styl b/src/components/widget/select/che-select.styl
@@ -1,9 +1,11 @@
-.che-select .che-select-container
-  outline none
+.che-select
+  min-width 200px
+
+  .che-select-container
+    outline none
 
 .che-select .che-select-mobile,
 .che-select .che-select-desktop
-  width 100%
 
 .che-select .che-select-desktop .che-select-container
   position relative