Add column sorting on ANR page

Issue-ID: RICPLT-1344
Signed-off-by: Jun (Nicolas) Hu <jh245g@att.com>
Change-Id: I33ecdb823367d66b9e648464733ba60794bab2c2

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index c50e4cc..71b23a6 100644 (file)
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -24,7 +24,7 @@ Version 1.0.4, 30 May 2019
 --------------------------
 * Add ANR xApp neighbor cell relation table
 * Drop the pendulum xApp control screen
-* Add column sorting on xApp catalog and xApp control 
+* Add column sorting on xApp catalog, xApp control, ANR 
 * Add disconnect-all button to RAN connection screen
 
 Version 1.0.3, 28 May 2019

diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
index a245b2d..49182f2 100644 (file)
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.html
@@ -39,35 +39,35 @@
     <mat-spinner></mat-spinner>
   </div>
 
-  <table mat-table class="ncr-table mat-elevation-z8" [dataSource]="dataSource">
+  <table mat-table class="ncr-table mat-elevation-z8" [dataSource]="dataSource" matSort>
 
     <ng-container matColumnDef="cellIdentifierNrcgi">
-        <mat-header-cell *matHeaderCellDef>Serving Cell NRCGI</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Serving Cell NRCGI</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.servingCellNrcgi}}</mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="neighborCellNrpci">
-        <mat-header-cell *matHeaderCellDef>Neighbor Cell NRPCI</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Neighbor Cell NRPCI</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.neighborCellNrpci}}</mat-cell>
     </ng-container>
  
     <ng-container matColumnDef="neighborCellNrcgi">
-        <mat-header-cell *matHeaderCellDef>Neighbor Cell NRCGI</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Neighbor Cell NRCGI</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.neighborCellNrcgi}}</mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="flagNoHo">
-        <mat-header-cell *matHeaderCellDef>Flag No Handover</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Flag No Handover</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.flagNoHo}}</mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="flagNoXn">
-        <mat-header-cell *matHeaderCellDef>Flag No Xn</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Flag No Xn</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.flagNoXn}}</mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="flagNoRemove">
-        <mat-header-cell *matHeaderCellDef>Flag No Remove</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Flag No Remove</mat-header-cell>
         <mat-cell *matCellDef="let ncr">{{ncr.flagNoRemove}}</mat-cell>
     </ng-container>
 

diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts
index d173505..c3f3cb8 100644 (file)
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.component.ts
@@ -19,16 +19,17 @@
  */
 
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material';
 import { MatDialog } from '@angular/material/dialog';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { ANRNeighborCellRelation } from '../interfaces/anr-xapp.types';
-import { ANRXappDataSource } from './anr-xapp.datasource';
 import { ANRXappService } from '../services/anr-xapp/anr-xapp.service';
-import { ANREditNCRDialogComponent } from './anr-edit-ncr-dialog.component';
-import { ConfirmDialogService } from './../services/ui/confirm-dialog.service';
 import { ErrorDialogService } from '../services/ui/error-dialog.service';
+import { ConfirmDialogService } from './../services/ui/confirm-dialog.service';
 import { NotificationService } from './../services/ui/notification.service';
+import { ANREditNCRDialogComponent } from './anr-edit-ncr-dialog.component';
+import { ANRXappDataSource } from './anr-xapp.datasource';
 
 @Component({
   selector: 'app-anr',
@@ -43,6 +44,7 @@ export class AnrXappComponent implements AfterViewInit, OnInit {
   @ViewChild('ggNodeB') ggNodeB: ElementRef;
   @ViewChild('servingCellNrcgi') servingCellNrcgi: ElementRef;
   @ViewChild('neighborCellNrpci') neighborCellNrpci: ElementRef;
+  @ViewChild(MatSort) sort: MatSort;
 
   displayedColumns = ['cellIdentifierNrcgi', 'neighborCellNrpci', 'neighborCellNrcgi',
     'flagNoHo', 'flagNoXn', 'flagNoRemove', 'action'];
@@ -55,7 +57,7 @@ export class AnrXappComponent implements AfterViewInit, OnInit {
     private notificationService: NotificationService) { }
 
   ngOnInit() {
-    this.dataSource = new ANRXappDataSource(this.anrXappService);
+    this.dataSource = new ANRXappDataSource(this.anrXappService, this.sort);
     this.dataSource.loadTable();
     // Empty string occurs first in the array of gNodeBIds
     this.anrXappService.getgNodeBs().subscribe((res: string[]) => this.gNodeBIds = res);

diff --git a/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts b/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts
index bca766c..bc04b6b 100644 (file)
--- a/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts
+++ b/webapp-frontend/src/app/anr-xapp/anr-xapp.datasource.ts
@@ -18,11 +18,13 @@
  * ========================LICENSE_END===================================
  */
 
-import { CollectionViewer, DataSource} from '@angular/cdk/collections';
+import { CollectionViewer, DataSource } from '@angular/cdk/collections';
+import { MatSort } from '@angular/material';
+import { merge } from 'rxjs';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { Observable } from 'rxjs/Observable';
-import { catchError, finalize } from 'rxjs/operators';
 import { of } from 'rxjs/observable/of';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { catchError, finalize, map } from 'rxjs/operators';
 import { ANRNeighborCellRelation } from '../interfaces/anr-xapp.types';
 import { ANRXappService } from '../services/anr-xapp/anr-xapp.service';
 
@@ -35,7 +37,7 @@ export class ANRXappDataSource extends DataSource<ANRNeighborCellRelation> {
 
     public loading$ = this.loadingSubject.asObservable();
 
-    constructor(private anrXappService: ANRXappService) {
+  constructor(private anrXappService: ANRXappService, private sort: MatSort) {
         super();
     }
 
@@ -50,7 +52,13 @@ export class ANRXappDataSource extends DataSource<ANRNeighborCellRelation> {
     }
 
     connect(collectionViewer: CollectionViewer): Observable<ANRNeighborCellRelation[]> {
-        return this.relationsSubject.asObservable();
+      const dataMutations = [
+        this.relationsSubject.asObservable(),
+        this.sort.sortChange
+      ];
+      return merge(...dataMutations).pipe(map(() => {
+        return this.getSortedData([...this.relationsSubject.getValue()]);
+      }));
     }
 
     disconnect(collectionViewer: CollectionViewer): void {
@@ -58,4 +66,27 @@ export class ANRXappDataSource extends DataSource<ANRNeighborCellRelation> {
         this.loadingSubject.complete();
     }
 
+  private getSortedData(data: ANRNeighborCellRelation[]) {
+    if (!this.sort.active || this.sort.direction === '') {
+      return data;
+    }
+
+    return data.sort((a, b) => {
+      const isAsc = this.sort.direction === 'asc';
+      switch (this.sort.active) {
+        case 'cellIdentifierNrcgi': return compare(a.servingCellNrcgi, b.servingCellNrcgi, isAsc);
+        case 'neighborCellNrpci': return compare(a.neighborCellNrpci, b.neighborCellNrpci, isAsc);
+        case 'neighborCellNrcgi': return compare(a.neighborCellNrcgi, b.neighborCellNrcgi, isAsc);
+        case 'flagNoHo': return compare(a.flagNoHo, b.flagNoHo, isAsc);
+        case 'flagNoXn': return compare(a.flagNoXn, b.flagNoXn, isAsc);
+        case 'flagNoRemove': return compare(a.flagNoRemove, b.flagNoRemove, isAsc);
+        default: return 0;
+      }
+    });
+  }
+
+}
+
+function compare(a, b, isAsc) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
 }