CBA integration

Change-Id: I0505e32fe7680f1e2ee029f36d37e3ec84088789
Issue-ID: CCSDK-1068
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>

16 files changed, 808 insertions, 87 deletions

diff --git a/cds-ui/client/src/app/common/constants/app-constants.ts b/cds-ui/client/src/app/common/constants/app-constants.ts
index 0efabebf5..0bfe5cade 100644
--- a/cds-ui/client/src/app/common/constants/app-constants.ts
+++ b/cds-ui/client/src/app/common/constants/app-constants.ts
@@ -31,7 +31,7 @@ export const GlobalContants = {
     //                     }
     // }
     cbawizard: {
-        stepsRequired: 
+        stepsRequired:
         {
             stepCount: 4,
             steps: [{
@@ -69,26 +69,30 @@ export const GlobalContants = {
         }
     },
     datadictionary: {
-        stepsRequired: 
+        stepsRequired:
         {
             stepCount: 3,
             steps: [{
-                      name: 'Resource Creation', componentURL: '/dataDictionary/selectTemplate',
-                      label: 'Resource Creation',
-                      component: 'ResourceCreationComponent'
+                name: 'Resource Creation', componentURL: '/dataDictionary/selectTemplate',
+                label: 'Resource Creation',
+                component: 'ResourceCreationComponent'
 
-                    },
-                   {
-                      name: 'Edit/Validate', componentURL: '/dataDictionary/modifyTemplate',
-                      label: 'Edit/Validate',
-                      component: 'ResourceEditComponent'
-                   },
-                   {
-                      name: 'Save', componentURL: '/dataDictionary/saveTemplate',
-                      label: 'Save Resource',
-                      component: 'SaveResourceComponent'
-                   }]
-       }
+            },
+            {
+                name: 'Edit/Validate', componentURL: '/dataDictionary/modifyTemplate',
+                label: 'Edit/Validate',
+                component: 'ResourceEditComponent'
+            },
+            {
+                name: 'Save', componentURL: '/dataDictionary/saveTemplate',
+                label: 'Save Resource',
+                component: 'SaveResourceComponent'
+            }]
+        }
 
     }
-};
\ No newline at end of file
+};
+export const LoopbackConfig = {
+    url: "http://127.0.0.1:3000",
+    authtoken: "ccsdkapps"
+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/core/services/api.service.ts b/cds-ui/client/src/app/common/core/services/api.service.ts
index 0ee3c6a78..20d8a9bce 100644
--- a/cds-ui/client/src/app/common/core/services/api.service.ts
+++ b/cds-ui/client/src/app/common/core/services/api.service.ts
@@ -20,33 +20,55 @@ limitations under the License.
 */
 
 
+
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpResponse, HttpHeaderResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
-
-//import { IBlueprintHttp } from '../store/models/blueprint-http.model';
+import { LoopbackConfig } from '../../constants/app-constants';
 
 @Injectable()
 export class ApiService {
-  // blueprintUrl = '../../constants/blueprint.json';
-
+  
   constructor(private _http: HttpClient) {
   }
+  enrich(uri: string, body: FormData): Observable<any> {
+    
+    var HTTPOptions = {
+      headers: new HttpHeaders({ 'Accept': 'application/zip', }),
+      observe: "response" as 'body',// to display the full response & as 'body' for type cast
+      'responseType': 'blob' as 'json'
+    }
+    return this._http.post(LoopbackConfig.url + uri, body, HTTPOptions);
+
+  }
+  downloadCBA(uri: string, params?: any): Observable<Blob> {
+    // return this._http.get<Blob>(LoopbackConfig.url+uri);
+    var HTTPOptions = {
+      headers: new HttpHeaders({ 'Accept': 'application/zip; charset=UTF-8', }),
+      observe: "response" as 'body',// to display the full response & as 'body' for type cast
+      'responseType': 'blob' as 'json'
+    }
+    return this._http.get<Blob>(LoopbackConfig.url + uri, HTTPOptions);
 
-  get(url: string, params?: any): Observable<any> {
-            return this._http.get(url);
   }
 
-  post() {
+  post(uri: string, body: FormData): Observable<any> {
     // to do
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Authorization': LoopbackConfig.authtoken,
+
+      })
+    };
+    return this._http.post(LoopbackConfig.url + uri, body, httpOptions);
   }
 
   put() {
-      // to do
+    // to do
   }
 
   delete() {
-      // to do
+    // to do
   }
 
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/shared/components/search-dialog/search-dialog.component.ts b/cds-ui/client/src/app/common/shared/components/search-dialog/search-dialog.component.ts
new file mode 100644
index 000000000..e20b7cbd3
--- /dev/null
+++ b/cds-ui/client/src/app/common/shared/components/search-dialog/search-dialog.component.ts
@@ -0,0 +1,51 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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, Inject, Output, EventEmitter} from '@angular/core';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+
+export interface DialogData {
+    animal: string;
+    name: string;
+  }
+
+@Component({
+    selector: 'search-dialog',
+    templateUrl: 'search-dialog.html',
+  })
+  export class SearchDialog {
+  @Output() searchEvent = new EventEmitter();
+  
+  constructor(
+      public dialogRef: MatDialogRef<SearchDialog>,
+      @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+  
+    onNoClick(): void {
+      this.dialogRef.close();
+      this.dialogRef.keydownEvents
+    }
+
+    search() {
+      this.searchEvent.emit();
+    }
+
+  
+  }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/common/shared/components/search-dialog/search-dialog.html b/cds-ui/client/src/app/common/shared/components/search-dialog/search-dialog.html
new file mode 100644
index 000000000..c6c41bf68
--- /dev/null
+++ b/cds-ui/client/src/app/common/shared/components/search-dialog/search-dialog.html
@@ -0,0 +1,29 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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============================================
+-->
+
+
+<h1 mat-dialog-title>Resouce Dictionary</h1>
+<div mat-dialog-content>
+  <button [mat-dialog-close]="data.name">{{data.name.name}}</button>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancel</button>
+</div>
\ No newline at end of file
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 8db020d52..6ca5b13a5 100644
--- a/cds-ui/client/src/app/common/shared/shared.module.ts
+++ b/cds-ui/client/src/app/common/shared/shared.module.ts
@@ -20,26 +20,33 @@ limitations under the License.
 */
 
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { HomeComponent } from './components/home/home.component';
 import { CBAWizardComponent } from './components/cbawizard/cbawizard.component';
 import { MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule,  MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
 import { RouterModule } from "@angular/router";
 import { SearchPipe } from './pipes/search.pipe';
+import { SearchDialog } from './components/search-dialog/search-dialog.component';
+import { AppMaterialModule }  from '../modules/app-material.module';
 
 @NgModule({
   declarations: [
     HomeComponent,
     CBAWizardComponent,
-    SearchPipe
-    
+    SearchPipe,
+    SearchDialog
+
   ],
   exports: [
     HomeComponent,
     CBAWizardComponent,
-    SearchPipe
+    SearchPipe,
+    SearchDialog
   ],
   imports: [
+    AppMaterialModule,
+    FormsModule,
     CommonModule,
     MatToolbarModule,
     MatButtonModule,
@@ -58,6 +65,7 @@ import { SearchPipe } from './pipes/search.pipe';
     MatFormFieldModule, 
     MatStepperModule,
     RouterModule
-  ]
+  ],
+  entryComponents: [SearchDialog]
 })
-export class SharedModule { }
+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.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
index 6113e6d75..ea4c298e8 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
@@ -18,17 +18,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================ -->
 
-<div class="container">
+<div class="containerDiv">
     <div class="fileViewContainer">
         <!-- <div style="width:inherit; height: inherit; position: fixed;z-index: 1; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);"></div> -->
         <div style="display: flex;">
             <div>
-                <i class="fa fa-folder delete-add-file" aria-hidden="true" [ngClass] ="{'fa-disabled': selectedFileObj.type == 'file' || selectedFileObj.type == ''}" (click)="enableNameInputEl('createFolder')"></i>
-                <i class="fa fa-file add-file" aria-hidden="true" [ngClass] ="{'fa-disabled' : selectedFileObj.type == 'file' ||selectedFileObj.type == ''}" (click)="enableNameInputEl('createFile')"></i>
-                <i class="fa fa-trash delete-add-file" aria-hidden="true" [ngClass] ="{'fa-disabled' : selectedFileObj.type == ''}"  (click)="deleteFolderOrFile('deleteFile')"></i>
+                <i class="fa fa-folder delete-add-file" aria-hidden="true" [ngClass]="{'fa-disabled': selectedFileObj.type == 'file' || selectedFileObj.type == ''}" (click)="enableNameInputEl('createFolder')"></i>
+                <i class="fa fa-file add-file" aria-hidden="true" [ngClass]="{'fa-disabled' : selectedFileObj.type == 'file' ||selectedFileObj.type == ''}" (click)="enableNameInputEl('createFile')"></i>
+                <i class="fa fa-trash delete-add-file" aria-hidden="true" [ngClass]="{'fa-disabled' : selectedFileObj.type == ''}" (click)="deleteFolderOrFile('deleteFile')"></i>
             </div>
             <div>
-                <input *ngIf="isNameTextboxEnablled" type="text" (focusout)="createFolderOrFile($event)"/>
+                <input *ngIf="isNameTextboxEnablled" type="text" (focusout)="createFolderOrFile($event)" />
             </div>
         </div>
         <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" style="background-color: #ebebeb">
@@ -47,7 +47,17 @@ limitations under the License.
         </mat-tree>
     </div>
     <div class="editorConatiner">
-        <i class="fa fa-save save-icon" style="font-size:24px" (click)="updateBlueprint()"></i>
-        <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor>
+        <!-- <i class="fa fa-save save-icon" style="font-size:24px" (click)="updateBlueprint()"></i>
+        <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor> -->
+        <div class="normal-editor-mode" [ngClass]="{ 'resource-mapping-mode': viewTemplateMode}">
+            <i class="fa fa-save save-icon" style="font-size:24px" (click)="updateBlueprint()"></i>
+            <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor>
+        </div>
+        <button *ngIf="viewTemplateMode" class="btn-active" (click)="loadConfigParams()">Load Config Parameters</button>
+        <button *ngIf="viewTemplateMode" class="btn-active">Auto Map to Data dictionary</button>
+        <div style="height: 50%;overflow: scroll" *ngIf="viewTemplateMode">
+            <app-resource-mapping [paramData]="paramData"></app-resource-mapping>
+        </div>
     </div>
+
 </div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
index 8375fff87..ed53807aa 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss
@@ -19,10 +19,10 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-.container {
-    display: flex;
-    flex-direction: row;
-    margin-top: 8px;
+.containerDiv {
+    display: flex !important;
+    flex-direction: row !important;
+    margin-top: 8px !important;
     .fileViewContainer {
         width: 20%;
         margin: 2px;
@@ -45,15 +45,17 @@ limitations under the License.
     border: 1px solid #3f51b5;
     // border-left: 5px solid #3f51b5;
 }
+
 .savebtn {
     color: white;
     background-color: #3f51b5;
     position: absolute;
     bottom: 5px;
 }
-.save-icon{
+
+.save-icon {
     position: absolute;
-    left: 59em;
+    left: 57em;
     color: #3f51b5;
     font-size: 24px;
     cursor: pointer;
@@ -63,27 +65,43 @@ limitations under the License.
 .background-highlight {
     background-color: #3f51b5 !important;
     color: white !important;
-  }
+}
 
-  .fa-disabled {
+.fa-disabled {
     opacity: 0.6;
     pointer-events: none;
-  }
+}
 
-  .mat-tree-node {
+.mat-tree-node {
     min-height: 40px !important;
-  }
+}
 
-  .delete-add-file {
-    color:#3f51b5; 
+.delete-add-file {
+    color: #3f51b5;
     font-size: 20px;
-    margin: 3px; 
+    margin: 3px;
     cursor: pointer;
-  }
+}
 
-  .add-file {
-    color:#3f51b5; 
-    font-size: 18px; 
-    margin: 3px; 
+.add-file {
+    color: #3f51b5;
+    font-size: 18px;
+    margin: 3px;
     cursor: pointer;
-  }
\ No newline at end of file
+}
+
+.resource-mapping-mode {
+    height: 50% !important;
+    // overflow: scroll;
+}
+
+.normal-editor-mode {
+    height: 100%;
+}
+
+.apply-scrol-to-editor-container {
+    overflow: scroll;
+    width: 80%;
+    background-color: gainsboro;
+    height: 490px !important;
+}
\ 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 57d934b9a..7cbf5b0a5 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
@@ -35,6 +35,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model';
 import { LoadBlueprintSuccess, SetBlueprintState } from '../../../../common/core/store/actions/blueprint.action'
+import { ApiService } from 'src/app/common/core/services/api.service';
 
 
 interface Node {
@@ -90,6 +91,18 @@ export class EditorComponent implements OnInit {
   filetoDelete: string;
   currentFilePath: string = '';
   selectedFileObj = { name: '', type: '' };
+  viewTemplateMode: boolean = false;
+  paramData : any = {
+    'capability-data': [],
+    'resourceAccumulatorResolvedData' : []
+  };
+  validfile: boolean = false;
+  @ViewChild('fileInput') fileInput;
+  result: string = '';
+  private paths = [];
+  private tree;
+  private fileObject: any;
+  private tocsaMetadaData: any;
 
   private transformer = (node: Node, level: number) => {
     return {
@@ -107,7 +120,7 @@ export class EditorComponent implements OnInit {
 
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
-  constructor(private store: Store<IAppState>) {
+  constructor(private store: Store<IAppState>, private apiservice: ApiService) {
     this.dataSource.data = TREE_DATA;
     this.bpState = this.store.select('blueprint');
     // this.dataSource.data = TREE_DATA;
@@ -184,6 +197,7 @@ export class EditorComponent implements OnInit {
   }
 
   selectFileToView(file) {
+    if(file.name.includes('.vtl')) { this.viewTemplateMode = true;} else { this.viewTemplateMode = false;}
     this.currentFilePath = '';
     this.expandParents(file);
     this.selectedFileObj.name = file.name;
@@ -201,15 +215,115 @@ export class EditorComponent implements OnInit {
     this.setEditorMode();
   }
 
-  SaveToBackend() {
+  getEnriched() {
+    this.create();
     this.zipFile.generateAsync({ type: "blob" })
       .then(blob => {
+        const formData = new FormData();
+        formData.append("file", blob);
+        this.apiservice.enrich("/enrich-blueprint/", formData)
+          .subscribe(
+            (response) => {
+              console.log("Inside blob");
+              var blob = new Blob([response.data], { type: 'application/zip' });
+              const fileName = 'CBA.zip';
+              saveAs(blob, fileName);
+              this.zipFile.files = {};
+              this.zipFile.loadAsync(blob)
+                .then((zip) => {
+                  if (zip) {
+                    this.buildFileViewData(zip);
+                  }
+                });
+              
+            });
+
+      });
+
+  }
+  async buildFileViewData(zip) {
+    this.validfile = false;
+    this.paths = [];
+    for (var file in zip.files) {
+      this.fileObject = {
+        name: zip.files[file].name,
+        data: ''
+      };
+      const value = <any>await  zip.files[file].async('string');
+      this.fileObject.data = value;
+      this.paths.push(this.fileObject); 
+    }
+
+    if(this.paths) {
+      this.paths.forEach(path =>{
+        if(path.name.includes("TOSCA.meta")) {
+          this.validfile = true
+        }
+      });
+    } else {
+      alert('Please update proper file');
+    }
+
+    if(this.validfile) {      
+      this.fetchTOSACAMetadata();
+      this.tree = this.arrangeTreeData(this.paths);
+    } else {
+      alert('Please update proper file with TOSCA metadata');
+    }
+  }
+
+  fetchTOSACAMetadata() {
+    let toscaData = {};
+    this.paths.forEach(file =>{
+      if(file.name.includes('TOSCA.meta')) {
+        let keys = file.data.split("\n");
+        keys.forEach((key)=>{
+          let propertyData = key.split(':');
+          toscaData[propertyData[0]] = propertyData[1];
+        });
+      }
+    });
+    this.blueprintName = (((toscaData['Entry-Definitions']).split('/'))[1]).toString();;
+    console.log(toscaData);
+  }
+
+  
+  saveToBackend() {
+    this.create();
+    this.zipFile.generateAsync({ type: "blob" })
+      .then(blob => {
+        const formData = new FormData();
+        formData.append("file", blob);
+        this.apiservice.post("/create-blueprint/", formData)
+          .subscribe(data => console.log(data));
 
       });
   }
 
   deploy() {
     // to do
+    this.create();
+    this.zipFile.generateAsync({ type: "blob" })
+      .then(blob => {
+        const formData = new FormData();
+        formData.append("file", blob);
+        this.apiservice.post("/deploy-blueprint/", formData)
+          .subscribe(data => console.log(data));
+
+      });
+  }
+
+  publish() {
+    this.create();
+    this.zipFile.generateAsync({ type: "blob" })
+      .then(blob => {
+        const formData = new FormData();
+        formData.append("file", blob);
+        this.apiservice.post("/publish/", formData)
+          .subscribe(data => console.log(data));
+
+      });
+
   }
 
   create() {
@@ -219,12 +333,17 @@ export class EditorComponent implements OnInit {
   }
 
   download() {
-    this.create();
-    var zipFilename = "baseconfiguration.zip";
-    this.zipFile.generateAsync({ type: "blob" })
-      .then(blob => {
-        saveAs(blob, zipFilename);
-      });
+    this.apiservice.downloadCBA("/download-blueprint/baseconfiguration/1.0.0")
+      .subscribe(response => {
+        console.log(response);
+        var blob = new Blob([response], { type: 'application/zip' });
+        const fileName = 'CBA';
+        saveAs(blob, fileName);
+      },
+        error => {
+          console.log(error);
+        }
+      );
   }
   setEditorMode() {
     switch (this.fileExtension) {
@@ -384,4 +503,38 @@ export class EditorComponent implements OnInit {
       }
     }
   }
+  loadConfigParams() {
+    console.log(this.currentFilePath);
+   console.log(this.selectedFile);
+   console.log(this.selectedFileObj);
+   console.log(this.selectedFolder);
+   console.log(this.text);
+
+   let parsedData = JSON.parse(this.text);
+   this.paramData.resourceAccumulatorResolvedData = parsedData['resource-accumulator-resolved-data'];
+  let i=0;
+
+   this.paramData.resourceAccumulatorResolvedData.forEach(element => {
+        element.id = i;
+        let tempElement = element['param-value'];
+        let indexLength = tempElement.length;
+        tempElement = tempElement.slice(2,indexLength);
+        let index = tempElement.indexOf('}');
+        tempElement = this.removeItemByIndex(tempElement, index);
+        element['param-value'] = tempElement;
+        i++;
+   });
+
+  }
+
+  removeItemByIndex(paramValue, index) {
+    if(index == 0) {
+      return  paramValue.slice(1)
+    } else if(index > 0) {
+      let indexLength = paramValue.length;
+      return paramValue.slice(0,index) + paramValue.slice(index+1, indexLength);
+    } else {
+      return paramValue;
+    }
+  }
 }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
index 754ba214c..1d9b5266e 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html
@@ -20,28 +20,28 @@ limitations under the License.
 -->
 
 <div class="modifyTemp">
-  <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer>
-  <app-editor class="editor-selector" *ngIf="editorMode"></app-editor>
+    <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer>
+    <app-editor class="editor-selector" *ngIf="editorMode"></app-editor>
 </div>
 
 <div style="display: flex;flex-direction: row">
     <div style="width: 30em;">
-    <button class="btn-active" (click) ="changeView()">{{viewText}}</button>
+        <button class="btn-active" (click)="changeView()">{{viewText}}</button>
     </div>
-    <div style="width: 16em">        
+    <div style="width: 16em">
     </div>
     <div style="width: 100%;height: 3em;">
-        <div style="display: flex;flex-direction: row-reverse">        
-        <button class="btn-active" (click)="downloadCBA()">Download</button>
-        <button class="mat-button-active" mat-button [matMenuTriggerFor]="menu">Deploy</button>
-         <mat-menu #menu="matMenu">
-                  <button mat-menu-item>Deploy</button>
-                  <button mat-menu-item>Test</button>
-          </mat-menu>
-        <button [disabled]="!isEnriched" class="btn-active">Publish</button>        
-        <button class="btn-active">Save</button>
-        <button class="btn-active">Enrich</button>
-  
+        <div style="display: flex;flex-direction: row-reverse">
+            <button class="btn-active" (click)="downloadCBA()">Download</button>
+            <button class="mat-button-active" mat-button [matMenuTriggerFor]="menu">Deploy</button>
+            <mat-menu #menu="matMenu">
+                <button mat-menu-item (click)="saveToBlueprintProcessor()">Deploy</button>
+                <button mat-menu-item (click)="processBlueprint()">Test</button>
+            </mat-menu>
+            <button [disabled]="!isEnriched" class="btn-active" (click)="publishToControllerBlueprint()">Publish</button>
+            <button class="btn-active" (click)="saveToControllerBlueprint()">Save</button>
+            <button class="btn-active" (click)="getEnriched()">Enrich</button>
+
         </div>
     </div>
-  </div>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
index e39ce019c..47d779556 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts
@@ -58,6 +58,25 @@ export class ModifyTemplateComponent implements OnInit {
     }
   }
 
+  getEnriched() {
+    this.editorComp.getEnriched();
+  }
+
+  saveToControllerBlueprint() {
+    this.editorComp.saveToBackend();
+  }
+
+  publishToControllerBlueprint() {
+    this.editorComp.publish();
+  }
+
+  saveToBlueprintProcessor() {
+    this.editorComp.deploy();
+  }
+
+  processBlueprint(){
+    
+  }
   downloadCBA() {
     this.editorComp.download();
   }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
index 3aef2a7aa..7d22c569b 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts
@@ -21,6 +21,7 @@ limitations under the License.
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
+import { FormsModule } from '@angular/forms';
 
 import { ModifyTemplateComponent } from './modify-template.component';
 import { ModifyTemplateRoutingModule } from './modify-template-routing.module';
@@ -28,12 +29,15 @@ import { AppMaterialModule } from '../../../common/modules/app-material.module';
 import { DesignerComponent } from './designer/designer.component';
 import { EditorComponent } from './editor/editor.component';
 import { AceEditorModule } from 'ng2-ace-editor';
+import { ResourceMappingComponent } from './resource-mapping/resource-mapping.component';
+import { ResourceMappingService } from './resource-mapping/resource-mapping.service';
 
 @NgModule({
   declarations: [
     ModifyTemplateComponent,
     DesignerComponent,
-    EditorComponent
+    EditorComponent,
+    ResourceMappingComponent
   ],
   exports: [
     ModifyTemplateComponent,
@@ -45,7 +49,9 @@ import { AceEditorModule } from 'ng2-ace-editor';
     CdkTableModule,
     AppMaterialModule,
     ModifyTemplateRoutingModule,
-    AceEditorModule
-  ]
+    AceEditorModule,
+    FormsModule
+  ],
+  providers: [ ResourceMappingService ]
 })
 export class ModifyTemplateModule { }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.html
new file mode 100644
index 000000000..b369e012d
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.html
@@ -0,0 +1,166 @@
+<!--
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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>
+    <table class="table table-bordered table-condensed" style="margin: 1em; background: white">
+        <thead style="background-color: #3f51b5; color: white;line-height: 26px;font: 400 13.3333px Arial;">
+            <tr class="success">
+                <th>Required</th>
+                <th>Template Input</th>
+                <th>Parameter Name</th>
+                <th>Dictionary Name</th>
+                <th>Dictionary Source</th>
+                <th>Default</th>
+                <th>Data Type</th>
+                <th>Entry Schema</th>
+                <th>Dependency Mapping</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let param of paramData.resourceAccumulatorResolvedData">
+                <td>
+                    <input type="checkbox" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>{{param["param-value"]}}</td>
+                <td>
+                    <input type="text" style="width: 80%" [(ngModel)]="resorceDictionaryName" />
+                    <i class="fa fa-search" style="margin-left: 1em" aria-hidden="true"></i>
+                </td>
+                <td>
+                    <select>
+            <option value="volvo">Input</option>
+            <option value="saab">Output</option>
+          </select>
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <input type="checkbox" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>Name</td>
+                <td>
+                    <input type="text" />
+                    <i class="fa fa-search" aria-hidden="true"></i>
+                </td>
+                <td>
+                    <select>
+            <option value="volvo">Input</option>
+            <option value="saab">Output</option>
+          </select>
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <input type="checkbox" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>Name</td>
+                <td>
+                    <input type="text" />
+                    <i class="fa fa-search" aria-hidden="true"></i>
+                </td>
+                <td>
+                    <select>
+            <option value="volvo">Input</option>
+            <option value="saab">Output</option>
+          </select>
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+            </tr>
+
+            <tr>
+                <td>
+                    <input type="checkbox" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>Name</td>
+                <td>
+                    <input type="text" />
+                    <i class="fa fa-search" aria-hidden="true"></i>
+                </td>
+                <td>
+                    <select>
+            <option value="volvo">Input</option>
+            <option value="saab">Output</option>
+          </select>
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+                <td>
+                    <input type="text" />
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.scss
new file mode 100644
index 000000000..91c611066
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.scss
@@ -0,0 +1,24 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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============================================
+*/
+
+table {
+    width: 100%;
+  }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.spec.ts
new file mode 100644
index 000000000..7bbd01103
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.spec.ts
@@ -0,0 +1,46 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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 { ResourceMappingComponent } from './resource-mapping.component';
+
+describe('ResourceMappingComponent', () => {
+  let component: ResourceMappingComponent;
+  let fixture: ComponentFixture<ResourceMappingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResourceMappingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResourceMappingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.ts
new file mode 100644
index 000000000..6edd26113
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.component.ts
@@ -0,0 +1,80 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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, Input } from '@angular/core';
+import { MatPaginator, MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { SearchDialog } from '../../../../common/shared/components/search-dialog/search-dialog.component';
+import { ResourceMappingService } from './resource-mapping.service';
+
+
+@Component({
+  selector: 'app-resource-mapping',
+  templateUrl: './resource-mapping.component.html',
+  styleUrls: ['./resource-mapping.component.scss']
+})
+export class ResourceMappingComponent {
+
+  @Input('paramData') paramData: any;
+  dialogRef: any;
+  animal: string;
+  name: string;
+  selectedParam: any;
+
+  resorceDictionaryName: string = '';
+
+  constructor(public dialog: MatDialog, private resourceMappingService: ResourceMappingService) {
+  }
+
+  openDialog(paramValue): void {
+    const dialogRef = this.dialog.open(SearchDialog, {
+      width: '250px',
+      data: { name: paramValue, animal: this.animal }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      this.animal = result;
+    });
+  }
+
+  getResourceDictionaryByName(param) {
+    let popup;
+    this.selectedParam = param;
+    this.resourceMappingService.getResourceDictionaryByName(this.resorceDictionaryName)
+      .subscribe(dictionaryObj => {
+        popup = this.dialog.open(SearchDialog, {
+          width: '250px',
+          data: { name: dictionaryObj, animal: this.animal }
+        })
+      },
+        error => {
+          console.log(error);
+        })
+        popup.afterClosed().subscribe(result=>{
+          this.paramData.resourceAccumulatorResolvedData.forEach(element => {
+            if(element.id == this.selectedParam) {
+              // element.
+            }
+          });
+        });
+  }
+
+}
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.service.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.service.ts
new file mode 100644
index 000000000..a79b33b04
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/resource-mapping/resource-mapping.service.ts
@@ -0,0 +1,85 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software 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 { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, observable } from 'rxjs';
+import { ApiService } from '../../../../common/core/services/api.service';
+
+@Injectable()
+export class ResourceMappingService {
+  // blueprintUrl = '../../constants/blueprint.json';
+
+  constructor(private api: ApiService) {
+  }
+
+  getResourceDictionaryByName(name) {
+    //   return this.api.get('');
+
+      return new Observable((observer) => {
+    
+        // observable execution
+        observer.next({"name": "sample-input-source",
+        "dataType": "string",
+        "entrySchema": null,
+        "definition": {
+        "tags": "sample-input-source",
+        "name": "sample-input-source",
+        "property": {
+        "description": "name of the ",
+        "required": null,
+        "type": "string",
+        "status": null,
+        "constraints": null,
+        "value": null,
+        "default": null,
+        "entry_schema": null
+        },
+        "updated-by": "brindasanth@onap.com",
+        "sources": {
+        "input": {
+        "description": null,
+        "type": "source-input",
+        "metadata": null,
+        "directives": null,
+        "properties": {
+        "key": "input-source"
+        },
+        "attributes": null,
+        "capabilities": null,
+        "requirements": null,
+        "interfaces": null,
+        "artifacts": null,
+        "copy": null,
+        "node_filter": null
+        }
+        }
+        },
+        "description": "name of the ",
+        "tags": "sample-input-source",
+        "creationDate": "2019-04-03T10:36:31.603Z",
+        "updatedBy": "brindasanth@onap.com"})
+        observer.complete()
+    });
+  }
+
+}
\ No newline at end of file