Replace windows alert with Notification component

Removed windows.alert across files and replaced it with notification
component

Issue-ID: CCSDK-1381
Change-Id: If521c92544a1639b2fafb07163163844817c1c7a
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

10 files changed, 88 insertions, 30 deletions

diff --git a/cds-ui/client/src/app/app.component.html b/cds-ui/client/src/app/app.component.html
index 88446ca84..945db342e 100644
--- a/cds-ui/client/src/app/app.component.html
+++ b/cds-ui/client/src/app/app.component.html
@@ -20,4 +20,10 @@ limitations under the License.
 -->
 
 
+<mat-progress-bar mode="indeterminate" *ngIf="loaderStatus === true"></mat-progress-bar>
+<div [ngClass]="{'overlay': loaderStatus === true}">
 <router-outlet></router-outlet>
+<div class="notification-container">
+    <app-notification></app-notification>
+</div>
+</div>
diff --git a/cds-ui/client/src/app/app.component.scss b/cds-ui/client/src/app/app.component.scss
index bf7a36c2e..8dc7dd0af 100644
--- a/cds-ui/client/src/app/app.component.scss
+++ b/cds-ui/client/src/app/app.component.scss
@@ -32,4 +32,17 @@ limitations under the License.
     height: 200px;
     overflow: auto;
     border: 1px solid #555;
