Merge "[SDC] code rebase for sdc resync to LF"

26 files changed, 198 insertions, 279 deletions

diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 57adb8fd66..88c2d876c4 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -32,14 +32,13 @@ import {
 } from "./utils/ng1-upgraded-provider";
 import {ConfigService} from "./services/config.service";
 import {HttpModule} from '@angular/http';
+import {HttpService} from './services/http.service';
 import {AuthenticationService} from './services/authentication.service';
 import {Cookie2Service} from "./services/cookie.service";
 import {ComponentServiceNg2} from "./services/component-services/component.service";
 import {ServiceServiceNg2} from "./services/component-services/service.service";
 import {ComponentInstanceServiceNg2} from "./services/component-instance-services/component-instance.service";
-import { InterceptorService } from 'ng2-interceptors';
 import { XHRBackend, RequestOptions } from '@angular/http';
-import {HttpInterceptor} from "./services/http.interceptor.service";
 import { SearchBarComponent } from './shared/search-bar/search-bar.component';
 import { SearchWithAutoCompleteComponent } from './shared/search-with-autocomplete/search-with-autocomplete.component';
 
@@ -49,16 +48,6 @@ export function configServiceFactory(config:ConfigService) {
     return () => config.loadValidationConfiguration();
 }
 
-export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: RequestOptions){
-    let service = new InterceptorService(xhrBackend, requestOptions);
-      service.addInterceptor(new HttpInterceptor());
-    return service;
-}
-
-
-// export function httpServiceFactory(backend: XHRBackend, options: RequestOptions) {
-//     return new HttpService(backend, options);
-// }
 
 @NgModule({
     declarations: [
@@ -87,6 +76,7 @@ export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: Reque
         ConfigService,
         ComponentServiceNg2,
         ServiceServiceNg2,
+        HttpService,
         ComponentInstanceServiceNg2,
         {
             provide: APP_INITIALIZER,
@@ -94,11 +84,6 @@ export function interceptorFactory(xhrBackend: XHRBackend, requestOptions: Reque
             deps: [ConfigService],
             multi: true
         },
-        {
-            provide: InterceptorService,
-            useFactory: interceptorFactory,
-            deps: [XHRBackend, RequestOptions]
-        }
      ],
     bootstrap: [AppComponent]
 })
diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
index 8b27ab7e3a..3339b605ca 100644
--- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
+++ b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts
@@ -35,7 +35,7 @@ export class UiElementIntegerInputComponent extends UiElementBase implements UiE
 
     onSave() {
         if (!this.control.invalid){
-            this.baseEmitter.emit(JSON.parse(this.value));
+            this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value);
         }
     }
 }
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 38de3ce649..2b58d0f086 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
@@ -1,5 +1,5 @@
 <div class="properties-table">
-    <loader [display]="isLoading" size="large" [relative]="false"></loader>
+    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
         <div class="table-cell col3">From Instance</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 30cdb89d8e..736655f3f7 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
@@ -57,7 +57,7 @@ export class InputsTableComponent {
 
     openDeleteModal = (input:InputFEModel) => {
         this.selectedInputToDelete = input;
-        this.modalService.openActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close");
+        this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open();
     }
 }
 
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html
index 0e13cee674..a62aa114d9 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.html
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.html
@@ -1,4 +1,5 @@
-<div *ngIf="display" data-tests-id="tlv-loader">
+<div *ngIf="isVisible"  data-tests-id="tlv-loader" [ngClass]="relative ? 'loader-relative' : 'loader-fixed'" 
+        [style.top]="offset.top" [style.left]="offset.left" [style.width]="offset.width"  [style.height]="offset.height">
     <div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div>
     <div class="tlv-loader {{size}}"></div>
 </div>
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less
index 054b6021a1..ddb9915176 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.less
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.less
@@ -16,6 +16,22 @@
     z-index: 10002;
 }
 
