New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

86 files changed, 2731 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/api.service.ts b/vid-webpack-master/src/app/shared/api.service.ts
new file mode 100644
index 000000000..a69d91ea4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/api.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ApiService {
+  title = 'Angular 2';
+}
diff --git a/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts b/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
new file mode 100644
index 000000000..fd58b6507
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector : 'custom-ellipsis',
+  template: `
+    <span 
+          class="ellipsis"
+          id="{{id}}"
+          tooltip="{{value}}">{{value}}</span>`,
+  styles : [
+    `
+      .ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        width: 99%;
+        text-align: left;
+      }
+    `
+  ]
+})
+export class EllipsisComponent {
+  @Input() value : string;
+  @Input() id : string;
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/error/error.component.service.ts b/vid-webpack-master/src/app/shared/components/error/error.component.service.ts
new file mode 100644
index 000000000..35b83f0b6
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/error/error.component.service.ts
@@ -0,0 +1,35 @@
+import {Injectable} from "@angular/core";
+import {Subject} from "rxjs/Subject";
+import { MessageBoxService } from '../messageBox/messageBox.service';
+import { MessageBoxData, ModalSize, ModalType } from '../messageBox/messageBox.data';
+
+@Injectable()
+export class ErrorService {
+  static showErrorWithMessage(error : ErrorMessage) : void {
+    setTimeout(()=>{
+        let messageBoxData : MessageBoxData = new MessageBoxData(
+          error.title,  // modal title
+          error.text,
+
+          ModalType.error,
+          ModalSize.medium,
+          [
+            {text:"Close", size:"large", closeModal:true}
+          ]);
+        MessageBoxService.openModal.next(messageBoxData);
+      }
+      ,500);
+  }
+}
+
+export class ErrorMessage {
+  title : string;
+  text : string;
+  errorNumber : number;
+
+  constructor( title : string, text : string,errorNumber : number){
+    this.title = title;
+    this.text = text;
+    this.errorNumber = errorNumber;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.html b/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.html
new file mode 100644
index 000000000..daa35e659
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.html
@@ -0,0 +1,4 @@
+<div  *ngIf="message">
+    <span class="icon-alert"></span>
+    <span class="message">{{message}}</span>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.scss b/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.scss
new file mode 100644
index 000000000..d174f511c
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.scss
@@ -0,0 +1,14 @@
+.icon-alert {
+  margin-top: 10px;
+  &:before {
+    content: "\e904";
+    font-size: 16px;
+    color: #cf2a2a;
+  }
+}
+
+.message {
+  font-size: 12px;
+  line-height: 14px;
+  color: #cf2a2a;
+}
diff --git a/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.ts b/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.ts
new file mode 100644
index 000000000..a20b26030
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formControlError/formControlError.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector : 'form-control-error',
+  templateUrl : 'formControlError.component.html',
+  styleUrls : ['formControlError.component.scss']
+})
+export class FormControlErrorComponent {
+  @Input() message = null;
+}
diff --git a/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.html b/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.html
new file mode 100644
index 000000000..4c794e686
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.html
@@ -0,0 +1,10 @@
+<div *ngIf="message" class="row row-padding">
+  <div class="col-md-2 icon-div"><span class="icon-alert"></span></div>
+  <div class="col-md-10 left-align parentbox">
+    <div class="childbox">
+      <span>{{message}}</span>
+    </div>
+  </div>
+</div>
+
+
diff --git a/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.scss b/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.scss
new file mode 100644
index 000000000..5271cad49
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.scss
@@ -0,0 +1,48 @@
+.icon-alert {
+  margin-top: 10px;
+  &:before {
+    content: "\e904";
+    font-size: 30px;
+    color: #ffffff;
+  }
+}
+
+.icon-div {
+  background: rgb(207,41,41);
+  text-align: center;
+  padding-top: 18px;
+  width: 77px;
+  height: 110px;
+  float: left;
+}
+
+
+.error-title {
+  color: #cf2a2a;
+}
+
+.row-padding {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.left-align {
+  text-align: left;
+}
+
+.parentbox {
+  padding-right: 0;
+}
+
+.parentbox:before {
+  content: ' ';
+  display: inline-block;
+  vertical-align: middle;
+  height: 100%;
+}
+
+.childbox {
+  color: #cf2a2a;
+  display: inline-block;
+  vertical-align: middle;
+}
diff --git a/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.ts b/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.ts
new file mode 100644
index 000000000..0c0516a4d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/formGeneralErrors/formGeneralErrors.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector : 'form-general-error',
+  templateUrl : 'formGeneralErrors.component.html',
+  styleUrls : ['formGeneralErrors.component.scss']
+})
+
+export class FormGeneralErrorsComponent {
+  @Input() message : string = null;
+}
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts
new file mode 100644
index 000000000..08e199cf5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.component.ts
@@ -0,0 +1,50 @@
+/************************************************************************************************
+ * @Component: Message box component
+ * In order to use component you need to do a number of things:
+ *  1) Inside your component constructor you need to add listener to the button trigger.
+ *  2) Inside the listener you should write your callback logic.
+ *
+ *  Example:
+ *   @Component({
+ *    selector : 'some-component'
+ *    ...
+ *   })
+ *
+ *   export class SomeComponent {
+ *      openModal() : void {
+ *        let messageBoxData : MessageBoxData = new MessageBoxData(
+ *            "title",  // modal title
+ *            "message", ModalType.alert, // modal type
+  *           [
+                {text:"Save", size:"'x-small'",  callback: this.someFunction.bind(this), closeModal:true},
+                {text:"Cancel", size:"'x-small'", closeModal:true}
+          ]);
+ *
+ *        MessageBoxService.openModal.next(messageBoxData); // open modal
+ *      }
+ *   }
+
+ ************************************************************************************************/
+
+
+import { Component } from '@angular/core';
+import { MessageBoxData} from './messageBox.data';
+import { MessageBoxService } from './messageBox.service';
+import { SdcUiComponents } from 'sdc-ui/lib/angular';
+
+@Component({
+  selector: 'message-box',
+  template: '<div id="message-box"></div>'
+})
+
+export class MessageBoxComponent {
+  modalService: SdcUiComponents.ModalService;
+
+  constructor(modalService: SdcUiComponents.ModalService, private _messageBoxService : MessageBoxService) {
+    this.modalService = modalService;
+    MessageBoxService.openModal.subscribe((messageBoxData: MessageBoxData) => {
+      modalService.openModal(this._messageBoxService.setConfig(messageBoxData))
+    });
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.data.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.data.ts
new file mode 100644
index 000000000..165140ba7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.data.ts
@@ -0,0 +1,51 @@
+import { Subject } from 'rxjs/Subject';
+
+export class  MessageBoxData {
+  title?: string;
+  message?: string;
+  size : ModalSize;
+  type: ModalType;
+  buttons: Array<IModalButtonComponent>;
+
+  constructor(title: string, message: string, type: ModalType, size : ModalSize, buttons: Array<IModalButtonComponent>) {
+    this.title = title;
+    this.message = message;
+    this.size = size;
+    this.type = type;
+    this.buttons = buttons;
+  }
+}
+
+export interface IModalConfig {
+  size?: string;
+  title?: string;
+  message?: string;
+  buttons?: Array<IModalButtonComponent>;
+  type?: string;
+}
+export interface IButtonComponent {
+  text: string;
+  disabled?: boolean;
+  type?: string;
+  size?: string;
+}
+export interface IModalButtonComponent extends IButtonComponent {
+  callback?: Function;
+  closeModal?: boolean;
+}
+export  enum ModalType {
+  alert = "alert",
+  error = "error",
+  standard = "info",
+  custom = "custom",
+}
+export enum ModalSize {
+  xlarge = "xl",
+  large = "l",
+  medium = "md",
+  small = "sm",
+  xsmall = "xsm",
+}
+
+
+
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.spec.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.spec.ts
new file mode 100644
index 000000000..89562ac54
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.spec.ts
@@ -0,0 +1,49 @@
+import { TestBed, getTestBed } from '@angular/core/testing';
+import {
+  HttpClientTestingModule,
+  HttpTestingController
+} from '@angular/common/http/testing';
+
+import { MessageBoxService } from './messageBox.service';
+import {MessageBoxData, ModalSize, ModalType } from './messageBox.data';
+
+describe('MessageBoxService', () => {
+  let injector;
+  let service: MessageBoxService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [MessageBoxService]
+    });
+
+    injector = getTestBed();
+    service = injector.get(MessageBoxService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  describe('#setConfig', () => {
+    it('should return <IModalConfig>', (done: DoneFn) => {
+      let title = "Delete Instantiation";
+      let message = "You are about to stop the instantiation process of this service. \nAll data will be lost. Are you sure you want to stop?";
+      let messageBoxData : MessageBoxData = new MessageBoxData(
+        title,
+        message,
+        ModalType.alert,
+        ModalSize.medium,
+        [
+          {text:"Stop Instantiation", size:"large", closeModal:true},
+          {text:"Cancel", size:"medium", closeModal:true}
+        ]);
+
+      let result = service.setConfig(messageBoxData);
+      expect(result.title).toEqual(title);
+      expect(result.message).toEqual(message);
+      expect(result.buttons.length).toEqual(2);
+      expect(result.type).toEqual(ModalType.alert);
+      expect(result.size).toEqual(ModalSize.medium);
+      done();
+    });
+  });
+});
diff --git a/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.ts b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.ts
new file mode 100644
index 000000000..eaa012d3b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/messageBox/messageBox.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+import { IModalConfig, MessageBoxData, ModalSize, ModalType } from './messageBox.data';
+
+@Injectable()
+export class MessageBoxService {
+  static openModal: Subject<MessageBoxData> = new Subject<MessageBoxData>();
+  setConfig(messageBoxData: MessageBoxData) : IModalConfig{
+    return {
+      size : ModalSize.medium,
+      title : messageBoxData.title,
+      type : messageBoxData.type,
+      message : messageBoxData.message,
+      buttons: messageBoxData.buttons
+    };
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/model-information/model-information.component.ts b/vid-webpack-master/src/app/shared/components/model-information/model-information.component.ts
new file mode 100644
index 000000000..fea4c44c7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/model-information/model-information.component.ts
@@ -0,0 +1,42 @@
+import {Component, Input} from '@angular/core';
+import * as _ from 'lodash';
+
+@Component({
+  selector: 'model-information',
+  templateUrl: 'model-information.html',
+  styleUrls: ['model-information.scss']
+})
+
+export class ModelInformationComponent {
+  private _modelInformationItems: Array<ModelInformationItem>;
+
+
+  get modelInformationItems(): Array<ModelInformationItem> {
+    return this._modelInformationItems;
+  }
+
+  @Input()
+  set modelInformationItems(_modelInformationItems: Array<ModelInformationItem>) {
+    if (_modelInformationItems) {
+      this._modelInformationItems = _modelInformationItems.filter(x => x.mandatory || (!_.isEmpty(x.values) && !_.isEmpty(x.values[0])));
+    }
+  }
+}
+
+
+export class ModelInformationItem {
+  label: string;
+  testsId: string;
+  values: Array<string>;
+  toolTipText: string;
+  mandatory: boolean;
+
+  constructor(label: string, testsId: string, values: Array<any>, toolTipText: string = "", mandatory: boolean = false,nested:boolean=false) {
+    this.label = label;
+    this.testsId = testsId;
+    this.values = values;
+    this.toolTipText = toolTipText;
+    this.mandatory = mandatory;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/model-information/model-information.html b/vid-webpack-master/src/app/shared/components/model-information/model-information.html
new file mode 100644
index 000000000..456dfdee4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/model-information/model-information.html
@@ -0,0 +1,12 @@
+<div id="model-information">
+  <div *ngFor="let item of modelInformationItems" class="item" attr.data-tests-id="model-item-{{item.label}}">
+    <tooltip-content #a>
+      <span> {{item.toolTipText}}</span>
+    </tooltip-content>
+
+    <div class="wrapper" [tooltip]="a" [tooltipDisabled]="!item.toolTipText" tooltipPlacement="top" [tooltipAnimation]="false">
+      <label attr.data-tests-id="model-item-label-{{item.testsId}}">{{item.label}}</label>
+      <div *ngFor="let value of item.values" attr.data-tests-id="model-item-value-{{item.testsId}}">{{value}}</div>
+    </div>
+  </div>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/model-information/model-information.scss b/vid-webpack-master/src/app/shared/components/model-information/model-information.scss
new file mode 100644
index 000000000..cd42136ed
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/model-information/model-information.scss
@@ -0,0 +1,34 @@
+#model-information {
+  overflow: auto;
+
+}
+
+tooltip-content span {
+  font-family: OpenSans-Regular;
+  font-size: 12px;
+  color: #FFFFFF;
+  letter-spacing: 0;
+  line-height: 16px;
+}
+
+.item {
+  display: block;
+
+  .wrapper {
+
+    display: inline-block;
+    margin-bottom: 25px;
+
+    label {
+      font-family: OpenSans-Semibold;
+      font-size: 12px;
+    }
+
+    div {
+      font-family: OpenSans-Regular;
+      font-size: 14px;
+    }
+  }
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.html b/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.html
new file mode 100644
index 000000000..bbe7bc78c
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.html
@@ -0,0 +1,5 @@
+<div class="width-100">
+  <div class="text-title" [ngClass]="titleClass">{{title}}</div>
+  <div class="text-subtitle" [ngClass]="subtitleClass">{{subtitle}}</div>
+  <img  id="not-node-img-id" src="{{iconPath}}" alt="" class="no-content-icon" [ngClass]="iconClass" data-tests-id="no-content-icon">
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.scss b/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.scss
new file mode 100644
index 000000000..1320ef731
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.scss
@@ -0,0 +1,26 @@
+.width-100 {
+  width: 100%;
+  margin-top: 126px;
+
+}
+
+.text-title {
+  font-family: OpenSans-Semibold;
+  font-size: 16px;
+  color: #4A4A4A;
+  text-align: center;
+}
+
+.text-subtitle {
+  font-family: OpenSans-Regular;
+  font-size: 16px;
+  color: #959595;
+  text-align: center;
+  margin-top: 7px;
+}
+
+.no-content-icon {
+  display: block;
+  vertical-align: middle;
+  margin: 30px auto;
+}
diff --git a/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.ts b/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.ts
new file mode 100644
index 000000000..7f4e98294
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/no-content-message-and-icon/no-content-message-and-icon.component.ts
@@ -0,0 +1,23 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'no-content-message-and-icon',
+  templateUrl: './no-content-message-and-icon.component.html',
+  styleUrls: ['./no-content-message-and-icon.component.scss']
+})
+
+
+export class NoContentMessageAndIconComponent {
+  constructor() {}
+
+  @Input() title: string;
+  @Input() subtitle: string;
+  @Input() iconPath: string;
+
+  @Input() titleClass: string="";
+  @Input() subtitleClass: string="";
+  @Input() iconClass: string="";
+
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/components/popover/popover.component.html b/vid-webpack-master/src/app/shared/components/popover/popover.component.html
new file mode 100644
index 000000000..c5515596c
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/popover/popover.component.html
@@ -0,0 +1,8 @@
+<div
+  triggers="mouseenter:mouseleave"
+  popover="{{value}}"
+  [hidden]="value == null"
+  container="body">
+  <ng-content ></ng-content>
+</div>
+
diff --git a/vid-webpack-master/src/app/shared/components/popover/popover.component.scss b/vid-webpack-master/src/app/shared/components/popover/popover.component.scss
new file mode 100644
index 000000000..ca2800a27
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/popover/popover.component.scss
@@ -0,0 +1,4 @@
+.popover.popover-top.top {
+  color : green !important;
+  font-size: 10px;
+}
diff --git a/vid-webpack-master/src/app/shared/components/popover/popover.component.ts b/vid-webpack-master/src/app/shared/components/popover/popover.component.ts
new file mode 100644
index 000000000..d6a4c3ae1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/popover/popover.component.ts
@@ -0,0 +1,17 @@
+import {Component, Input} from "@angular/core";
+
+@Component({
+  selector: 'custom-popover',
+  templateUrl: 'popover.component.html',
+  styles: [`
+        :host >>> .popover {
+          font-size: 13px;
+          text-align: left;
+          z-index: 10000;
+        }
+    `]
+})
+
+export class PopoverComponent {
+  @Input() value: String;
+}
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
new file mode 100644
index 000000000..cb11feea8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
@@ -0,0 +1,2 @@
+<div *ngIf="show"
+     class="spinner"></div>
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss
new file mode 100644
index 000000000..d31dfed80
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss
@@ -0,0 +1,87 @@
+.spinner {
+  height: 150px;
+  width: 150px;
+  margin: 0 auto;
+  -webkit-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border: 6px solid rgba(0, 174, 239, 0.01);
+  border-radius: 100%;
+  position: absolute;
+  z-index: 1000;
+  left: 50%;
+  right: 50%;
+  top: 50%;
+  bottom: 50%;
+}
+
+
+
+.spinner:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -6px;
+  height: 100%;
+  width: 100%;
+  border-top: 6px solid #009fdb;
+  border-left: 6px solid transparent;
+  border-bottom: 6px solid #c3161600;
+  border-right: 6px solid transparent;
+  border-radius: 100%;
+}
+
+@-webkit-keyframes rotation {
+  from {-webkit-transform: rotate(0deg);}
+  to {-webkit-transform: rotate(359deg);}
+}
+@-moz-keyframes rotation {
+  from {-moz-transform: rotate(0deg);}
+  to {-moz-transform: rotate(359deg);}
+}
+@-o-keyframes rotation {
+  from {-o-transform: rotate(0deg);}
+  to {-o-transform: rotate(359deg);}
+}
+@keyframes rotation {
+  from {transform: rotate(0deg);}
+  to {transform: rotate(359deg);}
+}
+
+.spinner-sm {
+  height:16px;
+  width:16px;
+}
+
+.spinner-md {
+  height:40px;
+  width:40px;
+}
+
+.spinner-lr {
+  height:150px;
+  width:150px;
+}
+
+.spinner-red {
+  border:6px solid rgba(216, 27, 34, .15);
+}
+
+.spinner-red:before {
+  border-top:6px solid rgba(216, 27, 34, 1);
+}
+
+.spinner-green {
+  border:6px solid rgba(40, 183, 121, .15);
+}
+
+.spinner-green:before {
+  border-top:6px solid rgba(40, 183, 121, 1);
+}
+
+.spinner-grey {
+  border:6px solid rgba(139, 146, 154, .15);
+}
+
+.spinner-grey:before {
+  border-top:6px solid rgba(139, 146, 154, 1);
+}
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
new file mode 100644
index 000000000..531ee8c62
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
@@ -0,0 +1,42 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { SpinnerComponent } from './spinner.component';
+
+describe('Spinner component', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [],
+      declarations: [SpinnerComponent ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('component should be defined', () => {
+    expect(component).toBeDefined();
+  });
+
+
+  it('component constructor should subscribe of showSpinner event with true', ()=> {
+    SpinnerComponent.showSpinner.next(true);
+    expect(component.show).toBeTruthy();
+  });
+
+  it('component constructor should subscribe of showSpinner event with false', ()=> {
+    SpinnerComponent.showSpinner.next(false);
+    expect(component.show).toBeFalsy();
+  });
+
+
+
+
+});
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
new file mode 100644
index 000000000..0ce5d2074
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Component({
+  selector : 'spinner-component',
+  templateUrl : './spinner.component.html',
+  styleUrls : ['./spinner.component.scss']
+})
+export class SpinnerComponent {
+  show : boolean = false;
+  static showSpinner: Subject<boolean> = new Subject<boolean>();
+
+  constructor(){
+    SpinnerComponent.showSpinner.subscribe((status) => {
+      this.show = status;
+    })
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator.spec.ts b/vid-webpack-master/src/app/shared/components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator.spec.ts
new file mode 100644
index 000000000..ec9f3f73e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator.spec.ts
@@ -0,0 +1,39 @@
+import { ReflectiveInjector } from '@angular/core';
+import { NumbersLettersUnderscoreValidator } from './numbersLettersUnderscore.validator';
+
+describe('Numbers letters underscore validator', () => {
+  let injector;
+  let service: NumbersLettersUnderscoreValidator;
+
+  beforeEach(() => {
+
+    let injector = ReflectiveInjector.resolveAndCreate([
+      NumbersLettersUnderscoreValidator
+    ]);
+
+    service = injector.get(NumbersLettersUnderscoreValidator);
+  });
+
+
+  describe('#valid', () => {
+    it("'legal' should return null", ()=> {
+      let legalVal: string = "legal";
+      let result = NumbersLettersUnderscoreValidator.valid(legalVal);
+      expect(result).toBeNull();
+    });
+
+    it("'illegal' should return object with invalidNumberLettersUnderscore true", ()=> {
+      let illegalVal: string = "illegal-Val";
+      let result = NumbersLettersUnderscoreValidator.valid(illegalVal);
+      expect(result.invalidNumberLettersUnderscore).toBeTruthy();
+    });
+
+    it("'null' should return null", ()=> {
+      let nullVal: string = null
+      let result = NumbersLettersUnderscoreValidator.valid(nullVal);
+      expect(result).toBeNull();
+    });
+
+
+  });
+});
diff --git a/vid-webpack-master/src/app/shared/components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator.ts b/vid-webpack-master/src/app/shared/components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator.ts
new file mode 100644
index 000000000..418bdfc4d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { isNullOrUndefined, isString } from 'util';
+
+@Injectable()
+export class NumbersLettersUnderscoreValidator {
+  static valid(control: any) {
+    let reg =  /^[a-zA-Z0-9_]*$/;
+
+    if(isNullOrUndefined(control)) return null;
+    let val = isString(control) ? control : control.value;
+    if (val === null) {
+      return {'invalidNumberLettersUnderscore': true};
+    }
+    if (reg.test(val)) {
+      return null;
+    } else {
+      return {'invalidNumberLettersUnderscore': true};
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
new file mode 100644
index 000000000..846ff70f2
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
@@ -0,0 +1,66 @@
+import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {Component, DebugElement} from "@angular/core";
+import {By} from "@angular/platform-browser";
+import { InputPreventionPatternDirective } from './inputPreventionPattern.directive';
+
+@Component({
+  template: `<input 
+    patternInput
+    pattern="^[a-zA-Z0-9_]*$">`
+})
+class TestHoverFocusComponent {
+}
+
+
+describe('InputPrevention Pattern Directive', () => {
+
+  let component: TestHoverFocusComponent;
+  let fixture: ComponentFixture<TestHoverFocusComponent>;
+  let directiveInstance : InputPreventionPatternDirective;
+  let inputEl: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestHoverFocusComponent, InputPreventionPatternDirective]
+    });
+    fixture = TestBed.createComponent(TestHoverFocusComponent);
+    component = fixture.componentInstance;
+    inputEl = fixture.debugElement.query(By.css('input'));
+    directiveInstance = inputEl.injector.get(InputPreventionPatternDirective);
+  });
+
+  it('directive should be defined', () => {
+    expect(directiveInstance).toBeDefined();
+  });
+
+  it('pattern exists', () => {
+    expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9_]*$');
+  });
+
+  it('kepress legal input', () => {
+    fixture.detectChanges();
+    inputEl.nativeElement.value = "legalInput";
+    expect(new RegExp(inputEl.nativeElement.pattern).test(inputEl.nativeElement.value)).toBeTruthy();
+  });
+
+  it('kepress illegal input', () => {
+    inputEl.triggerEventHandler('kepress', " ");
+    fixture.detectChanges();
+    expect(inputEl.nativeElement.value).toBe('');
+  });
+
+  it('kepress event legal input should return event', () => {
+    const event = <any>{ key: 'A' };
+    inputEl.nativeElement.value = "legalInput";
+    let result = directiveInstance.onKeypress(event);
+    expect(result).toBe(event);
+  });
+
+  it('kepress event illegal input should prevent default', () => {
+    const event = <any>{key: '-', preventDefault : function () {} };
+    spyOn(event, 'preventDefault');
+    inputEl.nativeElement.value = "-";
+    let result = directiveInstance.onKeypress(event);
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+});
diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
new file mode 100644
index 000000000..dada09bef
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
@@ -0,0 +1,24 @@
+import {Directive, ElementRef} from '@angular/core';
+
+@Directive({
+  selector: '[patternInput]',
+  host: {
+    '(keypress)': 'onKeypress($event)'
+  }
+})
+export class InputPreventionPatternDirective{
+  inputElement : ElementRef;
+  constructor(el: ElementRef) {
+    this.inputElement = el;
+  }
+
+  onKeypress(event: KeyboardEvent) {
+    const pattern = new RegExp(this.inputElement.nativeElement.pattern);
+    if(pattern){
+      if(!pattern.test(event['key'])){
+        event.preventDefault();
+      }
+    }
+    return event;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.html
diff --git a/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts
new file mode 100644
index 000000000..e4dc55a56
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/directives/svg/svg.directive.ts
@@ -0,0 +1,34 @@
+import { AfterContentChecked, AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
+import { isNullOrUndefined } from 'util';
+
+
+/*
+          Temporary
+  Changing svg color and size.
+  color changing according to fill attribute
+  size according to viewBox
+*/
+@Directive({
+  selector: '[svg-directive]'
+})
+export class SvgDirective implements AfterContentChecked {
+  @Input('fill') fill: string = "black";
+  @Input('widthViewBox') widthViewBox: string = null;
+  @Input('heightViewBox') heightViewBox: string = null;
+
+  constructor(private elRef: ElementRef) {}
+  ngAfterContentChecked(): void {
+    if(this.elRef !== undefined && this.elRef.nativeElement.children !== undefined && this.elRef.nativeElement.children[0] !== undefined){
+      this.elRef.nativeElement.children[0].children[1].children[0].style.fill = this.fill;
+      if(this.elRef.nativeElement.children[0].children[1].children.length > 1){
+        this.elRef.nativeElement.children[0].children[1].children[1].style.fill = this.fill;
+        this.elRef.nativeElement.children[0].children[1].children[2].children[0].style.fill = this.fill;
+      }
+
+      if(this.widthViewBox && this.heightViewBox){
+        this.elRef.nativeElement.firstChild.setAttribute('viewBox', "1 1 " + this.widthViewBox + " " + this.heightViewBox)
+      }
+
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/index.ts b/vid-webpack-master/src/app/shared/index.ts
new file mode 100644
index 000000000..68fada65d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/index.ts
@@ -0,0 +1 @@
+export * from './api.service';
diff --git a/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
new file mode 100644
index 000000000..f72b32d8b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/ServiceNodeTypes.ts
@@ -0,0 +1,8 @@
+export enum ServiceNodeTypes {
+  VF = "VF",
+  VFmodule = "VFmodule",
+  Network = "Network",
+  Configuration = "Configuration"
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/models/aicZone.ts b/vid-webpack-master/src/app/shared/models/aicZone.ts
new file mode 100644
index 000000000..7b9e1ed4e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/aicZone.ts
@@ -0,0 +1,9 @@
+export class AicZone {
+  id: string;
+  name: string;
+
+  constructor(serviceJson){
+    this.id = serviceJson["zone-id"];
+    this.name = serviceJson["zone-name"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/categoryParams.ts b/vid-webpack-master/src/app/shared/models/categoryParams.ts
new file mode 100644
index 000000000..9e0052979
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/categoryParams.ts
@@ -0,0 +1,15 @@
+import {SelectOptionInterface} from "./selectOption";
+
+export class CategoryParams {
+  owningEntityList: SelectOptionInterface[];
+  projectList: SelectOptionInterface[];
+  lineOfBusinessList: SelectOptionInterface[];
+  platformList: SelectOptionInterface[];
+
+  constructor(owningEntityList=[], projectList=[], lob=[], platform=[]){
+    this.owningEntityList = owningEntityList;
+    this.projectList = projectList;
+    this.lineOfBusinessList = lob;
+    this.platformList = platform;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/dynamicInput.ts b/vid-webpack-master/src/app/shared/models/dynamicInput.ts
new file mode 100644
index 000000000..a08cdfc77
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/dynamicInput.ts
@@ -0,0 +1,123 @@
+export class DynamicInput<T>{
+
+  id: string;
+  name: string;
+  type: string;
+  description: string;
+  value: T;
+  prompt: any;
+  maxLength: number;
+  minLength: number;
+  isVisible: boolean;
+  isRequired: boolean;
+  isEnabled: boolean;
+  isReadOnly: boolean;
+
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: T,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+  }) {
+    this.id = options.id;
+    this.name = options.name || '';
+    this.type = options.type;
+    this.description = options.description || '';
+    this.value = options.value;
+    this.prompt = options.prompt;
+    this.maxLength = options.maxLength;
+    this.minLength = options.minLength;
+    this.isVisible = options.isVisible == false? options.isVisible: true;
+    this.isEnabled = options.isEnabled == false? options.isEnabled: true;
+    this.isRequired = options.isRequired == null? false: options.isRequired;
+    this.isReadOnly = options.isReadOnly == null? false: options.isReadOnly;
+  }
+}
+
+export class DynamicNumber extends DynamicInput<number> {
+
+  max: number;
+  min: number;
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: number,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+    max?: number,
+    min?: number
+  }){
+    super(options);
+    this.max = options.max;
+    this.min = options.min;
+  }
+
+}
+
+export class DynamicSelect extends DynamicInput<any> {
+  optionList: any[];
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: any,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+    optionList?: any[]
+  }) {
+    super(options);
+    this.optionList = options.optionList || [];
+  }
+}
+
+export class DynamicMultiSelect extends DynamicSelect {
+  selectedItems: any[];
+  settings: any;
+
+  constructor(options: {
+    id?: string,
+    name?: string,
+    type: string,
+    description?: string,
+    value?: any,
+    prompt?: any,
+    maxLength?: number,
+    minLength?: number,
+    isVisible?: boolean,
+    isRequired?: boolean,
+    isEnabled?: boolean,
+    isReadOnly?: boolean,
+    settings?: any,
+    optionList?: any[],
+    selectedItems?: any[]
+  }) {
+    super(options);
+    this.settings = options.settings || {};
+    this.selectedItems = options.selectedItems || [];
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/externalComponentStatus.ts b/vid-webpack-master/src/app/shared/models/externalComponentStatus.ts
new file mode 100644
index 000000000..21ef61a8a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/externalComponentStatus.ts
@@ -0,0 +1,11 @@
+export class ExternalComponentStatus {
+  component: string;
+  available: boolean;
+  metadata: any;
+
+  constructor(component: string, available: boolean, metadata: any) {
+    this.component = component;
+    this.available = available;
+    this.metadata = metadata;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/inputTypes.ts b/vid-webpack-master/src/app/shared/models/inputTypes.ts
new file mode 100644
index 000000000..1f7222f52
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/inputTypes.ts
@@ -0,0 +1,12 @@
+export enum  InputType {
+  LCP_REGION = "LCP_REGION",
+  TENANT = "TENANT",
+  LOB  = "LOB",
+  PLATFORM = "PLATFORM",
+  ROLLBACK = "ROLLBACK",
+  PRODUCT_FAMILY = "PRODUCT_FAMILY",
+  VG = "VG"
+
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/models/lcpRegion.ts b/vid-webpack-master/src/app/shared/models/lcpRegion.ts
new file mode 100644
index 000000000..e39321d58
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/lcpRegion.ts
@@ -0,0 +1,11 @@
+export class LcpRegion {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(serviceJson){
+    this.id = serviceJson["cloudRegionID"];
+    this.name = serviceJson["cloudRegionID"];
+    this.isPermitted = serviceJson["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/lcpRegionTenants.ts b/vid-webpack-master/src/app/shared/models/lcpRegionTenants.ts
new file mode 100644
index 000000000..d215546aa
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/lcpRegionTenants.ts
@@ -0,0 +1,13 @@
+export class LcpRegionTenants {
+  id: string;
+  tenantId: string;
+  tenantName: string;
+  isPermitted: boolean;
+
+  constructor(serviceJson){
+    this.id = serviceJson["cloudRegionID"];
+    this.tenantId = serviceJson["tenantID"];
+    this.tenantName = serviceJson["tenantName"];
+    this.isPermitted = serviceJson["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/lcpRegionsAndTenants.ts b/vid-webpack-master/src/app/shared/models/lcpRegionsAndTenants.ts
new file mode 100644
index 000000000..79f6e07d4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/lcpRegionsAndTenants.ts
@@ -0,0 +1,12 @@
+import {LcpRegion} from "./lcpRegion";
+import {Tenant} from "./tenant";
+
+export class LcpRegionsAndTenants {
+  lcpRegionList: LcpRegion[];
+  lcpRegionsTenantsMap: { [lcpRegion: string] : Tenant[]; };
+
+  constructor(lcpRegionList: LcpRegion[] = [], lcpRegionsTenantsMap: any = {}) {
+    this.lcpRegionList = lcpRegionList;
+    this.lcpRegionsTenantsMap = lcpRegionsTenantsMap;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/modelInfo.ts b/vid-webpack-master/src/app/shared/models/modelInfo.ts
new file mode 100644
index 000000000..091c02ef1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/modelInfo.ts
@@ -0,0 +1,21 @@
+
+export class ModelInfo {
+  modelInvariantId: string;
+  modelVersionId: string;
+  modelName: string;
+  modelVersion: string;
+  modelCustomizationId: string;
+  modelCustomizationName: string;
+
+
+
+  constructor(instanceModel) {
+    this.modelInvariantId = instanceModel.invariantUuid;
+    this.modelVersionId = instanceModel.uuid;
+    this.modelName = instanceModel.name;
+    this.modelVersion = instanceModel.version;
+    this.modelCustomizationId = instanceModel.customizationUuid;
+    this.modelCustomizationName = instanceModel.modelCustomizationName;
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/nodeModel.ts b/vid-webpack-master/src/app/shared/models/nodeModel.ts
new file mode 100644
index 000000000..4b22b8d91
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/nodeModel.ts
@@ -0,0 +1,29 @@
+export interface NodeModelResponseInterface {
+  name: string;
+  version: string;
+  description: string;
+  category: string;
+  uuid: string;
+  invariantUuid: string;
+}
+
+export class NodeModel {
+  name: string;
+  version: string;
+  description: string;
+  category: string;
+  uuid: string;
+  invariantUuid: string;
+
+  constructor(serviceJson?: NodeModelResponseInterface) {
+    if (serviceJson) {
+      this.name = serviceJson.name;
+      this.version = serviceJson.version;
+      this.description = serviceJson.description;
+      this.category = serviceJson.category;
+      this.uuid = serviceJson.uuid;
+      this.invariantUuid = serviceJson.invariantUuid;
+    }
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/owningEntity.ts b/vid-webpack-master/src/app/shared/models/owningEntity.ts
new file mode 100644
index 000000000..f06b24ff0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/owningEntity.ts
@@ -0,0 +1,14 @@
+interface OwningEntityResponse {
+  id: string,
+  name: string
+}
+
+export class OwningEntity {
+  id: string;
+  name: string;
+
+  constructor(serviceJson: OwningEntityResponse){
+    this.id = serviceJson.id;
+    this.name = serviceJson.name;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/productFamily.ts b/vid-webpack-master/src/app/shared/models/productFamily.ts
new file mode 100644
index 000000000..3c55ac004
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/productFamily.ts
@@ -0,0 +1,13 @@
+import {ServiceResponseInterface} from "../../services/aaiService/responseInterfaces/getServicesResponseInterface";
+
+export class ProductFamily {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(serviceResponse: ServiceResponseInterface){
+    this.id = serviceResponse['service-id'];
+    this.name = serviceResponse["service-description"];
+    this.isPermitted = serviceResponse["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/project.ts b/vid-webpack-master/src/app/shared/models/project.ts
new file mode 100644
index 000000000..db8929e38
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/project.ts
@@ -0,0 +1,14 @@
+interface ProjectResponseInterface {
+  id: string,
+  name: string
+}
+
+export class Project {
+  id: string;
+  name: string;
+
+  constructor(projectResponse: ProjectResponseInterface){
+    this.id = projectResponse.id;
+    this.name = projectResponse.name;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/selectOption.ts b/vid-webpack-master/src/app/shared/models/selectOption.ts
new file mode 100644
index 000000000..c12c1a823
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/selectOption.ts
@@ -0,0 +1,17 @@
+export interface SelectOptionInterface {
+  id: string,
+  name: string
+  isPermitted?: boolean
+}
+
+export class SelectOption {
+  id: string;
+  name: string;
+  isPermitted?: boolean;
+
+  constructor(option: SelectOptionInterface){
+    this.id = option.id;
+    this.name = option.name;
+    this.isPermitted = option.isPermitted;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/serviceInstance.ts b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
new file mode 100644
index 000000000..a952430b0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceInstance.ts
@@ -0,0 +1,28 @@
+import {VnfInstance} from "./vnfInstance";
+
+export class ServiceInstance {
+  instanceName: string;
+  isUserProvidedNaming: boolean;
+  globalSubscriberId: string;
+  productFamilyId: string;
+  subscriptionServiceType: string;
+  lcpCloudRegionId: string;
+  tenantId: string;
+  tenantName: string;
+  aicZoneId: string;
+  aicZoneName: string;
+  projectName: string;
+  owningEntityId: string;
+  owningEntityName: string;
+  pause: boolean;
+  bulkSize: number;
+  vnfs: { [vnf_module_model_name: string] : VnfInstance; };
+  instanceParams: { [key: string] : string; };
+  rollbackOnFailure : boolean;
+  subscriberName : string;
+
+  constructor() {
+    this.vnfs = {};
+    this.instanceParams = {};
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/serviceModel.ts b/vid-webpack-master/src/app/shared/models/serviceModel.ts
new file mode 100644
index 000000000..18d8582e8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceModel.ts
@@ -0,0 +1,44 @@
+import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
+import * as _ from "lodash";
+
+
+export interface ServiceModelResponseInterface extends NodeModelResponseInterface{
+
+  serviceType: string;
+  serviceRole: string;
+  serviceEcompNaming: boolean;
+}
+
+export class ServiceModel extends NodeModel{
+
+  serviceType: string;
+  serviceRole: string;
+  servicesQty: number;
+  isUserProvidedNaming: boolean;
+  isMultiStepDesign: boolean;
+
+  constructor(serviceModelJson?: any){
+    super(serviceModelJson.service);
+    if (serviceModelJson) {
+      const service: ServiceModelResponseInterface = serviceModelJson.service;
+      this.serviceType = service.serviceType;
+      this.serviceRole = service.serviceRole;
+      this.isUserProvidedNaming = this.getIsUserProvidedName(service);
+      this.isMultiStepDesign = this.getIsMultiStepDesign(serviceModelJson);
+    }
+  }
+
+  private getIsUserProvidedName(serviceJson): boolean {
+    return serviceJson.serviceEcompNaming !== undefined && serviceJson.serviceEcompNaming === "false";
+  };
+
+  private getIsMultiStepDesign(serviceModel): boolean {
+    for (let key in serviceModel.vnfs) {
+      const vnf = serviceModel.vnfs[key];
+      if (vnf.properties.multi_stage_design === "true") {
+        return true
+      }
+    }
+    return false;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/serviceNodeTypeToModelKeyMapper.ts b/vid-webpack-master/src/app/shared/models/serviceNodeTypeToModelKeyMapper.ts
new file mode 100644
index 000000000..1134bbb89
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceNodeTypeToModelKeyMapper.ts
@@ -0,0 +1,8 @@
+export enum ServiceNodeTypeToModelKeyMapper {
+  VF = "vnfs",
+  VFmodule="vfModules",
+  Network = "networks",
+  Configuration = "configurations"
+}
+
+
diff --git a/vid-webpack-master/src/app/shared/models/serviceType.ts b/vid-webpack-master/src/app/shared/models/serviceType.ts
new file mode 100644
index 000000000..67aacdc07
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/serviceType.ts
@@ -0,0 +1,17 @@
+export interface SubscriptionResponseInterface {
+  'service-type': string
+  'is-permitted': boolean
+}
+
+export class ServiceType {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+
+  constructor(id: string, subscription: SubscriptionResponseInterface){
+    this.id = id;
+    this.name = subscription['service-type'];
+    this.isPermitted = subscription['is-permitted'];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/subscriber.ts b/vid-webpack-master/src/app/shared/models/subscriber.ts
new file mode 100644
index 000000000..55fc83792
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/subscriber.ts
@@ -0,0 +1,11 @@
+export class Subscriber {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(subscriberResponse){
+    this.id = subscriberResponse['global-customer-id'];
+    this.name = subscriberResponse['subscriber-name'];
+    this.isPermitted = subscriberResponse['is-permitted'];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/tenant.ts b/vid-webpack-master/src/app/shared/models/tenant.ts
new file mode 100644
index 000000000..234f1dbff
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/tenant.ts
@@ -0,0 +1,11 @@
+export class Tenant {
+  id: string;
+  name: string;
+  isPermitted: boolean;
+
+  constructor(serviceJson){
+    this.id = serviceJson["tenantID"];
+    this.name = serviceJson["tenantName"];
+    this.isPermitted = serviceJson["is-permitted"];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModule.ts b/vid-webpack-master/src/app/shared/models/vfModule.ts
new file mode 100644
index 000000000..21f43ed17
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModule.ts
@@ -0,0 +1,39 @@
+import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
+
+
+export interface properties{
+  initialCount: number;
+  maxCountInstances: number;
+  minCountInstances: number;
+}
+
+export interface VFModuleResponseInterface extends NodeModelResponseInterface {
+  customizationUuid: string;
+  modelCustomizationName: string;
+  properties: properties
+}
+
+export class VfModule extends NodeModel {
+
+  min:number;
+  max:number;
+  vgName:string;
+  rollbackOnFailure:boolean;
+  initial:number;
+  customizationUuid: string;
+  modelCustomizationName: string;
+
+  constructor(vf?: VFModuleResponseInterface) {
+    super(vf);
+    if(vf){
+      this.customizationUuid = vf.customizationUuid;
+      this.modelCustomizationName = vf.modelCustomizationName;
+    }
+    if (vf && vf.properties) {
+      this.min = vf.properties.minCountInstances;
+      this.max = vf.properties.maxCountInstances;
+      this.initial = vf.properties.initialCount;
+      this.rollbackOnFailure = true
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts b/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts
new file mode 100644
index 000000000..c6db00025
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModuleInstance.ts
@@ -0,0 +1,5 @@
+export class VfModuleInstance {
+  instanceName: string;
+  volumeGroupName: string;
+  instanceParams: { [key: string] : string; };
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts b/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts
new file mode 100644
index 000000000..d4cc7e9c7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModuleTreeNode.ts
@@ -0,0 +1,17 @@
+import {VfModule} from "./vfModule";
+import {VfModuleInstance} from "./vfModuleInstance";
+import {ServiceNodeTypes} from "./ServiceNodeTypes";
+
+export class VfModuleTreeNode {
+  modelId: string;
+  name: string;
+  modelName: string;
+  type: string;
+
+  constructor(vfModuleInstance: VfModuleInstance, vfModuleModel: VfModule, vfModuleModelName: string){
+    this.name = vfModuleInstance.instanceName || vfModuleInstance.volumeGroupName || '<Automatically Assigned>';
+    this.modelId = vfModuleModel.uuid;
+    this.modelName = vfModuleModelName;
+    this.type = ServiceNodeTypes.VFmodule;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfModulesMap.ts b/vid-webpack-master/src/app/shared/models/vfModulesMap.ts
new file mode 100644
index 000000000..95396fd55
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfModulesMap.ts
@@ -0,0 +1,5 @@
+import {VfModuleInstance} from "./vfModuleInstance";
+
+export class VfModuleMap {
+   [id: string] : VfModuleInstance;
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfcInstanceGroup.ts b/vid-webpack-master/src/app/shared/models/vfcInstanceGroup.ts
new file mode 100644
index 000000000..64354b01e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfcInstanceGroup.ts
@@ -0,0 +1,14 @@
+import {VfcInstanceGroupProperties} from "./vfcInstanceGroupProperties";
+
+export class VfcInstanceGroup {
+  name: string;
+  version: string;
+  uuid: string;
+  invariantUuid: string;
+  vfcInstanceGroupProperties: VfcInstanceGroupProperties;
+
+
+}
+
+
+
diff --git a/vid-webpack-master/src/app/shared/models/vfcInstanceGroupMap.ts b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupMap.ts
new file mode 100644
index 000000000..7ee3888c1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupMap.ts
@@ -0,0 +1,5 @@
+import {VfcInstanceGroup} from "./vfcInstanceGroup";
+
+export class VfcInstanceGroupMap {
+  [id: string] : VfcInstanceGroup;
+}
diff --git a/vid-webpack-master/src/app/shared/models/vfcInstanceGroupProperties.ts b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupProperties.ts
new file mode 100644
index 000000000..1a7bf718a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vfcInstanceGroupProperties.ts
@@ -0,0 +1,7 @@
+export class VfcInstanceGroupProperties {
+  networkCollectionFunction: string;
+  subinterfaceRole: string;
+  vfcInstanceGroupFunction: string;
+  vfcParentPortRole: string;
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfInstance.ts b/vid-webpack-master/src/app/shared/models/vnfInstance.ts
new file mode 100644
index 000000000..7f41e483a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfInstance.ts
@@ -0,0 +1,19 @@
+import {VfModuleMap} from "./vfModulesMap";
+
+export class VnfInstance {
+  instanceName: string;
+  isUserProvidedNaming: boolean;
+  productFamilyId: string;
+  lcpCloudRegionId: string;
+  legacyRegion: string;
+  tenantId: string;
+  platformName: string;
+  lineOfBusiness: string;
+  rollbackOnFailure: string;
+  vfModules: { [vf_module_model_name: string] : VfModuleMap; };
+
+  constructor() {
+    this.rollbackOnFailure = 'true';
+    this.vfModules = {};
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfModel.ts b/vid-webpack-master/src/app/shared/models/vnfModel.ts
new file mode 100644
index 000000000..e1302f1d0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfModel.ts
@@ -0,0 +1,52 @@
+import {NodeModel, NodeModelResponseInterface} from "./nodeModel";
+import {VfcInstanceGroupMap} from "./vfcInstanceGroupMap";
+
+
+export interface VnfProperties {
+  ecomp_generated_naming: string
+}
+
+export interface VNFModelResponseInterface extends NodeModelResponseInterface{
+
+  serviceType: string;
+  serviceRole: string;
+  subCategory: string;
+  customizationUuid: string;
+  serviceEcompNaming: boolean;
+  type: string;
+  modelCustomizationName: string;
+  properties: VnfProperties;
+  vfcInstanceGroups: VfcInstanceGroupMap;
+}
+
+export class VNFModel extends NodeModel{
+
+  serviceType: string;
+  serviceRole: string;
+  subCategory: string;
+  customizationUuid: string;
+  isUserProvidedNaming: boolean;
+  type: string;
+  modelCustomizationName: string;
+  vfcInstanceGroups: VfcInstanceGroupMap;
+
+  constructor(vnfJson?: VNFModelResponseInterface){
+    super(vnfJson);
+    if (vnfJson) {
+      this.serviceType = vnfJson.serviceType;
+      this.serviceRole = vnfJson.serviceRole;
+      this.subCategory = vnfJson.subCategory;
+      this.customizationUuid = vnfJson.customizationUuid;
+      this.isUserProvidedNaming = this.getIsUserProvidedName(vnfJson);
+      this.type = vnfJson.type;
+      this.modelCustomizationName = vnfJson.modelCustomizationName;
+      this.vfcInstanceGroups = vnfJson.vfcInstanceGroups;
+
+    }
+  }
+
+  private getIsUserProvidedName(vnfJson) {
+    const ecompGeneratedNaming = vnfJson.properties.ecomp_generated_naming;
+    return ecompGeneratedNaming !== undefined && ecompGeneratedNaming === "false";
+  };
+}
diff --git a/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts b/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts
new file mode 100644
index 000000000..316bf3e8b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/vnfTreeNode.ts
@@ -0,0 +1,18 @@
+import {VNFModel} from "./vnfModel";
+import {VnfInstance} from "./vnfInstance";
+import {VfModuleTreeNode} from "./vfModuleTreeNode";
+
+export class VnfTreeNode {
+  modelId: string;
+  name: string;
+  modelName: string;
+  type: string;
+  children: VfModuleTreeNode[];
+
+  constructor(instance: VnfInstance, vnfModel: VNFModel){
+    this.name = instance.instanceName || vnfModel['properties'].ecomp_generated_naming == 'false' ? vnfModel.modelCustomizationName : '<Automatically Assigned>';
+    this.modelId = vnfModel.uuid;
+    this.modelName = vnfModel.modelCustomizationName;
+    this.type = vnfModel.type;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/pipes/capitalize/capitalize-and-format.pipe.spec.ts b/vid-webpack-master/src/app/shared/pipes/capitalize/capitalize-and-format.pipe.spec.ts
new file mode 100644
index 000000000..84d2ff4b6
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/capitalize/capitalize-and-format.pipe.spec.ts
@@ -0,0 +1,25 @@
+
+import {CapitalizeAndFormatPipe} from "./capitalize-and-format.pipe";
+
+describe('Capitalize And Format Pipe', () => {
+  let capitalizeAndFormatPipe: CapitalizeAndFormatPipe;
+
+  beforeEach(() => {
+    capitalizeAndFormatPipe = new CapitalizeAndFormatPipe();
+  });
+
+  it('Capitalize And Format Pipe should be defined', () => {
+    expect(capitalizeAndFormatPipe).toBeDefined();
+  });
+
+  it('Capitalize And Format Pipe :  (UPPERCASE)', ()=> {
+    let result: string = capitalizeAndFormatPipe.transform('PENDING');
+    expect(result).toEqual('Pending');
+  });
+
+  it('Capitalize And Format Pipe (UPPERCASE) and Underscore should replace by -', ()=> {
+    let result: string = capitalizeAndFormatPipe.transform('IN_PROGRESS');
+    expect(result).toEqual('In-progress');
+  });
+
+});
diff --git a/vid-webpack-master/src/app/shared/pipes/capitalize/capitalize-and-format.pipe.ts b/vid-webpack-master/src/app/shared/pipes/capitalize/capitalize-and-format.pipe.ts
new file mode 100644
index 000000000..e3ec9ae9a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/capitalize/capitalize-and-format.pipe.ts
@@ -0,0 +1,12 @@
+import {PipeTransform, Pipe} from '@angular/core';
+
+@Pipe({ name: 'capitalizeAndFormat' })
+export class CapitalizeAndFormatPipe implements PipeTransform {
+  transform(text: string): string {
+    if (text) {
+      text = text.toLowerCase().replace('_', '-');
+      return text.charAt(0).toUpperCase() + text.slice(1);
+    }
+    return text;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/pipes/data-filter.pipe.ts b/vid-webpack-master/src/app/shared/pipes/data-filter.pipe.ts
new file mode 100644
index 000000000..1ff836762
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/data-filter.pipe.ts
@@ -0,0 +1,29 @@
+/**
+ * Created by cp2122 on 1/4/2018.
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dataFilter'
+})
+export class DataFilterPipe implements PipeTransform {
+  keys = [];
+  transform(items: any, args: string): any {
+    if (items != null && items.length > 0) {
+      let ans = [];
+
+      if (this.keys.length === 0) {
+        this.keys = Object.keys(items[0]);
+      }
+      for (let i of items) {
+        for (let k of this.keys) {
+          if (i[k] !== null && i[k].toString().match('^.*' + args + '.*$')) {
+            ans.push(i);
+            break;
+          }
+        }
+      }
+      return ans;
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/pipes/dynamicInputLabel/dynamic-input-label.pipe.spec.ts b/vid-webpack-master/src/app/shared/pipes/dynamicInputLabel/dynamic-input-label.pipe.spec.ts
new file mode 100644
index 000000000..22b619290
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/dynamicInputLabel/dynamic-input-label.pipe.spec.ts
@@ -0,0 +1,43 @@
+import { DynamicInputLabelPipe } from './dynamic-input-label.pipe';
+
+describe('Dynamic input label Pipe', () => {
+  let dynamicInputLabelPipe: DynamicInputLabelPipe;
+
+  beforeEach(() => {
+    dynamicInputLabelPipe = new DynamicInputLabelPipe();
+  });
+
+  it('Dynamic input label Pipe should be defined', () => {
+    expect(dynamicInputLabelPipe).toBeDefined();
+  });
+
+  it('Dynamic input label Pipe : Empty string should return empty string', ()=> {
+      let result: string = dynamicInputLabelPipe.transform('');
+      expect(result).toEqual(':*');
+  });
+
+  it('Dynamic input label Pipe: vnf should be VNF (UPPERCASE)', ()=> {
+    let result: string = dynamicInputLabelPipe.transform('vnf');
+    expect(result).toEqual('VNF:*');
+  });
+
+  it('Dynamic input label Pipe : nf should be NF (UPPERCASE)\'', ()=> {
+    let result: string = dynamicInputLabelPipe.transform('nf');
+    expect(result).toEqual('NF:*');
+  });
+
+  it('Dynamic input label Pipe : Underscore should replace by empty character', ()=> {
+    let result: string = dynamicInputLabelPipe.transform('nf_Test');
+    expect(result).toEqual('NF test:*');
+  });
+
+  it('Dynamic input label Pipe : Complex string', ()=> {
+    let result: string = dynamicInputLabelPipe.transform('nf_Test_vnf_nf');
+    expect(result).toEqual('NF test VNF NF:*');
+  });
+
+  it('Dynamic input label Pipe : First letter should be uppercase', ()=> {
+    let result: string = dynamicInputLabelPipe.transform('nfr');
+    expect(result).toEqual('Nfr:*');
+  });
+});
diff --git a/vid-webpack-master/src/app/shared/pipes/dynamicInputLabel/dynamic-input-label.pipe.ts b/vid-webpack-master/src/app/shared/pipes/dynamicInputLabel/dynamic-input-label.pipe.ts
new file mode 100644
index 000000000..bec87b46d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/dynamicInputLabel/dynamic-input-label.pipe.ts
@@ -0,0 +1,12 @@
+import {PipeTransform, Pipe} from '@angular/core';
+
+@Pipe({ name: 'dynamicInputLabel' })
+export class DynamicInputLabelPipe implements PipeTransform {
+  transform(text: string): string {
+    let split_label = text.toLowerCase().replace(/_/g,' ');
+    let uppercase_vnf = split_label.replace(/\bvnf\b/ig, 'VNF');
+    let uppercase_nf = uppercase_vnf.replace(/\bnf\b/ig, 'NF');
+    let capitalize_sentence = uppercase_nf.charAt(0).toUpperCase() + uppercase_nf.slice(1);
+    return capitalize_sentence + ':*';
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/pipes/highlight-filter.pipe.ts b/vid-webpack-master/src/app/shared/pipes/highlight-filter.pipe.ts
new file mode 100644
index 000000000..93aecbf69
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/highlight-filter.pipe.ts
@@ -0,0 +1,10 @@
+import {PipeTransform, Pipe} from '@angular/core';
+
+@Pipe({ name: 'highlight' })
+export class HighlightPipe implements PipeTransform {
+  transform(text: string, search: string): string {
+    let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+    let regex = new RegExp(pattern, 'gi');
+    return search ? text.replace(regex, (match) => `<span class="highlight">${match}</span>`) : text;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/pipes/serviceInfo/serviceInfo.pipe.spec.ts b/vid-webpack-master/src/app/shared/pipes/serviceInfo/serviceInfo.pipe.spec.ts
new file mode 100644
index 000000000..984e3378c
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/serviceInfo/serviceInfo.pipe.spec.ts
@@ -0,0 +1,58 @@
+import {ServiceInfoPipe} from "./serviceInfo.pipe";
+
+
+describe('Service info Pipe', () => {
+  let pipe: ServiceInfoPipe;
+
+  beforeEach(() => {
+    pipe = new ServiceInfoPipe();
+  });
+
+  it('Service info Pipe should return model name', () => {
+    let store = {
+      getState : function() {
+        return {
+          service: {
+            serviceHierarchy : generateserviceHierarchy()
+          }
+        }
+      }
+    };
+    let result : string = pipe.transform(null, store , '6e59c5de-f052-46fa-aa7e-2fca9d674c44', 'name');
+    expect(result).toEqual('ComplexService')
+  });
+
+
+
+  it('Service info Pipe should return null if  field name not exist', () => {
+    let store = {
+      getState : function() {
+        return {
+          service: {
+            serviceHierarchy : generateserviceHierarchy()
+          }
+        }
+      }
+    };
+    let result : string = pipe.transform(null, store , '6e59c5de-f052-46fa-aa7e-2fca9d674c44', 'notExist');
+    expect(result).toBeNull();
+  });
+
+  it('Service info Pipe should return null if  model not exist', () => {
+    let store = {
+      getState : function() {
+        return {
+          service: {
+            serviceHierarchy : generateserviceHierarchy()
+          }
+        }
+      }
+    };
+    let result : string = pipe.transform(null, store , 'modelNotExist', 'name');
+    expect(result).toBeNull();
+  });
+
+  function generateserviceHierarchy(){
+    return JSON.parse('{"6e59c5de-f052-46fa-aa7e-2fca9d674c44":{"service":{"uuid":"6e59c5de-f052-46fa-aa7e-2fca9d674c44","invariantUuid":"e49fbd11-e60c-4a8e-b4bf-30fbe8f4fcc0","name":"ComplexService","version":"1.0","toscaModelURL":null,"category":"Mobility","serviceType":"","serviceRole":"","description":"ComplexService","serviceEcompNaming":"true","instantiationType":"Macro","inputs":{}},"vnfs":{"VF_vMee 0":{"uuid":"d6557200-ecf2-4641-8094-5393ae3aae60","invariantUuid":"4160458e-f648-4b30-a176-43881ffffe9e","description":"VSP_vMee","name":"VF_vMee","version":"2.0","customizationUuid":"91415b44-753d-494c-926a-456a9172bbb9","inputs":{},"commands":{},"properties":{"gpb2_Internal2_mac":"00:80:37:0E:02:22","sctp-b-ipv6-egress_src_start_port":"0","sctp-a-ipv6-egress_rule_application":"any","Internal2_allow_transit":"true","sctp-b-IPv6_ethertype":"IPv6","sctp-a-egress_rule_application":"any","sctp-b-ingress_action":"pass","sctp-b-ingress_rule_protocol":"icmp","ncb2_Internal1_mac":"00:80:37:0E:0F:12","sctp-b-ipv6-ingress-src_start_port":"0.0","ncb1_Internal2_mac":"00:80:37:0E:09:12","fsb_volume_size_0":"320.0","sctp-b-egress_src_addresses":"local","sctp-a-ipv6-ingress_ethertype":"IPv4","sctp-a-ipv6-ingress-dst_start_port":"0","sctp-b-ipv6-ingress_rule_application":"any","domain_name":"default-domain","sctp-a-ingress_rule_protocol":"icmp","sctp-b-egress-src_start_port":"0.0","sctp-a-egress_src_addresses":"local","sctp-b-display_name":"epc-sctp-b-ipv4v6-sec-group","sctp-a-egress-src_start_port":"0.0","sctp-a-ingress_ethertype":"IPv4","sctp-b-ipv6-ingress-dst_end_port":"65535","sctp-b-dst_subnet_prefix_v6":"::","nf_naming":"{ecomp_generated_naming=true}","sctp-a-ipv6-ingress_src_subnet_prefix":"0.0.0.0","sctp-b-egress-dst_start_port":"0.0","ncb_flavor_name":"nv.c20r64d1","gpb1_Internal1_mac":"00:80:37:0E:01:22","sctp-b-egress_dst_subnet_prefix_len":"0.0","Internal2_net_cidr":"169.255.0.0","sctp-a-ingress-dst_start_port":"0.0","sctp-a-egress-dst_start_port":"0.0","fsb1_Internal2_mac":"00:80:37:0E:0B:12","sctp-a-egress_ethertype":"IPv4","vlc_st_service_mode":"in-network-nat","sctp-a-ipv6-egress_ethertype":"IPv4","sctp-a-egress-src_end_port":"65535.0","sctp-b-ipv6-egress_rule_application":"any","sctp-b-egress_action":"pass","sctp-a-ingress-src_subnet_prefix_len":"0.0","sctp-b-ipv6-ingress-src_end_port":"65535.0","sctp-b-name":"epc-sctp-b-ipv4v6-sec-group","fsb2_Internal1_mac":"00:80:37:0E:0D:12","sctp-a-ipv6-ingress-src_start_port":"0.0","sctp-b-ipv6-egress_ethertype":"IPv4","Internal1_net_cidr":"169.253.0.0","sctp-a-egress_dst_subnet_prefix":"0.0.0.0","fsb_flavor_name":"nv.c20r64d1","sctp_rule_protocol":"132","sctp-b-ipv6-ingress_src_subnet_prefix_len":"0","sctp-a-ipv6-ingress_rule_application":"any","ecomp_generated_naming":"true","sctp-a-IPv6_ethertype":"IPv6","vlc2_Internal1_mac":"00:80:37:0E:02:12","vlc_st_virtualization_type":"virtual-machine","sctp-b-ingress-dst_start_port":"0.0","sctp-b-ingress-dst_end_port":"65535.0","sctp-a-ipv6-ingress-src_end_port":"65535.0","sctp-a-display_name":"epc-sctp-a-ipv4v6-sec-group","sctp-b-ingress_rule_application":"any","int2_sec_group_name":"int2-sec-group","vlc_flavor_name":"nd.c16r64d1","sctp-b-ipv6-egress_src_addresses":"local","vlc_st_interface_type_int1":"other1","sctp-b-egress-src_end_port":"65535.0","sctp-a-ipv6-egress-dst_start_port":"0","vlc_st_interface_type_int2":"other2","sctp-a-ipv6-egress_rule_protocol":"any","Internal2_shared":"false","sctp-a-ipv6-egress_dst_subnet_prefix_len":"0","Internal2_rpf":"disable","vlc1_Internal1_mac":"00:80:37:0E:01:12","sctp-b-ipv6-egress_src_end_port":"65535","sctp-a-ipv6-egress_src_addresses":"local","sctp-a-ingress-dst_end_port":"65535.0","sctp-a-ipv6-egress_src_end_port":"65535","Internal1_forwarding_mode":"l2","Internal2_dhcp":"false","sctp-a-dst_subnet_prefix_v6":"::","pxe_image_name":"MME_PXE-Boot_16ACP04_GA.qcow2","vlc_st_interface_type_gtp":"other0","ncb1_Internal1_mac":"00:80:37:0E:09:12","sctp-b-src_subnet_prefix_v6":"::","sctp-a-egress_dst_subnet_prefix_len":"0.0","int1_sec_group_name":"int1-sec-group","Internal1_dhcp":"false","sctp-a-ipv6-egress_dst_end_port":"65535","Internal2_forwarding_mode":"l2","fsb2_Internal2_mac":"00:80:37:0E:0D:12","sctp-b-egress_dst_subnet_prefix":"0.0.0.0","Internal1_net_cidr_len":"17","gpb2_Internal1_mac":"00:80:37:0E:02:22","sctp-b-ingress-src_subnet_prefix_len":"0.0","sctp-a-ingress_dst_addresses":"local","sctp-a-egress_action":"pass","fsb_volume_type_0":"SF-Default-SSD","ncb2_Internal2_mac":"00:80:37:0E:0F:12","vlc_st_interface_type_sctp_a":"left","vlc_st_interface_type_sctp_b":"right","sctp-a-src_subnet_prefix_v6":"::","vlc_st_version":"2","sctp-b-egress_ethertype":"IPv4","sctp-a-ingress_rule_application":"any","gpb1_Internal2_mac":"00:80:37:0E:01:22","instance_ip_family_v6":"v6","sctp-a-ipv6-egress_src_start_port":"0","sctp-b-ingress-src_start_port":"0.0","sctp-b-ingress_dst_addresses":"local","fsb1_Internal1_mac":"00:80:37:0E:0B:12","vlc_st_interface_type_oam":"management","multi_stage_design":"false","oam_sec_group_name":"oam-sec-group","Internal2_net_gateway":"169.255.0.3","sctp-a-ipv6-ingress-dst_end_port":"65535","sctp-b-ipv6-egress-dst_start_port":"0","Internal1_net_gateway":"169.253.0.3","sctp-b-ipv6-egress_rule_protocol":"any","gtp_sec_group_name":"gtp-sec-group","sctp-a-ipv6-egress_dst_subnet_prefix":"0.0.0.0","sctp-b-ipv6-egress_dst_subnet_prefix_len":"0","sctp-a-ipv6-ingress_dst_addresses":"local","sctp-a-egress_rule_protocol":"icmp","sctp-b-ipv6-egress_action":"pass","sctp-a-ipv6-egress_action":"pass","Internal1_shared":"false","sctp-b-ipv6-ingress_rule_protocol":"any","Internal2_net_cidr_len":"17","sctp-a-name":"epc-sctp-a-ipv4v6-sec-group","sctp-a-ingress-src_end_port":"65535.0","sctp-b-ipv6-ingress_src_subnet_prefix":"0.0.0.0","sctp-a-egress-dst_end_port":"65535.0","sctp-a-ingress_action":"pass","sctp-b-egress_rule_protocol":"icmp","sctp-b-ipv6-ingress_action":"pass","vlc_st_service_type":"firewall","sctp-b-ipv6-egress_dst_end_port":"65535","sctp-b-ipv6-ingress-dst_start_port":"0","vlc2_Internal2_mac":"00:80:37:0E:02:12","vlc_st_availability_zone":"true","fsb_volume_image_name_1":"MME_FSB2_16ACP04_GA.qcow2","sctp-b-ingress-src_subnet_prefix":"0.0.0.0","sctp-a-ipv6-ingress_src_subnet_prefix_len":"0","Internal1_allow_transit":"true","gpb_flavor_name":"nv.c20r64d1","availability_zone_max_count":"1","fsb_volume_image_name_0":"MME_FSB1_16ACP04_GA.qcow2","sctp-b-ipv6-ingress_dst_addresses":"local","sctp-b-ipv6-egress_dst_subnet_prefix":"0.0.0.0","sctp-b-ipv6-ingress_ethertype":"IPv4","vlc1_Internal2_mac":"00:80:37:0E:01:12","sctp-a-ingress-src_subnet_prefix":"0.0.0.0","sctp-a-ipv6-ingress_action":"pass","Internal1_rpf":"disable","sctp-b-ingress_ethertype":"IPv4","sctp-b-egress_rule_application":"any","sctp-b-ingress-src_end_port":"65535.0","sctp-a-ipv6-ingress_rule_protocol":"any","sctp-a-ingress-src_start_port":"0.0","sctp-b-egress-dst_end_port":"65535.0"},"type":"VF","modelCustomizationName":"VF_vMee 0","vfModules":{"vf_vmee0..VfVmee..vmme_vlc..module-1":{"uuid":"522159d5-d6e0-4c2a-aa44-5a542a12a830","invariantUuid":"98a7c88b-b577-476a-90e4-e25a5871e02b","customizationUuid":"55b1be94-671a-403e-a26c-667e9c47d091","description":null,"name":"VfVmee..vmme_vlc..module-1","version":"2","modelCustomizationName":"VfVmee..vmme_vlc..module-1","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_vlc"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..vmme_gpb..module-2":{"uuid":"41708296-e443-4c71-953f-d9a010f059e1","invariantUuid":"1cca90b8-3490-495e-87da-3f3e4c57d5b9","customizationUuid":"6add59e0-7fe1-4bc4-af48-f8812422ae7c","description":null,"name":"VfVmee..vmme_gpb..module-2","version":"2","modelCustomizationName":"VfVmee..vmme_gpb..module-2","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_gpb"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{},"volumeGroupAllowed":true}},"volumeGroups":{"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{}}},"vfcInstanceGroups":{}}},"networks":{"ExtVL 0":{"uuid":"ddc3f20c-08b5-40fd-af72-c6d14636b986","invariantUuid":"379f816b-a7aa-422f-be30-17114ff50b7c","description":"ECOMP generic virtual link (network) base type for all other service-level and global networks","name":"ExtVL","version":"37.0","customizationUuid":"94fdd893-4a36-4d70-b16a-ec29c54c184f","inputs":{},"commands":{},"properties":{"network_assignments":"{is_external_network=false, ipv4_subnet_default_assignment={min_subnets_count=1}, ecomp_generated_network_assignment=false, ipv6_subnet_default_assignment={min_subnets_count=1}}","exVL_naming":"{ecomp_generated_naming=true}","network_flows":"{is_network_policy=false, is_bound_to_vpn=false}","network_homing":"{ecomp_selected_instance_node_target=false}"},"type":"VL","modelCustomizationName":"ExtVL 0"}},"collectionResource":{},"configurations":{"Port Mirroring Configuration By Policy 0":{"uuid":"b4398538-e89d-4f13-b33d-ca323434ba50","invariantUuid":"6ef0ca40-f366-4897-951f-abd65d25f6f7","description":"A port mirroring configuration by policy object","name":"Port Mirroring Configuration By Policy","version":"27.0","customizationUuid":"3c3b7b8d-8669-4b3b-8664-61970041fad2","inputs":{},"commands":{},"properties":{},"type":"Configuration","modelCustomizationName":"Port Mirroring Configuration By Policy 0","sourceNodes":[],"collectorNodes":null,"configurationByPolicy":false}},"serviceProxies":{},"vfModules":{"vf_vmee0..VfVmee..vmme_vlc..module-1":{"uuid":"522159d5-d6e0-4c2a-aa44-5a542a12a830","invariantUuid":"98a7c88b-b577-476a-90e4-e25a5871e02b","customizationUuid":"55b1be94-671a-403e-a26c-667e9c47d091","description":null,"name":"VfVmee..vmme_vlc..module-1","version":"2","modelCustomizationName":"VfVmee..vmme_vlc..module-1","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_vlc"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..vmme_gpb..module-2":{"uuid":"41708296-e443-4c71-953f-d9a010f059e1","invariantUuid":"1cca90b8-3490-495e-87da-3f3e4c57d5b9","customizationUuid":"6add59e0-7fe1-4bc4-af48-f8812422ae7c","description":null,"name":"VfVmee..vmme_gpb..module-2","version":"2","modelCustomizationName":"VfVmee..vmme_gpb..module-2","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_gpb"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{},"volumeGroupAllowed":true}},"volumeGroups":{"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{}}},"pnfs":{}}}');
+  }
+});
diff --git a/vid-webpack-master/src/app/shared/pipes/serviceInfo/serviceInfo.pipe.ts b/vid-webpack-master/src/app/shared/pipes/serviceInfo/serviceInfo.pipe.ts
new file mode 100644
index 000000000..8cb2e1dcd
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/pipes/serviceInfo/serviceInfo.pipe.ts
@@ -0,0 +1,13 @@
+import {PipeTransform, Pipe} from '@angular/core';
+import {isNullOrUndefined} from "util";
+
+@Pipe({ name: 'serviceInfo'})
+export class ServiceInfoPipe implements PipeTransform {
+  transform(service: string, store : any , modelId : string, fieldName : string): string {
+    const serviceHierarchy = store.getState().service.serviceHierarchy;
+    if(!isNullOrUndefined(serviceHierarchy) && !isNullOrUndefined(serviceHierarchy[modelId])){
+      return serviceHierarchy[modelId].service[fieldName] || null;
+    }
+    return null;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/server/healthStatusService/health-status.service.spec.ts b/vid-webpack-master/src/app/shared/server/healthStatusService/health-status.service.spec.ts
new file mode 100644
index 000000000..36f6349e2
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/server/healthStatusService/health-status.service.spec.ts
@@ -0,0 +1,60 @@
+import {TestBed, inject, getTestBed} from '@angular/core/testing';
+
+import { HealthStatusService } from './health-status.service';
+import {Constants} from "../../utils/constants";
+import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
+import {ExternalComponentStatus} from "../../models/externalComponentStatus";
+
+describe('HealthStatusService', () => {
+
+  let injector;
+  let service: HealthStatusService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [HealthStatusService]
+    });
+
+    injector = getTestBed();
+    service = injector.get(HealthStatusService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  describe('#getProbe', () =>{
+    it('when call probe, there is http GET with right url', () => {
+
+      service.getProbe().subscribe((result: Array<ExternalComponentStatus>)=>{
+        expect(result[0].component).toEqual("AAI");
+        expect(result[0].available).toBeTruthy();
+        expect(result[0].metadata).toEqual({ myKey: 'myValue' });
+
+        expect(result[1].component).toEqual("MSO");
+        expect(result[1].available).toBeFalsy();
+        expect(result[1].metadata).toEqual({otherKey: 123});
+      });
+
+      const req = httpMock.expectOne(Constants.Path.SERVICES_PROBE_PATH);
+      expect(req.request.method).toEqual('GET');
+      req.flush([
+        {
+          "component": "AAI",
+          "available": true,
+          "metadata": {
+            "myKey": "myValue"
+          }
+        },
+        {
+          "component": "MSO",
+          "available": false,
+          "metadata": {
+            "otherKey": 123
+          }
+        },
+      ]);
+    });
+
+  });
+
+});
diff --git a/vid-webpack-master/src/app/shared/server/healthStatusService/health-status.service.ts b/vid-webpack-master/src/app/shared/server/healthStatusService/health-status.service.ts
new file mode 100644
index 000000000..4305ab97e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/server/healthStatusService/health-status.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs/Observable";
+import {Constants} from "../../utils/constants";
+import {ExternalComponentStatus} from "../../models/externalComponentStatus";
+
+@Injectable()
+export class HealthStatusService {
+
+  constructor(private _http: HttpClient) {
+  }
+
+  getProbe(): Observable<Array<ExternalComponentStatus>> {
+    let pathQuery = Constants.Path.SERVICES_PROBE_PATH;
+    return this._http.get<Array<ExternalComponentStatus>>(pathQuery).map(res => res);
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/server/serviceInfo/AuditStatus.model.ts b/vid-webpack-master/src/app/shared/server/serviceInfo/AuditStatus.model.ts
new file mode 100644
index 000000000..0b4c70f9d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/server/serviceInfo/AuditStatus.model.ts
@@ -0,0 +1,10 @@
+export class AuditStatus{
+  id: number;
+  createdDate: number;
+  final: boolean;
+  jobId :string;
+  jobStatus :string;
+  source: string;
+  requestId: string;
+  additionalInfo :any
+}
diff --git a/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.model.ts b/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.model.ts
new file mode 100644
index 000000000..0b4695930
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.model.ts
@@ -0,0 +1,38 @@
+import {ServiceStatus} from '../../../instantiationStatus/instantiationStatus.component.service';
+
+export class ServiceInfoModel {
+  id: number;
+  created: Date;
+  modified: Date;
+  createdId: number;
+  modifiedId: number;
+  numRow: number;
+  uuid: string;
+  userId: string;
+  jobStatus: string;
+  pause: boolean;
+  owningEntityId: string;
+  owningEntityName: string;
+  project: string;
+  aicZoneId: string;
+  aicZoneName: string;
+  tenantId: string;
+  tenantName: string;
+  regionId: string;
+  regionName: string;
+  serviceType: string;
+  subscriberName: string;
+  serviceInstanceId: string;
+  serviceInstanceName: string;
+  serviceModelId: string;
+  serviceModelName: string;
+  serviceModelVersion: string;
+  templateId: string;
+  auditUserId: string;
+  jobId: string;
+}
+
+export class ServiceInfoUiModel extends ServiceInfoModel{
+  serviceStatus : ServiceStatus;
+  serviceIndex : number;
+}
diff --git a/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.service.spec.ts b/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.service.spec.ts
new file mode 100644
index 000000000..78c1b5ab9
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.service.spec.ts
@@ -0,0 +1,235 @@
+import {getTestBed, TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {ServiceInfoService} from './serviceInfo.service';
+import {ServiceInfoModel} from './serviceInfo.model';
+import {Constants} from "../../utils/constants";
+
+describe('Service Info Service', () => {
+  let injector;
+  let service: ServiceInfoService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [ServiceInfoService]
+    });
+
+    injector = getTestBed();
+    service = injector.get(ServiceInfoService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  describe('#getServicesJobInfo', () => {
+    it('should return an Observable<ServiceInfoModel[]>', () => {
+      const dummyServiceInfo: ServiceInfoModel[] = generateServiceInfoData();
+
+      service.getServicesJobInfo(true).subscribe((serviceInfo:Array<ServiceInfoModel>) => {
+        expect(serviceInfo).toEqual(dummyServiceInfo);
+      });
+    });
+
+
+  });
+
+  describe('#deleteJob', () =>{
+    it('delete job', () => {
+      const jobId : string = "1111";
+
+      service.deleteJob(jobId).subscribe();
+
+      const req = httpMock.expectOne(Constants.Path.SERVICES_JOB_INFO_PATH + '/job/' + jobId);
+      expect(req.request.method).toEqual('DELETE');
+
+    });
+  });
+
+  describe('#hideJob', () =>{
+    it('when call hide job, there is http POST with right url', () => {
+      const jobId : string = "3";
+
+      service.hideJob(jobId).subscribe();
+
+      const req = httpMock.expectOne(Constants.Path.SERVICES_JOB_INFO_PATH + '/hide/' + jobId);
+      expect(req.request.method).toEqual('POST');
+    });
+  });
+
+  describe('#getJobAuditStatus', ()=> {
+    it('should return Observable<Object[]>', ()=>{
+      const jobId : string = '111';
+
+      service.getJobAuditStatus(jobId).subscribe();
+      const req = httpMock.expectOne(Constants.Path.SERVICES_JOB_INFO_PATH + Constants.Path.SERVICES_JOB_AUDIT_PATH + '/' + jobId + '?source=VID');
+      const req2 = httpMock.expectOne(Constants.Path.SERVICES_JOB_INFO_PATH + Constants.Path.SERVICES_JOB_AUDIT_PATH + '/' + jobId + '?source=MSO');
+
+      expect(req.request.method).toEqual('GET');
+      expect(req2.request.method).toEqual('GET');
+    });
+  });
+
+  function generateServiceInfoData(){
+    return <ServiceInfoModel[]>JSON.parse(JSON.stringify(
+      [{
+        "created": 1519956533000,
+        "modified": 1521727738000,
+        "createdId": null,
+        "modifiedId": null,
+        "rowNum": null,
+        "auditUserId": null,
+        "auditTrail": null,
+        "jobId": "6748648484",
+        "userId": "2222",
+        "jobStatus": "FAILED",
+        "pause": false,
+        "owningEntityId": "1234",
+        "owningEntityName": null,
+        "project": null,
+        "aicZoneId": null,
+        "aicZoneName": null,
+        "tenantId": null,
+        "tenantName": null,
+        "regionId": null,
+        "regionName": null,
+        "serviceType": null,
+        "subscriberName": null,
+        "serviceInstanceId": "1",
+        "serviceInstanceName": null,
+        "serviceModelId": null,
+        "serviceModelName": null,
+        "serviceModelVersion": null,
+        "createdBulkDate": 1519956533000,
+        "statusModifiedDate": 1520042933000,
+        "hidden": false
+      },
+      {
+        "created": 1519956533000,
+        "modified": 1521727738000,
+        "createdId": null,
+        "modifiedId": null,
+        "rowNum": null,
+        "auditUserId": null,
+        "auditTrail": null,
+        "jobId": "6748648484",
+        "userId": "2222",
+        "jobStatus": "FAILED",
+        "pause": false,
+        "owningEntityId": "1234",
+        "owningEntityName": null,
+        "project": null,
+        "aicZoneId": null,
+        "aicZoneName": null,
+        "tenantId": null,
+        "tenantName": null,
+        "regionId": null,
+        "regionName": null,
+        "serviceType": null,
+        "subscriberName": null,
+        "serviceInstanceId": "1",
+        "serviceInstanceName": null,
+        "serviceModelId": null,
+        "serviceModelName": null,
+        "serviceModelVersion": null,
+        "createdBulkDate": 1519956533000,
+        "statusModifiedDate": 1520042933000,
+        "hidden": false
+      },
+      {
+        "created": 1519956533000,
+        "modified": 1521727738000,
+        "createdId": null,
+        "modifiedId": null,
+        "rowNum": null,
+        "auditUserId": null,
+        "auditTrail": null,
+        "jobId": "6748648484",
+        "userId": "2222",
+        "jobStatus": "FAILED",
+        "pause": false,
+        "owningEntityId": "1234",
+        "owningEntityName": null,
+        "project": null,
+        "aicZoneId": null,
+        "aicZoneName": null,
+        "tenantId": null,
+        "tenantName": null,
+        "regionId": null,
+        "regionName": null,
+        "serviceType": null,
+        "subscriberName": null,
+        "serviceInstanceId": "2",
+        "serviceInstanceName": null,
+        "serviceModelId": null,
+        "serviceModelName": null,
+        "serviceModelVersion": null,
+        "createdBulkDate": 1519956533000,
+        "statusModifiedDate": 1520042933000,
+        "hidden": false
+      },
+      {
+        "created": 1519956533000,
+        "modified": 1521727738000,
+        "createdId": null,
+        "modifiedId": null,
+        "rowNum": null,
+        "auditUserId": null,
+        "auditTrail": null,
+        "jobId": "6748648484",
+        "userId": "2222",
+        "jobStatus": "FAILED",
+        "pause": false,
+        "owningEntityId": "1234",
+        "owningEntityName": null,
+        "project": null,
+        "aicZoneId": null,
+        "aicZoneName": null,
+        "tenantId": null,
+        "tenantName": null,
+        "regionId": null,
+        "regionName": null,
+        "serviceType": null,
+        "subscriberName": null,
+        "serviceInstanceId": "2",
+        "serviceInstanceName": null,
+        "serviceModelId": null,
+        "serviceModelName": null,
+        "serviceModelVersion": null,
+        "createdBulkDate": 1519956533000,
+        "statusModifiedDate": 1520042933000,
+        "hidden": false
+      },
+      {
+        "created": 1519956533000,
+        "modified": 1521727738000,
+        "createdId": null,
+        "modifiedId": null,
+        "rowNum": null,
+        "auditUserId": null,
+        "auditTrail": null,
+        "jobId": "6748648484",
+        "userId": "2222",
+        "jobStatus": "FAILED",
+        "pause": false,
+        "owningEntityId": "1234",
+        "owningEntityName": null,
+        "project": null,
+        "aicZoneId": null,
+        "aicZoneName": null,
+        "tenantId": null,
+        "tenantName": null,
+        "regionId": null,
+        "regionName": null,
+        "serviceType": null,
+        "subscriberName": null,
+        "serviceInstanceId": "3",
+        "serviceInstanceName": null,
+        "serviceModelId": null,
+        "serviceModelName": null,
+        "serviceModelVersion": null,
+        "createdBulkDate": 1519956533000,
+        "statusModifiedDate": 1520042933000,
+        "hidden": false
+      }]
+    ));
+  }
+});
diff --git a/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.service.ts b/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.service.ts
new file mode 100644
index 000000000..e0057bb4d
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/server/serviceInfo/serviceInfo.service.ts
@@ -0,0 +1,38 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {ServiceInfoModel} from './serviceInfo.model';
+import {HttpClient} from '@angular/common/http';
+import 'rxjs/add/operator/map'
+import {Constants} from '../../utils/constants';
+import {forkJoin} from "rxjs/observable/forkJoin";
+
+@Injectable()
+export class ServiceInfoService {
+  constructor(private _http: HttpClient) {
+  }
+
+  getServicesJobInfo(filterByUser : boolean): Observable<ServiceInfoModel[]> {
+    let pathQuery = Constants.Path.SERVICES_JOB_INFO_PATH;
+    return this._http.get<ServiceInfoModel[]>(pathQuery).map(res => res );
+  }
+
+  deleteJob(jobId: string): Observable<any> {
+    let pathQuery = Constants.Path.SERVICES_JOB_INFO_PATH + '/job/' + jobId;
+    return this._http.delete<any>(pathQuery).map(res => res);
+  }
+
+  hideJob(jobId: string): Observable<any> {
+    let pathQuery = Constants.Path.SERVICES_JOB_INFO_PATH + '/hide/' + jobId;
+    return this._http.post<any>(pathQuery, null).map(res => res);
+  }
+
+  getJobAuditStatus(jobId : string) : Observable<Object[]>{
+    let pathQueryVID = Constants.Path.SERVICES_JOB_INFO_PATH + Constants.Path.SERVICES_JOB_AUDIT_PATH + '/' + jobId + '?source=VID';
+    let pathQueryMSO = Constants.Path.SERVICES_JOB_INFO_PATH + Constants.Path.SERVICES_JOB_AUDIT_PATH + '/' + jobId + '?source=MSO';
+
+    let vidObs = this._http.get(pathQueryVID);
+    let msoObs = this._http.get(pathQueryMSO);
+    return forkJoin([vidObs, msoObs]);
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/services/defaultDataServiceGenerator/default.data.generator.service.spec.ts b/vid-webpack-master/src/app/shared/services/defaultDataServiceGenerator/default.data.generator.service.spec.ts
new file mode 100644
index 000000000..617dbd3da
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/services/defaultDataServiceGenerator/default.data.generator.service.spec.ts
@@ -0,0 +1,73 @@
+import { getTestBed, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { NgRedux } from '@angular-redux/store';
+import { DefaultDataGeneratorService } from './default.data.generator.service';
+
+export class MockAppStore<T> {}
+
+describe('Default Data Generator Service', () => {
+  let injector;
+  let service: DefaultDataGeneratorService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [DefaultDataGeneratorService,
+        {provide: NgRedux, useClass: MockAppStore}]
+    });
+
+    injector = getTestBed();
+    service = injector.get(DefaultDataGeneratorService);
+    httpMock = injector.get(HttpTestingController);
+  });
+
+  it('generateVFModule should create vf module object', () => {
+    const serviceHierarchy = generateServiceHierarchy();
+    const vnfUUID: string = 'VF_vMee 0';
+    const vnfModuleUUID: string = 'vf_vmee0..VfVmee..base_vmme..module-0';
+
+    let result = service.generateVFModule(serviceHierarchy, vnfUUID, vnfModuleUUID);
+
+    expect(result.modelInfo.modelType).toEqual('VFmodule');
+    expect(result.modelInfo.modelInvariantId).toEqual(serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].invariantUuid);
+    expect(result.modelInfo.modelVersionId).toEqual(serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].uuid);
+    expect(result.modelInfo.modelName).toEqual(serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].name);
+    expect(result.modelInfo.modelVersion).toEqual(serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].version);
+    expect(result.modelInfo.modelCustomizationId).toEqual(serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].customizationUuid);
+    expect(result.modelInfo.modelCustomizationName).toEqual(serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].modelCustomizationName);
+    expect(result.sdncPreReload).toBeNull();
+  });
+
+  it('generateVNFData should create vnf object', () => {
+    const serviceHierarchy = generateServiceHierarchy();
+    const vnfName: string = 'VF_vMee 0';
+    const formValues = generateVNFFormValues();
+    const vfUUID: string = 'vf_vmee0..VfVmee..base_vmme..module-0';
+
+    let result = service.generateVNFData(serviceHierarchy, vnfName, vfUUID, formValues);
+
+    expect(result.productFamilyId).toEqual(formValues.productFamilyId);
+    expect(result.lcpCloudRegionId).toBeNull();
+    expect(result.tenantId).toBeNull();
+    expect(result.lineOfBusiness).toBeNull();
+    expect(result.platformName).toBeNull();
+    expect(result.modelInfo.modelType).toEqual('VF');
+    expect(result.modelInfo.modelInvariantId).toEqual(serviceHierarchy.vnfs[vnfName].invariantUuid);
+    expect(result.modelInfo.modelVersionId).toEqual(formValues.modelInfo.modelVersionId);
+    expect(result.modelInfo.modelName).toEqual(serviceHierarchy.vnfs[vnfName].name);
+    expect(result.modelInfo.modelVersion).toEqual(serviceHierarchy.vnfs[vnfName].version);
+    expect(result.modelInfo.modelCustomizationId).toEqual(serviceHierarchy.vnfs[vnfName].modelCustomizationId);
+    expect(result.modelInfo.modelCustomizationName).toEqual(serviceHierarchy.vnfs[vnfName].modelCustomizationName);
+  });
+});
+
+
+function generateServiceHierarchy() {
+  return JSON.parse('{"service":{"uuid":"6e59c5de-f052-46fa-aa7e-2fca9d674c44","invariantUuid":"e49fbd11-e60c-4a8e-b4bf-30fbe8f4fcc0","name":"ComplexService","version":"1.0","toscaModelURL":null,"category":"Mobility","serviceType":"","serviceRole":"","description":"ComplexService","serviceEcompNaming":"true","instantiationType":"Macro","inputs":{}},"vnfs":{"VF_vMee 0":{"uuid":"d6557200-ecf2-4641-8094-5393ae3aae60","invariantUuid":"4160458e-f648-4b30-a176-43881ffffe9e","description":"VSP_vMee","name":"VF_vMee","version":"2.0","customizationUuid":"91415b44-753d-494c-926a-456a9172bbb9","inputs":{},"commands":{},"properties":{"gpb2_Internal2_mac":"00:80:37:0E:02:22","sctp-b-ipv6-egress_src_start_port":"0","sctp-a-ipv6-egress_rule_application":"any","Internal2_allow_transit":"true","sctp-b-IPv6_ethertype":"IPv6","sctp-a-egress_rule_application":"any","sctp-b-ingress_action":"pass","sctp-b-ingress_rule_protocol":"icmp","ncb2_Internal1_mac":"00:80:37:0E:0F:12","sctp-b-ipv6-ingress-src_start_port":"0.0","ncb1_Internal2_mac":"00:80:37:0E:09:12","fsb_volume_size_0":"320.0","sctp-b-egress_src_addresses":"local","sctp-a-ipv6-ingress_ethertype":"IPv4","sctp-a-ipv6-ingress-dst_start_port":"0","sctp-b-ipv6-ingress_rule_application":"any","domain_name":"default-domain","sctp-a-ingress_rule_protocol":"icmp","sctp-b-egress-src_start_port":"0.0","sctp-a-egress_src_addresses":"local","sctp-b-display_name":"epc-sctp-b-ipv4v6-sec-group","sctp-a-egress-src_start_port":"0.0","sctp-a-ingress_ethertype":"IPv4","sctp-b-ipv6-ingress-dst_end_port":"65535","sctp-b-dst_subnet_prefix_v6":"::","nf_naming":"{ecomp_generated_naming=true}","sctp-a-ipv6-ingress_src_subnet_prefix":"0.0.0.0","sctp-b-egress-dst_start_port":"0.0","ncb_flavor_name":"nv.c20r64d1","gpb1_Internal1_mac":"00:80:37:0E:01:22","sctp-b-egress_dst_subnet_prefix_len":"0.0","Internal2_net_cidr":"169.255.0.0","sctp-a-ingress-dst_start_port":"0.0","sctp-a-egress-dst_start_port":"0.0","fsb1_Internal2_mac":"00:80:37:0E:0B:12","sctp-a-egress_ethertype":"IPv4","vlc_st_service_mode":"in-network-nat","sctp-a-ipv6-egress_ethertype":"IPv4","sctp-a-egress-src_end_port":"65535.0","sctp-b-ipv6-egress_rule_application":"any","sctp-b-egress_action":"pass","sctp-a-ingress-src_subnet_prefix_len":"0.0","sctp-b-ipv6-ingress-src_end_port":"65535.0","sctp-b-name":"epc-sctp-b-ipv4v6-sec-group","fsb2_Internal1_mac":"00:80:37:0E:0D:12","sctp-a-ipv6-ingress-src_start_port":"0.0","sctp-b-ipv6-egress_ethertype":"IPv4","Internal1_net_cidr":"169.253.0.0","sctp-a-egress_dst_subnet_prefix":"0.0.0.0","fsb_flavor_name":"nv.c20r64d1","sctp_rule_protocol":"132","sctp-b-ipv6-ingress_src_subnet_prefix_len":"0","sctp-a-ipv6-ingress_rule_application":"any","ecomp_generated_naming":"true","sctp-a-IPv6_ethertype":"IPv6","vlc2_Internal1_mac":"00:80:37:0E:02:12","vlc_st_virtualization_type":"virtual-machine","sctp-b-ingress-dst_start_port":"0.0","sctp-b-ingress-dst_end_port":"65535.0","sctp-a-ipv6-ingress-src_end_port":"65535.0","sctp-a-display_name":"epc-sctp-a-ipv4v6-sec-group","sctp-b-ingress_rule_application":"any","int2_sec_group_name":"int2-sec-group","vlc_flavor_name":"nd.c16r64d1","sctp-b-ipv6-egress_src_addresses":"local","vlc_st_interface_type_int1":"other1","sctp-b-egress-src_end_port":"65535.0","sctp-a-ipv6-egress-dst_start_port":"0","vlc_st_interface_type_int2":"other2","sctp-a-ipv6-egress_rule_protocol":"any","Internal2_shared":"false","sctp-a-ipv6-egress_dst_subnet_prefix_len":"0","Internal2_rpf":"disable","vlc1_Internal1_mac":"00:80:37:0E:01:12","sctp-b-ipv6-egress_src_end_port":"65535","sctp-a-ipv6-egress_src_addresses":"local","sctp-a-ingress-dst_end_port":"65535.0","sctp-a-ipv6-egress_src_end_port":"65535","Internal1_forwarding_mode":"l2","Internal2_dhcp":"false","sctp-a-dst_subnet_prefix_v6":"::","pxe_image_name":"MME_PXE-Boot_16ACP04_GA.qcow2","vlc_st_interface_type_gtp":"other0","ncb1_Internal1_mac":"00:80:37:0E:09:12","sctp-b-src_subnet_prefix_v6":"::","sctp-a-egress_dst_subnet_prefix_len":"0.0","int1_sec_group_name":"int1-sec-group","Internal1_dhcp":"false","sctp-a-ipv6-egress_dst_end_port":"65535","Internal2_forwarding_mode":"l2","fsb2_Internal2_mac":"00:80:37:0E:0D:12","sctp-b-egress_dst_subnet_prefix":"0.0.0.0","Internal1_net_cidr_len":"17","gpb2_Internal1_mac":"00:80:37:0E:02:22","sctp-b-ingress-src_subnet_prefix_len":"0.0","sctp-a-ingress_dst_addresses":"local","sctp-a-egress_action":"pass","fsb_volume_type_0":"SF-Default-SSD","ncb2_Internal2_mac":"00:80:37:0E:0F:12","vlc_st_interface_type_sctp_a":"left","vlc_st_interface_type_sctp_b":"right","sctp-a-src_subnet_prefix_v6":"::","vlc_st_version":"2","sctp-b-egress_ethertype":"IPv4","sctp-a-ingress_rule_application":"any","gpb1_Internal2_mac":"00:80:37:0E:01:22","instance_ip_family_v6":"v6","sctp-a-ipv6-egress_src_start_port":"0","sctp-b-ingress-src_start_port":"0.0","sctp-b-ingress_dst_addresses":"local","fsb1_Internal1_mac":"00:80:37:0E:0B:12","vlc_st_interface_type_oam":"management","multi_stage_design":"false","oam_sec_group_name":"oam-sec-group","Internal2_net_gateway":"169.255.0.3","sctp-a-ipv6-ingress-dst_end_port":"65535","sctp-b-ipv6-egress-dst_start_port":"0","Internal1_net_gateway":"169.253.0.3","sctp-b-ipv6-egress_rule_protocol":"any","gtp_sec_group_name":"gtp-sec-group","sctp-a-ipv6-egress_dst_subnet_prefix":"0.0.0.0","sctp-b-ipv6-egress_dst_subnet_prefix_len":"0","sctp-a-ipv6-ingress_dst_addresses":"local","sctp-a-egress_rule_protocol":"icmp","sctp-b-ipv6-egress_action":"pass","sctp-a-ipv6-egress_action":"pass","Internal1_shared":"false","sctp-b-ipv6-ingress_rule_protocol":"any","Internal2_net_cidr_len":"17","sctp-a-name":"epc-sctp-a-ipv4v6-sec-group","sctp-a-ingress-src_end_port":"65535.0","sctp-b-ipv6-ingress_src_subnet_prefix":"0.0.0.0","sctp-a-egress-dst_end_port":"65535.0","sctp-a-ingress_action":"pass","sctp-b-egress_rule_protocol":"icmp","sctp-b-ipv6-ingress_action":"pass","vlc_st_service_type":"firewall","sctp-b-ipv6-egress_dst_end_port":"65535","sctp-b-ipv6-ingress-dst_start_port":"0","vlc2_Internal2_mac":"00:80:37:0E:02:12","vlc_st_availability_zone":"true","fsb_volume_image_name_1":"MME_FSB2_16ACP04_GA.qcow2","sctp-b-ingress-src_subnet_prefix":"0.0.0.0","sctp-a-ipv6-ingress_src_subnet_prefix_len":"0","Internal1_allow_transit":"true","gpb_flavor_name":"nv.c20r64d1","availability_zone_max_count":"1","fsb_volume_image_name_0":"MME_FSB1_16ACP04_GA.qcow2","sctp-b-ipv6-ingress_dst_addresses":"local","sctp-b-ipv6-egress_dst_subnet_prefix":"0.0.0.0","sctp-b-ipv6-ingress_ethertype":"IPv4","vlc1_Internal2_mac":"00:80:37:0E:01:12","sctp-a-ingress-src_subnet_prefix":"0.0.0.0","sctp-a-ipv6-ingress_action":"pass","Internal1_rpf":"disable","sctp-b-ingress_ethertype":"IPv4","sctp-b-egress_rule_application":"any","sctp-b-ingress-src_end_port":"65535.0","sctp-a-ipv6-ingress_rule_protocol":"any","sctp-a-ingress-src_start_port":"0.0","sctp-b-egress-dst_end_port":"65535.0"},"type":"VF","modelCustomizationName":"VF_vMee 0","vfModules":{"vf_vmee0..VfVmee..vmme_vlc..module-1":{"uuid":"522159d5-d6e0-4c2a-aa44-5a542a12a830","invariantUuid":"98a7c88b-b577-476a-90e4-e25a5871e02b","customizationUuid":"55b1be94-671a-403e-a26c-667e9c47d091","description":null,"name":"VfVmee..vmme_vlc..module-1","version":"2","modelCustomizationName":"VfVmee..vmme_vlc..module-1","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_vlc"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..vmme_gpb..module-2":{"uuid":"41708296-e443-4c71-953f-d9a010f059e1","invariantUuid":"1cca90b8-3490-495e-87da-3f3e4c57d5b9","customizationUuid":"6add59e0-7fe1-4bc4-af48-f8812422ae7c","description":null,"name":"VfVmee..vmme_gpb..module-2","version":"2","modelCustomizationName":"VfVmee..vmme_gpb..module-2","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_gpb"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{},"volumeGroupAllowed":true}},"volumeGroups":{"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{}}},"vfcInstanceGroups":{}}},"networks":{"ExtVL 0":{"uuid":"ddc3f20c-08b5-40fd-af72-c6d14636b986","invariantUuid":"379f816b-a7aa-422f-be30-17114ff50b7c","description":"ECOMP generic virtual link (network) base type for all other service-level and global networks","name":"ExtVL","version":"37.0","customizationUuid":"94fdd893-4a36-4d70-b16a-ec29c54c184f","inputs":{},"commands":{},"properties":{"network_assignments":"{is_external_network=false, ipv4_subnet_default_assignment={min_subnets_count=1}, ecomp_generated_network_assignment=false, ipv6_subnet_default_assignment={min_subnets_count=1}}","exVL_naming":"{ecomp_generated_naming=true}","network_flows":"{is_network_policy=false, is_bound_to_vpn=false}","network_homing":"{ecomp_selected_instance_node_target=false}"},"type":"VL","modelCustomizationName":"ExtVL 0"}},"collectionResource":{},"configurations":{"Port Mirroring Configuration By Policy 0":{"uuid":"b4398538-e89d-4f13-b33d-ca323434ba50","invariantUuid":"6ef0ca40-f366-4897-951f-abd65d25f6f7","description":"A port mirroring configuration by policy object","name":"Port Mirroring Configuration By Policy","version":"27.0","customizationUuid":"3c3b7b8d-8669-4b3b-8664-61970041fad2","inputs":{},"commands":{},"properties":{},"type":"Configuration","modelCustomizationName":"Port Mirroring Configuration By Policy 0","sourceNodes":[],"collectorNodes":null,"configurationByPolicy":false}},"serviceProxies":{},"vfModules":{"vf_vmee0..VfVmee..vmme_vlc..module-1":{"uuid":"522159d5-d6e0-4c2a-aa44-5a542a12a830","invariantUuid":"98a7c88b-b577-476a-90e4-e25a5871e02b","customizationUuid":"55b1be94-671a-403e-a26c-667e9c47d091","description":null,"name":"VfVmee..vmme_vlc..module-1","version":"2","modelCustomizationName":"VfVmee..vmme_vlc..module-1","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_vlc"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..vmme_gpb..module-2":{"uuid":"41708296-e443-4c71-953f-d9a010f059e1","invariantUuid":"1cca90b8-3490-495e-87da-3f3e4c57d5b9","customizationUuid":"6add59e0-7fe1-4bc4-af48-f8812422ae7c","description":null,"name":"VfVmee..vmme_gpb..module-2","version":"2","modelCustomizationName":"VfVmee..vmme_gpb..module-2","properties":{"minCountInstances":0,"maxCountInstances":null,"initialCount":0,"vfModuleLabel":"vmme_gpb"},"inputs":{},"volumeGroupAllowed":false},"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{},"volumeGroupAllowed":true}},"volumeGroups":{"vf_vmee0..VfVmee..base_vmme..module-0":{"uuid":"a27f5cfc-7f12-4f99-af08-0af9c3885c87","invariantUuid":"a6f9e51a-2b35-416a-ae15-15e58d61f36d","customizationUuid":"f8c040f1-7e51-4a11-aca8-acf256cfd861","description":null,"name":"VfVmee..base_vmme..module-0","version":"2","modelCustomizationName":"VfVmee..base_vmme..module-0","properties":{"minCountInstances":1,"maxCountInstances":1,"initialCount":1,"vfModuleLabel":"base_vmme"},"inputs":{}}},"pnfs":{}}');
+}
+
+
+function generateVNFFormValues() {
+  return JSON.parse('{"globalSubscriberId":"e433710f-9217-458d-a79d-1c7aff376d89","productFamilyId":"vRRaaS","subscriptionServiceType":"VIRTUAL USP","lcpCloudRegionId":"mtn6","tenantId":"1178612d2b394be4834ad77f567c0af2","aicZoneId":"JAG1","projectName":"DFW","owningEntityId":"d61e6f2d-12fa-4cc2-91df-7c244011d6fc","rollbackOnFailure":"true","bulkSize":1,"instanceParams":[{}],"modelInfo":{"modelInvariantId":"e49fbd11-e60c-4a8e-b4bf-30fbe8f4fcc0","modelVersionId":"6e59c5de-f052-46fa-aa7e-2fca9d674c44","modelName":"ComplexService","modelVersion":"1.0"},"isUserProvidedNaming":false,"tenantName":"AIN Web Tool-15-D-SSPtestcustome","aicZoneName":"YUDFJULP-JAG1"}');
+}
diff --git a/vid-webpack-master/src/app/shared/services/defaultDataServiceGenerator/default.data.generator.service.ts b/vid-webpack-master/src/app/shared/services/defaultDataServiceGenerator/default.data.generator.service.ts
new file mode 100644
index 000000000..b1e676fc5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/services/defaultDataServiceGenerator/default.data.generator.service.ts
@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import * as _ from 'lodash';
+import { createVFModuleInstance, updateVNFInstance } from '../../../service.actions';
+import { NgRedux } from '@angular-redux/store';
+import { AppState } from '../../../store/reducers';
+
+@Injectable()
+export class DefaultDataGeneratorService {
+  static controlsFieldsStatus = {};
+
+  constructor(private store: NgRedux<AppState>) { }
+
+  updateReduxOnFirstSet(serviceId: string, formServiceValues: any): void {
+    const serviceHierarchy = this.store.getState().service.serviceHierarchy[serviceId];
+    if (serviceHierarchy && !_.isEmpty(serviceHierarchy.vnfs)) {
+      for (let vnfUUID in serviceHierarchy.vnfs) {
+        for (let vnfModuleUUID in serviceHierarchy.vnfs[vnfUUID].vfModules) {
+          if (serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].properties.minCountInstances > 0) {
+
+            let vfModule = this.generateVFModule(serviceHierarchy, vnfUUID, vnfModuleUUID);
+            this.updateVNFInstanceRedux(
+              serviceHierarchy.vnfs[vnfUUID].modelName,
+              serviceId,
+              serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].properties.initialCount,
+              vfModule,
+              this.generateVNFData(serviceHierarchy, vnfUUID, vnfModuleUUID, formServiceValues),
+              vnfModuleUUID
+            );
+          }
+        }
+      }
+    }
+  }
+
+  updateVNFInstanceRedux(vnfModelName: string, serviceId: string, numberOfVfModules: number, vfModuleData: any, vnfData: any, vfModuleName : string): void {
+    if (numberOfVfModules > 0) {
+      this.store.dispatch(updateVNFInstance(vnfData, vnfData.modelInfo.modelCustomizationName, serviceId));
+      for (let i = 0; i < numberOfVfModules; i++) {
+        this.store.dispatch(createVFModuleInstance(vfModuleData, vfModuleName, serviceId));
+      }
+    }
+  }
+
+
+  generateVFModule(serviceHierarchy: any, vnfUUID: string, vnfModuleUUID: string) {
+    return {
+      'sdncPreReload': null,
+      'modelInfo': {
+        'modelType': 'VFmodule',
+        'modelInvariantId': serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].invariantUuid,
+        'modelVersionId': serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].uuid,
+        'modelName': serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].name,
+        'modelVersion': serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].version,
+        'modelCustomizationId': serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].customizationUuid,
+        'modelCustomizationName': serviceHierarchy.vnfs[vnfUUID].vfModules[vnfModuleUUID].modelCustomizationName
+      },
+      'instanceParams': [
+        {}
+      ]
+    };
+  }
+
+  generateVNFData(serviceHierarchy: any, vnfName: string, vnfUUID: string, formValues: any) {
+    return {
+      'productFamilyId': formValues.productFamilyId,
+      'lcpCloudRegionId': null,
+      'tenantId': null,
+      'lineOfBusiness': null,
+      'platformName': null,
+      'modelInfo': {
+        'modelType': 'VF',
+        'modelInvariantId': serviceHierarchy.vnfs[vnfName].invariantUuid,
+        'modelVersionId': formValues.modelInfo.modelVersionId,
+        'modelName': serviceHierarchy.vnfs[vnfName].name,
+        'modelVersion': serviceHierarchy.vnfs[vnfName].version,
+        'modelCustomizationId': serviceHierarchy.vnfs[vnfName].modelCustomizationId,
+        'modelCustomizationName': serviceHierarchy.vnfs[vnfName].modelCustomizationName
+      },
+      'isUserProvidedNaming': null
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/shared.module.ts b/vid-webpack-master/src/app/shared/shared.module.ts
new file mode 100644
index 000000000..ab6ecaa08
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/shared.module.ts
@@ -0,0 +1,92 @@
+import {NgModule, ModuleWithProviders} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule} from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
+import { ServiceInfoService } from './server/serviceInfo/serviceInfo.service';
+import { PopoverModule } from 'ngx-bootstrap';
+import { AngularSvgIconModule } from 'angular-svg-icon';
+import { SvgDirective } from './directives/svg/svg.directive';
+import { PopoverComponent } from './components/popover/popover.component';
+import { EllipsisComponent } from './components/ellipsis/ellipsis.component';
+import { MessageBoxComponent } from './components/messageBox/messageBox.component';
+import { MessageBoxService } from './components/messageBox/messageBox.service';
+import { SdcUiComponentsModule , SdcUiComponents} from 'sdc-ui/lib/angular';
+import { HttpInterceptorService } from './utils/httpInterceptor/httpInterceptor.service';
+import { FormControlErrorComponent } from './components/formControlError/formControlError.component';
+import { InputPreventionPatternDirective } from './directives/inputPrevention/inputPreventionPattern.directive';
+import { FormGeneralErrorsComponent } from './components/formGeneralErrors/formGeneralErrors.component';
+import { NumbersLettersUnderscoreValidator } from './components/validators/numbersLettersUnderscore/numbersLettersUnderscore.validator';
+import { SpinnerComponent } from './components/spinner/spinner.component';
+import { NoContentMessageAndIconComponent } from './components/no-content-message-and-icon/no-content-message-and-icon.component';
+import { ModelInformationComponent } from './components/model-information/model-information.component';
+import { TooltipModule } from 'ngx-tooltip';
+import {IframeService} from "./utils/iframe.service";
+import {CapitalizeAndFormatPipe} from "./pipes/capitalize/capitalize-and-format.pipe";
+import { DefaultDataGeneratorService } from './services/defaultDataServiceGenerator/default.data.generator.service';
+import {ServiceInfoPipe} from "./pipes/serviceInfo/serviceInfo.pipe";
+import {HealthStatusService} from "./server/healthStatusService/health-status.service";
+import {ConfigurationService} from "../services/configuration.service";
+import {FlagsResolve} from "../services/flags.resolve";
+
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    CommonModule,
+    RouterModule,
+    PopoverModule.forRoot(),
+    AngularSvgIconModule,
+    TooltipModule,
+    SdcUiComponentsModule,
+  ],
+  declarations: [
+    PopoverComponent,
+    SvgDirective,
+    EllipsisComponent,
+    MessageBoxComponent,
+    FormControlErrorComponent,
+    InputPreventionPatternDirective,
+    FormGeneralErrorsComponent,
+    SpinnerComponent,
+    NoContentMessageAndIconComponent,
+    ModelInformationComponent,
+    CapitalizeAndFormatPipe,
+    ServiceInfoPipe,
+  ],
+  exports: [
+    PopoverComponent,
+    SvgDirective,
+    EllipsisComponent,
+    MessageBoxComponent,
+    FormControlErrorComponent,
+    InputPreventionPatternDirective,
+    FormGeneralErrorsComponent,
+    SpinnerComponent,
+    NoContentMessageAndIconComponent,
+    ModelInformationComponent,
+    CapitalizeAndFormatPipe,
+    ServiceInfoPipe,
+  ],
+  providers: [
+    ServiceInfoService,
+    MessageBoxService,
+    SdcUiComponents.ModalService,
+    HttpInterceptorService,
+    IframeService,
+    NumbersLettersUnderscoreValidator,
+    DefaultDataGeneratorService,
+    HealthStatusService,
+    ConfigurationService,
+    FlagsResolve
+  ]
+})
+export class SharedModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: SharedModule,
+      providers: [MessageBoxService]
+    };
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/utils/constants.ts b/vid-webpack-master/src/app/shared/utils/constants.ts
new file mode 100644
index 000000000..c78e12e28
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/utils/constants.ts
@@ -0,0 +1,287 @@
+export module Constants {
+
+  export class Component {
+    public static NAME = 'name';
+    public static SERVICE = 'service';
+    public static A_LA_CARTE = 'a la carte';
+    public static MACRO = 'Macro';
+    public static SUBSCRIBER_NAME = 'subscriberName';
+    public static OLDVERSION = 'oldversion';
+    public static SERVICE_TYPE = 'serviceType';
+  }
+
+  export class Path {
+    public static FORWARD_SLASH = '/';
+
+    public static AAI_GET_FULL_SUBSCRIBERS = '../../aai_get_full_subscribers';
+    public static AAI_REFRESH_FULL_SUBSCRIBERS = 'aai_refresh_full_subscribers';
+    public static AAI_GET_SUBSCRIBERS = '../../aai_get_subscribers';
+
+    public static AAI_GET_TENTANTS = '../../aai_get_tenants';
+    public static AAI_REFRESH_SUBSCRIBERS = 'aai_refresh_subscribers';
+    public static AAI_SUB_DETAILS = 'aai_sub_details';
+    public static AAI_SUB_VIEWEDIT = '../../aai_sub_viewedit';
+
+    public static GET_WORKFLOW = 'change-management/get_vnf_workflow_relation';
+    public static GET_MSO_WORKFLOWS = 'change-management/mso';
+    public static GET_SCHEDULER_CHANGE_MANAGEMENTS = 'change-management/scheduler';
+    public static CANCEL_SCHEDULE_REQUEST = 'change-management/scheduler/schedules';
+    public static ASSIGN = '?r=';
+    public static AAI_GET_SERVICE_INSTANCE_PATH = 'aai_get_service_instance/';
+    public static AAI_GET_SERVICES = '../../aai_get_services';
+    public static AAI_GET_AIC_ZONES = '../../aai_get_aic_zones';
+    public static AAI_GET_AIC_ZONE_FOR_PNF = 'aai_get_aic_zone_for_pnf/@globalCustomerId/@serviceType/@serviceInstanceId';
+    public static AAI_GET_SERVICES_BY_TYPE = 'aai_get_models_by_service_type';
+    public static AAI_GET_TENANTS = '../../aai_get_tenants/';
+    public static AAI_SUB_DETAILS_PATH = '../../aai_sub_details/';
+    public static AAI_GET_VERSION_BY_INVARIANT_ID = 'aai_get_version_by_invariant_id/';
+    public static SEARCH_SERVICE_INSTANCES = 'search_service_instances';
+    public static AAI_GET_VNF_DATA_PATH = 'aai_get_vnf_data/';
+    public static AAI_GET_VNF_BY_CUSTOMERID_AND_SERVICETYPE = 'get_vnf_data_by_globalid_and_service_type/';
+    public static AAI_GET_SERVICES_BY_OWNING_ENTITY_ID = 'aai_get_services_by_owning_entity_id';
+    public static AAI_GET_VNF_INFO = 'aai_get_vnf_information';
+    public static AAI_GET_PNF_INSTANCE = 'aai_get_service_instance_pnfs';
+    public static AAI_GET_VNF_INSTANCES_LIST = 'aai_get_vnf_instances';
+    public static AAI_GET_PNF_INSTANCES_LIST = 'aai_get_pnf_instances';
+    public static AAI_GET_BY_URI = 'aai_get_by_uri/';
+    public static AAI_GET_CONFIGURATION = 'aai_get_configuration/';
+    public static AAI_GET_TEST_ENVIRONMENTS = 'get_operational_environments?operationalEnvironmentType=';
+    public static GET_CATEGORY_PARAMETERS = '../../category_parameter';
+    public static PARAMETER_STANDARDIZATION_FAMILY = 'PARAMETER_STANDARDIZATION';
+    public static TENANT_ISOLATION_FAMILY = 'TENANT_ISOLATION';
+    public static ASDC_GETMODEL_PATH = 'asdc/getModel/';
+    public static CREATE_INSTANCE_PATH = '/models/services/createInstance';
+    public static AAI_GET_PNF_BY_NAME = 'aai_get_pnfs/pnf/';
+
+    public static GET_SYSTEM_PROP_VNF_PROV_STATUS_PATH = 'get_system_prop_vnf_prov_status';
+    public static GET_USER_ID = 'getuserID';
+    public static INSTANTIATE_ROOT_PATH = '#/instantiate?subscriberId=';
+    public static INSTANTIATE_PATH = '/instantiate';
+    public static INVALID_STRING = '/INVALID_STRING/';
+    public static INVALID_STRING_MSO_CREATE_SVC_INSTANCE = 'INVALID_STRING_mso_create_svc_instance';
+    public static MSO = 'mso';
+    public static MSO_CREATE_NW_INSTANCE = 'mso_create_nw_instance';
+    public static MSO_CREATE_NW_INSTANCE_PATH = 'mso_create_nw_instance/';
+    public static MSO_CREATE_SVC_INSTANCE = 'mso_create_svc_instance';
+    public static MSO_CREATE_VNF_INSTANCE = '../../mso/mso_create_vnf_instance/';
+    public static MSO_DELETE_SVC_INSTANCE_PATH = 'mso_delete_svc_instance/';
+    public static MSO_ACTIVATE_INSTANCE = 'mso/mso_activate_service_instance/@serviceInstanceId';
+    public static MSO_DEACTIVATE_INSTANCE = 'mso/mso_deactivate_service_instance/@serviceInstanceId';
+    public static MSO_CREATE_REALATIONSHIP = 'mso_add_relationship';
+    public static MSO_REMOVE_RELATIONSHIP = 'mso_remove_relationship';
+    public static SELECTED_SERVICE_SUB_PATH = '#/instances/subdetails?';
+    public static SELECTED_SERVICE_INSTANCE_SUB_PATH = 'serviceInstanceIdentifier=';
+    public static SELECTED_SUBSCRIBER_SUB_PATH = 'subscriberId=';
+    public static OWNING_ENTITY_SUB_PATH = 'owningEntity=';
+    public static PROJECT_SUB_PATH = 'project=';
+    public static SERVICE_TYPE_LIST_PATH = '#/instances/serviceTypes?serviceTypeList=';
+    public static SERVICE_MODLES_INSTANCES_SUBSCRIBERS_PATH = 'serviceModels.htm#/instances/subscribers';
+    public static SERVICES_DIST_STATUS_PATH = '../../rest/models/services?distributionStatus=';
+    public static SERVICES_PATH = '../../rest/models/services/';
+    public static SERVICETYPE_SUB_PATH = '&serviceType=';
+    public static SERVICEINSTANCEID_SUB_PATH = '&serviceInstanceId=';
+    public static SERVICEMODELS_INSTANCES_SERVICES_PATH = 'serviceModels.htm#/instances/services';
+    public static SERVICEMODELS_MODELS_SERVICES_PATH = 'serviceModels.htm#/models/services';
+    public static SUBDETAILS_SELECTEDSUBSCRIBER = '#subdetails?selectedSubscriber=';
+    public static SUBSCRIBERNAME_SUB_PATH = '&subscriberName=';
+    public static WELCOME_PATH = 'welcome.htm';
+    public static IS_PERMITTED_SUB_PATH = '&isPermitted=';
+    public static SERVICES_JOB_INFO_PATH = '../../asyncInstantiation';
+    public static CONFIGURATION_PATH = '../../get_property/{name}/defaultvalue';
+    public static SERVICES_JOB_AUDIT_PATH = '/auditStatus';
+    public static SERVICES_PROBE_PATH = "../../probe";
+    public static FEATURES_FLAG_PATH ="../../flags";
+
+    // Test Environment Urls =
+    public static OPERATIONAL_ENVIRONMENT_CREATE = 'operationalEnvironment/create';
+    public static OPERATIONAL_ENVIRONMENT_DEACTIVATE = 'operationalEnvironment/deactivate?operationalEnvironment=';
+    public static OPERATIONAL_ENVIRONMENT_ACTIVATE = 'operationalEnvironment/activate?operationalEnvironment=';
+    public static OPERATIONAL_ENVIRONMENT_STATUS = 'operationalEnvironment/requestStatus?requestId=';
+
+  }
+
+  export class Key {
+
+    public static DESCRIPTION = 'description';
+    public static GENERIC_VNF = 'generic-vnf';
+    public static GLOBAL_CUSTOMER_ID = 'global-customer-id';
+    public static GLOBAL_CUST_ID = 'globalCustomerId';
+    public static IN_MAINT = 'in-maint';
+    public static INVENTORY_RESPONSE_ITEMS = 'inventory-response-items';
+    public static INVENTORY_RESPONSE_ITEM = 'inventory-response-item';
+    public static L3_NETWORK = 'l3-network';
+    public static SUB_NET = 'subnet';
+    public static SUBNET_NAME = 'subnet-name';
+    public static SUBNET_ID = 'subnet-id';
+    public static GATEWAY_ADDRESS = 'gateway-address';
+    public static NETWORK_START_ADDRESS = 'network-start-address';
+    public static CIDR_MASK = 'cidr-mask';
+    public static MODEL_CUSTOMIZATION_ID = 'model-customization-id';
+    public static MODEL_INVAR_ID = 'model-invariant-id';
+    public static MODEL_VERSION_ID = 'model-version-id';
+    public static NETWORK_NAME = 'network-name';
+    public static NETWORK_ID = 'network-id';
+    public static NETWORK_TYPE = 'network-type';
+    public static NETWORKS = 'networks';
+    public static OPERATIONAL_STATUS = 'operational-status';
+    public static ORCHESTRATION_STATUS = 'orchestration-status';
+    public static PERCENT_PROGRESS = 'percent-progress';
+    public static PERSONA_MODEL_ID = 'persona-model-id';
+    public static PERSONA_MODEL_VERSION = 'persona-model-version';
+    public static PERSONA_MODEL_CUSTOMIZATION_ID = 'persona-model-customization-id';
+    public static PROV_STATUS = 'prov-status';
+
+    public static RESOURCE_LINK = 'resource-link';
+    public static RESULT_DATA = 'result-data';
+    public static SERVICE_DESCRIPTION = 'service-description';
+    public static SERVICE_ID = 'service-id';
+    public static SERVICE_INSTANCE = 'service-instance';
+    public static SERVICE_INSTANCES = 'service-instances';
+    public static SERVICE_INSTANCE_ID = 'service-instance-id';
+    public static SERVICE_INSTANCE_NAME = 'service-instance-name';
+    public static SERVICE_SUBSCRIPTION = 'service-subscription';
+    public static SERVICE_SUBSCRIPTIONS = 'service-subscriptions';
+    public static SERVICETYPE = 'service-type';
+    public static STATUS_MESSAGE = 'statusMessage';
+    public static SUBNAME = 'subscriber-name';
+    public static IS_PERMITTED = 'is-permitted';
+    public static TIMESTAMP = 'timestamp';
+    public static VF_MODULE = 'vf-module';
+    public static VF_MODULES = 'vfModules';
+    public static VF_MODULE_ID = 'vf-module-id';
+    public static VF_MODULE_NAME = 'vf-module-name';
+    public static VID = 'VID';
+    public static VNF_ID = 'vnf-id';
+    public static VNF_NAME = 'vnf-name';
+    public static VNF_TYPE = 'vnf-type';
+    public static VNFS = 'vnfs';
+    public static AVAILABLEVOLUMEGROUPS = 'availableVolumeGroups';
+    public static VOLUMEGROUPS = 'volumeGroups';
+    public static VOLUME_GROUP = 'volume-group';
+    public static VOLUME_GROUP_ID = 'volume-group-id';
+    public static VOLUME_GROUP_NAME = 'volume-group-name';
+    public static UPLOAD_SUPPLEMENTORY_DATA_FILE = 'uploadSupplementoryDataFile';
+    public static SUPPLEMENTORY_DATA_FILE = 'supplementoryDataFile';
+    public static ZONE_ID = 'zone-id';
+    public static ZONE_NAME = 'zone-name';
+    public static GENERIC_CONFIGURATION = 'configuration';
+    public static CONFIGURATIONS = 'configurations';
+    public static CONFIGURATION = 'configuration';
+    public static CONFIGURATION_NAME = 'configuration-name';
+    public static CONFIGURATION_TYPE = 'configuration-type';
+    public static CONFIGURATION_ID = 'configuration-id';
+    public static PORT = 'l-interface';
+    public static PORT_ID = 'interface-id';
+    public static PORT_NAME = 'interface-name';
+    public static PORT_MIRRORED = 'is-port-mirrored';
+  }
+
+  export class Status {
+    public static ALL = 'ALL';
+    public static COMPLETE = 'Complete';
+    public static DONE = 'Done';
+    public static ERROR = 'Error';
+    public static FAILED = 'Failed';
+    public static FAILED_SERVICE_MODELS_ASDC = 'Failed to get service models from SDC.';
+    public static FETCHING_SERVICE_TYPES = 'Fetching service types list from A&AI';
+    public static FETCHING_SERVICE_CATALOG = 'Fetching service catalog from AAI.  Please wait.';
+    public static FETCHING_SERVICE_CATALOG_ASDC = 'Fetching service catalog from SDC.  Please wait.';
+    public static FETCHING_SUB_DETAILS = 'Fetching subscriber details from A&AI for ';
+    public static FETCHING_SERVICE_INST_DATA = 'Fetching service instance data from A&AI for service-instance-id=';
+    public static FETCHING_SUBSCRIBER_LIST_AAI = 'Fetching subscriber list from A&AI...';
+    public static IN_PROGRESS = 'In Progress';
+    public static IS_SUCCESSFUL = ' isSuccessful = ';
+    public static MSO_FAILURE = 'msoFailure';
+    public static NONE = 'None';
+    public static NOT_FOUND = 'Not Found';
+    public static NO_SERVICE_SUBSCRIPTION_FOUND = 'No Service Subscription Found';
+    public static SUBMITTING_REQUEST = 'Submitting Request';
+    public static SUCCESS_VNF_PROV_STATUS = 'Successfully set the VNF\'s Prov_Status to ';
+    public static UNLOCKED = 'Unlocked';
+    public static AAI_ACTIVE = 'Active';
+    public static AAI_INACTIVE = 'Inactive';
+    public static AAI_CREATED = 'Created';
+    public static AAI_ENABLED = 'Enabled';
+    public static AAI_DISABLED = 'Disabled';
+  }
+
+  export class Error {
+    public static AAI = 'A&AI failure - see log below for details';
+    public static AAI_ERROR = 'A&AI Error';
+    public static AAI_FETCHING_CUST_DATA = 'Failed to fetch customer data from A&AI= Response Code= ';
+    public static FETCHING_SERVICE_TYPES = 'Failed to fetch service types from A&AI= Response Code= ';
+    public static FETCHING_SERVICES = 'Failed to fetch services from A&AI= Response Code= ';
+    public static FETCHING_SERVICE_INSTANCE_DATA = 'Failed to fetch service instance data from A&AI= Response Code= ';
+    public static INVALID_INSTANCE_NAME = 'Invalid instance name= ';
+    // tslint:disable-next-line:max-line-length
+    public static INSTANCE_NAME_VALIDATE = 'The instance name must contain only alphanumeric or \'_-.\' characters; and must start with an alphabetic character';
+    public static INVALID_LIST = 'Invalid list parameter= ';
+    public static INVALID_MAP = 'Invalid map parameter= ';
+    public static LIST_VALIDATE = 'A list parameter value must have the following syntax= \'[<value1>;\.\.\.;<valueN>]\'';
+    // tslint:disable-next-line:max-line-length
+    public static MAP_VALIDATE = 'A map parameter value must have the following syntax= \'{ <entry_key_1>= <entry_value_1>; \.\.\.; <entry_key_n>= <entry_value_n> }\'';
+    public static MAX_POLLS_EXCEEDED = 'Maximum number of poll attempts exceeded';
+    public static MISSING_DATA = 'Missing data';
+    public static MODEL_VERSION_ID_MISSING = 'Error= model-version-id is not populated in A&AI';
+    public static MSO = 'MSO failure - see log below for details';
+    public static NO_MATCHING_MODEL = 'No matching model found matching the persona Model Id = ';
+    public static NO_MATCHING_MODEL_AAI = 'No matching model found matching the A&AI model version ID = ';
+    public static SELECT = 'Please select a subscriber or enter a service instance';
+    public static SERVICE_INST_DNE = 'That service instance does not exist.  Please try again.';
+    public static SYSTEM_FAILURE = 'System failure';
+    public static INVALID_DATA_FORMAT = 'Invalid data format.Please check your file content whether it is not in json or not.';
+    public static MISSING_FILE = 'Please Select JSON File.';
+
+    public static MISSING_VNF_DETAILS = 'Missing required information.\n' +
+      'Please open and fill in the details.\n';
+  }
+
+  export class EventType {
+    public static COMPONENT_STATUS = 'ComponentStatus';
+    public static CREATE_COMPONENT = 'createComponent';
+    public static DELETE_RESUME_COMPONENT = 'deleteResumeComponent';
+  }
+
+  export class ServicePopup {
+    public static TITLE = 'Create a new service instance';
+    public static TOOLTIP_UUID = 'Unique identifier for this service in this version.';
+    public static TOOLTIP_INVARIANT_UUID = 'Unique identifier for this service cross versions.';
+
+  }
+
+  export class Parameter {
+    public static BOOLEAN = "boolean";
+    public static SELECT = "select";
+    public static MULTI_SELECT = "multi_select";
+    public static STRING = "string";
+    public static NUMBER = "number";
+    public static VALID_VALUES = "valid_values";
+    public static EQUAL = "equal";
+    public static LENGTH = "length";
+    public static MAX_LENGTH = "max_length";
+    public static MIN_LENGTH = "min_length";
+    public static IN_RANGE = "in_range";
+    public static CONSTRAINTS = "constraints";
+    public static OPERATOR = "operator";
+    public static CONSTRAINT_VALUES = "constraintValues";
+    public static DEFAULT = "default";
+    public static DESCRIPTION = "description";
+    public static TYPE = "type";
+    public static INTEGER = "integer";
+    public static RANGE = "range";
+    public static LIST = "list";
+    public static MAP = "map";
+    public static REQUIRED = "required";
+    public static GREATER_THAN = "greater_than";
+    public static LESS_THAN = "less_than";
+    public static GREATER_OR_EQUAL = "greater_or_equal";
+    public static LESS_OR_EQUAL = "less_or_equal";
+    public static DISPLAY_NAME = "displayName";
+    public static CHECKBOX ='checkbox';
+    public static FILE ='file';
+  }
+
+  export class AuditInfoModal{
+    public static TITLE = 'Service Instantiation Information';
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/utils/httpInterceptor/httpInterceptor.service.ts b/vid-webpack-master/src/app/shared/utils/httpInterceptor/httpInterceptor.service.ts
new file mode 100644
index 000000000..be9ade080
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/utils/httpInterceptor/httpInterceptor.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpInterceptor,
+  HttpRequest,
+  HttpHandler,
+  HttpEvent, HttpErrorResponse
+} from '@angular/common/http';
+
+import { Observable } from 'rxjs/Observable';
+import { ErrorMessage, ErrorService } from '../../components/error/error.component.service';
+import { SpinnerComponent } from '../../components/spinner/spinner.component';
+
+@Injectable()
+export class HttpInterceptorService implements HttpInterceptor {
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    SpinnerComponent.showSpinner.next(true);
+    return next.handle(request)
+      .catch((err: HttpErrorResponse) => {
+        if (err.status === 500) {
+          const errorMessage: ErrorMessage = new ErrorMessage('Server not available',
+            'It appears that one of the backend servers is not responding.\n Please try later.',
+            500);
+          ErrorService.showErrorWithMessage(errorMessage);
+          return Observable.of(null);
+        }
+        return Observable.throw(err);
+      }).finally(() => {
+        SpinnerComponent.showSpinner.next(false);
+      });
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/utils/iframe.service.ts b/vid-webpack-master/src/app/shared/utils/iframe.service.ts
new file mode 100644
index 000000000..9a6636f4e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/utils/iframe.service.ts
@@ -0,0 +1,19 @@
+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class IframeService {
+
+  addClassOpenModal(elementClassName: string) {
+    var parentBodyElement = parent.document.getElementsByClassName(elementClassName)[0];
+    if (parentBodyElement)  {
+      parentBodyElement.classList.add("modal-open");
+    }
+  }
+
+  removeClassCloseModal(elementClassName: string) {
+    var parentBodyElement = parent.document.getElementsByClassName(elementClassName)[0];
+    if (parentBodyElement)  {
+      parentBodyElement.classList.remove("modal-open");
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/utils/log/log.service.spec.ts b/vid-webpack-master/src/app/shared/utils/log/log.service.spec.ts
new file mode 100644
index 000000000..ea0eb0499
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/utils/log/log.service.spec.ts
@@ -0,0 +1,29 @@
+
+
+import {LogService} from "./log.service";
+
+describe('log service service', () => {
+  let logService : LogService;
+
+  beforeEach(() => {
+    logService = new LogService();
+  });
+
+
+  it('check all ILogger function are defined', ()=>{
+    expect(logService.log).toBeDefined();
+    expect(logService.assert).toBeDefined();
+    expect(logService.error).toBeDefined();
+    expect(logService.group).toBeDefined();
+    expect(logService.groupEnd).toBeDefined();
+    expect(logService.info).toBeDefined();
+    expect(logService.warn).toBeDefined();
+  });
+
+  it('test getPrefixLog function', ()=> {
+    let args = ['message', [1,2,3,4,5]];
+    let result  = LogService.getPrefixLog(args);
+    expect(result).toBeDefined();
+  });
+
+});
diff --git a/vid-webpack-master/src/app/shared/utils/log/log.service.ts b/vid-webpack-master/src/app/shared/utils/log/log.service.ts
new file mode 100644
index 000000000..422fe0134
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/utils/log/log.service.ts
@@ -0,0 +1,58 @@
+import {isDevMode} from "@angular/core";
+declare var console: any;
+
+export interface ILogger {
+  assert(...args: any[]): void;
+  error(...args: any[]): void;
+  group(...args: any[]): void;
+  groupEnd(...args: any[]): void;
+  info(...args: any[]): void;
+  log(...args: any[]): void;
+  warn(...args: any[]): void;
+}
+
+export class LogService implements ILogger {
+
+  isProduction : boolean = !isDevMode();
+  public assert(...args: any[]): void {
+    console.assert(LogService.getPrefixLog(...args));
+  }
+
+  public error(...args: any[]): void {
+    console.error(LogService.getPrefixLog(...args));
+  }
+
+  public group(...args: any[]): void {
+    console.group(LogService.getPrefixLog(...args));
+  }
+
+  public groupEnd(...args: any[]): void {
+    console.groupEnd(LogService.getPrefixLog(...args));
+  }
+
+  public info(...args: any[]): void {
+    console.info(LogService.getPrefixLog(...args));
+  }
+
+  public log(...args: any[]): void {
+    if(!this.isProduction){
+      console.log(LogService.getPrefixLog(...args));
+    }
+  }
+
+  public warn(...args: any[]): void {
+    console.warn(LogService.getPrefixLog(...args));
+  }
+
+  static getPrefixLog(...args :any[]){
+    return {
+      time : new Date(),
+      message : args[0],
+      data : args.length > 0 ? args[1] : ''
+    };
+  }
+}
+
+
+
+