From d00cf8079f6ec7d791aa92d9991d95ea0bb4a0e6 Mon Sep 17 00:00:00 2001 From: Eylon Malin Date: Tue, 3 Dec 2019 12:12:38 +0200 Subject: free text filter in instantiationStatus Page Issue-ID: VID-724 Change-Id: I5f363ecc66ff1f1fef9c9d75a12a9c43403aa905 Signed-off-by: Eylon Malin --- .../java/org/onap/vid/properties/Features.java | 1 + .../integration/iFrames/instantiationStatus.e2e.ts | 12 +++ .../jsonBuilders/mocks/jsons/flags.cypress.json | 3 +- .../cypress/support/steps/login.step.ts | 4 +- .../instantiationStatus.component.html | 89 ++++++++++++---------- .../instantiationStatus.component.scss | 6 ++ .../instantiationStatus.component.spec.ts | 24 +++++- .../instantiationStatus.component.ts | 17 ++++- .../basic.popup.service.spec.ts | 1 - .../network/network.popup.service.spec.ts | 1 - .../vnf/vnf.popup.service.spec.ts | 1 - .../pipes/searchFilter/search-filter.pipe.spec.ts | 17 +++++ .../pipes/searchFilter/search-filter.pipe.ts | 14 ++++ .../services/featureFlag/feature-flags.service.ts | 1 + vid-webpack-master/src/app/shared/shared.module.ts | 4 + 15 files changed, 142 insertions(+), 53 deletions(-) create mode 100644 vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.spec.ts create mode 100644 vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.ts diff --git a/vid-app-common/src/main/java/org/onap/vid/properties/Features.java b/vid-app-common/src/main/java/org/onap/vid/properties/Features.java index 5da64653e..0a78c3471 100644 --- a/vid-app-common/src/main/java/org/onap/vid/properties/Features.java +++ b/vid-app-common/src/main/java/org/onap/vid/properties/Features.java @@ -79,6 +79,7 @@ public enum Features implements Feature { FLAG_2002_VNF_PLATFORM_MULTI_SELECT, FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS, FLAG_2002_IDENTIFY_INVARIANT_MACRO_UUID_BY_BACKEND, + FLAG_2004_INSTANTIATION_STATUS_FILTER, ; diff --git a/vid-webpack-master/cypress/integration/iFrames/instantiationStatus.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/instantiationStatus.e2e.ts index 3b657343f..054f7858b 100644 --- a/vid-webpack-master/cypress/integration/iFrames/instantiationStatus.e2e.ts +++ b/vid-webpack-master/cypress/integration/iFrames/instantiationStatus.e2e.ts @@ -58,6 +58,18 @@ describe('Instantiation status', function () { } }); + it('should filter rows by filter text', function () { + cy.openIframe('app/ui/#/instantiationStatus'); + cy.getElementByDataTestsId("instantiationStatusFilter").type("ComplexService"); + cy.get('table#instantiation-status tbody tr').should('have.length', 3); + }); + + it('should filter rows by url filter text', function () { + cy.openIframe('app/ui/#/instantiationStatus?filterText=ComplexService'); + cy.getElementByDataTestsId("instantiationStatusFilter").should('have.value','ComplexService'); + cy.get('table#instantiation-status tbody tr').should('have.length', 3); + }); + it('should enable correct menu items', function () { cy.openIframe('app/ui/#/instantiationStatus'); diff --git a/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json b/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json index 85e091742..b829361af 100644 --- a/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json +++ b/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json @@ -18,5 +18,6 @@ "FLAG_1911_INSTANTIATION_ORDER_IN_ASYNC_ALACARTE": false, "FLAG_1911_INSTANTIATION_ORDER_BUTTON_IN_ASYNC_ALACARTE": false, "FLAG_2002_VNF_PLATFORM_MULTI_SELECT" : false, - "FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS": true + "FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS": true, + "FLAG_2004_INSTANTIATION_STATUS_FILTER": true } diff --git a/vid-webpack-master/cypress/support/steps/login.step.ts b/vid-webpack-master/cypress/support/steps/login.step.ts index a7ed0752e..99c80bcb7 100644 --- a/vid-webpack-master/cypress/support/steps/login.step.ts +++ b/vid-webpack-master/cypress/support/steps/login.step.ts @@ -34,8 +34,8 @@ function login(): void { } } -function openIframe(iframeUrl : string): void { - cy.visit(iframeUrl); +function openIframe(iframeUrl : string): Chainable { + return cy.visit(iframeUrl); } Cypress.Commands.add('login', login); diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html index 212981aaf..9ef98e55f 100644 --- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html +++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html @@ -16,6 +16,13 @@ +
+ +
@@ -41,51 +48,51 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + - -
- - - -
+ +
+ + + +
- {{action.name}} -
- - -
- + {{action.name}} +
+ + +
+ diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.scss b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.scss index 65c2400a3..352a7db10 100644 --- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.scss +++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.scss @@ -275,3 +275,9 @@ div.dataTables_wrapper { margin-top: 0px; height: 0; } + +.instantiationStatusFilter { + position: absolute; + right: 20px; + width: 22%; +} diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.spec.ts b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.spec.ts index 53dfcc1f2..e6ccdda8e 100644 --- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.spec.ts +++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.spec.ts @@ -17,7 +17,10 @@ import {FeatureFlagsService} from "../shared/services/featureFlag/feature-flags. import {JobStatus, ServiceAction} from "../shared/models/serviceInstanceActions"; import each from 'jest-each'; import {ServiceInfoModel} from "../shared/server/serviceInfo/serviceInfo.model"; -import { TooltipModule } from 'ngx-tooltip'; +import {TooltipModule} from 'ngx-tooltip'; +import {SearchFilterPipe} from "../shared/pipes/searchFilter/search-filter.pipe"; +import {ActivatedRoute} from "@angular/router"; +import {FormsModule} from "@angular/forms"; class MockAppStore { @@ -36,10 +39,21 @@ class MockAppStore { } } +class ActivatedRouteMock{ + queryParams() { + return {} + }; + + snapshot = { + queryParams : {} + } +} + describe('Instantiation Status Component', () => { let component: InstantiationStatusComponent; let fixture: ComponentFixture; -let item = new ServiceInfoModel(); + let item = new ServiceInfoModel(); + beforeAll(done => (async () => { TestBed.configureTestingModule({ @@ -48,7 +62,8 @@ let item = new ServiceInfoModel(); ContextMenuModule, ScrollToModule.forRoot(), RouterTestingModule, - TooltipModule + TooltipModule, + FormsModule, ], providers: [ ServiceInfoService, @@ -59,9 +74,10 @@ let item = new ServiceInfoModel(); FeatureFlagsService, ConfigurationService, LogService, + {provide: ActivatedRoute, useClass: ActivatedRouteMock}, {provide: NgRedux, useClass: MockAppStore} ], - declarations: [InstantiationStatusComponent, CapitalizeAndFormatPipe], + declarations: [InstantiationStatusComponent, CapitalizeAndFormatPipe, SearchFilterPipe], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }); await TestBed.compileComponents(); diff --git a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts index efb1a5694..ba26716da 100644 --- a/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts +++ b/vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts @@ -1,4 +1,4 @@ -import {Component, ViewChild} from '@angular/core'; +import {Component, OnInit, ViewChild} from '@angular/core'; import {ServiceInfoService} from '../shared/server/serviceInfo/serviceInfo.service'; import {ServiceInfoModel} from '../shared/server/serviceInfo/serviceInfo.model'; import {InstantiationStatusComponentService} from './instantiationStatus.component.service'; @@ -11,6 +11,8 @@ import {LogService} from '../shared/utils/log/log.service'; import {AppState} from "../shared/store/reducers"; import {NgRedux} from '@angular-redux/store'; import {JobStatus, ServiceAction} from "../shared/models/serviceInstanceActions"; +import {ActivatedRoute} from "@angular/router"; +import {FeatureFlagsService, Features} from "../shared/services/featureFlag/feature-flags.service"; export interface MenuAction{ name: string; @@ -27,7 +29,7 @@ export interface MenuAction{ templateUrl : './instantiationStatus.component.html', styleUrls : ['./instantiationStatus.component.scss'] }) -export class InstantiationStatusComponent { +export class InstantiationStatusComponent implements OnInit { TIMER_TIME_IN_SECONDS : number = 0; timer = null; @@ -84,12 +86,14 @@ export class InstantiationStatusComponent { ]; flags: any; + filterText: string; constructor(private _serviceInfoService: ServiceInfoService, private _instantiationStatusComponentService : InstantiationStatusComponentService, private _contextMenuService: ContextMenuService, private _configurationService : ConfigurationService, private _scrollToService: ScrollToService, private _logService : LogService, + private route: ActivatedRoute, private _store: NgRedux) { this.instantiationStatusComponentService = _instantiationStatusComponentService; this.configurationService = this._configurationService; @@ -100,6 +104,11 @@ export class InstantiationStatusComponent { }); } + ngOnInit() { + let filterTextParam = this.route.snapshot.queryParams["filterText"]; + this.filterText = filterTextParam ? filterTextParam : "" ; + } + activateInterval() { if (this.TIMER_TIME_IN_SECONDS > 0) { this.timer = setInterval(() => { @@ -229,4 +238,8 @@ export class InstantiationStatusComponent { }, 0) } } + + isInstantiationStatusFilterFlagOn() { + return FeatureFlagsService.getFlagState(Features.FLAG_2004_INSTANTIATION_STATUS_FILTER, this._store); + } } diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts index f5e07e7e5..a3c83263c 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/basic.popup.service.spec.ts @@ -33,7 +33,6 @@ class MockReduxStore { "FLAG_SHOW_VERIFY_SERVICE": false, "FLAG_SERVICE_MODEL_CACHE": true, "FLAG_ADVANCED_PORTS_FILTER": true, - MERGE_OBJECT_BY_PATH "FLAG_REGION_ID_FROM_REMOTE": true, "FLAG_ADD_MSO_TESTAPI_FIELD": true }, diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts index 2a0a4c47e..67c371212 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/network/network.popup.service.spec.ts @@ -30,7 +30,6 @@ class MockReduxStore { "FLAG_SHOW_VERIFY_SERVICE": false, "FLAG_SERVICE_MODEL_CACHE": true, "FLAG_ADVANCED_PORTS_FILTER": true, - MERGE_OBJECT_BY_PATH "FLAG_REGION_ID_FROM_REMOTE": true, "FLAG_ADD_MSO_TESTAPI_FIELD": true }, diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts index 8c90655d7..2f1904468 100644 --- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts +++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/vnf/vnf.popup.service.spec.ts @@ -30,7 +30,6 @@ class MockReduxStore { "FLAG_SHOW_VERIFY_SERVICE": false, "FLAG_SERVICE_MODEL_CACHE": true, "FLAG_ADVANCED_PORTS_FILTER": true, - MERGE_OBJECT_BY_PATH "FLAG_REGION_ID_FROM_REMOTE": true, "FLAG_ADD_MSO_TESTAPI_FIELD": true }, diff --git a/vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.spec.ts b/vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.spec.ts new file mode 100644 index 000000000..cbf7324ac --- /dev/null +++ b/vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.spec.ts @@ -0,0 +1,17 @@ +import {SearchFilterPipe} from "./search-filter.pipe"; +import * as _ from 'lodash'; + +describe('Search filter pipe', () => { + + const items= [{'id':1, 'name': 'aaa'}, + {'id':12, 'name': 'bbb', 'children':{'first': 155, 'second': 2, 'third': 3}}, + {'id':3, 'name': 'ccc', 'children':{'first': 1, 'BbB': '3', 'third': 3}}, + {'id':4, 'name': 'aad', 'children':{'first': 1, 'second': 2, 'third': 3}}]; + + test('should return items contains substring bb', () => { + let filter = new SearchFilterPipe(); + let res:any[] = filter.transform(items,'bb'); + expect(_.map(res, 'name' )).toEqual(['bbb','ccc']); + }); + +}); diff --git a/vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.ts b/vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.ts new file mode 100644 index 000000000..725eacb53 --- /dev/null +++ b/vid-webpack-master/src/app/shared/pipes/searchFilter/search-filter.pipe.ts @@ -0,0 +1,14 @@ +import {Pipe, PipeTransform} from '@angular/core'; + +@Pipe({ + name: 'searchFilter' +}) +export class SearchFilterPipe implements PipeTransform { + transform(items: Object[], searchText: string): any[] { + if(!items) return []; + if(!searchText) return items; + return items.filter( item => { + return JSON.stringify(item).toLowerCase().includes(searchText.toLowerCase()); + }); + } +} diff --git a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts index 518830dab..2fb39e8b9 100644 --- a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts +++ b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts @@ -13,6 +13,7 @@ export enum Features { FLAG_FLASH_REPLACE_VF_MODULE ='FLAG_FLASH_REPLACE_VF_MODULE', FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT ='FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT', FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS ='FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS', + FLAG_2004_INSTANTIATION_STATUS_FILTER ='FLAG_2004_INSTANTIATION_STATUS_FILTER', } @Injectable() diff --git a/vid-webpack-master/src/app/shared/shared.module.ts b/vid-webpack-master/src/app/shared/shared.module.ts index d246771af..b12ac435d 100644 --- a/vid-webpack-master/src/app/shared/shared.module.ts +++ b/vid-webpack-master/src/app/shared/shared.module.ts @@ -74,6 +74,7 @@ import {DynamicInputsComponent} from "./components/dynamic-inputs/dynamic-inputs import {DynamicInputLabelPipe} from "./pipes/dynamicInputLabel/dynamic-input-label.pipe"; import {ModelInformationService} from "./components/model-information/model-information.service"; import {MultiselectFormControlService} from "./components/formControls/component/multiselect/multiselect.formControl.service"; +import {SearchFilterPipe} from "./pipes/searchFilter/search-filter.pipe"; @NgModule({ @@ -114,6 +115,7 @@ import {MultiselectFormControlService} from "./components/formControls/component SafePipe, ObjectToArrayPipe, DataFilterPipe, + SearchFilterPipe, InputFormControlComponent, FormControlMessageErrorComponent, GenericFormPopupComponent, @@ -145,6 +147,7 @@ import {MultiselectFormControlService} from "./components/formControls/component SafePipe, ObjectToArrayPipe, DataFilterPipe, + SearchFilterPipe, InputFormControlComponent, FormControlMessageErrorComponent, GenericFormPopupComponent, @@ -196,6 +199,7 @@ import {MultiselectFormControlService} from "./components/formControls/component ElementsTableService, ErrorMsgService, DataFilterPipe, + SearchFilterPipe, ModelInformationService, MultiselectFormControlService ] -- cgit 1.2.3-korg