+.loader-relative {
+    display: block;
+    position:absolute;
+    width: 100%;
+    height:100%;
+}
+
+.loader-fixed {
+    display: block;
+    position:fixed;
+    top:0;
+    left:0;
+    width: 100%;
+    height:100%;
+}
+
 @keyframes fadein {
     from { opacity: 0; }
     to   { opacity: 0.8; }
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
index 92278d3ff5..f66aa551e2 100644
--- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
@@ -21,7 +21,7 @@
 /**
  * Created by rc2122 on 6/6/2017.
  */
-import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core";
+import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core";
 @Component({
     selector: 'loader',
     templateUrl: './loader.component.html',
@@ -29,13 +29,20 @@ import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/co
 })
 export class LoaderComponent {
 
-    @Input() display:boolean;
-    @Input() size:string;// small || medium || large
-    @Input() relative: boolean;
-    @Input() elementSelector: string; // optional. If is relative is set to true, option to pass in element that loader should be relative to. Otherwise, will be relative to parent element.
+    @Input() display: boolean;
+    @Input() size: string;// small || medium || large
+    @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page.
+    @Input() loaderDelay: number; //optional - number of ms to delay loader display.
     
+    private isVisible: boolean = false;
+    private offset : {
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+    };
 
-    constructor (private el: ElementRef, private renderer: Renderer){
+    constructor(private viewContainerRef: ViewContainerRef) { 
     }
 
     ngOnInit() {
@@ -49,46 +56,31 @@ export class LoaderComponent {
 
     ngOnChanges(changes: SimpleChanges) {
         if(changes.display){
-            if (this.display) {
-                this.changeLoaderDisplay(false); //display is set to true, so loader will appear unless we explicitly tell it not to.
-                window.setTimeout((): void => {
-                    this.display && this.changeLoaderDisplay(true); //only show loader if we still need to display it.
-                }, 500);
-            } else {
-                window.setTimeout(():void => {
-                    this.changeLoaderDisplay(false);
-                }, 0);
-            }
+            this.changeLoaderDisplay(this.display);
         }
     }
 
-    changeLoaderDisplay = (display: boolean): void => {
+    private changeLoaderDisplay = (display: boolean): void => {
         if (display) {
-            this.calculateLoaderPosition();
-            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'block');
+            window.setTimeout((): void => {
+                this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile.
+            }, this.loaderDelay || 0);
         } else {
-            this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none');
+            this.isVisible = false;
         }
     }
 
-    calculateLoaderPosition = () => {
-        if (this.relative === true) { // Can change the parent position to relative without causing style issues.
-            let parent = (this.elementSelector) ? angular.element(this.elementSelector).get(0) : this.el.nativeElement.parentElement;
-            this.renderer.setElementStyle(parent, 'position', 'relative');
-            this.setLoaderPosition(0, 0); //will be relative to parent and appear over specified element
-            //TODO: DONT force parent to have position relative; set inner div's style instead of outer element
-            // let parentPos: ClientRect = this.el.nativeElement.parentElement.getBoundingClientRect();
-            // this.setLoaderPosition(parentPos.top, parentPos.left, parentPos.width, parentPos.height);
-        } else {
-            this.setLoaderPosition(0, 0); //will appear over whole page
+    private showLoader = () => {
+        if (this.relative === true) {
+            let parentElement = this.viewContainerRef.element.nativeElement.parentElement;
+            this.offset = {
+                left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined,
+                top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined,
+                width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined,
+                height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined
+            };
         }
+        this.isVisible = true;
     }
 
-    setLoaderPosition = (top:number, left:number, width?:number, height?:number): void => {
-        this.renderer.setElementStyle(this.el.nativeElement, 'position', 'absolute');
-        this.renderer.setElementStyle(this.el.nativeElement, 'top', top? top.toString() : "0");
-        this.renderer.setElementStyle(this.el.nativeElement, 'left', left? left.toString() : "0");
-        this.renderer.setElementStyle(this.el.nativeElement, 'width', width? width.toString() : "100%");
-        this.renderer.setElementStyle(this.el.nativeElement, 'height', height? height.toString() : "100%");
-    };
 }
diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html
new file mode 100644
index 0000000000..433bd4fd6f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html
@@ -0,0 +1,5 @@
+<div class="error-message-component">
+    <div>Error code: {{input.messageId}}</div>
+    <div>Status code: {{input.status}}</div>
+    <div class="error-message">{{input.message}}</div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts
new file mode 100644
index 0000000000..c0d6673412
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ * Created by ngordon on 7/30/2017.
+ */
+import { Component, Input } from '@angular/core';
+import { ServerErrorResponse } from 'app/models';
+
+@Component({
+    selector: 'error-message',
+    templateUrl: './error-message.component.html'
+})
+
+export class ErrorMessageComponent {
+    @Input() input: ServerErrorResponse;
+
+    constructor() {
+    }
+
+}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
index cc411bc751..d843867cdb 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.html
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -1,10 +1,14 @@
 <div class="custom-modal {{input.size}}">
     <div class="ng2-modal-content">
-        <div class="ng2-modal-header">
+        <div class="ng2-modal-header modal-type-{{input.type}}">
             <span class="title">{{ input.title }}</span>
             <span class="close-button" (click)="close()"></span>
         </div>
-        <div class="ng2-modal-body" >{{input.content}}</div>
+        <div class="ng2-modal-body" >
+            <div *ngIf="input.content">{{input.content}}</div>
+            <div #dynamicContentContainer></div>
+        </div>
+        
         <div class="ng2-modal-footer">
             <button *ngFor="let button of input.buttons"
                     class="tlv-btn {{button.cssClass}}"
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less
index a35f829e6a..c87162afb0 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.less
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.less
@@ -37,12 +37,25 @@
                 display: -ms-flexbox;
                 display: flex;
                 text-align: left;
-                border-bottom: solid 1px @main_color_o;
                 -webkit-box-align: center;
                 -ms-flex-align: center;
                 align-items: center;
                 margin: 0px 20px;
+
+                &.modal-type-standard {
+                    border-bottom: solid 3px @main_color_a;
+                }
+
+                &.modal-type-error {
+                    border-bottom: solid 3px @func_color_q;
+                }
+
+                &.modal-type-alert{
+                    border-bottom: solid 3px @main_color_h;
+                }
+
                 .title{
+                    .s_18_m;
                     -webkit-box-flex: 999;
                     -ms-flex-positive: 999;
                     flex-grow: 999;
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
index 09fb9abdd1..89db8d1140 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -22,7 +22,7 @@
  * Created by rc2122 on 6/1/2017.
  */
 import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
-//import {ViewContainerRef, ViewChild} from '@angular/core';
+import {ViewContainerRef, ViewChild} from '@angular/core';
 import * as $ from 'jquery';
 import { ButtonsModelMap, ModalModel } from 'app/models';
 
@@ -34,9 +34,9 @@ import { ButtonsModelMap, ModalModel } from 'app/models';
 
 export class ModalComponent implements OnInit, OnDestroy {
     @Input() input: ModalModel;
+    @Input() dynamicContent: any;
+    @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example.
     private modalElement: JQuery;
-    //@ViewChild('modalBody', { read: ViewContainerRef }) modalContainer: ViewContainerRef; //TODO: allow for custom component as body instead of simple message
-    
 
     constructor( el: ElementRef ) {
         this.modalElement = $(el.nativeElement);
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
index d77be2cd23..892f6993dd 100644
--- a/catalog-ui/src/app/ng2/components/modal/modal.module.ts
+++ b/catalog-ui/src/app/ng2/components/modal/modal.module.ts
@@ -1,16 +1,19 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from '@angular/common';
 import { ModalService } from 'app/ng2/services/modal.service';
-import { ModalComponent } from "app/ng2/components/modal/modal.component"
+import { ModalComponent } from "app/ng2/components/modal/modal.component";
+import { ErrorMessageComponent } from "./error-message/error-message.component";
 
 @NgModule({
     declarations: [
         ModalComponent,
+        ErrorMessageComponent
     ],
     imports: [CommonModule],
     exports: [],
-    entryComponents: [
-        ModalComponent
+    entryComponents: [ //need to add anything that will be dynamically created
+        ModalComponent,
+        ErrorMessageComponent
     ],
     providers: [ModalService]
 })
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 c57998af5e..a9dc499e7d 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
@@ -1,5 +1,5 @@
 <div class="properties-table">
-    <loader [display]="isLoading" size="large" [relative]="false"></loader>
+    <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
     <div class="table-header">
         <div class="table-cell col1">Property Name</div>
         <div class="table-cell col2">Type</div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
index 3a5daba711..1c6f51314d 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts
@@ -45,7 +45,6 @@ import { KeysPipe } from 'app/ng2/pipes/keys.pipe';
 import {TooltipModule} from "../../components/tooltip/tooltip.module";
 import { ComponentModeService } from "app/ng2/services/component-mode.service"
 import {LoaderComponent} from "app/ng2/components/loader/loader.component"
-import {HttpInterceptor} from "../../services/http.interceptor.service";
 
 @NgModule({
     declarations: [
@@ -81,7 +80,7 @@ import {HttpInterceptor} from "../../services/http.interceptor.service";
         // PopoverContentComponent,
         // PopoverComponent
     ],
-    providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService,HttpInterceptor, ContentAfterLastDotPipe, GroupByPipe, KeysPipe, ComponentModeService]
+    providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService, ContentAfterLastDotPipe, GroupByPipe, KeysPipe, ComponentModeService]
 })
 export class PropertiesAssignmentModule {
 
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 0b50357a5c..be7e03dccd 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
@@ -43,7 +43,7 @@
             <tabs #hierarchyNavTabs tabStyle="simple-tabs">
                 <tab tabTitle="Composition">
                     <div class="hierarchy-nav-container">
-                        <loader [display]="loadingInstances" size="medium" [relative]="true"></loader>
+                        <loader [display]="loadingInstances" [size]="'medium'" [relative]="true" [loaderDelay]="500"></loader>
                         <div class="hierarchy-header white-sub-header">
                             <span tooltip="{{component.name}}">{{component.name}}</span>
                         </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 8151d001e8..03974bf723 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
@@ -1,5 +1,5 @@
 @import '../../../../assets/styles/variables';
-//@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import '../../../../assets/styles/mixins';
 @ng2-shadow-gray: #f8f8f8;
 @ng2-light-gray: #eaeaea;
 @ng2-medium-gray: #d2d2d2;
@@ -36,7 +36,7 @@
         /deep/ .tab {
             padding: 12px;
             flex: 1;
-            font-weight:bold;
+            font-family: @font-opensans-regular;
 
             &.active {
                 color:#009fdb;
@@ -44,6 +44,7 @@
                 border-top: solid 4px #009fdb;
                 background-color: white;
                 padding-top:9px;
+                font-family: @font-opensans-medium;
             }
 
             .tab-indication {
@@ -129,8 +130,12 @@
             flex: none;
             padding: 8px 20px 0;
             font-size: 14px;
-            font-weight:bold;
             line-height:30px;
+            font-family: @font-opensans-regular;
+
+            &.active {
+                font-family: @font-opensans-medium;
+            }
         }
     }
 
@@ -146,8 +151,6 @@
         background-color:  #fffefe;
         box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
         border-bottom: #d2d2d2 solid 1px;
-        color:#009fdb;
-        font-weight:bold;
         font-size:14px;
         text-align:left;
         flex:0 0 auto;
@@ -155,6 +158,8 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
+        .a_13_r;
+        text-transform: uppercase;
 
         &.hierarchy-header {
             padding-left:20px;
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 6782b72fa2..82754f13f0 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
@@ -105,7 +105,7 @@ export class PropertiesAssignmentComponent {
                 });
                 this.loadingInputs = false;
 
-            });
+            }, error => {}); //ignore error
         this.componentServiceNg2
             .getComponentResourceInstances(this.component)
             .subscribe(response => {
@@ -120,7 +120,7 @@ export class PropertiesAssignmentComponent {
                     this.loadingProperties = false;
                 }
                 this.selectFirstInstanceByDefault();
-            });
+            }, error => {}); //ignore error
 
     };
 
@@ -159,7 +159,7 @@ export class PropertiesAssignmentComponent {
                     this.processInstancePropertiesResponse(instanceBePropertiesMap, true);
                     this.loadingProperties = false;
 
-                });
+                }, error => {}); //ignore error
         } else {
             this.componentInstanceServiceNg2
                 .getComponentInstanceProperties(this.component, resourceInstance.uniqueId)
@@ -167,7 +167,7 @@ export class PropertiesAssignmentComponent {
                     instanceBePropertiesMap[resourceInstance.uniqueId] = response;
                     this.processInstancePropertiesResponse(instanceBePropertiesMap, false);
                     this.loadingProperties = false;
-                });
+                }, error => {}); //ignore error
         }
 
         if(resourceInstance.componentName === "vnfConfiguration") {
@@ -203,16 +203,16 @@ export class PropertiesAssignmentComponent {
             this.componentInstanceServiceNg2
                 .updateInstanceInput(this.component, this.selectedInstanceData.uniqueId, inputToUpdate)
                 .subscribe(response => {
-                    console.log("update resource instance input and got this response: ", response);
-                })
+                    console.log("Update resource instance input response: ", response);
+                }, error => {}); //ignore error
         }
         else {
             let propertyBe = new PropertyBEModel(event);
             this.componentInstanceServiceNg2
                 .updateInstanceProperty(this.component, this.selectedInstanceData.uniqueId, propertyBe)
                 .subscribe(response => {
-                    console.log("updated resource instance property and got this response: ", response);
-                });
+                    console.log("Update resource instance property response: ", response);
+                }, error => {}); //ignore error
             console.log(event);
         }
 
