Add 'Service Dependencies' tab in composition page

 Issue-ID: SDC-1987

Change-Id: Ib5b688c12234c81fe6f89b2b5d37dd16a75b0db9
Signed-off-by: miriame <miriam.eini@amdocs.com>

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