aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2
diff options
context:
space:
mode:
authorKrupaNagabhushan <krupa.nagabhushan@est.tech>2022-05-09 20:03:56 +0100
committerMichael Morris <michael.morris@est.tech>2022-05-17 08:24:08 +0000
commitca30916132c62fa6488b8f891776d262c3eac529 (patch)
treeec39790bfcf821c03cbd75bd30eaf3d60ee8204f /catalog-ui/src/app/ng2
parent61e8668899051e1df738093d1700564fbc22a428 (diff)
Generalise Select Input button in Properties Assignment view
Issue-ID: SDC-3996 Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech> Change-Id: Idb7ff3552ffb68748c688c374625b216ac273499
Diffstat (limited to 'catalog-ui/src/app/ng2')
-rw-r--r--catalog-ui/src/app/ng2/app.module.ts4
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html4
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts61
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html (renamed from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html)17
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less (renamed from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less)0
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts (renamed from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts)52
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts (renamed from catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts)8
7 files changed, 95 insertions, 51 deletions
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 37167b4360..707e328a52 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -94,7 +94,7 @@ import {ServiceDependenciesModule} from './components/logic/service-dependencies
import {ServiceDependenciesEditorModule} from './pages/service-dependencies-editor/service-dependencies-editor.module';
import {PropertyCreatorModule} from './pages/properties-assignment/property-creator/property-creator.module';
import {DeclareListModule} from './pages/properties-assignment/declare-list/declare-list.module';
-import { InputListModule } from "./pages/properties-assignment/input-list/input-list.module";
+import { ToscaFunctionModule } from "./pages/properties-assignment/tosca-function/tosca-function.module";
import {WorkflowServiceNg2} from './services/workflow.service';
import {ToscaTypesServiceNg2} from "./services/tosca-types.service";
import {CapabilitiesFilterPropertiesEditorComponentModule} from "./pages/composition/capabilities-filter-properties-editor/capabilities-filter-properties-editor.module";
@@ -153,7 +153,7 @@ export function configServiceFactory(config: ConfigService, authService: Authent
AttributesOutputsModule,
PropertyCreatorModule,
DeclareListModule,
- InputListModule,
+ ToscaFunctionModule,
PluginFrameModule,
PluginsModule,
InterfaceOperationModule,
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 d04ddf5c91..c1a1ae5b57 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
@@ -75,11 +75,11 @@
<span class="sprite search-icon" data-tests-id="search-button"></span>
<filter-properties-assignment *ngIf="isPropertiesTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
</div>
- <button (click)="selectInput()"
+ <button (click)="selectToscaFunctionAndValues()"
*ngIf="isPropertiesTabSelected && !isSelf()"
[disabled]="checkedPropertiesCount != 1 || isReadonly || hasChangedData"
class="tlv-btn blue declare-button"
- data-tests-id="declare-button select-input">{{btnSelectInputText}}</button>
+ data-tests-id="declare-button select-tosca-function">{{btnToscaFunctionText}}</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 4baae199c4..a6e0b51136 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
@@ -19,7 +19,7 @@
*/
import * as _ from "lodash";
-import {Component, Inject, ViewChild} from "@angular/core";
+import {Component, Inject, ViewChild, ComponentRef} from "@angular/core";
import {PropertiesService} from "../../services/properties.service";
import {
ButtonModel,
@@ -62,12 +62,13 @@ import {UnsavedChangesComponent} from "app/ng2/components/ui/forms/unsaved-chang
import {PropertyCreatorComponent} from "./property-creator/property-creator.component";
import {ModalService} from "../../services/modal.service";
import {DeclareListComponent} from "./declare-list/declare-list.component";
-import {InputListComponent} from "./input-list/input-list.component";
+import {ToscaFunctionComponent} from "./tosca-function/tosca-function.component";
import {CapabilitiesGroup, Capability} from "../../../models/capability";
import {ToscaPresentationData} from "../../../models/tosca-presentation";
import {Observable} from "rxjs";
import {ToscaGetFunctionType} from "../../../models/tosca-get-function-type.enum";
import {TranslateService} from "../../shared/translator/translate.service";
+import {ModalComponent} from "../../components/ui/modal/modal.component";
const SERVICE_SELF_TITLE = "SELF";
@Component({
@@ -102,7 +103,6 @@ export class PropertiesAssignmentComponent {
currentMainTab: Tab;
isInputsTabSelected: boolean;
isPropertiesTabSelected: boolean;
- isInputValueSelected: boolean = false;
isPoliciesTabSelected: boolean;
isReadonly: boolean;
resourceIsReadonly: boolean;
@@ -118,8 +118,7 @@ export class PropertiesAssignmentComponent {
serviceBePropertiesMap: InstanceBePropertiesMap;
serviceBeCapabilitiesPropertiesMap: InstanceBePropertiesMap;
selectedInstance_FlattenCapabilitiesList: Capability[];
- propertyType: string;
- btnSelectInputText: string;
+ btnToscaFunctionText: string;
@ViewChild('hierarchyNavTabs') hierarchyNavTabs: Tabs;
@ViewChild('propertyInputTabs') propertyInputTabs: Tabs;
@@ -157,7 +156,7 @@ export class PropertiesAssignmentComponent {
ngOnInit() {
console.log("==>" + this.constructor.name + ": ngOnInit");
- this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+ this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
this.loadingInputs = true;
this.loadingPolicies = true;
this.loadingInstances = true;
@@ -501,8 +500,8 @@ export class PropertiesAssignmentComponent {
this.searchQuery = '';
};
- /**Select Properties value from defined input values**/
- selectInput = (): void => {
+ /**Select Tosca function value from defined values**/
+ selectToscaFunctionAndValues = (): void => {
let instancesIds = this.keysPipe.transform(this.instanceFePropertiesMap, []);
angular.forEach(instancesIds, (instanceId: string): void => {
let selectedInstanceData: any = this.instances.find(instance => instance.uniqueId == instanceId
@@ -518,7 +517,7 @@ export class PropertiesAssignmentComponent {
property.toscaGetFunctionType = null;
this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
} else {
- let modalTitle = 'Select value from Input';
+ const modalTitle = 'Set value using TOSCA functions';
const modal = this.ModalService.createCustomModal(new ModalModel(
'sm',
modalTitle,
@@ -526,19 +525,10 @@ export class PropertiesAssignmentComponent {
[
new ButtonModel('Save', 'blue',
() => {
- this.loadingProperties = true;
- let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectInputValue;
- property.getInputValues = [];
- const propertyInputDetail = new PropertyInputDetail();
- propertyInputDetail.inputId = selectInputValue.uniqueId;
- propertyInputDetail.inputName = selectInputValue.name;
- propertyInputDetail.inputType = selectInputValue.type;
- property.getInputValues.push(propertyInputDetail);
- property.value = selectInputValue.name.indexOf("->") !== -1
- ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}'
- : '{"get_input":"' + selectInputValue.name+ '"}' ;
- property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT;
- this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
+ const selectedToscaFunction: string = modal.instance.dynamicContent.instance.selectToscaFunction;
+ if (selectedToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
+ this.updateSelectInputValues(modal, property, checkedProperties, selectedInstanceData);
+ }
modal.instance.close();
}
),
@@ -548,7 +538,7 @@ export class PropertiesAssignmentComponent {
],
null /* type */
)); //modal
- this.ModalService.addDynamicContentToModal(modal, InputListComponent);
+ this.ModalService.addDynamicContentToModal(modal, ToscaFunctionComponent);
modal.instance.open();
}
});
@@ -556,6 +546,22 @@ export class PropertiesAssignmentComponent {
});
};
+ private updateSelectInputValues(modal:ComponentRef<ModalComponent>, property:PropertyBEModel, checkedProperties:PropertyBEModel[], selectedInstanceData:any) {
+ this.loadingProperties = true;
+ let selectInputValue: InputFEModel = modal.instance.dynamicContent.instance.selectValue;
+ property.getInputValues = [];
+ const propertyInputDetail = new PropertyInputDetail();
+ propertyInputDetail.inputId = selectInputValue.uniqueId;
+ propertyInputDetail.inputName = selectInputValue.name;
+ propertyInputDetail.inputType = selectInputValue.type;
+ property.getInputValues.push(propertyInputDetail);
+ property.value = selectInputValue.name.indexOf("->") !== -1
+ ? '{"get_input":[' + selectInputValue.name.replace("->", ", ") + ']}'
+ : '{"get_input":"' + selectInputValue.name+ '"}' ;
+ property.toscaGetFunctionType = ToscaGetFunctionType.GET_INPUT;
+ this.updateInstancePropertiesWithInput(checkedProperties, selectedInstanceData);
+ }
+
updateInstancePropertiesWithInput(checkedProperties: PropertyBEModel[], selectedInstanceData: any) {
this.componentInstanceServiceNg2.updateInstanceProperties(this.component.componentType, this.component.uniqueId,
this.selectedInstanceData.uniqueId, checkedProperties)
@@ -568,7 +574,7 @@ export class PropertiesAssignmentComponent {
});
}, () => {
this.loadingProperties = false;
- this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+ this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
});
}
@@ -579,18 +585,17 @@ export class PropertiesAssignmentComponent {
angular.forEach(checkedProperties, (property: PropertyBEModel) => {
if(this.checkedPropertiesCount == 1) {
if (property.toscaGetFunctionType == null) {
- this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+ this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
} else {
- this.btnSelectInputText = this.translateService.translate('DESELECT_INPUT_LABEL');
+ this.btnToscaFunctionText = this.translateService.translate('DESELECT_INPUT_LABEL');
}
} else {
- this.btnSelectInputText = this.translateService.translate('SELECT_INPUT_LABEL');
+ this.btnToscaFunctionText = this.translateService.translate('TOSCA_FUNCTION_LABEL');
}
});
});
}
-
/*** DECLARE PROPERTIES/INPUTS ***/
declareProperties = (): void => {
console.log("==>" + this.constructor.name + ": declareProperties");
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
index b61d25cb25..ea52f20e91 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
@@ -17,14 +17,21 @@
~ ============LICENSE_END=========================================================
-->
-<div class="input-list">
+<div class="tosca-function">
<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">Input Value</label>
- <select [(ngModel)]="selectInputValue" name="selectInputValue">
- <option *ngFor="let input of inputs"
- [ngValue]="input">{{input.name}}</option>
+ <label class="i-sdc-form-label required">TOSCA function</label>
+ <select [(ngModel)]="selectToscaFunction" (change)="onToscaFunctionChange()" name="selectToscaFunction">
+ <option *ngFor="let toscaFunction of toscaFunctions"
+ [ngValue]="toscaFunction">{{toscaFunction}}</option>
+ </select>
+ </div>
+ <div *ngIf="selectToscaFunction" class="i-sdc-form-item">
+ <label class="i-sdc-form-label required">{{dropdownValuesLabel}}</label>
+ <select [(ngModel)]="selectValue" name="selectValue">
+ <option *ngFor="let value of dropdownValues"
+ [ngValue]="value">{{value.name}}</option>
</select>
</div>
</form>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less
index e1e9b0d20d..e1e9b0d20d 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.less
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
index 0bdd028d93..22fb8cc358 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
@@ -26,19 +26,24 @@ import {WorkspaceService} from "../../workspace/workspace.service";
import {PropertiesService} from "../../../services/properties.service";
import {PROPERTY_DATA} from "../../../../utils/constants";
import {DataTypeService} from "../../../services/data-type.service";
+import {ToscaGetFunctionType} from "../../../../models/tosca-get-function-type.enum";
+import {TranslateService} from "../../../shared/translator/translate.service";
@Component({
- selector: 'input-list',
- templateUrl: './input-list.component.html',
- styleUrls: ['./input-list.component.less'],
+ selector: 'tosca-function',
+ templateUrl: './tosca-function.component.html',
+ styleUrls: ['./tosca-function.component.less'],
})
-export class InputListComponent {
+export class ToscaFunctionComponent {
- selectInputValue;
+ selectToscaFunction;
+ selectValue;
isLoading: boolean;
propertyType: string;
- inputs: Array<PropertyBEModel> = [];
+ dropdownValues: Array<PropertyBEModel> = [];
+ toscaFunctions: Array<string> = [];
+ dropdownValuesLabel: string;
private dataTypeProperties: Array<PropertyBEModel> = [];
private componentMetadata: ComponentMetadata;
@@ -46,13 +51,40 @@ export class InputListComponent {
constructor(private topologyTemplateService: TopologyTemplateService,
private workspaceService: WorkspaceService,
private propertiesService: PropertiesService,
- private dataTypeService: DataTypeService) {
+ private dataTypeService: DataTypeService,
+ private translateService: TranslateService) {
}
ngOnInit() {
this.componentMetadata = this.workspaceService.metadata;
this.propertyType = this.propertiesService.getCheckedPropertyType();
- this.loadInputValues(this.propertyType);
+ this.loadToscaFunctions();
+ }
+
+ private loadToscaFunctions(): void {
+ this.toscaFunctions.push(ToscaGetFunctionType.GET_INPUT.toLowerCase());
+ }
+
+ onToscaFunctionChange(): void {
+ this.loadDropdownValueLabel();
+ this.loadDropdownValues();
+ }
+
+ private loadDropdownValueLabel(): void {
+ if (this.selectToscaFunction) {
+ if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
+ this.dropdownValuesLabel = this.translateService.translate('INPUT_DROPDOWN_LABEL');
+ }
+ }
+ }
+
+ private loadDropdownValues(): void {
+ if (this.selectToscaFunction) {
+ this.dropdownValues = [];
+ if (this.selectToscaFunction === ToscaGetFunctionType.GET_INPUT.toLowerCase()) {
+ this.loadInputValues(this.propertyType);
+ }
+ }
}
private loadInputValues(propertyType: string): void {
@@ -61,7 +93,7 @@ export class InputListComponent {
.subscribe((response) => {
response.inputs.forEach((inputProperty: any) => {
if (propertyType === inputProperty.type) {
- this.inputs.push(inputProperty);
+ this.dropdownValues.push(inputProperty);
} else if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(inputProperty.type) === -1 && inputProperty.type !== propertyType) {
this.buildInputDataForComplexType(inputProperty, propertyType);
}
@@ -80,7 +112,7 @@ export class InputListComponent {
let inputData = inputProperty.name + "->" + dataTypeProperty.name;
dataTypeProperty.name = inputData;
if (this.dataTypeProperties.indexOf(dataTypeProperty) === -1 && dataTypeProperty.type === propertyType) {
- this.inputs.push(dataTypeProperty);
+ this.dropdownValues.push(dataTypeProperty);
}
});
}
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts
index 50d7b08314..efe45c3d27 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/input-list/input-list.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.module.ts
@@ -23,12 +23,12 @@ import { FormsModule } from '@angular/forms';
import { FormElementsModule } from 'app/ng2/components/ui/form-components/form-elements.module';
import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
import { TranslateModule } from '../../../shared/translator/translate.module';
-import { InputListComponent } from './input-list.component';
+import { ToscaFunctionComponent } from './tosca-function.component';
import { SdcUiComponentsModule } from 'onap-ui-angular';
@NgModule({
declarations: [
- InputListComponent,
+ ToscaFunctionComponent,
],
imports: [
CommonModule,
@@ -40,9 +40,9 @@ import { SdcUiComponentsModule } from 'onap-ui-angular';
],
exports: [],
entryComponents: [
- InputListComponent
+ ToscaFunctionComponent
],
providers: []
})
-export class InputListModule {}
+export class ToscaFunctionModule {}