diff options
author | Ezhilarasi <ezhrajam@in.ibm.com> | 2019-04-06 00:21:57 +0530 |
---|---|---|
committer | Ezhilarasi <ezhrajam@in.ibm.com> | 2019-04-06 00:22:06 +0530 |
commit | 1b2d71d30ec8c92c50eabb2b163ec9cc9640d61a (patch) | |
tree | 582ae0edf612bc393d27fd38f8e25babac59001a /cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor | |
parent | 6e8706275241805e5fd9d2962c51a2c8f3ee3c62 (diff) |
CBA integration
Change-Id: I0505e32fe7680f1e2ee029f36d37e3ec84088789
Issue-ID: CCSDK-1068
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor')
3 files changed, 216 insertions, 35 deletions
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; + } + } } |