diff options
20 files changed, 1058 insertions, 177 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..398da3722 --- /dev/null +++ b/.gitignore @@ -0,0 +1,82 @@ +# Node.js +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ +dist/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ diff --git a/.gitreview b/.gitreview new file mode 100644 index 000000000..70f56652a --- /dev/null +++ b/.gitreview @@ -0,0 +1,4 @@ +[gerrit] +host=gerrit.onap.org +port=29418 +project=ccsdk/cds.git diff --git a/TagVersion.groovy b/TagVersion.groovy new file mode 100644 index 000000000..68a8b7806 --- /dev/null +++ b/TagVersion.groovy @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CCSDK + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file 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============================================ + * =================================================================== + * + */ + +package org.onap.ccsdk.distribution + + +def versionArray; +if ( project.properties['ccsdk.project.version'] != null ) { + versionArray = project.properties['ccsdk.project.version'].split('\\.'); +} + +if ( project.properties['ccsdk.project.version'].endsWith("-SNAPSHOT") ) { + patchArray = versionArray[2].split('-'); + project.properties['project.docker.latestminortag.version']=versionArray[0] + '.' + versionArray[1] + "-SNAPSHOT-latest"; + project.properties['project.docker.latestfulltag.version']=versionArray[0] + '.' + versionArray[1] + '.' + patchArray[0] + "-SNAPSHOT-latest"; + project.properties['project.docker.latesttagtimestamp.version']=versionArray[0] + '.' + versionArray[1] + '.' + patchArray[0] + "-SNAPSHOT-"+project.properties['ccsdk.build.timestamp']; +} else { + project.properties['project.docker.latestminortag.version']=versionArray[0] + '.' + versionArray[1] + "-STAGING-latest"; + project.properties['project.docker.latestfulltag.version']=versionArray[0] + '.' + versionArray[1] + '.' + versionArray[2] + "-STAGING-latest"; + project.properties['project.docker.latesttagtimestamp.version']=versionArray[0] + '.' + versionArray[1] + '.' + versionArray[2] + "-STAGING-"+project.properties['ccsdk.build.timestamp']; +} diff --git a/cds-ui/.dockerignore b/cds-ui/.dockerignore new file mode 100644 index 000000000..00137e31f --- /dev/null +++ b/cds-ui/.dockerignore @@ -0,0 +1,85 @@ +# editor config +.editorconfig + +# Node.js +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +client/node_modules/ +client/jspm_packages/ +client/dist/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ diff --git a/cds-ui/Dockerfile b/cds-ui/Dockerfile new file mode 100644 index 000000000..5bf65f428 --- /dev/null +++ b/cds-ui/Dockerfile @@ -0,0 +1,35 @@ +# Building client html and js files +FROM alpine:3.8 as builder + +RUN apk add --no-cache npm + +WORKDIR /opt/cds-ui/client/ + +COPY client/package.json /opt/cds-ui/client/ + +RUN npm install + +COPY client /opt/cds-ui/client/ + +RUN npm run build + + +# Building and creating server +FROM alpine:3.8 + +WORKDIR /opt/cds-ui/ + +RUN apk add --no-cache npm + +COPY server/package.json /opt/cds-ui/ + +RUN npm install + +COPY server /opt/cds-ui/ +COPY --from=builder /opt/cds-ui/server/public /opt/cds-ui/public + +RUN npm run build + +EXPOSE 3000 + +CMD [ "npm", "start" ] 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 @@ -1,4 +1,4 @@ -<!-- +<!-- ============LICENSE_START========================================== =================================================================== Copyright (C) 2018 IBM Intellectual Property. All rights reserved. @@ -21,23 +21,33 @@ limitations under the License. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> - + <parent> <groupId>org.onap.ccsdk.parent</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.2.1-SNAPSHOT</version> <relativePath/> </parent> - + <groupId>org.onap.ccsdk.cds</groupId> <artifactId>controller-design-studio</artifactId> <version>1.0.0-SNAPSHOT</version> <packaging>pom</packaging> - - + <name>controller-design-studio</name> - + <description>Creates Controller Design Studio UI Docker container</description> + + <properties> + <image.name>onap/ccsdk-cds-ui</image.name> + <ccsdk.project.version>${project.version}</ccsdk.project.version> + <ccsdk.distribution.version>${project.version}</ccsdk.distribution.version> + <ccsdk.build.timestamp>${maven.build.timestamp}</ccsdk.build.timestamp> + <maven.build.timestamp.format>yyyyMMdd'T'HHmmss'Z'</maven.build.timestamp.format> + <docker.verbose>true</docker.verbose> + </properties> + +<!-- <modules> <module>cds-ui/client</module> <module>cds-ui/server</module> @@ -48,8 +58,79 @@ limitations under the License. <npm.executable>npm</npm.executable> <onap.nexus.url>https://nexus.onap.org</onap.nexus.url> </properties> +--> + +<build> + <plugins> + <plugin> + <groupId>org.codehaus.groovy.maven</groupId> + <artifactId>gmaven-plugin</artifactId> + <executions> + <execution> + <phase>validate</phase> + <goals> + <goal>execute</goal> + </goals> + <configuration> + <source>${basedir}/TagVersion.groovy</source> + </configuration> + </execution> + </executions> + </plugin> + </plugins> + </build> + <profiles> + <profile> + <id>docker</id> + <build> + <plugins> + <plugin> + <groupId>io.fabric8</groupId> + <artifactId>docker-maven-plugin</artifactId> + <version>0.28.0</version> + <inherited>false</inherited> + <configuration> + <images> + <image> + <name>${image.name}</name> + <build> + <cleanup>try</cleanup> + <dockerFileDir>${basedir}/cds-ui</dockerFileDir> + <tags> + <tag>${project.docker.latestminortag.version}</tag> + <tag>${project.docker.latestfulltag.version}</tag> + <tag>${project.docker.latesttagtimestamp.version}</tag> + </tags> + </build> + </image> + </images> + </configuration> + <executions> + <execution> + <id>generate-images</id> + <phase>package</phase> + <goals> + <goal>build</goal> + </goals> + </execution> + <execution> + <id>push-images</id> + <phase>deploy</phase> + <goals> + <goal>build</goal> + <goal>push</goal> + </goals> + </execution> + </executions> + </plugin> + </plugins> + </build> + </profile> + </profiles> + <organization> + <name>ONAP</name> + </organization> - -</project>
\ No newline at end of file +</project> |