From: Sarkar, Anand (as0481) <as0481@att.com>
Date: Mon, 24 Jun 2019 16:33:42 +0000 (-0400)
Subject: Create overall control with AppControl,RANControl
X-Git-Tag: R2~73
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=refs%2Fchanges%2F10%2F410%2F4;p=portal%2Fric-dashboard.git

Create overall control with AppControl,RANControl

Remove RAN Connection navigation from left menu
Add navigation to overall control page from home page

Signed-off-by: Sarkar, Anand (as0481) <as0481@att.com>
Issue-Id: RICPLT-1525
Change-Id: Ic59298e1b8a1d40f86c42df43bc6afd81fc17e27
---

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index 91a71d05..c87ecab4 100644
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -40,6 +40,7 @@ Version 1.0.4, 21 June 2019
 * Move mock admin screen user data to backend
 * Update App manager client to spec version 0.1.5
 * Rework admin table
+* Remove the RAN connection invocation link from left menu and move it to control screen
 
 Version 1.0.3, 28 May 2019
 --------------------------
diff --git a/webapp-frontend/src/app/control/control.animations.ts b/webapp-frontend/src/app/app-control/app-control.animations.ts
similarity index 96%
rename from webapp-frontend/src/app/control/control.animations.ts
rename to webapp-frontend/src/app/app-control/app-control.animations.ts
index aa92a57c..b3f3cd3b 100644
--- a/webapp-frontend/src/app/control/control.animations.ts
+++ b/webapp-frontend/src/app/app-control/app-control.animations.ts
@@ -20,7 +20,7 @@
 
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
-export const ControlAnimations = {
+export const AppControlAnimations = {
   messageTrigger: trigger('messageExpand', [
     state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
     state('expanded', style({ height: '*' })),
diff --git a/webapp-frontend/src/app/app-control/app-control.component.css b/webapp-frontend/src/app/app-control/app-control.component.css
new file mode 100644
index 00000000..db05cc3f
--- /dev/null
+++ b/webapp-frontend/src/app/app-control/app-control.component.css
@@ -0,0 +1,51 @@
+/*-
+ * ========================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===================================
+ */
+ .app-control__section {
+}
+
+.app-control__header {
+    text-align: center;
+    color: #432c85;
+    font-size: 50px;
+    font-weight: 200;
+    letter-spacing: .1em;
+    transform: translate(149 56);
+}
+
+.spinner-container {
+    height: 360px;
+    width: 390px;
+    position: fixed;
+}
+
+.spinner-container mat-spinner {
+    margin: 130px auto 0 auto;
+}
+
+.app-control-table {
+  width: 100%;
+  min-height: 150px;
+  margin-top: 10px;
+  background-color: transparent;
+}
+
+tr.message-row {
+  height: 0;
+}
diff --git a/webapp-frontend/src/app/app-control/app-control.component.html b/webapp-frontend/src/app/app-control/app-control.component.html
new file mode 100644
index 00000000..3321caa6
--- /dev/null
+++ b/webapp-frontend/src/app/app-control/app-control.component.html
@@ -0,0 +1,91 @@
+<!--
+  ========================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="app-control__section">
+  <h3 class="app-control__header">xApp Control</h3>
+  <div class="spinner-container" *ngIf="dataSource.loading$ | async">
+    <mat-spinner></mat-spinner>
+  </div>
+  <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="app-control-table mat-elevation-z8">
+
+    <ng-container matColumnDef="xapp">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> App Name </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.xapp}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Instance Name</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.instance.name}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="status">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.instance.status}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="ip" >
+      <mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.instance.ip}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="port">
+      <mat-header-cell *matHeaderCellDef mat-sort-header> Port </mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.instance.port}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="action">
+      <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
+      <!-- click on button should not expand/collapse the row -->
+      <mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">
+        <button mat-icon-button (click)="controlApp(element)">
+          <mat-icon>settings</mat-icon>
+        </button>
+        <button mat-icon-button color="warn" (click)="undeployApp(element)">
+          <mat-icon>delete</mat-icon>
+        </button>
+      </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="expandedDetail">
+      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
+        <div [@messageExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+          <div>
+            txMessages:
+          </div>
+          <li *ngFor="let rxmessage of element.instance.rxMessages">
+            <span>{{rxmessage}}</span>
+          </li>
+          <div>
+            rxMessages:
+          </div>
+          <li *ngFor="let txmessage of element.instance.txMessages">
+            <span>{{txmessage}}</span>
+          </li>
+        </div>
+      </td>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let element; columns: displayedColumns;"
+      [class.example-expanded-row]="expandedElement === element"
+      (click)="expandedElement = expandedElement === element ? null : element"></mat-row>
+    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="message-row"></tr>
+  </table>
+</div>
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.spec.ts b/webapp-frontend/src/app/app-control/app-control.component.spec.ts
similarity index 78%
rename from webapp-frontend/src/app/ran-connection/ran-connection.component.spec.ts
rename to webapp-frontend/src/app/app-control/app-control.component.spec.ts
index c4bbcecc..3233b79b 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection.component.spec.ts
+++ b/webapp-frontend/src/app/app-control/app-control.component.spec.ts
@@ -19,21 +19,21 @@
  */
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { RANConnectionComponent } from './ran-connection.component';
+import { AppControlComponent } from './app-control.component';
 
-describe('RANConnectionComponent', () => {
-  let component: RANConnectionComponent;
-  let fixture: ComponentFixture<RANConnectionComponent>;
+describe('AppControlComponent', () => {
+  let component: AppControlComponent;
+  let fixture: ComponentFixture<AppControlComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ RANConnectionComponent ]
+      declarations: [ AppControlComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RANConnectionComponent);
+    fixture = TestBed.createComponent(AppControlComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/webapp-frontend/src/app/app-control/app-control.component.ts b/webapp-frontend/src/app/app-control/app-control.component.ts
new file mode 100644
index 00000000..159d33dd
--- /dev/null
+++ b/webapp-frontend/src/app/app-control/app-control.component.ts
@@ -0,0 +1,87 @@
+/*-
+ * ========================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, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { Router } from '@angular/router';
+import { XappControlRow } from '../interfaces/app-mgr.types';
+import { AppMgrService } from '../services/app-mgr/app-mgr.service';
+import { ConfirmDialogService } from '../services/ui/confirm-dialog.service';
+import { ErrorDialogService } from '../services/ui/error-dialog.service';
+import { NotificationService } from '../services/ui/notification.service';
+import { AppControlAnimations } from './app-control.animations';
+import { AppControlDataSource } from './app-control.datasource';
+
+@Component({
+  selector: 'control-app-control',
+  templateUrl: './app-control.component.html',
+  styleUrls: ['./app-control.component.css'],
+  animations: [AppControlAnimations.messageTrigger]
+})
+export class AppControlComponent implements OnInit {
+
+  displayedColumns: string[] = ['xapp', 'name', 'status', 'ip', 'port', 'action'];
+  dataSource: AppControlDataSource;
+  @ViewChild(MatSort) sort: MatSort;
+
+  constructor(
+    private appMgrSvc: AppMgrService,
+    private router: Router,
+    private confirmDialogService: ConfirmDialogService,
+    private errorDialogService: ErrorDialogService,
+    private notification: NotificationService) { }
+
+  ngOnInit() {
+    this.dataSource = new AppControlDataSource(this.appMgrSvc, this.sort);
+    this.dataSource.loadTable();
+  }
+
+  controlApp(app: XappControlRow): void {
+    const acXappPattern =  /[Aa][Dd][Mm][Ii][Ss]{2}[Ii][Oo][Nn]/;
+    const anrXappPattern = /[Aa][Nn][Rr]/;
+    if (acXappPattern.test(app.xapp)) {
+      this.router.navigate(['/ac']);
+    } else if (anrXappPattern.test(app.xapp)) {
+      this.router.navigate(['/anr']);
+    } else {
+      this.errorDialogService.displayError('No control available for ' + app.xapp + ' (yet)');
+    }
+  }
+
+  undeployApp(app: XappControlRow): void {
+    this.confirmDialogService.openConfirmDialog('Are you sure you want to undeploy xApp ' + app.xapp + '?')
+      .afterClosed().subscribe(res => {
+        if (res) {
+          this.appMgrSvc.undeployXapp(app.xapp).subscribe(
+            response => {
+              this.dataSource.loadTable();
+              switch (response.status) {
+                case 200:
+                  this.notification.success('xApp undeployed successfully!');
+                  break;
+                default:
+                  this.notification.warn('xApp undeploy failed.');
+              }
+            }
+          );
+        }
+      });
+  }
+
+}
diff --git a/webapp-frontend/src/app/control/control.datasource.ts b/webapp-frontend/src/app/app-control/app-control.datasource.ts
similarity index 98%
rename from webapp-frontend/src/app/control/control.datasource.ts
rename to webapp-frontend/src/app/app-control/app-control.datasource.ts
index 41d7ba41..cf0c3dcf 100644
--- a/webapp-frontend/src/app/control/control.datasource.ts
+++ b/webapp-frontend/src/app/app-control/app-control.datasource.ts
@@ -28,7 +28,7 @@ import { catchError, finalize, map } from 'rxjs/operators';
 import { XappControlRow, XMDeployedApp, XMXappInstance } from '../interfaces/app-mgr.types';
 import { AppMgrService } from '../services/app-mgr/app-mgr.service';
 
-export class ControlDataSource extends DataSource<XappControlRow> {
+export class AppControlDataSource extends DataSource<XappControlRow> {
 
   private xAppInstancesSubject = new BehaviorSubject<XappControlRow[]>([]);
 
diff --git a/webapp-frontend/src/app/app-routing.module.ts b/webapp-frontend/src/app/app-routing.module.ts
index fc104e40..8a8e1ec0 100644
--- a/webapp-frontend/src/app/app-routing.module.ts
+++ b/webapp-frontend/src/app/app-routing.module.ts
@@ -22,19 +22,17 @@ import { CommonModule } from '@angular/common';
 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 { RANConnectionComponent } from './ran-connection/ran-connection.component';
 import { StatsComponent } from './stats/stats.component';
 import { UserComponent } from './admin/user.component';
 import { AcXappComponent } from './ac-xapp/ac-xapp.component';
 import { AnrXappComponent } from './anr-xapp/anr-xapp.component';
+import { ControlComponent } from './control/control.component';
 
 const routes: Routes = [
     {path: '', component: LoginComponent},
     {path: 'login', component: LoginComponent},
     {path: 'catalog', component: CatalogComponent},
     {path: 'control', component: ControlComponent},
-    {path: 'ran-connection', component: RANConnectionComponent},
     {path: 'stats', component: StatsComponent},
     {path: 'admin', component: UserComponent},
     {path: 'ac', component: AcXappComponent},
diff --git a/webapp-frontend/src/app/app.module.ts b/webapp-frontend/src/app/app.module.ts
index d1ab4556..647f25e6 100644
--- a/webapp-frontend/src/app/app.module.ts
+++ b/webapp-frontend/src/app/app.module.ts
@@ -44,9 +44,10 @@ import { AppMgrService } from './services/app-mgr/app-mgr.service';
 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 { AppControlComponent } from './app-control/app-control.component';
 import { ControlComponent } from './control/control.component';
-import { RANConnectionDialogComponent } from './ran-connection/ran-connection-dialog.component';
-import { RANConnectionComponent } from './ran-connection/ran-connection.component';
+import { RANConnectionDialogComponent } from './ran-control/ran-connection-dialog.component';
+import { RanControlComponent } from './ran-control/ran-control.component';
 import { ANREditNCRDialogComponent } from './anr-xapp/anr-edit-ncr-dialog.component';
 import { StatsComponent } from './stats/stats.component';
 import { UserComponent } from './admin/user.component';
@@ -65,6 +66,7 @@ import { AddDashboardUserDialogComponent } from './admin/add-dashboard-user-dial
 import { EditDashboardUserDialogComponent } from './admin/edit-dashboard-user-dialog/edit-dashboard-user-dialog.component';
 
 
+
 @NgModule({
   declarations: [
     AcXappComponent,
@@ -77,18 +79,19 @@ import { EditDashboardUserDialogComponent } from './admin/edit-dashboard-user-di
     ConfigEventComponent,
     ConfirmDialogComponent,
     ControlCardComponent,
-    ControlComponent,
+    AppControlComponent,
     ErrorDialogComponent,
     FooterComponent,
     LoginComponent,
     ModalEventComponent,
-    RANConnectionComponent,
+    RanControlComponent,
     RANConnectionDialogComponent,
     SidenavListComponent,
     StatCardComponent,
     StatsComponent,
     AddDashboardUserDialogComponent,
-    EditDashboardUserDialogComponent
+    EditDashboardUserDialogComponent,
+    ControlComponent
   ],
     imports: [
     AppRoutingModule,
diff --git a/webapp-frontend/src/app/control/control.component.css b/webapp-frontend/src/app/control/control.component.css
index d90ce2e4..e0b220a7 100644
--- a/webapp-frontend/src/app/control/control.component.css
+++ b/webapp-frontend/src/app/control/control.component.css
@@ -1,51 +1,3 @@
-/*-
- * ========================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===================================
- */
- .control__section {
-}
-
-.control__header {
-    text-align: center;
-    color: #432c85;
-    font-size: 50px;
-    font-weight: 200;
-    letter-spacing: .1em;
-    transform: translate(149 56);
-}
-
-.spinner-container {
-    height: 360px;
-    width: 390px;
-    position: fixed;
-}
-
-.spinner-container mat-spinner {
-    margin: 130px auto 0 auto;
-}
-
-.control-table {
-  width: 99%; 
-  min-height: 150px;
-  margin-top: 10px;
+.control__section {
   background-color: transparent;
-}
-
-tr.message-row {
-  height: 0;
-}
+}
\ No newline at end of file
diff --git a/webapp-frontend/src/app/control/control.component.html b/webapp-frontend/src/app/control/control.component.html
index cb41f199..dcd09fcd 100644
--- a/webapp-frontend/src/app/control/control.component.html
+++ b/webapp-frontend/src/app/control/control.component.html
@@ -18,73 +18,8 @@
   ========================LICENSE_END===================================
   -->
 <div class="control__section">
-  <h3 class="control__header">xApp Control</h3>
-  <div class="spinner-container" *ngIf="dataSource.loading$ | async">
-    <mat-spinner></mat-spinner>
-  </div>
-  <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows class="control-table mat-elevation-z8">
+  <control-ran-control></control-ran-control>
+  <hr>
+  <control-app-control></control-app-control>
+</div>
 
-    <ng-container matColumnDef="xapp">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> App Name </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.xapp}} </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="name">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> Instance Name</mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.instance.name}} </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="status">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.instance.status}} </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="ip" >
-      <mat-header-cell *matHeaderCellDef mat-sort-header> IP </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.instance.ip}} </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="port">
-      <mat-header-cell *matHeaderCellDef mat-sort-header> Port </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.instance.port}} </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="action">
-      <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
-      <!-- click on button should not expand/collapse the row -->
-      <mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">
-        <button mat-icon-button (click)="controlApp(element)">
-          <mat-icon>settings</mat-icon>
-        </button>
-        <button mat-icon-button color="warn" (click)="undeployApp(element)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-cell>
-    </ng-container>
-
-    <ng-container matColumnDef="expandedDetail">
-      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
-        <div [@messageExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-          <div>
-            txMessages:
-          </div>
-          <li *ngFor="let rxmessage of element.instance.rxMessages">
-            <span>{{rxmessage}}</span>
-          </li>
-          <div>
-            rxMessages:
-          </div>
-          <li *ngFor="let txmessage of element.instance.txMessages">
-            <span>{{txmessage}}</span>
-          </li>
-        </div>
-      </td>
-    </ng-container>
-
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let element; columns: displayedColumns;"
-      [class.example-expanded-row]="expandedElement === element"
-      (click)="expandedElement = expandedElement === element ? null : element"></mat-row>
-    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="message-row"></tr>
-  </table>
-</div>
\ No newline at end of file
diff --git a/webapp-frontend/src/app/control/control.component.spec.ts b/webapp-frontend/src/app/control/control.component.spec.ts
index caa1a732..d9c5e0f4 100644
--- a/webapp-frontend/src/app/control/control.component.spec.ts
+++ b/webapp-frontend/src/app/control/control.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.
diff --git a/webapp-frontend/src/app/control/control.component.ts b/webapp-frontend/src/app/control/control.component.ts
index 4059d276..573f7051 100644
--- a/webapp-frontend/src/app/control/control.component.ts
+++ b/webapp-frontend/src/app/control/control.component.ts
@@ -17,71 +17,17 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatSort } from '@angular/material/sort';
-import { Router } from '@angular/router';
-import { XappControlRow } from '../interfaces/app-mgr.types';
-import { AppMgrService } from '../services/app-mgr/app-mgr.service';
-import { ConfirmDialogService } from './../services/ui/confirm-dialog.service';
-import { ErrorDialogService } from './../services/ui/error-dialog.service';
-import { NotificationService } from './../services/ui/notification.service';
-import { ControlAnimations } from './control.animations';
-import { ControlDataSource } from './control.datasource';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-control',
   templateUrl: './control.component.html',