@@ -226,7 +226,7 @@ export class PropertiesAssignmentComponent {
             .updateComponentInput(this.component, inputToUpdate)
             .subscribe(response => {
                 console.log("updated the component input and got this response: ", response);
-            })
+            }, error => {}); //ignore error
     };
 
 
@@ -322,7 +322,7 @@ export class PropertiesAssignmentComponent {
                     this.inputs.push(newInput);
                     this.updatePropertyValueAfterDeclare(newInput);
                 });
-            });
+            }, error => {}); //ignore error
     };
 
 
@@ -373,7 +373,7 @@ export class PropertiesAssignmentComponent {
                 //         this.propertiesService.undoDisableRelatedProperties(propToEnable, response.inputPath);
                 //     }
                 // }
-            });
+            }, error => {}); //ignore error
     };
 
 
@@ -391,7 +391,7 @@ export class PropertiesAssignmentComponent {
                 this.renderer.invokeElementMethod(this.hierarchyNavTabs, 'triggerTabChange', ['Composition']);
                 this.propertiesNavigationData = [];
                 this.displayClearSearch = true;
-            });
+            }, error => {}); //ignore error
 
     };
 
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 a04d23a16a..d8d991d218 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
@@ -44,9 +44,7 @@ export class PropertiesUtils {
             let propertyFeArray: Array<PropertyFEModel> = [];
             _.forEach(properties, (property: PropertyBEModel) => {
 
-                if (!this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list
-                    console.log("ERROR: missing type " + property.type + " in dataTypes , of property ", property);
-                } else {
+                if (this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list
 
                     let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE
 
diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
index 0c499facff..27de59de82 100644
--- a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts
@@ -25,14 +25,14 @@ import {sdc2Config} from "../../../../main";
 import {PropertyBEModel} from "app/models";
 import {CommonUtils} from "app/utils";
 import {Component, ComponentInstance, InputModel} from "app/models";
-import {InterceptorService} from "ng2-interceptors/index";
+import { HttpService } from '../http.service';
 
 @Injectable()
 export class ComponentInstanceServiceNg2 {
 
     protected baseUrl;
 
-    constructor(private http: InterceptorService) {
+    constructor(private http: HttpService) {
         this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
     }
 
diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
index cd593d5e3e..c648711d5d 100644
--- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts
@@ -30,8 +30,8 @@ import {ComponentGenericResponse} from "../responses/component-generic-response"
 import {sdc2Config} from "../../../../main";
 import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map";
 import {API_QUERY_PARAMS} from "app/utils";
-import {ComponentType, ServerTypeUrl} from "../../../utils/constants";
-import {InterceptorService} from "ng2-interceptors/index";
+import { ComponentType, ServerTypeUrl } from "../../../utils/constants";
+import { HttpService } from '../http.service';
 
 declare var angular:angular.IAngularStatic;
 
@@ -40,7 +40,7 @@ export class ComponentServiceNg2 {
 
     protected baseUrl;
 
-    constructor(private http:InterceptorService) {
+    constructor(private http:HttpService) {
         this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
     }
 
@@ -54,7 +54,7 @@ export class ComponentServiceNg2 {
         return this.http.get(this.baseUrl + this.getServerTypeUrl(componentType) + componentId + '/filteredDataByParams', {search: params})
             .map((res:Response) => {
                 return new ComponentGenericResponse().deserialize(res.json());
-            }).do(error => console.log('server data:', error));
+            });
     }
 
     private getServerTypeUrl = (componentType:string):string => {
diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
index 1f5de18c04..ec912bbcf5 100644
--- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts
+++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts
@@ -26,7 +26,7 @@ import { Response } from '@angular/http';
 import {Service} from "app/models";
 import { downgradeInjectable } from '@angular/upgrade/static';
 import {sdc2Config} from "../../../../main";
-import {InterceptorService} from "ng2-interceptors/index";
+import { HttpService } from '../http.service';
 
 
 @Injectable()
@@ -34,7 +34,7 @@ export class ServiceServiceNg2 {
 
     protected baseUrl = "";
 
-    constructor(private http: InterceptorService) {
+    constructor(private http: HttpService) {
         this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root;
     }
 
diff --git a/catalog-ui/src/app/ng2/services/data-type.service.ts b/catalog-ui/src/app/ng2/services/data-type.service.ts
index 48d32b7e69..30c02a4141 100644
--- a/catalog-ui/src/app/ng2/services/data-type.service.ts
+++ b/catalog-ui/src/app/ng2/services/data-type.service.ts
@@ -38,12 +38,14 @@ export class DataTypeService {
     }
 
     public getDataTypeByTypeName(typeName: string): DataTypeModel {
+        if (!this.dataTypes[typeName]) console.log("MISSING Datatype: " + typeName);
         return this.dataTypes[typeName];
     }
 
 
     public getDerivedDataTypeProperties(dataTypeObj: DataTypeModel, propertiesArray: Array<DerivedFEProperty>, parentName: string) {
         //push all child properties to array
+        if (!dataTypeObj) return;
         if (dataTypeObj.properties) {
             dataTypeObj.properties.forEach((derivedProperty) => {
                 if(dataTypeObj.name !== PROPERTY_DATA.OPENECOMP_ROOT || derivedProperty.name !== PROPERTY_DATA.SUPPLEMENTAL_DATA){//The requirement is to not display the property supplemental_data
diff --git a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts b/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
deleted file mode 100644
index c90bfd2848..0000000000
--- a/catalog-ui/src/app/ng2/services/http.interceptor.service.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/toPromise';
-import 'rxjs/Rx';
-import {sdc2Config} from './../../../main';
-import {Interceptor, InterceptedRequest, InterceptedResponse} from 'ng2-interceptors';
-import {SharingService} from "../../services/sharing-service";
-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 {
-
-    private cookieService:Cookie2Service;
-    private sharingService:SharingService;
-
-    constructor() {
-        let injector = ReflectiveInjector.resolveAndCreate([Cookie2Service, SharingService]);
-        this.cookieService = injector.get(Cookie2Service);
-        this.sharingService = injector.get(SharingService);
-    }
-
-    public interceptBefore(request:InterceptedRequest):InterceptedRequest {
-        /**
-         * For every request to the server, that the service id, or resource id is sent in the URL, need to pass UUID in the header.
-         * Check if the unique id exists in uuidMap, and if so get the UUID and add it to the header.
-         */
-        request.options.headers.append(this.cookieService.getUserIdSuffix(), this.cookieService.getUserId());
-        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 {
-
-        if (response.response.status !== 200 && response.response.status !== 201) {
-            this.responseError(response.response.json());
-            //console.log("Error from BE:",response);
-        }
-        return response;
-    }
-
-    private getUuidValue = (url:string):string => {
-        let map:Dictionary<string, string> = this.sharingService.getUuidMap();
-        if (map && url.indexOf(sdc2Config.api.root) > 0) {
-            map.forEach((key:string) => {
-                if (url.indexOf(key) !== -1) {
-                    return this.sharingService.getUuidValue(key);
-                }
-            });
-        }
-        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
-            };
-        }
-
-        console.error('ERROR data',data);
-    }
-}
diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts
index 5cd5a10000..21fe09023a 100644
--- a/catalog-ui/src/app/ng2/services/http.service.ts
+++ b/catalog-ui/src/app/ng2/services/http.service.ts
@@ -24,14 +24,18 @@ import {Observable} from 'rxjs/Observable';
 import {UUID} from 'angular2-uuid';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
+import 'rxjs/add/observable/throw';
 import {Dictionary} from "../../utils/dictionary/dictionary";
 import {SharingService, CookieService} from "app/services";
 import {sdc2Config} from './../../../main';
+import { ModalService } from "app/ng2/services/modal.service";
+import { ServerErrorResponse } from "app/models";
+import { ErrorMessageComponent } from 'app/ng2/components/modal/error-message/error-message.component';
 
 @Injectable()
 export class HttpService extends Http {
 
-    constructor(backend:XHRBackend, options:RequestOptions, private sharingService:SharingService, private cookieService: CookieService) {
+    constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService) {
         super(backend, options);
         this._defaultOptions.withCredentials = true;
         this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId());
@@ -64,7 +68,7 @@ export class HttpService extends Http {
             }
             request.headers.set('X-ECOMP-RequestID', UUID.UUID());
         }
-        return super.request(request, options).catch(this.catchAuthError(this));
+        return super.request(request, options).catch((err) => this.catchError(err));
     }
 
     private getUuidValue = (url: string) :string => {
@@ -79,15 +83,14 @@ export class HttpService extends Http {
         return '';
     }
 
-    private catchAuthError(self:HttpService) {
-        // we have to pass HttpService's own instance here as `self`
-        return (res:Response) => {
-            console.log(res);
-            if (res.status === 401 || res.status === 403) {
-                // if not authenticated
-                console.log(res);
-            }
-            return Observable.throw(res);
-        };
-    }
+    private catchError = (response: Response): Observable<any> => {
+        
+        let modalInstance = this.modalService.createErrorModal("OK");
+        let errorResponse: ServerErrorResponse = new ServerErrorResponse(response);
+        this.modalService.addDynamicContentToModal(modalInstance, ErrorMessageComponent, errorResponse);
+        modalInstance.instance.open();
+        
+        return Observable.throw(response);
+    };
+
 }
diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
index 32192f40c2..65ff870769 100644
--- a/catalog-ui/src/app/ng2/services/modal.service.ts
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -11,10 +11,10 @@ export class ModalService {
     constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef) { }
 
     
-    /* Shortcut method to open a simple modal with title, message, and close button that simply closes the modal. */
+    /* Shortcut method to open an alert modal with title, message, and close button that simply closes the modal. */
     public openAlertModal(title: string, message: string, closeButtonText?:string) {
         let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
-        let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton]);
+        let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton], 'alert');
         this.createCustomModal(modalModel).instance.open();
     }
 
@@ -22,19 +22,28 @@ export class ModalService {
     /**
      * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
      * NOTE: To close the modal from within the callback, use modalService.closeCurrentModal() //if you run into zone issues with callbacks see:https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components
+     * NOTE: To add dynamic content to the modal, use modalService.addDynamicContentToModal(). First param is the return value of this function -- componentRef<ModalComponent>.
      * @param title Heading for modal
      * @param message Message for modal
      * @param actionButtonText Blue call to action button
      * @param actionButtonCallback function to invoke when button is clicked
      * @param cancelButtonText text for close/cancel button
      */    
-    public openActionModal = (title:string, message:string, actionButtonText:string, actionButtonCallback:Function, cancelButtonText:string) => {
+    public createActionModal = (title: string, message: string, actionButtonText: string, actionButtonCallback: Function, cancelButtonText: string): ComponentRef<ModalComponent> => {
         let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
         let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
         let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
-        this.createCustomModal(modalModel).instance.open();
+        let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel);
+        return modalInstance;
+    }
+
+
+    public createErrorModal = (closeButtonText?: string, errorMessage?: string):ComponentRef<ModalComponent> => {
+        let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
+        let modalModel: ModalModel = new ModalModel('sm', 'Error', errorMessage, [closeButton], 'error');
+        let modalInstance: ComponentRef<ModalComponent> = this.createCustomModal(modalModel);
+        return modalInstance;
     }
-    
 
     /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
     public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
@@ -53,6 +62,14 @@ export class ModalService {
     }
 
 
+    public addDynamicContentToModal = (modalInstance: ComponentRef<ModalComponent>, dynamicComponentType: Type<any>, dynamicComponentInput: any) => {
+
+        let dynamicContent = this.createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer);
+        dynamicContent.instance.input = dynamicComponentInput;
+        modalInstance.instance.dynamicContent = dynamicContent;
+        return modalInstance;
+    }
+
     //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root. 
     //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name));
     private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<any> {