diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules')
10 files changed, 381 insertions, 148 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint-routing.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/blueprint-routing.module.ts index 26ffa1236..d0ce0c68d 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint-routing.module.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint-routing.module.ts @@ -27,29 +27,7 @@ import { BlueprintComponent } from './blueprint.component'; const routes: Routes = [ { path: '', - component: BlueprintComponent, - children: [ - { - path: '', - loadChildren: './select-template/select-template.module#SelectTemplateModule' - }, - { - path: 'selectTemplate', - loadChildren: './select-template/select-template.module#SelectTemplateModule' - }, - { - path: 'modifyTemplate', - loadChildren: './modify-template/modify-template.module#ModifyTemplateModule' - }, - { - path: 'testTemplate', - loadChildren: './test-template/test-template.module#TestTemplateModule' - }, - { - path: 'deployTemplate', - loadChildren: './deploy-template/deploy-template.module#DeployTemplateModule' - } - ] + component: BlueprintComponent } ]; diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html index 31c7a6ab7..9a3ba1edd 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html @@ -40,7 +40,7 @@ limitations under the License. <app-test-template></app-test-template> </mat-step> <mat-step [stepControl]="thirdFormGroup"> - <ng-template matStepLabel>Test</ng-template> + <ng-template matStepLabel>Deploy</ng-template> <app-deploy-template></app-deploy-template> </mat-step> </mat-horizontal-stepper> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss index 1c0c05a54..21c06784c 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss @@ -21,4 +21,12 @@ limitations under the License. .mat-card { padding: 0px !important; +} + +.matStepNextBtn { + color: white; + background: gray; + margin-top: 10px; + position: absolute; + margin-bottom: 5px; }
\ No newline at end of file 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 index 74c0fae12..b1c894099 100644 --- 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 @@ -18,89 +18,5 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> - - - -<!-- <div style="display: flex; flex-direction: row; height: 100%;width: 100%"> --> - <div style="display: flex; flex-direction: row; height: 100%;width: 100%"> - <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> - Node 1 - </div> - <div> - Node 2 - </div> - <div> - Node 3 - </div> - <div> - Node 4 - </div> - <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> - Policy - </mat-panel-title> - </mat-expansion-panel-header> - <div class="flex-container"> - <div> - Node 1 - </div> - <div> - Node 2 - </div> - <div> - Node 3 - </div> - <div> - Node 4 - </div> - <div> - Node 3 - </div> - - </div> - </mat-expansion-panel> - </mat-accordion> - </div> - <div class="outerDiv divtwo" (click)="on = !on"> - <canvas class="cnv" height="500"></canvas> - </div> - <div *ngIf="on" id="overlay" class="outerDiv divThree"> - <mat-accordion style="width: 100%"> - <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> - </mat-expansion-panel> - </mat-accordion> - </div> - </div> - - - - <!-- </div> --> -
\ No newline at end of file +<svg id="svgArea" width="1000px" height="100%" style="background-color:white"> +</svg>
\ No newline at end of file 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 index 55c7dfbd6..5e86a7eb7 100644 --- 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 @@ -19,7 +19,9 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; +import * as d3 from 'd3'; +import { text } from 'd3'; @Component({ selector: 'app-designer', @@ -28,9 +30,219 @@ import { Component, OnInit } from '@angular/core'; }) export class DesignerComponent implements OnInit { - constructor() { } + @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('rect') + .attr('x', 95) + .attr('y', 20) + // .attr('r', 10) + .attr('width', 10) + .attr('height', 10) + .attr('fill', 'orange') + + if(d.requirementsArray) { + d.requirementsArray.forEach(requirement =>{ + firstg.append('rect') + .attr('id', d.name+requirement.name) + .attr('x', 95) + .attr('y', 60) + // .attr('r', 10) + .attr('width', 10) + .attr('height', 10) + .attr('fill', 'blue') + requirement.x = xbyMath + 95; + requirement.y = ybyMath + 60; + }); + } + + if(d.capabilitiesArray) { + d.capabilitiesArray.forEach(capability =>{ + firstg.append('rect') + .attr('id', d.name+capability.name) + .attr('x', 95) + .attr('y', 40) + // .attr('r', 10) + .attr('width', 10) + .attr('height', 10) + .attr('fill', 'green'); + capability.x = xbyMath + 95; + capability.y = ybyMath + 60; + }); + } + + + 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', 5); + }); + } + + handleMouseOver() { + console.log('mouse over'); + } + } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html index bcd78323e..a9c604224 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html @@ -19,30 +19,27 @@ limitations under the License. ============LICENSE_END============================================ --> <mat-vertical-stepper linear> - <mat-step [stepControl]="step1FormGroup"> - <ng-template matStepLabel>Choose CBA Template file</ng-template> - <app-template-options></app-template-options> - <br> - <div> - <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> - </div> - </mat-step> + <mat-step [stepControl]="step1FormGroup"> + <ng-template matStepLabel>Choose CBA Template file</ng-template> + <app-template-options></app-template-options> + <br> + <div> + <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> + </div> + </mat-step> - <mat-step [stepControl]="step2FormGroup"> - <ng-template matStepLabel>Browse CBA Template file</ng-template> - <app-search-template (change)="fileChange(fileupload.files)"></app-search-template> - <br> - <div> - <button mat-button matStepperNext class="matStepNextBtn">Upload</button> - </div> - </mat-step> - <mat-step [stepControl]="step3FormGroup"> - <ng-template matStepLabel>Enter Metadata details</ng-template> - <app-metadata></app-metadata> - <br> - </mat-step> + <mat-step [stepControl]="step2FormGroup"> + <ng-template matStepLabel>Browse CBA Template file</ng-template> + <app-search-template (cbaFile)="fileChange($event)"></app-search-template> + <br> + <div> + <button mat-button matStepperNext class="matStepNextBtn">Upload</button> + </div> + </mat-step> + <mat-step [stepControl]="step3FormGroup"> + <ng-template matStepLabel>Enter Metadata details</ng-template> + <app-metadata (metadataform)="metaDataDetail($event)"></app-metadata> + <br> + </mat-step> </mat-vertical-stepper> -<button mat-button matStepperNext class="matStepNextBtn">Next</button> -<!-- <router-outlet></router-outlet> --> - -<!-- </form> -->
\ No newline at end of file +<button mat-button matStepperNext class="matStepNextBtn" (click)="saveBlueprintModel()">Next</button>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss index 47ae92a20..c0e3dfb99 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss @@ -19,10 +19,19 @@ limitations under the License. ============LICENSE_END============================================ */ -.matStepNextBtn{ - color:white; - background:gray; - margin-top: 10px; +.matStepNextBtn { + color: white; + background: gray; + margin-top: 10px; position: absolute; - -}
\ No newline at end of file + margin-bottom: 5px; +} + +.matStep { + margin-top: 15px !important; + margin-bottom: 20px !important; +} + +// .mat-vertical-content { +// margin: 10px !important; +// }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html index 443d7a31b..1fca8d1b7 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html @@ -18,7 +18,35 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> -<p> - test-template works! -</p> -<router-outlet></router-outlet> +<div style="display: flex;flex-direction: row"> + <div style="width: 20%;margin: 2px"> + <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> + <!-- This is the tree node template for leaf nodes --> + <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> + <!-- use a disabled button to provide padding for tree leaf --> + <button mat-icon-button disabled></button> + <span (click)="fileClicked(node.name)">{{node.name}}</span> + </mat-tree-node> + <!-- This is the tree node template for expandable nodes --> + <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> + <span (click)="fileClicked(node.name)">{{node.name}}</span> + </mat-tree-node> + </mat-tree> + </div> + <div style="width: 80%;background-color: gainsboro;height: 533px;"></div> +</div> + +<div> + <button style=" background-color: #3f51b5; + color: white; + border: 2px solid; + width: 8em; + height: 3em; + border-radius: 2em;">Test</button> +</div> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts index 4fce0ba91..2c87e8739 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts @@ -20,6 +20,65 @@ limitations under the License. */ import { Component, OnInit } from '@angular/core'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; + + + +interface FoodNode { + name: string; + children?: FoodNode[]; +} + +const TREE_DATA: FoodNode[] = [ + { + name: 'Definitions', + children: [ + {name: 'activation-blueprint.json'}, + {name: 'artifacts_types.json'}, + {name: 'data_types.json'}, + ] + }, + { + name: 'Scripts', + children: [ + { + name: 'kotlin', + children: [ + {name: 'ScriptComponent.cba.kts'}, + {name: 'ResourceAssignmentProcessor.cba.kts'}, + ] + } + ] + }, + { + name: 'Templates', + children: [ + { + name: 'baseconfig-template' + } + ] + }, + { + name: 'TOSCA-Metada', + children: [ + { + name: 'TOSCA.meta' + } + ] + }, +]; + +/** Flat node with expandable and level information */ +interface ExampleFlatNode { + expandable: boolean; + name: string; + level: number; +} + + + + @Component({ selector: 'app-test-template', @@ -28,9 +87,33 @@ import { Component, OnInit } from '@angular/core'; }) export class TestTemplateComponent implements OnInit { - constructor() { } + private transformer = (node: FoodNode, 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() { + this.dataSource.data = TREE_DATA; + } + + hasChild = (_: number, node: ExampleFlatNode) => node.expandable; ngOnInit() { } + fileClicked(file) { + console.log('selected file:' + file); + } + } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts index 09be58a56..677c6fedc 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts @@ -23,6 +23,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TestTemplateComponent } from './test-template.component'; import { TestTemplateRoutingModule } from './test-template-routing.module'; +import { AppMaterialModule } from '../../../common/modules/app-material.module'; @NgModule({ declarations: [ @@ -33,6 +34,7 @@ import { TestTemplateRoutingModule } from './test-template-routing.module'; ], imports: [ CommonModule, + AppMaterialModule, TestTemplateRoutingModule ] }) |