free text filter in instantiationStatus Page

Issue-ID: VID-724
Change-Id: I5f363ecc66ff1f1fef9c9d75a12a9c43403aa905
Signed-off-by: Eylon Malin <eylon.malin@intl.att.com>

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);
+  }
 }