summaryrefslogtreecommitdiffstats
path: root/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor
diff options
context:
space:
mode:
authorEzhilarasi <ezhrajam@in.ibm.com>2019-04-06 00:21:57 +0530
committerEzhilarasi <ezhrajam@in.ibm.com>2019-04-06 00:22:06 +0530
commit1b2d71d30ec8c92c50eabb2b163ec9cc9640d61a (patch)
tree582ae0edf612bc393d27fd38f8e25babac59001a /cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor
parent6e8706275241805e5fd9d2962c51a2c8f3ee3c62 (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')
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html24
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss58
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts169
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;
+ }
+ }
}