summaryrefslogtreecommitdiffstats
path: root/cds-ui/client
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/client')
-rw-r--r--cds-ui/client/package.json2
-rw-r--r--cds-ui/client/src/app/app.module.ts22
-rw-r--r--cds-ui/client/src/app/common/shared/components/home/home.component.ts2
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/blueprint-routing.module.ts24
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html2
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss8
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html88
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts216
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html47
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss21
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html36
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts85
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts2
-rw-r--r--cds-ui/client/src/assets/activation-blueprint.json336
14 files changed, 722 insertions, 169 deletions
diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json
index 4ae5b684c..158a822b8 100644
--- a/cds-ui/client/package.json
+++ b/cds-ui/client/package.json
@@ -27,7 +27,9 @@
"@ngrx/router-store": "^6.1.2",
"@ngrx/store": "^6.1.2",
"@ngrx/store-devtools": "^6.1.2",
+ "@types/d3": "^5.7.0",
"core-js": "^2.5.4",
+ "d3": "^5.9.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"material-design-icons": "^3.0.1",
diff --git a/cds-ui/client/src/app/app.module.ts b/cds-ui/client/src/app/app.module.ts
index 10532da87..e4cc4a15d 100644
--- a/cds-ui/client/src/app/app.module.ts
+++ b/cds-ui/client/src/app/app.module.ts
@@ -23,7 +23,6 @@ import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
-import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { HttpClientModule } from '@angular/common/http';
@@ -32,8 +31,7 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './common/shared/shared.module';
import { CoreModule } from './common/core/core.module';
-
-// import { BlueprintModule } from './feature-modules/blueprint/blueprint.module';
+import { AppMaterialModule } from './common/modules/app-material.module';
import { ResourceDefinitionModule } from './feature-modules/resource-definition/resource-definition.module';
@NgModule({
@@ -46,26 +44,10 @@ import { ResourceDefinitionModule } from './feature-modules/resource-definition/
AppRoutingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
- MatToolbarModule,
- MatButtonModule,
- MatSidenavModule,
- MatIconModule,
- MatListModule,
- MatGridListModule,
- MatCardModule,
- MatMenuModule,
- MatTableModule,
- MatPaginatorModule,
- MatSortModule,
- MatInputModule,
- MatSelectModule,
- MatRadioModule,
- MatFormFieldModule,
- MatStepperModule,
HttpClientModule,
+ AppMaterialModule,
SharedModule,
CoreModule,
- // BlueprintModule,
ResourceDefinitionModule
],
providers: [],
diff --git a/cds-ui/client/src/app/common/shared/components/home/home.component.ts b/cds-ui/client/src/app/common/shared/components/home/home.component.ts
index d70da85f6..d5ea7f6ce 100644
--- a/cds-ui/client/src/app/common/shared/components/home/home.component.ts
+++ b/cds-ui/client/src/app/common/shared/components/home/home.component.ts
@@ -28,7 +28,7 @@ import { Component, OnInit } from '@angular/core';
})
export class HomeComponent implements OnInit {
events: string[] = [];
- opened: boolean;
+ opened: boolean = true;
constructor() { }
ngOnInit() {
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
]
})
diff --git a/cds-ui/client/src/assets/activation-blueprint.json b/cds-ui/client/src/assets/activation-blueprint.json
new file mode 100644
index 000000000..822cc68b7
--- /dev/null
+++ b/cds-ui/client/src/assets/activation-blueprint.json
@@ -0,0 +1,336 @@
+{
+ "metadata": {
+ "template_author": "Brinda Santh Muthuramalingam",
+ "author-email": "brindasanth@in.ibm.com",
+ "user-groups": "ADMIN, OPERATION",
+ "template_name": "baseconfiguration",
+ "template_version": "1.0.0",
+ "template_tags": "brinda, tosca"
+ },
+ "imports": [
+ {
+ "file": "Definitions/data_types.json"
+ },
+ {
+ "file": "Definitions/relationship_types.json"
+ },
+ {
+ "file": "Definitions/artifact_types.json"
+ },
+ {
+ "file": "Definitions/node_types.json"
+ },
+ {
+ "file": "Definitions/policy_types.json"
+ }
+ ],
+ "topology_template": {
+ "inputs": {
+ "request-id": {
+ "required": true,
+ "type": "string"
+ },
+ "action-name": {
+ "required": true,
+ "type": "string"
+ },
+ "scope-type": {
+ "required": true,
+ "type": "string"
+ },
+ "hostname": {
+ "required": true,
+ "type": "string"
+ }
+ },
+ "node_templates": {
+ "resource-assignment-process": {
+ "type": "dg-generic",
+ "properties": {
+ "content": {
+ "get_artifact": [
+ "SELF",
+ "dg-resource-assignment-process"
+ ]
+ },
+ "dependency-node-templates": [
+ "resource-assignment"
+ ]
+ },
+ "artifacts": {
+ "dg-resource-assignment-process": {
+ "type": "artifact-directed-graph",
+ "file": "Plans/CONFIG_ResourceAssignment_1.0.0.xml"
+ }
+ }
+ },
+ "activate-process": {
+ "type": "dg-generic",
+ "properties": {
+ "content": {
+ "get_artifact": [
+ "SELF",
+ "dg-activate-process"
+ ]
+ },
+ "dependency-node-templates": [
+ "activate-jython"
+ ]
+ },
+ "artifacts": {
+ "dg-activate-process": {
+ "type": "artifact-directed-graph",
+ "file": "Plans/CONFIG_ActivateNetconf_1.0.0.xml"
+ }
+ }
+ },
+ "assign-activate-process": {
+ "type": "dg-generic",
+ "properties": {
+ "content": {
+ "get_artifact": [
+ "SELF",
+ "dg-assign-activate-process"
+ ]
+ },
+ "dependency-node-templates": [
+ "resource-assignment",
+ "activate-jython"
+ ]
+ },
+ "artifacts": {
+ "dg-assign-activate-process": {
+ "type": "artifact-directed-graph",
+ "file": "Plans/CONFIG_AssignActivateNetconf_1.0.0.xml"
+ }
+ }
+ },
+ "resource-assignment": {
+ "type": "component-resource-assignment",
+ "interfaces": {
+ "ResourceAssignmentComponent": {
+ "operations": {
+ "process": {
+ "inputs": {
+ "action-name": {
+ "get_input": "action-name"
+ },
+ "resource-type": "vnf-type",
+ "request-id": {
+ "get_input": "request-id"
+ },
+ "resource-id": {
+ "get_input": "hostname"
+ },
+ "artifact-prefix-names": [
+ "baseconfig"
+ ]
+ },
+ "outputs": {
+ "resource-assignment-params": {
+ "get_attribute": [
+ "SELF",
+ "assignment-params"
+ ]
+ },
+ "status": "success"
+ }
+ }
+ }
+ }
+ },
+ "artifacts": {
+ "baseconfig-template": {
+ "type": "artifact-template-velocity",
+ "file": "Templates/baseconfig-template.vtl"
+ },
+ "baseconfig-mapping": {
+ "type": "artifact-mapping-resource",
+ "file": "Definitions/baseconfig-mapping.json"
+ }
+ }
+ },
+ "resource-assignment-py": {
+ "type": "component-resource-assignment",
+ "interfaces": {
+ "ResourceAssignmentComponent": {
+ "operations": {
+ "process": {
+ "implementation": {
+ "primary": "component-script"
+ },
+ "inputs": {
+ "action-name": {
+ "get_input": "action-name"
+ }
+ },
+ "outputs": {
+ "resource-assignment-params": "",
+ "status": ""
+ }
+ }
+ }
+ }
+ },
+ "artifacts": {
+ "component-script": {
+ "type": "artifact-script-jython",
+ "file": "Scripts/python/SamplePythonComponentNode.py"
+ }
+ }
+ },
+ "activate-jython": {
+ "type": "component-jython-executor",
+ "interfaces": {
+ "JythonExecutorComponent": {
+ "operations": {
+ "process": {
+ "implementation": {
+ "primary": "component-script"
+ },
+ "inputs": {
+ "instance-dependencies": [
+ "json-parser-service",
+ "netconf-rpc-service"
+ ]
+ },
+ "outputs": {
+ "response-data": "",
+ "status": ""
+ }
+ }
+ }
+ }
+ },
+ "artifacts": {
+ "component-script": {
+ "type": "artifact-script-jython",
+ "file": "Scripts/python/SamplePythonComponentNode.py"
+ }
+ }
+ },
+ "activate-netconf": {
+ "type": "component-netconf-executor",
+ "interfaces": {
+ "NetconfExecutorComponent": {
+ "operations": {
+ "process": {
+ "implementation": {
+ "primary": "component-script"
+ },
+ "inputs": {
+ "instance-dependencies": [
+ "json-parser-service",
+ "netconf-rpc-service"
+ ]
+ },
+ "outputs": {
+ "response-data": "",
+ "status": ""
+ }
+ }
+ }
+ }
+ },
+ "requirements": {
+ "netconf-connection": {
+ "capability": "netconf",
+ "node": "sample-netconf-device",
+ "relationship": "tosca.relationships.ConnectsTo"
+ }
+ },
+ "artifacts": {
+ "component-script": {
+ "type": "artifact-script-jython",
+ "file": "Scripts/python/DefaultGetNetConfig.py"
+ }
+ }
+ },
+ "sample-netconf-device": {
+ "type": "vnf-netconf-device",
+ "capabilities": {
+ "netconf": {
+ "properties": {
+ "login-key": "sample-key",
+ "login-account": "sample-account",
+ "target-ip-address": "localhost",
+ "port-number": 830,
+ "connection-time-out": 30
+ }
+ }
+ }
+ }
+ },
+ "workflows": {
+ "resource-assignment": {
+ "inputs": {
+ "resource-assignment-properties": {
+ "required": true,
+ "type": "dt-resource-assignment-properties"
+ }
+ },
+ "steps": {
+ "call-resource-assignment": {
+ "description": "Resource Assignment Workflow",
+ "target": "resource-assignment-process",
+ "activities": [
+ {
+ "call_operation": "CONFIG.ResourceAssignment"
+ }
+ ]
+ }
+ }
+ },
+ "activate": {
+ "inputs": {
+ "request-id": {
+ "required": true,
+ "type": "string"
+ },
+ "action-name": {
+ "required": true,
+ "type": "string"
+ },
+ "scope-type": {
+ "required": true,
+ "type": "string"
+ },
+ "hostname": {
+ "required": true,
+ "type": "string"
+ }
+ },
+ "steps": {
+ "activate-process": {
+ "description": "Netconf Activation Workflow",
+ "target": "activate-process",
+ "activities": [
+ {
+ "call_operation": "CONFIG.ActivateProcess"
+ }
+ ]
+ }
+ }
+ },
+ "assign-activate": {
+ "inputs": {
+ "assign-activate-properties": {
+ "required": true,
+ "type": "dt-assign-activate-properties"
+ }
+ },
+ "steps": {
+ "activate-process": {
+ "description": "Resource Assign and Netconf Activation Workflow",
+ "target": "assign-activate-process",
+ "activities": [
+ {
+ "call_operation": "CONFIG.AssignActivateProcess"
+ }
+ ]
+ }
+ }
+ }
+ }
+ }
+} \ No newline at end of file