summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages
diff options
context:
space:
mode:
authormiriame <miriam.eini@amdocs.com>2019-02-13 15:17:26 +0200
committermiriame <miriam.eini@amdocs.com>2019-02-14 10:45:13 +0200
commitc2ce914541e694c7d1c8853b88936095e8b9ede4 (patch)
treed9d6dfa4b011c6868048d83a2116743b283b1cb1 /catalog-ui/src/app/ng2/pages
parentd72aaa18d4dbfb8017dce566d9c41ccc00985528 (diff)
Add 'Service Dependencies' tab in composition page
Issue-ID: SDC-1987 Change-Id: Ib5b688c12234c81fe6f89b2b5d37dd16a75b0db9 Signed-off-by: miriame <miriam.eini@amdocs.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/pages')
-rw-r--r--catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html56
-rw-r--r--catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less43
-rw-r--r--catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts192
-rw-r--r--catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts25
4 files changed, 316 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
new file mode 100644
index 0000000000..f22e454332
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.html
@@ -0,0 +1,56 @@
+<div class="service-dependencies-editor">
+ <form class="w-sdc-form">
+
+ <div class="sdc-modal-top-bar">
+ <div class="sdc-modal-top-bar-buttons" *ngIf="currentIndex >= 0">
+ <span (click)="onChangePage(currentIndex - 1)" [ngClass]="{'disabled' : currentIndex === 0}" class="sprite-new left-arrow" data-tests-id="get-prev-rule" tooltip="Previous"></span>
+ <span (click)="onChangePage(currentIndex + 1)" [ngClass]="{'disabled' : currentIndex === input.serviceRules.length - 1}" class="sprite-new right-arrow" data-tests-id="get-next-rule" tooltip="Next"></span>
+ </div>
+ </div>
+
+ <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+
+ <div class="i-sdc-form-content">
+ <div class="rule-builder-content">
+ <div class="i-sdc-form-item rule-input-field">
+ <label class="i-sdc-form-label required">Service {{currentServiceName}} Property</label>
+ <ui-element-dropdown
+ class="i-sdc-form-select"
+ data-tests-id="servicePropertyName"
+ [values]="ddValueSelectedServicePropertiesNames"
+ [(value)]="currentRule.servicePropertyName"
+ (change)="onServicePropertyChanged()">
+ </ui-element-dropdown>
+ </div>
+
+ <div class="i-sdc-form-item rule-input-field operator">
+ <ui-element-dropdown class="i-sdc-form-select" data-tests-id="constraintOperator" [values]="operatorTypes" [(value)]="currentRule.constraintOperator"></ui-element-dropdown>
+ </div>
+
+ <div class="i-sdc-form-item rule-input-field">
+ <label class="i-sdc-form-label required" >Source</label>
+ <ui-element-dropdown class="i-sdc-form-select" data-tests-id="sourceType" [values]="sourceTypes" [(value)]="currentRule.sourceName" (change)="onSelectSourceType($event)"></ui-element-dropdown>
+ </div>
+
+ <div class="rule-input-field assigned-value-field">
+ <label class="i-sdc-form-label required" >{{assignedValueLabel}}</label>
+ <dynamic-element
+ *ngIf="currentRule.sourceType === SOURCE_TYPES.STATIC.value"
+ [(value)]="currentRule.value"
+ class="rule-assigned-value"
+ data-tests-id="ruleAssignedValue"
+ (elementChanged)="onValueChange($event.isValid)"
+ [type]="selectedPropertyObj ? selectedPropertyObj.type : 'string'">
+ </dynamic-element>
+ <ui-element-dropdown *ngIf="currentRule.sourceType !== SOURCE_TYPES.STATIC.value"
+ class="rule-assigned-value"
+ data-tests-id="ruleAssignedValue"
+ [(value)]="currentRule.value"
+ [values]="listOfValuesToAssign">
+ </ui-element-dropdown>
+ </div>
+ </div>
+ </div>
+ </form>
+
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
new file mode 100644
index 0000000000..e03b73c8c0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.less
@@ -0,0 +1,43 @@
+@import './../../../../assets/styles/variables.less';
+
+.sdc-modal-top-bar {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.i-sdc-form-content {
+ display: flex;
+ flex-direction: column;
+ margin-top: 10px;
+ padding-bottom: 20px;
+
+ .i-sdc-form-item {
+ width: 250px;
+ &.operation {
+ width: 60px;
+ }
+ }
+
+ .rule-builder-content {
+ display: flex;
+ align-items: flex-end;
+ .rule-input-field {
+ flex: 1;
+ &:not(:last-of-type) {
+ margin-right: 20px;
+ }
+ &.operator{
+ width: 55px;
+ flex: 0 1 auto;
+ }
+ &.assigned-value-field {
+ margin-bottom: 10px;
+ }
+ /deep/ ui-element-dropdown select,
+ /deep/ ui-element-input input {
+ height: 30px;
+ }
+ }
+
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
new file mode 100644
index 0000000000..db5e7a9a31
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.component.ts
@@ -0,0 +1,192 @@
+/*!
+ * Copyright © 2016-2018 European Support Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+import { Component } from '@angular/core';
+import {ServiceServiceNg2} from "app/ng2/services/component-services/service.service";
+import {ConstraintObjectUI, OPERATOR_TYPES} from 'app/ng2/components/logic/service-dependencies/service-dependencies.component';
+import {ServiceInstanceObject, PropertyBEModel} from 'app/models';
+import { PROPERTY_DATA } from 'app/utils';
+import {DropdownValue} from 'app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component';
+
+export class UIDropDownSourceTypesElement extends DropdownValue{
+ options: Array<any>;
+ assignedLabel: string;
+ type: string;
+ constructor(input?: any){
+ if(input) {
+ let value = input.value || '';
+ let label = input.label || '';
+ super(value, label);
+ this.options = input.options;
+ this.assignedLabel = input.assignedLabel;
+ this.type = input.type;
+ }
+ }
+}
+
+@Component({
+ selector: 'service-dependencies-editor',
+ templateUrl: './service-dependencies-editor.component.html',
+ styleUrls:['./service-dependencies-editor.component.less'],
+ providers: [ServiceServiceNg2]
+})
+
+export class ServiceDependenciesEditorComponent {
+
+ input: {
+ serviceRuleIndex: number,
+ serviceRules: Array<ConstraintObjectUI>,
+ compositeServiceName: string,
+ currentServiceName: string,
+ compositeServiceProperties: Array<PropertyBEModel>,
+ selectedInstanceProperties: Array<PropertyBEModel>,
+ operatorTypes: Array<DropdownValue>,
+ selectedInstanceSiblings: Array<ServiceInstanceObject>
+ };
+ currentServiceName: string;
+ selectedServiceProperties: Array<PropertyBEModel>;
+ selectedPropertyObj: PropertyBEModel;
+ ddValueSelectedServicePropertiesNames: Array<DropdownValue>;
+ operatorTypes: Array<DropdownValue>;
+ sourceTypes: Array<UIDropDownSourceTypesElement> = [];
+ currentRule: ConstraintObjectUI;
+ currentIndex: number;
+ listOfValuesToAssign: Array<DropdownValue>;
+ listOfSourceOptions: Array<PropertyBEModel>;
+ assignedValueLabel: string;
+ serviceRulesList: Array<ConstraintObjectUI>;
+
+
+ SOURCE_TYPES = {
+ STATIC: {label: 'Static', value: 'static'},
+ SERVICE_PROPERTY: {label: 'Service Property', value: 'property'}
+ };
+
+
+ ngOnInit() {
+ this.currentIndex = this.input.serviceRuleIndex;
+ this.serviceRulesList = this.input.serviceRules;
+ this.currentRule = this.serviceRulesList && this.input.serviceRuleIndex >= 0 ?
+ this.serviceRulesList[this.input.serviceRuleIndex]:
+ new ConstraintObjectUI({sourceName: this.SOURCE_TYPES.STATIC.value, sourceType: this.SOURCE_TYPES.STATIC.value, value: "", constraintOperator: OPERATOR_TYPES.EQUAL});
+ this.currentServiceName = this.input.currentServiceName;
+ this.operatorTypes = this.input.operatorTypes;
+ this.selectedServiceProperties = this.input.selectedInstanceProperties;
+ this.ddValueSelectedServicePropertiesNames = _.map(this.input.selectedInstanceProperties, prop => new DropdownValue(prop.name, prop.name));
+ this.initSourceTypes();
+ this.syncRuleData();
+ this.updateSourceTypesRelatedValues();
+ }
+
+ initSourceTypes() {
+ this.sourceTypes.push({label: this.SOURCE_TYPES.STATIC.label, value: this.SOURCE_TYPES.STATIC.value,
+ options: [], assignedLabel: this.SOURCE_TYPES.STATIC.label, type: this.SOURCE_TYPES.STATIC.value});
+ this.sourceTypes.push({
+ label: this.input.compositeServiceName,
+ value: this.input.compositeServiceName,
+ assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
+ type: this.SOURCE_TYPES.SERVICE_PROPERTY.value,
+ options: this.input.compositeServiceProperties
+ });
+ _.forEach(this.input.selectedInstanceSiblings, sib =>
+ this.sourceTypes.push({
+ label: sib.name,
+ value: sib.name,
+ options: sib.properties || [],
+ assignedLabel: this.SOURCE_TYPES.SERVICE_PROPERTY.label,
+ type: this.SOURCE_TYPES.SERVICE_PROPERTY.value
+ })
+ );
+ }
+
+ syncRuleData() {
+ if(!this.currentRule.sourceName && this.currentRule.sourceType === this.SOURCE_TYPES.STATIC.value) {
+ this.currentRule.sourceName = this.SOURCE_TYPES.STATIC.value;
+ }
+ this.selectedPropertyObj = _.find(this.selectedServiceProperties, prop => prop.name === this.currentRule.servicePropertyName);
+ this.updateOperatorTypesList();
+ this.updateSourceTypesRelatedValues();
+ }
+
+ updateOperatorTypesList() {
+ if (this.selectedPropertyObj && PROPERTY_DATA.SIMPLE_TYPES_COMPARABLE.indexOf(this.selectedPropertyObj.type) === -1) {
+ this.operatorTypes = [{label: "=", value: OPERATOR_TYPES.EQUAL}];
+ this.currentRule.constraintOperator = OPERATOR_TYPES.EQUAL;
+ }
+ else {
+ this.operatorTypes = this.input.operatorTypes;
+ }
+ }
+
+ updateSourceTypesRelatedValues() {
+ if(this.currentRule.sourceName) {
+ let selectedSourceType: UIDropDownSourceTypesElement = this.sourceTypes.find(
+ t => t.value === this.currentRule.sourceName && t.type === this.currentRule.sourceType
+ );
+ this.listOfSourceOptions = selectedSourceType.options || [];
+ this.assignedValueLabel = selectedSourceType.assignedLabel || this.SOURCE_TYPES.STATIC.label;
+ this.filterOptionsByType();
+ }
+ }
+
+ onChangePage(newIndex) {
+ if (newIndex >= 0 && newIndex < this.input.serviceRules.length) {
+ this.currentIndex = newIndex;
+ this.currentRule = this.serviceRulesList[newIndex];
+ this.syncRuleData();
+ }
+ }
+
+ onServicePropertyChanged() {
+ this.selectedPropertyObj = _.find(this.selectedServiceProperties, prop => prop.name === this.currentRule.servicePropertyName);
+ this.updateOperatorTypesList();
+ this.filterOptionsByType();
+ this.currentRule.value = '';
+ }
+
+ onSelectSourceType() {
+ this.currentRule.sourceType = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value ?
+ this.SOURCE_TYPES.STATIC.value :
+ this.SOURCE_TYPES.SERVICE_PROPERTY.value;
+ this.updateSourceTypesRelatedValues();
+ this.currentRule.value = '';
+ }
+
+ filterOptionsByType() {
+ if(!this.selectedPropertyObj) {
+ this.listOfValuesToAssign = [];
+ return;
+ }
+ this.listOfValuesToAssign = this.listOfSourceOptions.reduce((result, op:PropertyBEModel) => {
+ if(op.type === this.selectedPropertyObj.type && op.schemaType === this.selectedPropertyObj.schemaType) {
+ result.push(new DropdownValue(op.name, op.name));
+ }
+ return result;
+ }, []);
+ }
+
+ onValueChange(isValidValue) {
+ this.currentRule.updateValidity(isValidValue);
+ }
+
+ checkFormValidForSubmit() {
+ if(!this.serviceRulesList) { //for create modal
+ let isStatic = this.currentRule.sourceName === this.SOURCE_TYPES.STATIC.value;
+ return this.currentRule.isValidRule(isStatic);
+ }
+ //for update all rules
+ return this.serviceRulesList.every(rule => rule.isValidRule(rule.sourceName === this.SOURCE_TYPES.STATIC.value));
+ }
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts
new file mode 100644
index 0000000000..98ac997bf7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/service-dependencies-editor/service-dependencies-editor.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ServiceDependenciesEditorComponent} from "./service-dependencies-editor.component";
+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";
+
+@NgModule({
+ declarations: [
+ ServiceDependenciesEditorComponent
+ ],
+ imports: [
+ CommonModule,
+ FormsModule,
+ FormElementsModule,
+ UiElementsModule
+ ],
+ exports: [],
+ entryComponents: [
+ ServiceDependenciesEditorComponent
+ ],
+ providers: []
+})
+export class ServiceDependenciesEditorModule {
+} \ No newline at end of file