RAN Connectionscreen upgrade to mat-table 96/196/6
authorSarkar, Anand (as0481) <as0481@att.com>
Fri, 24 May 2019 18:31:19 +0000 (14:31 -0400)
committerChris Lott <cl778h@att.com>
Tue, 28 May 2019 18:21:45 +0000 (18:21 +0000)
Issue-Id: RICPLT-1343
Signed-off-by: Sarkar, Anand (as0481) <as0481@att.com>
Change-Id: Id0e58a6245e4f99b8dbd534db1993a56072b17c6

14 files changed:
docs/release-notes.rst
webapp-frontend/src/app/app-routing.module.ts
webapp-frontend/src/app/app.module.ts
webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html
webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.css [new file with mode: 0644]
webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.html [moved from webapp-frontend/src/app/signal/signal.component.ranconnect-dialog.html with 100% similarity]
webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.ts [moved from webapp-frontend/src/app/signal/signal.component.ranconnect-dialog.ts with 94% similarity]
webapp-frontend/src/app/ran-connection/ran-connection.component.html [new file with mode: 0644]
webapp-frontend/src/app/ran-connection/ran-connection.component.scss [moved from webapp-frontend/src/app/signal/signal.component.css with 78% similarity]
webapp-frontend/src/app/ran-connection/ran-connection.component.spec.ts [moved from webapp-frontend/src/app/signal/signal.component.spec.ts with 77% similarity]
webapp-frontend/src/app/ran-connection/ran-connection.component.ts [new file with mode: 0644]
webapp-frontend/src/app/ran-connection/ran-connection.datasource.ts [new file with mode: 0644]
webapp-frontend/src/app/signal/signal.component.html [deleted file]
webapp-frontend/src/app/signal/signal.component.ts [deleted file]

index e83e755..915df84 100644 (file)
@@ -34,6 +34,7 @@ Version 1.0.3, 28 May 2019
 * Rename signal service to E2 Manager service
 * Use XappMgrService to replace ControlService and CatalogService
 * Apply mat-table to control and catalog
+* RAN Connection screen upgrade to mat-table
 
 Version 1.0.2, 13 May 2019
 --------------------------
index edfe38f..3fa11e6 100644 (file)
@@ -23,7 +23,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { CatalogComponent } from './catalog/catalog.component';
 import { ControlComponent } from './control/control.component';
-import { SignalComponent } from './signal/signal.component';
+import { RANConnectionComponent } from './ran-connection/ran-connection.component';
 import { StatsComponent } from './stats/stats.component';
 import { AdminComponent } from './admin/admin.component';
 import { XappComponent } from './xapp/xapp.component';
