diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint')
50 files changed, 3010 insertions, 0 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 new file mode 100644 index 000000000..d0ce0c68d --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint-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 { BlueprintComponent } from './blueprint.component'; + + +const routes: Routes = [ + { + path: '', + component: BlueprintComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class BlueprintRoutingModule { } 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 new file mode 100644 index 000000000..b38c75b21 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html @@ -0,0 +1,43 @@ +<!-- ============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============================================ --> + +<!-- <app-cbawizard [appName]="appName"></app-cbawizard> +<router-outlet></router-outlet> --> +<mat-card class="CBAform"> + <mat-card-content> + <mat-horizontal-stepper [linear]="isLinear" #stepper> + <mat-step [stepControl]="firstFormGroup"> + <ng-template matStepLabel>CBA Metadata</ng-template> + <app-select-template></app-select-template> + </mat-step> + <mat-step [stepControl]="secondFormGroup"> + <ng-template matStepLabel>Controller Blueprint Designer</ng-template> + <app-modify-template></app-modify-template> + </mat-step> + <!-- <mat-step [stepControl]="thirdFormGroup"> + <ng-template matStepLabel>Deploy</ng-template> + <app-deploy-template></app-deploy-template> + </mat-step> --> + <mat-step [stepControl]="thirdFormGroup"> + <ng-template matStepLabel>Test</ng-template> + <app-test-template></app-test-template> + </mat-step> + </mat-horizontal-stepper> + </mat-card-content> +</mat-card> 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 new file mode 100644 index 000000000..63e456549 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss @@ -0,0 +1,31 @@ +/* +============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============================================ +*/ + +.mat-card { + padding: 0px !important; +} + +.matStepNextBtn { + color: white; + background-color: #3f51b5; + margin-right: 2em; + border-radius: 2em; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.spec.ts new file mode 100644 index 000000000..74ae9b04b --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.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 { BlueprintComponent } from './blueprint.component'; + +describe('BlueprintComponent', () => { + let component: BlueprintComponent; + let fixture: ComponentFixture<BlueprintComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BlueprintComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BlueprintComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.ts new file mode 100644 index 000000000..4612499ac --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.ts @@ -0,0 +1,39 @@ +/* +============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 } from '@angular/core'; + +@Component({ + selector: 'app-blueprint', + templateUrl: './blueprint.component.html', + styleUrls: ['./blueprint.component.scss'] +}) +export class BlueprintComponent implements OnInit { + appName: String; + + constructor() { + this.appName="cba"; + } + + ngOnInit() { + } + +} diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.module.ts new file mode 100644 index 000000000..3a25e92f0 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.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 { BlueprintComponent } from './blueprint.component'; +import { BlueprintRoutingModule } from './blueprint-routing.module'; + +import { SharedModule } from '../../../app/common/shared/shared.module'; +import { SelectTemplateModule } from './select-template/select-template.module'; +import { ModifyTemplateModule } from './modify-template/modify-template.module'; +import { DeployTemplateModule } from './deploy-template/deploy-template.module'; +import { TestTemplateModule } from './test-template/test-template.module'; + +import { AppMaterialModule } from '../../../app/common/modules/app-material.module'; + +@NgModule({ + declarations: [ + BlueprintComponent + ], + imports: [ + CommonModule, + BlueprintRoutingModule, + SharedModule, + AppMaterialModule, + SelectTemplateModule, + ModifyTemplateModule, + DeployTemplateModule, + TestTemplateModule + ] +}) +export class BlueprintModule { } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template-routing.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template-routing.module.ts new file mode 100644 index 000000000..65a98a914 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template-routing.module.ts @@ -0,0 +1,36 @@ +/* +============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 { DeployTemplateComponent } from './deploy-template.component'; + +const routes: Routes = [ + { + path: '', + component: DeployTemplateComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class DeployTemplateRoutingModule { } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html new file mode 100644 index 000000000..739ef0479 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html @@ -0,0 +1,56 @@ +<!-- +============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 style="height: 556px;"> +<div style="height: 90%;overflow-y: scroll;border: 1px solid grey"> + <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="height: 10%"> + <button style="margin: 1em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em;">Deploy/Save</button> + <button style="margin: 1em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em;">Download</button> +</div> + +</div> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.scss new file mode 100644 index 000000000..22941b5fa --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.scss @@ -0,0 +1,20 @@ +/* +============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============================================ +*/
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.spec.ts new file mode 100644 index 000000000..c9be19d41 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.spec.ts @@ -0,0 +1,45 @@ +/* +============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 { DeployTemplateComponent } from './deploy-template.component'; + +describe('DeployTemplateComponent', () => { + let component: DeployTemplateComponent; + let fixture: ComponentFixture<DeployTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DeployTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DeployTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.ts new file mode 100644 index 000000000..ab636b905 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.ts @@ -0,0 +1,112 @@ +/* +============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 } 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-deploy-template', + templateUrl: './deploy-template.component.html', + styleUrls: ['./deploy-template.component.scss'] +}) +export class DeployTemplateComponent implements OnInit { + + 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/deploy-template/deploy-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.module.ts new file mode 100644 index 000000000..5d5a6000e --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.module.ts @@ -0,0 +1,40 @@ +/* +============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 { DeployTemplateComponent } from './deploy-template.component'; +import { DeployTemplateRoutingModule } from './deploy-template-routing.module'; +import { AppMaterialModule } from '../../../common/modules/app-material.module'; + +@NgModule({ + declarations: [ + DeployTemplateComponent + ], + exports: [ + DeployTemplateComponent + ], + imports: [ + CommonModule, + DeployTemplateRoutingModule, + AppMaterialModule + ] +}) +export class DeployTemplateModule { } 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 { } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.html new file mode 100644 index 000000000..cdfea2529 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.html @@ -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============================================ +--> + +<form [formGroup]="CBAMetadataForm" (ngSubmit)="UploadMetadata()"> + <div class="formDisplay"> + <mat-form-field class="form-field"> + <input matInput placeholder="Template Author" id="CBA_File_Name" formControlName="template_author"> + </mat-form-field> + <mat-form-field class="form-field"> + <input matInput placeholder="Author Email" id="author_email" formControlName="author_email"> + </mat-form-field> + <mat-form-field class="form-field"> + <input matInput placeholder="User Groups" id="user_groups" formControlName="user_groups"> + </mat-form-field> + </div> + <div class="formDisplay"> + <mat-form-field class="form-field"> + <input matInput placeholder="Template Name" id="template_name" formControlName="template_name"> + </mat-form-field> + <mat-form-field class="form-field"> + <input matInput placeholder="Template Version" id="template_version" formControlName="template_version"> + </mat-form-field> + <mat-form-field class="form-field"> + <input matInput placeholder="Template Tags" id="template_tags" formControlName="template_tags"> + </mat-form-field> + </div> + <button mat-button class="matBtn" type="submit" [disabled]="!CBAMetadataForm.valid">Save Metadata</button> +</form>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.scss new file mode 100644 index 000000000..1e49773ec --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.scss @@ -0,0 +1,40 @@ +/* +============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============================================ +*/ + +.form-field { + width: 50%; + margin: 10px; +} + +.formDisplay { + display: flex; + flex-direction: row; +} + +.matBtn { + color: white; + background:#3f51b5; + margin-top: 10px; + position: absolute; + border-radius: 4px; + min-width: 6em; + cursor: pointer; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.spec.ts new file mode 100644 index 000000000..a903ae0ad --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.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 { MetadataComponent } from './metadata.component'; + +describe('MetadataComponent', () => { + let component: MetadataComponent; + let fixture: ComponentFixture<MetadataComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MetadataComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MetadataComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts new file mode 100644 index 000000000..2327a5839 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts @@ -0,0 +1,88 @@ +/* +============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 } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; +import { A11yModule } from '@angular/cdk/a11y'; + +import { IAppState } from '../../../../common/core/store/state/app.state'; +import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import { IMetaData } from '../../../../common/core/store/models/metadata.model'; +import { LoadBlueprintSuccess } from 'src/app/common/core/store/actions/blueprint.action'; + +@Component({ + selector: 'app-metadata', + templateUrl: './metadata.component.html', + styleUrls: ['./metadata.component.scss'] +}) +export class MetadataComponent implements OnInit { + CBAMetadataForm: FormGroup; + metadata: IMetaData; + bpState: Observable<IBlueprintState>; + blueprint: IBlueprint; + + constructor(private formBuilder: FormBuilder, private store: Store<IAppState>) { + this.bpState = this.store.select('blueprint'); + this.CBAMetadataForm = this.formBuilder.group({ + template_author: ['', Validators.required], + author_email: ['', Validators.required], + user_groups: ['', Validators.required], + template_name: ['', Validators.required], + template_version: ['', Validators.required], + template_tags: ['', Validators.required] + }); + } + + ngOnInit() { + this.bpState.subscribe( + blueprintdata => { + var blueprintState: IBlueprintState = { blueprint: blueprintdata.blueprint, isLoadSuccess: blueprintdata.isLoadSuccess, isSaveSuccess: blueprintdata.isSaveSuccess, isUpdateSuccess: blueprintdata.isUpdateSuccess }; + this.metadata = blueprintState.blueprint.metadata; + this.blueprint = blueprintState.blueprint; + let metadatavalues = []; + for (let key in this.metadata) { + if (this.metadata.hasOwnProperty(key)) { + metadatavalues.push(this.metadata[key]); + } + } + let temp_author = metadatavalues[0]; + console.log(temp_author); + this.CBAMetadataForm = this.formBuilder.group({ + template_author: [metadatavalues[0], Validators.required], + author_email: [metadatavalues[1], Validators.required], + user_groups: [metadatavalues[2], Validators.required], + template_name: [metadatavalues[3], Validators.required], + template_version: [metadatavalues[4], Validators.required], + template_tags: [metadatavalues[5], Validators.required] + }); + }) + } + + UploadMetadata() { + this.metadata = Object.assign({}, this.CBAMetadataForm.value); + this.blueprint.metadata = this.metadata; + this.store.dispatch(new LoadBlueprintSuccess(this.blueprint)); + } + +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html new file mode 100644 index 000000000..b58be9fce --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html @@ -0,0 +1,26 @@ +<!-- +============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> + <input type="file" accept=".zip" (change)="fileChanged($event)"> +</div> +<div> + <button mat-button matStepperNext (click)="updateBlueprintState()" [ngClass] = "{'mat-upload-btn-disabled': !validfile, 'matStepNextBtn': validfile}" [disabled]="!validfile">Upload</button> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss new file mode 100644 index 000000000..beb05e26f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss @@ -0,0 +1,42 @@ +/* +============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============================================ +*/ + +.matStepNextBtn { + color: white; + background-color: #3f51b5; + margin-top: 10px; + position: absolute; + margin-bottom: 5px; + border-radius: 4px; + min-width: 6em; + cursor: pointer; +} + +.mat-upload-btn-disabled { + background-color: #c5cae8; + margin-top: 10px; + border-radius: 4px; + margin-bottom: 5px; + color: darkgray; + min-width: 6em; + border: none; + cursor: initial; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.spec.ts new file mode 100644 index 000000000..5bf914cac --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-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 { SearchTemplateComponent } from './search-template.component'; + +describe('SearchTemplateComponent', () => { + let component: SearchTemplateComponent; + let fixture: ComponentFixture<SearchTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts new file mode 100644 index 000000000..777faee68 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts @@ -0,0 +1,166 @@ +/* +============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, EventEmitter, Output, ViewChild } from '@angular/core'; +import { Store } from '@ngrx/store'; +import * as JSZip from 'jszip'; +import { Observable } from 'rxjs'; + +import { IBlueprint } from '../../../../common/core/store/models/blueprint.model'; +import { IBlueprintState } from '../../../../common/core/store/models/blueprintState.model'; +import { IAppState } from '../../../../common/core/store/state/app.state'; +import { LoadBlueprintSuccess, SET_BLUEPRINT_STATE, SetBlueprintState } from '../../../../common/core/store/actions/blueprint.action'; +import { json } from 'd3'; + +@Component({ + selector: 'app-search-template', + templateUrl: './search-template.component.html', + styleUrls: ['./search-template.component.scss'] +}) +export class SearchTemplateComponent implements OnInit { + file: File; + localBluePrintData: IBlueprint; + fileText: object[]; + blueprintState: IBlueprintState; + bpState: Observable<IBlueprintState>; + validfile: boolean = false; + + @ViewChild('fileInput') fileInput; + result: string = ''; + + private paths = []; + private tree; + private zipFile: JSZip = new JSZip(); + private fileObject: any; + private activationBlueprint: any; + private tocsaMetadaData: any; + private blueprintName: string; + + constructor(private store: Store<IAppState>) { } + + ngOnInit() { + } + + fileChanged(e: any) { + this.file = e.target.files[0]; + this.zipFile.files = {}; + this.zipFile.loadAsync(this.file) + .then((zip) => { + if(zip) { + this.buildFileViewData(zip); + } + }); + } + + updateBlueprintState() { + let data: IBlueprint = this.activationBlueprint ? JSON.parse(this.activationBlueprint.toString()) : this.activationBlueprint; + let blueprintState = { + blueprint: data, + name: this.blueprintName, + files: this.tree, + filesData: this.paths + } + this.store.dispatch(new SetBlueprintState(blueprintState)) + // this.store.dispatch(new LoadBlueprintSuccess(data)); + } + + async buildFileViewData(zip) { + this.validfile = false; + this.paths = []; + for (var file in zip.files) { + this.fileObject = { + name: zip.files[file].name, + data: '' + }; + const value = <any>await zip.files[file].async('string'); + this.fileObject.data = value; + this.paths.push(this.fileObject); + } + + if(this.paths) { + this.paths.forEach(path =>{ + if(path.name.includes("TOSCA.meta")) { + this.validfile = true + } + }); + } else { + alert('Please update proper file'); + } + + if(this.validfile) { + this.fetchTOSACAMetadata(); + this.tree = this.arrangeTreeData(this.paths); + } else { + alert('Please update proper file with TOSCA metadata'); + } + } + + arrangeTreeData(paths) { + const tree = []; + + paths.forEach((path) => { + + const pathParts = path.name.split('/'); + pathParts.shift(); + let currentLevel = tree; + + pathParts.forEach((part) => { + const existingPath = currentLevel.filter(level => level.name === part); + + if (existingPath.length > 0) { + currentLevel = existingPath[0].children; + } else { + const newPart = { + name: part, + children: [], + data: path.data + }; + if(part.trim() == this.blueprintName.trim()) { + this.activationBlueprint = path.data; + newPart.data = JSON.parse(this.activationBlueprint.toString()); + console.log('newpart', newPart); + } + if(newPart.name !== '') { + currentLevel.push(newPart); + currentLevel = newPart.children; + } + } + }); + }); + console.log('tree', tree); + return tree; + } + + fetchTOSACAMetadata() { + let toscaData = {}; + this.paths.forEach(file =>{ + if(file.name.includes('TOSCA.meta')) { + let keys = file.data.split("\n"); + keys.forEach((key)=>{ + let propertyData = key.split(':'); + toscaData[propertyData[0]] = propertyData[1]; + }); + } + }); + this.blueprintName = (((toscaData['Entry-Definitions']).split('/'))[1]).toString();; + console.log(toscaData); + } +} diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template-routing.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template-routing.module.ts new file mode 100644 index 000000000..ab310bd43 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-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 { SelectTemplateComponent } from './select-template.component'; +import { TemplateOptionsComponent } from './template-options/template-options.component'; + +const routes: Routes = [ + { + path: '', + component: SelectTemplateComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class SelectTemplateRoutingModule { } 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 new file mode 100644 index 000000000..d11b37144 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html @@ -0,0 +1,49 @@ +<!-- +============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============================================ +--> +<mat-vertical-stepper linear> + <mat-step [stepControl]="step1FormGroup"> + <ng-template matStepLabel>Choose CBA Template file</ng-template> + <div class="matStepContent"> + <app-template-options></app-template-options> + <br> + <div> + <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> + </div> + </div> + </mat-step> + + <mat-step [stepControl]="step2FormGroup"> + <ng-template matStepLabel>Browse CBA Template file</ng-template> + <div class="matStepContent"> + <app-search-template (cbaFile)="fileChange($event)"></app-search-template> + <!-- <div> + <button mat-button matStepperNext class="matStepNextBtn">Upload</button> + </div>--> + </div> + </mat-step> + <mat-step [stepControl]="step3FormGroup"> + <ng-template matStepLabel>Enter Metadata details</ng-template> + <div class="matStepContent"> + <app-metadata (metadataform)="metaDataDetail($event)"></app-metadata> + </div> + </mat-step> +</mat-vertical-stepper> +<button mat-button matStepperNext class="matStepNextBtn">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 new file mode 100644 index 000000000..37d1feb7f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss @@ -0,0 +1,36 @@ +/* +============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============================================ +*/ + +.matStepNextBtn { + color: white; + background-color: #3f51b5; + margin-top: 10px; + position: absolute; + margin-bottom: 5px; + border-radius: 4px; + min-width: 6em; + cursor: pointer; +} + +.matStepContent { + margin-top: 15px !important; + margin-bottom: 20px !important; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.spec.ts new file mode 100644 index 000000000..92ce13e61 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.spec.ts @@ -0,0 +1,45 @@ +/* +============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 { SelectTemplateComponent } from './select-template.component'; + +describe('SelectTemplateComponent', () => { + let component: SelectTemplateComponent; + let fixture: ComponentFixture<SelectTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SelectTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SelectTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.ts new file mode 100644 index 000000000..d9591dd80 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-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 } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model'; +import { IMetaData } from 'src/app/common/core/store/models/metadata.model'; +import { IImportModel } from 'src/app/common/core/store/models/imports.model'; +import { ITopologyTemplate } from 'src/app/common/core/store/models/itopologytemplate.model'; + +@Component({ + selector: 'app-select-template', + templateUrl: './select-template.component.html', + styleUrls: ['./select-template.component.scss'] +}) +export class SelectTemplateComponent implements OnInit { + blueprint: IBlueprint; + topologyTemplate: ITopologyTemplate; + metaData: IMetaData; + blueprintState: IBlueprintState; + importModel: IImportModel; + + constructor(private store: Store<IBlueprintState>) { + // this.importModel.file = ''; + } + + ngOnInit() { + } + fileChange(topologyTemp: ITopologyTemplate) { + this.topologyTemplate = topologyTemp; + console.log(topologyTemp); + } + metaDataDetail(data: IMetaData) { + + this.metaData = data; + console.log("parent" + this.metaData.author_email); + } + upload() { + + } + // saveBlueprintModel(){ + // this.blueprint.toplogyTemplates=this.topologyTemplate; + // this.blueprint.metadata= this.metaData; + // // this.store.dispatch(new CreateBlueprint(this.blueprint)); + // } +} diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.module.ts new file mode 100644 index 000000000..16947d4c8 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-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 { ReactiveFormsModule } from '@angular/forms'; +import { TemplateOptionsComponent } from './template-options/template-options.component'; +import { SearchTemplateComponent } from './search-template/search-template.component'; +import { MetadataComponent } from './metadata/metadata.component'; +import { SelectTemplateComponent } from './select-template.component'; +import { SelectTemplateRoutingModule } from './select-template-routing.module'; +import { AppMaterialModule } from 'src/app/common/modules/app-material.module'; + +@NgModule({ + declarations: [ + TemplateOptionsComponent, + SearchTemplateComponent, + MetadataComponent, + SelectTemplateComponent + ], + exports: [ + TemplateOptionsComponent, + SearchTemplateComponent, + MetadataComponent, + SelectTemplateComponent + ], + imports: [ + CommonModule, + SelectTemplateRoutingModule, + ReactiveFormsModule, + AppMaterialModule + ] +}) +export class SelectTemplateModule { } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.html new file mode 100644 index 000000000..9c2d721e0 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.html @@ -0,0 +1,25 @@ +<!-- +============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============================================ +--> +<mat-radio-group> + <mat-radio-button value="1" (click)="selected(1)">Upload Template file</mat-radio-button><br><br> + <mat-radio-button value="2" (click)="selected(2)">Starter Template</mat-radio-button><br><br> + <mat-radio-button value="3" (click)="selected(3)">Existing Model File</mat-radio-button> +</mat-radio-group> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.scss new file mode 100644 index 000000000..22941b5fa --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.scss @@ -0,0 +1,20 @@ +/* +============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============================================ +*/
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.spec.ts new file mode 100644 index 000000000..dcbdd7dc0 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.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 { TemplateOptionsComponent } from './template-options.component'; + +describe('TemplateOptionsComponent', () => { + let component: TemplateOptionsComponent; + let fixture: ComponentFixture<TemplateOptionsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TemplateOptionsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TemplateOptionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.ts new file mode 100644 index 000000000..3b598b24e --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/template-options/template-options.component.ts @@ -0,0 +1,45 @@ +/* +============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, Output, EventEmitter} from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +@Component({ + selector: 'app-template-options', + templateUrl: './template-options.component.html', + styleUrls: ['./template-options.component.scss'] +}) +export class TemplateOptionsComponent implements OnInit { + selectedOption: string; + @Output() option = new EventEmitter(); + + constructor() { } + + ngOnInit() { + } + + selected(value){ + console.log(value); + this.option.emit(value); + } + // loadTemplateData() { + // // to do + // } +} diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template-routing.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template-routing.module.ts new file mode 100644 index 000000000..321f80c54 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template-routing.module.ts @@ -0,0 +1,37 @@ +/* +============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 { TestTemplateComponent } from './test-template.component'; + +const routes: Routes = [ + { + path: '', + component: TestTemplateComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class TestTemplateRoutingModule { } 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 new file mode 100644 index 000000000..da3580cd5 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html @@ -0,0 +1,39 @@ +<!-- +============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="testTemplateContainer"> + + <div class="editorContainer"> + <div class="editorDiv"> + <p>Request</p> + <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor> + <div class="btnContainer"> + <button class="button">Submit</button> + <button class="button">Clear</button> + </div> + </div> + + <div class="editorDiv"> + <p>Response</p> + <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor> + </div> + </div> + +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss new file mode 100644 index 000000000..49d559933 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss @@ -0,0 +1,60 @@ +/* +============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============================================ +*/ + +.aceEditor { + overflow: hidden; + // height: 100% !important; + min-height: 27rem; + background-color: white !important; + border: 1px solid #3f87a6; + border-left: 3px solid #3f87a6; + line-height: 1.2; + width: 99%; +} + +.button { + margin: 1em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em; +} + +.testTemplateContainer { + display: flex; + flex-direction: row +} +.editorContainer { + width: 100%; + display: flex; + flex-direction: row; + margin-left: 1em +} + +.editorDiv { + width: 50%; + margin: 2px; +} + +.btnContainer { + height: 10% +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.spec.ts new file mode 100644 index 000000000..e4adb2e09 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.spec.ts @@ -0,0 +1,45 @@ +/* +============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 { TestTemplateComponent } from './test-template.component'; + +describe('TestTemplateComponent', () => { + let component: TestTemplateComponent; + let fixture: ComponentFixture<TestTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ TestTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TestTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..9a7a570ad --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts @@ -0,0 +1,84 @@ +/* +============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 { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { Observable, Subscription } from 'rxjs'; +import { Store } from '@ngrx/store'; + +import { IAppState } from '../../../common/core/store/state/app.state'; +import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import { IMetaData } from '../../../common/core/store/models/metadata.model'; +import { LoadBlueprintSuccess } from 'src/app/common/core/store/actions/blueprint.action'; + +import "ace-builds/webpack-resolver"; +import 'brace'; +import 'brace/ext/language_tools'; +import 'ace-builds/src-min-noconflict/snippets/html'; + +@Component({ + selector: 'app-test-template', + templateUrl: './test-template.component.html', + styleUrls: ['./test-template.component.scss'] +}) +export class TestTemplateComponent implements OnInit { + private blueprintpState: Subscription; + private request; + private workflows = []; + @ViewChild('editor') editor; + options: any = { fontSize: "100%", printMargin: false, tabSize: 2 }; + + constructor(private store: Store<IAppState>) { + this.blueprintpState = this.store.select('blueprint') + .subscribe((data: any) => { + console.log(data); + if (data && data.blueprint && data.blueprint.topology_template && data.blueprint.topology_template.workflows) { + this.buildWorkflowData(data.blueprint.topology_template.workflows); + // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4); + } + }); + + } + + ngOnInit() { + } + + fileClicked(file) { + console.log('selected file:' + file); + } + + buildWorkflowData(data) { + this.workflows = []; + for (var property1 in data) { + data[property1].name = property1; + this.workflows.push(data[property1]) + } + this.request = this.workflows[0]; + } + + createRequest(workflow) { + this.request = JSON.stringify(workflow, undefined, 4); + + } + +} 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 new file mode 100644 index 000000000..ea5b5ffb2 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts @@ -0,0 +1,43 @@ +/* +============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 { TestTemplateComponent } from './test-template.component'; +import { TestTemplateRoutingModule } from './test-template-routing.module'; +import { AppMaterialModule } from '../../../common/modules/app-material.module'; +import { AceEditorModule } from 'ng2-ace-editor'; + +@NgModule({ + declarations: [ + TestTemplateComponent + ], + exports: [ + TestTemplateComponent + ], + imports: [ + CommonModule, + AppMaterialModule, + TestTemplateRoutingModule, + AceEditorModule + ] +}) +export class TestTemplateModule { } |