From bd5a1006210092f9ac5c48352cc94f6264e961ef Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Wed, 18 Nov 2020 18:13:58 +0000 Subject: Initial support for relationship_templates Change-Id: Ia246b9f11a77815c0585abfa0b3de5433728001a Issue-ID: SDC-3435 Signed-off-by: andre.schmid --- catalog-ui/src/app/models/graph/match-relation.ts | 21 +- catalog-ui/src/app/models/graph/relationship.ts | 10 +- .../properties-inputs/property-assignment.ts | 31 +++ .../graph/composition-graph.component.ts | 2 + .../connection-wizard/connection-wizard.module.ts | 43 +++- .../create-input-row.component.html | 53 +++++ .../create-input-row.component.less | 73 +++++++ .../create-input-row.component.spec.ts | 125 +++++++++++ .../create-input-row/create-input-row.component.ts | 72 +++++++ .../create-interface-operation.component.html | 141 +++++++++++++ .../create-interface-operation.component.less | 211 ++++++++++++++++++ .../create-interface-operation.component.spec.ts | 234 ++++++++++++++++++++ .../create-interface-operation.component.ts | 235 +++++++++++++++++++++ .../create-interface-operation/model/operation.ts | 39 ++++ .../interface-operation-list.component.css | 0 .../interface-operation-list.component.html | 118 +++++++++++ .../interface-operation-list.component.spec.ts | 49 +++++ .../interface-operation-list.component.ts | 111 ++++++++++ .../relationship-operations-step.component.html | 35 +++ .../relationship-operations-step.component.less | 29 +++ .../relationship-operations-step.component.spec.ts | 66 ++++++ .../relationship-operations-step.component.ts | 163 ++++++++++++++ catalog-ui/src/assets/languages/en_US.json | 13 +- 23 files changed, 1864 insertions(+), 10 deletions(-) create mode 100644 catalog-ui/src/app/models/properties-inputs/property-assignment.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.css create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.html create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.less create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.spec.ts create mode 100644 catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.ts (limited to 'catalog-ui/src') diff --git a/catalog-ui/src/app/models/graph/match-relation.ts b/catalog-ui/src/app/models/graph/match-relation.ts index 2a1b2146b9..3da6775650 100644 --- a/catalog-ui/src/app/models/graph/match-relation.ts +++ b/catalog-ui/src/app/models/graph/match-relation.ts @@ -21,7 +21,7 @@ import {Requirement} from "../requirement"; import {Capability} from "../capability"; import {Relationship, RelationshipModel} from "./relationship"; -import {PropertyModel} from "../properties"; +import {Operation} from "../../ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation"; export class Match { requirement:Requirement; @@ -29,6 +29,7 @@ export class Match { isFromTo:boolean; fromNode:string; toNode:string; + operations?:Array; private _relationship:Relationship; constructor(requirement:Requirement, capability:Capability, isFromTo:boolean, fromNode:string, toNode:string) { @@ -54,6 +55,7 @@ export class Match { public matchToRelation = ():Relationship => { const relationship:Relationship = new Relationship(); relationship.setRelationProperties(this.capability, this.requirement); + relationship.operations = this.operations; return relationship; }; @@ -74,5 +76,22 @@ export class Match { relationshipModel.setRelationshipModelParams(this.fromNode, this.toNode, [relationship]); return relationshipModel; }; + + public addToOperations(operation: Operation): void { + if (!this.operations) { + this.operations = new Array(); + } + this.operations.push(operation); + } + + public removeFromOperations(operation: Operation): void { + if (!this.operations) { + return; + } + const index = this.operations.indexOf(operation); + if (index > -1) { + this.operations.splice(index, 1); + } + } } diff --git a/catalog-ui/src/app/models/graph/relationship.ts b/catalog-ui/src/app/models/graph/relationship.ts index 13a1bd13e0..e39521a66a 100644 --- a/catalog-ui/src/app/models/graph/relationship.ts +++ b/catalog-ui/src/app/models/graph/relationship.ts @@ -21,6 +21,7 @@ import * as _ from "lodash"; import {Capability} from "../capability"; import {Requirement} from "../requirement"; +import {Operation} from "../../ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation"; export class RelationshipModel { fromNode:string; @@ -103,12 +104,19 @@ export class Relationship { relation: RelationshipType; capability?: Capability; requirement?: Requirement; + operations?:Array; constructor(fullRelationship?:Relationship) { if (fullRelationship) { this.relation = new RelationshipType(fullRelationship.relation); this.capability = fullRelationship.capability && new Capability(fullRelationship.capability); this.requirement = fullRelationship.requirement && new Requirement(fullRelationship.requirement); + if (fullRelationship.operations) { + this.operations = new Array(); + fullRelationship.operations.forEach(operation => { + this.operations.push(new Operation(operation)); + }); + } } else { this.relation = new RelationshipType(); } @@ -118,7 +126,7 @@ export class Relationship { this.relation.setRelationProperties(capability, requirement); this.capability = capability; this.requirement = requirement; - }; + } public toJSON = ():any => { let temp = angular.copy(this); diff --git a/catalog-ui/src/app/models/properties-inputs/property-assignment.ts b/catalog-ui/src/app/models/properties-inputs/property-assignment.ts new file mode 100644 index 0000000000..0c3ef8370e --- /dev/null +++ b/catalog-ui/src/app/models/properties-inputs/property-assignment.ts @@ -0,0 +1,31 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +export class PropertyAssignment { + + name: string + value: string + type: string + + constructor(type?: string) { + if (type) { + this.type = type; + } + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts index 45a7d4c576..c48231f2c6 100644 --- a/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts +++ b/catalog-ui/src/app/ng2/pages/composition/graph/composition-graph.component.ts @@ -65,6 +65,7 @@ import { import { CompositionGraphLinkUtils } from './utils/composition-graph-links-utils'; import { CompositionGraphPaletteUtils } from './utils/composition-graph-palette-utils'; import { ServicePathGraphUtils } from './utils/composition-graph-service-path-utils'; +import { RelationshipOperationsStepComponent } from "app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component"; declare const window: any; @@ -266,6 +267,7 @@ export class CompositionGraphComponent implements AfterViewInit { steps.push(new StepModel(fromNodeName, FromNodeStepComponent)); steps.push(new StepModel(toNodeName, ToNodeStepComponent)); steps.push(new StepModel('Properties', PropertiesStepComponent)); + steps.push(new StepModel('Operations', RelationshipOperationsStepComponent)); const wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName; const modalInstance = this.modalService.createMultiStepsWizard(wizardTitle, steps, this.createLinkFromMenu, ConnectionWizardHeaderComponent); modalInstance.instance.open(); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module.ts index 80464dc970..5039e573db 100644 --- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module.ts +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard.module.ts @@ -9,6 +9,19 @@ import {FormElementsModule} from "../../../../components/ui/form-components/form import {ConnectionWizardHeaderComponent} from "./connection-wizard-header/connection-wizard-header.component"; import {ConnectionPropertiesViewComponent} from "./connection-properties-view/connection-properties-view.component"; import {BrowserModule} from "@angular/platform-browser"; +import {RelationshipOperationsStepComponent} from './relationship-operations-step/relationship-operations-step.component'; +import {InterfaceOperationModule} from "../../../interface-operation/interface-operation.module"; +import {UiElementsModule} from "../../../../components/ui/ui-elements.module"; +import {TranslateModule} from "../../../../shared/translator/translate.module"; +import {SvgIconModule} from "onap-ui-angular/dist/svg-icon/svg-icon.module"; +import {OperationCreatorModule} from "../../../interface-operation/operation-creator/operation-creator.module"; +import {CreateInterfaceOperationComponent} from './create-interface-operation/create-interface-operation.component'; +import {DropdownModule} from "onap-ui-angular/dist/form-elements/dropdown/dropdown.module"; +import {InputModule} from "onap-ui-angular/dist/form-elements/text-elements/input/input.module"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {CreateInputRowComponent} from './create-interface-operation/create-input-row/create-input-row.component'; +import {InterfaceOperationListComponent} from './relationship-operations-step/interface-operation-list/interface-operation-list.component'; @NgModule({ declarations: [ @@ -16,24 +29,40 @@ import {BrowserModule} from "@angular/platform-browser"; ToNodeStepComponent, PropertiesStepComponent, ConnectionWizardHeaderComponent, - ConnectionPropertiesViewComponent - ], - imports: [ - FormElementsModule, - PropertyTableModule, - SelectRequirementOrCapabilityModule, - BrowserModule + ConnectionPropertiesViewComponent, + RelationshipOperationsStepComponent, + CreateInterfaceOperationComponent, + CreateInputRowComponent, + InterfaceOperationListComponent ], + imports: [ + FormElementsModule, + PropertyTableModule, + SelectRequirementOrCapabilityModule, + BrowserModule, + InterfaceOperationModule, + UiElementsModule, + TranslateModule, + SvgIconModule, + OperationCreatorModule, + DropdownModule, + InputModule, + FormsModule, + SdcUiComponentsModule, + ReactiveFormsModule + ], exports: [ FromNodeStepComponent, ToNodeStepComponent, PropertiesStepComponent, + RelationshipOperationsStepComponent, ConnectionWizardHeaderComponent, ConnectionPropertiesViewComponent ], entryComponents: [FromNodeStepComponent, ToNodeStepComponent, PropertiesStepComponent, + RelationshipOperationsStepComponent, ConnectionWizardHeaderComponent, ConnectionPropertiesViewComponent ], diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html new file mode 100644 index 0000000000..5181f32711 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html @@ -0,0 +1,53 @@ + + +
+ +
+ +
+
+
+ {{'OPERATION_INPUT_NAME_REQUIRED' | translate}} +
+
+
+ +
+ {{propertyAssignment.type}} +
+ +
+
+ +
+
+ +
+ + +
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less new file mode 100644 index 0000000000..316d49e406 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less @@ -0,0 +1,73 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +@import '../../../../../../../../assets/styles/variables.less'; + +.remove { + display: flex; + align-items: center; + justify-content: center; + + svg-icon { + position: relative; + right: -3px; + + &:hover { + cursor: pointer; + } + } +} + + +.cell { + min-height: 50px; + padding: 10px; + display: flex; + align-items: center; + + > * { + flex-basis: 100%; + } + + /deep/ select { + height: 30px; + } + + input { + height: 30px; + padding-left: 10px; + text-indent: 6px; + border: solid 1px @main_color_o; + } + + select { + width: 100%; + } + + &.field-property { + &:last-child { + flex: 1; + } + + .no-properties-error { + color: @func_color_q; + font-style: italic; + } + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts new file mode 100644 index 0000000000..cc1fd52273 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts @@ -0,0 +1,125 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {CreateInputRowComponent} from './create-input-row.component'; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {ReactiveFormsModule} from "@angular/forms"; +import {TranslatePipe} from "../../../../../../shared/translator/translate.pipe"; +import {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; + +describe('CreateInputRowComponent', () => { + let component: CreateInputRowComponent; + let fixture: ComponentFixture; + const nameField = 'name'; + const valueField = 'value'; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CreateInputRowComponent, TranslatePipe ], + imports: [ SdcUiComponentsModule, ReactiveFormsModule ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateInputRowComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('form is invalid when empty', () => { + expect(component.formGroup.valid).toBeFalsy(); + }); + + it('name field validity', () => { + expect(component.formGroup.valid).toBe(false); + expect(component.formGroup.contains(nameField)).toBe(true); + const nameFormControl = component.formGroup.get(nameField); + expect(nameFormControl.valid).toBeFalsy(); + let validationErrors = nameFormControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + + nameFormControl.setValue(''); + validationErrors = nameFormControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + + nameFormControl.setValue('a'); + expect(nameFormControl.valid).toBeTruthy(); + }); + + it('value field validity', () => { + expect(component.formGroup.valid).toBeFalsy(); + expect(component.formGroup.contains(valueField)).toBeTruthy(); + const valueFormControl = component.formGroup.get(valueField); + expect(valueFormControl.valid).toBeTruthy(); + }); + + it('test set value when form valid', () => { + expect(component.formGroup.valid).toBeFalsy(); + expect(component.propertyAssignment.name).toBeFalsy(); + expect(component.propertyAssignment.value).toBeFalsy(); + const nameFormCtrl = component.formGroup.get(nameField); + nameFormCtrl.setValue('aName'); + const valueFormCtrl = component.formGroup.get(valueField); + valueFormCtrl.setValue('aValue'); + expect(component.formGroup.valid).toBeTruthy(); + expect(component.propertyAssignment.name).toBe('aName'); + expect(component.propertyAssignment.value).toBe('aValue'); + }); + + it('test propertyAssignment initialization', () => { + const propertyAssignment = new PropertyAssignment(); + propertyAssignment.name = 'aName'; + propertyAssignment.value = 'aValue'; + component.propertyAssignment = propertyAssignment; + component.ngOnInit(); + expect(component.formGroup.valid).toBeTruthy(); + const nameFormCtrl = component.formGroup.get(nameField); + expect(nameFormCtrl.value).toBe(propertyAssignment.name); + const valueFormCtrl = component.formGroup.get(valueField); + expect(valueFormCtrl.value).toBe(propertyAssignment.value); + }); + + it('test propertyAssignment form binding', () => { + const propertyAssignment = new PropertyAssignment(); + component.propertyAssignment = propertyAssignment; + component.ngOnInit(); + const nameFormCtrl = component.formGroup.get(nameField); + nameFormCtrl.setValue('anotherName'); + const valueFormCtrl = component.formGroup.get(valueField); + valueFormCtrl.setValue('anotherValue'); + expect(nameFormCtrl.value).toBe(propertyAssignment.name); + expect(valueFormCtrl.value).toBe(propertyAssignment.value); + }); + + it('test input deletion', () => { + const expectedPropertyAssignment = new PropertyAssignment(); + let actualPropertyAssignment = null; + component.onDeleteEvent.subscribe((value) => actualPropertyAssignment = value); + component.onDelete(expectedPropertyAssignment); + expect(actualPropertyAssignment).toBe(expectedPropertyAssignment); + }); + +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts new file mode 100644 index 0000000000..629c5f3e49 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts @@ -0,0 +1,72 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {filter} from "rxjs/operators"; + +@Component({ + selector: 'app-create-input-row', + templateUrl: './create-input-row.component.html', + styleUrls: ['./create-input-row.component.less'] +}) +export class CreateInputRowComponent implements OnInit { + + @Input() propertyAssignment: PropertyAssignment; + @Input() isReadOnly: boolean; + @Output('onDelete') onDeleteEvent: EventEmitter = new EventEmitter(); + formGroup: FormGroup; + + constructor() { } + + ngOnInit() { + if (!this.propertyAssignment) { + this.propertyAssignment = new PropertyAssignment(); + } + this.formGroup = new FormGroup({ + name: new FormControl(this.propertyAssignment.name, [ + Validators.required + ]), + value: new FormControl(this.propertyAssignment.value) + }); + + this.formGroup.statusChanges + .pipe( + filter(() => this.formGroup.valid)) + .subscribe(() => this.onFormValid()); + } + + onDelete(propertyAssignment: PropertyAssignment) { + this.onDeleteEvent.emit(propertyAssignment); + } + + get formName() { + return this.formGroup.get('name'); + } + + get formValue() { + return this.formGroup.get('value'); + } + + private onFormValid() { + this.propertyAssignment.name = this.formName.value; + this.propertyAssignment.value = this.formValue.value; + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.html new file mode 100644 index 0000000000..a53135c6a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.html @@ -0,0 +1,141 @@ + + +
+ +
+
+ +
+
+ + +
+
+ {{'OPERATION_INTERFACE_REQUIRED_ERROR' | translate}} +
+
+
+ +
+ + +
+
+ {{'OPERATION_OPERATION_REQUIRED_ERROR' | translate}} +
+
+
+
+ +
+ +
+ +
+
+
+ {{'OPERATION_IMPLEMENTATION_REQUIRED_ERROR' | translate}} +
+
+ minLength +
+
+
+ +
+ + + + {{ 'OPERATION_ADD_INPUT' | translate }} +
+ +
+
+ {{ 'OPERATION_PARAM_NAME' | translate }} + {{ 'OPERATION_PARAM_TYPE' | translate }} + + {{ 'OPERATION_PARAM_VALUE' | translate }} + + ●●● +
+
+
+ {{ 'OPERATION_INPUT_NAME_UNIQUE_ERROR' | translate }} +
+
+ {{ 'OPERATION_INPUT_NAME_ERROR' | translate }} +
+
+ + + +
+
+ + + + +
+
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less new file mode 100644 index 0000000000..4c7f8aba48 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less @@ -0,0 +1,211 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +@import '../../../../../../../assets/styles/variables.less'; +@import '../../../../../../../assets/styles/override.less'; + +.operation-creator { + font-family: @font-opensans-regular; + user-select: none; + padding-top: 12px; + padding-bottom: 20px; + + .i-sdc-form-label { + font-size: 12px; + } + + .w-sdc-form .i-sdc-form-item { + margin-bottom: 15px; + } + + textarea { + min-height: 74px; + margin-bottom: 18px; + } + + /deep/ .sdc-dropdown__component-container { + .sdc-dropdown__header { + height: 38px; + line-height: 35px; + + svg-icon { + margin: 13px 6px; + } + } + } + + /deep/ .sdc-input { + margin-bottom: 0; + + .sdc-input__input { + height: 38px; + } + } + + .side-by-side { + display: flex; + + .form-item { + flex: 1; + + &:first-child { + margin-right: 14px; + flex-basis: 37%; + flex-grow: 0; + flex-shrink: 0; + } + + &:nth-child(3) { + margin-left: 14px; + flex: 0.4; + } + + .i-sdc-form-file-upload { + height: 37px; + margin-bottom: 0; + + .i-sdc-form-file-name { + padding: 8px 10px; + } + + .i-sdc-form-file-upload-x-btn { + top: 13px; + } + + .file-upload-browse-btn { + height: 100%; + padding: 7px 6px; + z-index: 1; + } + } + + } + } + + .archive-warning { + font-family: @font-opensans-bold; + color: @main_color_i; + } + + .no-workflow-warning { + font-family: @font-opensans-bold; + color: @sdcui_color_red; + float: right; + } + + .input-param-title { + font-size: 16px; + text-transform: uppercase; + } + + .separator-buttons { + display: flex; + justify-content: space-between; + margin-top: 10px; + + .add-param-link { + &:not(.disabled):hover { + cursor: pointer; + } + } + + .tab { + width: 84px; + text-align: center; + } + } + + .generic-table { + max-height: 244px; + min-height: 91px; + background: @main_color_p; + + .header-row .header-cell { + .info-icon { + float: right; + position: relative; + top: 2px; + } + /deep/ .tooltip-inner { + padding: 2px; + max-width: 270px; + font-size: 11px; + } + &.remove { + padding: 10px; + font-size: 10px; + } + } + + .data-row { + &.empty-msg { + .bold-message { + font-family: @font-opensans-bold; + } + + :first-child { + &:not(:only-child) { + margin: 6px 0; + } + } + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 14px; + } + } + + /deep/ .cell { + &.field-name, &.field-type { + flex: 1; + } + + &.field-property { + &, &:last-child { + flex: 1; + } + } + + &.field-mandatory { + flex: 0.5; + text-align: center; + } + + &.remove { + min-width: 40px; + max-width: 40px; + } + } + + } + + .create-interface-operation-footer { + border-top: solid 1px #eaeaea; + padding: 10px; + margin: 10px; + display: flex; + justify-content: flex-end; + align-items: center; + sdc-button { + margin: 0 5px; + } + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.spec.ts new file mode 100644 index 0000000000..8b830e0e62 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.spec.ts @@ -0,0 +1,234 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {CreateInterfaceOperationComponent} from './create-interface-operation.component'; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {CreateInputRowComponent} from "./create-input-row/create-input-row.component"; +import {FormControl, ReactiveFormsModule} from "@angular/forms"; +import {TabModule} from "../../../../../components/ui/tabs/tabs.module"; +import {UiElementsModule} from "../../../../../components/ui/ui-elements.module"; +import {TranslateService} from "../../../../../shared/translator/translate.service"; +import {TranslatePipe} from "../../../../../shared/translator/translate.pipe"; +import {Operation} from "./model/operation"; +import {PropertyAssignment} from "../../../../../../models/properties-inputs/property-assignment"; + +describe('CreateInterfaceOperationComponent', () => { + let component: CreateInterfaceOperationComponent; + let fixture: ComponentFixture; + const interfaceTypeFormName = 'interfaceType'; + const operationTypeFormName = 'operationType'; + const implementationFormName = 'implementation'; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [CreateInterfaceOperationComponent, CreateInputRowComponent, TranslatePipe], + imports: [SdcUiComponentsModule, ReactiveFormsModule, TabModule, + UiElementsModule], + providers: [ + {provide: TranslateService, useValue: {}} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateInterfaceOperationComponent); + component = fixture.componentInstance; + component.interfaceTypeMap = new Map>(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('form is invalid when empty', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + }); + + it('interface type field validity', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + expect(component.form.contains(interfaceTypeFormName)).toBeTruthy(); + assertRequiredFormCtrl(component.interfaceTypeFormCtrl, 'anInterfaceType'); + }); + + it('operation type field validity', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + expect(component.form.contains(operationTypeFormName)).toBeTruthy(); + assertRequiredFormCtrl(component.operationTypeFormCtrl, 'anOperationType'); + }); + + it('implementation type field validity', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + expect(component.form.contains(implementationFormName)).toBeTruthy(); + assertRequiredFormCtrl(component.implementationFormCtrl, 'just/an/implementation.sh'); + }); + + it('test loadInterfaceOptions on init', () => { + const interfaceTypeMap = new Map>(); + interfaceTypeMap.set('interface3', new Array()); + interfaceTypeMap.set('interface4', new Array()); + interfaceTypeMap.set('interface2', new Array()); + interfaceTypeMap.set('interface1', new Array()); + component.interfaceTypeMap = interfaceTypeMap; + component.ngOnInit(); + expect(component.interfaceTypeOptions.length).toBe(4); + expect(component.interfaceTypeOptions[0].label).toBe('interface1'); + expect(component.interfaceTypeOptions[0].value).toBe('interface1'); + expect(component.interfaceTypeOptions[1].label).toBe('interface2'); + expect(component.interfaceTypeOptions[1].value).toBe('interface2'); + expect(component.interfaceTypeOptions[2].label).toBe('interface3'); + expect(component.interfaceTypeOptions[2].value).toBe('interface3'); + expect(component.interfaceTypeOptions[3].label).toBe('interface4'); + expect(component.interfaceTypeOptions[3].value).toBe('interface4'); + }); + + it('test loadOperationOptions on init', () => { + const interfaceTypeMap = new Map>(); + const interface1Operations = new Array('interface1Operation3', + 'interface1Operation1', 'interface1Operation2', 'interface1Operation4'); + interfaceTypeMap.set('interface1', interface1Operations); + component.interfaceTypeMap = interfaceTypeMap; + component.selectedInterfaceType = { + value: 'interface1', + type: null, + label: 'interface1', + } + component.ngOnInit(); + expect(component.operationOptions.length).toBe(4); + expect(component.operationOptions[0].label).toBe('interface1Operation1'); + expect(component.operationOptions[0].value).toBe('interface1Operation1'); + expect(component.operationOptions[1].label).toBe('interface1Operation2'); + expect(component.operationOptions[1].value).toBe('interface1Operation2'); + expect(component.operationOptions[2].label).toBe('interface1Operation3'); + expect(component.operationOptions[2].value).toBe('interface1Operation3'); + expect(component.operationOptions[3].label).toBe('interface1Operation4'); + expect(component.operationOptions[3].value).toBe('interface1Operation4'); + }); + + it('test onSelectInterfaceType', () => { + const interfaceTypeMap = new Map>(); + interfaceTypeMap.set('interface1', new Array('', '', '', '')); + interfaceTypeMap.set('interface2', new Array()); + component.interfaceTypeMap = interfaceTypeMap; + component.ngOnInit(); + const selectedInterfaceType = { + value: 'interface1', + type: null, + label: 'interface1', + } + component.onSelectInterfaceType(selectedInterfaceType); + expect(component.selectedInterfaceType).toBe(selectedInterfaceType); + expect(component.interfaceTypeFormCtrl.value).toBe(selectedInterfaceType.value); + expect(component.operationOptions.length).toBe(4); + }); + + it('test onSelectOperation', () => { + component.ngOnInit(); + + const selectedOperationType = { + value: 'operation1', + type: null, + label: 'operation1', + } + component.onSelectOperation(selectedOperationType); + expect(component.selectedOperation).toBe(selectedOperationType); + expect(component.operationTypeFormCtrl.value).toBe(selectedOperationType.value); + }); + + it('test onChangeImplementation', () => { + component.ngOnInit(); + let implementation = null; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(implementation); + implementation = ''; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(null); + implementation = ' '; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(''); + implementation = 'implementation'; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(implementation); + }); + + it('test createOperation with valid operation', () => { + component.ngOnInit(); + const interfaceType = 'interfaceType'; + const operationType = 'operationType'; + const implementation = 'implementation'; + component.interfaceTypeFormCtrl.setValue(interfaceType); + component.operationTypeFormCtrl.setValue(operationType); + component.implementationFormCtrl.setValue(implementation); + const inputs = new Array(); + const input1 = new PropertyAssignment('string'); + input1.name = 'input1'; + input1.value = 'input1Value'; + inputs.push(input1) + component.inputs = inputs; + let operation: Operation = null; + component.addOperation.subscribe((operation1) => { + operation = operation1; + }); + component.createOperation(); + expect(operation).toBeTruthy(); + expect(operation.interfaceType).toBe(interfaceType); + expect(operation.operationType).toBe(operationType); + expect(operation.implementation).toBe(implementation); + expect(operation.inputs).toBe(inputs); + }); + + it('test createOperation with invalid operation', () => { + component.ngOnInit(); + let operation: Operation = null; + component.addOperation.subscribe((operation1) => { + operation = operation1; + }); + component.createOperation(); + expect(operation).toBe(null); + }); + + it('test onDeleteInput with not found input', () => { + component.ngOnInit(); + const input1 = new PropertyAssignment('string'); + const input2 = new PropertyAssignment('string'); + input2.name = 'input2'; + const input3 = new PropertyAssignment('string'); + input3.name = 'input3'; + component.inputs = new Array(input1, input2, input3); + component.onDeleteInput(input2); + expect(component.inputs.length).toBe(2); + expect(component.inputs.find(input => input.name === input2.name)).toBeFalsy(); + }); + + function assertRequiredFormCtrl(formControl: FormControl, valueToSet: any): void { + expect(formControl.valid).toBeFalsy(); + let validationErrors = formControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + formControl.setValue(''); + expect(validationErrors['required']).toBeTruthy(); + formControl.setValue(valueToSet); + expect(formControl.valid).toBeTruthy(); + } +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.ts new file mode 100644 index 0000000000..9990ac8484 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.ts @@ -0,0 +1,235 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models"; +import {DropDownComponent} from "onap-ui-angular/dist/components"; +import {PropertyAssignment} from "../../../../../../models/properties-inputs/property-assignment"; +import {Observable} from "rxjs"; +import {Operation} from "./model/operation"; +import {FormControl, FormGroup, Validators} from "@angular/forms"; + +@Component({ + selector: 'app-create-interface-operation', + templateUrl: './create-interface-operation.component.html', + styleUrls: ['./create-interface-operation.component.less'] +}) +export class CreateInterfaceOperationComponent implements OnInit { + @Input('interfaceTypeMap') interfaceTypeMap: Map>; + @Input('operation') private operation: Operation; + @Output('addOperation') addOperation: EventEmitter = new EventEmitter(); + @ViewChild('operationDropdown') operationDropdown: DropDownComponent; + + form: FormGroup; + isLoading: boolean; + isReadOnly: boolean; + currentInOutTab: string; + interfaceTypeOptions: Array; + operationOptions: Array; + selectedInterfaceType: TypedDropDownOption; + selectedOperation: TypedDropDownOption; + implementation: string; + inputs$: Observable>; + inputs: Array; + inputErrorMap: Map; + validationMessageList: Array; + interfaceTypeFormCtrl: FormControl; + operationTypeFormCtrl: FormControl; + implementationFormCtrl: FormControl; + + TYPE_INPUT = 'Inputs'; + TYPE_OUTPUT = 'Outputs'; + + + constructor() { + this.currentInOutTab = this.TYPE_INPUT; + this.inputErrorMap = new Map(); + } + + ngOnInit() { + if (!this.operation) { + this.operation = new Operation(); + } + + this.interfaceTypeFormCtrl = new FormControl(this.operation.interfaceType, [ + Validators.required + ]); + this.operationTypeFormCtrl = new FormControl(this.operation.operationType, [ + Validators.required + ]); + this.implementationFormCtrl = new FormControl(this.operation.implementation, [ + Validators.required + ]); + this.form = new FormGroup({ + interfaceType: this.interfaceTypeFormCtrl, + operationType: this.operationTypeFormCtrl, + implementation: this.implementationFormCtrl + }); + + this.isLoading = true; + this.isReadOnly = false; + this.loadInterfaceOptions(); + this.loadOperationOptions(); + this.loadOperationInputs(); + this.isLoading = false; + } + + private loadInterfaceOptions() { + this.interfaceTypeOptions = new Array(); + const interfaceTypeList = Array.from(this.interfaceTypeMap.keys()); + interfaceTypeList.sort(); + interfaceTypeList.forEach(interfaceType => { + this.interfaceTypeOptions.push(this.createInterfaceDropdownOption(interfaceType)); + }); + } + + private loadOperationOptions() { + this.operationOptions = new Array(); + if (!this.selectedInterfaceType) { + return; + } + + const operationArray: Array = this.interfaceTypeMap.get(this.selectedInterfaceType.value); + operationArray.sort(); + operationArray.forEach(operationName => + this.operationOptions.push(new TypedDropDownOption(operationName, operationName)) + ); + this.operationDropdown.allOptions = this.operationOptions; + } + + private loadOperationInputs() { + this.inputs = new Array(); + this.inputs$ = Observable.of(this.inputs); + } + + descriptionValue(): string { + return this.operation.description; + } + + addInput() { + this.inputs.push(new PropertyAssignment('string')); + } + + onSelectInterfaceType(selectedOption: IDropDownOption) { + this.selectedInterfaceType = selectedOption; + this.operation.interfaceType = selectedOption.value; + this.interfaceTypeFormCtrl.setValue(this.operation.interfaceType); + this.loadOperationOptions(); + } + + private createInterfaceDropdownOption(type: string) { + let label = type; + const lastDot = label.lastIndexOf('.'); + if (lastDot > -1) { + label = label.substr(lastDot + 1); + } + return new TypedDropDownOption(type, label); + } + + onSelectOperation(selectedOption: IDropDownOption) { + this.selectedOperation = selectedOption; + this.operation.operationType = selectedOption.value; + this.operationTypeFormCtrl.setValue(this.operation.operationType); + } + + onChangeImplementation(implementation: string) { + this.implementation = implementation ? implementation.trim() : null; + this.operation.implementation = this.implementation; + } + + onDeleteInput(input: PropertyAssignment): void { + const index = this.inputs.indexOf(input); + this.inputs.splice(index, 1); + } + + createOperation() { + this.form.updateValueAndValidity(); + if (this.isValid()) { + this.operation.interfaceType = this.interfaceTypeFormCtrl.value; + this.operation.operationType = this.operationTypeFormCtrl.value; + this.operation.implementation = this.implementationFormCtrl.value; + if (this.inputs) { + this.operation.inputs = this.inputs; + } + this.addOperation.emit(this.operation); + } + } + + onClickCancel() { + this.addOperation.emit(null); + } + + private isValid(): boolean { + if (this.form.invalid) { + return false; + } + + return this.validateInputs(); + } + + validateInputs(): boolean { + this.inputErrorMap = new Map(); + if (!this.inputs) { + return true; + } + + const inputNameSet = new Set(); + this.inputs.forEach(value => { + if (value.name) { + value.name = value.name.trim(); + if (!value.name) { + this.inputErrorMap.set('invalidName', true); + } + } else { + this.inputErrorMap.set('invalidName', true); + } + if (value.value) { + value.value = value.value.trim(); + } + //for later check of duplicate input name + inputNameSet.add(value.name); + }); + + if (inputNameSet.size != this.inputs.length) { + this.inputErrorMap.set('duplicatedName', true); + } + + return this.inputErrorMap.size == 0; + } + +} + +class DropDownOption implements IDropDownOption { + value: string; + label: string; + + constructor(value: string, label?: string) { + this.value = value; + this.label = label || value; + } +} + +class TypedDropDownOption extends DropDownOption { + type: string; + + constructor(value: string, label?: string, type?: string) { + super(value, label); + this.type = type; + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation.ts new file mode 100644 index 0000000000..d44481dbf9 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation.ts @@ -0,0 +1,39 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; + +export class Operation { + interfaceType: string; + operationType: string; + implementation: string; + description: string; + inputs: Array; + + + constructor(operation?:Operation) { + if (operation) { + this.interfaceType = operation.interfaceType; + this.operationType = operation.operationType; + this.implementation = operation.implementation; + this.description = operation.description; + this.inputs = operation.inputs; + } + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.css b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.html new file mode 100644 index 0000000000..360af52dbf --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.html @@ -0,0 +1,118 @@ + + +
+ +
+ No operation provided +
+ +
+ +
+ + {{ 'INTERFACE_EXPAND_ALL' | translate }} + | + + {{ 'INTERFACE_COLLAPSE_ALL' | translate }} + +
+ +
+ +
+ + + + + {{interfaceType}} +
+ +
+
+ + {{ 'OPERATION_NAME' | translate }} + + + {{ 'OPERATION_IMPLEMENTATION' | translate }} + + + ●●● + +
+
+ + {{operation.operationType}} + + + {{operation.implementation}} + + + + + + + +
+ +
+ +
+ +
+ +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.spec.ts new file mode 100644 index 0000000000..584edf01d3 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.spec.ts @@ -0,0 +1,49 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {InterfaceOperationListComponent} from './interface-operation-list.component'; +import {UiElementsModule} from "../../../../../../components/ui/ui-elements.module"; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {TranslatePipe} from "../../../../../../shared/translator/translate.pipe"; +import {TranslateService} from "../../../../../../shared/translator/translate.service"; + +describe('InterfaceOperationListComponent', () => { + let component: InterfaceOperationListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [InterfaceOperationListComponent, TranslatePipe], + imports: [SdcUiComponentsModule] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InterfaceOperationListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.ts new file mode 100644 index 0000000000..e14baf060b --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.ts @@ -0,0 +1,111 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {BehaviorSubject} from "rxjs"; +import {Operation} from "../../create-interface-operation/model/operation"; + +@Component({ + selector: 'app-interface-operation-list', + templateUrl: './interface-operation-list.component.html', + styleUrls: ['./interface-operation-list.component.css'] +}) +export class InterfaceOperationListComponent implements OnInit { + + @Input('readonly') isReadOnly: boolean; + @Input() set interfaceOperationList(value: Array) { + this.interfaceOperationList$.next(value); + } + @Output('onRemoveOperation') onRemoveOperationEmitter: EventEmitter = new EventEmitter(); + + interfaceOperationList$: BehaviorSubject>; + interfaceTypeMap: Map>; + expandCollapseControlMap: Map; + + constructor() { + this.interfaceOperationList$ = new BehaviorSubject>(new Array()); + this.expandCollapseControlMap = new Map(); + } + + ngOnInit() { + this.loadInterfaces(); + } + + private loadInterfaces() { + this.interfaceOperationList$.subscribe(operationArray => { + this.interfaceTypeMap = new Map>(); + operationArray.forEach(operation => { + if (this.interfaceTypeMap.has(operation.interfaceType)) { + let operations = this.interfaceTypeMap.get(operation.interfaceType); + operations.push(operation); + operations.sort((a, b) => a.operationType.localeCompare(b.operationType)); + this.interfaceTypeMap.set(operation.interfaceType, operations); + } else { + this.interfaceTypeMap.set(operation.interfaceType, new Array(operation)) + } + if (!this.expandCollapseControlMap.has(operation.interfaceType)) { + this.expandCollapseControlMap.set(operation.interfaceType, true); + } + }); + }); + } + + toggleAllExpand() { + this.toggleAll(true); + } + + toggleAllCollapse() { + this.toggleAll(false); + } + + private toggleAll(toggle: boolean) { + for (const key of Array.from(this.expandCollapseControlMap.keys())) { + this.expandCollapseControlMap.set(key, toggle); + } + } + + isAllExpanded(): boolean { + return Array.from(this.expandCollapseControlMap.values()).every(value => value); + } + + isAllCollapsed(): boolean { + return Array.from(this.expandCollapseControlMap.values()).every(value => !value); + } + + + onRemoveOperation($event: MouseEvent, operation: any) { + this.onRemoveOperationEmitter.emit(operation); + } + + onEditOperation(operation?: any) { + + } + + getKeys(interfaceTypeMap: Map>) { + return Array.from(interfaceTypeMap.keys()); + } + + toggleCollapse(interfaceType: string) { + this.expandCollapseControlMap.set(interfaceType, !this.expandCollapseControlMap.get(interfaceType)); + } + + isInterfaceCollapsed(interfaceType: string): boolean { + return this.expandCollapseControlMap.get(interfaceType); + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.html new file mode 100644 index 0000000000..7c49af88c3 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.html @@ -0,0 +1,35 @@ + +
+ +
+ +
+
+
+ + +
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.less new file mode 100644 index 0000000000..b2ac1892d9 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.less @@ -0,0 +1,29 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +.relationship-operations-container { + .actions { + display: flex; + justify-content: flex-end; + margin-bottom: 10px; + } + .operation-list-container { + margin: 10px 0 10px 0; + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.spec.ts new file mode 100644 index 0000000000..9dcf998940 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.spec.ts @@ -0,0 +1,66 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2020 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RelationshipOperationsStepComponent } from './relationship-operations-step.component'; +import {CreateInterfaceOperationComponent} from "../create-interface-operation/create-interface-operation.component"; +import {InterfaceOperationListComponent} from "./interface-operation-list/interface-operation-list.component"; +import {TranslatePipe} from "../../../../../shared/translator/translate.pipe"; +import {TranslateService} from "../../../../../shared/translator/translate.service"; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {CreateInputRowComponent} from "../create-interface-operation/create-input-row/create-input-row.component"; +import {ReactiveFormsModule} from "@angular/forms"; +import {TabModule} from "../../../../../components/ui/tabs/tabs.module"; +import {UiElementsModule} from "../../../../../components/ui/ui-elements.module"; +import {RouterModule} from "@angular/router"; +import {APP_BASE_HREF} from "@angular/common"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {ComponentServiceNg2} from "../../../../../services/component-services/component.service"; + +describe('RelationshipOperationsStepComponent', () => { + let component: RelationshipOperationsStepComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RelationshipOperationsStepComponent, CreateInterfaceOperationComponent, + CreateInputRowComponent, InterfaceOperationListComponent, TranslatePipe ], + providers: [ + {provide: TranslateService, useValue: {}}, + {provide: '$stateParams', useValue: {}}, + {provide: ConnectionWizardService, useValue: {}}, + {provide: ComponentServiceNg2, useValue: {}}, + ], + imports: [SdcUiComponentsModule, ReactiveFormsModule, TabModule, UiElementsModule] + + + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RelationshipOperationsStepComponent); + component = fixture.componentInstance; + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.ts new file mode 100644 index 0000000000..d595c2b8f6 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/relationship-operations-step.component.ts @@ -0,0 +1,163 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * 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. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, Inject, OnInit} from '@angular/core'; +import {IStepComponent} from "../../../../../../models/wizard-step"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {Component as IComponent} from "../../../../../../models/components/component"; +import {ComponentServiceNg2} from "../../../../../services/component-services/component.service"; +import {Observable} from "rxjs"; +import {Operation} from "../create-interface-operation/model/operation"; + +@Component({ + selector: 'app-relationship-operations-step', + templateUrl: './relationship-operations-step.component.html', + styleUrls: ['./relationship-operations-step.component.less'] +}) +export class RelationshipOperationsStepComponent implements OnInit, IStepComponent { + + private connectionWizardService: ConnectionWizardService; + private componentService: ComponentServiceNg2; + interfaceTypeMap: Map>; + component: IComponent; + operationList: Array; + operationList$: Observable>; + enableAddOperation: boolean; + + constructor(@Inject('$stateParams') private stateParams, + connectionWizardService: ConnectionWizardService, + componentService: ComponentServiceNg2) { + this.component = stateParams.component; + this.componentService = componentService; + this.connectionWizardService = connectionWizardService; + this.interfaceTypeMap = new Map>(); + } + + ngOnInit() { + this.loadOperationList(); + this.loadInterfaceTypeMap(); + } + + private loadOperationList(): void { + if (this.connectionWizardService.selectedMatch.operations) { + this.operationList = this.connectionWizardService.selectedMatch.operations.slice(); + } else { + this.operationList = new Array(); + } + this.operationList$ = Observable.of(this.operationList); + } + + private loadInterfaceTypeMap(): void { + this.componentService.getInterfaceTypes(null).subscribe(response => { + for (const interfaceType in response) { + let operationList = response[interfaceType]; + //ignore interfaceTypes that doesn't contain operations + if (operationList && operationList.length > 0) { + //remove operations already on the list + const existingOperations = + this.operationList.filter(operation => operation.interfaceType === interfaceType); + operationList = operationList + .filter(operationType => !existingOperations.find(operation => operation.operationType === operationType)); + if (operationList && operationList.length > 0) { + operationList.sort(); + this.interfaceTypeMap.set(interfaceType, operationList); + } + } + } + }); + } + + preventBack(): boolean { + return false; + } + + preventNext(): boolean { + return false; + } + + addOperation() { + this.enableAddOperation = !this.enableAddOperation; + } + + operationAdded(operation: Operation) { + this.enableAddOperation = false; + if (operation) { + const foundOperation = this.operationList + .find(operation1 => operation1.interfaceType === operation.interfaceType + && operation1.operationType === operation.operationType); + if (foundOperation) { + return; + } + this.operationList.push(operation); + this.operationList = this.operationList.slice(); + this.connectionWizardService.selectedMatch.addToOperations(operation); + this.removeFromInterfaceMap(operation); + } + } + + onRemoveOperation(operation: Operation) { + if (!this.operationList) { + return; + } + const index = this.operationList.indexOf(operation); + if (index > -1) { + this.operationList.splice(index, 1); + this.operationList = this.operationList.slice(); + this.connectionWizardService.selectedMatch.removeFromOperations(operation); + this.addToInterfaceMap(operation); + } + } + + private removeFromInterfaceMap(operation: Operation) { + if (!this.interfaceTypeMap.has(operation.interfaceType)) { + return; + } + const operationList = this.interfaceTypeMap.get(operation.interfaceType); + if (!operationList) { + return; + } + + const index = operationList.indexOf(operation.operationType); + if (index > -1) { + operationList.splice(index, 1); + } + if (operationList.length == 0) { + this.interfaceTypeMap.delete(operation.interfaceType); + } else { + this.interfaceTypeMap.set(operation.interfaceType, operationList); + } + } + + private addToInterfaceMap(operation: Operation) { + if (!this.interfaceTypeMap.has(operation.interfaceType)) { + this.interfaceTypeMap.set(operation.interfaceType, new Array(operation.operationType)); + return; + } + + const operationList = this.interfaceTypeMap.get(operation.interfaceType); + if (!operationList) { + this.interfaceTypeMap.set(operation.interfaceType, new Array(operation.operationType)); + return; + } + operationList.push(operation.operationType); + operationList.sort(); + this.interfaceTypeMap.set(operation.interfaceType, operationList); + } + +} diff --git a/catalog-ui/src/assets/languages/en_US.json b/catalog-ui/src/assets/languages/en_US.json index fd4a3826b3..cc33b36db2 100644 --- a/catalog-ui/src/assets/languages/en_US.json +++ b/catalog-ui/src/assets/languages/en_US.json @@ -467,6 +467,7 @@ "OPERATION_INTERFACE_TYPE": "Interface Name", "OPERATION_NAME": "Operation Name", + "OPERATION_IMPLEMENTATION": "Implementation", "OPERATION_DESCRIPTION": "Description", "OPERATION_ARTIFACT": "Workflow Artifact", "OPERATION_WORKFLOW_ASSIGNMENT": "Workflow Assignment", @@ -475,11 +476,21 @@ "OPERATION_NO_WORKFLOW_CONNECTION": "Failed to Load Workflows", "OPERATION_WORKFLOW_ARCHIVED": "Archived", "OPERATION_WORKFLOW_VERSION": "Workflow Version", - "OPERATION_ADD_PARAMS": "Add Paramaters", + "OPERATION_ADD_INPUT": "Add Input", "OPERATION_PARAM_NAME": "Name", "OPERATION_PARAM_TYPE": "Type", + "OPERATION_PARAM_VALUE": "Value", "OPERATION_PARAM_PROPERTY": "Property", "OPERATION_PARAM_MANDATORY": "Mandatory", + "OPERATION_ADD": "Add", + "OPERATION_ADD1": "Add Operation", + "OPERATION_CANCEL": "Cancel", + "OPERATION_INTERFACE_REQUIRED_ERROR": "Interface is required", + "OPERATION_OPERATION_REQUIRED_ERROR": "Operation is required", + "OPERATION_IMPLEMENTATION_REQUIRED_ERROR": "Implementation is required", + "OPERATION_INPUT_NAME_UNIQUE_ERROR": "The input names must be unique", + "OPERATION_INPUT_NAME_ERROR": "The input name must not be empty or blank", + "OPERATION_INPUT_NAME_REQUIRED": "Input name is required", "EMPTY_PARAM_TABLE_HEADER": "NO PARAMETERS TO SHOW", "EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1": "Select Workflow and Workflow Version above", -- cgit 1.2.3-korg