[sdc] - last merges before moving to LF

Change-Id: I0df3ec795f0de84229ea4bb4806ec8f959243557
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

12 files changed, 181 insertions, 87 deletions

diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
index a9174fd73d..4befa2c797 100644
--- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
@@ -6,6 +6,7 @@
     border: 1px dotted;
     border-right: none;
     border-bottom: none;
+    width: 100%;
 }
 
 .node-item:last-child {
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
index 5467c94de7..331415c26f 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html
@@ -2,8 +2,8 @@
     <loader [display]="isLoading" size="large" [relative]="false"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
+        <div class="table-cell col3">From Instance</div>
         <div class="table-cell col2">Type</div>
-        <div class="table-cell col3">ES</div>
         <div class="table-cell valueCol">Value</div>
     </div>
     <div class="table-body">
@@ -16,12 +16,16 @@
                           class="property-description-icon sprite-new show-desc"
                           tooltip="{{input.description}}" tooltipDelay="0"></span>
                 </div>
+                <div class="table-cell col3">
+                    <div class="inner-cell-div" tooltip="{{instanceNamesMap[input.instanceUniqueId]}}">
+                        <span>{{instanceNamesMap[input.instanceUniqueId]}}</span>
+                    </div>
+                </div>
                 <div class="table-cell col2">
                     <div class="inner-cell-div" tooltip="{{input.type | contentAfterLastDot}}">
                         <span>{{input.type | contentAfterLastDot}}</span>
                     </div>
                 </div>
-                <div class="table-cell col3">{{input.schema && input.schema.property && input.schema.property.type ? (input.schema.property.type | contentAfterLastDot) : ''}}</div>
                 <div class="table-cell valueCol input-value-col" [class.inner-table-container]="input.childrenProperties || !input.isSimpleType">
                     <dynamic-element class="value-input"
                                      *ngIf="input.isSimpleType"
@@ -33,7 +37,7 @@
                                  [readonly]="readonly">
                     </dynamic-element>
                     <div class="delete-button-container">
-                        <span *ngIf="!input.ownerId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
+                        <span *ngIf="input.instanceUniqueId && !readonly" class="sprite-new delete-btn" (click)="openDeleteModal(input)"></span>
                     </div>
                 </div>
 
diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
index 83c0bda991..f2cac21237 100644
--- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts
@@ -13,6 +13,7 @@ import {ConfirmationDeleteInputComponent} from "./confirmation-delete-input/conf
 export class InputsTableComponent {
 
     @Input() inputs: Array<InputFEModel>;
+    @Input() instanceNamesMap: Map<string, string>;
     @Input() readonly:boolean;
     @Input() isLoading:boolean;
     @Output() inputValueChanged: EventEmitter<any> = new EventEmitter<any>();
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
index 5aa0052cc3..92948b3b0d 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html
@@ -38,7 +38,7 @@
     <ng-container *ngIf="!property.isDeclared">
             <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
-            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="propPath == expandedChildId"></span>
+            <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="expandedChildId.indexOf(propPath) == 0"></span>
     </ng-container>
 
 </div>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
index f3259ab3a2..c57998af5e 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html
@@ -7,14 +7,14 @@
         <div class="table-cell valueCol">Value</div>
     </div>
     <div class="table-body">
-        <div class="no-data" *ngIf="!feInstancesNames || !feInstancesNames.length">No data to display</div>
+        <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
 
-        <ng-container *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
-            <div class="table-rows-header white-sub-header">{{instanceName | contentAfterLastDot}}</div>
+        <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:instanceId">
+            <div class="table-rows-header white-sub-header">{{feInstanceNamesMap[instanceId]}}</div>
 
             <div class="table-row"
-                *ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name"
-                (click)="onClickPropertyRow(property, instanceName, $event)"
+                *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm; trackBy:property?.name"
+                (click)="onClickPropertyRow(property, instanceId, $event)"
                 [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name }">
 
                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
@@ -49,7 +49,7 @@
                         [readonly]="readonly"
                         (valueChanged)="propValueChanged(property);"
                         (expandChild)="property.updateExpandedChildPropertyId($event)"
-                        (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
+                        (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
                         (checkProperty)="propertyChecked(property, $event)"
                         >
                     </dynamic-property>
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
index 463de4f018..f1721c0708 100644
--- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
+++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts
@@ -12,6 +12,7 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
 export class PropertiesTableComponent {
 
     @Input() fePropertiesMap: InstanceFePropertiesMap;
+    @Input() feInstanceNamesMap: Map<string, string>;
     @Input() selectedPropertyId: string;
     @Input() displayDeleteButton: boolean;
     @Input() propertyNameSearchText:string;
@@ -24,23 +25,10 @@ export class PropertiesTableComponent {
     @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();
     //@Output() selectInstanceRow: EventEmitter<string> = new EventEmitter<string>();
 
-    feInstancesNames: Array<string>;
 
     constructor ( private propertiesService:PropertiesService ){
     }
 
-    /**
-     * Update feInstancesNames when fePropertiesMap: InstanceFePropertiesMap change (after getting response from server)
-     */
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes['fePropertiesMap']) {
-            if (changes['fePropertiesMap'].currentValue) {
-                let keysPipe = new KeysPipe();
-                let fiteredArr = keysPipe.transform(changes['fePropertiesMap'].currentValue,[]);
-                this.feInstancesNames = fiteredArr;
-            }
-        }
-    }
 
     propValueChanged = (property) => {
         !property.isDeclared && this.valueChanged.emit(property);
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index fa3270ec77..0b50357a5c 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -5,6 +5,7 @@
                 <tab tabTitle="Properties">
                     <properties-table class="properties-table"
                         [fePropertiesMap]="instanceFePropertiesMap"
+                        [feInstanceNamesMap]="componentInstanceNamesMap"
                         [searchTerm]="searchQuery"
                         [selectedPropertyId]="selectedFlatProperty.path"
                         [propertyNameSearchText]="searchPropertyName"
@@ -22,6 +23,7 @@
                     <inputs-table class="properties-table"
                                   [readonly]="isReadonly"
                                   [inputs]="inputs | searchFilter:'name':searchQuery"
+                                  [instanceNamesMap]="componentInstanceNamesMap"
                                   [isLoading]="loadingInputs"
                                   (deleteInput)="deleteInput($event)"
                                   (inputValueChanged)="inputValueChanged($event)"></inputs-table>
@@ -29,10 +31,10 @@
             </tabs>
             <div class="header">
                 <div class="search-filter-container" [class.without-filter]="isInpusTabSelected">
+                    <span *ngIf="displayClearSearch && !isInpusTabSelected" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span>
                     <input type="text" class="search-box" placeholder="Search" [(ngModel)]="searchQuery" />
                     <span class="sprite search-icon"></span>
                     <filter-properties-assignment *ngIf="!isInpusTabSelected" #advanceSearch class="advance-search" [componentType]="component.componentType" (searchProperties)="searchPropertiesInstances($event)"></filter-properties-assignment>
-                    <span *ngIf="displayClearSearch && !isInpusTabSelected" (click)="clickOnClearSearch()" class="clear-filter">Clear All</span>
                 </div>
                 <button class="tlv-btn blue declare-button" [disabled]="!checkedPropertiesCount || isReadonly" (click)="declareProperties()">Declare</button>
             </div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index 8df479ffa6..15244e5fa5 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -98,17 +98,13 @@
             }
 
         }
-        .advance-search{
-
-        }
+        
         .clear-filter{
             cursor: pointer;
-            color: @main_color_c;
-            font-family: @font-omnes-medium-italic;
+            color:#009fdb;
             text-decoration: underline;
-            position: relative;
-            top: 4px;
-            right: 16px;
+            padding-right:10px;
+            font-size:12px;
         }
 
         .declare-button{
@@ -170,8 +166,7 @@
     }
 
     .hierarchy-nav-container {
-        flex:1;
-        overflow: auto;
+        display:flex;
         flex-direction: column;
         height: 100%;
     }
@@ -187,6 +182,8 @@
     }
 
     .hierarchy-nav {
+        flex:1;
+        overflow:auto;
         display: grid;
         margin-top: 1em;
         margin-left: 1em;
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index e66ed59ad7..3efe866479 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -22,7 +22,8 @@ import {EventListenerService} from "app/services/event-listener-service"
 export class PropertiesAssignmentComponent {
     title = "Properties & Inputs";
 
-    component:ComponentData;
+    component: ComponentData;
+    componentInstanceNamesMap: Map<string, string> = new Map<string, string>();//instanceUniqueId, name
 
     propertiesNavigationData = [];
     instancesNavigationData = [];
@@ -80,7 +81,7 @@ export class PropertiesAssignmentComponent {
             .getComponentInputs(this.component)
             .subscribe(response => {
                 _.forEach(response.inputs, (input: InputBEModel) => {
-                    this.inputs.push(new InputFEModel(input));
+                    this.inputs.push(new InputFEModel(input)); //only push items that were declared via SDC
                 });
                 this.loadingInputs = false;
 
@@ -92,6 +93,7 @@ export class PropertiesAssignmentComponent {
 
                 _.forEach(this.instances, (instance) => {
                     this.instancesNavigationData.push(instance);
+                    this.componentInstanceNamesMap[instance.uniqueId] = instance.name;
                 });
                 this.loadingInstances = false;
                 if (this.instancesNavigationData[0] == undefined) {
@@ -129,12 +131,12 @@ export class PropertiesAssignmentComponent {
         this.selectedInstanceType = resourceInstance.originType;
 
         this.loadingProperties = true;
-        if(resourceInstance.originType === ResourceType.VF) {
+        if(this.isInput(resourceInstance.originType)) {
             this.componentInstanceServiceNg2
                 .getComponentInstanceInputs(this.component, resourceInstance)
                 .subscribe(response => {
                     instanceBePropertiesMap[resourceInstance.uniqueId] = response;
-                    this.processInstancePropertiesResponse(instanceBePropertiesMap);
+                    this.processInstancePropertiesResponse(instanceBePropertiesMap, true);
                     this.loadingProperties = false;
 
                 });
@@ -143,7 +145,7 @@ export class PropertiesAssignmentComponent {
                 .getComponentInstanceProperties(this.component, resourceInstance.uniqueId)
                 .subscribe(response => {
                     instanceBePropertiesMap[resourceInstance.uniqueId] = response;
-                    this.processInstancePropertiesResponse(instanceBePropertiesMap);
+                    this.processInstancePropertiesResponse(instanceBePropertiesMap, false);
                     this.loadingProperties = false;
                 });
         }
@@ -159,8 +161,8 @@ export class PropertiesAssignmentComponent {
     /**
      * Entry point handling response from server
      */
-    processInstancePropertiesResponse = (instanceBePropertiesMap:InstanceBePropertiesMap) => {
-        this.instanceFePropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(instanceBePropertiesMap, this.inputs); //create flattened children, disable declared props, and init values
+    processInstancePropertiesResponse = (instanceBePropertiesMap: InstanceBePropertiesMap, originTypeIsVF: boolean) => {
+        this.instanceFePropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren(instanceBePropertiesMap, originTypeIsVF, this.inputs); //create flattened children, disable declared props, and init values
         this.checkedPropertiesCount = 0;
     };
 
@@ -171,7 +173,7 @@ export class PropertiesAssignmentComponent {
         // Copying the actual value from the object ref into the value if it's from a complex type
         event.value = event.getJSONValue();
 
-        if (this.selectedInstanceData.originType === ResourceType.VF) {
+        if (this.isInput(this.selectedInstanceData.originType)) {
             console.log("I want to update input value on the resource instance");
             let inputToUpdate = new PropertyBEModel(event);
             this.componentInstanceServiceNg2
@@ -279,7 +281,7 @@ export class PropertiesAssignmentComponent {
         });
 
         let inputsToCreate: InstancePropertiesAPIMap;
-        if (this.selectedInstanceType !== ResourceType.VF) {
+        if (!this.isInput(this.selectedInstanceType)) {
             inputsToCreate = new InstancePropertiesAPIMap(null, selectedProperties);
         } else {
             inputsToCreate = new InstancePropertiesAPIMap(selectedProperties, null);
@@ -301,12 +303,12 @@ export class PropertiesAssignmentComponent {
     updatePropertyValueAfterDeclare = (input: InputFEModel) => {
         if (this.instanceFePropertiesMap[input.instanceUniqueId]) {
             let propertyForUpdatindVal = _.find(this.instanceFePropertiesMap[input.instanceUniqueId], (feProperty: PropertyFEModel) => {
-                return feProperty.name == input.relatedProperty.name;
+                return feProperty.name == input.relatedPropertyName;
             });
-
-            propertyForUpdatindVal.setAsDeclared(input.relatedProperty.nestedPath); //set prop as declared before assigning value
-            this.propertiesService.disableRelatedProperties(propertyForUpdatindVal, input.relatedProperty.nestedPath);
-            this.propertiesUtils.resetPropertyValue(propertyForUpdatindVal, input.relatedProperty.value, input.relatedProperty.nestedPath);
+            let inputPath = (input.inputPath && input.inputPath != propertyForUpdatindVal.name) ? input.inputPath : undefined;
+            propertyForUpdatindVal.setAsDeclared(inputPath); //set prop as declared before assigning value
+            this.propertiesService.disableRelatedProperties(propertyForUpdatindVal, inputPath);
+            this.propertiesUtils.resetPropertyValue(propertyForUpdatindVal, input.relatedPropertyValue, inputPath);
         }
     }
 
@@ -357,7 +359,7 @@ export class PropertiesAssignmentComponent {
             .filterComponentInstanceProperties(this.component, filterData)
             .subscribe(response => {
 
-                this.processInstancePropertiesResponse(response);
+                this.processInstancePropertiesResponse(response, false);
                 this.hierarchyPropertiesDisplayOptions.searchText = filterData.propertyName;//mark results in tree
                 this.searchPropertyName = filterData.propertyName;//mark in table
                 this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
@@ -373,6 +375,7 @@ export class PropertiesAssignmentComponent {
         this.hierarchyPropertiesDisplayOptions.searchText = "";
         this.displayClearSearch = false;
         this.advanceSearch.clearAll();
+        this.searchQuery = '';
     };
 
     clickOnClearSearch = () => {
@@ -382,4 +385,8 @@ export class PropertiesAssignmentComponent {
             this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
     };
 
+    private isInput = (instanceType:string):boolean =>{
+        return instanceType === ResourceType.VF || instanceType === ResourceType.PNF;
+    }
+
 }
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
index bdfbc4c402..bd629939be 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts
@@ -18,10 +18,9 @@ export class PropertiesUtils {
      * 3. Initialize valueObj (which also creates any new list/map flattened children as needed)
      * Returns InstanceFePropertiesMap
      */
-    public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, inputs:Array<InputFEModel>): InstanceFePropertiesMap => {
+    public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, isVF:boolean, inputs?:Array<InputFEModel>): InstanceFePropertiesMap => {
         let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap();
         angular.forEach(instancePropertiesMap, (properties:Array<PropertyBEModel>, instanceId:string) => {
-            let instanceInputs: Array<InputFEModel> = inputs.filter(input => input.instanceUniqueId == instanceId);
             let propertyFeArray: Array<PropertyFEModel> = [];
             _.forEach(properties, (property: PropertyBEModel) => {
 
@@ -34,12 +33,19 @@ export class PropertiesUtils {
                     if (newFEProp.derivedDataType == DerivedPropertyType.COMPLEX) { //Create children if prop is not simple, list, or map.
                         newFEProp.flattenedChildren = this.createFlattenedChildren(newFEProp.type, newFEProp.name);
                     }
-                    if (instanceInputs.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children
-                        instanceInputs.filter(input => input.relatedProperty.name == newFEProp.name).forEach((input) => {
-                            newFEProp.setAsDeclared(input.relatedProperty.nestedPath); //if a path was sent, its a child prop. this param is optional
-                            this.propertiesService.disableRelatedProperties(newFEProp, input.relatedProperty.nestedPath);
+                    if (newFEProp.getInputValues && newFEProp.getInputValues.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children
+                        newFEProp.getInputValues.forEach(propInputDetail => {
+                            let inputPath = propInputDetail.inputPath;
+                            if (!isVF && !inputPath) { //TODO: this is a workaround until Marina adds inputPath
+                                let input = inputs.find(input => input.uniqueId == propInputDetail.inputId);
+                                if (!input) { console.log("CANNOT FIND INPUT FOR " + propInputDetail.inputId); return; }
+                                else inputPath = input.inputPath;
+                            }
+                            if (isVF || inputPath == newFEProp.name) inputPath = undefined;
+                            newFEProp.setAsDeclared(inputPath); //if a path is sent, its a child prop. this param is optional
+                            this.propertiesService.disableRelatedProperties(newFEProp, inputPath);
                         });
-                    }
+                    }                   
                     this.initValueObjectRef(newFEProp); //initialize valueObj.
                     propertyFeArray.push(newFEProp);
                     newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children
@@ -51,19 +57,8 @@ export class PropertiesUtils {
         });
         return instanceFePropertiesMap;
     }
-    private createListOrMapChildrenFromValueObj = (property: PropertyFEModel) => {
-        if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP)
-            && Object.keys(property.valueObj).length) {
-
-            Object.keys(property.valueObj).forEach((key) => {
-                let newProps: Array<DerivedFEProperty> = this.createListOrMapChildren(property, key, property.valueObj[key]);
-                property.flattenedChildren.push(...newProps);
-            });
-            
-        }
-    }
 
-    public createListOrMapChildren = (property:PropertyBEModel, key: string, valueObj: any): Array<DerivedFEProperty> => {
+    public createListOrMapChildren = (property:PropertyFEModel | DerivedFEProperty, key: string, valueObj: any): Array<DerivedFEProperty> => {
         let newProps: Array<DerivedFEProperty> = [];
         let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj);
         newProps.push(parentProp);
@@ -101,10 +96,12 @@ export class PropertiesUtils {
             } else {
                 property.valueObj = _.merge({}, JSON.parse(property.defaultValue || '{}'), JSON.parse(property.value || '{}')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined.
             }
-            if (property.derivedDataType == DerivedPropertyType.COMPLEX) {
-                this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name);
+            if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP) && Object.keys(property.valueObj).length) {
+                Object.keys(property.valueObj).forEach((key) => {
+                    property.flattenedChildren.push(...this.createListOrMapChildren(property, key, property.valueObj[key]))
+                });
             } else {
-                this.createListOrMapChildrenFromValueObj(property);
+                this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name);
             }
         }
     }
@@ -116,6 +113,7 @@ export class PropertiesUtils {
     */
     public assignFlattenedChildrenValues = (parentValueJSON: any, derivedPropArray: Array<DerivedFEProperty>, parentName: string) => {
         if (!derivedPropArray || !parentName) return;
+        let propsToPushMap: Map<number, Array<DerivedFEProperty>> = new Map<number, Array<DerivedFEProperty>>();
         derivedPropArray.forEach((prop, index) => {
 
             let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name
@@ -124,20 +122,27 @@ export class PropertiesUtils {
             if ((prop.derivedDataType == DerivedPropertyType.SIMPLE || prop.isDeclared) && typeof prop.valueObj == 'object') { //Stringify objects that should be strings
                 prop.valueObj = JSON.stringify(prop.valueObj);
             } else { //parse strings that should be objects
-                if ((prop.derivedDataType == DerivedPropertyType.COMPLEX || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj != 'object') {
+                if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') {
                     prop.valueObj = JSON.parse(prop.valueObj || '{}');
                 } else if (prop.derivedDataType == DerivedPropertyType.LIST && typeof prop.valueObj != 'object') {
                     prop.valueObj = JSON.parse(prop.valueObj || '[]');
-                }
-                if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && Object.keys(prop.valueObj).length) {
+                } else if (prop.derivedDataType == DerivedPropertyType.MAP && typeof prop.valueObj != 'object' && (!prop.isChildOfListOrMap || !prop.schema.property.isSimpleType)) { //dont parse values for children of map of simple
+                    prop.valueObj = JSON.parse(prop.valueObj || '{}');
+                } 
+                if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj == 'object' && Object.keys(prop.valueObj).length) {
                     let newProps: Array<DerivedFEProperty> = [];
                     Object.keys(prop.valueObj).forEach((key) => {
                         newProps.push(...this.createListOrMapChildren(prop, key, prop.valueObj[key]));//create new children, assign their values, and then add to array
                     });
-                    derivedPropArray.splice(index + 1, 0, ...newProps);
+                    propsToPushMap[index + 1] = newProps;
                 }
             }
         });
+
+        //add props after we're done looping (otherwise our loop gets messed up). Push in reverse order, so we dont mess up indexes.
+        Object.keys(propsToPushMap).reverse().forEach((indexToInsert) => {
+            derivedPropArray.splice(+indexToInsert, 0, ...propsToPushMap[indexToInsert]); //slacker parsing
+        });
     }
 
     public resetPropertyValue = (property: PropertyFEModel, newValue: string, nestedPath?: string): void => {
diff --git a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
index aebbdbf7af..7a859097a9 100644
--- a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
+++ b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
@@ -8,6 +8,8 @@ import {ReflectiveInjector} from '@angular/core';
 import {Cookie2Service} from "./cookie.service";
 import {UUID} from "angular2-uuid";
 import {Dictionary} from "../../utils/dictionary/dictionary";
+import {SEVERITY} from "../../utils/constants";
+import {IServerMessageModalModel} from "../../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
 
 export class HttpInterceptor implements Interceptor {
 
@@ -27,17 +29,22 @@ export class HttpInterceptor implements Interceptor {
          */
 
         request.options.headers.append(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId());
-            var uuidValue = this.getUuidValue(request.url);
-            if(uuidValue!= ''){
-                request.options.headers.set('X-ECOMP-ServiceID',uuidValue);
-            }
-            request.options.headers.set('X-ECOMP-RequestID', UUID.UUID());
+        request.options.withCredentials = true;
+        var uuidValue = this.getUuidValue(request.url);
+        if (uuidValue != '') {
+            request.options.headers.set('X-ECOMP-ServiceID', uuidValue);
+        }
+        request.options.headers.set('X-ECOMP-RequestID', UUID.UUID());
         return request;
 
     }
 
-    public interceptAfter(response: InterceptedResponse): InterceptedResponse {
-            
+    public interceptAfter(response:InterceptedResponse):InterceptedResponse {
+
+        if (response.response.status !== 200 && response.response.status !== 201) {
+            this.responseError(response.response.json());
+            //console.log("Error from BE:",response);
+        }
         return response;
 
     }
@@ -52,6 +59,88 @@ export class HttpInterceptor implements Interceptor {
             });
         }
         return '';
-    }
+    };
+
+    public formatMessageArrays = (message:string, variables:Array<string>)=> {
+        return message.replace(/\[%(\d+)\]/g, function (_, m) {
+            let tmp = [];
+            let list = variables[--m].split(";");
+            list.forEach(function (item) {
+                tmp.push("<li>" + item + "</li>");
+            });
+            return "<ul>" + tmp.join("") + "</ul>";
+        });
+    };
+
+    public responseError = (rejection:any)=> {
+
+        let text:string;
+        let variables;
+        let messageId:string = "";
+        let isKnownException = false;
+
+        if (rejection && rejection.serviceException) {
+            text = rejection.serviceException.text;
+            variables = rejection.serviceException.variables;
+            messageId = rejection.serviceException.messageId;
+            isKnownException = true;
+        } else if (rejection && rejection.requestError && rejection.requestError.serviceException) {
+            text = rejection.requestError.serviceException.text;
+            variables = rejection.requestError.serviceException.variables;
+            messageId = rejection.requestError.serviceException.messageId;
+            isKnownException = true;
+        } else if (rejection && rejection.requestError && rejection.requestError.policyException) {
+            text = rejection.requestError.policyException.text;
+            variables = rejection.requestError.policyException.variables;
+            messageId = rejection.requestError.policyException.messageId;
+            isKnownException = true;
+        } else if (rejection) {
+            text = 'Wrong error format from server';
+            console.error(text);
+            isKnownException = false;
+        }
+
+        let data:IServerMessageModalModel;
+        if (isKnownException) {
+            // Remove the "Error: " text at the begining
+            if (text.trim().indexOf("Error:") === 0) {
+                text = text.replace("Error:", "").trim();
+            }
+
+            //mshitrit DE199895 bug fix
+            let count:number = 0;
+            variables.forEach(function (item) {
+                variables[count] = item ? item.replace('<', '&lt').replace('>', '&gt') : '';
+                count++;
+            });
 
+            // Format the message in case has array to <ul><li>
+            text = this.formatMessageArrays(text, variables);
+
+            // Format the message %1 %2
+            text = text.format(variables);
+
+            // Need to inject the MessageService manually to prevent circular dependencies (because MessageService use $templateCache that use $http).
+            data = {
+                title: 'Error',
+                message: text,
+                messageId: messageId,
+                status: rejection.status,
+                severity: SEVERITY.ERROR
+            };
+        } else {
+            // Need to inject the MessageService manually to prevent circular dependencies (because MessageService use $templateCache that use $http).
+            data = {
+                title: 'Error',
+                message: rejection.status !== -1 ? rejection.statusText : "Error getting response from server",
+                messageId: messageId,
+                status: rejection.status,
+                severity: SEVERITY.ERROR
+            };
+        }
+        // let modalsHandler = this.$injector.get('ModalsHandler');
+
+      //  this.modalsHandler.openServerMessageModal(data);
+        console.error('ERROR data',data);
+    }
 }
diff --git a/catalog-ui/src/app/ng2/services/properties.service.ts b/catalog-ui/src/app/ng2/services/properties.service.ts
index a22e2aed20..3a02e503fa 100644
--- a/catalog-ui/src/app/ng2/services/properties.service.ts
+++ b/catalog-ui/src/app/ng2/services/properties.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { DataTypeModel, PropertyFEModel, PropertyBEModel, SchemaProperty, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models";
+import { DataTypeModel, PropertyFEModel, PropertyBEModel, SchemaProperty, PropertyDeclareAPIModel, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models";
 import { DataTypeService } from "./data-type.service";
 import { PROPERTY_TYPES } from "app/utils";
 import { ContentAfterLastDotPipe } from "../pipes/contentAfterLastDot.pipe";
@@ -48,14 +48,14 @@ export class PropertiesService {
     }
 
     public getCheckedProperties = (properties: Array<PropertyFEModel>): Array<PropertyBEModel> => {
-        let selectedProps: Array<PropertyBEModel> = [];
+        let selectedProps: Array<PropertyDeclareAPIModel> = [];
         properties.forEach(prop => {
             if (prop.isSelected && !prop.isDeclared && !prop.isDisabled) {
-                selectedProps.push(new PropertyBEModel(prop));
+                selectedProps.push(new PropertyDeclareAPIModel(prop));
             } else if (prop.flattenedChildren) {
                 prop.flattenedChildren.forEach((child) => {
                     if (child.isSelected && !child.isDeclared && !child.isDisabled) {
-                        let childProp = new PropertyBEModel(prop, child); //create it from the parent
+                        let childProp = new PropertyDeclareAPIModel(prop, child); //create it from the parent
                         selectedProps.push(childProp);
                     }
                 })