diff options
author | 2019-12-03 15:33:43 +0000 | |
---|---|---|
committer | 2019-12-03 15:33:43 +0000 | |
commit | 2a8f0ba72f2c449d2048674a22820d4f8385f8ca (patch) | |
tree | bbdec4b493af20f44d935bf4671c1276c9e1bfc7 /vid-webpack-master/src/app | |
parent | f5dda3933425888c52b7b9d1c0fa2a6227c89123 (diff) | |
parent | d00cf8079f6ec7d791aa92d9991d95ea0bb4a0e6 (diff) |
Merge "free text filter in instantiationStatus Page"
Diffstat (limited to 'vid-webpack-master/src/app')
11 files changed, 125 insertions, 50 deletions
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 @@ <span class="icon-refresh"></span> </div> </div> + <div class="instantiationStatusFilter" *ngIf=isInstantiationStatusFilterFlagOn()> + <input + [attr.data-tests-id]="'instantiationStatusFilter'" + class="form-control input-text" + [placeholder]="'filter'" + [(ngModel)]="filterText"> + </div> </div> </div> </div> @@ -41,51 +48,51 @@ </tr> </thead> <tbody > - <tr *ngFor="let data of serviceInfoData; trackBy: trackByFn; let i = index" [ngClass]="{'odd' : data.serviceIndex%2 == 1}" [id]="data.jobId"> - <td class="smallTd" id="userId"><custom-ellipsis [id]="data.userId" [value]="data.userId"></custom-ellipsis></td> - <td class="smallTd" id="action"><custom-ellipsis [id]="data.action" [value]="data.action | capitalizeAndFormat"></custom-ellipsis></td> - <td class="normal" id="serviceModelName"><custom-ellipsis [id]="data.serviceModelName" [value]="data.serviceModelName"></custom-ellipsis></td> - <td class="normal" id="serviceInstanceName"><custom-ellipsis [id]="data.serviceInstanceName" [value]="data.serviceInstanceName"></custom-ellipsis></td> - <td class="smallTd" id="serviceModelVersion"><custom-ellipsis [id]="data.serviceModelVersion" [value]="data.serviceModelVersion"></custom-ellipsis></td> - <td class="normal" id="subscriberName"><custom-ellipsis [id]="data.subscriberName" [value]="data.subscriberName"></custom-ellipsis></td> - <td class="mediumTd" id="serviceType"><custom-ellipsis [id]="data.serviceType" [value]="data.serviceType"></custom-ellipsis></td> - <td class="normal" id="regionId"><custom-ellipsis [id]="data.regionId" [value]="data.regionId"></custom-ellipsis></td> - <td class="mediumTd" id="tenantName"><custom-ellipsis [id]="data.tenantName" [value]="data.tenantName"></custom-ellipsis></td> - <td class="mediumTd" id="aicZoneName"><custom-ellipsis [id]="data.aicZoneName" [value]="data.aicZoneName"></custom-ellipsis></td> - <td class="mediumTd" id="project"><custom-ellipsis [id]="data.project" [value]="data.project"></custom-ellipsis></td> - <td class="mediumTd" id="owningEntityName"><custom-ellipsis [id]="data.owningEntityName" [value]="data.owningEntityName"></custom-ellipsis></td> - <td class="smallTd" id="pause"><custom-ellipsis [id]="data.pause" [value]="data.pause"></custom-ellipsis></td> - <td class="mediumTd" id="created"><custom-ellipsis [id]="data.created" [value]="data.created | date:'MMM. dd, yyyy HH:mm'"></custom-ellipsis></td> - <td class="last" id="jobStatus" [ngClass]="data.jobStatus"> - <custom-popover [value]="data.serviceStatus.tooltip" [popoverType]="data?.serviceStatus?.color" style="float: left;"> - <svg-icon - id="jobStatusIcon-{{i}}" - (click)="auditInfo(data)" - [mode]="data.serviceStatus.color" - [size]="'large'" - [name]="data.serviceStatus.iconClassName"> - </svg-icon> + <tr *ngFor="let data of serviceInfoData | searchFilter: filterText ; trackBy: trackByFn; let i = index" [ngClass]="{'odd' : data.serviceIndex%2 == 1}" [id]="data.jobId"> + <td class="smallTd" id="userId"><custom-ellipsis [id]="data.userId" [value]="data.userId"></custom-ellipsis></td> + <td class="smallTd" id="action"><custom-ellipsis [id]="data.action" [value]="data.action | capitalizeAndFormat"></custom-ellipsis></td> + <td class="normal" id="serviceModelName"><custom-ellipsis [id]="data.serviceModelName" [value]="data.serviceModelName"></custom-ellipsis></td> + <td class="normal" id="serviceInstanceName"><custom-ellipsis [id]="data.serviceInstanceName" [value]="data.serviceInstanceName"></custom-ellipsis></td> + <td class="smallTd" id="serviceModelVersion"><custom-ellipsis [id]="data.serviceModelVersion" [value]="data.serviceModelVersion"></custom-ellipsis></td> + <td class="normal" id="subscriberName"><custom-ellipsis [id]="data.subscriberName" [value]="data.subscriberName"></custom-ellipsis></td> + <td class="mediumTd" id="serviceType"><custom-ellipsis [id]="data.serviceType" [value]="data.serviceType"></custom-ellipsis></td> + <td class="normal" id="regionId"><custom-ellipsis [id]="data.regionId" [value]="data.regionId"></custom-ellipsis></td> + <td class="mediumTd" id="tenantName"><custom-ellipsis [id]="data.tenantName" [value]="data.tenantName"></custom-ellipsis></td> + <td class="mediumTd" id="aicZoneName"><custom-ellipsis [id]="data.aicZoneName" [value]="data.aicZoneName"></custom-ellipsis></td> + <td class="mediumTd" id="project"><custom-ellipsis [id]="data.project" [value]="data.project"></custom-ellipsis></td> + <td class="mediumTd" id="owningEntityName"><custom-ellipsis [id]="data.owningEntityName" [value]="data.owningEntityName"></custom-ellipsis></td> + <td class="smallTd" id="pause"><custom-ellipsis [id]="data.pause" [value]="data.pause"></custom-ellipsis></td> + <td class="mediumTd" id="created"><custom-ellipsis [id]="data.created" [value]="data.created | date:'MMM. dd, yyyy HH:mm'"></custom-ellipsis></td> + <td class="last" id="jobStatus" [ngClass]="data.jobStatus"> + <custom-popover [value]="data.serviceStatus.tooltip" [popoverType]="data?.serviceStatus?.color" style="float: left;"> + <svg-icon + id="jobStatusIcon-{{i}}" + (click)="auditInfo(data)" + [mode]="data.serviceStatus.color" + [size]="'large'" + [name]="data.serviceStatus.iconClassName"> + </svg-icon> - </custom-popover> - <div class="menu-div" (click)="onContextMenu($event, data)"> - <span class="icon-menu"></span> - <context-menu> - <ng-template *ngFor="let action of contextMenuActions" contextMenuItem let-item - [visible]="action.visible" - [enabled]="action.enabled" - (execute)="action.click($event.item)"> - <div [attr.data-tests-id]="action.dataTestId" - [tooltip]="action?.tooltip" - [tooltipDisabled]="!action.tooltip"> + </custom-popover> + <div class="menu-div" (click)="onContextMenu($event, data)"> + <span class="icon-menu"></span> + <context-menu> + <ng-template *ngFor="let action of contextMenuActions" contextMenuItem let-item + [visible]="action.visible" + [enabled]="action.enabled" + (execute)="action.click($event.item)"> + <div [attr.data-tests-id]="action.dataTestId" + [tooltip]="action?.tooltip" + [tooltipDisabled]="!action.tooltip"> <span class="context-menu-icon"> <i class="fa {{action.className}}" aria-hidden="true"></i> </span> - {{action.name}} - </div> - </ng-template> - </context-menu> - </div> - </td> + {{action.name}} + </div> + </ng-template> + </context-menu> + </div> + </td> </tr> </tbody> </table> 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<T> { @@ -36,10 +39,21 @@ class MockAppStore<T> { } } +class ActivatedRouteMock<T>{ + queryParams() { + return {} + }; + + snapshot = { + queryParams : {} + } +} + describe('Instantiation Status Component', () => { let component: InstantiationStatusComponent; let fixture: ComponentFixture<InstantiationStatusComponent>; -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<AppState>) { 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<T> { "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<T> { "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<T> { "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 ] |