diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step')
8 files changed, 571 insertions, 0 deletions
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 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/relationship-operations-step/interface-operation-list/interface-operation-list.component.css 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 @@ +<!-- + ~ ============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========================================================= + --> + +<div class="operation-list"> + + <div + class="empty-list-container" + *ngIf="!(interfaceOperationList$ | async)?.length"> + <span>No operation provided</span> + </div> + + <div *ngIf="(interfaceOperationList$ | async)?.length"> + + <div class="expand-collapse"> + <a + class="link" + data-tests-id="expand-all" + [ngClass]="{'disabled': isAllExpanded()}" + (click)="toggleAllExpand()"> + {{ 'INTERFACE_EXPAND_ALL' | translate }} + </a> | + <a + class="link" + data-tests-id="collapse-all" + [ngClass]="{'disabled': isAllCollapsed()}" + (click)="toggleAllCollapse()"> + {{ 'INTERFACE_COLLAPSE_ALL' | translate }} + </a> + </div> + + <div + class="interface-row" + *ngFor="let interfaceType of getKeys(interfaceTypeMap)"> + + <div + class="interface-accordion" + (click)="toggleCollapse(interfaceType)"> + <span + class="chevron-container" + [ngClass]="{'isCollapsed': isInterfaceCollapsed(interfaceType)}"> + <svg-icon + name="caret1-down-o" + mode="primary" + size="small"> + </svg-icon> + </span> + <span class="interface-name">{{interfaceType}}</span> + </div> + + <div class="generic-table" *ngIf="isInterfaceCollapsed(interfaceType)"> + <div class="header-row table-row"> + <span + class="cell header-cell field-name"> + {{ 'OPERATION_NAME' | translate }} + </span> + <span + class="cell header-cell field-description"> + {{ 'OPERATION_IMPLEMENTATION' | translate }} + </span> + <span + class="cell header-cell field-actions header-actions"> + ●●● + </span> + </div> + <div + class="data-row" + *ngFor="let operation of interfaceTypeMap.get(interfaceType)" + [attr.data-tests-id]="'operation-' + operation.operationType" + (click)="onEditOperation(operation)"> + <span + class="cell field-name" + [attr.data-tests-id]="'operation-' + operation.operationType + '-name'"> + {{operation.operationType}} + </span> + <span + class="cell field-description" + [attr.data-tests-id]="'operation-' + operation.operationType + '-implementation'"> + {{operation.implementation}} + </span> + <span class="cell field-actions"> + <span + class="delete-action" + [attr.data-tests-id]="'remove-operation-' + operation.operationType" + (click)="onRemoveOperation($event, operation)"> + <svg-icon + *ngIf="!isReadOnly" + name="trash-o" + mode="info" + size="small" + [clickable]="true"> + </svg-icon> + </span> + </span> + </div> + + </div> + + </div> + + </div> + +</div>
\ 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<InterfaceOperationListComponent>; + + 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<Operation>) { + this.interfaceOperationList$.next(value); + } + @Output('onRemoveOperation') onRemoveOperationEmitter: EventEmitter<Operation> = new EventEmitter<Operation>(); + + interfaceOperationList$: BehaviorSubject<Array<Operation>>; + interfaceTypeMap: Map<string, Array<Operation>>; + expandCollapseControlMap: Map<string, boolean>; + + constructor() { + this.interfaceOperationList$ = new BehaviorSubject<Array<Operation>>(new Array<Operation>()); + this.expandCollapseControlMap = new Map<string, boolean>(); + } + + ngOnInit() { + this.loadInterfaces(); + } + + private loadInterfaces() { + this.interfaceOperationList$.subscribe(operationArray => { + this.interfaceTypeMap = new Map<string, Array<Operation>>(); + 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<string, Array<Operation>>) { + 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 @@ +<!-- + ~ ============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========================================================= + --> +<div class="relationship-operations-container"> + <div id="relationship-operation-actions" class="actions"> + <a + class="add-param-link add-btn" + *ngIf="!enableAddOperation" + (click)="addOperation()">{{ 'OPERATION_ADD1' | translate }}</a> + </div> + <div id="operation-list-container" class="operation-list-container"> + <app-interface-operation-list [interfaceOperationList]="operationList" [readonly]="false" (onRemoveOperation)="onRemoveOperation($event)"></app-interface-operation-list> + </div> + <div class="operations-create-container"> + <div> + <app-create-interface-operation *ngIf="enableAddOperation" [interfaceTypeMap]="interfaceTypeMap" (addOperation)="operationAdded($event)"> + </app-create-interface-operation> + </div> + </div> +</div>
\ 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<RelationshipOperationsStepComponent>; + + 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<string, Array<string>>; + component: IComponent; + operationList: Array<Operation>; + operationList$: Observable<Array<Operation>>; + 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<string, Array<string>>(); + } + + 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<Operation>(); + } + 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<string>(operation.operationType)); + return; + } + + const operationList = this.interfaceTypeMap.get(operation.interfaceType); + if (!operationList) { + this.interfaceTypeMap.set(operation.interfaceType, new Array<string>(operation.operationType)); + return; + } + operationList.push(operation.operationType); + operationList.sort(); + this.interfaceTypeMap.set(operation.interfaceType, operationList); + } + +} |