View data types in UI catalog

Issue-ID: SDC-4220
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: I880c7fedb58eafc7524fc6833b9b5d02f3b7d523

4 files changed, 52 insertions, 38 deletions

diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html
index d130d1e25a..74b2865785 100644
--- a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html
@@ -32,7 +32,7 @@
                                        (checkedChange)="gui.onModelClick()"></sdc-checklist>
                     </div>
                 </div>
-
+                <!-- Type -->
                 <div class="sdc-catalog-type-filter-container">
                     <div class="i-sdc-designer-leftbar-section-title pointer"
                          (click)="sectionClick('type')"
diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts
index 547303326d..db6f50def2 100644
--- a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.spec.ts
@@ -245,8 +245,8 @@ describe('catalog component', () => {
         component.componentInstance.checkboxesFilterKeys = checkboxesFilterKeysMock;
         component.componentInstance.buildChecklistModelForTypes();
         expect(component.componentInstance.componentTypes).toEqual({ Resource: ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'],
-            Service: null})
-        expect(component.componentInstance.typesChecklistModel.checkboxes.length).toEqual(2);
+            Service: null, 'TOSCA Type': ["Data Type"]})
+        expect(component.componentInstance.typesChecklistModel.checkboxes.length).toEqual(3);
     });
 
     it ('should call on catalog component buildChecklistModelForCategories' , () => {
@@ -359,8 +359,8 @@ describe('catalog component', () => {
     it ('should call on catalog component raiseNumberOfElementToDisplay with empty catalogFilteredItems' , () => {
         const component = TestBed.createComponent(CatalogComponent);
         component.componentInstance.catalogFilteredItems = []
-        component.componentInstance.raiseNumberOfElementToDisplay(true);
-        expect(component.componentInstance.numberOfItemToDisplay).toEqual(NaN);
+        component.componentInstance.raiseNumberOfElementToDisplay();
+        expect(component.componentInstance.numberOfItemToDisplay).toEqual(0);
         expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([]);
     });
 
@@ -368,7 +368,7 @@ describe('catalog component', () => {
         const component = TestBed.createComponent(CatalogComponent);
         component.componentInstance.catalogFilteredItems = [1 , 2 , 3, 4, 5, 6]
         component.componentInstance.numberOfItemToDisplay = 2;
-        component.componentInstance.raiseNumberOfElementToDisplay(false);
+        component.componentInstance.raiseNumberOfElementToDisplay();
          expect(component.componentInstance.numberOfItemToDisplay).toEqual(6);
          expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([1 , 2 , 3, 4, 5, 6]);
     });
@@ -514,7 +514,7 @@ describe('catalog component', () => {
        // component.componentInstance.catalogFilteredItems = component.componentInstance.makeFilteredItems();
         component.componentInstance.filterCatalogItems();
         expect(component.componentInstance.makeFilteredItems).toHaveBeenCalledWith(["firstComponent", "secondComponent"], {}, {}, "",true);
-        expect(component.componentInstance.raiseNumberOfElementToDisplay).toHaveBeenCalledWith(true);
+        expect(component.componentInstance.raiseNumberOfElementToDisplay);
         expect(component.componentInstance.catalogFilteredSlicedItems).toEqual([1,2]);
     });
 
diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts
index 5298e7e0d3..1a43ecf049 100644
--- a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts
@@ -24,10 +24,19 @@ import { SdcUiCommon, SdcUiServices } from "onap-ui-angular";
 import { CacheService, CatalogService } from "app/services-ng2";
 import { SdcConfigToken, ISdcConfig } from "../../config/sdc-config.config";
 import { SdcMenuToken, IAppMenu } from "../../config/sdc-menu.config";
-import { Component, ICategoryBase, IMainCategory, ISubCategory, IConfigStatuses, ICatalogSelector, CatalogSelectorTypes } from "app/models";
+import {
+    Component,
+    ICategoryBase,
+    IMainCategory,
+    ISubCategory,
+    IConfigStatuses,
+    ICatalogSelector,
+    CatalogSelectorTypes
+} from "app/models";
 import { ResourceNamePipe } from "../../pipes/resource-name.pipe";
 import { EntityFilterPipe, IEntityFilterObject, ISearchFilter} from "../../pipes/entity-filter.pipe";
-import { DEFAULT_MODEL_NAME } from "app/utils/constants";
+import {DEFAULT_MODEL_NAME} from "app/utils/constants";
+import {DataTypeCatalogComponent} from "../../../models/data-type-catalog-component";
 
 interface Gui {
     onComponentSubTypesClick:Function;
@@ -81,9 +90,9 @@ export class CatalogComponent {
     public filteredCategories:Array<IMainCategory>;
     public confStatus:IConfigStatuses;
     public componentTypes:{[key:string]: Array<string>};
-    public catalogItems:Array<Component>;
-    public catalogFilteredItems:Array<Component>;
-    public catalogFilteredSlicedItems:Array<Component>;
+    public catalogItems:Array<Component | DataTypeCatalogComponent>;
+    public catalogFilteredItems:Array<Component | DataTypeCatalogComponent>;
+    public catalogFilteredSlicedItems:Array<Component | DataTypeCatalogComponent>;
     public expandedSection:Array<string>;
     public version:string;
     public sortBy:string;
@@ -195,7 +204,8 @@ export class CatalogComponent {
     private buildChecklistModelForTypes() {
         this.componentTypes = {
             Resource: ['VF', 'VFC', 'CR', 'PNF', 'CP', 'VL'],
-            Service: null
+            Service: null,
+            'TOSCA Type': ['Data Type']
         };
         this.typesChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.componentTypes._main,
             Object.keys(this.componentTypes).map((ct) => {
@@ -268,6 +278,7 @@ export class CatalogComponent {
         this.checkboxesFilter = <IEntityFilterObject>{};
         this.checkboxesFilter.selectedComponentTypes = [];
         this.checkboxesFilter.selectedResourceSubTypes = [];
+        this.checkboxesFilter.selectedToscaTypes = [];
         this.checkboxesFilter.selectedCategoriesModel = [];
         this.checkboxesFilter.selectedStatuses = [];
         this.checkboxesFilter.selectedModels = [];
@@ -404,16 +415,11 @@ export class CatalogComponent {
         };
     }
 
-    public raiseNumberOfElementToDisplay(recalculate:boolean = false): void {
-        const scrollPageAmount = 35;
+    public raiseNumberOfElementToDisplay(): void {
         if (!this.catalogFilteredItems) {
             this.numberOfItemToDisplay = 0;
-        } else if (this.catalogFilteredItems.length > this.numberOfItemToDisplay || recalculate) {
-            let fullPagesAmount = Math.ceil(this.numberOfItemToDisplay / scrollPageAmount) * scrollPageAmount;
-            if (!recalculate || fullPagesAmount === 0) {  //TODO trigger infiniteScroll to check bottom and fire onBottomHit by itself (sdc-ui)
-                fullPagesAmount += scrollPageAmount;
-            }
-            this.numberOfItemToDisplay = Math.min(this.catalogFilteredItems.length, fullPagesAmount);
+        } else {
+            this.numberOfItemToDisplay = this.catalogFilteredItems.length;
             this.catalogFilteredSlicedItems = this.catalogFilteredItems.slice(0, this.numberOfItemToDisplay);
         }
     }
@@ -431,7 +437,7 @@ export class CatalogComponent {
         if (forceReload || this.componentShouldReload()) {
             this.loaderService.activate();
 
-            let onSuccess = (followedResponse:Array<Component>):void => {
+            let onSuccess = (followedResponse:Array<Component | DataTypeCatalogComponent>):void => {
                 this.updateCatalogItems(followedResponse);
                 this.loaderService.deactivate();
                 this.cacheService.set('breadcrumbsComponentsState', this.$state.current.name);  //catalog
@@ -471,7 +477,7 @@ export class CatalogComponent {
         }
     }
 
-    private updateCatalogItems = (items:Array<Component>):void => {
+    private updateCatalogItems = (items:Array<Component | DataTypeCatalogComponent>):void => {
         this.catalogItems = items;
         this.catalogItems.forEach(this.addFilterTermToComponent);
         this.filterCatalogItems();
@@ -501,7 +507,7 @@ export class CatalogComponent {
 
     private filterCatalogItems() {
         this.catalogFilteredItems = this.makeFilteredItems(this.catalogItems, this.checkboxesFilter, this.search, this.sortBy, this.reverse);
-        this.raiseNumberOfElementToDisplay(true);
+        this.raiseNumberOfElementToDisplay();
         this.catalogFilteredSlicedItems = this.catalogFilteredItems.slice(0, this.numberOfItemToDisplay);
     }
 
@@ -524,7 +530,11 @@ export class CatalogComponent {
         this.checkboxesFilter.selectedComponentTypes = this.checkboxesFilterKeys.componentTypes._main;
         Object.keys(this.checkboxesFilterKeys.componentTypes).forEach((chKey) => {
             if (chKey !== '_main') {
-                this.checkboxesFilter['selected' + chKey + 'SubTypes'] = this.checkboxesFilterKeys.componentTypes[chKey].map((st) => st.substr(chKey.length + 1));
+                if (chKey === 'TOSCA Type') {
+                    this.checkboxesFilter['selectedToscaTypes'] = this.checkboxesFilterKeys.componentTypes[chKey].map((st) => st.substr(chKey.length + 1));
+                } else if (chKey === 'Resource') {
+                    this.checkboxesFilter['selected' + chKey + 'SubTypes'] = this.checkboxesFilterKeys.componentTypes[chKey].map((st) => st.substr(chKey.length + 1));
+                }
             }
         });
 
@@ -639,6 +649,8 @@ export class CatalogComponent {
                 // rebuild the checkboxes to show selected
                 this.buildCheckboxLists();
             }
+        }).catch(function (err) {
+            console.log(err.name + ":", err.message);
         });
         this.applyFilterParamsToView(this.filterParams);
     }
@@ -685,13 +697,15 @@ export class CatalogComponent {
         return sortedCategories;
     }
 
-    private addFilterTermToComponent(component:Component) {
-        component.filterTerm = component.name +  ' '  + component.description + ' ' + component.tags.toString() + ' ' + component.version;
-        component.filterTerm = component.filterTerm.toLowerCase();
+    private addFilterTermToComponent(component:Component | DataTypeCatalogComponent) {
+        if (component instanceof Component) {
+            component.filterTerm = component.name + ' ' + component.description + ' ' + component.tags.toString() + ' ' + component.version;
+            component.filterTerm = component.filterTerm.toLowerCase();
+        }
     }
 
-    private makeFilteredItems(catalogItems:Array<Component>, filter:IEntityFilterObject, search:ISearchFilter, sortBy:string, reverse:boolean) {
-        let filteredComponents:Array<Component> = catalogItems;
+    private makeFilteredItems(catalogItems:Array<Component | DataTypeCatalogComponent>, filter:IEntityFilterObject, search:ISearchFilter, sortBy:string, reverse:boolean) {
+        let filteredComponents:Array<Component | DataTypeCatalogComponent> = catalogItems;
 
         // common entity filter
         // --------------------------------------------------------------------------
@@ -712,7 +726,6 @@ export class CatalogComponent {
                 _.reverse(filteredComponents);
             }
         }
-
         return filteredComponents;
     }
 }
diff --git a/catalog-ui/src/app/ng2/pages/home/home.component.ts b/catalog-ui/src/app/ng2/pages/home/home.component.ts
index f0e8815d93..784823eacd 100644
--- a/catalog-ui/src/app/ng2/pages/home/home.component.ts
+++ b/catalog-ui/src/app/ng2/pages/home/home.component.ts
@@ -19,7 +19,7 @@
  */
 'use strict';
 import {Component as NgComponent, Inject, OnInit} from '@angular/core';
-import {Component, ComponentMetadata, IConfigRoles, IUserProperties, Resource} from 'app/models';
+import {Component, ComponentMetadata, IConfigRoles, IUserProperties, Resource, Service} from 'app/models';
 import {HomeFilter} from 'app/models/home-filter';
 import {AuthenticationService, CacheService, HomeService, ResourceServiceNg2} from 'app/services-ng2';
 import {ComponentState, ModalsHandler} from 'app/utils';
@@ -32,6 +32,7 @@ import {EntityFilterPipe} from '../../pipes/entity-filter.pipe';
 import {TranslateService} from '../../shared/translator/translate.service';
 import {FoldersItemsMenu, FoldersItemsMenuGroup, FoldersMenu} from './folders';
 import {ImportVSPdata} from "../../components/modals/onboarding-modal/onboarding-modal.component";
+import {DataTypeCatalogComponent} from "../../../models/data-type-catalog-component";
 
 @NgComponent({
     selector: 'home-page',
@@ -41,8 +42,8 @@ import {ImportVSPdata} from "../../components/modals/onboarding-modal/onboarding
 export class HomeComponent implements OnInit {
     public numberOfItemToDisplay: number;
     public homeItems: Component[];
-    public homeFilteredItems: Component[];
-    public homeFilteredSlicedItems: Component[];
+    public homeFilteredItems: Array<Component | DataTypeCatalogComponent>;
+    public homeFilteredSlicedItems: Array<Component | DataTypeCatalogComponent>;
     public folders: FoldersMenu;
     public roles: IConfigRoles;
     public user: IUserProperties;
@@ -358,12 +359,12 @@ export class HomeComponent implements OnInit {
         this.homeFilteredSlicedItems = this.homeFilteredItems.slice(0, this.numberOfItemToDisplay);
     }
 
-    private makeFilteredItems(homeItems: Component[], filter: HomeFilter) {
-        let filteredComponents: Component[] = homeItems;
+    private makeFilteredItems(homeItems: Array<Component>, filter: HomeFilter) {
+        let filteredComponents: Array<Component | DataTypeCatalogComponent> = homeItems;
 
         // filter: exclude all resources of type 'vfcmtType':
-        filteredComponents = filteredComponents.filter((c) =>
-            !c.isResource() || (c as Resource).resourceType.indexOf(this.vfcmtType) === -1);
+            filteredComponents = filteredComponents.filter((c) =>
+                !c.isResource() || (c as Resource).resourceType.indexOf(this.vfcmtType) === -1);
 
         // common entity filter
         // --------------------------------------------------------------------------