diff options
Diffstat (limited to 'cds-ui/client')
17 files changed, 809 insertions, 87 deletions
diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json index 04dd30861..2e19d29fe 100644 --- a/cds-ui/client/package.json +++ b/cds-ui/client/package.json @@ -31,6 +31,7 @@ "ang-jsoneditor": "1.6.1", "core-js": "^2.5.4", "d3": "^5.9.1", + "bootstrap": "^4.3.1", "file-saver": "^2.0.1", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", 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 |