summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2')
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts4
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html2
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts60
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html5
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less29
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts106
6 files changed, 111 insertions, 95 deletions
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
index 10273e2636..6bb2e9dd8a 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
@@ -37,6 +37,7 @@ import {SdcUiComponentsModule} from "onap-ui-angular";
import {ModalFormsModule} from "app/ng2/components/ui/forms/modal-forms.module";
import {HierarchyNavigationModule} from "../../components/logic/hierarchy-navigtion/hierarchy-navigation.module";
import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
+import {TranslateModule} from '../../shared/translator/translate.module';
@NgModule({
declarations: [
@@ -53,7 +54,8 @@ import {PropertyCreatorComponent} from "./property-creator/property-creator.comp
HierarchyNavigationModule,
UiElementsModule,
SdcUiComponentsModule,
- ModalFormsModule
+ ModalFormsModule,
+ TranslateModule
],
entryComponents: [PropertiesAssignmentComponent],
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index c1a1ae5b57..c01cf95b8b 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -79,7 +79,7 @@
*ngIf="isPropertiesTabSelected && !isSelf()"
[disabled]="checkedPropertiesCount != 1 || isReadonly || hasChangedData"
class="tlv-btn blue declare-button"
- data-tests-id="declare-button select-tosca-function">{{btnToscaFunctionText}}</button>
+ data-tests-id="declare-button select-tosca-function">{{'TOSCA_FUNCTION_LABEL' | translate}}</button>
<button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData" (click)="declareProperties()" data-tests-id="declare-button declare-input">Declare Input</button>
<button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly || hasChangedData || isSelf()" (click)="declarePropertiesToPolicies()" data-tests-id="declare-button declare-policy">Declare Policy</button>
<button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || checkedChildPropertiesCount || isReadonly || hasChangedData" (click)="declareListProperties()" data-tests-id="declare-but($event)ton declare-list-input">Create List Input</button>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 6584b4732b..7feea50d89 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -118,7 +118,6 @@ export class PropertiesAssignmentComponent {
serviceBePropertiesMap: InstanceBePropertiesMap;
serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
selectedInstance_FlattenCapabilitiesList: Capability[];
- btnToscaFunctionText: string;
@ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
@ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -156,7 +155,6 @@ export class PropertiesAssignmentComponent {
ngOnInit() {
console.debug("==>" + this.constructor.name + ": ngOnInit");
- this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
this.loadingInputs = true;
this.loadingPolicies = true;
this.loadingInstances = true;
@@ -518,11 +516,6 @@ export class PropertiesAssignmentComponent {
if (!selectedInstanceData) {
return;
}
- const property: PropertyBEModel = this.buildCheckedInstanceProperty();
- if (property.isToscaGetFunction()) {
- this.clearCheckedInstancePropertyValue();
- return;
- }
this.openToscaGetFunctionModal();
}
@@ -543,26 +536,31 @@ export class PropertiesAssignmentComponent {
}
private openToscaGetFunctionModal() {
- const modalTitle = 'Set value using TOSCA functions';
+ const modalTitle = this.translateService.translate('TOSCA_FUNCTION_MODAL_TITLE');
+ const modalButtons = [];
+ modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
+ () => {
+ const toscaGetFunction: ToscaGetFunction = modal.instance.dynamicContent.instance.toscaGetFunction;
+ if (toscaGetFunction.functionType) {
+ this.updateCheckedInstancePropertyGetFunctionValue(toscaGetFunction);
+ } else {
+ this.clearCheckedInstancePropertyValue();
+ }
+ modal.instance.close();
+ }
+ ));
+ const checkedInstanceProperty = this.buildCheckedInstanceProperty();
+ modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
+ modal.instance.close();
+ }));
const modal = this.modalService.createCustomModal(new ModalModel(
'sm',
modalTitle,
null,
- [
- new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
- () => {
- const toscaGetFunction: ToscaGetFunction = modal.instance.dynamicContent.instance.toscaGetFunction;
- this.updateCheckedInstancePropertyGetFunctionValue(toscaGetFunction);
- modal.instance.close();
- }
- ),
- new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
- modal.instance.close();
- }),
- ],
+ modalButtons,
null /* type */
));
- const checkedInstanceProperty = this.buildCheckedInstanceProperty();
+
this.modalService.addDynamicContentToModalAndBindInputs(modal, ToscaFunctionComponent, {
'property': checkedInstanceProperty,
'componentInstanceMap': this.componentInstanceMap
@@ -610,25 +608,6 @@ export class PropertiesAssignmentComponent {
console.error(errorMsg, error);
}, () => {
this.loadingProperties = false;
- this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
- });
- }
-
- selectInputBtnLabel = () => {
- let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
- angular.forEach(instancesIds, (instanceId: string): void => {
- let checkedProperties: PropertyBEModel[] = this.propertiesService.getCheckedProperties(this.instanceFePropertiesMap[instanceId]);
- angular.forEach(checkedProperties, (property: PropertyBEModel) => {
- if(this.checkedPropertiesCount == 1) {
- if (property.isToscaGetFunction()) {
- this.btnToscaFunctionText = this.translateService.translate('CLEAR_VALUE_LABEL');
- } else {
- this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
- }
- } else {
- this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
- }
- });
});
}
@@ -1106,7 +1085,6 @@ export class PropertiesAssignmentComponent {
updateCheckedPropertyCount = (increment: boolean): void => {
this.checkedPropertiesCount += (increment) ? 1 : -1;
console.debug("CheckedProperties count is now.... " + this.checkedPropertiesCount);
- this.selectInputBtnLabel();
};
updateCheckedChildPropertyCount = (increment: boolean): void => {
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
index 1f81ebe425..f0db645b0e 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
@@ -21,7 +21,7 @@
<loader [display]="isLoading" [loaderDelay]="500" [relative]="true" [size]="'large'"></loader>
<form class="w-sdc-form">
<div class="i-sdc-form-item">
- <label class="i-sdc-form-label required">{{'TOSCA_FUNCTION_LABEL' | translate}}</label>
+ <label class="i-sdc-form-label">{{'TOSCA_FUNCTION_LABEL' | translate}}</label>
<select [(ngModel)]="toscaGetFunction.functionType" (change)="onToscaFunctionChange()" name="toscaFunctionType">
<option *ngFor="let toscaFunction of toscaFunctions"
[ngValue]="toscaFunction">{{toscaFunction | lowercase}}</option>
@@ -41,6 +41,9 @@
</select>
</div>
<div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div>
+ <div *ngIf="showClearButton()" class="button-container">
+ <button (click)="onClearValues()" class="tlv-btn red ng-star-inserted">{{'TOSCA_FUNCTION_CLEAR_VALUE_BUTTON' | translate}}</button>
+ </div>
</form>
<loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
</div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less
index e1e9b0d20d..7857771f0a 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less
@@ -19,25 +19,14 @@
@import '../../../../../assets/styles/variables.less';
-.input-list {
- 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;
- }
-
- .side-by-side {
- display: flex;
-
- .i-sdc-form-item {
- flex-basis: 100%;
- }
+.button-container {
+ display: flex;
+ padding: 5px 5px;
+ flex-grow: 1;
+ clear: both;
+ justify-content: flex-end;
+ border-radius: 4px;
+ button {
+ margin: 0 12px 0 6px;
}
}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
index 054a21f251..6b0cdd04d9 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
@@ -17,7 +17,7 @@
* ============LICENSE_END=========================================================
*/
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
import {ComponentMetadata, DataTypeModel, PropertyBEModel, PropertyModel} from 'app/models';
import {TopologyTemplateService} from "../../../services/component-services/topology-template.service";
import {WorkspaceService} from "../../workspace/workspace.service";
@@ -37,10 +37,11 @@ import {ToscaGetFunction} from "../../../../models/tosca-get-function";
templateUrl: './tosca-function.component.html',
styleUrls: ['./tosca-function.component.less'],
})
-export class ToscaFunctionComponent {
+export class ToscaFunctionComponent implements OnInit {
@Input() property: PropertyBEModel;
@Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
+ @Input() allowClear: boolean = true;
TOSCA_FUNCTION_GET_PROPERTY = ToscaGetFunctionType.GET_PROPERTY;
@@ -53,7 +54,7 @@ export class ToscaFunctionComponent {
dropdownValuesLabel: string;
dropDownErrorMsg: string;
propertySource: string
- toscaGetFunction: ToscaGetFunction = new ToscaGetFunction();
+ toscaGetFunction: ToscaGetFunction = new ToscaGetFunction(undefined);
private componentMetadata: ComponentMetadata;
@@ -64,10 +65,31 @@ export class ToscaFunctionComponent {
private translateService: TranslateService) {
}
- ngOnInit() {
+ ngOnInit(): void {
this.componentMetadata = this.workspaceService.metadata;
this.loadToscaFunctions();
this.loadPropertySourceDropdown();
+ this.initToscaGetFunction();
+ }
+
+ private initToscaGetFunction(): void {
+ if (!this.property.isToscaGetFunction()) {
+ return;
+ }
+ this.toscaGetFunction = new ToscaGetFunction(this.property.toscaGetFunction);
+ if (this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_PROPERTY) {
+ if (this.toscaGetFunction.propertySource === PropertySource.SELF) {
+ this.propertySource = PropertySource.SELF;
+ } else {
+ this.propertySource = this.toscaGetFunction.sourceName;
+ }
+ }
+ if (this.toscaGetFunction.propertyName) {
+ this.loadPropertyDropdown(() => {
+ this.selectedProperty = this.propertyDropdownList.find(property => property.propertyName === this.toscaGetFunction.propertyName)
+ });
+ }
+
}
private loadToscaFunctions(): void {
@@ -75,7 +97,7 @@ export class ToscaFunctionComponent {
this.toscaFunctions.push(ToscaGetFunctionType.GET_PROPERTY);
}
- private loadPropertySourceDropdown() {
+ private loadPropertySourceDropdown(): void {
this.propertySourceList.push(PropertySource.SELF);
this.componentInstanceMap.forEach((value, key) => {
const instanceName = value.name;
@@ -86,7 +108,7 @@ export class ToscaFunctionComponent {
});
}
- private addToPropertySource(source: string) {
+ private addToPropertySource(source: string): void {
this.propertySourceList.push(source);
this.propertySourceList.sort((a, b) => {
if (a === PropertySource.SELF) {
@@ -100,6 +122,25 @@ export class ToscaFunctionComponent {
}
onToscaFunctionChange(): void {
+ this.resetPropertySource();
+ if (this.isGetInputSelected()) {
+ this.setSelfPropertySource();
+ this.loadPropertyDropdown();
+ }
+ }
+
+ private loadPropertyDropdown(onComplete: () => any = () => {}): void {
+ this.loadPropertyDropdownLabel();
+ this.loadPropertyDropdownValues(onComplete);
+ }
+
+ private resetForm(): void {
+ this.toscaGetFunction = new ToscaGetFunction(undefined);
+ this.propertySource = undefined;
+ this.selectedProperty = undefined;
+ }
+
+ private resetPropertySource(): void {
this.toscaGetFunction.propertyUniqueId = undefined;
this.toscaGetFunction.propertyName = undefined;
this.toscaGetFunction.propertySource = undefined;
@@ -107,14 +148,10 @@ export class ToscaFunctionComponent {
this.toscaGetFunction.sourceName = undefined;
this.toscaGetFunction.propertyPathFromSource = undefined;
this.propertySource = undefined;
- if (this.isGetInputSelected()) {
- this.setSelfPropertySource();
- this.loadDropdownValueLabel();
- this.loadDropdownValues();
- }
+ this.selectedProperty = undefined;
}
- private loadDropdownValueLabel(): void {
+ private loadPropertyDropdownLabel(): void {
if (!this.toscaGetFunction.functionType) {
return;
}
@@ -125,20 +162,21 @@ export class ToscaFunctionComponent {
}
}
- private loadDropdownValues(): void {
+ private loadPropertyDropdownValues(onComplete: () => any = () => {}): void {
if (!this.toscaGetFunction.functionType) {
return;
}
- this.resetDropDown();
- this.loadPropertiesInDropdown();
+ this.resetPropertyDropdown();
+ this.fillPropertyDropdownValues(onComplete);
}
- private resetDropDown() {
+ private resetPropertyDropdown(): void {
this.dropDownErrorMsg = undefined;
+ this.selectedProperty = undefined;
this.propertyDropdownList = [];
}
- private loadPropertiesInDropdown() {
+ private fillPropertyDropdownValues(onComplete: () => any = () => {}): void {
this.startLoading();
const propertiesObservable: Observable<ComponentGenericResponse> = this.getPropertyObservable();
propertiesObservable.subscribe( (response: ComponentGenericResponse) => {
@@ -156,6 +194,7 @@ export class ToscaFunctionComponent {
}, (error) => {
console.error('An error occurred while loading properties.', error);
}, () => {
+ onComplete();
this.stopLoading();
});
}
@@ -195,12 +234,12 @@ export class ToscaFunctionComponent {
);
}
- private addPropertyToDropdown(propertyDropdownValue: PropertyDropdownValue) {
+ private addPropertyToDropdown(propertyDropdownValue: PropertyDropdownValue): void {
this.propertyDropdownList.push(propertyDropdownValue);
this.propertyDropdownList.sort((a, b) => a.propertyLabel.localeCompare(b.propertyLabel));
}
- private addPropertiesToDropdown(properties: PropertyBEModel[]) {
+ private addPropertiesToDropdown(properties: PropertyBEModel[]): void {
for (const property of properties) {
if (this.property.type === property.type) {
this.addPropertyToDropdown({
@@ -215,7 +254,7 @@ export class ToscaFunctionComponent {
}
}
- private fillPropertyDropdownWithMatchingChildProperties(inputProperty: PropertyBEModel, parentPropertyList: Array<PropertyBEModel> = []) {
+ private fillPropertyDropdownWithMatchingChildProperties(inputProperty: PropertyBEModel, parentPropertyList: Array<PropertyBEModel> = []): void {
const dataTypeFound: DataTypeModel = this.dataTypeService.getDataTypeByModelAndTypeName(this.componentMetadata.model, inputProperty.type);
if (!dataTypeFound || !dataTypeFound.properties) {
return;
@@ -235,23 +274,23 @@ export class ToscaFunctionComponent {
});
}
- private isGetPropertySelected() {
+ private isGetPropertySelected(): boolean {
return this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_PROPERTY;
}
- private isGetInputSelected() {
+ private isGetInputSelected(): boolean {
return this.toscaGetFunction.functionType === ToscaGetFunctionType.GET_INPUT;
}
- private isComplexType(propertyType: string) {
+ private isComplexType(propertyType: string): boolean {
return PROPERTY_DATA.SIMPLE_TYPES.indexOf(propertyType) === -1;
}
- private stopLoading() {
+ private stopLoading(): void {
this.isLoading = false;
}
- private startLoading() {
+ private startLoading(): void {
this.isLoading = true;
}
@@ -263,7 +302,7 @@ export class ToscaFunctionComponent {
return this.toscaGetFunction.functionType && !this.isLoading && !this.dropDownErrorMsg;
}
- onPropertySourceChange() {
+ onPropertySourceChange(): void {
if (!this.toscaGetFunction.functionType || !this.propertySource) {
return;
}
@@ -277,23 +316,28 @@ export class ToscaFunctionComponent {
this.toscaGetFunction.sourceName = this.propertySource;
this.toscaGetFunction.sourceUniqueId = this.instanceNameAndIdMap.get(this.propertySource);
}
- this.loadDropdownValueLabel();
- this.resetDropDown();
- this.loadPropertiesInDropdown();
+ this.loadPropertyDropdown();
}
- private setSelfPropertySource() {
+ private setSelfPropertySource(): void {
this.toscaGetFunction.propertySource = PropertySource.SELF;
this.toscaGetFunction.sourceName = this.componentMetadata.name;
this.toscaGetFunction.sourceUniqueId = this.componentMetadata.uniqueId;
}
- onPropertyChange() {
+ onPropertyChange(): void {
this.toscaGetFunction.propertyUniqueId = this.selectedProperty.propertyId;
this.toscaGetFunction.propertyName = this.selectedProperty.propertyName;
this.toscaGetFunction.propertyPathFromSource = this.selectedProperty.propertyPath;
}
+ onClearValues() {
+ this.resetForm();
+ }
+
+ showClearButton(): boolean {
+ return this.allowClear && this.toscaGetFunction.functionType !== undefined;
+ }
}
export interface PropertyDropdownValue {