From 4a754a8c898fb397e19876de2d19141d047a9e58 Mon Sep 17 00:00:00 2001 From: KrupaNagabhushan Date: Fri, 23 Sep 2022 10:17:29 +0100 Subject: View data types in UI catalog Issue-ID: SDC-4220 Signed-off-by: KrupaNagabhushan Change-Id: I880c7fedb58eafc7524fc6833b9b5d02f3b7d523 --- .../src/app/ng2/pipes/entity-filter.pipe.spec.ts | 55 +++++++++++---------- catalog-ui/src/app/ng2/pipes/entity-filter.pipe.ts | 57 ++++++++++++++-------- catalog-ui/src/app/ng2/pipes/resource-name.pipe.ts | 3 +- 3 files changed, 68 insertions(+), 47 deletions(-) (limited to 'catalog-ui/src/app/ng2/pipes') 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 = []; - - const mockComponent = { - componentType: 'testtype', - isResource: jest.fn().mockImplementation(() => false) - } as Partial as Component; - componentList.push(mockComponent); + let componentList: Array = []; const mockComponent1 = { - componentType: 'newtesttype', - isResource: jest.fn().mockImplementation(() => false) + componentType: 'SERVICE', + isResource: jest.fn().mockImplementation(() => false), } as Partial as Component; componentList.push(mockComponent1); const mockComponent2 = { - componentType: 'newtesttype', + componentType: 'RESOURCE', isResource: jest.fn().mockImplementation(() => true), getComponentSubType: jest.fn().mockImplementation(() => 'subComponent') } as Partial as Component; componentList.push(mockComponent2); + const mockComponent3 = { + componentType: 'DATATYPE', + getComponentSubType: jest.fn().mockImplementation(() => 'toscaSubComponent') + } as Partial as DataTypeCatalogComponent; + componentList.push(mockComponent3); + entityFilterMock = { - selectedComponentTypes: ['Testtype', 'Testtype1'], - selectedResourceSubTypes: ['subComponent'] + selectedComponentTypes: ['Service', 'RESOURCE'], + selectedResourceSubTypes: ['subComponent'], + selectedToscaTypes: ['toscaSubComponent'] }; - let response: Array = entityFilterPipe.transform(componentList, entityFilterMock); - expect(response).toHaveLength(2); - expect(response[0]).toEqual(mockComponent); + let response: Array = 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 = entityFilterPipe.transform(componentList, entityFilterMock); + let response: Array = 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 = entityFilterPipe.transform(componentList, entityFilterMock); + let response: Array = 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 = entityFilterPipe.transform(componentList, entityFilterMock); + let response: Array = 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 = entityFilterPipe.transform(componentList, entityFilterMock); + let response: Array = 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 = []; - const mockComponent = { + const mockComponentObj = Object.create(Component.prototype); + const mockComponent = Object.assign(mockComponentObj,{ distributionStatus: 'distributionStatus', model: 'testModel' - } as Partial as Component; + }); componentList.push(mockComponent); - const mockComponent1 = { + const mockComponentObj1 = Object.create(Component.prototype); + const mockComponent1 = Object.assign(mockComponentObj1,{ distributionStatus: 'testDiststatus', model: 'mockModel' - } as Partial as Component; + }); componentList.push(mockComponent1); const searchFilter: ISearchFilter = { @@ -204,7 +209,7 @@ describe('EntityFilterPipe', () => { entityFilterMock = { search: searchFilter }; - let response: Array = entityFilterPipe.transform(componentList, entityFilterMock); + let response: Array = 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; selectedResourceSubTypes?:Array; + selectedToscaTypes?:Array // Categories selectedCategoriesModel?:Array; // Statuses @@ -50,29 +52,37 @@ export class EntityFilterPipe implements PipeTransform{ constructor() { } - public static transform(components:Array, filter:IEntityFilterObject) { - let filteredComponents:Array = components; + public static transform(components:Array, filter:IEntityFilterObject) { + let filteredComponents:Array = 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 = 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 = 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, filter:IEntityFilterObject) { + public transform(components:Array, 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; } -- cgit 1.2.3-korg