@@ -33,7 +33,7 @@ const routes: Routes = [
     {path: 'login', component: LoginComponent},
     {path: 'catalog', component: CatalogComponent},
     {path: 'control', component: ControlComponent},
-    {path: 'signal', component: SignalComponent},
+    {path: 'ran-connection', component: RANConnectionComponent},
     {path: 'stats', component: StatsComponent},
     {path: 'admin', component: AdminComponent},
     {path: 'xapp', component: XappComponent},
index 6255d2a..8bd8b4a 100644 (file)
@@ -43,8 +43,8 @@ import { DashboardService } from './services/dashboard/dashboard.service';
 import { E2ManagerService } from './services/e2-mgr/e2-mgr.service';
 import { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.component';
 import { ControlComponent } from './control/control.component';
-import { SignalComponent } from './signal/signal.component';
-import { AppRANConnectDialogComponent } from './signal/signal.component.ranconnect-dialog';
+import { RANConnectionDialogComponent } from './ran-connection/ran-connection-dialog.component';
+import { RANConnectionComponent } from './ran-connection/ran-connection.component';
 import { StatsComponent } from './stats/stats.component';
 import { AdminComponent } from './admin/admin.component';
 import { CatalogCardComponent } from './ui/catalog-card/catalog-card.component';
@@ -69,14 +69,14 @@ import { ErrorDialogService } from './services/ui/error-dialog.service';
     ControlCardComponent,
     StatCardComponent,
     ControlComponent,
-    SignalComponent,
+    RANConnectionComponent,
     StatsComponent,
     AdminComponent,
     ModalEventComponent,
     XappComponent,
     ConfigEventComponent,
     AnrXappComponent,
-    AppRANConnectDialogComponent,
+    RANConnectionDialogComponent,
     ConfirmDialogComponent,
     FooterComponent,
     ErrorDialogComponent
@@ -99,9 +99,9 @@ import { ErrorDialogService } from './services/ui/error-dialog.service';
     MatListModule,
     MatSidenavModule,
     MatSlideToggleModule,
+    MatTableModule,
     MatTabsModule,
     MatSortModule,
-    MatTableModule,
     MatFormFieldModule,
     MatButtonModule,
     MatInputModule,
@@ -126,11 +126,11 @@ import { ErrorDialogService } from './services/ui/error-dialog.service';
     MatFormFieldModule,
     MatButtonModule,
     MatInputModule,
-    AppRANConnectDialogComponent,
+    RANConnectionDialogComponent,
     ErrorDialogComponent
     ],
     entryComponents: [
-    AppRANConnectDialogComponent,
+    RANConnectionDialogComponent,
     ConfirmDialogComponent,
     ErrorDialogComponent
     ],
index c6a8c6c..7df8c47 100644 (file)
@@ -30,7 +30,7 @@
   <a mat-list-item routerLink="/stats" (click)="onSidenavClose()">
       <mat-icon>assessment</mat-icon> <span class="nav-caption">Stats</span>
   </a>
-  <a mat-list-item routerLink="/signal" (click)="onSidenavClose()">
+  <a mat-list-item routerLink="/ran-connection" (click)="onSidenavClose()">
       <mat-icon>cast_connected</mat-icon> <span class="nav-caption">RAN Connection</span>
   </a> 
   <a mat-list-item routerLink="/admin" (click)="onSidenavClose()">
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.css b/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.css
new file mode 100644 (file)
index 0000000..2d84664
--- /dev/null
@@ -0,0 +1,25 @@
+/*-
+ * ========================LICENSE_START=================================
+ * O-RAN-SC
+ * %%
+ * Copyright (C) 2019 AT&T Intellectual Property and Nokia
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================LICENSE_END===================================
+ */
+
+ /* used to place form fields on separate lines/rows in dialog */
+.input-display-block {
+  display: block;
+}
+
@@ -27,16 +27,16 @@ import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
     selector: 'app-signal-ranconnect-dialog',
-    templateUrl: './signal.component.ranconnect-dialog.html',
-    styleUrls: ['./signal.component.css']
+    templateUrl: './ran-connection-dialog.component.html',
+    styleUrls: ['./ran-connection-dialog.component.css']
 })
 
