diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/modify-template')
14 files changed, 1225 insertions, 0 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html new file mode 100644 index 000000000..3ab8f2414 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html @@ -0,0 +1,139 @@ +<!-- +============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 class="designerTmp"> + <div class="outerDiv divone"> + <mat-accordion> + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Node types + </mat-panel-title> + </mat-expansion-panel-header> + <div class="flex-container"> + <div class="item-box" *ngFor="let item of todo" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Policy + </mat-panel-title> + </mat-expansion-panel-header> + <div class="flex-container"> + <div class="item-box">Policy 1</div> + <div class="item-box">Policy 1</div> + <div class="item-box">Policy 1</div> + </div> + </mat-expansion-panel> + </mat-accordion> + </div> + <div class="outerDiv divtwo"> + <svg id="svgArea" width="1000px" height="100%" style="background-color:white"> + </svg> + </div> + <div id="overlay" class="outerDiv divThree"> + <mat-accordion style="width: 100%"> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Type + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box">vnf-netconf-device</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Properties + </mat-panel-title> + </mat-expansion-panel-header> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Interface + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Interface + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Artifacts + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Inputs + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Capabilities + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + + + </mat-accordion> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss new file mode 100644 index 000000000..4af107276 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.scss @@ -0,0 +1,72 @@ +/* +============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============================================ +*/ + +.outerDiv { + display: flex; + // align-items: center; + // justify-content: center; + margin: 1px; + padding: 16px; + border-radius: 8px; + } + + .divone { + height: 100%; + width: 18%; + background-color: #D7D1D1; + } +.divtwo { + height: 100%; + width: 100%; + background-color: #D7D1D1; +} +.divThree{ + width: 30%; + height: 100%; + background-color: #D7D1D1; +} + +.flex-container { + display: flex; + flex-wrap: wrap; +} + +.flex-container > div { + background-color: #f1f1f1; + width: 53px; + margin: 2px; + text-align: center; + line-height: 53px; + font-size: 13px; +} +.cnv +{ + background-image: url('http://i.imgur.com/M3PFd.png'); + background-position: 39px 32px; + background-repeat: repeat; + width: 100% +} +.designerTmp { + display: flex; + flex-direction: row; + height: 490px; + width: 100% +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.spec.ts new file mode 100644 index 000000000..41d57928a --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.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 { DesignerComponent } from './designer.component'; + +describe('DesignerComponent', () => { + let component: DesignerComponent; + let fixture: ComponentFixture<DesignerComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DesignerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DesignerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts new file mode 100644 index 000000000..b8f88d90c --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts @@ -0,0 +1,246 @@ +/* +============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, ElementRef, Output, EventEmitter } from '@angular/core'; +import * as d3 from 'd3'; +import { text } from 'd3'; + +@Component({ + selector: 'app-designer', + templateUrl: './designer.component.html', + styleUrls: ['./designer.component.scss'] +}) +export class DesignerComponent implements OnInit { + @Output() onNodeSelect = new EventEmitter(); + @ViewChild('svgArea') graphContainer: ElementRef; + dataForsimulation; + svg; + svgWidth; + svgHeight; + + + simulation; + + constructor() { + this.dataForsimulation = {"nodes" :[], + "links": [] + } + + + d3.json("../../../../../assets/activation-blueprint.json") + .then((data)=>{ + console.log(data); + this.buildD3DataNodes(data); + //this.buildD3DataLinks(data); + this.drawNode(); + }); + } + + ngOnInit() { + } + + ngAfterContentInit() { + + } + + drawNode() { + this.svg = d3.select('#svgArea') + .style('back-ground-color', 'white'); + + this.svgWidth = this.svg._groups[0][0].width.baseVal.value; + this.svgHeight = this.svg._groups[0][0].height.baseVal.value; + + console.log('width', this.svgWidth); + + let xbyMath; + let ybyMath; + let X= 10; + let Y=10; + + let transformString = "translate(" + X + "," + Y + ")"; + this.dataForsimulation.nodes.forEach((d, i)=> { + let id= 'g'+i; + + // xbyMath = Math.random() * ( this.svgWidth - 50 - 105 ) + ( 105/2 + 10 ); + // ybyMath = Math.random() * ( this.svgWidth - 20 - 100 ) + ( 100/2 + 10 ); + + xbyMath = Math.floor(Math.random() * ((this.svgWidth-110) - 100 + 1)) + 100; + ybyMath = Math.floor(Math.random() * ((this.svgHeight-110) - 100 + 1)) + 100; + + transformString = "translate(" + xbyMath + "," + ybyMath + ")"; + + let gEleId = 'g'+i; + let nodeTemprectId = gEleId+name + let requirement = gEleId+name+'requirement'; + this.svg.append('g') + .attr('id', gEleId); + + let firstg = d3.select('#g'+i) + .attr('transform', transformString); + + firstg.append('rect') + .attr('id', d.name) + .attr("x", 0) + .attr("y", 0) + .attr("rx", 20) + .attr("ry", 20) + .attr('width', 100) + .attr('height', 100) + .attr('fill', 'white') + .attr('stroke', 'black') + .attr('opacity', 0.6) + .on('mouseover', () => this.handleMouseOver()); + + d.x = xbyMath; + d.y = ybyMath; + + firstg.append('circle') + .attr('cx', 97) + .attr('cy', 20) + .attr('r', 5) + .attr('fill', 'orange') + + if(d.requirementsArray) { + d.requirementsArray.forEach(requirement =>{ + firstg.append('circle') + .attr('id', d.name+requirement.name) + .attr('cx', 97) + .attr('cy', 60) + .attr('r', 5) + .attr('fill', 'blue') + requirement.x = xbyMath + 95; + requirement.y = ybyMath + 60; + }); + } + + if(d.capabilitiesArray) { + d.capabilitiesArray.forEach(capability =>{ + firstg.append('circle') + .attr('id', d.name+capability.name) + .attr('cx', 97) + .attr('cy', 40) + .attr('r', 5) + .attr('fill', 'green'); + capability.x = xbyMath + 97; + capability.y = ybyMath + 40; + }); + } + + + firstg.append('text') + .attr('x', 0) + .attr('y', 115) + .text(d.name); + + // X = X +120; + // Y = 10; + }); + this.buildD3DataLinks(); + } + + buildD3DataNodes(data) { + let d3data; + d3data = data.topology_template.node_templates; + console.log('d3data:', d3data); + let finalData = []; + for (var property1 in d3data) { + d3data[property1].name = property1; + this.dataForsimulation.nodes.push(d3data[property1]); + finalData.push(d3data[property1]); + } + + this.dataForsimulation.nodes.forEach(node => { + for( var nodeProperty in node) { + if(nodeProperty == 'requirements' || nodeProperty == 'capabilities') { + let arrayName = nodeProperty + 'Array'; + node[arrayName] = []; + for(var reqProperty in node[nodeProperty]) { + node[nodeProperty][reqProperty].name = reqProperty; + node[arrayName].push(node[nodeProperty][reqProperty]) + } + + console.log('node array:', + node[arrayName]); + } + } + }); + console.log( this.dataForsimulation); + + + } + + buildD3DataLinks() { + this.dataForsimulation.nodes.forEach((node) => { + if(node.requirementsArray && node.requirementsArray.length > 0) { + node.requirementsArray.forEach(requirement => { + let linkObject = {}; + linkObject['sourceName'] = node.name + requirement.name; + linkObject['sourceid'] = node.name + requirement.name; + linkObject['sourceX'] = requirement.x; + linkObject['sourceY'] = requirement.y; + linkObject['targetNode'] = requirement.node; + linkObject['targetCapabilility'] = requirement.capability; + linkObject['ele'] = d3.select('#'+ linkObject['sourceid']); + this.dataForsimulation.links.push(linkObject); + }); + } + }); + + this.capabilityTargets(); + } + + capabilityTargets() { + this.dataForsimulation.links.forEach(link=>{ + this.dataForsimulation.nodes.forEach(node=>{ + if(node.name == link.targetNode && node.capabilitiesArray) { + node.capabilitiesArray.forEach(capability=>{ + if(capability.name == link.targetCapabilility) { + link['targetX'] = capability.x; + link['targetY'] = capability.y; + } + }) + } + }); + }); + + this.drawlink(); + } + + drawlink() { + this.dataForsimulation.links.forEach(link=>{ + this.svg.append('line') + .attr('x1', link.sourceX) + .attr('y1', link.sourceY) + .attr('x2', link.targetX) + .attr('y2', link.targetY) + .attr('stroke','gray') + .attr('stroke-width', 2); + }); + } + + handleMouseOver() { + console.log('mouse over'); + } + + trigerNodeSelectEvent(d) { + this.onNodeSelect.emit(d); +} + +} 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 new file mode 100644 index 000000000..308f9cc1f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html @@ -0,0 +1,42 @@ +<!-- +============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 class="container"> + <div class="fileViewContainer"> + <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" style="background-color: #ebebeb"> + <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectFileToView(node);activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }"> + <button mat-icon-button disabled></button> + <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button> + </mat-tree-node> + <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> + <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name"> + <mat-icon class="mat-icon-rtl-mirror"> + {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} + </mat-icon> + </button> + <button mat-icon-button>{{node.name}}</button> + </mat-tree-node> + </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> + </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 new file mode 100644 index 000000000..2f16af7a5 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss @@ -0,0 +1,65 @@ +/* +============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============================================ +*/ + +.container { + display: flex; + flex-direction: row; + margin-top: 8px; + .fileViewContainer { + width: 20%; + margin: 2px; + height: 490px !important; + overflow-x: scroll; + overflow-y: scroll; + background-color: #ebebeb; + } + .editorConatiner { + width: 80%; + background-color: gainsboro; + height: 490px !important; + } +} + +.aceEditor { + overflow: hidden; + height: 100% !important; + background-color: white !important; + border: 1px solid #3f51b5; + // border-left: 5px solid #3f51b5; +} +.savebtn { + color: white; + background-color: #3f51b5; + position: absolute; + bottom: 5px; +} +.save-icon{ + position: absolute; + left: 59em; + color: #3f51b5; + font-size: 24px; + cursor: pointer; + z-index: 1; +} + +.background-highlight { + background-color: whitesmoke !important; + }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.spec.ts new file mode 100644 index 000000000..64dcd1193 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.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 { EditorComponent } from './editor.component'; + +describe('EditorComponent', () => { + let component: EditorComponent; + let fixture: ComponentFixture<EditorComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditorComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..e48177d0a --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts @@ -0,0 +1,242 @@ +/* +============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 } from '@angular/core'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import "ace-builds/webpack-resolver"; +import 'brace'; +import 'brace/ext/language_tools'; +import 'ace-builds/src-min-noconflict/snippets/html'; +import * as JSZip from 'jszip'; +import { saveAs } from 'file-saver'; + +import { IAppState } from '../../../../common/core/store/state/app.state'; +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' + + +interface Node { + name: string; + children?: Node[]; + data?: any +} + +const TREE_DATA: Node[] = [ + { + name: 'Definitions', + children: [ + { name: 'activation-blueprint.json' }, + { name: 'artifacts_types.json' }, + { name: 'data_types.json' }, + ] + } +]; + +/** Flat node with expandable and level information */ +interface ExampleFlatNode { + expandable: boolean; + name: string; + level: number; +} + + +@Component({ + selector: 'app-editor', + templateUrl: './editor.component.html', + styleUrls: ['./editor.component.scss'] +}) +export class EditorComponent implements OnInit { + + @ViewChild('editor') editor; + blueprintdata: IBlueprint; + blueprint: IBlueprint; + bpState: Observable<IBlueprintState>; + text: string; + filesTree: any = []; + filesData: any = []; + selectedFile: string; + zipFolder: any; + blueprintName: string; + fileExtension: string; + mode: string; + private zipFile: JSZip = new JSZip(); + activeNode: any; + + private transformer = (node: Node, level: number) => { + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + }; + } + + treeControl = new FlatTreeControl<ExampleFlatNode>( + node => node.level, node => node.expandable); + + treeFlattener = new MatTreeFlattener( + this.transformer, node => node.level, node => node.expandable, node => node.children); + + dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); + + constructor(private store: Store<IAppState>) { + this.dataSource.data = TREE_DATA; + this.bpState = this.store.select('blueprint'); + // this.dataSource.data = TREE_DATA; + } + + hasChild = (_: number, node: ExampleFlatNode) => node.expandable; + + ngOnInit() { + this.editorContent(); + this.dataSource.data = this.filesTree; + } + + fileClicked(file) { + console.log('selected file:' + file); + } + editorContent() { + this.editor.setTheme("eclipse"); + this.editor.getEditor().setOptions({ + // enableBasicAutocompletion: true, + fontSize: "100%", + printMargin: false, + }); + this.editor.getEditor().commands.addCommand({ + name: "showOtherCompletions", + bindKey: "Ctrl-.", + exec: function (editor) { + + } + }) + this.bpState.subscribe( + blueprintdata => { + var blueprintState: IBlueprintState = { blueprint: blueprintdata.blueprint, isLoadSuccess: blueprintdata.isLoadSuccess, isSaveSuccess: blueprintdata.isSaveSuccess, isUpdateSuccess: blueprintdata.isUpdateSuccess }; + this.blueprintdata = blueprintState.blueprint; + this.filesTree = blueprintdata.files; + this.filesData = blueprintdata.filesData; + this.dataSource.data = this.filesTree; + this.blueprintName = blueprintdata.name; + let blueprint = []; + for (let key in this.blueprintdata) { + if (this.blueprintdata.hasOwnProperty(key)) { + blueprint.push(this.blueprintdata[key]); + } + } + // this.text = JSON.stringify(this.blueprintdata, null, '\t'); + // this.editor.getEditor().getSession().setMode("ace/mode/json"); + this.editor.getEditor().getSession().setTabSize(2); + this.editor.getEditor().getSession().setUseWrapMode(true); + this.setEditorMode(); + }) + } + + updateBlueprint() { + console.log(this.blueprint); + this.filesData.forEach(fileNode => { + if (fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) { + fileNode.data = this.text; + } else if (fileNode.name.includes(this.selectedFile.trim())) { + fileNode.data = this.text; + } + }); + + if (this.selectedFile == this.blueprintName.trim()) { + this.blueprint = JSON.parse(this.text); + } else { + this.blueprint = this.blueprintdata; + } + + let blueprintState = { + blueprint: this.blueprint, + name: this.blueprintName, + files: this.filesTree, + filesData: this.filesData + } + this.store.dispatch(new SetBlueprintState(blueprintState)); + // console.log(this.text); + } + + selectFileToView(file) { + this.selectedFile = file.name; + this.filesData.forEach((fileNode) => { + if (fileNode.name.includes(file.name)) { + this.text = fileNode.data; + } + }) + this.fileExtension = this.selectedFile.substr(this.selectedFile.lastIndexOf('.') + 1); + // console.log(this.fileExtension); + this.setEditorMode(); + } + + SaveToBackend() { + this.zipFile.generateAsync({ type: "blob" }) + .then(blob => { + + }); + } + + deploy() { + // to do + } + + create() { + this.filesData.forEach((path) => { + this.zipFile.file(path.name, path.data); + }); + } + + download() { + this.create(); + var zipFilename = "baseconfiguration.zip"; + this.zipFile.generateAsync({ type: "blob" }) + .then(blob => { + saveAs(blob, zipFilename); + }); + } + setEditorMode() { + switch (this.fileExtension) { + case "xml": + this.mode = 'xml'; + break; + case "py": + this.mode = 'python'; + break; + case "kts": + this.mode = 'kotlin'; + break; + case "txt": + this.mode = 'text'; + break; + case "meta": + this.mode = 'text'; + break; + case "vtl": + this.mode = 'velocity'; + break; + default: + this.mode = 'json'; + } + } +} diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template-routing.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template-routing.module.ts new file mode 100644 index 000000000..d1d140f33 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template-routing.module.ts @@ -0,0 +1,38 @@ +/* +============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 { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ModifyTemplateComponent } from './modify-template.component'; + + +const routes: Routes = [ + { + path: '', + component: ModifyTemplateComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ModifyTemplateRoutingModule { } 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 new file mode 100644 index 000000000..a77be5ba0 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html @@ -0,0 +1,47 @@ +<!-- +============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============================================ +--> + +<div class="modifyTemp"> + <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> + </div> + <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 [disabled]="!isEnriched" [ngClass]="{ 'mat-button-active': isEnriched, 'mat-button-disablled': !isEnriched}" 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" [ngClass]="{ 'btn-active': isEnriched, 'btn-disablled': !isEnriched}" class="btn-active">Publish</button> + <button class="btn-active">Save</button> + <button class="btn-active">Enrich</button> + + </div> + </div> + </div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss new file mode 100644 index 000000000..609d6faf0 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss @@ -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============================================ +*/ + + +.modifyTemp { + display: flex; + flex-direction: row; + height: 524px; + width: 100% +} + +.enrich-btn { + cursor: pointer; + position: absolute; + top: 3.6em; + right: 10em; + padding: 6px; + color: white; + background-color:#3f51b5; + margin-right: 2em; + border-radius: 2em; + z-index: 1; +} + +.toggle-view-btn { + cursor: pointer; + position: absolute; + top: 3.6em; + right: 3em; + padding: 6px; + color: white; + background-color:#3f51b5; + border-radius: 2em; + z-index: 1; +} + +.editor-selector { + width: 100%; +} + +.mat-button-active{ + margin: 0.5em; + background-color: #3f51b5 !important; + color: white !important; + border-radius: 4px; + border: none; + line-height: none !important; + // padding: 0.5em; + min-width: 6em; + cursor: pointer; +} + +.mat-button-disablled { + background-color: #c5cae8 !important; + border-radius: 4px; + color: darkgray !important; + line-height: none !important; + margin: 0.5em; + // padding: 0.5em; + min-width: 6em; + cursor: initial; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.spec.ts new file mode 100644 index 000000000..a2bd046ff --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.spec.ts @@ -0,0 +1,46 @@ +/* +============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 { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModifyTemplateComponent } from './modify-template.component'; + +describe('ModifyTemplateComponent', () => { + let component: ModifyTemplateComponent; + let fixture: ComponentFixture<ModifyTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ModifyTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ModifyTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..e39ce019c --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts @@ -0,0 +1,65 @@ +/* +============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 { Component, OnInit, ViewChild } from '@angular/core'; + +import { EditorComponent } from './editor/editor.component'; + +@Component({ + selector: 'app-modify-template', + templateUrl: './modify-template.component.html', + styleUrls: ['./modify-template.component.scss'] +}) +export class ModifyTemplateComponent implements OnInit { + + isEnriched: boolean = false; + designerMode: boolean = false; + editorMode: boolean = true; + viewText: string = "Designer View"; + + @ViewChild(EditorComponent) editorComp: EditorComponent; + + constructor() { } + + ngOnInit() { + } + + viewNodeDetails(nodeTemplate) { + console.log(nodeTemplate); + } + + changeView() { + if(this.viewText == 'Editor View') { + this.editorMode = true; + this.designerMode = false; + this.viewText = 'Designer View' + } else { + this.editorMode = false; + this.designerMode = true; + this.viewText = 'Editor View' + } + } + + 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 new file mode 100644 index 000000000..3aef2a7aa --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts @@ -0,0 +1,51 @@ +/* +============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 { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CdkTableModule } from '@angular/cdk/table'; + +import { ModifyTemplateComponent } from './modify-template.component'; +import { ModifyTemplateRoutingModule } from './modify-template-routing.module'; +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'; + +@NgModule({ + declarations: [ + ModifyTemplateComponent, + DesignerComponent, + EditorComponent + ], + exports: [ + ModifyTemplateComponent, + DesignerComponent, + AceEditorModule + ], + imports: [ + CommonModule, + CdkTableModule, + AppMaterialModule, + ModifyTemplateRoutingModule, + AceEditorModule + ] +}) +export class ModifyTemplateModule { } |