* 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
--------------------------
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';
{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},
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';
ControlCardComponent,
StatCardComponent,
ControlComponent,
- SignalComponent,
+ RANConnectionComponent,
StatsComponent,
AdminComponent,
ModalEventComponent,
XappComponent,
ConfigEventComponent,
AnrXappComponent,
- AppRANConnectDialogComponent,
+ RANConnectionDialogComponent,
ConfirmDialogComponent,
FooterComponent,
ErrorDialogComponent
MatListModule,
MatSidenavModule,
MatSlideToggleModule,
+ MatTableModule,
MatTabsModule,
MatSortModule,
- MatTableModule,
MatFormFieldModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule,
MatInputModule,
- AppRANConnectDialogComponent,
+ RANConnectionDialogComponent,
ErrorDialogComponent
],
entryComponents: [
- AppRANConnectDialogComponent,
+ RANConnectionDialogComponent,
ConfirmDialogComponent,
ErrorDialogComponent
],
<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()">
--- /dev/null
+/*-
+ * ========================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;
+}
+
@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) {
}
--- /dev/null
+<!--
+ ========================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;
-}
* 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();
});
--- /dev/null
+/*-
+ * ========================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();
+ });
+ }
+
+}
--- /dev/null
+/*-
+ * ========================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
+++ /dev/null
-<!--
- ========================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>
+++ /dev/null
-/*-
- * ========================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