From: Sarkar, Anand (as0481) Date: Fri, 24 May 2019 18:31:19 +0000 (-0400) Subject: RAN Connectionscreen upgrade to mat-table X-Git-Tag: R2~92 X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;ds=sidebyside;h=refs%2Fchanges%2F96%2F196%2F6;p=portal%2Fric-dashboard.git RAN Connectionscreen upgrade to mat-table Issue-Id: RICPLT-1343 Signed-off-by: Sarkar, Anand (as0481) Change-Id: Id0e58a6245e4f99b8dbd534db1993a56072b17c6 --- diff --git a/docs/release-notes.rst b/docs/release-notes.rst index e83e7556..915df844 100644 --- a/docs/release-notes.rst +++ b/docs/release-notes.rst @@ -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 -------------------------- diff --git a/webapp-frontend/src/app/app-routing.module.ts b/webapp-frontend/src/app/app-routing.module.ts index edfe38f3..3fa11e6a 100644 --- a/webapp-frontend/src/app/app-routing.module.ts +++ b/webapp-frontend/src/app/app-routing.module.ts @@ -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}, diff --git a/webapp-frontend/src/app/app.module.ts b/webapp-frontend/src/app/app.module.ts index 6255d2ac..8bd8b4a9 100644 --- a/webapp-frontend/src/app/app.module.ts +++ b/webapp-frontend/src/app/app.module.ts @@ -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 ], diff --git a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html index c6a8c6c0..7df8c478 100644 --- a/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html +++ b/webapp-frontend/src/app/navigation/sidenav-list/sidenav-list.component.html @@ -30,7 +30,7 @@ assessment Stats - + cast_connected RAN Connection 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 index 00000000..2d846648 --- /dev/null +++ b/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.css @@ -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; +} + diff --git a/webapp-frontend/src/app/signal/signal.component.ranconnect-dialog.html b/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.html similarity index 100% rename from webapp-frontend/src/app/signal/signal.component.ranconnect-dialog.html rename to webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.html diff --git a/webapp-frontend/src/app/signal/signal.component.ranconnect-dialog.ts b/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.ts similarity index 94% rename from webapp-frontend/src/app/signal/signal.component.ranconnect-dialog.ts rename to webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.ts index b927f4d6..52db4ba2 100644 --- a/webapp-frontend/src/app/signal/signal.component.ranconnect-dialog.ts +++ b/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.ts @@ -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, + private dialogRef: MatDialogRef, 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 index 00000000..2180ae52 --- /dev/null +++ b/webapp-frontend/src/app/ran-connection/ran-connection.component.html @@ -0,0 +1,61 @@ + +
+

RAN Connection

+ + + + + RAN Type + {{rconnect.requestType}} + + + + eNodeB/gNodeB Name + {{rconnect.ranName}} + + + + IP + {{rconnect.ranIp}} + + + + Port + {{rconnect.ranPort}} + + + + Response + {{rconnect.responseCode}} + + + + Time Stamp + {{rconnect.timeStamp}} + + + + + +
+ +
+ diff --git a/webapp-frontend/src/app/signal/signal.component.css b/webapp-frontend/src/app/ran-connection/ran-connection.component.scss similarity index 78% rename from webapp-frontend/src/app/signal/signal.component.css rename to webapp-frontend/src/app/ran-connection/ran-connection.component.scss index c30bb3ca..79aca124 100644 --- a/webapp-frontend/src/app/signal/signal.component.css +++ b/webapp-frontend/src/app/ran-connection/ran-connection.component.scss @@ -17,12 +17,12 @@ * 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; @@ -31,15 +31,11 @@ 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; -} diff --git a/webapp-frontend/src/app/signal/signal.component.spec.ts b/webapp-frontend/src/app/ran-connection/ran-connection.component.spec.ts similarity index 77% rename from webapp-frontend/src/app/signal/signal.component.spec.ts rename to webapp-frontend/src/app/ran-connection/ran-connection.component.spec.ts index 7f11ce51..3465e84a 100644 --- a/webapp-frontend/src/app/signal/signal.component.spec.ts +++ b/webapp-frontend/src/app/ran-connection/ran-connection.component.spec.ts @@ -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. @@ -19,21 +19,21 @@ */ 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; +describe('RanConnectionComponent', () => { + let component: RanConnectionComponent; + let fixture: ComponentFixture; 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 index 00000000..87a2f167 --- /dev/null +++ b/webapp-frontend/src/app/ran-connection/ran-connection.component.ts @@ -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 index 00000000..613c5e4b --- /dev/null +++ b/webapp-frontend/src/app/ran-connection/ran-connection.datasource.ts @@ -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 { + + private ranConnectSubject = new BehaviorSubject([]); + + private loadingSubject = new BehaviorSubject(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 { + 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 index 9b9fa167..00000000 --- a/webapp-frontend/src/app/signal/signal.component.html +++ /dev/null @@ -1,26 +0,0 @@ - -
-

RAN Connection

- - - - -
diff --git a/webapp-frontend/src/app/signal/signal.component.ts b/webapp-frontend/src/app/signal/signal.component.ts deleted file mode 100644 index 9e08f6f0..00000000 --- a/webapp-frontend/src/app/signal/signal.component.ts +++ /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