-  styleUrls: ['./control.component.css'],
-  animations: [ControlAnimations.messageTrigger],
+  styleUrls: ['./control.component.css']
 })
 export class ControlComponent implements OnInit {
 
-  displayedColumns: string[] = ['xapp', 'name', 'status', 'ip', 'port', 'action'];
-  dataSource: ControlDataSource;
-  @ViewChild(MatSort) sort: MatSort;
-
-  constructor(
-    private appMgrSvc: AppMgrService,
-    private router: Router,
-    private confirmDialogService: ConfirmDialogService,
-    private errorDialogService: ErrorDialogService,
-    private notification: NotificationService) { }
+  constructor() { }
 
   ngOnInit() {
-    this.dataSource = new ControlDataSource(this.appMgrSvc, this.sort);
-    this.dataSource.loadTable();
-  }
-
-  controlApp(app: XappControlRow): void {
-    const acXappPattern =  /[Aa][Dd][Mm][Ii][Ss]{2}[Ii][Oo][Nn]/;
-    const anrXappPattern = /[Aa][Nn][Rr]/;
-    if (acXappPattern.test(app.xapp)) {
-      this.router.navigate(['/ac']);
-    } else if (anrXappPattern.test(app.xapp)) {
-      this.router.navigate(['/anr']);
-    } else {
-      this.errorDialogService.displayError('No control available for ' + app.xapp + ' (yet)');
-    }
   }
-
-  undeployApp(app: XappControlRow): void {
-    this.confirmDialogService.openConfirmDialog('Are you sure you want to undeploy xApp ' + app.xapp + '?')
-      .afterClosed().subscribe(res => {
-        if (res) {
-          this.appMgrSvc.undeployXapp(app.xapp).subscribe(
-            response => {
-              this.dataSource.loadTable();
-              switch (response.status) {
-                case 200:
-                  this.notification.success('xApp undeployed successfully!');
-                  break;
-                default:
-                  this.notification.warn('xApp undeploy failed.');
-              }
-            }
-          );
-        }
-      });
-  }
-
 }
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 8e8a75ed..e4753e98 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
@@ -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.
@@ -24,7 +24,7 @@
       <mat-icon>home</mat-icon> <span class="nav-caption">Home</span>
   </a>
   <a mat-list-item routerLink="/catalog" (click)="onSidenavClose()">
