summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/logic
diff options
context:
space:
mode:
authorKrupaNagabhushan <krupa.nagabhushan@est.tech>2020-09-17 15:11:30 +0100
committerS�bastien Determe <sebastien.determe@intl.att.com>2020-10-23 14:49:33 +0000
commita5a46f26d043b70cd9a44fed05b0e8ba184318fb (patch)
tree97582d3263a48658f8a84367684e1eb40ba4624e /catalog-ui/src/app/ng2/components/logic
parent9714961d2950d00ae66be01e20c1ebb8552a82e9 (diff)
Fix for substitution filter properties
Issue-ID: SDC-3325 Change-Id: If26bf895a0a2f914fb9c2b36e53466df9b7999fe Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html53
-rw-r--r--catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less39
-rw-r--r--catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts95
-rw-r--r--catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts4
4 files changed, 112 insertions, 79 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
index f781e6c89b..01329b70d1 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
@@ -19,32 +19,39 @@
-->
<div class="substitution-filter">
+ <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
+ <div class="w-sdc-designer-sidebar-section">
+ <sdc-accordion [title]="'Substitution Filter Properties'" [arrow-direction]="'right'" [open]="true">
+ <div class="i-sdc-designer-sidebar-section-content-substitution-filter-section">
- <div *ngIf="compositeService.isService()"
- class="i-sdc-designer-sidebar-section-content-item-rules-section">
+ <div class="i-sdc-designer-sidebar-section-content-substitution-filter"
+ [ngClass]="{'hand': !readonly}"
+ *ngFor="let property of constraintProperties; let i = index">
+ <div class="rule-details" [ngClass]="{'readonly': readonly}">
+ <div class="rule-desc" (click)="!readonly && onSelectSubstitutionFilter(PROPERTIES, i)"
+ tooltips
+ tooltip="{{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator) + ' '
+ + (property.sourceName ? property.sourceName + ':' : '') + property.value}}">
+ {{property.servicePropertyName + ' ' + getSymbol(property.constraintOperator)
+ + ' '
+ + (property.sourceName ? property.sourceName + ':' : '') + property.value}}
+ </div>
+ <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
+ (click)="openDeleteModal(PROPERTIES, i)"
+ data-tests-id="delete-input-button"></span>
+ </div>
+ </div>
- <div class="i-sdc-designer-sidebar-section-content-item-rule" [ngClass]="{'hand': !readonly}"
- *ngFor="let constraint of constraintObjects; let i = index">
- <div class="rule-details" [ngClass]="{'readonly': readonly}">
- <div class="rule-desc" (click)="!readonly && onSelectFilter(i)" tooltips
- tooltip="{{constraint.servicePropertyName + ' ' + getSymbol(constraint.constraintOperator) + ' '
- + (constraint.sourceName ? constraint.sourceName + ':' : '') + constraint.value}}">
- {{constraint.servicePropertyName + ' ' + getSymbol(constraint.constraintOperator) + ' '
- + (constraint.sourceName ? constraint.sourceName + ':' : '') + constraint.value}}
+ <div class="w-sdc-designer-sidebar-section-substitution-filter-footer">
+ <button
+ class="w-sdc-designer-sidebar-section-substitution-filter-footer-action add-rule-btn tlv-btn blue"
+ data-tests-id="add-rule-button"
+ (click)="onAddSubstitutionFilter(PROPERTIES)"
+ [disabled]="readonly">
+ {{'ADD_SUBSTITUTION_FILTER' | translate}}
+ </button>
</div>
- <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon"
- (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span>
</div>
- </div>
-
- <div *ngIf="!isSubstitutionFilterSet()" class="w-sdc-designer-sidebar-section-footer">
- <button
- class="w-sdc-designer-sidebar-section-footer-action tlv-btn blue"
- data-tests-id="add-rule-button"
- (click)="onAddSubstitutionFilter()"
- [disabled]="readonly">
- {{'ADD_SUBSTITUTION_FILTER' | translate}}
- </button>
- </div>
+ </sdc-accordion>
</div>
</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less
index cc41c3a69a..f0464774b5 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less
@@ -25,8 +25,8 @@
.substitution-filter {
- .i-sdc-designer-sidebar-section-content-item-rules-section {
- .i-sdc-designer-sidebar-section-content-item-rule {
+ .i-sdc-designer-sidebar-section-content-substitution-filter-section {
+ .i-sdc-designer-sidebar-section-content-substitution-filter {
border-bottom: 1px solid @main_color_o;
padding: 5px 10px 5px 18px;
position: relative;
@@ -65,13 +65,44 @@
}
}
- .w-sdc-designer-sidebar-section-footer {
+ .w-sdc-designer-sidebar-section-substitution-filter-footer {
margin-top: 10px;
+ margin-bottom: 10px;
text-align: center;
width: 100%;
}
- .w-sdc-designer-sidebar-section-footer-action {
+ .w-sdc-designer-sidebar-section-substitution-filter-footer-action {
width: 180px;
margin-top: 10px;
}
}
+
+/deep/.sdc-accordion {
+ margin-bottom: 0;
+ display: grid;
+
+ .sdc-accordion-header {
+ background-color: #e6f6fb;
+ border-left: solid #009fdb 4px;
+ box-shadow: 0 0px 3px -1px rgba(0, 0, 0, 0.3);
+ margin-bottom: 2px;
+ width: auto;
+ height: auto;
+ padding: 10px;
+ color: #666666;
+ font-family: OpenSans-Semibold, sans-serif;
+ font-size: 14px;
+ }
+
+ .sdc-accordion-body.open {
+ padding-left: 0;
+ padding-top: 0;
+ .sdc-accordion-header { /*Second level - nested accordion */
+ background-color: #f8f8f8;
+ padding: 4px 20px 4px 37px;
+ border-bottom: 1px solid #d2d2d2;
+ border-left:none;
+ height: 30px;
+ }
+ }
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
index a0fa2bb20b..aade8d8b73 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.ts
@@ -28,11 +28,11 @@ import {
import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
import {ServiceDependenciesEditorComponent} from 'app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component';
import {ModalService} from 'app/ng2/services/modal.service';
-import {ComponentGenericResponse} from 'app/ng2/services/responses/component-generic-response';
import {TranslateService} from 'app/ng2/shared/translator/translate.service';
import {ComponentMetadata} from '../../../../models/component-metadata';
import {ServiceInstanceObject} from '../../../../models/service-instance-properties-and-interfaces';
import {TopologyTemplateService} from '../../../services/component-services/topology-template.service';
+import {ToscaFilterConstraintType} from "../../../../models/tosca-filter-constraint-type.enum";
export class ConstraintObject {
servicePropertyName: string;
@@ -114,7 +114,8 @@ export class SubstitutionFilterComponent {
isLoading: boolean;
parentServiceInputs: InputBEModel[] = [];
operatorTypes: any[];
- constraintObjects: ConstraintObject[] = [];
+ constraintProperties: ConstraintObject[] = [];
+ PROPERTIES: string = ToscaFilterConstraintType.PROPERTIES;
@Input() readonly: boolean;
@Input() compositeService: ComponentMetadata;
@@ -122,6 +123,7 @@ export class SubstitutionFilterComponent {
@Input() selectedInstanceSiblings: ServiceInstanceObject[];
@Input() selectedInstanceConstraints: ConstraintObject[] = [];
@Input() selectedInstanceProperties: PropertyBEModel[] = [];
+ @Output() updateSubstitutionFilterProperties: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
@Output() updateConstraintListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>();
@Output() loadConstraintListEvent: EventEmitter<any> = new EventEmitter();
@Output() hasSubstitutionFilter = new EventEmitter<boolean>();
@@ -136,34 +138,35 @@ export class SubstitutionFilterComponent {
{label: '<', value: OPERATOR_TYPES.LESS_THAN},
{label: '=', value: OPERATOR_TYPES.EQUAL}
];
- this.topologyTemplateService.getComponentInputsWithProperties(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((result: ComponentGenericResponse) => {
- this.parentServiceInputs = result.inputs;
- });
- this.loadAllInstances();
+ this.loadSubstitutionFilter();
this.translateService.languageChangedObservable.subscribe((lang) => {
I18nTexts.translateTexts(this.translateService);
});
}
ngOnChanges(changes) {
- if (changes.currentServiceInstance) {
- this.currentServiceInstance = changes.currentServiceInstance.currentValue;
+ if (changes.compositeService) {
+ this.compositeService = changes.compositeService.currentValue;
}
if (changes.selectedInstanceConstraints && changes.selectedInstanceConstraints.currentValue !== changes.selectedInstanceConstraints.previousValue) {
this.selectedInstanceConstraints = changes.selectedInstanceConstraints.currentValue;
- this.loadAllInstances();
+ this.loadSubstitutionFilter();
}
}
- public loadAllInstances = (): void => {
- this.topologyTemplateService.getComponentCompositionData(this.compositeService.uniqueId, this.compositeService.componentType).subscribe((response) => {
- response.componentInstances.forEach(componentInstance => this.getSubstitutionFilter(componentInstance))
- })
+ private loadSubstitutionFilter = (): void => {
+ this.topologyTemplateService.getSubstitutionFilterConstraints(this.compositeService.componentType, this.compositeService.uniqueId)
+ .subscribe((response) => {
+ if (response.substitutionFilterForTopologyTemplate && response.substitutionFilterForTopologyTemplate[this.compositeService.uniqueId]) {
+ this.constraintProperties = response.
+ substitutionFilterForTopologyTemplate[this.compositeService.uniqueId].properties;
+ }
+ });
}
- onAddSubstitutionFilter() {
+ onAddSubstitutionFilter = (constraintType: string) => {
const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
- const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createSubstitutionFilter, this.getDisabled);
+ const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', () => this.createSubstitutionFilter(constraintType), this.getDisabled);
const modalModel: ModalModel = new ModalModel('l', I18nTexts.addSubstitutionFilterTxt, '', [saveButton, cancelButton], 'standard');
this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
this.modalServiceNg2.addDynamicContentToModal(
@@ -181,27 +184,27 @@ export class SubstitutionFilterComponent {
this.modalInstance.instance.open();
}
- createSubstitutionFilter = (): void => {
+ createSubstitutionFilter = (constraintType: string) => {
const newSubstitutionFilter: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule);
this.isLoading = true;
this.topologyTemplateService.createSubstitutionFilterConstraints(
this.compositeService.uniqueId,
- this.currentServiceInstance.uniqueId,
newSubstitutionFilter,
- this.compositeService.componentType
+ this.compositeService.componentType,
+ constraintType
).subscribe((response) => {
- this.updateConstraintListEvent.emit(response.properties);
+ this.emitEventOnChanges(constraintType, response);
this.isLoading = false;
- }, () => {
+ }, (err) => {
console.error("Failed to Create Substitution Filter on the component with id: ", this.compositeService.uniqueId);
this.isLoading = false;
});
this.modalServiceNg2.closeCurrentModal();
}
- onSelectFilter(index: number) {
+ onSelectSubstitutionFilter(constraintType: string, index: number) {
const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal);
- const updateButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateSubstitutionFilter(), this.getDisabled);
+ const updateButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateSubstitutionFilter(constraintType), this.getDisabled);
const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateSubstitutionFilterTxt, '', [updateButton, cancelButton], 'standard');
this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel);
this.modalServiceNg2.addDynamicContentToModal(
@@ -209,7 +212,7 @@ export class SubstitutionFilterComponent {
ServiceDependenciesEditorComponent,
{
serviceRuleIndex: index,
- serviceRules: _.map(this.constraintObjects, (constraint) => new ConstraintObjectUI(constraint)),
+ serviceRules: _.map(this.constraintProperties, (constraint) => new ConstraintObjectUI(constraint)),
currentServiceName: this.currentServiceInstance.name,
operatorTypes: this.operatorTypes,
compositeServiceName: this.compositeService.name,
@@ -221,17 +224,16 @@ export class SubstitutionFilterComponent {
this.modalInstance.instance.open();
}
- updateSubstitutionFilter = (): void => {
- const constraintToUpdate: ConstraintObject = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
+ updateSubstitutionFilter = (constraintType: string): void => {
+ const constraintToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule));
this.isLoading = true;
this.topologyTemplateService.updateSubstitutionFilterConstraints(
this.compositeService.uniqueId,
- this.currentServiceInstance.uniqueId,
constraintToUpdate,
- this.compositeService.componentType
+ this.compositeService.componentType,
+ constraintType
).subscribe((response) => {
- this.hasSubstitutionFilter.emit(this.isSubstitutionFilterSet());
- this.updateConstraintListEvent.emit(response.properties);
+ this.emitEventOnChanges(constraintType, response);
this.isLoading = false;
}, () => {
console.error("Failed to Update Substitution Filter on the component with id: ", this.compositeService.uniqueId);
@@ -240,22 +242,21 @@ export class SubstitutionFilterComponent {
this.modalServiceNg2.closeCurrentModal();
}
- onDeleteSubstitutionFilter = (index: number) => {
+ onDeleteSubstitutionFilter = (constraintType: string, index: number) => {
this.isLoading = true;
this.topologyTemplateService.deleteSubstitutionFilterConstraints(
this.compositeService.uniqueId,
- this.currentServiceInstance.uniqueId,
index,
- this.compositeService.componentType
+ this.compositeService.componentType,
+ constraintType
).subscribe((response) => {
- console.log("on Delete - Response Properties: ", response.properties);
- this.updateConstraintListEvent.emit(response.properties);
+ this.emitEventOnChanges(constraintType, response);
this.isLoading = false;
- }, () => {
- console.error("Failed to Delete Substitution Filter on the component with id: ", this.compositeService.uniqueId);
+ }, (error) => {
+ console.error("Failed to Delete Substitution Filter on the component with id: ",
+ this.compositeService.uniqueId, error);
this.isLoading = false;
});
- this.constraintObjects = [];
this.modalServiceNg2.closeCurrentModal();
}
@@ -274,23 +275,15 @@ export class SubstitutionFilterComponent {
}
}
- openDeleteModal = (index: number) => {
+ openDeleteModal = (constraintType: string, index: number) => {
this.modalServiceNg2.createActionModal(I18nTexts.deleteSubstitutionFilterTxt, I18nTexts.deleteSubstitutionFilterMsg,
- I18nTexts.modalDelete, () => this.onDeleteSubstitutionFilter(index), I18nTexts.modalCancel).instance.open();
+ I18nTexts.modalDelete, () => this.onDeleteSubstitutionFilter(constraintType, index), I18nTexts.modalCancel).instance.open();
}
- private getSubstitutionFilter = (componentInstance: ComponentInstance): void => {
- this.topologyTemplateService.getSubstitutionFilterConstraints(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((response) => {
- const substitutionFilter: ConstraintObject[] = response.substitutionFilterForTopologyTemplate[componentInstance.uniqueId].properties;
- if (substitutionFilter) {
- this.currentServiceInstance = componentInstance;
- this.constraintObjects = substitutionFilter;
+ private emitEventOnChanges(constraintType: string, response) {
+ if (ToscaFilterConstraintType.PROPERTIES === constraintType) {
+ this.updateSubstitutionFilterProperties.emit(response.properties);
+ this.constraintProperties = response.properties;
}
- });
- }
-
- private isSubstitutionFilterSet = (): boolean => {
- return Array.isArray(this.constraintObjects) && this.constraintObjects.length > 0;
}
-
}
diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts
index 9ea7c0c5a0..34648f0931 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.module.ts
@@ -22,6 +22,7 @@ import { NgModule } from '@angular/core';
import { UiElementsModule } from 'app/ng2/components/ui/ui-elements.module';
import { TranslateModule } from 'app/ng2/shared/translator/translate.module';
import { SubstitutionFilterComponent } from "./substitution-filter.component";
+import {AccordionModule} from "onap-ui-angular/dist/accordion/accordion.module";
@NgModule({
declarations: [
@@ -30,7 +31,8 @@ import { SubstitutionFilterComponent } from "./substitution-filter.component";
imports: [
CommonModule,
UiElementsModule,
- TranslateModule
+ TranslateModule,
+ AccordionModule
],
exports: [
SubstitutionFilterComponent