summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/composition
diff options
context:
space:
mode:
authorvasraz <vasyl.razinkov@est.tech>2022-03-24 18:31:14 +0000
committerVasyl Razinkov <vasyl.razinkov@est.tech>2022-04-04 16:56:40 +0000
commit4aff8f5eafb6fbd6cc2c764fa1a5a676fa05c89c (patch)
tree4fbb91db254b1e4791830f5f91673e58376b293e /catalog-ui/src/app/ng2/pages/composition
parentf6b81e6da9b95ec5ef2c8b2b7b50fb8de9f3dd28 (diff)
Implement adding Interface to VFC
Change-Id: I7cd8b82c306294d897d37d486aa3eeff7ca4206d Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech> Issue-ID: SDC-3893 Signed-off-by: andre.schmid <andre.schmid@est.tech>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition')
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less2
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts483
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html27
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts111
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts16
5 files changed, 372 insertions, 267 deletions
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
index 4c7f8aba48..ac917134f2 100644
--- 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
@@ -20,7 +20,7 @@
@import '../../../../../../../assets/styles/variables.less';
@import '../../../../../../../assets/styles/override.less';
-.operation-creator {
+.operation-creator-interface-definition {
font-family: @font-opensans-regular;
user-select: none;
padding-top: 12px;
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
index 07d8fd6eea..c17c130d92 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/interface-operations.component.ts
@@ -20,7 +20,9 @@
*/
import {Component, ComponentRef, Inject, Input} from '@angular/core';
-import {TopologyTemplateService} from '../../../services/component-services/topology-template.service';
+import {
+ TopologyTemplateService
+} from '../../../services/component-services/topology-template.service';
import {TranslateService} from "../../../shared/translator/translate.service";
import {ModalService} from 'app/ng2/services/modal.service';
import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
@@ -29,265 +31,282 @@ import {PluginsService} from "app/ng2/services/plugins.service";
import {SelectedComponentType} from "../common/store/graph.actions";
import {WorkspaceService} from "../../workspace/workspace.service";
-import {ComponentInterfaceDefinitionModel, InterfaceOperationModel} from "../../../../models/interfaceOperation";
-import {InterfaceOperationHandlerComponent} from "./operation-creator/interface-operation-handler.component";
-
-import {ArtifactModel, ButtonModel, ComponentInstance, ComponentMetadata, InputBEModel, InterfaceModel, ModalModel} from 'app/models';
+import {
+ ComponentInterfaceDefinitionModel,
+ InterfaceOperationModel
+} from "../../../../models/interfaceOperation";
+import {
+ InterfaceOperationHandlerComponent
+} from "./operation-creator/interface-operation-handler.component";
+
+import {
+ ArtifactModel,
+ ButtonModel,
+ ComponentInstance,
+ ComponentMetadata,
+ InputBEModel,
+ InterfaceModel,
+ ModalModel
+} from 'app/models';
import {ArtifactGroupType} from "../../../../utils/constants";
-import {DropdownValue} from "../../../components/ui/form-components/dropdown/ui-element-dropdown.component";
+import {
+ DropdownValue
+} from "../../../components/ui/form-components/dropdown/ui-element-dropdown.component";
import {ToscaArtifactService} from "../../../services/tosca-artifact.service";
import {ToscaArtifactModel} from "../../../../models/toscaArtifact";
export class UIInterfaceOperationModel extends InterfaceOperationModel {
- isCollapsed: boolean = true;
- isEllipsis: boolean;
- MAX_LENGTH = 75;
- constructor(operation: InterfaceOperationModel) {
- super(operation);
-
- if (!operation.description) {
- this.description = '';
- }
+ isCollapsed: boolean = true;
+ isEllipsis: boolean;
+ MAX_LENGTH = 75;
+
+ constructor(operation: InterfaceOperationModel) {
+ super(operation);
- if (this.description.length > this.MAX_LENGTH) {
- this.isEllipsis = true;
- } else {
- this.isEllipsis = false;
+ if (!operation.description) {
+ this.description = '';
+ }
+
+ if (this.description.length > this.MAX_LENGTH) {
+ this.isEllipsis = true;
+ } else {
+ this.isEllipsis = false;
+ }
}
- }
- getDescriptionEllipsis(): string {
- if (this.isCollapsed && this.description.length > this.MAX_LENGTH) {
- return this.description.substr(0, this.MAX_LENGTH - 3) + '...';
+ getDescriptionEllipsis(): string {
+ if (this.isCollapsed && this.description.length > this.MAX_LENGTH) {
+ return this.description.substr(0, this.MAX_LENGTH - 3) + '...';
+ }
+ return this.description;
}
- return this.description;
- }
- toggleCollapsed(e) {
- e.stopPropagation();
- this.isCollapsed = !this.isCollapsed;
- }
+ toggleCollapsed(e) {
+ e.stopPropagation();
+ this.isCollapsed = !this.isCollapsed;
+ }
}
class ModalTranslation {
- EDIT_TITLE: string;
- CANCEL_BUTTON: string;
- CLOSE_BUTTON: string;
- SAVE_BUTTON: string;
-
- constructor(private TranslateService: TranslateService) {
- this.TranslateService.languageChangedObservable.subscribe(lang => {
- this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE');
- this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
- this.CLOSE_BUTTON = this.TranslateService.translate("INTERFACE_CLOSE_BUTTON");
- this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
- });
- }
+ EDIT_TITLE: string;
+ CANCEL_BUTTON: string;
+ CLOSE_BUTTON: string;
+ SAVE_BUTTON: string;
+
+ constructor(private TranslateService: TranslateService) {
+ this.TranslateService.languageChangedObservable.subscribe(lang => {
+ this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE');
+ this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
+ this.CLOSE_BUTTON = this.TranslateService.translate("INTERFACE_CLOSE_BUTTON");
+ this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
+ });
+ }
}
export class UIInterfaceModel extends ComponentInterfaceDefinitionModel {
- isCollapsed: boolean = false;
-
- constructor(interf?: any) {
- super(interf);
- this.operations = _.map(
- this.operations,
- (operation) => new UIInterfaceOperationModel(operation)
- );
- }
-
- toggleCollapse() {
- this.isCollapsed = !this.isCollapsed;
- }
+ isCollapsed: boolean = false;
+
+ constructor(interf?: any) {
+ super(interf);
+ this.operations = _.map(
+ this.operations,
+ (operation) => new UIInterfaceOperationModel(operation)
+ );
+ }
+
+ toggleCollapse() {
+ this.isCollapsed = !this.isCollapsed;
+ }
}
@Component({
- selector: 'app-interface-operations',
- templateUrl: './interface-operations.component.html',
- styleUrls: ['./interface-operations.component.less'],
- providers: [ModalService, TranslateService]
+ selector: 'app-interface-operations',
+ templateUrl: './interface-operations.component.html',
+ styleUrls: ['./interface-operations.component.less'],
+ providers: [ModalService, TranslateService]
})
export class InterfaceOperationsComponent {
- interfaces: UIInterfaceModel[];
- inputs: Array<InputBEModel>;
- isLoading: boolean;
- interfaceTypes: { [interfaceType: string]: string[] };
- topologyTemplate: TopologyTemplate;
- componentMetaData: ComponentMetadata;
- componentInstanceSelected: ComponentInstance;
- modalInstance: ComponentRef<ModalComponent>;
- modalTranslation: ModalTranslation;
- componentInstancesInterfaces: Map<string, InterfaceModel[]>;
-
- deploymentArtifactsFilePath: Array<DropdownValue> = [];
- toscaArtifactTypes: Array<DropdownValue> = [];
-
- @Input() component: ComponentInstance;
- @Input() isViewOnly: boolean;
- @Input() enableMenuItems: Function;
- @Input() disableMenuItems: Function;
- @Input() componentType: SelectedComponentType;
-
-
- constructor(
- private TranslateService: TranslateService,
- private PluginsService: PluginsService,
- private topologyTemplateService: TopologyTemplateService,
- private toscaArtifactService: ToscaArtifactService,
- private modalServiceNg2: ModalService,
- private workspaceService: WorkspaceService,
- @Inject("Notification") private Notification: any,
- ) {
- this.modalTranslation = new ModalTranslation(TranslateService);
- }
-
- ngOnInit(): void {
- this.componentMetaData = this.workspaceService.metadata;
- this.loadComponentInstances();
- this.loadDeployedArtifacts();
- this.loadToscaArtifacts()
- }
-
- private loadComponentInstances() {
- this.isLoading = true;
- this.topologyTemplateService.getComponentInstances(this.componentMetaData.componentType, this.componentMetaData.uniqueId)
- .subscribe((response) => {
- this.componentInstanceSelected = response.componentInstances.find(ci => ci.uniqueId === this.component.uniqueId);
- this.initComponentInstanceInterfaceOperations();
- this.isLoading = false;
- });
- }
-
- private initComponentInstanceInterfaceOperations() {
- this.initInterfaces(this.componentInstanceSelected.interfaces);
- this.sortInterfaces();
- }
-
- private initInterfaces(interfaces: ComponentInterfaceDefinitionModel[]): void {
- this.interfaces = _.map(interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel));
- }
-
- private sortInterfaces(): void {
- this.interfaces = _.filter(this.interfaces, (interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces
- this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically
- _.forEach(this.interfaces, (interf) => {
- interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically
- });
- }
-
- collapseAll(value: boolean = true): void {
- _.forEach(this.interfaces, (interf) => {
- interf.isCollapsed = value;
- });
- }
-
- isAllCollapsed(): boolean {
- return _.every(this.interfaces, (interf) => interf.isCollapsed);
- }
-
- isAllExpanded(): boolean {
- return _.every(this.interfaces, (interf) => !interf.isCollapsed);
- }
-
- isListEmpty(): boolean {
- return _.filter(
- this.interfaces,
- (interf) => interf.operations && interf.operations.length > 0
- ).length === 0;
- }
-
- private enableOrDisableSaveButton = (): boolean => {
- return this.isViewOnly;
- }
-
- onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) {
-
- const buttonList = [];
- if (this.isViewOnly) {
- const closeButton: ButtonModel = new ButtonModel(this.modalTranslation.CLOSE_BUTTON, 'outline white', this.cancelAndCloseModal);
- buttonList.push(closeButton);
- } else {
- const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () =>
- this.updateInterfaceOperation(), this.enableOrDisableSaveButton);
- const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal);
- buttonList.push(saveButton);
- buttonList.push(cancelButton);
+ interfaces: UIInterfaceModel[];
+ inputs: Array<InputBEModel>;
+ isLoading: boolean;
+ interfaceTypes: { [interfaceType: string]: string[] };
+ topologyTemplate: TopologyTemplate;
+ componentMetaData: ComponentMetadata;
+ componentInstanceSelected: ComponentInstance;
+ modalInstance: ComponentRef<ModalComponent>;
+ modalTranslation: ModalTranslation;
+ componentInstancesInterfaces: Map<string, InterfaceModel[]>;
+
+ deploymentArtifactsFilePath: Array<DropdownValue> = [];
+ toscaArtifactTypes: Array<DropdownValue> = [];
+
+ @Input() component: ComponentInstance;
+ @Input() isViewOnly: boolean;
+ @Input() enableMenuItems: Function;
+ @Input() disableMenuItems: Function;
+ @Input() componentType: SelectedComponentType;
+
+
+ constructor(
+ private TranslateService: TranslateService,
+ private PluginsService: PluginsService,
+ private topologyTemplateService: TopologyTemplateService,
+ private toscaArtifactService: ToscaArtifactService,
+ private modalServiceNg2: ModalService,
+ private workspaceService: WorkspaceService,
+ @Inject("Notification") private Notification: any,
+ ) {
+ this.modalTranslation = new ModalTranslation(TranslateService);
+ }
+
+ ngOnInit(): void {
+ this.componentMetaData = this.workspaceService.metadata;
+ this.loadComponentInstances();
+ this.loadDeployedArtifacts();
+ this.loadToscaArtifacts()
+ }
+
+ private loadComponentInstances() {
+ this.isLoading = true;
+ this.topologyTemplateService.getComponentInstances(this.componentMetaData.componentType, this.componentMetaData.uniqueId)
+ .subscribe((response) => {
+ this.componentInstanceSelected = response.componentInstances.find(ci => ci.uniqueId === this.component.uniqueId);
+ this.initComponentInstanceInterfaceOperations();
+ this.isLoading = false;
+ });
+ }
+
+ private initComponentInstanceInterfaceOperations() {
+ this.initInterfaces(this.componentInstanceSelected.interfaces);
+ this.sortInterfaces();
+ }
+
+ private initInterfaces(interfaces: ComponentInterfaceDefinitionModel[]): void {
+ this.interfaces = _.map(interfaces, (interfaceModel) => new UIInterfaceModel(interfaceModel));
+ }
+
+ private sortInterfaces(): void {
+ this.interfaces = _.filter(this.interfaces, (interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces
+ this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically
+ _.forEach(this.interfaces, (interf) => {
+ interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically
+ });
+ }
+
+ collapseAll(value: boolean = true): void {
+ _.forEach(this.interfaces, (interf) => {
+ interf.isCollapsed = value;
+ });
+ }
+
+ isAllCollapsed(): boolean {
+ return _.every(this.interfaces, (interf) => interf.isCollapsed);
+ }
+
+ isAllExpanded(): boolean {
+ return _.every(this.interfaces, (interf) => !interf.isCollapsed);
+ }
+
+ isListEmpty(): boolean {
+ return _.filter(
+ this.interfaces,
+ (interf) => interf.operations && interf.operations.length > 0
+ ).length === 0;
+ }
+
+ private enableOrDisableSaveButton = (): boolean => {
+ return this.isViewOnly;
}
- const modalModel: ModalModel = new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', buttonList, 'custom');
- this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
-
- this.modalServiceNg2.addDynamicContentToModal(
- this.modalInstance,
- InterfaceOperationHandlerComponent,
- {
- deploymentArtifactsFilePath: this.deploymentArtifactsFilePath,
- toscaArtifactTypes: this.toscaArtifactTypes,
- selectedInterface: interfaceModel,
- selectedInterfaceOperation: operation,
- validityChangedCallback: this.enableOrDisableSaveButton,
- isViewOnly: this.isViewOnly
+
+ onSelectInterfaceOperation(interfaceModel: UIInterfaceModel, operation: InterfaceOperationModel) {
+
+ const buttonList = [];
+ if (this.isViewOnly) {
+ const closeButton: ButtonModel = new ButtonModel(this.modalTranslation.CLOSE_BUTTON, 'outline white', this.cancelAndCloseModal);
+ buttonList.push(closeButton);
+ } else {
+ const saveButton: ButtonModel = new ButtonModel(this.modalTranslation.SAVE_BUTTON, 'blue', () =>
+ this.updateInterfaceOperation(), this.enableOrDisableSaveButton);
+ const cancelButton: ButtonModel = new ButtonModel(this.modalTranslation.CANCEL_BUTTON, 'outline white', this.cancelAndCloseModal);
+ buttonList.push(saveButton);
+ buttonList.push(cancelButton);
}
- );
- this.modalInstance.instance.open();
- }
-
- private cancelAndCloseModal = () => {
- this.loadComponentInstances();
- return this.modalServiceNg2.closeCurrentModal();
- }
-
- private updateInterfaceOperation() {
- this.isLoading = true;
- const interfaceOperationHandlerComponentInstance: InterfaceOperationHandlerComponent = this.modalInstance.instance.dynamicContent.instance;
- const operationUpdated: InterfaceOperationModel = interfaceOperationHandlerComponentInstance.operationToUpdate;
- const isArtifactChecked = interfaceOperationHandlerComponentInstance.enableAddArtifactImplementation;
- if (!isArtifactChecked) {
- let artifactName = interfaceOperationHandlerComponentInstance.artifactName;
- artifactName = artifactName === undefined ? '' : artifactName;
- operationUpdated.implementation = new ArtifactModel({'artifactName': artifactName} as ArtifactModel);
+ const modalModel: ModalModel = new ModalModel('l', this.modalTranslation.EDIT_TITLE, '', buttonList, 'custom');
+ this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
+
+ this.modalServiceNg2.addDynamicContentToModal(
+ this.modalInstance,
+ InterfaceOperationHandlerComponent,
+ {
+ deploymentArtifactsFilePath: this.deploymentArtifactsFilePath,
+ toscaArtifactTypes: this.toscaArtifactTypes,
+ selectedInterface: interfaceModel ? interfaceModel : new UIInterfaceModel(),
+ selectedInterfaceOperation: operation ? operation : new InterfaceOperationModel(),
+ validityChangedCallback: this.enableOrDisableSaveButton,
+ isViewOnly: this.isViewOnly
+ }
+ );
+ this.modalInstance.instance.open();
+ }
+
+ private cancelAndCloseModal = () => {
+ this.loadComponentInstances();
+ return this.modalServiceNg2.closeCurrentModal();
}
- this.topologyTemplateService.updateComponentInstanceInterfaceOperation(
- this.componentMetaData.uniqueId,
- this.componentMetaData.componentType,
- this.componentInstanceSelected.uniqueId,
- operationUpdated)
+
+ private updateInterfaceOperation() {
+ this.isLoading = true;
+ const interfaceOperationHandlerComponentInstance: InterfaceOperationHandlerComponent = this.modalInstance.instance.dynamicContent.instance;
+ const operationUpdated: InterfaceOperationModel = interfaceOperationHandlerComponentInstance.operationToUpdate;
+ const isArtifactChecked = interfaceOperationHandlerComponentInstance.enableAddArtifactImplementation;
+ if (!isArtifactChecked) {
+ let artifactName = interfaceOperationHandlerComponentInstance.artifactName;
+ artifactName = artifactName === undefined ? '' : artifactName;
+ operationUpdated.implementation = new ArtifactModel({'artifactName': artifactName} as ArtifactModel);
+ }
+ this.topologyTemplateService.updateComponentInstanceInterfaceOperation(
+ this.componentMetaData.uniqueId,
+ this.componentMetaData.componentType,
+ this.componentInstanceSelected.uniqueId,
+ operationUpdated)
.subscribe((updatedComponentInstance: ComponentInstance) => {
this.componentInstanceSelected = new ComponentInstance(updatedComponentInstance);
this.initComponentInstanceInterfaceOperations();
});
- this.modalServiceNg2.closeCurrentModal();
- this.isLoading = false;
- }
-
- loadDeployedArtifacts() {
- this.topologyTemplateService.getArtifactsByType(this.componentMetaData.componentType, this.componentMetaData.uniqueId, ArtifactGroupType.DEPLOYMENT)
- .subscribe(response => {
- let artifactsDeployment = response.deploymentArtifacts;
- if (artifactsDeployment) {
- let deploymentArtifactsFound = <ArtifactModel[]>_.values(artifactsDeployment)
- deploymentArtifactsFound.forEach(value => {
- this.deploymentArtifactsFilePath.push(new DropdownValue(value, value.artifactType.concat('->').concat(value.artifactName)));
+ this.modalServiceNg2.closeCurrentModal();
+ this.isLoading = false;
+ }
+
+ loadDeployedArtifacts() {
+ this.topologyTemplateService.getArtifactsByType(this.componentMetaData.componentType, this.componentMetaData.uniqueId, ArtifactGroupType.DEPLOYMENT)
+ .subscribe(response => {
+ let artifactsDeployment = response.deploymentArtifacts;
+ if (artifactsDeployment) {
+ let deploymentArtifactsFound = <ArtifactModel[]>_.values(artifactsDeployment)
+ deploymentArtifactsFound.forEach(value => {
+ this.deploymentArtifactsFilePath.push(new DropdownValue(value, value.artifactType.concat('->').concat(value.artifactName)));
+ });
+ }
+ }, error => {
+ this.Notification.error({
+ message: 'Failed to Load the Deployed Artifacts:' + error,
+ title: 'Failure'
+ });
+ });
+ }
+
+ loadToscaArtifacts() {
+ this.toscaArtifactService.getToscaArtifacts(this.componentMetaData.model).subscribe(response => {
+ if (response) {
+ let toscaArtifactsFound = <ToscaArtifactModel[]>_.values(response);
+ toscaArtifactsFound.forEach(value => this.toscaArtifactTypes.push(new DropdownValue(value, value.type)));
+ }
+ }, error => {
+ this.Notification.error({
+ message: 'Failed to Load Tosca Artifacts:' + error,
+ title: 'Failure'
+ });
});
- }}, error => {
- this.Notification.error({
- message: 'Failed to Load the Deployed Artifacts:' + error,
- title: 'Failure'
- });
- });
- }
-
- loadToscaArtifacts() {
- this.toscaArtifactService.getToscaArtifacts(this.componentMetaData.model).subscribe(response => {
- if (response) {
- let toscaArtifactsFound = <ToscaArtifactModel[]>_.values(response);
- toscaArtifactsFound.forEach(value => this.toscaArtifactTypes.push(new DropdownValue(value, value.type)));
- }
- }, error => {
- this.Notification.error({
- message: 'Failed to Load Tosca Artifacts:' + error,
- title: 'Failure'
- });
- });
- }
+ }
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index 7a73a5babc..5f02bc2bf7 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -25,19 +25,30 @@
<div class="side-by-side">
<div class="form-item">
- <sdc-input
+ <sdc-dropdown
label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
- [(value)]="interfaceType"
- [disabled]=!isViewOnly>
- </sdc-input>
+ [required]="true"
+ [testId]="'interface-name'"
+ [selectedOption]="selectedInterfaceType"
+ [placeHolder]="'Select...'"
+ [disabled]="isViewOnly || isEdit"
+ (changed)="onSelectInterface($event)"
+ [options]="interfaceTypeOptions">
+ </sdc-dropdown>
</div>
<div class="form-item">
- <sdc-input
+ <sdc-dropdown
+ #interfaceOperationDropDown
label="{{ 'OPERATION_NAME' | translate }}"
- [(value)]="operationToUpdate.name"
- [disabled]=!isViewOnly>
- </sdc-input>
+ [required]="true"
+ [testId]="'operation-name'"
+ [selectedOption]="selectedInterfaceOperation"
+ [placeHolder]="'Select...'"
+ [disabled]="isViewOnly || isEdit"
+ (changed)="onSelectOperation($event)"
+ [options]="interfaceOperationOptions">
+ </sdc-dropdown>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
index 059708592e..5cc7f691aa 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts
@@ -18,17 +18,18 @@
* SPDX-License-Identifier: Apache-2.0
* ============LICENSE_END=========================================================
*/
-
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {UIInterfaceModel} from "../interface-operations.component";
import {InputOperationParameter, InterfaceOperationModel, IOperationParamsList} from "../../../../../models/interfaceOperation";
import {TranslateService} from "../../../../shared/translator/translate.service";
-import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
import {DropdownValue} from "../../../../components/ui/form-components/dropdown/ui-element-dropdown.component";
import {ArtifactModel} from "../../../../../models/artifacts";
import {PropertyBEModel} from "../../../../../models/properties-inputs/property-be-model";
import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component";
import {PropertyFEModel} from "../../../../../models/properties-inputs/property-fe-model";
+import {IDropDownOption} from 'onap-ui-angular';
+import {ComponentServiceNg2} from "../../../../services/component-services/component.service";
+import {DropDownComponent} from "onap-ui-angular/dist/form-elements/dropdown/dropdown.component";
import {DataTypeService} from "../../../../services/data-type.service";
import {Observable} from "rxjs/Observable";
import {DataTypeModel} from "../../../../../models/data-types";
@@ -43,13 +44,15 @@ export class InterfaceOperationHandlerComponent {
@Input() private modelName: string;
@Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
+ @ViewChild('interfaceOperationDropDown') interfaceOperationDropDown: DropDownComponent;
+
input: {
toscaArtifactTypes: Array<DropdownValue>;
selectedInterface: UIInterfaceModel;
selectedInterfaceOperation: InterfaceOperationModel;
validityChangedCallback: Function;
isViewOnly: boolean;
- interfaceTypesMap: Map<string, string[]>;
+ isEdit: boolean;
};
dataTypeMap$: Observable<Map<string, DataTypeModel>>;
@@ -64,10 +67,13 @@ export class InterfaceOperationHandlerComponent {
isLoading: boolean = false;
readonly: boolean;
isViewOnly: boolean;
+ isEdit: boolean;
interfaceTypes: Array<DropdownValue> = [];
- interfaceOperations: Array<DropdownValue> = [];
-
- interfaceTypesMap: Map<string, string[]>;
+ interfaceTypeOptions: Array<DropDownOption> = [];
+ selectedInterfaceType: DropDownOption = undefined;
+ interfaceOperationMap: Map<string, Array<string>> = new Map<string, Array<string>>();
+ interfaceOperationOptions: Array<DropDownOption> = [];
+ selectedInterfaceOperation: DropDownOption = undefined;
toscaArtifactTypeSelected: string;
toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
@@ -80,7 +86,7 @@ export class InterfaceOperationHandlerComponent {
propertyValueValid: boolean = true;
inputTypeOptions: any[];
- constructor(private dataTypeService: DataTypeService) {
+ constructor(private dataTypeService: DataTypeService, private componentServiceNg2: ComponentServiceNg2) {
this.dataTypeMap$ = new Observable<Map<string, DataTypeModel>>(subscriber => {
this.dataTypeService.findAllDataTypesByModel(this.modelName)
.then((dataTypesMap: Map<string, DataTypeModel>) => {
@@ -95,6 +101,7 @@ export class InterfaceOperationHandlerComponent {
ngOnInit() {
this.isViewOnly = this.input.isViewOnly;
+ this.isEdit = this.input.isEdit;
this.interfaceType = this.input.selectedInterface.type;
this.operationToUpdate = this.input.selectedInterfaceOperation;
this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;
@@ -113,18 +120,56 @@ export class InterfaceOperationHandlerComponent {
}
this.inputs = Array.from(this.operationToUpdate.inputs.listToscaDataDefinition);
- this.interfaceTypesMap = this.input.interfaceTypesMap;
- this.loadInterfaceTypesAndOperations();
this.removeImplementationQuote();
this.validityChanged();
this.loadInterfaceOperationImplementation();
+ this.loadInterfaceType();
+ }
+
+ private loadInterfaceType() {
+ this.componentServiceNg2.getInterfaceTypesByModel(undefined)
+ .subscribe(response => {
+ if (response) {
+ this.interfaceOperationMap = new Map<string, Array<string>>();
+ for (const interfaceType of Object.keys(response).sort()) {
+ const operationList = response[interfaceType];
+ operationList.sort();
+ this.interfaceOperationMap.set(interfaceType, operationList);
+ const operationDropDownOption: DropDownOption = new DropDownOption(interfaceType);
+ this.interfaceTypeOptions.push(operationDropDownOption);
+ if (this.interfaceType == interfaceType) {
+ this.selectedInterfaceType = operationDropDownOption;
+ }
+ }
+ this.loadInterfaceTypeOperations();
+ }
+ });
+ }
+
+ loadInterfaceTypeOperations() {
+ this.interfaceOperationOptions = new Array<DropDownOption>();
+ const interfaceOperationList = this.interfaceOperationMap.get(this.interfaceType);
+
+ if (interfaceOperationList) {
+ interfaceOperationList.forEach(operationName => {
+ const operationOption = new DropDownOption(operationName, operationName);
+ this.interfaceOperationOptions.push(operationOption);
+ if (this.operationToUpdate.name == operationName) {
+ this.selectedInterfaceOperation = operationOption
+ }
+ });
+ }
+
+ this.interfaceOperationDropDown.allOptions = this.interfaceOperationOptions;
}
private loadInterfaceOperationImplementation() {
this.toscaArtifactTypes = this.input.toscaArtifactTypes;
- this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
- this.artifactName = this.operationToUpdate.implementation.artifactName;
- this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
+ if (this.operationToUpdate.implementation) {
+ this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
+ this.artifactName = this.operationToUpdate.implementation.artifactName;
+ this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
+ }
this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
this.getArtifactTypesSelected();
}
@@ -348,11 +393,43 @@ export class InterfaceOperationHandlerComponent {
return inputList;
}
- private loadInterfaceTypesAndOperations() {
- console.log("loadInterfaceTypesAndOperations ", this.interfaceTypesMap.keys());
+ onSelectInterface(dropDownOption: DropDownOption) {
+ if (dropDownOption) {
+ this.setInterfaceType(dropDownOption);
+ } else {
+ this.setInterfaceType(undefined);
+ }
+ this.setInterfaceOperation(undefined);
+ this.interfaceOperationDropDown.selectOption({} as IDropDownOption);
+ this.loadInterfaceTypeOperations();
+ }
- Array.from(this.interfaceTypesMap.keys()).forEach(value => this.interfaceTypes.push(new DropdownValue(value, value)));
- console.log("loadInterfaceTypesAndOperations interfaceType ", this.interfaceTypes);
+ onSelectOperation(dropDownOption: DropDownOption) {
+ if (this.selectedInterfaceType && dropDownOption) {
+ this.setInterfaceOperation(dropDownOption);
+ }
}
+ private setInterfaceType(dropDownOption: DropDownOption) {
+ this.selectedInterfaceType = dropDownOption ? dropDownOption : undefined;
+ this.interfaceType = dropDownOption ? dropDownOption.value : undefined;
+ this.operationToUpdate.interfaceType = dropDownOption ? dropDownOption.value : undefined;
+ this.operationToUpdate.interfaceId = dropDownOption ? dropDownOption.value : undefined;
+ }
+
+ private setInterfaceOperation(dropDownOption: DropDownOption) {
+ this.operationToUpdate.name = dropDownOption ? dropDownOption.value : undefined;
+ this.operationToUpdate.operationType = dropDownOption ? dropDownOption.value : undefined;
+ this.selectedInterfaceOperation = dropDownOption ? dropDownOption : undefined;
+ }
}
+
+class DropDownOption implements IDropDownOption {
+ value: string;
+ label: string;
+
+ constructor(value: string, label?: string) {
+ this.value = value;
+ this.label = label || value;
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts
index b212eec034..bcc797c64c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.module.ts
@@ -25,16 +25,14 @@ import {CommonModule} from "@angular/common";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
import {TranslateModule} from "app/ng2/shared/translator/translate.module";
-
-
+import {AddInputComponent} from './add-input/add-input.component';
+import {InputListComponent} from './input-list/input-list.component';
+import {InputListItemComponent} from './input-list/input-list-item/input-list-item.component';
+import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component";
+import {InterfaceOperationHandlerComponent} from "./interface-operation-handler.component";
import {SdcUiComponentsModule} from "onap-ui-angular/dist";
-import { InterfaceOperationHandlerComponent } from "app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component";
-import { PropertyParamRowComponent } from "app/ng2/pages/composition/interface-operatons/operation-creator/property-param-row/property-param-row.component";
-import { UiElementsModule } from "app/ng2/components/ui/ui-elements.module";
-import { PropertyTableModule } from "app/ng2/components/logic/properties-table/property-table.module";
-import { AddInputComponent } from './add-input/add-input.component';
-import { InputListComponent } from './input-list/input-list.component';
-import { InputListItemComponent } from './input-list/input-list-item/input-list-item.component';
+import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
+import {PropertyTableModule} from "app/ng2/components/logic/properties-table/property-table.module";
@NgModule({
declarations: [