diff options
Diffstat (limited to 'catalog-ui/src/app/ng2')
6 files changed, 112 insertions, 9 deletions
diff --git a/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap index d6091cd599..b41d7ce1fe 100644 --- a/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap +++ b/catalog-ui/src/app/ng2/pages/catalog/__snapshots__/catalog.component.spec.ts.snap @@ -13,6 +13,7 @@ exports[`catalog component should match current snapshot of catalog component 1` initScopeMembers={[Function Function]} isDefaultFilter={[Function Function]} loaderService={[Function Object]} + models={[Function Array]} resourceNamePipe={[Function Object]} sdcConfig={[Function Object]} sdcMenu={[Function Object]} @@ -47,6 +48,28 @@ exports[`catalog component should match current snapshot of catalog component 1` class="sdc-catalog-leftbar-container" > <div + class="sdc-catalog-model-filter-container" + > + <div + class="i-sdc-designer-leftbar-section-title pointer" + > + <span + class="i-sdc-designer-leftbar-section-title-icon" + /> + <span + class="i-sdc-designer-leftbar-section-title-text" + data-tests-id="statusFilterTitle" + > + Model + </span> + </div> + <div + class="i-sdc-designer-leftbar-section-content" + > + <sdc-checklist /> + </div> + </div> + <div class="sdc-catalog-type-filter-container" > <div 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 4a13bee973..d130d1e25a 100644 --- a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html +++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.html @@ -19,6 +19,20 @@ <!-- LEFT SIDE --> <div perfectScrollbar class="sdc-catalog-body-container w-sdc-left-sidebar i-sdc-designer-left-sidebar"> <div class="sdc-catalog-leftbar-container"> + <!-- Model --> + <div class="sdc-catalog-model-filter-container"> + <div class="i-sdc-designer-leftbar-section-title pointer" (click)="sectionClick('model')" + [ngClass]="{'expanded': expandedSection.indexOf('model') !== -1}"> + <span class="i-sdc-designer-leftbar-section-title-icon"></span> + <span class="i-sdc-designer-leftbar-section-title-text" + data-tests-id="statusFilterTitle">Model</span> + </div> + <div class="i-sdc-designer-leftbar-section-content"> + <sdc-checklist [checklistModel]="modelsChecklistModel" [testId]="'checklist-model'" + (checkedChange)="gui.onModelClick()"></sdc-checklist> + </div> + </div> + <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 ff27ec77fd..547303326d 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 @@ -75,18 +75,21 @@ describe('catalog component', () => { components: ["Resource.VF", "Resource.VFC"], order: ["lastUpdateDate", true], statuses: ["inDesign"], + models: ["test"], term: "Vf" } checkboxesFilterMock = { selectedCategoriesModel: ["serviceNewCategory.network l4+", "resourceNewCategory.allotted resource.allotted resource"], selectedComponentTypes: ["Resource.VF", "Resource.VFC"], selectedResourceSubTypes: ["VF", "VFC"], - selectedStatuses: ["NOT_CERTIFIED_CHECKOUT", "NOT_CERTIFIED_CHECKIN"] + selectedStatuses: ["NOT_CERTIFIED_CHECKOUT", "NOT_CERTIFIED_CHECKIN"], + selectedModels: ["test"] }; checkboxesFilterKeysMock = { categories:{_main: ["serviceNewCategory.network l4+"]}, componentTypes: { Resource: ["Resource.VF", "Resource.VFC"], _main: ["Resource.VFC"]}, - statuses: {_main: ["inDesign"]} + statuses: {_main: ["inDesign"]}, + models: {_main: ["test"]} } stateServiceMock = { @@ -186,7 +189,7 @@ describe('catalog component', () => { expect(component.componentInstance.numberOfItemToDisplay).toEqual(0); expect(component.componentInstance.categories).toEqual(categoriesElements); expect(component.componentInstance.confStatus).toEqual(component.componentInstance.sdcMenu.statuses); - expect(component.componentInstance.expandedSection).toEqual( ["type", "category", "status"]); + expect(component.componentInstance.expandedSection).toEqual( ["type", "category", "status", "model"]); expect(component.componentInstance.catalogItems).toEqual([]); expect(component.componentInstance.search).toEqual({FilterTerm: ""}); expect(component.componentInstance.initCategoriesMap).toHaveBeenCalled(); @@ -203,10 +206,12 @@ describe('catalog component', () => { component.componentInstance.buildChecklistModelForTypes = jest.fn(); component.componentInstance.buildChecklistModelForCategories = jest.fn(); component.componentInstance.buildChecklistModelForStatuses = jest.fn(); + component.componentInstance.buildChecklistModelForModels = jest.fn(); component.componentInstance.buildCheckboxLists(); expect(component.componentInstance.buildChecklistModelForTypes).toHaveBeenCalled(); expect(component.componentInstance.buildChecklistModelForCategories).toHaveBeenCalled(); expect(component.componentInstance.buildChecklistModelForStatuses).toHaveBeenCalled(); + expect(component.componentInstance.buildChecklistModelForModels).toHaveBeenCalled(); }); it ('should call on catalog component getTestIdForCheckboxByText ' , () => { @@ -266,7 +271,7 @@ describe('catalog component', () => { component.componentInstance.initCheckboxesFilter(); expect(component.componentInstance.checkboxesFilter.selectedComponentTypes).toEqual([]); expect(component.componentInstance.checkboxesFilter.selectedResourceSubTypes).toEqual([]); - expect(component.componentInstance.checkboxesFilter.selectedCategoriesModel).toEqual([]); + expect(component.componentInstance.checkboxesFilter.selectedModels).toEqual([]); expect(component.componentInstance.checkboxesFilter.selectedStatuses).toEqual([]); }); @@ -276,6 +281,7 @@ describe('catalog component', () => { expect(component.componentInstance.checkboxesFilterKeys.componentTypes).toEqual({ _main: [] }); expect(component.componentInstance.checkboxesFilterKeys.categories).toEqual({ _main: [] }); expect(component.componentInstance.checkboxesFilterKeys.statuses).toEqual({ _main: [] }); + expect(component.componentInstance.checkboxesFilterKeys.models).toEqual({ _main: [] }); }); it ('should call on catalog component initCategoriesMap' , () => { @@ -469,6 +475,7 @@ describe('catalog component', () => { component.componentInstance.applyFilterParamsComponents = jest.fn(); component.componentInstance.applyFilterParamsCategories = jest.fn(); component.componentInstance.applyFilterParamsStatuses = jest.fn(); + component.componentInstance.applyFilterParamsModels = jest.fn(); component.componentInstance.applyFilterParamsOrder = jest.fn(); component.componentInstance.applyFilterParamsTerm = jest.fn(); component.componentInstance.filterCatalogItems = jest.fn(); @@ -596,7 +603,7 @@ describe('catalog component', () => { component.componentInstance.applyFilterParamsToView = jest.fn(); component.componentInstance.filterParams = { active: true, categories: [], components: [], order: ["lastUpdateDate", true], statuses: [], term: ""}; component.componentInstance.$state.go = jest.fn().mockImplementation(() => Promise.resolve({ json: () => [] })); - const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"} + const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.models": "test", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"} component.componentInstance.changeFilterParams(filterParamsMock); expect(component.componentInstance.filterParams).toEqual(filterParamsMock); expect(component.componentInstance.$state.go).toHaveBeenCalledWith('.',newParams, {location: 'replace', notify: false}); @@ -610,7 +617,7 @@ describe('catalog component', () => { component.componentInstance.buildCheckboxLists = jest.fn(); component.componentInstance.filterParams = { active: true, categories: [], components: [], order: ["lastUpdateDate", true], statuses: [], term: ""}; component.componentInstance.$state.go = jest.fn().mockImplementation(() => Promise.resolve({ json: () => [] })); - const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"} + const newParams = {"filter.active": true, "filter.categories": "resourceNewCategory.allotted resource.allotted resource,resourceNewCategory.allotted resource.contrail route,resourceNewCategory.application l4+.application server", "filter.components": "Resource.VF,Resource.VFC", "filter.models": "test", "filter.order": "-lastUpdateDate", "filter.statuses": "inDesign", "filter.term": "Vf"} component.componentInstance.typesChecklistModel = checkListModelMock; component.componentInstance.categoriesChecklistModel = checkListModelMock; component.componentInstance.statusChecklistModel = checkListModelMock; 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 527764862a..5d6526001c 100644 --- a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts +++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.ts @@ -27,12 +27,15 @@ import { SdcMenuToken, IAppMenu } from "../../config/sdc-menu.config"; 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 { Model } from "app/models/model"; +import { DEFAULT_MODEL_NAME } from "app/utils/constants"; interface Gui { onComponentSubTypesClick:Function; onComponentTypeClick:Function; onCategoryClick:Function; onStatusClick:Function; + onModelClick:Function; changeFilterTerm:Function; } @@ -40,6 +43,7 @@ interface IFilterParams { components: string[]; categories: string[]; statuses: (string)[]; + models: string[]; order: [string, boolean]; term: string; active: boolean; @@ -54,6 +58,7 @@ interface ICheckboxesFilterKeys { componentTypes: ICheckboxesFilterMap; categories: ICheckboxesFilterMap; statuses: ICheckboxesFilterMap; + models: ICheckboxesFilterMap; } interface ICategoriesMap { @@ -73,6 +78,7 @@ export class CatalogComponent { public checkboxesFilterKeys:ICheckboxesFilterKeys; public gui:Gui; public categories:Array<IMainCategory>; + public models: Array<string> = new Array(); public filteredCategories:Array<IMainCategory>; public confStatus:IConfigStatuses; public componentTypes:{[key:string]: Array<string>}; @@ -96,11 +102,13 @@ export class CatalogComponent { public typesChecklistModel: SdcUiCommon.ChecklistModel; public categoriesChecklistModel: SdcUiCommon.ChecklistModel; public statusChecklistModel: SdcUiCommon.ChecklistModel; + public modelsChecklistModel: SdcUiCommon.ChecklistModel; private defaultFilterParams:IFilterParams = { components: [], categories: [], statuses: [], + models: [], order: ['lastUpdateDate', true], term: '', active: true @@ -149,8 +157,10 @@ export class CatalogComponent { this.numberOfItemToDisplay = 0; this.categories = this.makeSortedCategories(this.cacheService.get('serviceCategories').concat(this.cacheService.get('resourceCategories'))) .map((cat) => <IMainCategory>cat); + this.models = this.cacheService.get('models').map((model:Model) => model.name); + this.models.unshift(DEFAULT_MODEL_NAME); this.confStatus = this.sdcMenu.statuses; - this.expandedSection = ["type", "category", "status"]; + this.expandedSection = ["type", "category", "status", "model"]; this.catalogItems = []; this.search = {FilterTerm: ""}; this.categoriesMap = this.initCategoriesMap(); @@ -167,6 +177,7 @@ export class CatalogComponent { this.buildChecklistModelForTypes(); this.buildChecklistModelForCategories(); this.buildChecklistModelForStatuses(); + this.buildChecklistModelForModels(); } private getTestIdForCheckboxByText = ( text: string ):string => { @@ -216,6 +227,18 @@ export class CatalogComponent { ); } + private buildChecklistModelForModels() { + this.modelsChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.models._main, + this.models.map((model) => new SdcUiCommon.ChecklistItemModel( + model, + false, + this.checkboxesFilterKeys.models._main.indexOf(model) !== -1, + null, + this.getTestIdForCheckboxByText(model), + model)) + ); + } + private buildChecklistModelForStatuses() { // For statuses checklist model, use the statuses keys as values. On applying filtering map the statuses keys to statuses values. this.statusChecklistModel = new SdcUiCommon.ChecklistModel(this.checkboxesFilterKeys.statuses._main, @@ -236,6 +259,7 @@ export class CatalogComponent { this.checkboxesFilter.selectedResourceSubTypes = []; this.checkboxesFilter.selectedCategoriesModel = []; this.checkboxesFilter.selectedStatuses = []; + this.checkboxesFilter.selectedModels = []; } private initCheckboxesFilterKeys() { @@ -244,6 +268,7 @@ export class CatalogComponent { this.checkboxesFilterKeys.componentTypes = { _main: [] }; this.checkboxesFilterKeys.categories = { _main: [] }; this.checkboxesFilterKeys.statuses = { _main: [] }; + this.checkboxesFilterKeys.models = { _main: [] }; } private initCategoriesMap(categoriesList?:(ICategoryBase)[], parentCategory:ICategoryBase=null): ICategoriesMap { @@ -360,6 +385,12 @@ export class CatalogComponent { term: filterTerm }); }; + + this.gui.onModelClick = (): void => { + this.changeFilterParams({ + models: this.makeFilterParamsFromCheckboxes(this.modelsChecklistModel) + }); + }; } public raiseNumberOfElementToDisplay(recalculate:boolean = false): void { @@ -444,6 +475,7 @@ export class CatalogComponent { this.applyFilterParamsComponents(filterParams); this.applyFilterParamsCategories(filterParams); this.applyFilterParamsStatuses(filterParams); + this.applyFilterParamsModels(filterParams); this.applyFilterParamsOrder(filterParams); this.applyFilterParamsTerm(filterParams); @@ -499,6 +531,11 @@ export class CatalogComponent { this.checkboxesFilter.selectedStatuses = _.reduce(_.flatMap(this.checkboxesFilterKeys.statuses), (stats, st:string) => [...stats, ...this.confStatus[st].values], []); } + private applyFilterParamsModels(filterParams: IFilterParams) { + this.applyFilterParamsToCheckboxes(this.modelsChecklistModel, filterParams.models); + this.checkboxesFilter.selectedModels = _.flatMap(this.checkboxesFilterKeys.models); + } + private applyFilterParamsOrder(filterParams: IFilterParams) { this.sortBy = filterParams.order[0]; this.reverse = filterParams.order[1]; @@ -525,6 +562,8 @@ export class CatalogComponent { paramsChecklist = paramsChecklist || this.categoriesChecklistModel; case 'filter.statuses': paramsChecklist = paramsChecklist || this.statusChecklistModel; + case 'filter.models': + paramsChecklist = paramsChecklist || this.modelsChecklistModel; // for those cases above - split param by comma and make reduced checklist values for filter params (url) newVal = _.uniq(params[k].split(',')); @@ -559,6 +598,7 @@ export class CatalogComponent { case 'components': case 'categories': case 'statuses': + case 'models': newVal = changedFilterParams[k] && changedFilterParams[k].length ? changedFilterParams[k].join(',') : null; break; case 'order': @@ -582,7 +622,8 @@ export class CatalogComponent { this.changeFilterParams({ components: this.makeFilterParamsFromCheckboxes(this.typesChecklistModel), categories: this.makeFilterParamsFromCheckboxes(this.categoriesChecklistModel), - statuses: this.makeFilterParamsFromCheckboxes(this.statusChecklistModel) + statuses: this.makeFilterParamsFromCheckboxes(this.statusChecklistModel), + models: this.makeFilterParamsFromCheckboxes(this.modelsChecklistModel) }); // rebuild the checkboxes to show selected this.buildCheckboxLists(); 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 af107ed006..b67f42d4df 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,7 @@ import {Pipe, PipeTransform} from "@angular/core"; import {Component, Resource} from "app/models"; -import {ComponentType} from "app/utils/constants"; +import {ComponentType, DEFAULT_MODEL_NAME} from "app/utils/constants"; export interface ISearchFilter { [key:string]: string; @@ -34,6 +34,8 @@ export interface IEntityFilterObject { selectedCategoriesModel?:Array<string>; // Statuses selectedStatuses?:Array<string>; + // Models + selectedModels?:Array<string>; // distributed distributed?:Array<string>; // search @@ -129,6 +131,21 @@ export class EntityFilterPipe implements PipeTransform{ filteredComponents = filteredDistributed; } + // filter by model + // -------------------------------------------------------------------------- + if (filter.selectedModels && filter.selectedModels.length > 0) { + let filteredModels = []; + let defaultModelPresent = filter.selectedModels.indexOf(DEFAULT_MODEL_NAME) > -1; + angular.forEach(filteredComponents, (component:Component):void => { + if (filter.selectedModels.indexOf(component.model) > -1) { + filteredModels.push(component); + } else if (!component.model && defaultModelPresent) { + filteredModels.push(component); + } + }); + filteredComponents = filteredModels; + } + // filter by search // -------------------------------------------------------------------------- if (filter.search != undefined) { diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts index 2b9b49cf62..55e0899cb6 100644 --- a/catalog-ui/src/app/ng2/services/config.service.ts +++ b/catalog-ui/src/app/ng2/services/config.service.ts @@ -49,6 +49,7 @@ export class ConfigService { this.cacheService.set('serviceCategories', response.categories.serviceCategories); this.cacheService.set('resourceCategories', response.categories.resourceCategories); this.cacheService.set('UIConfiguration', response.configuration); + this.cacheService.set('models', response.models); }); return promise; } |