add xapp deploy dialog, call backend api

Change-Id: I801a07b4403b7d3d6cb96d0a5b94e5654ef746b9
Signed-off-by: Jun (Nicolas) Hu <jh245g@att.com>

diff --git a/webapp-frontend/src/app/app.module.ts b/webapp-frontend/src/app/app.module.ts
index 45361d7..4fa952d 100644 (file)
--- a/webapp-frontend/src/app/app.module.ts
+++ b/webapp-frontend/src/app/app.module.ts
@@ -32,7 +32,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
-import { CatalogComponent } from './catalog/catalog.component';
+import { CatalogComponent, AppCatalogDeployDialog, } from './catalog/catalog.component';
 import { UiService} from './services/ui/ui.service';
 import { AdminService} from './services/admin/admin.service';
 import { CatalogService} from './services/catalog/catalog.service';
@@ -47,6 +47,7 @@ import { StatCardComponent} from './ui/stat-card/stat-card.component';
 import { ModalEventComponent } from './ui/modal-event/modal-event.component';
 import { XappComponent } from './xapp/xapp.component';
 import { ConfigEventComponent } from './ui/config-event/config-event.component';
+import { MatDialogModule } from '@angular/material';
 
 @NgModule({
   declarations: [
@@ -63,8 +64,9 @@ import { ConfigEventComponent } from './ui/config-event/config-event.component';
     ModalEventComponent,
     XappComponent,
     ConfigEventComponent,
+    AppCatalogDeployDialog,
   ],
-  imports: [
+    imports: [
     BrowserModule,
     BrowserAnimationsModule,
     ChartsModule,
@@ -84,7 +86,8 @@ import { ConfigEventComponent } from './ui/config-event/config-event.component';
     Ng2SmartTableModule,
     MDBBootstrapModule.forRoot(),
   ],
-  exports: [
+    exports: [
+    MatDialogModule, 
     MatButtonToggleModule,
     MatExpansionModule,
     MatSliderModule,
@@ -95,7 +98,10 @@ import { ConfigEventComponent } from './ui/config-event/config-event.component';
     MatSidenavModule,
     MatSlideToggleModule,
     MatTabsModule,
-  ],
+    ],
+    entryComponents: [
+    AppCatalogDeployDialog,
+    ],
   providers: [
       UiService,
       AdminService,

diff --git a/webapp-frontend/src/app/catalog/catalog.component.css b/webapp-frontend/src/app/catalog/catalog.component.css
index 67d46b4..508e70b 100644 (file)
--- a/webapp-frontend/src/app/catalog/catalog.component.css
+++ b/webapp-frontend/src/app/catalog/catalog.component.css
@@ -31,7 +31,7 @@
     transform: translate(149 56);
 }
 
-:host /deep/ ng2-smart-table tbody > tr > td{
+:host /deep/ ng2-smart-table tbody > tr > td {
   text-align: left;
 }
 

diff --git a/webapp-frontend/src/app/catalog/catalog.component.deploy-dialog.html b/webapp-frontend/src/app/catalog/catalog.component.deploy-dialog.html
new file mode 100644 (file)
index 0000000..4d547ca
--- /dev/null
+++ b/webapp-frontend/src/app/catalog/catalog.component.deploy-dialog.html
@@ -0,0 +1,35 @@
+<!--
+  ========================LICENSE_START=================================
+  ORAN-OSC
+  %%
+  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 mat-dialog-content class="modal-header">
+    <p>Do you want to deploy {{data.name}}?</p>
+</div>
+
+<div mat-dialog-actions class="modal-footer justify-content-center">
+    <a type="button" mdbBtn color="primary" class="waves-effect" mdbWavesEffect mat-button (click)="deployXapp()">
+        <mat-icon style="vertical-align: -21%;">launch</mat-icon> Deploy
+    </a>
+    <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" mdbWavesEffect
+       data-dismiss="modal" mat-button (click)="onNoClick()">
+        <mat-icon style="vertical-align: -21%; size: 1em">close</mat-icon> Cancel
+    </a>
+</div>
\ No newline at end of file

diff --git a/webapp-frontend/src/app/catalog/catalog.component.ts b/webapp-frontend/src/app/catalog/catalog.component.ts
index 081a206..c5aa195 100644 (file)
--- a/webapp-frontend/src/app/catalog/catalog.component.ts
+++ b/webapp-frontend/src/app/catalog/catalog.component.ts
@@ -17,9 +17,15 @@
  * limitations under the License.
  * ========================LICENSE_END===================================
  */
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { LocalDataSource } from 'ng2-smart-table';
 import { CatalogService } from '../services/catalog/catalog.service';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+export interface DialogData {
+    name: string;
+}
+
 
 @Component({
   selector: 'app-catalog',
@@ -59,16 +65,44 @@ export class CatalogComponent {
 
   source: LocalDataSource = new LocalDataSource();
 
-  constructor(private service: CatalogService) {
+    constructor(private service: CatalogService, public dialog: MatDialog) {
     this.service.getAll().subscribe((val:any[]) => this.source.load(val));
   }
 
-  onDeployxApp(event): void {
-    if (window.confirm('Are you sure you want to deploy?')) {
-      event.confirm.resolve();
-    } else {
-      event.confirm.reject();
+
+    onDeployxApp(event): void {
+        const dialogRef = this.dialog.open(AppCatalogDeployDialog, {
+            width: '400px',
+            data: { name: event.data.name }
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+            console.log('The dialog was closed');
+        });
+    }
+
+}
+
+@Component({
+    selector: 'app-catalog-deploy-dialog',
+    templateUrl: 'catalog.component.deploy-dialog.html',
+    styleUrls: ['./catalog.component.css']
+})
+
+export class AppCatalogDeployDialog{
+
+    constructor(
+        public dialogRef: MatDialogRef<AppCatalogDeployDialog>,
+        private service: CatalogService,
+        @Inject(MAT_DIALOG_DATA) public data: DialogData) { }
+
+    onNoClick(): void {
+        this.dialogRef.close();
+    }
+
+    deployXapp(): void {
+        this.service.deployXapp(this.data.name).subscribe((val: any[]) => console.log(val));;
+        this.dialogRef.close();
     }
-  }
 
 }

diff --git a/webapp-frontend/src/app/services/catalog/catalog.service.ts b/webapp-frontend/src/app/services/catalog/catalog.service.ts
index 95b8662..a67e98a 100644 (file)
--- a/webapp-frontend/src/app/services/catalog/catalog.service.ts
+++ b/webapp-frontend/src/app/services/catalog/catalog.service.ts
@@ -30,5 +30,14 @@ export class CatalogService {
   getAll() {
     return this.http.get('api/xappmgr/xapps');
   }
+
+    deployXapp(name) {
+        console.log(name);
+        return this.http.post('api/xappmgr/xapps',
+            {
+                "xAppName": "string",
+                "xappName": name
+            });
+    }
     
 }