-      <mat-icon>list</mat-icon> <span class="nav-caption">Catalog</span>   
+      <mat-icon>list</mat-icon> <span class="nav-caption">Catalog</span>
   </a>
   <a mat-list-item routerLink="/control" (click)="onSidenavClose()">
       <mat-icon>settings</mat-icon><span class="nav-caption">Control</span>
@@ -32,9 +32,6 @@
   <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="/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()">
       <mat-icon>assignment_ind</mat-icon> <span class="nav-caption">Admin</span>
   </a>
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.css b/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.css
similarity index 100%
rename from webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.css
rename to webapp-frontend/src/app/ran-control/ran-connection-dialog.component.css
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.html b/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.html
similarity index 100%
rename from webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.html
rename to webapp-frontend/src/app/ran-control/ran-connection-dialog.component.html
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.ts b/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.ts
similarity index 98%
rename from webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.ts
rename to webapp-frontend/src/app/ran-control/ran-connection-dialog.component.ts
index 3867ef9c..8ea07a9a 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection-dialog.component.ts
+++ b/webapp-frontend/src/app/ran-control/ran-connection-dialog.component.ts
@@ -21,7 +21,7 @@ import { Component, OnInit, Inject } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { E2ManagerService } from '../services/e2-mgr/e2-mgr.service';
-import { NotificationService } from './../services/ui/notification.service';
+import { NotificationService } from '../services/ui/notification.service';
 import { ErrorDialogService } from '../services/ui/error-dialog.service';
 import { E2SetupRequest } from '../interfaces/e2-mgr.types';
 import { HttpErrorResponse } from '@angular/common/http';
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.html b/webapp-frontend/src/app/ran-control/ran-control.component.html
similarity index 93%
rename from webapp-frontend/src/app/ran-connection/ran-connection.component.html
rename to webapp-frontend/src/app/ran-control/ran-control.component.html
index 565b326c..ba37728d 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection.component.html
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.html
@@ -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.
@@ -17,8 +17,9 @@
   limitations under the License.
   ========================LICENSE_END===================================
 -->