+  }
+
+  .overlay {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .notification-container{
+    position: fixed;
+    top: 1em;
+    z-index: 1;
+    right: 1em;
+    overflow: auto;
   }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/app.component.ts b/cds-ui/client/src/app/app.component.ts
index 106417958..d6499cc35 100644
--- a/cds-ui/client/src/app/app.component.ts
+++ b/cds-ui/client/src/app/app.component.ts
@@ -23,13 +23,22 @@ import { Router } from '@angular/router';
 import { Observable} from 'rxjs';
 import { Store } from '@ngrx/store';
 
+import { LoaderService } from './common/core/services/loader.service';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+  loaderStatus: boolean = false;
+  constructor(private router: Router, 
+    private loaderService: LoaderService
+    ) {
 
-  constructor(private router: Router) {
+    this.loaderService.subject.subscribe(data=>{
+      console.log(data);
+      this.loaderStatus = data;
+    })
    }
 }
diff --git a/cds-ui/client/src/app/common/core/core.module.ts b/cds-ui/client/src/app/common/core/core.module.ts
index 807065ebc..7207178a9 100644
--- a/cds-ui/client/src/app/common/core/core.module.ts
+++ b/cds-ui/client/src/app/common/core/core.module.ts
@@ -30,6 +30,8 @@ import { appReducers } from './store/reducers/app.reducer';
 import { BlueprintEffects } from './store/effects/blueprint.effects';
 import { ResourcesEffects } from './store/effects/resources.effects';
 import { ApiService } from './services/api.service';
+import { NotificationHandlerService } from './services/notification-handler.service';
+import { LoaderService } from './services/loader.service';
 // import { BlueprintService } from './services/blueprint.service';
 
 @NgModule({
@@ -38,10 +40,13 @@ import { ApiService } from './services/api.service';
   imports: [
     CommonModule,
     StoreModule.forRoot(appReducers),
-    EffectsModule.forRoot([BlueprintEffects,ResourcesEffects]),
-    StoreRouterConnectingModule.forRoot({stateKey: 'router'}),
+    EffectsModule.forRoot([BlueprintEffects, ResourcesEffects]),
+    StoreRouterConnectingModule.forRoot({ stateKey: 'router' }),
     HttpClientModule
   ],
-  providers : [ ApiService ]
+  providers: [ApiService,
+    NotificationHandlerService,
+    LoaderService
+  ]
 })
 export class CoreModule { }
diff --git a/cds-ui/client/src/app/common/core/services/notification-handler.service.ts b/cds-ui/client/src/app/common/core/services/notification-handler.service.ts
index 296b71e53..b64f2fa0f 100644
--- a/cds-ui/client/src/app/common/core/services/notification-handler.service.ts
+++ b/cds-ui/client/src/app/common/core/services/notification-handler.service.ts
@@ -23,22 +23,22 @@ limitations under the License.
 
 import { Injectable } from '@angular/core';
 
-// import { NotificationService } from '../../shared/components/notification/notification.service';
+import { NotificationService } from '../../shared/components/notification/notification.service';
 
 @Injectable()
 export class NotificationHandlerService {
 
   constructor(
-    //  private alert: NotificationService
+    private alert: NotificationService
   ) { }
 
 
   success(message: string) {
-    // this.alert.success(message);
+    this.alert.success(message);
   }
 
   error(message: string) {
-    // this.alert.error(message);
+    this.alert.error(message);
   }
 
   info(message: string) {
diff --git a/cds-ui/client/src/app/common/shared/shared.module.ts b/cds-ui/client/src/app/common/shared/shared.module.ts
index b036f5967..39e4e433f 100644
--- a/cds-ui/client/src/app/common/shared/shared.module.ts
+++ b/cds-ui/client/src/app/common/shared/shared.module.ts
@@ -30,6 +30,8 @@ import { SearchPipe } from './pipes/search.pipe';
 import { SearchDialog } from './components/search-dialog/search-dialog.component';
 import { AppMaterialModule }  from '../modules/app-material.module';
 import { SortPipe } from './pipes/sort.pipe';
+import { NotificationComponent } from './components/notification/notification.component';
+import { NotificationService } from './components/notification/notification.service';
 
 @NgModule({
   declarations: [
@@ -37,14 +39,16 @@ import { SortPipe } from './pipes/sort.pipe';
     CBAWizardComponent,
     SearchPipe,
     SearchDialog,
-    SortPipe
+    SortPipe,
+    NotificationComponent
   ],
   exports: [
     HomeComponent,
     CBAWizardComponent,
     SearchPipe,
     SearchDialog,
-    SortPipe
+    SortPipe,
+    NotificationComponent
   ],
   imports: [
     AppMaterialModule,
@@ -68,6 +72,7 @@ import { SortPipe } from './pipes/sort.pipe';
     MatStepperModule,
     RouterModule
   ],
+  providers: [NotificationService],
   entryComponents: [SearchDialog]
 })
 export class SharedModule { }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
index b982fa29f..0a3a8d2ef 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts
@@ -39,6 +39,9 @@ import { ApiService } from 'src/app/common/core/services/api.service';
 import { IMetaData } from 'src/app/common/core/store/models/metadata.model';
 import { EditorService } from './editor.service';
 import { SortPipe } from '../../../../common/shared/pipes/sort.pipe';
+import { NotificationHandlerService } from 'src/app/common/core/services/notification-handler.service';
+import { LoaderService } from 'src/app/common/core/services/loader.service';
+
 
 interface Node {
   name: string;
@@ -107,6 +110,7 @@ export class EditorComponent implements OnInit {
   private tocsaMetadaData: any;
   metadata: IMetaData;
   uploadedFileName: string;
+  entryDefinition: string;
 
   private transformer = (node: Node, level: number) => {
     return {
@@ -126,7 +130,10 @@ export class EditorComponent implements OnInit {
   artifactName: any;
   artifactVersion: any;
 
-  constructor(private store: Store<IAppState>, private apiservice: EditorService) {
+  constructor(private store: Store<IAppState>, private apiservice: EditorService,
+    private alertService: NotificationHandlerService, private loader: LoaderService
+    ) 
+    {
     this.dataSource.data = TREE_DATA;
     this.bpState = this.store.select('blueprint');
     // this.dataSource.data = TREE_DATA;
@@ -162,6 +169,7 @@ export class EditorComponent implements OnInit {
         this.dataSource.data = this.filesTree;
         this.blueprintName = blueprintdata.name;
         this.uploadedFileName = blueprintdata.uploadedFileName;
+        this.entryDefinition = blueprintdata.entryDefinition;
         let blueprint = [];
         for (let key in this.blueprintdata) {
           if (this.blueprintdata.hasOwnProperty(key)) {
@@ -206,10 +214,10 @@ export class EditorComponent implements OnInit {
       name: this.blueprintName,
       files: this.filesTree,
       filesData: this.filesData,
-      uploadedFileName: this.uploadedFileName
+      uploadedFileName: this.uploadedFileName,
+      entryDefinition: this.entryDefinition
     }
     this.store.dispatch(new SetBlueprintState(blueprintState));
-    // console.log(this.text);
   }
 
   selectFileToView(file) {
@@ -227,7 +235,6 @@ export class EditorComponent implements OnInit {
       }
     })
     this.fileExtension = this.selectedFile.substr(this.selectedFile.lastIndexOf('.') + 1);
-    // console.log(this.fileExtension);
     this.setEditorMode();
   }
 
@@ -248,7 +255,10 @@ export class EditorComponent implements OnInit {
                     console.log("processed");
                   }
                 });
-              window.alert('Blueprint enriched successfully');
+              this.alertService.success('Blueprint enriched successfully');
+            },
+            (error)=>{
+              this.alertService.error('Enrich:' + error.message);
             });
       });
   }
@@ -264,8 +274,9 @@ export class EditorComponent implements OnInit {
         this.apiservice.post("/create-blueprint/", formData)
           .subscribe(
             data => {
-              // console.log(data);
-              window.alert('Success:' + JSON.stringify(data));
+              this.alertService.success('Success:' + JSON.stringify(data));
+            }, error=>{
+              this.alertService.error('Save -' +error.message);
             });
 
       });
@@ -280,8 +291,9 @@ export class EditorComponent implements OnInit {
         formData.append("file", blob);
         this.apiservice.deployPost("/deploy-blueprint/", formData)
           .subscribe(data => {
-            // console.log(data);
-            window.alert('Saved Successfully:' + JSON.stringify(data));
+            this.alertService.success('Saved Successfully:' + JSON.stringify(data));
+          }, error=>{
+            this.alertService.error('Deploy - ' + error.message);
           });
 
       });
@@ -295,8 +307,9 @@ export class EditorComponent implements OnInit {
         formData.append("file", blob);
         this.apiservice.post("/publish/", formData)
           .subscribe(data => {
-            // console.log(data);
-            window.alert('Published:' + JSON.stringify(data));
+            this.alertService.success('Published:' + JSON.stringify(data))
+          }, error=>{
+            this.alertService.error('Publish - ' + error.message);
           });
 
       });
