Enable selection of base type of service

Signed-off-by: MichaelMorris <michael.morris@est.tech>
Issue-ID: SDC-3506
Change-Id: Iaba39955fac9056cb0d0f1eccd223c05dfb9c5b4
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>

2 files changed, 87 insertions, 1 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index 1065404eef..28765444b6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -23,7 +23,7 @@ import * as _ from "lodash";
 import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
     ResourceType, ComponentState, instantiationType, ComponentFactory} from "app/utils";
 import { EventListenerService, ProgressService} from "app/services";
-import {CacheService, OnboardingService, ImportVSPService} from "app/services-ng2";
+import {CacheService, OnboardingService, ImportVSPService, ElementService} from "app/services-ng2";
 import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service, ICsarComponent, Component, IMetadataKey} from "app/models";
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
 import {Dictionary} from "lodash";
@@ -79,10 +79,12 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     convertCategoryStringToOneArray(category:string, subcategory:string):Array<IMainCategory>;
     onCategoryChange():void;
     onEcompGeneratedNamingChange():void;
+    onBaseTypeChange():void;
     openOnBoardingModal():void;
     initCategoreis():void;
     initEnvironmentContext():void;
     initInstantiationTypes():void;
+    initBaseTypes():void;
     onInstantiationTypeChange():void;
     updateIcon():void;
     possibleToUpdateIcon():boolean;
@@ -114,6 +116,7 @@ export class GeneralViewModel {
         'OnboardingService',
         'ComponentFactory',
         'ImportVSPService',
+        'ElementService',
         '$stateParams'
     ];
 
@@ -139,6 +142,7 @@ export class GeneralViewModel {
                 private onBoardingService: OnboardingService,
                 private ComponentFactory:ComponentFactory,
                 private importVSPService: ImportVSPService,
+                private elementService: ElementService,
                 private $stateParams: any) {
 
         this.initScopeValidation();
@@ -225,6 +229,7 @@ export class GeneralViewModel {
         this.$scope.componentCategories = new componentCategories();
         this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
 
+
         // Init UIModel
         this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);
 
@@ -257,6 +262,7 @@ export class GeneralViewModel {
             }
             // Init Instantiation types
             this.$scope.initInstantiationTypes();
+            this.$scope.initBaseTypes();
         }
 
         if (this.cacheService.get(PREVIOUS_CSAR_COMPONENT)) { //keep the old component in the cache until checkout, so we dont need to pass it around
@@ -434,6 +440,20 @@ export class GeneralViewModel {
             }
         };
 
+        this.$scope.initBaseTypes = ():void => {
+            if (this.$scope.componentType === ComponentType.SERVICE && this.$scope.component && this.$scope.component.categories) {
+                 this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name).subscribe((data: BaseTypeResponse[]) => {
+	                 this.$scope.baseTypes = []
+                     this.$scope.baseTypeVersions = []
+                     data.forEach(baseType => {
+	                     this.$scope.baseTypes.push(baseType.toscaResourceName)
+                         if (baseType.toscaResourceName === this.$scope.component.derivedFromGenericType){
+	                         baseType.versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
+                     }});
+                 })
+            }
+        };
+
         this.$scope.initEnvironmentContext = ():void => {
             if (this.$scope.componentType === ComponentType.SERVICE) {
                 this.$scope.environmentContextObj = this.cacheService.get('UIConfiguration').environmentContext;
@@ -645,6 +665,25 @@ export class GeneralViewModel {
                    }
                 }
             }
+            if (this.$scope.componentType === ComponentType.SERVICE && this.$scope.component.categories[0]) {
+	            this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name).subscribe((data: BaseTypeResponse[]) => {
+		
+                    if(this.$scope.isCreateMode()){
+                        this.$scope.baseTypes = []
+                        this.$scope.baseTypeVersions = []
+                        data.forEach(baseType => this.$scope.baseTypes.push(baseType.toscaResourceName));
+                        data[0].versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
+                        this.$scope.component.derivedFromGenericType = data[0].toscaResourceName;
+                        this.$scope.component.derivedFromGenericVersion = data[0].versions[0];
+                    } else {
+                        var isValidForBaseType:boolean = false;
+                        data.forEach(baseType => {if (!this.$scope.component.derivedFromGenericType || baseType.toscaResourceName === this.$scope.component.derivedFromGenericType){
+                            isValidForBaseType = true;
+                        };});
+                        this.$scope.editForm['category'].$setValidity('validForBaseType', isValidForBaseType);
+                    }
+                });
+            }   
         };
 
         this.$scope.onEcompGeneratedNamingChange = (): void => {
@@ -653,6 +692,18 @@ export class GeneralViewModel {
             }
         };
 
+        this.$scope.onBaseTypeChange = (): void => {
+            this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name).subscribe((data: BaseTypeResponse[]) => {
+                     this.$scope.baseTypeVersions = []
+                     data.forEach(baseType => {
+	                     if(baseType.toscaResourceName === this.$scope.component.derivedFromGenericType) {
+		                     baseType.versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
+                             this.$scope.component.derivedFromGenericVersion = baseType.versions[0];
+	                     };
+                     });
+             })
+        };
+
         this.$scope.onVendorNameChange = (oldVendorName: string): void => {
             if (this.$scope.component.icon === oldVendorName) {
                 this.$scope.component.icon = DEFAULT_ICON;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index 40300c8021..d598e170a4 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -109,6 +109,7 @@
 
                                 <div class="input-error" data-ng-show="validateField(editForm.category)">
                                     <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
+                                    <span ng-show="editForm.category.$error.validForBaseType" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_NOT_VALID"></span>
                                 </div>
                             </div>
                             <!--------------------- CATEGORIES -------------------->
@@ -574,6 +575,40 @@
 
                     <!--------------------- Instantiation Type -------------------->
 
+                    <!--------------------- Base Type -------------------->
+
+                    <div class="w-sdc-form-columns-wrapper">
+                        <div class="w-sdc-form-column">
+		                    <div class="i-sdc-form-item" data-ng-if="component.isService()">
+		                        <label class="i-sdc-form-label">Base Type</label>
+		                        <select class="i-sdc-form-select"
+		                                name="baseType"
+		                                data-ng-class="{'view-mode': isViewMode()}"
+		                                data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
+		                                data-ng-model="component.derivedFromGenericType"
+		                                data-ng-change="onBaseTypeChange()"
+		                                data-tests-id="selectBaseType">
+		                            <option ng-repeat="type in baseTypes">{{type}}</option>
+		                        </select>
+		                    </div>
+                		</div>
+                		<div class="w-sdc-form-column">
+		                    <div class="i-sdc-form-item" data-ng-if="component.isService()">
+		                        <label class="i-sdc-form-label">Base Type Version</label>
+		                        <select class="i-sdc-form-select"
+		                                name="baseTypeVersion"
+		                                data-ng-class="{'view-mode': isViewMode()}"
+		                                data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
+		                                data-ng-model="component.derivedFromGenericVersion"
+		                                data-tests-id="selectBaseTypeVersion">
+		                            <option ng-repeat="version in baseTypeVersions">{{version}}</option>
+		                        </select>
+		                    </div>
+                		</div>
+                	</div>
+
+                    <!--------------------- Instantiation Type -------------------->
+
                     <div class="meta-data" data-ng-if="component.creationDate">
                         <div>
                             <b>Created:</b>