diff options
Diffstat (limited to 'cds-ui')
12 files changed, 569 insertions, 28 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html index 9a3ba1edd..64556fb74 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.html @@ -20,29 +20,26 @@ limitations under the License. <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> - <div> - <button mat-button matStepperNext style="color:white;background:gray">Proceed</button> - </div> - </mat-step> - <mat-step [stepControl]="secondFormGroup"> - <ng-template matStepLabel>Controller Blueprint Designer</ng-template> - <app-modify-template></app-modify-template> - <div style="position:relative"> - <button mat-button matStepperNext style="color:white;background:gray; right: 20px; position: absolute;bottom:5px; ">Proceed</button> - </div> - </mat-step> - <mat-step [stepControl]="thirdFormGroup"> - <ng-template matStepLabel>Test</ng-template> - <app-test-template></app-test-template> - </mat-step> - <mat-step [stepControl]="thirdFormGroup"> - <ng-template matStepLabel>Deploy</ng-template> - <app-deploy-template></app-deploy-template> - </mat-step> - </mat-horizontal-stepper> + <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> + <div style="position:relative"> + <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> + </div> + </mat-step> + <mat-step [stepControl]="thirdFormGroup"> + <ng-template matStepLabel>Test</ng-template> + <app-test-template></app-test-template> + </mat-step> + <mat-step [stepControl]="thirdFormGroup"> + <ng-template matStepLabel>Deploy</ng-template> + <app-deploy-template></app-deploy-template> + </mat-step> + </mat-horizontal-stepper> </mat-card-content> - </mat-card> +</mat-card>
\ No newline at end of file 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 index 9d698bd0a..9dbaf6728 100644 --- 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 @@ -1,4 +1,4 @@ - +<!-- ============LICENSE_START========================================== =================================================================== Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved. @@ -18,3 +18,28 @@ 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"> + <!-- 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 class="editorConatiner"> + <p>Here comes the actual editor</p> + </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 index ed77e232b..f7e6f493c 100644 --- 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 @@ -17,4 +17,21 @@ 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 +*/ +.container { + display: flex; + flex-direction: row; + + .fileViewContainer { + width: 20%; + margin: 2px + } + + .editorConatiner { + width: 80%; + background-color: gainsboro; + height: 533px; + margin-left: 5em; + } + +}
\ No newline at end of file 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 index 18b4563fa..bf135bba2 100644 --- 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 @@ -20,6 +20,60 @@ limitations under the License. */ import { Component, OnInit } from '@angular/core'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; + +interface FoodNode { + name: string; + children?: FoodNode[]; +} + +const TREE_DATA: FoodNode[] = [ + { + name: 'Definitions', + children: [ + {name: 'activation-blueprint.json'}, + {name: 'artifacts_types.json'}, + {name: 'data_types.json'}, + ] + }, + { + name: 'Scripts', + children: [ + { + name: 'kotlin', + children: [ + {name: 'ScriptComponent.cba.kts'}, + {name: 'ResourceAssignmentProcessor.cba.kts'}, + ] + } + ] + }, + { + name: 'Templates', + children: [ + { + name: 'baseconfig-template' + } + ] + }, + { + name: 'TOSCA-Metada', + children: [ + { + name: 'TOSCA.meta' + } + ] + }, +]; + +/** Flat node with expandable and level information */ +interface ExampleFlatNode { + expandable: boolean; + name: string; + level: number; +} + @Component({ selector: 'app-editor', @@ -28,9 +82,33 @@ import { Component, OnInit } from '@angular/core'; }) export class EditorComponent implements OnInit { - constructor() { } + private transformer = (node: FoodNode, level: number) => { + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + }; + } + + treeControl = new FlatTreeControl<ExampleFlatNode>( + node => node.level, node => node.expandable); + + treeFlattener = new MatTreeFlattener( + this.transformer, node => node.level, node => node.expandable, node => node.children); + + dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); + + constructor() { + this.dataSource.data = TREE_DATA; + } + + hasChild = (_: number, node: ExampleFlatNode) => node.expandable; ngOnInit() { } + fileClicked(file) { + console.log('selected file:' + file); + } + } diff --git a/cds-ui/client/src/app/feature-modules/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..015fd7dfa --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.html @@ -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========================================================= +*/--> + +<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"> + <input matInput placeholder="Type" formControlName="_type"> + </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..119b7a80e --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.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-resource-metadata', + templateUrl: './resource-metadata.component.html', + styleUrls: ['./resource-metadata.component.scss'] +}) +export class ResourceMetadataComponent implements OnInit { + + ResourceMetadata: FormGroup; + + constructor(private _formBuilder: FormBuilder) { } + + ngOnInit() { + this.ResourceMetadata = this._formBuilder.group({ + Resource_Name: ['', Validators.required], + _tags: ['', Validators.required], + _description : ['', Validators.required], + _type: ['', Validators.required], + }); + } +} 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..ee59b70b3 --- /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]="todo" + class="sources-list" + (cdkDropListDropped)="drop($event)"> + <div class="sources-box" *ngFor="let item of todo" cdkDrag> + <mat-expansion-panel class="expansion-panel"> + <mat-expansion-panel-header> + <mat-panel-title> + {{item}} + </mat-panel-title> + </mat-expansion-panel-header> + {{item}} + </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]="done" + class="options-list" + (cdkDropListDropped)="drop($event)"> + <div class="options-box" *ngFor="let item of done | 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..149008518 --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts @@ -0,0 +1,57 @@ +/* +* ============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 {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; + +@Component({ + selector: 'app-sources-template', + templateUrl: './sources-template.component.html', + styleUrls: ['./sources-template.component.scss'] +}) +export class SourcesTemplateComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + + todo = [ + 'MDSAL' + ]; + + done = [ + 'INPUT', + 'DEFAULT', + 'DB', + 'NETBOX' + ]; + + 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); + } + } +} |