diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules')
103 files changed, 5237 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 { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/README.md b/cds-ui/client/src/app/feature-modules/resource-definition/README.md new file mode 100644 index 000000000..c50b36321 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/README.md @@ -0,0 +1,22 @@ +/* +============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============================================ +*/ + +This folder contains the code related to data dictionary.
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model-routing.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model-routing.module.ts new file mode 100644 index 000000000..3935b65f6 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model-routing.module.ts @@ -0,0 +1,30 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ExistingModelRoutingModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.html new file mode 100644 index 000000000..491066310 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.html @@ -0,0 +1,22 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + + +<app-search-resource></app-search-resource>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.scss new file mode 100644 index 000000000..cafd2bf8f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.scss @@ -0,0 +1,19 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.spec.ts new file mode 100644 index 000000000..97b3d73e2 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExistingModelComponent } from './existing-model.component'; + +describe('ExistingModelComponent', () => { + let component: ExistingModelComponent; + let fixture: ComponentFixture<ExistingModelComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ExistingModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ExistingModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts new file mode 100644 index 000000000..f780ef851 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.component.ts @@ -0,0 +1,35 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-existing-model', + templateUrl: './existing-model.component.html', + styleUrls: ['./existing-model.component.scss'] +}) +export class ExistingModelComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.module.ts new file mode 100644 index 000000000..2963cfc59 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/existing-model.module.ts @@ -0,0 +1,37 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SearchResourceComponent } from './search-resource/search-resource.component'; +import { ExistingModelRoutingModule } from './existing-model-routing.module'; +import { ExistingModelComponent } from './existing-model.component'; + +@NgModule({ + declarations: [ExistingModelComponent,SearchResourceComponent], + imports: [ + CommonModule, + ExistingModelRoutingModule, + SearchResourceComponent, + ], + exports:[ExistingModelComponent, + SearchResourceComponent] +}) +export class ExistingModelModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html new file mode 100644 index 000000000..ab696286b --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html @@ -0,0 +1,31 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + +<form class="example-form" [formGroup]="myControl"> + <mat-form-field class="example-full-width"> + <input type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input"> + <button matSuffix mat-icon-button><mat-icon>search</mat-icon></button> + <mat-autocomplete #auto="matAutocomplete"> + <mat-option *ngFor="let option of options | search : searchText" [value]="option"> + {{option}} + </mat-option> + </mat-autocomplete> + </mat-form-field> +</form> diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.scss new file mode 100644 index 000000000..cafd2bf8f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.scss @@ -0,0 +1,19 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.spec.ts new file mode 100644 index 000000000..9051a86fa --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SearchResourceComponent } from './search-resource.component'; + +describe('SearchResourceComponent', () => { + let component: SearchResourceComponent; + let fixture: ComponentFixture<SearchResourceComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SearchResourceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SearchResourceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts new file mode 100644 index 000000000..16129b74a --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.ts @@ -0,0 +1,43 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit } from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +@Component({ + selector: 'app-search-resource', + templateUrl: './search-resource.component.html', + styleUrls: ['./search-resource.component.scss'] +}) +export class SearchResourceComponent implements OnInit { + + myControl: FormGroup; + + constructor(private _formBuilder: FormBuilder) { } + + options: string[] = ['One','One1', 'Two', 'Three']; + + ngOnInit() { + this.myControl = this._formBuilder.group({ + search_input: ['', Validators.required] + }); + } + +} + diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template-routing.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template-routing.module.ts new file mode 100644 index 000000000..896d5aa29 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template-routing.module.ts @@ -0,0 +1,30 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class NewTemplateRoutingModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.html new file mode 100644 index 000000000..944c7c6a7 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.html @@ -0,0 +1,24 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + + +<p> + new-template works! +</p> diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.scss new file mode 100644 index 000000000..cafd2bf8f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.scss @@ -0,0 +1,19 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.spec.ts new file mode 100644 index 000000000..b0b701e64 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NewTemplateComponent } from './new-template.component'; + +describe('NewTemplateComponent', () => { + let component: NewTemplateComponent; + let fixture: ComponentFixture<NewTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NewTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.ts new file mode 100644 index 000000000..3d1412a2d --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.component.ts @@ -0,0 +1,35 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-new-template', + templateUrl: './new-template.component.html', + styleUrls: ['./new-template.component.scss'] +}) +export class NewTemplateComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.module.ts new file mode 100644 index 000000000..666ac3441 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/new-template/new-template.module.ts @@ -0,0 +1,33 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { NewTemplateRoutingModule } from './new-template-routing.module'; + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + NewTemplateRoutingModule + ] +}) +export class NewTemplateModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation-routing.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation-routing.module.ts new file mode 100644 index 000000000..6b7a23882 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation-routing.module.ts @@ -0,0 +1,36 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { ResourceCreationComponent } from './resource-creation.component' ; +const routes: Routes = [ + { + path: '', + component: ResourceCreationComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ResourceCreationRoutingModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html new file mode 100644 index 000000000..8ace910b1 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html @@ -0,0 +1,45 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + +<mat-card class="ver-card"> +<mat-card-header> +</mat-card-header> +<mat-card-content> +<mat-vertical-stepper linear> + <mat-step [stepControl]="step1FormGroup"> + <ng-template matStepLabel>Choose Resource file</ng-template> + <br> + <app-resource-template-options (options)="selectedOption($event)"></app-resource-template-options> + <br> + <div> + <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> + </div> + </mat-step> + <mat-step [stepControl]="step2FormGroup"> + <ng-template matStepLabel>Browse or Search Resources</ng-template> + <app-upload-resource (fileData)=upload($event)></app-upload-resource><br><br> + <app-existing-model></app-existing-model> + <div> + <button mat-button matStepperNext (click)="updateResourcesState()" class="matStepNextBtn">Upload</button> + </div> + </mat-step> + </mat-vertical-stepper> + </mat-card-content> +</mat-card>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss new file mode 100644 index 000000000..b3b7fe7d5 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss @@ -0,0 +1,46 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ +.matStepNextBtn{ + color:white; + background:#3f51b5; + margin-top: 10px; + position: absolute; + border-radius: 1em; +} +.ver-card { + width: 100%; + background-color: #f1f1f1; + padding: 0.01em 16px; + margin: 20px 0; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; + height: auto; +} +.mat-card-header{ + height:35px; +} +.mat-card-content{ + width: auto; + background-color: #fff; + padding: 8px 8px; + // border-left: 4px solid #4CAF50; + word-wrap: break-word; + min-height:350px; + height: auto; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.spec.ts new file mode 100644 index 000000000..77d9c6819 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResourceCreationComponent } from './resource-creation.component'; + +describe('ResourceCreationComponent', () => { + let component: ResourceCreationComponent; + let fixture: ComponentFixture<ResourceCreationComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResourceCreationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourceCreationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts new file mode 100644 index 000000000..c751e0ee8 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts @@ -0,0 +1,63 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; +import { IResources } from 'src/app/common/core/store/models/resources.model'; +import { IAppState } from '../../../common/core/store/state/app.state'; +import { LoadResourcesSuccess } from 'src/app/common/core/store/actions/resources.action'; + +@Component({ + selector: 'app-resource-creation', + templateUrl: './resource-creation.component.html', + styleUrls: ['./resource-creation.component.scss'] +}) +export class ResourceCreationComponent implements OnInit { + + myFile: any; + selectedValue: any; + constructor(private store: Store<IAppState>) { + } + + ngOnInit() { + } + + upload(value){ + this.myFile=value; + } + + updateResourcesState() { + let fileReader = new FileReader(); + fileReader.readAsText(this.myFile); + var me = this; + fileReader.onload = function () { + var data: IResources = JSON.parse(fileReader.result.toString()); + me.store.dispatch(new LoadResourcesSuccess(data)); + console.log(data); + } + } + + selectedOption(value){ + this.selectedValue=value; + console.log(this.selectedValue); + } + +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts new file mode 100644 index 000000000..7003f4c20 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts @@ -0,0 +1,81 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ResourceCreationRoutingModule } from './resource-creation-routing.module'; +import { ResourceCreationComponent } from './resource-creation.component'; +import { ResourceTemplateOptionsComponent } from './resource-template-options/resource-template-options.component'; +import { MatAutocompleteModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material'; +import { UploadResourceComponent } from './upload-resource/upload-resource.component'; +import { NewTemplateComponent } from './new-template/new-template.component'; +import { ExistingModelComponent } from './existing-model/existing-model.component'; +import { SearchResourceComponent } from './existing-model/search-resource/search-resource.component'; +import { SharedModule } from '../../../../app/common/shared/shared.module'; +import { FormsModule,ReactiveFormsModule } from '@angular/forms'; + +@NgModule({ + + declarations: [ + ResourceCreationComponent, + ResourceTemplateOptionsComponent, + UploadResourceComponent, + NewTemplateComponent, + ExistingModelComponent, + SearchResourceComponent, + + ], + exports: [ + ResourceCreationComponent, + ResourceTemplateOptionsComponent, + UploadResourceComponent, + NewTemplateComponent, + ExistingModelComponent, + SearchResourceComponent, + SharedModule + ], + imports: [ + CommonModule, + SharedModule, + FormsModule, + ReactiveFormsModule, + ResourceCreationRoutingModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + MatSidenavModule, + MatCheckboxModule, + MatListModule, + MatGridListModule, + MatCardModule, + MatMenuModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatInputModule, + MatSelectModule, + MatRadioModule, + MatFormFieldModule, + MatStepperModule, + MatAutocompleteModule + ] +}) +export class ResourceCreationModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.html new file mode 100644 index 000000000..a0e6b15c3 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.html @@ -0,0 +1,24 @@ +<!--
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 2019 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+-->
+<mat-radio-group>
+ <mat-radio-button value="1" (click)="selected(1)">Upload Resource File</mat-radio-button><br><br>
+ <mat-radio-button value="2" (click)="selected(2)">New Resource</mat-radio-button><br><br>
+ <mat-radio-button value="3" (click)="selected(3)">Existing Model Resource</mat-radio-button>
+</mat-radio-group>
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.scss new file mode 100644 index 000000000..2205ac8e7 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.scss @@ -0,0 +1,19 @@ +/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 2019 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.spec.ts new file mode 100644 index 000000000..2061ed27c --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.spec.ts @@ -0,0 +1,45 @@ +/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 2019 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResourceTemplateOptionsComponent } from './resource-template-options.component';
+
+describe('ResourceTemplateOptionsComponent', () => {
+ let component: ResourceTemplateOptionsComponent;
+ let fixture: ComponentFixture<TemplateOptionsComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ResourceTemplateOptionsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ResourceTemplateOptionsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.ts new file mode 100644 index 000000000..1c6efc9c8 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-template-options/resource-template-options.component.ts @@ -0,0 +1,44 @@ +/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 2019 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+
+import { Component, OnInit, Output, EventEmitter} from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+@Component({
+ selector: 'app-resource-template-options',
+ templateUrl: './resource-template-options.component.html',
+ styleUrls: ['./resource-template-options.component.scss']
+})
+export class ResourceTemplateOptionsComponent 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/resource-definition/resource-creation/upload-resource/upload-resource-routing.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource-routing.module.ts new file mode 100644 index 000000000..73e6459a5 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource-routing.module.ts @@ -0,0 +1,30 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +const routes: Routes = []; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class UploadResourceRoutingModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.html new file mode 100644 index 000000000..3d60dabb8 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.html @@ -0,0 +1,24 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + + +<div> + <input #myInput type="file" accept=".json" (change)="fileChanged($event)"> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.scss new file mode 100644 index 000000000..cafd2bf8f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.scss @@ -0,0 +1,19 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.spec.ts new file mode 100644 index 000000000..9893230ed --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UploadResourceComponent } from './upload-resource.component'; + +describe('UploadResourceComponent', () => { + let component: UploadResourceComponent; + let fixture: ComponentFixture<UploadResourceComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UploadResourceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UploadResourceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.ts new file mode 100644 index 000000000..ac3561a21 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.component.ts @@ -0,0 +1,53 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit, EventEmitter, Output } from '@angular/core'; +import { IResources } from 'src/app/common/core/store/models/resources.model'; +import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model'; +import { LoadResourcesSuccess } from 'src/app/common/core/store/actions/resources.action'; +import { IAppState } from '../../../../common/core/store/state/app.state'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; + +@Component({ + selector: 'app-upload-resource', + templateUrl: './upload-resource.component.html', + styleUrls: ['./upload-resource.component.scss'] +}) +export class UploadResourceComponent implements OnInit { + + @Output() fileData = new EventEmitter(); + file: File; + localResourcesData: IResources; + fileText: object[]; + blueprintState: IResourcesState; + bpState: Observable<IResourcesState>; + + constructor(private store: Store<IAppState>) { } + + ngOnInit() { + } + + fileChanged(e: any) { + this.file = e.target.files[0]; + this.fileData.emit(this.file); + } + +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.module.ts new file mode 100644 index 000000000..3f27c2db2 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/upload-resource/upload-resource.module.ts @@ -0,0 +1,34 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { UploadResourceRoutingModule } from './upload-resource-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + UploadResourceRoutingModule + ] +}) +export class UploadResourceModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition-routing.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition-routing.module.ts new file mode 100644 index 000000000..2f0b3fe30 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition-routing.module.ts @@ -0,0 +1,36 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ResourceDefinitionComponent } from './resource-definition.component'; + +const routes: Routes = [ + { + path: '', + component: ResourceDefinitionComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ResourceDefinitionRoutingModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.html new file mode 100644 index 000000000..60a8b94ec --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.html @@ -0,0 +1,39 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + +<!-- <app-cbawizard [appName]="appName"></app-cbawizard> +<router-outlet></router-outlet> --> +<mat-card class="RDform"> + <mat-card-content> + <mat-horizontal-stepper [linear]="isLinear" #stepper> + <mat-step [stepControl]="firstFormGroup"> + <ng-template matStepLabel>Resource creation Method</ng-template> + <app-resource-creation></app-resource-creation><br><br> + <div> + <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> + </div> + </mat-step> + <mat-step [stepControl]="secondFormGroup"> + <ng-template matStepLabel>Resource Edit</ng-template> + <app-resource-edit></app-resource-edit><br> + </mat-step> + </mat-horizontal-stepper> + </mat-card-content> +</mat-card>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.scss new file mode 100644 index 000000000..c27e7d216 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.scss @@ -0,0 +1,32 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +.mat-card { + padding: 0px !important; +} + +.matStepNextBtn{ + color:white; + background:#3f51b5; + margin-top: 10px; + position: absolute; + margin-bottom: 5px; + border-radius: 1em; +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.spec.ts new file mode 100644 index 000000000..72d72dd02 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResourceDefinitionComponent } from './resource-definition.component'; + +describe('ResourceDefinitionComponent', () => { + let component: ResourceDefinitionComponent; + let fixture: ComponentFixture<ResourceDefinitionComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResourceDefinitionComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourceDefinitionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.ts new file mode 100644 index 000000000..c2f3dad7f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.component.ts @@ -0,0 +1,38 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-resource-definition', + templateUrl: './resource-definition.component.html', + styleUrls: ['./resource-definition.component.scss'] +}) +export class ResourceDefinitionComponent implements OnInit { + appName: String; + + constructor() { + this.appName="datadict"; + } + + ngOnInit() { + } + +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.module.ts new file mode 100644 index 000000000..0e056530d --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-definition.module.ts @@ -0,0 +1,61 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ResourceDefinitionRoutingModule } from './resource-definition-routing.module'; +import { ResourceDefinitionComponent } from './resource-definition.component'; +import { SharedModule } from '../../../app/common/shared/shared.module'; +import { ResourceCreationModule } from './resource-creation/resource-creation.module'; +import { ResourceEditModule } from './resource-edit/resource-edit.module'; + +import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material'; +import { MatIconModule } from '@angular/material/icon'; + +@NgModule({ + + declarations: [ResourceDefinitionComponent], + + imports: [ + CommonModule, + ResourceDefinitionRoutingModule, + SharedModule, + ResourceCreationModule, + ResourceEditModule, + MatToolbarModule, + MatButtonModule, + MatSidenavModule, + MatIconModule, + MatListModule, + MatGridListModule, + MatCardModule, + MatMenuModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatInputModule, + MatSelectModule, + MatRadioModule, + MatFormFieldModule, + MatStepperModule, + ] +}) +export class ResourceDefinitionModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit-routing.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit-routing.module.ts new file mode 100644 index 000000000..ae417c454 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit-routing.module.ts @@ -0,0 +1,36 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +* ================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ResourceEditComponent } from './resource-edit.component'; +const routes: Routes = [ + { + path: '', + component: ResourceEditComponent + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ResourceEditRoutingModule { } + diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html new file mode 100644 index 000000000..7df509221 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html @@ -0,0 +1,45 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + + +<mat-card class="metadata-card"> + <mat-card-header> + <mat-card-title>Resource Metadata</mat-card-title> + </mat-card-header> + <mat-card-content> + <app-resource-metadata></app-resource-metadata> + </mat-card-content> +</mat-card> + +<mat-card class="sources-card"> + <mat-card-header> + <mat-card-title> + Sources + </mat-card-title> + </mat-card-header> + <mat-card-content> + <app-sources-template></app-sources-template> + </mat-card-content> +</mat-card> + +<mat-card class="submit"> + <button mat-raised-button>Save</button> +</mat-card> +<!-- <router-outlet></router-outlet> -->
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss new file mode 100644 index 000000000..7c60cf3e6 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss @@ -0,0 +1,55 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +.metadata-card { + width: 100%; + background-color: #f1f1f1; + padding: 0.01em 16px; + margin: 20px 0; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; + height: auto; +} +.sources-card { + width: 100%; + background-color: #f1f1f1; + padding: 0.01em 16px; + margin: 20px 0; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; + height: auto; +} +.mat-raised-button{ + border: 1px solid grey; + background-color: #3f51b5; + padding: 1px; + color: white; + border-radius: 1em; +} +.mat-card-title{ + padding-top: 7px; +} +.mat-card-header{ + height:35px; +} +.mat-card-content{ + width: auto; + background-color: #fff; + padding: 8px 8px; + word-wrap: break-word; +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.spec.ts new file mode 100644 index 000000000..f88452d31 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResourceEditComponent } from './resource-edit.component'; + +describe('ResourceEditComponent', () => { + let component: ResourceEditComponent; + let fixture: ComponentFixture<ResourceEditComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResourceEditComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourceEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts new file mode 100644 index 000000000..5b567034a --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts @@ -0,0 +1,35 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-resource-edit', + templateUrl: './resource-edit.component.html', + styleUrls: ['./resource-edit.component.scss'] +}) +export class ResourceEditComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts new file mode 100644 index 000000000..2b25ae339 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts @@ -0,0 +1,47 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ResourceEditComponent } from './resource-edit.component'; +import { ResourceEditRoutingModule } from './resource-edit-routing.module'; +import { MatExpansionModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material'; +import { FormsModule,ReactiveFormsModule } from '@angular/forms'; +import { SharedModule } from '../../../../app/common/shared/shared.module'; +import { SourcesTemplateComponent } from './sources-template/sources-template.component'; +import { ResourceMetadataComponent } from './resource-metadata/resource-metadata.component'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { NgJsonEditorModule } from 'ang-jsoneditor'; + +@NgModule({ + declarations: [ ResourceEditComponent,SourcesTemplateComponent,ResourceMetadataComponent ], + imports: [ + CommonModule, + ResourceEditRoutingModule, + SharedModule, + FormsModule,ReactiveFormsModule, + DragDropModule, + MatExpansionModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, + NgJsonEditorModule + ], + exports: [ ResourceEditComponent,SharedModule ] +}) +export class ResourceEditModule { } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html new file mode 100644 index 000000000..0bbc0b7c1 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html @@ -0,0 +1,45 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> + +<form [formGroup]="ResourceMetadata"> + <mat-form-field class="form-field"> + <input matInput placeholder="Name" formControlName="Resource_Name"> + </mat-form-field><mat-form-field class="form-field"> + <input matInput placeholder="Tags" formControlName="_tags"> + </mat-form-field> + <mat-form-field class="form-field"> + <mat-select matInput placeholder="Data Type" formControlName="_type"> + <mat-option value="string">string</mat-option> + <mat-option value="list">list</mat-option> + </mat-select> + </mat-form-field> + <mat-form-field class="form-field" > + <input matInput placeholder="entry_schema" formControlName="entry_schema"> + </mat-form-field> + <mat-form-field class="form-field" > + <mat-select matInput placeholder="required" formControlName="required"> + <mat-option value="true">true</mat-option> + <mat-option value="false">false</mat-option> + </mat-select> + </mat-form-field> + <mat-form-field class="form-field" > + <textarea matInput placeholder="Description" formControlName="_description"></textarea> + </mat-form-field> +</form>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss new file mode 100644 index 000000000..d10ad488f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.scss @@ -0,0 +1,33 @@ +/*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 2019 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+
+
+.meta-form {
+ width: 100%;
+}
+
+.form-field {
+ width: 40%;
+ padding:10px;
+}
+
+.form-table {
+ width: 100%;
+}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.spec.ts new file mode 100644 index 000000000..f157ca58f --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.spec.ts @@ -0,0 +1,45 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResourceMetadataComponent } from './resource-metadata.component'; + +describe('ResourceMetadataComponent', () => { + let component: ResourceMetadataComponent; + let fixture: ComponentFixture<ResourceMetadataComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResourceMetadataComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResourceMetadataComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts new file mode 100644 index 000000000..536be26cd --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts @@ -0,0 +1,94 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit } from '@angular/core'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import { IResources } from 'src/app/common/core/store/models/resources.model'; +import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; +import { IAppState } from '../../../../common/core/store/state/app.state'; +import { A11yModule } from '@angular/cdk/a11y'; +import { LoadResourcesSuccess } from 'src/app/common/core/store/actions/resources.action'; +import { IPropertyData } from 'src/app/common/core/store/models/propertyData.model'; +import { IEntrySchema } from 'src/app/common/core/store/models/entrySchema.model'; + +@Component({ + selector: 'app-resource-metadata', + templateUrl: './resource-metadata.component.html', + styleUrls: ['./resource-metadata.component.scss'] +}) +export class ResourceMetadataComponent implements OnInit { + entry_schema:IEntrySchema; + properties: IPropertyData; + ResourceMetadata: FormGroup; + resource_name: string; + tags: string; + rdState: Observable<IResourcesState>; + resources: IResources; + propertyValues = []; + property = []; + + constructor(private formBuilder: FormBuilder, private store: Store<IAppState>) { + this.rdState = this.store.select('resources'); + this.ResourceMetadata = this.formBuilder.group({ + Resource_Name: ['', Validators.required], + _tags: ['', Validators.required], + _description : ['', Validators.required], + _type: ['', Validators.required], + required: ['', Validators.required], + entry_schema: [''] + }); + } + + ngOnInit() { + this.rdState.subscribe( + resourcesdata => { + var resourcesState: IResourcesState = { resources: resourcesdata.resources, isLoadSuccess: resourcesdata.isLoadSuccess, isSaveSuccess: resourcesdata.isSaveSuccess, isUpdateSuccess: resourcesdata.isUpdateSuccess }; + this.resource_name = resourcesState.resources.name; + this.tags = resourcesState.resources.tags; + this.resources = resourcesState.resources; + this.properties= resourcesState.resources.property; + this.propertyValues= this.checkNested(this.properties); + this.ResourceMetadata = this.formBuilder.group({ + Resource_Name: [this.resource_name, Validators.required], + _tags: [this.tags, Validators.required], + _description : [ this.propertyValues[0], Validators.required], + _type: [ this.propertyValues[1], Validators.required], + required: [ this.propertyValues[2], Validators.required], + entry_schema: [this.propertyValues[3]] + }); + }) + } + + checkNested(obj) { + for (let key in obj) { + if (obj.hasOwnProperty(key)) { + if (typeof obj[key] == "object"){ + console.log(`Key: ${key}`) + this.checkNested(obj[key]); + } else { + this.property.push(obj[key]); + } + } + } + return this.property + } +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html new file mode 100644 index 000000000..903c6d319 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html @@ -0,0 +1,56 @@ +<!--/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/--> +<div cdkDropListGroup> + <div class="sources-container"> + <div + cdkDropList + [cdkDropListData]="sourcesOptions" + class="sources-list" + (cdkDropListDropped)="drop($event)"> + <div class="sources-box" *ngFor="let item of sourcesOptions" cdkDrag> + <mat-expansion-panel class="expansion-panel"> + <mat-expansion-panel-header> + <mat-panel-title> + {{item}} + </mat-panel-title> + </mat-expansion-panel-header> + <json-editor [options]="options" [data]="selected(item)" on-change="onChange()"></json-editor> + </mat-expansion-panel> + </div> + </div> + </div> + + <div class="list-container"> + <h3>Source Options</h3> + <mat-form-field> + <input [(ngModel)]="searchText" type="input" matInput placeholder="search sources"> + <button matSuffix mat-icon-button><mat-icon>search</mat-icon></button> + <mat-hint>db,mdsal,input,default,..</mat-hint> + </mat-form-field> + <br><br> + <div + cdkDropList + [cdkDropListData]="option" + class="options-list" + (cdkDropListDropped)="drop($event)"> + <div class="options-box" *ngFor="let item of option | search :searchText" cdkDrag>{{item}}</div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss new file mode 100644 index 000000000..a76b60aa8 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss @@ -0,0 +1,113 @@ + /*
+* ============LICENSE_START=======================================================
+* ONAP : CDS
+* ================================================================================
+* Copyright 2019 TechMahindra
+*=================================================================================
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ============LICENSE_END=========================================================
+*/
+.sources-container {
+ width: 900px;
+ max-width: 100%;
+ margin: 0 25px 25px 0;
+ display: inline-block;
+ vertical-align: top;
+ border-bottom: solid 1px #ccc;
+ border-radius: 4px;
+}
+.list-container {
+ min-width: 200px;
+ max-width: 100%;
+ margin: 0 25px 25px 0;
+ display: inline-block;
+ vertical-align: top;
+}
+.sources-list {
+ border: solid 1px #ccc;
+ width: 900px;
+ min-height: 30px;
+ background: white;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ border-bottom: solid 1px #ccc;
+}
+.options-list {
+ min-height: 30px;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ width: 100%;
+}
+.sources-box {
+ //border-bottom: solid 1px #ccc;
+ color: rgba(0, 0, 0, 0.87);
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ cursor: move;
+ background:white;
+ font-size: 14px;
+ min-height: 30px;
+
+}
+.options-box {
+ border: solid 1px #ccc;
+ color: white;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ cursor: move;
+ background:gray;
+ font-size: 14px;
+ min-height: 30px;
+ width: 100px;
+ padding-left: 15px;
+}
+
+.cdk-drag-preview {
+ box-sizing: border-box;
+ border-radius: 4px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+ opacity: 0;
+}
+
+.cdk-drag-animating {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.sources-box:last-child {
+ border: none;
+}
+
+.options-list.cdk-drop-list-dragging .options-box:not(.cdk-drag-placeholder) {
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.expansion-panel{
+ border: solid 0.5px #ededed;
+ background: white;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ width: 100%;
+ }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.spec.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.spec.ts new file mode 100644 index 000000000..4a94fed93 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.spec.ts @@ -0,0 +1,44 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SourcesTemplateComponent } from './sources-template.component'; + +describe('SourcesTemplateComponent', () => { + let component: SourcesTemplateComponent; + let fixture: ComponentFixture<SourcesTemplateComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SourcesTemplateComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SourcesTemplateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts new file mode 100644 index 000000000..c43d1debd --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts @@ -0,0 +1,96 @@ +/* +* ============LICENSE_START======================================================= +* ONAP : CDS +* ================================================================================ +* Copyright (C) 2019 TechMahindra +*================================================================================= +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END========================================================= +*/ + +import { Component, OnInit, ViewChild } from '@angular/core'; +import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; +import { IResources } from 'src/app/common/core/store/models/resources.model'; +import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; +import { IAppState } from '../../../../common/core/store/state/app.state'; +import { A11yModule } from '@angular/cdk/a11y'; +import { LoadResourcesSuccess } from 'src/app/common/core/store/actions/resources.action'; +import { ISourcesData } from 'src/app/common/core/store/models/sourcesData.model'; +import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor'; + +@Component({ + selector: 'app-sources-template', + templateUrl: './sources-template.component.html', + styleUrls: ['./sources-template.component.scss'] +}) +export class SourcesTemplateComponent implements OnInit { +// rdState: Observable<IResourcesState>; +// resources: IResources; +// todo = []; +// sources:ISourcesData; +// sourcesOptions = []; + + @ViewChild(JsonEditorComponent) editor: JsonEditorComponent; + options = new JsonEditorOptions(); + + rdState: Observable<IResourcesState>; + resources: IResources; + option = ['mdsal','default']; + sources:ISourcesData; + sourcesOptions = []; + sourcesData = []; + + constructor(private store: Store<IAppState>) { + this.rdState = this.store.select('resources'); + this.options.mode = 'text'; + this.options.modes = [ 'text', 'tree', 'view']; + this.options.statusBar = false; + this.options.onChange = () => console.log(this.editor.get()); + + } + + ngOnInit() { + this.rdState.subscribe( + resourcesdata => { + var resourcesState: IResourcesState = { resources: resourcesdata.resources, isLoadSuccess: resourcesdata.isLoadSuccess, isSaveSuccess: resourcesdata.isSaveSuccess, isUpdateSuccess: resourcesdata.isUpdateSuccess }; + this.sources = resourcesState.resources.sources; + for (let key in this.sources) { + this.sourcesOptions.push(key); + } + //console.log(this.sourcesOptions); + }) + } + + onChange() { + console.log(this.editor.get()) + }; + + selected(value){ + console.log(value); + this.sourcesData=this.sources[value]; + return this.sourcesData; + } + + drop(event: CdkDragDrop<string[]>) { + if (event.previousContainer === event.container) { + moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + } else { + transferArrayItem(event.previousContainer.data, + event.container.data, + event.previousIndex, + event.currentIndex); + } + } +} |