@@ -580,6 +593,7 @@ export class EditorComponent implements OnInit {
   }
 
   saveEditedChanges() {
+    this.loader.showLoader();
     this.filesData.forEach(fileNode => {
       if (this.selectedFile && fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) {
         fileNode.data = this.text;
@@ -596,5 +610,6 @@ export class EditorComponent implements OnInit {
     }
 
     this.updateBlueprint();
+    this.loader.hideLoader();
   }
 }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts
index 609aacae7..c7f6dec67 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts
@@ -29,6 +29,7 @@ import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState
 import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model';
 import { IMetaData } from '../../../../common/core/store/models/metadata.model';
 import { SetBlueprintState } from 'src/app/common/core/store/actions/blueprint.action';
+import { LoaderService } from '../../../../common/core/services/loader.service';
 
 @Component({
   selector: 'app-metadata',
@@ -48,7 +49,7 @@ export class MetadataComponent implements OnInit {
   uploadedFileName: string;
   entryDefinition: string;
   
-  constructor(private formBuilder: FormBuilder, private store: Store<IAppState>) {
+  constructor(private formBuilder: FormBuilder, private store: Store<IAppState>, private loader: LoaderService) {
     this.bpState = this.store.select('blueprint');
     this.CBAMetadataForm = this.formBuilder.group({
       template_author: ['', Validators.required],
@@ -96,6 +97,7 @@ export class MetadataComponent implements OnInit {
   }
 
   UploadMetadata() {
+    this.loader.showLoader();
     this.metadata = Object.assign({}, this.CBAMetadataForm.value);
     this.blueprint.metadata = this.metadata;
 
@@ -113,6 +115,6 @@ export class MetadataComponent implements OnInit {
       entryDefinition: this.entryDefinition
     }
     this.store.dispatch(new SetBlueprintState(blueprintState));
+    this.loader.hideLoader();
   }
-
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
index 92003c919..1221e8f2b 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts
@@ -30,6 +30,7 @@ import { IAppState } from '../../../../common/core/store/state/app.state';
 import { LoadBlueprintSuccess, SET_BLUEPRINT_STATE, SetBlueprintState } from '../../../../common/core/store/actions/blueprint.action';
 import { json } from 'd3';
 import { SortPipe } from '../../../../common/shared/pipes/sort.pipe';
+import { LoaderService } from '../../../../common/core/services/loader.service';
 
 @Component({
   selector: 'app-search-template',
@@ -56,7 +57,7 @@ export class SearchTemplateComponent implements OnInit {
   private blueprintName: string;
   private entryDefinition: string;
 
-  constructor(private store: Store<IAppState>) { }
+  constructor(private store: Store<IAppState>, private loader: LoaderService) { }
 
   ngOnInit() {
   }
@@ -68,7 +69,8 @@ export class SearchTemplateComponent implements OnInit {
     this.zipFile.files = {};
     this.zipFile.loadAsync(this.file)
       .then((zip) => {
-        if(zip) {            
+        if(zip) { 
+          this.loader.showLoader();           
           this.buildFileViewData(zip);
         }
       });
@@ -157,8 +159,8 @@ export class SearchTemplateComponent implements OnInit {
           }
         }
       });
-    });
-    console.log('tree', tree);
+    });    
+    this.loader.hideLoader();
     return tree;
   }
 
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts
index 4603c529f..2da1287ba 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts
@@ -30,6 +30,7 @@ import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
 import { Observable } from 'rxjs';
 import { A11yModule } from '@angular/cdk/a11y';
 import { ResourceEditService } from './resource-edit.service';
+import { NotificationHandlerService } from 'src/app/common/core/services/notification-handler.service';
 
 @Component({
   selector: 'app-resource-edit',
@@ -47,7 +48,7 @@ export class ResourceEditComponent implements OnInit {
     @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
     options = new JsonEditorOptions();
   
-  constructor(private store: Store<IAppState>, private resourceEditService: ResourceEditService) {
+  constructor(private store: Store<IAppState>, private resourceEditService: ResourceEditService, private alertService: NotificationHandlerService) {
   	this.rdState = this.store.select('resources');
     this.options.mode = 'text';
     this.options.modes = [ 'text', 'tree', 'view'];
@@ -100,10 +101,10 @@ export class ResourceEditComponent implements OnInit {
   saveToBackend() {
     this.resourceEditService.saveResource(this.data)
     .subscribe(response=>{
-      window.alert("save success");
+      this.alertService.success("save success")
     },
     error=>{
-      window.alert('Error saving resources');
+      this.alertService.error('Error saving resources');
     })
   }
 }