Repair deploy-app function on catalog page

Rework the App Manager data type (interface) to have
required 'name' field and use that field when deploying
an application from the FE.
Detect error and show notification with message.
Change catalog table action icon from text to cloud.

Change-Id: I534f12cfe32f1062fa6a2e2cab29c3a9e3e319ef
Signed-off-by: Lott, Christopher (cl778h) <cl778h@att.com>
Issue-Id: RICPLT-1574

diff --git a/docs/release-notes.rst b/docs/release-notes.rst
index c87ecab..023c18b 100644 (file)
--- a/docs/release-notes.rst
+++ b/docs/release-notes.rst
@@ -20,7 +20,7 @@
 RIC Dashboard Release Notes
 ===========================
 
-Version 1.0.4, 21 June 2019
+Version 1.0.4, 27 June 2019
 ---------------------------
 * Add AC xApp neighbor control screen
 * Add ANR xApp neighbor cell relation table
@@ -41,6 +41,7 @@ Version 1.0.4, 21 June 2019
 * 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
+* Repair deploy-app feature and use icon instead of text button
 
 Version 1.0.3, 28 May 2019
 --------------------------

diff --git a/webapp-frontend/src/app/app.module.ts b/webapp-frontend/src/app/app.module.ts
index 647f25e..9f2522d 100644 (file)
--- a/webapp-frontend/src/app/app.module.ts
+++ b/webapp-frontend/src/app/app.module.ts
@@ -26,15 +26,14 @@ import {MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule
     MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule,
     MatTabsModule} from '@angular/material';
 import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { MatRadioModule } from '@angular/material/radio';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ChartsModule } from 'ng2-charts';
 import { MDBBootstrapModule } from 'angular-bootstrap-md';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-// RETIRE THIS
-import { Ng2SmartTableModule } from 'ng2-smart-table';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
@@ -65,8 +64,6 @@ import { AcXappComponent } from './ac-xapp/ac-xapp.component';
 import { AddDashboardUserDialogComponent } from './admin/add-dashboard-user-dialog/add-dashboard-user-dialog.component';
 import { EditDashboardUserDialogComponent } from './admin/edit-dashboard-user-dialog/edit-dashboard-user-dialog.component';
 
-
-
 @NgModule({
   declarations: [
     AcXappComponent,
@@ -99,6 +96,7 @@ import { EditDashboardUserDialogComponent } from './admin/edit-dashboard-user-di
     BrowserAnimationsModule,
     ChartsModule,
     FormsModule,
+    HttpClientModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,
@@ -121,7 +119,7 @@ import { EditDashboardUserDialogComponent } from './admin/edit-dashboard-user-di
     MatSortModule,
     MatTableModule,
     MatTabsModule,
-    Ng2SmartTableModule,
+    MatTooltipModule,
     ReactiveFormsModule,
     MDBBootstrapModule.forRoot(),
   ],

diff --git a/webapp-frontend/src/app/catalog/catalog.component.html b/webapp-frontend/src/app/catalog/catalog.component.html
index db27f2c..6f2e06d 100644 (file)
--- a/webapp-frontend/src/app/catalog/catalog.component.html
+++ b/webapp-frontend/src/app/catalog/catalog.component.html
@@ -38,13 +38,11 @@
       <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
       <mat-cell *matCellDef="let element">
         <div class="catalog-button-row">
-          <button mat-icon-button
-                  (click)="onConfigurexApp(element.name)">
-            <mat-icon>settings</mat-icon>
+          <button mat-icon-button (click)="onConfigureApp(element.name)">
+            <mat-icon matTooltip="Adjust settings">settings</mat-icon>
           </button>
-          <button mat-button class="mat-raised-button mat-primary"
-                  (click)="onDeployxApp(element.name)">
-            Deploy
+          <button mat-icon-button (click)="onDeployApp(element.name)">
+            <mat-icon matTooltip="Deploy app">cloud_upload</mat-icon>
           </button>
         </div>
       </mat-cell>

diff --git a/webapp-frontend/src/app/catalog/catalog.component.ts b/webapp-frontend/src/app/catalog/catalog.component.ts
index a2e3cd1..2c1aa85 100644 (file)
--- a/webapp-frontend/src/app/catalog/catalog.component.ts
+++ b/webapp-frontend/src/app/catalog/catalog.component.ts
@@ -18,6 +18,7 @@
  * ========================LICENSE_END===================================
  */
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { MatSort } from '@angular/material/sort';
 import { ErrorDialogService } from '../services/ui/error-dialog.service';
 import { AppMgrService } from '../services/app-mgr/app-mgr.service';
@@ -47,28 +48,26 @@ export class CatalogComponent implements OnInit {
     this.dataSource.loadTable();
   }
 
-  onConfigurexApp(name: string): void {
+  onConfigureApp(name: string): void {
     const aboutError = 'Configure not implemented (yet)';
     this.errorService.displayError(aboutError);
   }
 
-  onDeployxApp(name: string): void {
+  onDeployApp(name: string): void {
     this.confirmDialogService.openConfirmDialog('Deploy application ' + name + '?')
-      .afterClosed().subscribe(res => {
+      .afterClosed().subscribe( (res: any) => {
         if (res) {
           this.appMgrSvc.deployXapp(name).subscribe(
-            response => {
-              switch (response.status) {
-                case 200:
-                  this.notification.success('Deploy succeeded!');
-                  break;
-                default:
-                  this.notification.warn('Deploy failed.');
-              }
+            (response: HttpResponse<object>) => {
+              this.notification.success('Deploy succeeded!');
+            },
+            (error: HttpErrorResponse) => {
+              this.notification.warn('Deploy failed: ' + error.message);
             }
           );
         }
-      });
-
+      }
+    );
   }
+
 }

diff --git a/webapp-frontend/src/app/control/control.component.css b/webapp-frontend/src/app/control/control.component.css
index e0b220a..5df590b 100644 (file)
--- a/webapp-frontend/src/app/control/control.component.css
+++ b/webapp-frontend/src/app/control/control.component.css
@@ -1,3 +1,22 @@
+/*-
+ * ========================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 {
   background-color: transparent;
-}
\ No newline at end of file
+}

diff --git a/webapp-frontend/src/app/interfaces/app-mgr.types.ts b/webapp-frontend/src/app/interfaces/app-mgr.types.ts
index 5acaf04..11eb220 100644 (file)
--- a/webapp-frontend/src/app/interfaces/app-mgr.types.ts
+++ b/webapp-frontend/src/app/interfaces/app-mgr.types.ts
@@ -28,8 +28,16 @@ export interface XMSubscription {
   targetUrl: string;
 }
 
+/**
+ * Name is the only required field
+ */
 export interface XMXappInfo {
-  xAppName: string;
+  name: string;
+  configName?: string;
+  namespace?: string;
+  serviceName?: string;
+  imageRepo?: string;
+  hostname?: string;
 }
 
 export interface XMXappInstance {

diff --git a/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts b/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts
index 428bbe3..10683ae 100644 (file)
--- a/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts
+++ b/webapp-frontend/src/app/services/app-mgr/app-mgr.service.ts
@@ -40,7 +40,7 @@ export class AppMgrService {
   }
 
   deployXapp(name: string) {
-    const xappInfo: XMXappInfo = { xAppName: name };
+    const xappInfo: XMXappInfo = { name: name };
     return this.httpClient.post(this.basePath, xappInfo, { observe: 'response' });
   }