Rework switcher for ephemeral mode to the dropdown with storage types

src/app/get-started/custom-workspace-tab/custom-workspace-tab.controller.ts

@@ -18,6 +18,7 @@ import { IWorkspaceNameRowBindingProperties } from './workspace-name-row/workspa
 import { ITemporaryStorageRowBindingProperties } from './temporary-storage-row/temporary-storage-row.component';
 import { IDevfileSelectRowBindingProperties } from './devfile-select-row/devfile-select-row.component';
 import { IDevfileEditorRowBindingProperties } from './devfile-editor-row/devfile-editor-row.component';
+import { STORAGE_TYPE } from '../../../components/api/storage-type';
 
 export class CustomWorkspaceTabController implements ng.IController {
 
@@ -38,7 +39,7 @@ export class CustomWorkspaceTabController implements ng.IController {
 
   private namespace: string;
   private workspaceName: string;
-  private temporaryStorage: boolean;
+  private storageType: string;
   private temporaryStorageDefault: boolean;
   private stackName: string;
   private devfile: che.IWorkspaceDevfile;
@@ -76,15 +77,15 @@ export class CustomWorkspaceTabController implements ng.IController {
       },
     };
     this.temporaryStorageProperties = {
-      onChange: (temporary, defaultValue) => {
-        this.temporaryStorage = temporary;
-        this.temporaryStorageDefault = defaultValue;
-        if (!this.devfile) {
-          this.devfile = this.minDevfile;
-        }
-        this.updateDevfile();
-        this.updateProperties(true);
-      },
+       onChangeStorageType: (storageType, defaultValue) => {
+          this.storageType = storageType;
+          this.temporaryStorageDefault = defaultValue;
+          if (!this.devfile) {
+            this.devfile = this.minDevfile;
+          }
+          this.updateDevfile();
+          this.updateProperties(true);
+      }
     };
     this.devfileSelectProperties = {
       onError: () => {
@@ -142,24 +143,37 @@ export class CustomWorkspaceTabController implements ng.IController {
     if (!this.devfile) {
       return;
     }
-
-    if (this.temporaryStorage === this.temporaryStorageDefault) {
-        if (this.devfile.attributes && this.devfile.attributes.persistVolumes) {
-          delete this.devfile.attributes.persistVolumes;
-          if (Object.keys(this.devfile.attributes).length === 0) {
-            delete this.devfile.attributes;
+    switch (this.storageType) {
+      case STORAGE_TYPE.PERSISTANT.label:
+        if (!this.devfile.attributes) {
+          this.devfile.attributes = {};
+        }
+        delete this.devfile.attributes.persistVolumes;
+        delete this.devfile.attributes.asyncPersist;
+        break;
+      case STORAGE_TYPE.EPHEMERAL.label:
+        if (this.temporaryStorageDefault) {
+          if (this.devfile.attributes && this.devfile.attributes.persistVolumes) {
+            delete this.devfile.attributes.persistVolumes;
+            delete this.devfile.attributes.asyncPersist;
+            if (Object.keys(this.devfile.attributes).length === 0) {
+              delete this.devfile.attributes;
+            }
           }
+        } else {
+          this.devfile.attributes.persistVolumes = 'false';
+          delete this.devfile.attributes.asyncPersist;
         }
-    } else {
-      if (!this.devfile.attributes) {
-        this.devfile.attributes = {};
-      }
-      if (this.temporaryStorage) {
-        this.devfile.attributes.persistVolumes = 'false';
-      } else {
-        this.devfile.attributes.persistVolumes = 'true';
-      }
+        break;
+      case STORAGE_TYPE.ASYNCHRONUS.label: 
+        if (!this.devfile.attributes) {
+          this.devfile.attributes = {};
+        }   
+        this.devfile.attributes.persistVolumes = 'false';   
+        this.devfile.attributes.asyncPersist = 'true';
+        break 
     }
+
     if (this.workspaceName) {
       if (!this.devfile.metadata) {
         this.devfile.metadata = {}
@@ -187,9 +201,16 @@ export class CustomWorkspaceTabController implements ng.IController {
       return;
     }
     if (this.devfile.attributes && this.devfile.attributes.persistVolumes) {
-      this.temporaryStorageProperties.temporary = this.devfile.attributes.persistVolumes === 'false';
+      const val = (this.devfile.attributes.persistVolumes === 'false');
+      if (val) {
+        if (this.devfile.attributes.asyncPersist === 'true') {
+          this.temporaryStorageProperties.storageType = STORAGE_TYPE.ASYNCHRONUS.label;
+        }  else {
+          this.temporaryStorageProperties.storageType = STORAGE_TYPE.EPHEMERAL.label;
+        }
+      } 
     } else {
-      this.temporaryStorageProperties.temporary = undefined;
+      this.temporaryStorageProperties.storageType = undefined;
     }
     if (this.devfile.metadata && this.devfile.metadata.name) {
       this.workspaceName = this.devfile.metadata.name;

src/app/get-started/custom-workspace-tab/custom-workspace-tab.html

@@ -24,9 +24,10 @@
       name="customWorkspaceTabController.workspaceNameProperties.name"
       on-change="customWorkspaceTabController.workspaceNameProperties.onChange($name)"></workspace-name-row>
 
-    <!-- Temporary Storage -->
-    <temporary-storage-row temporary="customWorkspaceTabController.temporaryStorageProperties.temporary"
-      on-change="customWorkspaceTabController.temporaryStorageProperties.onChange($temporary, $default)"></temporary-storage-row>
+    <!--  Storage Type -->
+    <temporary-storage-row storage-type="customWorkspaceTabController.temporaryStorageProperties.storageType"
+      on-change-storage-type="customWorkspaceTabController.temporaryStorageProperties.onChangeStorageType($storageType, $default)"
+      ></temporary-storage-row>
   </ng-form>
   <!-- Devfile -->
   <devfile-select-row on-load="customWorkspaceTabController.devfileSelectProperties.onLoad($devfile, $stackName)"

src/app/get-started/custom-workspace-tab/temporary-storage-row/temporary-storage-row.component.ts

@@ -14,13 +14,13 @@
 import { TemporaryStorageRowController } from './temporary-storage-row.controller';
 
 export interface ITemporaryStorageRowBindingProperties {
-  temporary?: boolean;
-  onChange: ($temporary: boolean, $default: boolean) => void;
+  storageType?: string;
+  onChangeStorageType: ($storageType: string, $default: boolean) => void;
 }
 
 export interface ITemporaryStorageRowComponentBindings {
-  temporary?: boolean;
-  onChange: (eventObj: { $temporary: boolean, $default: boolean }) => void;
+  storageType?: string;
+  onChangeStorageType: (eventObj: { $storageType: string, $default: boolean }) => void;
 }
 
 interface ITemporaryStorageRowComponentScopeBindings {
@@ -34,8 +34,8 @@ export class TemporaryStorageRowComponent implements ng.IComponentOptions, ITemp
   controllerAs = 'ctrl';
 
   bindings = {
-    onChange: '&',
-    temporary: '<?'
+    storageType : '<?',
+    onChangeStorageType: '&'
   };
 
 }

src/app/get-started/custom-workspace-tab/temporary-storage-row/temporary-storage-row.controller.ts

@@ -14,6 +14,8 @@
 import { ITemporaryStorageRowComponentBindings } from './temporary-storage-row.component';
 import { CheWorkspace } from '../../../../components/api/workspace/che-workspace.factory';
 import { IChePfSwitchProperties } from '../../../../components/che-pf-widget/switch/che-pf-switch.directive';
+import { IChePfSelectProperties, IChePfSelectItem } from '../../../../components/che-pf-widget/select/che-pf-select-typeahead.directive';
+import { STORAGE_TYPE } from '../../../../components/api/storage-type';
 
 type OnChangesObject = {
   [key in keyof ITemporaryStorageRowComponentBindings]: ng.IChangesObject<ITemporaryStorageRowComponentBindings[key]>;
@@ -26,58 +28,78 @@ export class TemporaryStorageRowController implements ng.IController, ITemporary
   ];
 
   // component bindings
-  temporary?: boolean;
-  onChange: (eventObj: { $temporary: boolean, $default: boolean }) => void;
+  storageType?: string
+  onChangeStorageType: (eventObj: { $storageType: string; $default: boolean; }) => void;
+  storageDescription?: string
   // init promise
   initPromise: ng.IPromise<string>;
   // template fields
   temporaryStorageSwitch: IChePfSwitchProperties;
+  storageSelect: IChePfSelectProperties<string>;
   // injected services
   private cheWorkspace: CheWorkspace;
 
   constructor(cheWorkspace: CheWorkspace) {
     this.cheWorkspace = cheWorkspace;
-
-    this.temporaryStorageSwitch = {
+    this.storageSelect = {
       config: {
-        name: 'temporaryStorage',
+        items: [STORAGE_TYPE.PERSISTANT.label, STORAGE_TYPE.EPHEMERAL.label, STORAGE_TYPE.ASYNCHRONUS.label],
+        placeholder: 'Select a storage template'
+      },
+      value: STORAGE_TYPE.EPHEMERAL.label,
+      onSelect: value => {
+        console.log(value)
+        this.onSelected(value)
       },
-      onChange: value => {
-        this.onChanged(value);
-      }
     };
   }
 
   $onInit(): void {
     this.initPromise = this.cheWorkspace.fetchWorkspaceSettings()
-      .then(settings => this.updateTemporaryStorage(settings['che.workspace.persist_volumes.default']));
+      .then(settings => {
+        return this.updateStorageType(settings['che.workspace.persist_volumes.default']);
+      });
   }
 
   $onChanges(onChangesObj: OnChangesObject): void {
-    if (!onChangesObj.temporary || !this.initPromise) {
-      return;
-    }
     this.initPromise.then((persistVolumesDefault: string) => {
-      if (onChangesObj.temporary.currentValue === undefined && persistVolumesDefault) {
-        this.temporaryStorageSwitch.value = persistVolumesDefault === 'false';
-        return;
+      if (onChangesObj.storageType.currentValue === undefined && persistVolumesDefault) {
+        if (persistVolumesDefault === 'false') {
+          this.storageSelect.value = STORAGE_TYPE.EPHEMERAL.label;
+          return;
+        }
       }
-      this.temporaryStorageSwitch.value = onChangesObj.temporary.currentValue;
+      this.storageSelect.value = onChangesObj.storageType.currentValue;
+      this.storageDescription
     });
   }
 
-  private updateTemporaryStorage(persistVolumesDefault: string): string {
-    if (this.temporary === undefined) {
-      this.temporaryStorageSwitch.value = persistVolumesDefault === 'false';
+  private updateStorageType(persistVolumesDefault: string): string {
+    if (this.storageType === undefined) {
+      if (persistVolumesDefault === 'false') {
+        this.storageSelect.value = STORAGE_TYPE.EPHEMERAL.label;
+      } else {
+        this.storageSelect.value = STORAGE_TYPE.PERSISTANT.label;
+      }
     } else {
-      this.temporaryStorageSwitch.value = this.temporary;
+      this.storageSelect.value = this.storageType;
     }
     return persistVolumesDefault;
   }
 
-  private async onChanged(temporary: boolean): Promise<void> {
+  private async  onSelected(value: string) {
     const persistVolumeDefault = await this.initPromise;
-    this.onChange({'$temporary': temporary, $default: persistVolumeDefault === 'false'});
+    switch (value) {
+      case STORAGE_TYPE.EPHEMERAL.label:
+        this.storageDescription = STORAGE_TYPE.EPHEMERAL.description;
+        break;
+      case STORAGE_TYPE.PERSISTANT.label:
+        this.storageDescription = STORAGE_TYPE.PERSISTANT.description;
+        break;
+      case STORAGE_TYPE.ASYNCHRONUS.label:
+        this.storageDescription = STORAGE_TYPE.ASYNCHRONUS.description;
+        break;
+    }
+    this.onChangeStorageType({ '$storageType': value, '$default': persistVolumeDefault === 'false' });
   }
-
 }

src/app/get-started/custom-workspace-tab/temporary-storage-row/temporary-storage-row.html

@@ -14,13 +14,20 @@
 
 <div class="pf-c-form__group">
   <label class="pf-c-form__label" for="{{ctrl.temporaryStorageSwitch.config.id}}">
-    <span class="pf-c-form__label-text">Temporary Storage</span>&nbsp;
+    <span class="pf-c-form__label-text">Storage Type</span>&nbsp;
     <span uib-tooltip="Temporary Storage allows for faster I/O but may have limited storage and is not persistent."
           tooltip-append-to-body="true"><i class="fa fa-question-circle" aria-hidden="true"></i></span>
   </label>
   <div class="pf-c-form__horizontal-group">
-    <che-pf-switch value="ctrl.temporaryStorageSwitch.value"
-      config="ctrl.temporaryStorageSwitch.config"
-      on-change="ctrl.temporaryStorageSwitch.onChange($value)"></che-pf-switch>
+  <div class="pf-l-flex">
+    <div class="pf-l-flex__item">
+      <che-pf-select-single config="ctrl.storageSelect.config" value="ctrl.storageSelect.value"
+                               on-select="ctrl.storageSelect.onSelect($value)">
+      </che-pf-select-single>
+    </div>
+    <small>
+      <div class="pf-l-flex__item">{{ctrl.storageDescription}}</div>
+    </small>
+  </div>
   </div>
 </div>

src/app/get-started/get-started-tab/get-started-tab.controller.ts

@@ -18,6 +18,7 @@ import { CheNotification } from '../../../components/notification/che-notificati
 import { IChePfButtonProperties } from '../../../components/che-pf-widget/button/che-pf-button';
 import { IGetStartedToolbarBindingProperties } from './toolbar/get-started-toolbar.component';
 import { CheBranding } from '../../../components/branding/che-branding';
+import { STORAGE_TYPE } from '../../../components/api/storage-type';
 
 
 /**
@@ -53,6 +54,8 @@ export class GetStartedTabController {
   private isCreating: boolean = false;
   private devfileRegistryUrl: string;
   private ephemeralMode: boolean;
+  private storageType: string;
+  private storageDescription: string;
 
   /**
    * Default constructor that is using resource
@@ -74,16 +77,24 @@ export class GetStartedTabController {
     this.toolbarProps = {
       devfiles: [],
       ephemeralMode: false,
+      storageType: STORAGE_TYPE.EPHEMERAL.label,
       onFilterChange: filtered => this.onFilterChange(filtered),
       onEphemeralModeChange: mode => this.onEphemeralModeChange(mode),
+      onStorageTypeChange: type => this.onStorageTypeChange(type)
     };
 
     this.isLoading = true;
     cheWorkspace.fetchWorkspaceSettings().then(() => {
       const workspaceSettings = cheWorkspace.getWorkspaceSettings();
       this.devfileRegistryUrl = workspaceSettings && workspaceSettings.cheWorkspaceDevfileRegistryUrl;
       this.ephemeralMode = workspaceSettings['che.workspace.persist_volumes.default'] === 'false';
+      if (this.ephemeralMode) {
+        this.storageType = STORAGE_TYPE.EPHEMERAL.label;
+      } else {
+        this.storageType = STORAGE_TYPE.PERSISTANT.label;
+      }
       this.toolbarProps.ephemeralMode = this.ephemeralMode;
+      this.toolbarProps.storageType = this.storageType;
       return this.init();
     }).finally(() => {
       this.isLoading = false;
@@ -102,6 +113,11 @@ export class GetStartedTabController {
     this.ephemeralMode = mode;
   }
 
+  onStorageTypeChange(type: string): void {
+    this.storageType = type;
+    this.storageDescription = type;
+  }
+
   createWorkspace(devfileMetaData: IDevfileMetaData): void {
     if (this.isCreating) {
       return;
@@ -117,13 +133,23 @@ export class GetStartedTabController {
     this.devfileRegistry.fetchDevfile(this.devfileRegistryUrl, selfLink)
       .then(() => {
         const devfile = this.devfileRegistry.getDevfile(this.devfileRegistryUrl, selfLink);
-        if (this.ephemeralMode) {
+        console.log('=======>>>>' + this.storageType);
+        if (this.storageType === STORAGE_TYPE.EPHEMERAL.label) {
+          console.log('=======>>>> 0000' + this.storageType);
+          if (!devfile.attributes) {
+            devfile.attributes = {};
+          }
+          devfile.attributes.persistVolumes = 'false';
+        }
+        if (this.storageType === STORAGE_TYPE.ASYNCHRONUS.label) {
+          console.log('=======>>>> 1111' + this.storageType);
           if (!devfile.attributes) {
             devfile.attributes = {};
           }
           devfile.attributes.persistVolumes = 'false';
+          devfile.attributes.asyncPersist = 'true';
         }
-        const attributes = {stackName: devfileMetaData.displayName};
+        const attributes = { stackName: devfileMetaData.displayName };
         return this.createWorkspaceSvc.createWorkspaceFromDevfile(undefined, devfile, attributes, true);
       })
       .then(workspace => {

src/app/get-started/get-started-tab/get-started-tab.html

@@ -23,8 +23,11 @@ <h4>Select a Sample</h4>
     <get-started-toolbar
       devfiles="getStartedTabController.toolbarProps.devfiles"
       ephemeral-mode="getStartedTabController.toolbarProps.ephemeralMode"
+      storage-typr="getStartedTabController.toolbarProps.storageType"
       on-filter-change="getStartedTabController.toolbarProps.onFilterChange($filtered)"
-      on-ephemeral-mode-change="getStartedTabController.toolbarProps.onEphemeralModeChange($ephemeralMode)"></get-started-toolbar>
+      on-ephemeral-mode-change="getStartedTabController.toolbarProps.onEphemeralModeChange($ephemeralMode)"
+      on-storage-type-change="getStartedTabController.toolbarProps.onStorageTypeChange($storageType)">
+    </get-started-toolbar>
     <!-- toolbar end -->
 
     </div>