-export class AppRANConnectDialogComponent implements OnInit {
+export class RANConnectionDialogComponent implements OnInit {
 
-    private ranDialogForm: FormGroup;
+    public ranDialogForm: FormGroup;
 
     constructor(
-        public dialogRef: MatDialogRef<AppRANConnectDialogComponent>,
+        private dialogRef: MatDialogRef<RANConnectionDialogComponent>,
         private service: E2ManagerService, private errorService: ErrorDialogService,
         @Inject(MAT_DIALOG_DATA) public data: E2SetupRequest) {
     }
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.html b/webapp-frontend/src/app/ran-connection/ran-connection.component.html
new file mode 100644 (file)
index 0000000..2180ae5
--- /dev/null
@@ -0,0 +1,61 @@
+<!--
+  ========================LICENSE_START=================================
+  O-RAN-SC
+  %%
+  Copyright (C) 2019 AT&T Intellectual Property and Nokia
+  %%
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ========================LICENSE_END===================================
+-->
+<div class="ranconnect__section">
+  <h3 class="ranconnect__header">RAN Connection</h3>
+  <button mat-raised-button (click)="openRanConnectDialog()">Connect</button>
+  <table mat-table [dataSource]="dataSource" class="ranconnect-table mat-elevation-z8">
+    
+    <ng-container matColumnDef="requestType">
+        <mat-header-cell *matHeaderCellDef>RAN Type</mat-header-cell>
+        <mat-cell *matCellDef="let rconnect">{{rconnect.requestType}}</mat-cell>
+    </ng-container>
+    
+    <ng-container matColumnDef="ranName">
+        <mat-header-cell *matHeaderCellDef>eNodeB/gNodeB Name</mat-header-cell>
+        <mat-cell *matCellDef="let rconnect">{{rconnect.ranName}}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="ranIp">
+        <mat-header-cell *matHeaderCellDef>IP</mat-header-cell>
+        <mat-cell *matCellDef="let rconnect">{{rconnect.ranIp}}</mat-cell>
+    </ng-container>
+    
+    <ng-container matColumnDef="ranPort">
+        <mat-header-cell *matHeaderCellDef>Port</mat-header-cell>
+        <mat-cell *matCellDef="let rconnect">{{rconnect.ranPort}}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="responseCode">
+        <mat-header-cell *matHeaderCellDef>Response</mat-header-cell>
+        <mat-cell *matCellDef="let rconnect">{{rconnect.responseCode}}</mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="timeStamp">
+        <mat-header-cell *matHeaderCellDef>Time Stamp</mat-header-cell>
+        <mat-cell *matCellDef="let rconnect">{{rconnect.timeStamp}}</mat-cell>
+    </ng-container>
+    
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns">
+    </mat-row>
+  </table>
+  <app-modal-event hidden></app-modal-event>
+</div>
+
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-.control__section {
+.ranconnect__section {
     position: relative;
     top: -50px;
 }
 
-.control__header {
+.ranconnect__header {
     text-align: center;
     color: #432c85;
     font-size: 50px;
     transform: translate(149 56);
 }
 
-:host /deep/ ng2-smart-table tbody > tr > td{
-  text-align: left;
+.ranconnect-table {
+    width: 99%; /* 100 looks wrong */
+    min-height: 150px;
+    margin-top: 10px;
+    background-color:transparent;
 }
 
-:host /deep/ ng2-smart-table thead th{
-  text-align: left;
-}
 
-/* used to place form fields on separate lines/rows in dialog */
-.input-display-block {
-  display: block;
-}
@@ -7,9 +7,9 @@
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- *
+ * 
  *      http://www.apache.org/licenses/LICENSE-2.0
- *
+ * 
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SignalComponent } from './signal.component';
+import { RanConnectionComponent } from './ran-connection.component';
 
-describe('SignalComponent', () => {
-  let component: SignalComponent;
-  let fixture: ComponentFixture<SignalComponent>;
+describe('RanConnectionComponent', () => {
+  let component: RanConnectionComponent;
+  let fixture: ComponentFixture<RanConnectionComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SignalComponent ]
+      declarations: [ RanConnectionComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SignalComponent);
+    fixture = TestBed.createComponent(RanConnectionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.ts b/webapp-frontend/src/app/ran-connection/ran-connection.component.ts
new file mode 100644 (file)
index 0000000..87a2f16
--- /dev/null
@@ -0,0 +1,55 @@
+/*-
+ * ========================LICENSE_START=================================
+ * O-RAN-SC
+ * %%
+ * Copyright (C) 2019 AT&T Intellectual Property and Nokia
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================LICENSE_END===================================
+ */
+import { Component, OnInit } from '@angular/core';
+import { MatDialog} from '@angular/material/dialog';
+import { RANConnectionDialogComponent } from './ran-connection-dialog.component';
+import { E2ManagerService } from '../services/e2-mgr/e2-mgr.service';
+import { E2SetupRequest } from '../interfaces/e2-mgr.types';
+import { RANConnectionDataSource } from './ran-connection.datasource';
+
+
+@Component({
+  selector: 'app-ran-connection',
+  templateUrl: './ran-connection.component.html',
+  styleUrls: ['./ran-connection.component.scss']
+})
+export class RANConnectionComponent implements OnInit {
+  displayedColumns: string[] = [ 'requestType', 'ranName', 'ranIp', 'ranPort', 'responseCode', 'timeStamp' ];
+  dataSource: RANConnectionDataSource;
+
+  constructor(private e2MgrSvc: E2ManagerService, public dialog: MatDialog) { }
+
+  ngOnInit() {
+    this.dataSource = new RANConnectionDataSource(this.e2MgrSvc);
+    this.dataSource.loadTable();
+  }
+
+  openRanConnectDialog() {
+    const dialogRef = this.dialog.open(RANConnectionDialogComponent, {
+      width: '450px',
+      data: {}
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      this.dataSource = new RANConnectionDataSource(this.e2MgrSvc);
+      this.dataSource.loadTable();
+    });
+  }
+
+}
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.datasource.ts b/webapp-frontend/src/app/ran-connection/ran-connection.datasource.ts
new file mode 100644 (file)
index 0000000..613c5e4
--- /dev/null
@@ -0,0 +1,61 @@
+/*-
+ * ========================LICENSE_START=================================
+ * O-RAN-SC
+ * %%
+ * Copyright (C) 2019 AT&T Intellectual Property and Nokia
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================LICENSE_END===================================
+ */
+
+import { CollectionViewer, DataSource } from '@angular/cdk/collections';
+import { Observable } from 'rxjs/Observable';
+import { catchError, finalize } from 'rxjs/operators';
+import { of } from 'rxjs/observable/of';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { E2SetupRequest } from '../interfaces/e2-mgr.types';
+import { E2ManagerService } from '../services/e2-mgr/e2-mgr.service';
+
+
+export class RANConnectionDataSource extends DataSource<E2SetupRequest> {
+
+  private ranConnectSubject = new BehaviorSubject<E2SetupRequest[]>([]);
+
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+
+  public loading$ = this.loadingSubject.asObservable();
+
+  constructor(private e2MgrSvcservice: E2ManagerService) {
+    super();
+  }
+
+  loadTable() {
+    this.loadingSubject.next(true);
+    this.e2MgrSvcservice.getAll()
+      .pipe(
+        catchError(() => of([])),
+        finalize(() => this.loadingSubject.next(false))
+      )
+      .subscribe((ranConnect: E2SetupRequest[]) => this.ranConnectSubject.next(ranConnect) )
+  }
+
+  connect(collectionViewer: CollectionViewer): Observable<E2SetupRequest[]> {
+    return this.ranConnectSubject.asObservable();
+  }
+
+  disconnect(collectionViewer: CollectionViewer): void {
+    this.ranConnectSubject.complete();
+    this.loadingSubject.complete();
+  }
+
+}
\ No newline at end of file
diff --git a/webapp-frontend/src/app/signal/signal.component.html b/webapp-frontend/src/app/signal/signal.component.html
deleted file mode 100644 (file)
index 9b9fa16..0000000
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
-  ========================LICENSE_START=================================
-  O-RAN-SC
-  %%
-  Copyright (C) 2019 AT&T Intellectual Property and Nokia
-  %%
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-  
-       http://www.apache.org/licenses/LICENSE-2.0
-  
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
-  ========================LICENSE_END===================================
-  -->
-<div class="control__section">
-    <h3 class="control__header">RAN Connection</h3>
-    <button mat-raised-button (click)="openRanConnectDialog()">Connect</button>  
-    <ng2-smart-table [settings]="settings" [source]="source">
-    </ng2-smart-table>
-    <app-modal-event hidden></app-modal-event>
-</div>
diff --git a/webapp-frontend/src/app/signal/signal.component.ts b/webapp-frontend/src/app/signal/signal.component.ts
deleted file mode 100644 (file)
index 9e08f6f..0000000
+++ /dev/null
@@ -1,89 +0,0 @@
-/*-
- * ========================LICENSE_START=================================
- * O-RAN-SC
- * %%
- * Copyright (C) 2019 AT&T Intellectual Property and Nokia
- * %%
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================LICENSE_END===================================
- */
-import { Component, OnInit } from '@angular/core';
-import { LocalDataSource } from 'ng2-smart-table';
-import { MatDialog} from '@angular/material/dialog';
-import { AppRANConnectDialogComponent } from './signal.component.ranconnect-dialog';
-import { E2ManagerService } from '../services/e2-mgr/e2-mgr.service';
-import { E2SetupRequest } from '../interfaces/e2-mgr.types';
-
-@Component({
-  selector: 'app-signal',
-  templateUrl: 'signal.component.html',
-  styleUrls: ['signal.component.css']
-})
-
-export class SignalComponent implements OnInit {
-  settings = {
-    hideSubHeader: true,
-    actions: {
-      columnTitle: 'Actions',
-      add: false,
-      edit: false,
-      delete: false,
-      position: 'right'
-    },
-    columns: {
-      requestType: {
-        title: 'RAN Type',
-        type: 'string',
-      },
-      ranName: {
-        title: 'eNodeB/gNodeB Name',
-        type: 'string',
-      },
-      ranIp: {
-        title: 'IP',
-        type: 'number',
-      },
-      ranPort: {
-        title: 'Port',
-        type: 'number',
-      },
-      responseCode: {
-        title: 'Response',
-        type: 'number',
-      },
-      timeStamp: {
-        title: 'Time Stamp',
-        type: 'string',
-      }
-    }
-  };
-
-  source: LocalDataSource = new LocalDataSource();
-
-  constructor(private service: E2ManagerService, public dialog: MatDialog) { }
-
-  ngOnInit() {
-    this.service.getAll().subscribe((val: E2SetupRequest[]) => this.source.load(val));
-  }
-
-  openRanConnectDialog() {
-    const dialogRef = this.dialog.open(AppRANConnectDialogComponent, {
-      width: '450px',
-      data: {}
-    });
-    dialogRef.afterClosed().subscribe(result => {
-      this.service.getAll().subscribe((val: any[]) => this.source.load(val));
-    });
-  }
-
-} // class SignalComponent