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 --- .../app/ng2/pages/catalog/catalog.component.html | 2 +- .../ng2/pages/catalog/catalog.component.spec.ts | 12 ++--- .../src/app/ng2/pages/catalog/catalog.component.ts | 61 +++++++++++++--------- .../src/app/ng2/pages/home/home.component.ts | 15 +++--- 4 files changed, 52 insertions(+), 38 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages') 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()"> - +
{ 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; public confStatus:IConfigStatuses; public componentTypes:{[key:string]: Array}; - public catalogItems:Array; - public catalogFilteredItems:Array; - public catalogFilteredSlicedItems:Array; + public catalogItems:Array; + public catalogFilteredItems:Array; + public catalogFilteredSlicedItems:Array; public expandedSection:Array; 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 = {}; 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):void => { + let onSuccess = (followedResponse:Array):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):void => { + private updateCatalogItems = (items:Array):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, filter:IEntityFilterObject, search:ISearchFilter, sortBy:string, reverse:boolean) { - let filteredComponents:Array = catalogItems; + private makeFilteredItems(catalogItems:Array, filter:IEntityFilterObject, search:ISearchFilter, sortBy:string, reverse:boolean) { + let filteredComponents:Array = 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; + public homeFilteredSlicedItems: Array; 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, filter: HomeFilter) { + let filteredComponents: Array = 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 // -------------------------------------------------------------------------- -- cgit 1.2.3-korg