diff options
Diffstat (limited to 'vid-webpack-master/src/app/instantiationStatus')
4 files changed, 89 insertions, 47 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); + } } |