summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2
diff options
context:
space:
mode:
authorandre.schmid <andre.schmid@est.tech>2022-03-07 18:48:09 +0000
committerMichael Morris <michael.morris@est.tech>2022-03-11 16:48:13 +0000
commite5488e5e3623646125802b8ab7e12b7159a2c0d3 (patch)
tree58c896b9d2f434041cff1cafad7835dd9cd691f3 /catalog-ui/src/app/ng2
parentf13f58eb867c763e6ed1c3b674fd99b1081a0664 (diff)
Support complex types in artifact properties
Adds support to complex types in artifact properties of an interface operation implementation. Change-Id: I7a82a3652541b35230fe4ce87bf703a1dbe72d50 Issue-ID: SDC-3899 Signed-off-by: andre.schmid <andre.schmid@est.tech>
Diffstat (limited to 'catalog-ui/src/app/ng2')
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts3
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html6
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts1
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts5
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html35
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less7
-rw-r--r--catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts31
7 files changed, 66 insertions, 22 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
index cd75fe87e6..7c0465f62a 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
@@ -42,6 +42,7 @@ export class InputListItemComponent implements OnInit {
@Input() isMapChild: boolean = false;
@Input() listIndex: number;
@Input() isViewOnly: boolean;
+ @Input() allowDeletion: boolean = false;
@Output('onValueChange') onValueChangeEvent: EventEmitter<any> = new EventEmitter<any>();
@Output('onDelete') onDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
@Output('onChildListItemDelete') onChildListItemDeleteEvent: EventEmitter<number> = new EventEmitter<number>();
@@ -145,7 +146,7 @@ export class InputListItemComponent implements OnInit {
}
showInputDelete(): boolean {
- return !this.isViewOnly && (this.isRoot() || this.isMapChild);
+ return this.allowDeletion && !this.isViewOnly && (this.isRoot() || this.isMapChild);
}
resolveType(): string {
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
index 802bd63838..273fc7eac1 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
@@ -19,8 +19,11 @@
~ ============LICENSE_END=========================================================
-->
-<label>{{ 'INPUT_LIST_TITLE' | translate }}</label>
+<label *ngIf="title">{{title}}</label>
<div class="input-tree">
+ <div *ngIf="!_inputs.length">
+ {{emptyMessage}}
+ </div>
<ul *ngFor="let input of _inputs">
<app-input-list-item
[name]="input.name"
@@ -29,6 +32,7 @@
[valueObjRef]="input.value"
[schema]="input.schema"
[isViewOnly]="isViewOnly"
+ [allowDeletion]="allowDeletion"
(onValueChange)="onValueChange($event)"
(onDelete)="onDelete($event)">
</app-input-list-item>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
index b07a4bb55f..99cfd21566 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
@@ -34,6 +34,7 @@ class InputListItemStubComponent {
@Input() dataTypeMap: any;
@Input() valueObjRef: any;
@Input() schema: any;
+ @Input() allowDeletion: any;
@Input() isViewOnly: boolean;
}
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
index 72812d810d..832a40e841 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
@@ -45,10 +45,13 @@ export class InputListComponent {
}
@Input() dataTypeMap: Map<string, DataTypeModel>;
@Input() isViewOnly: boolean;
+ @Input() title: string;
+ @Input() emptyMessage: string;
+ @Input() allowDeletion: boolean = false;
@Output('onValueChange') inputValueChangeEvent: EventEmitter<InputOperationParameter> = new EventEmitter<InputOperationParameter>();
@Output('onDelete') inputDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
- _inputs: Array<InputOperationParameter>;
+ _inputs: Array<InputOperationParameter> = [];
getDataType(type: string): DataTypeModel {
return this.dataTypeMap.get(type);
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 46db3b94a9..ce4738a780 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
@@ -104,30 +104,27 @@
</div>
</div>
<div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
- <label class="sdc-input__label">{{ 'ENTITY_VIEWER_PROPERTIES_TAB' | translate }}</label>
- <div class="generic-table">
- <div class="header-row table-row">
- <span class="cell header-cell field-input-name">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_NAME' | translate }}</span>
- <span class="cell header-cell field-input-type">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_TYPE' | translate }}</span>
- <span class="cell header-cell field-input-value">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_VALUE' | translate }}</span>
- </div>
-
- <div class="empty-msg data-row" *ngIf="!toscaArtifactTypeProperties.length">
- <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
- </div>
- <property-param-row
- *ngFor="let property of toscaArtifactTypeProperties"
- class="data-row"
- [artifactProperty]="property"
- [isPropertyValueValid]="propertyValueValidation">
- </property-param-row>
- </div>
+ <input-list
+ *ngIf="artifactTypeProperties && dataTypeMap"
+ [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
+ [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate"
+ [inputs]="artifactTypeProperties"
+ [dataTypeMap]="dataTypeMap"
+ [isViewOnly]="isViewOnly"
+ [allowDeletion]="false"
+ (onValueChange)="onArtifactPropertyValueChange($event)"
+ >
+ </input-list>
</div>
</div>
<div class="group-with-border content-row" *ngIf="dataTypeMap">
<input-list
- [inputs]="inputs" [dataTypeMap]="dataTypeMap"
+ [title]="'INPUT_LIST_TITLE' | translate"
+ [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
+ [inputs]="inputs"
+ [dataTypeMap]="dataTypeMap"
[isViewOnly]="isViewOnly"
+ [allowDeletion]="true"
(onValueChange)="onInputValueChange($event)"
(onDelete)="onInputDelete($event)"
>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
index cb47c8d167..5edf97f33c 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.less
@@ -22,6 +22,9 @@
@import '../../../../../../assets/styles/override.less';
.operation-handler {
+ overflow: scroll;
+ max-height: 700px;
+ max-width: 100%;
font-family: @font-opensans-regular;
user-select: none;
padding-top: 12px;
@@ -221,3 +224,7 @@
}
}
+
+.operation-handler::-webkit-scrollbar-track {
+ border: 0;
+}
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 ed295e867c..f357ddfc54 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
@@ -66,6 +66,7 @@ export class InterfaceOperationHandlerComponent {
toscaArtifactTypeSelected: string;
toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
+ artifactTypeProperties: Array<InputOperationParameter> = [];
toscaArtifactTypes: Array<DropdownValue> = [];
@@ -112,6 +113,7 @@ export class InterfaceOperationHandlerComponent {
this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
this.artifactName = this.operationToUpdate.implementation.artifactName;
this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
+ this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
this.getArtifactTypesSelected();
}
@@ -142,6 +144,7 @@ export class InterfaceOperationHandlerComponent {
this.artifactName = undefined;
}
this.toscaArtifactTypeProperties = undefined;
+ this.artifactTypeProperties = undefined;
} else {
this.getArtifactTypesSelected();
}
@@ -158,6 +161,7 @@ export class InterfaceOperationHandlerComponent {
artifact.artifactType = toscaArtifactType.type;
artifact.properties = toscaArtifactType.properties;
this.toscaArtifactTypeProperties = artifact.properties;
+ this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
this.toscaArtifactTypeSelected = artifact.artifactType;
this.operationToUpdate.implementation = artifact;
this.getArtifactTypesSelected();
@@ -225,6 +229,7 @@ export class InterfaceOperationHandlerComponent {
this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType;
this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
+ this.artifactTypeProperties = this.convertArtifactsPropertiesToInput();
this.enableAddArtifactImplementation = true;
}
this.validateRequiredField();
@@ -272,6 +277,15 @@ export class InterfaceOperationHandlerComponent {
inputOperationParameter.value = changedInput.value;
}
+ onArtifactPropertyValueChange(changedProperty: InputOperationParameter) {
+ if (changedProperty.value instanceof Object) {
+ changedProperty.value = JSON.stringify(changedProperty.value);
+ }
+ this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
+ const property = this.toscaArtifactTypeProperties.find(artifactProperty => artifactProperty.name == changedProperty.name);
+ property.value = changedProperty.value;
+ }
+
/**
* Handles the add input event.
* @param input the input to add
@@ -304,4 +318,21 @@ export class InterfaceOperationHandlerComponent {
currentInputs.splice(currentInputs.indexOf(input1), 1);
this.inputs = Array.from(currentInputs);
}
+
+ private convertArtifactsPropertiesToInput(): Array<InputOperationParameter> {
+ if (!this.toscaArtifactTypeProperties) {
+ return [];
+ }
+ const inputList: Array<InputOperationParameter> = [];
+ this.toscaArtifactTypeProperties.forEach(property => {
+ const input = new InputOperationParameter();
+ input.name = property.name;
+ input.type = property.type;
+ input.schema = property.schema;
+ input.toscaDefaultValue = property.defaultValue;
+ input.value = property.value;
+ inputList.push(input);
+ });
+ return inputList;
+ }
}