diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
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 |