diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
5 files changed, 163 insertions, 92 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html index 4238a4e96f..c3d4817a39 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html @@ -1,6 +1,6 @@ <div class="service-dependencies"> <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> - <div *ngIf="!isDependent" class="checkbox-label-mark-as-dependent"> + <div *ngIf="!isDependent" class="checkbox-label-mark-as-dependent"> <select name="singleSelect" id="singleSelect" ng-model="data.singleSelect" (change)='onOptionsSelected($event)'> <option>Select Directive</option> @@ -11,34 +11,77 @@ <div *ngIf="isDependent" class="checkbox-label-mark-as-dependent"> <label class="i-sdc-form-label">Directive: {{getActualDirectiveValue().toUpperCase()}}</label> <span class="sprite-new delete-btn delete-icon" - (click)="onRemoveDirective()" data-tests-id="delete-input-button"> + (click)="onRemoveDirective()" data-tests-id="delete-input-button"> </span> </div> - <div class="i-sdc-designer-sidebar-section-content-item-rules-section" *ngIf="isDependent"> + <div *ngIf="isDependent"> + <div class="w-sdc-designer-sidebar-section"> + <sdc-accordion [title]="'Node Filter Capabilities'" [arrow-direction]="'right'" [open]="true"> + <div class="i-sdc-designer-sidebar-section-content-node-filter-section"> - <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 && onSelectRule(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="i-sdc-designer-sidebar-section-content-node-filter" + [ngClass]="{'hand': !readonly}" + *ngFor="let capability of constraintCapabilities; let i = index"> + <div class="filter-details" [ngClass]="{'readonly': readonly}"> + <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(capabilities, i)" + tooltips + tooltip="{{capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator) + ' ' + + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}}"> + {{capability.servicePropertyName + ' ' + getSymbol(capability.constraintOperator) + + ' ' + + (capability.sourceName ? capability.sourceName + ':' : '') + capability.value}} + </div> + <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon" + (click)="openDeleteModal(capabilities, i)" + data-tests-id="delete-input-button"></span> + </div> + </div> + + <div class="w-sdc-designer-sidebar-section-node-filter-footer"> + <button + class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue" + data-tests-id="add-rule-button" + (click)="onAddNodeFilter(capabilities)" + [disabled]="readonly"> + {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}} + </button> + </div> </div> - <span *ngIf="!readonly" class="sprite-new delete-btn delete-icon" - (click)="openDeleteModal(i)" data-tests-id="delete-input-button"></span> - </div> - </div> + </sdc-accordion> + + <sdc-accordion [title]="'Node Filter Properties'" [arrow-direction]="'right'" [open]="true"> + <div class="i-sdc-designer-sidebar-section-content-node-filter-section"> - <div class="w-sdc-designer-sidebar-section-footer"> - <button - class="w-sdc-designer-sidebar-section-footer-action add-rule-btn tlv-btn blue" - data-tests-id="add-rule-button" - (click)="onAddRule()" - [disabled]="readonly"> - {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}} - </button> + <div class="i-sdc-designer-sidebar-section-content-node-filter" + [ngClass]="{'hand': !readonly}" + *ngFor="let property of constraintProperties; let i = index"> + <div class="filter-details" [ngClass]="{'readonly': readonly}"> + <div class="filter-desc" (click)="!readonly && onSelectNodeFilter(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="w-sdc-designer-sidebar-section-node-filter-footer"> + <button + class="w-sdc-designer-sidebar-section-node-filter-footer-action add-rule-btn tlv-btn blue" + data-tests-id="add-rule-button" + (click)="onAddNodeFilter(properties)" + [disabled]="readonly"> + {{'DIRECTIVES_AND_NODE_FILTER_ADD_NODE_FILTER' | translate}} + </button> + </div> + </div> + </sdc-accordion> </div> </div> </div> diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less index 21c2b3aadc..00be76c8ca 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less @@ -32,9 +32,8 @@ } } - - .i-sdc-designer-sidebar-section-content-item-rules-section { - .i-sdc-designer-sidebar-section-content-item-rule { + .i-sdc-designer-sidebar-section-content-node-filter-section { + .i-sdc-designer-sidebar-section-content-node-filter { border-bottom: 1px solid @main_color_o; padding: 5px 10px 5px 18px; position: relative; @@ -43,7 +42,7 @@ align-items: center; justify-content: space-between; - .rule-details { + .filter-details { // .s_1; display: flex; flex: 1; @@ -64,7 +63,7 @@ opacity: 0.5; } } - .rule-desc { + .filter-desc { .sdc-ellipsis; width: 220px; position: relative; @@ -73,13 +72,44 @@ } } - .w-sdc-designer-sidebar-section-footer { + .w-sdc-designer-sidebar-section-node-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-node-filter-footer-action { width: 180px; margin-top: 10px; } -}
\ No newline at end of file +} + +/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/service-dependencies/service-dependencies.component.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts index 55c933c38d..90f82f8983 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts @@ -123,8 +123,12 @@ export class ServiceDependenciesComponent { isDependent: boolean; isLoading: boolean; parentServiceInputs: InputBEModel[] = []; - constraintObjects: ConstraintObject[] = []; + constraintProperties: ConstraintObject[] = []; + constraintCapabilities: ConstraintObject[] = []; operatorTypes: any[]; + capabilities: string = 'capabilities'; + properties: string = 'properties'; + private componentInstancesConstraints: ConstraintObject[] = []; @Input() readonly: boolean; @Input() compositeService: ComponentMetadata; @@ -133,7 +137,8 @@ export class ServiceDependenciesComponent { @Input() selectedInstanceConstraints: ConstraintObject[] = []; @Input() selectedInstanceProperties: PropertyBEModel[] = []; @Input() directiveValues: any = DirectiveValue; - @Output() updateRulesListEvent: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>(); + @Output() updateNodeFilterProperties: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>(); + @Output() updateNodeFilterCapabilities: EventEmitter<ConstraintObject[]> = new EventEmitter<ConstraintObject[]>(); @Output() loadRulesListEvent:EventEmitter<any> = new EventEmitter(); @Output() dependencyStatus = new EventEmitter<boolean>(); @@ -175,6 +180,7 @@ export class ServiceDependenciesComponent { const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'grey', this.onCloseRemoveDependencyModal); const modalModel: ModalModel = new ModalModel('sm', I18nTexts.removeDirectiveModalTitle, I18nTexts.removeDirectiveModalText, [actionButton, cancelButton]); + this.loadNodeFilter(); return this.modalServiceNg2.createCustomModal(modalModel); } @@ -188,11 +194,12 @@ export class ServiceDependenciesComponent { private loadNodeFilter = (): void => { this.topologyTemplateService.getServiceFilterConstraints(this.compositeService.componentType, this.compositeService.uniqueId).subscribe((response) => { - if (response.nodeFilterforNode) { - const nodeFilterResponse: ConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].properties; - if (nodeFilterResponse) { - this.constraintObjects = nodeFilterResponse; - } + if (response.nodeFilterforNode && response.nodeFilterforNode[this.currentServiceInstance.uniqueId]) { + this.componentInstancesConstraints = response.nodeFilterforNode; + const nodeFilterPropertiesResponse: ConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].properties; + this.constraintProperties = nodeFilterPropertiesResponse; + const nodeFilterCapabilitiesResponse: ConstraintObject[] = response.nodeFilterforNode[this.currentServiceInstance.uniqueId].capabilities; + this.constraintCapabilities = nodeFilterCapabilitiesResponse; } }); } @@ -201,7 +208,7 @@ export class ServiceDependenciesComponent { this.modalServiceNg2.closeCurrentModal(); this.isLoading = true; const isDepOrig = this.isDependent; - const rulesListOrig = this.constraintObjects; + const rulesListOrig = this.componentInstancesConstraints; this.currentServiceInstance.unmarkAsDependent(this.getActualDirectiveValue()); this.updateComponentInstance(isDepOrig, rulesListOrig); } @@ -214,16 +221,18 @@ export class ServiceDependenciesComponent { onOptionsSelected(event: any) { const newDirectiveValue = event.target.value; if (newDirectiveValue.toLowerCase() !== this.getActualDirectiveValue()) { - const rulesListOrig = this.constraintObjects; + const rulesListOrig = this.componentInstancesConstraints; this.setDirectiveValue(newDirectiveValue); - this.constraintObjects = []; + this.constraintProperties = []; + this.constraintCapabilities = []; this.updateComponentInstance(this.isDependent, rulesListOrig); } } private onRemoveDirective() { this.openRemoveDependencyModal().instance.open(); - this.constraintObjects = []; + this.constraintProperties = []; + this.constraintCapabilities = []; } private setDirectiveValue(newDirectiveValue: string) { @@ -253,15 +262,16 @@ export class ServiceDependenciesComponent { this.isLoading = false; }, (err) => { this.isDependent = isDependentOrigVal; - this.constraintObjects = rulesListOrig; + this.componentInstancesConstraints = rulesListOrig; this.isLoading = false; console.log('An error has occurred.'); }); } - onAddRule() { + onAddNodeFilter = (constraintType: string) => { + console.info("constraintType: ", constraintType); const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); - const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', this.createRule, this.getDisabled); + const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalCreate, 'blue', () => this.createNodeFilter(constraintType), this.getDisabled); const modalModel: ModalModel = new ModalModel('l', I18nTexts.addNodeFilterTxt, '', [saveButton, cancelButton], 'standard'); this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); this.modalServiceNg2.addDynamicContentToModal( @@ -279,9 +289,9 @@ export class ServiceDependenciesComponent { this.modalInstance.instance.open(); } - onSelectRule(index: number) { + onSelectNodeFilter(constraintType: string, index: number) { const cancelButton: ButtonModel = new ButtonModel(I18nTexts.modalCancel, 'outline white', this.modalServiceNg2.closeCurrentModal); - const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateRules(), this.getDisabled); + const saveButton: ButtonModel = new ButtonModel(I18nTexts.modalSave, 'blue', () => this.updateNodeFilter(constraintType), this.getDisabled); const modalModel: ModalModel = new ModalModel('l', I18nTexts.updateNodeFilterTxt, '', [saveButton, cancelButton], 'standard'); this.modalInstance = this.modalServiceNg2.createCustomModal(modalModel); this.modalServiceNg2.addDynamicContentToModal( @@ -289,7 +299,8 @@ export class ServiceDependenciesComponent { ServiceDependenciesEditorComponent, { serviceRuleIndex: index, - serviceRules: _.map(this.constraintObjects, (rule) => new ConstraintObjectUI(rule)), + serviceRules: _.map(this.properties == constraintType ? this.constraintProperties : + this.constraintCapabilities, (rule) => new ConstraintObjectUI(rule)), currentServiceName: this.currentServiceInstance.name, operatorTypes: this.operatorTypes, compositeServiceName: this.compositeService.name, @@ -305,16 +316,17 @@ export class ServiceDependenciesComponent { return !this.modalInstance.instance.dynamicContent.instance.checkFormValidForSubmit(); } - createRule = (): void => { + createNodeFilter = (constraintType: string) => { const newRuleToCreate: ConstraintObject = new ConstraintObject(this.modalInstance.instance.dynamicContent.instance.currentRule); this.isLoading = true; this.topologyTemplateService.createServiceFilterConstraints( this.compositeService.uniqueId, this.currentServiceInstance.uniqueId, newRuleToCreate, - this.compositeService.componentType + this.compositeService.componentType, + constraintType ).subscribe( (response) => { - this.updateRulesListEvent.emit(response.properties); + this.emitEventOnChanges(constraintType, response); this.isLoading = false; }, (err) => { this.isLoading = false; @@ -322,16 +334,17 @@ export class ServiceDependenciesComponent { this.modalServiceNg2.closeCurrentModal(); } - updateRules = (): void => { + updateNodeFilter = (constraintType: string) => { const allRulesToUpdate: ConstraintObject[] = this.modalInstance.instance.dynamicContent.instance.serviceRulesList.map((rule) => new ConstraintObject(rule)); this.isLoading = true; this.topologyTemplateService.updateServiceFilterConstraints( this.compositeService.uniqueId, this.currentServiceInstance.uniqueId, allRulesToUpdate, - this.compositeService.componentType + this.compositeService.componentType, + constraintType ).subscribe((response) => { - this.updateRulesListEvent.emit(response.properties); + this.emitEventOnChanges(constraintType, response); this.isLoading = false; }, (err) => { this.isLoading = false; @@ -347,15 +360,16 @@ export class ServiceDependenciesComponent { } } - onDeleteRule = (index: number) => { + onDeleteNodeFilter = (constraintType: string, index: number) => { this.isLoading = true; this.topologyTemplateService.deleteServiceFilterConstraints( this.compositeService.uniqueId, this.currentServiceInstance.uniqueId, index, - this.compositeService.componentType + this.compositeService.componentType, + constraintType ).subscribe( (response) => { - this.updateRulesListEvent.emit(response.properties); + this.emitEventOnChanges(constraintType, response); this.isLoading = false; }, (err) => { this.isLoading = false; @@ -363,9 +377,19 @@ export class ServiceDependenciesComponent { this.modalServiceNg2.closeCurrentModal(); } - openDeleteModal = (index: number) => { + private emitEventOnChanges(constraintType: string, response) { + if (this.properties === constraintType) { + this.updateNodeFilterProperties.emit(response.properties); + this.constraintProperties = response.properties; + } else { + this.updateNodeFilterCapabilities.emit(response.capabilities); + this.constraintCapabilities = response.capabilities; + } + } + + openDeleteModal = (constraintType: string, index: number) => { this.modalServiceNg2.createActionModal(I18nTexts.deleteNodeFilterTxt, I18nTexts.deleteNodeFilterMsg, - I18nTexts.modalDelete, () => this.onDeleteRule(index), I18nTexts.modalCancel).instance.open(); + I18nTexts.modalDelete, () => this.onDeleteNodeFilter(constraintType, index), I18nTexts.modalCancel).instance.open(); } } diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts index 10cd141a87..bb98f57d5c 100644 --- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts +++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts @@ -3,16 +3,18 @@ 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 { ServiceDependenciesComponent } from './service-dependencies.component'; +import {AccordionModule} from "onap-ui-angular/dist/accordion/accordion.module"; @NgModule({ declarations: [ ServiceDependenciesComponent ], - imports: [ - CommonModule, - UiElementsModule, - TranslateModule - ], + imports: [ + CommonModule, + UiElementsModule, + TranslateModule, + AccordionModule + ], exports: [ ServiceDependenciesComponent ], 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 2d9b2646af..cc41c3a69a 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,34 +25,6 @@ .substitution-filter { - /deep/ .checkbox-label-mark-as-dependent { - padding: 7px 18px; - position: relative; - height: 61px; - color: @main_color_a; - box-shadow: 0 2px 7px @main_color_o; - border-bottom: 1px solid @main_color_o; - .checkbox-label { - margin-top: 14px; - .checkbox-label-content { - font-size: 14px; - } - } - .checkbox-container input[type=checkbox].checkbox-hidden[disabled] ~ .checkbox-label-content { - opacity: 0.5; - } - .delete-btn { - background-position: -137px -415px; - width: 24px; - height: 24px - } - - loader { - top: 20px; - } - } - - .i-sdc-designer-sidebar-section-content-item-rules-section { .i-sdc-designer-sidebar-section-content-item-rule { border-bottom: 1px solid @main_color_o; |