View data types in UI catalog

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

3 files changed, 68 insertions, 47 deletions

diff --git a/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.spec.ts b/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.spec.ts
index 6e0a79bbed..967345a9ad 100644
--- a/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.spec.ts
+++ b/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.spec.ts
@@ -22,8 +22,9 @@
 import { TestBed } from "@angular/core/testing";
 import { EntityFilterPipe } from './entity-filter.pipe';
 import { IEntityFilterObject } from './entity-filter.pipe';
-import { Component } from "app/models";
+import {Component} from "app/models";
 import { ISearchFilter } from './entity-filter.pipe';
+import {DataTypeCatalogComponent} from "../../models/data-type-catalog-component";
 
 describe('EntityFilterPipe', () => {
     let entityFilterPipe: EntityFilterPipe;
@@ -42,35 +43,37 @@ describe('EntityFilterPipe', () => {
     });
 
     it('Transform method should filter objects by type matching with selectedComponentTypes', () => {
-        let componentList: Array<Component> = [];
-
-        const mockComponent = {
-            componentType: 'testtype',
-            isResource: jest.fn().mockImplementation(() => false)
-        } as Partial<Component> as Component;
-        componentList.push(mockComponent);
+        let componentList: Array<Component | DataTypeCatalogComponent> = [];
 
         const mockComponent1 = {
-            componentType: 'newtesttype',
-            isResource: jest.fn().mockImplementation(() => false)
+            componentType: 'SERVICE',
+            isResource: jest.fn().mockImplementation(() => false),
         } as Partial<Component> as Component;
         componentList.push(mockComponent1);
 
         const mockComponent2 = {
-            componentType: 'newtesttype',
+            componentType: 'RESOURCE',
             isResource: jest.fn().mockImplementation(() => true),
             getComponentSubType: jest.fn().mockImplementation(() => 'subComponent')
         } as Partial<Component> as Component;
         componentList.push(mockComponent2);
 
+        const mockComponent3 = {
+            componentType: 'DATATYPE',
+            getComponentSubType: jest.fn().mockImplementation(() => 'toscaSubComponent')
+        } as Partial<DataTypeCatalogComponent> as DataTypeCatalogComponent;
+        componentList.push(mockComponent3);
+
         entityFilterMock = {
-            selectedComponentTypes: ['Testtype', 'Testtype1'],
-            selectedResourceSubTypes: ['subComponent']
+            selectedComponentTypes: ['Service', 'RESOURCE'],
+            selectedResourceSubTypes: ['subComponent'],
+            selectedToscaTypes: ['toscaSubComponent']
         };
-        let response: Array<Component> = entityFilterPipe.transform(componentList, entityFilterMock);
-        expect(response).toHaveLength(2);
-        expect(response[0]).toEqual(mockComponent);
+        let response: Array<Component | DataTypeCatalogComponent> = entityFilterPipe.transform(componentList, entityFilterMock);
+        expect(response).toHaveLength(3);
+        expect(response[0]).toEqual(mockComponent1);
         expect(response[1]).toEqual(mockComponent2);
+        expect(response[2]).toEqual(mockComponent3);
     });
 
     it('Transform method should filter objects by categories & subcategories matching with selectedCategoriesModel', () => {
@@ -104,7 +107,7 @@ describe('EntityFilterPipe', () => {
         entityFilterMock = {
             selectedCategoriesModel: ['categoryname.subcategoryname', 'resourceNewCategory.name', 'serviceNewCategory.name']
         };
-        let response: Array<Component> = entityFilterPipe.transform(componentList, entityFilterMock);
+        let response: Array<Component | DataTypeCatalogComponent> = entityFilterPipe.transform(componentList, entityFilterMock);
         expect(response).toHaveLength(3);
         expect(response[0]).toEqual(mockComponent);
         expect(response[1]).toEqual(mockComponent2);
@@ -132,7 +135,7 @@ describe('EntityFilterPipe', () => {
         entityFilterMock = {
             selectedStatuses: ['lifecyclestatus', 'DISTRIBUTED']
         };
-        let response: Array<Component> = entityFilterPipe.transform(componentList, entityFilterMock);
+        let response: Array<Component | DataTypeCatalogComponent> = entityFilterPipe.transform(componentList, entityFilterMock);
         expect(response).toHaveLength(2);
         expect(response[0]).toEqual(mockComponent);
         expect(response[1]).toEqual(mockComponent2);
@@ -153,7 +156,7 @@ describe('EntityFilterPipe', () => {
         entityFilterMock = {
             distributed: ['diststatus', 'localstatus']
         };
-        let response: Array<Component> = entityFilterPipe.transform(componentList, entityFilterMock);
+        let response: Array<Component | DataTypeCatalogComponent> = entityFilterPipe.transform(componentList, entityFilterMock);
         expect(response).toHaveLength(1);
         expect(response[0]).toEqual(mockComponent);
     });
@@ -178,7 +181,7 @@ describe('EntityFilterPipe', () => {
         entityFilterMock = {
             selectedModels: ['testModel', 'localTest', 'SDC AID']
         };
-        let response: Array<Component> = entityFilterPipe.transform(componentList, entityFilterMock);
+        let response: Array<Component | DataTypeCatalogComponent> = entityFilterPipe.transform(componentList, entityFilterMock);
         expect(response).toHaveLength(2);
         expect(response[0]).toEqual(mockComponent);
         expect(response[1]).toEqual(mockComponent2);
@@ -186,16 +189,18 @@ describe('EntityFilterPipe', () => {
 
     it('Transform method should filter objects by custom search matching with given keys', () => {
         let componentList: Array<Component> = [];
-        const mockComponent = {
+        const mockComponentObj = Object.create(Component.prototype);
+        const mockComponent = Object.assign(mockComponentObj,{
             distributionStatus: 'distributionStatus',
             model: 'testModel'
-        } as Partial<Component> as Component;
+        });
         componentList.push(mockComponent);
 
-        const mockComponent1 = {
+        const mockComponentObj1 = Object.create(Component.prototype);
+        const mockComponent1 = Object.assign(mockComponentObj1,{
             distributionStatus: 'testDiststatus',
             model: 'mockModel'
-        } as Partial<Component> as Component;
+        });
         componentList.push(mockComponent1);
 
         const searchFilter: ISearchFilter = {
@@ -204,7 +209,7 @@ describe('EntityFilterPipe', () => {
         entityFilterMock = {
             search: searchFilter
         };
-        let response: Array<Component> = entityFilterPipe.transform(componentList, entityFilterMock);
+        let response: Array<Component | DataTypeCatalogComponent> = entityFilterPipe.transform(componentList, entityFilterMock);
         expect(response).toHaveLength(1);
         expect(response[0]).toEqual(mockComponent);
     });
diff --git a/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts b/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts
index e1b95212e4..a4d7c9a954 100644
--- a/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts
+++ b/catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts
@@ -20,7 +20,8 @@
 

 import {Pipe, PipeTransform} from "@angular/core";

 import {Component, Resource} from "app/models";

-import {ComponentType, DEFAULT_MODEL_NAME} from "app/utils/constants";

+import {ComponentType, DEFAULT_MODEL_NAME, ToscaType} from "app/utils/constants";

+import {DataTypeCatalogComponent} from "../../models/data-type-catalog-component";

 

 export interface ISearchFilter {

     [key:string]: string;

@@ -32,6 +33,7 @@ export interface IEntityFilterObject {
     // Types

     selectedComponentTypes?:Array<string>;

     selectedResourceSubTypes?:Array<string>;

+    selectedToscaTypes?:Array<string>

     // Categories

     selectedCategoriesModel?:Array<string>;

     // Statuses

@@ -50,29 +52,37 @@ export class EntityFilterPipe implements PipeTransform{
     constructor() {

     }

 

-    public static transform(components:Array<Component>, filter:IEntityFilterObject) {

-        let filteredComponents:Array<Component> = components;

+    public static transform(components:Array<Component | DataTypeCatalogComponent>, filter:IEntityFilterObject) {

+        let filteredComponents:Array<Component | DataTypeCatalogComponent> = components;

 

         // filter by type

         // --------------------------------------------------------------------------

-        if ((filter.selectedComponentTypes && filter.selectedComponentTypes.length > 0) || (filter.selectedResourceSubTypes && filter.selectedResourceSubTypes.length > 0)) {

+        if ((filter.selectedComponentTypes && filter.selectedComponentTypes.length > 0) || (filter.selectedResourceSubTypes && filter.selectedResourceSubTypes.length > 0)

+            || (filter.selectedToscaTypes && filter.selectedToscaTypes.length > 0)) {

             let filteredTypes = [];

-            angular.forEach(components, (component:Component):void => {

+            angular.forEach(components, (component: Component | DataTypeCatalogComponent): void => {

                 // Filter by component type

-                let typeLower:string = component.componentType.toLowerCase();

-                let typeFirstCapital:string = typeLower.charAt(0).toUpperCase() + typeLower.slice(1);

-                if (filter.selectedComponentTypes.indexOf(typeFirstCapital) !== -1) {

-                    filteredTypes.push(component);

-                }

+                    if (component.componentType === ComponentType.RESOURCE || ComponentType.SERVICE && component.componentType !== ToscaType.DATATYPE) {

+                        let typeLower: string = component.componentType.toLowerCase();

+                        let typeFirstCapital: string = typeLower.charAt(0).toUpperCase() + typeLower.slice(1);

+                        if (filter.selectedComponentTypes.indexOf(typeFirstCapital) !== -1) {

+                            filteredTypes.push(component);

+                        }

+

+                        // Filter by resource sub type, only in case the resource checkbox was not selected (because in this case we already added all the components in above section).

+                        if (component.isResource() && filter.selectedComponentTypes.indexOf("Resource") === -1 && filter.selectedResourceSubTypes.length > 0) {

+                            //filteredComponents.pop(); // Remove the last inserted component.

+                            let resource: Resource = <Resource>component;

+                            if (filter.selectedResourceSubTypes.indexOf(resource.getComponentSubType()) !== -1) {

+                                filteredTypes.push(component);

+                            }

+                        }

+                    }

 

-                // Filter by resource sub type, only in case the resource checkbox was not selected (because in this case we already added all the components in above section).

-                if (component.isResource() && filter.selectedComponentTypes.indexOf("Resource") === -1 && filter.selectedResourceSubTypes.length > 0) {

-                    //filteredComponents.pop(); // Remove the last inserted component.

-                    let resource:Resource = <Resource>component;

-                    if (filter.selectedResourceSubTypes.indexOf(resource.getComponentSubType()) !== -1) {

+                    if (component.componentType === ToscaType.DATATYPE && filter.selectedToscaTypes.length > 0) {

                         filteredTypes.push(component);

                     }

-                }

+

             });

             filteredComponents = filteredTypes;

         }

@@ -138,7 +148,7 @@ export class EntityFilterPipe implements PipeTransform{
         if (filter.selectedModels && filter.selectedModels.length > 0) {

             let filteredModels = [];

             let allSelectedModels =  [].concat.apply([], filter.selectedModels);

-            angular.forEach(filteredComponents, (component:Component):void => {

+            angular.forEach(filteredComponents, (component:Component | DataTypeCatalogComponent):void => {

                 if (component.model && allSelectedModels.indexOf(component.model) > -1) {

                     filteredModels.push(component);

                 } else if (!component.model && allSelectedModels.indexOf(DEFAULT_MODEL_NAME) > -1) {

@@ -150,21 +160,26 @@ export class EntityFilterPipe implements PipeTransform{
 

         // filter by search

         // --------------------------------------------------------------------------

-        if (filter.search != undefined) {

+        if (filter.search != undefined && filter.search['filterTerm'] != '') {

+            let filteredSearchComponents = [];

             Object.keys(filter.search).forEach((searchKey) => {

                 let searchVal = filter.search[searchKey];

                 if (searchVal) {

                     searchVal = searchVal.toLowerCase();

-                    filteredComponents = filteredComponents.filter((component:Component) =>

-                        component[searchKey].toLowerCase().indexOf(searchVal) !== -1);

+                    angular.forEach(filteredComponents, (component: Component | DataTypeCatalogComponent): void => {

+                        if (component[searchKey].toLowerCase().indexOf(searchVal) !== -1) {

+                            filteredSearchComponents.push(component);

+                        }

+                    });

                 }

             });

+            filteredComponents = filteredSearchComponents;

         }

 

         return filteredComponents;

     }

 

-    public transform(components:Array<Component>, filter:IEntityFilterObject) {

+    public transform(components:Array<any>, filter:IEntityFilterObject) {

         return EntityFilterPipe.transform(components, filter);

     }

 }

diff --git a/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts b/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts
index 0fdbbcaade..8debb3a05d 100644
--- a/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts
+++ b/catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts
@@ -26,8 +26,9 @@ import * as _ from 'lodash';
 export class ResourceNamePipe implements PipeTransform {
     
     public static getDisplayName (value:string): string {
+        let nameFirstCapital: string = value.charAt(0).toUpperCase() + value.slice(1);
         const newName:string =
-            _.last(value.split(/tosca\.nodes\..*network\..*relationships\..*org\.openecomp\..*resource\.nfv\..*nodes\.module\..*cp\..*vl\./));
+            _.last(nameFirstCapital.split(/tosca\.nodes\..*network\..*relationships\..*org\.openecomp\..*resource\.nfv\..*nodes\.module\..*cp\..*vl\./));
         return (newName) ? newName : value;
     }