-<div class="ranconnect__section">
-  <h3 class="ranconnect__header">RAN Connections</h3>
+
+<div class="ran-control__section">
+  <h3 class="ran-control__header">RAN Connections</h3>
 
   <button mat-raised-button (click)="setupRANConnection()">Setup Connection..</button>
   <button mat-raised-button color="warn" class="disconnect-all-button"
@@ -28,7 +29,7 @@
     <mat-spinner></mat-spinner>
   </div>
 
-  <table mat-table class="ranconnect-table mat-elevation-z8" [dataSource]="dataSource">
+  <table mat-table class="ran-control-table mat-elevation-z8" [dataSource]="dataSource">
 
     <ng-container matColumnDef="requestType">
       <mat-header-cell *matHeaderCellDef>RAN Type</mat-header-cell>
@@ -66,4 +67,4 @@
 
   </table>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.scss b/webapp-frontend/src/app/ran-control/ran-control.component.scss
similarity index 93%
rename from webapp-frontend/src/app/ran-connection/ran-connection.component.scss
rename to webapp-frontend/src/app/ran-control/ran-control.component.scss
index 72db5c36..b14459df 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection.component.scss
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.scss
@@ -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.
@@ -17,10 +17,10 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
- .ranconnect__section {
+ .ran-control__section {
 }
 
-.ranconnect__header {
+.ran-control__header {
     text-align: center;
     color: #432c85;
     font-size: 50px;
@@ -29,7 +29,7 @@
     transform: translate(149 56);
 }
 
-.ranconnect-table {
+.ran-control-table {
     width: 100%;
     min-height: 100px;
     margin-top: 10px;
diff --git a/webapp-frontend/src/app/ran-control/ran-control.component.spec.ts b/webapp-frontend/src/app/ran-control/ran-control.component.spec.ts
new file mode 100644
index 00000000..e10d9d8c
--- /dev/null
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.spec.ts
@@ -0,0 +1,44 @@
+/*-
+ * ========================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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RanControlComponent } from './ran-control.component';
+
+describe('RanControlComponent', () => {
+  let component: RanControlComponent;
+  let fixture: ComponentFixture<RanControlComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RanControlComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RanControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.component.ts b/webapp-frontend/src/app/ran-control/ran-control.component.ts
similarity index 83%
rename from webapp-frontend/src/app/ran-connection/ran-connection.component.ts
rename to webapp-frontend/src/app/ran-control/ran-control.component.ts
index ac77c37f..6e1a2d78 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection.component.ts
+++ b/webapp-frontend/src/app/ran-control/ran-control.component.ts
@@ -22,19 +22,19 @@ import { MatDialog } from '@angular/material/dialog';
 import { RANConnectionDialogComponent } from './ran-connection-dialog.component';
 import { E2ManagerService } from '../services/e2-mgr/e2-mgr.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 { RANConnectionDataSource } from './ran-connection.datasource';
+import { ConfirmDialogService } from '../services/ui/confirm-dialog.service';
+import { NotificationService } from '../services/ui/notification.service';
+import { RANControlDataSource } from './ran-control.datasource';
 import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
-  selector: 'app-ran-connection',
-  templateUrl: './ran-connection.component.html',
-  styleUrls: ['./ran-connection.component.scss']
+  selector: 'control-ran-control',
+  templateUrl: './ran-control.component.html',
+  styleUrls: ['./ran-control.component.scss']
 })
-export class RANConnectionComponent implements OnInit {
+export class RanControlComponent implements OnInit {
   displayedColumns: string[] = ['requestType', 'ranName', 'ranIp', 'ranPort', 'responseCode', 'timeStamp'];
-  dataSource: RANConnectionDataSource;
+  dataSource: RANControlDataSource;
 
   constructor(private e2MgrSvc: E2ManagerService,
     private errorSvc: ErrorDialogService,
@@ -43,7 +43,7 @@ export class RANConnectionComponent implements OnInit {
     public dialog: MatDialog) { }
 
   ngOnInit() {
-    this.dataSource = new RANConnectionDataSource(this.e2MgrSvc);
+    this.dataSource = new RANControlDataSource(this.e2MgrSvc);
     this.dataSource.loadTable();
   }
 
diff --git a/webapp-frontend/src/app/ran-connection/ran-connection.datasource.ts b/webapp-frontend/src/app/ran-control/ran-control.datasource.ts
similarity index 84%
rename from webapp-frontend/src/app/ran-connection/ran-connection.datasource.ts
rename to webapp-frontend/src/app/ran-control/ran-control.datasource.ts
index 44d4a4e1..431537fe 100644
--- a/webapp-frontend/src/app/ran-connection/ran-connection.datasource.ts
+++ b/webapp-frontend/src/app/ran-control/ran-control.datasource.ts
@@ -26,9 +26,9 @@ 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> {
+export class RANControlDataSource extends DataSource<E2SetupRequest> {
 
-  private ranConnectSubject = new BehaviorSubject<E2SetupRequest[]>([]);
+  private ranControlSubject = new BehaviorSubject<E2SetupRequest[]>([]);
 
   private loadingSubject = new BehaviorSubject<boolean>(false);
 
@@ -45,15 +45,15 @@ export class RANConnectionDataSource extends DataSource<E2SetupRequest> {
         catchError(() => of([])),
         finalize(() => this.loadingSubject.next(false))
       )
-      .subscribe((ranConnect: E2SetupRequest[]) => this.ranConnectSubject.next(ranConnect));
+      .subscribe((ranControl: E2SetupRequest[]) => this.ranControlSubject.next(ranControl));
   }
 
   connect(collectionViewer: CollectionViewer): Observable<E2SetupRequest[]> {
-    return this.ranConnectSubject.asObservable();
+    return this.ranControlSubject.asObservable();
   }
 
   disconnect(collectionViewer: CollectionViewer): void {
-    this.ranConnectSubject.complete();
+    this.ranControlSubject.complete();
     this.loadingSubject.complete();
   }
 
diff --git a/webapp-frontend/src/app/ui/control-card/control-card.component.html b/webapp-frontend/src/app/ui/control-card/control-card.component.html
index fff42e85..94372bfc 100644
--- a/webapp-frontend/src/app/ui/control-card/control-card.component.html
+++ b/webapp-frontend/src/app/ui/control-card/control-card.component.html
@@ -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.
@@ -26,7 +26,7 @@
         <mat-icon>stop</mat-icon> Stop</div>
     <div style="color: black; size: 1em; text-align: center">
         <mat-icon>build</mat-icon>Config</div>
-    
+
 
   </div>
   <div class="body__container">