aboutsummaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/instantiationStatus
diff options
context:
space:
mode:
authorEylon Malin <eylon.malin@intl.att.com>2019-12-03 12:12:38 +0200
committerEylon Malin <eylon.malin@intl.att.com>2019-12-03 14:38:23 +0200
commitd00cf8079f6ec7d791aa92d9991d95ea0bb4a0e6 (patch)
treea4e3aa972af54847a396e23881c70718f5e4c0d3 /vid-webpack-master/src/app/instantiationStatus
parent3250d40c952004bb08a1f54dcc7f816a9de09e1f (diff)
free text filter in instantiationStatus Page
Issue-ID: VID-724 Change-Id: I5f363ecc66ff1f1fef9c9d75a12a9c43403aa905 Signed-off-by: Eylon Malin <eylon.malin@intl.att.com>
Diffstat (limited to 'vid-webpack-master/src/app/instantiationStatus')
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.html89
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.scss6
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.spec.ts24
-rw-r--r--vid-webpack-master/src/app/instantiationStatus/instantiationStatus.component.ts17
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);
+ }
}