summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/logic
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic')
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.html89
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less46
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.ts80
-rw-r--r--catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.module.ts12
-rw-r--r--catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.less28
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;