diff --git a/vid-app-common/src/main/webapp/META-INF/MANIFEST.MF b/vid-app-common/src/main/webapp/META-INF/MANIFEST.MF
new file mode 100755
index 0000000..5e94951
--- /dev/null
+++ b/vid-app-common/src/main/webapp/META-INF/MANIFEST.MF
@@ -0,0 +1,3 @@
+Manifest-Version: 1.0
+Class-Path: 
+
diff --git a/vid-app-common/src/main/webapp/WEB-INF/defs/definitions.xml b/vid-app-common/src/main/webapp/WEB-INF/defs/definitions.xml
new file mode 100755
index 0000000..0355f66
--- /dev/null
+++ b/vid-app-common/src/main/webapp/WEB-INF/defs/definitions.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE tiles-definitions PUBLIC
+       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
+       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
+<tiles-definitions>
+      
+	   <definition extends="ebz_template" name="viewlog">   
+       <put-attribute name="body" value="/WEB-INF/jsp/viewlog.jsp"></put-attribute>
+       <put-attribute name="viewName" value="viewlog"></put-attribute>  
+    </definition>   
+    
+    <definition extends="ebz_template" name="serviceModels">   
+       <put-attribute name="body" value="/WEB-INF/jsp/serviceModels.jsp"></put-attribute>
+       <put-attribute name="viewName" value="serviceModels"></put-attribute>  
+    </definition>  
+  
+    
+    <definition extends="ebz_template" name="createnewserviceinstance">   
+       <put-attribute name="body" value="/WEB-INF/jsp/createnewserviceinstance.jsp"></put-attribute>
+       <put-attribute name="viewName" value="createnewserviceinstance"></put-attribute>  
+    </definition>
+    
+     <definition extends="ebz_template" name="welcome">   
+       <put-attribute name="body" value="/WEB-INF/jsp/welcome.jsp"></put-attribute>
+       <put-attribute name="viewName" value="welcome"></put-attribute>  
+    </definition> 
+    
+    <definition extends="ebz_template" name="searchexistingsi">   
+       <put-attribute name="body" value="/WEB-INF/jsp/searchexistingsi.jsp"></put-attribute>
+       <put-attribute name="viewName" value="searchexistingsi"></put-attribute>  
+    </definition>  
+    
+    <definition extends="ebz_template" name="subscriberdetails">   
+       <put-attribute name="body" value="/WEB-INF/jsp/subscriberdetails.jsp"></put-attribute>
+       <put-attribute name="viewName" value="subscriberdetails"></put-attribute>  
+    </definition>  
+    
+    <definition extends="ebz_template" name="testMso">
+       <put-attribute name="body" value="/WEB-INF/jsp/testMso.jsp"></put-attribute>
+       <put-attribute name="viewName" value="testMso"></put-attribute>
+    </definition>
+    <definition extends="ebz_template" name="testViewEdit">
+       <put-attribute name="body" value="/WEB-INF/jsp/testViewEdit.jsp"></put-attribute>
+       <put-attribute name="viewName" value="testViewEdit"></put-attribute>
+    </definition>
+    
+    <definition extends="ebz_template" name="subscriberSearch">
+       <put-attribute name="body" value="/WEB-INF/jsp/subscriberSearch.jsp"></put-attribute>
+       <put-attribute name="viewName" value="subscriberSearch"></put-attribute>
+    </definition>
+    
+
+</tiles-definitions>
diff --git a/vid-app-common/src/main/webapp/WEB-INF/fusion/defs/definitions.xml b/vid-app-common/src/main/webapp/WEB-INF/fusion/defs/definitions.xml
new file mode 100755
index 0000000..3d4c701
--- /dev/null
+++ b/vid-app-common/src/main/webapp/WEB-INF/fusion/defs/definitions.xml
@@ -0,0 +1,279 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE tiles-definitions PUBLIC
+       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
+       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
+
+<!-- This tiles definitions file is fusion/defs/definitions.xml. It maps 
+	tokens used by SDK-core controllers to JSP file paths. To minimize upgrade 
+	effort, this file should not be changed by on-boarding applications. -->
+
+<tiles-definitions>
+
+	<definition name="ebz_template" template="/WEB-INF/fusion/jsp/ebz_template.jsp">
+		<put-attribute name="title" value=""></put-attribute>
+		<put-attribute name="header"
+			value="/WEB-INF/fusion/jsp/ebz/ebz_header.jsp"></put-attribute>
+		<put-attribute name="body" value=""></put-attribute>
+		<put-attribute name="footer"
+			value="/WEB-INF/fusion/jsp/ebz/ebz_footer.jsp"></put-attribute>
+	</definition>
+
+	<definition name="ebz_template_noheader_nofooter"
+		template="/WEB-INF/fusion/jsp/ebz_template_noheader_nofooter.jsp">
+		<put-attribute name="body" value=""></put-attribute>
+	</definition>
+
+	<definition name="ebz_template_report_embedded"
+		template="/WEB-INF/fusion/jsp/ebz_template_report_embedded.jsp">
+		<put-attribute name="body" value=""></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="es_search_demo">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/es_search_demo.jsp"></put-attribute>
+		<put-attribute name="viewName" value="elastic_search"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="es_suggest_demo">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/es_suggest_demo.jsp"></put-attribute>
+		<put-attribute name="viewName" value="elastic_search"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="user_profile">
+		<put-attribute name="body" value="/WEB-INF/jsp/user_profile.jsp"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="profile_search">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/profile_search.jsp"></put-attribute>
+		<put-attribute name="viewName" value="profile_search"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="profile">
+		<put-attribute name="body" value="/WEB-INF/fusion/jsp/profile.jsp"></put-attribute>
+		<put-attribute name="viewName" value="profile"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="menu">
+		<put-attribute name="body" value="/WEB-INF/jsp/menu.jsp"></put-attribute>
+		<put-attribute name="viewName" value="menu"></put-attribute>
+	</definition>
+
+    <definition extends="ebz_template" name="viewlog">   
+       <put-attribute name="body" value="/WEB-INF/jsp/viewlog.jsp"></put-attribute>
+       <put-attribute name="viewName" value="viewlog"></put-attribute>  
+    </definition>  
+    
+    <definition extends="ebz_template" name="serviceModels">
+       <put-attribute name="body" value="/WEB-INF/jsp/serviceModels.jsp"></put-attribute>
+       <put-attribute name="viewName" value="serviceModels"></put-attribute>
+    </definition>  
+    
+    <definition extends="ebz_template" name="createnewserviceinstance">   
+       <put-attribute name="body" value="/WEB-INF/jsp/createnewserviceinstance.jsp"></put-attribute>
+       <put-attribute name="viewName" value="createnewserviceinstance"></put-attribute>  
+    </definition>
+    
+    <definition extends="ebz_template" name="searchexistingsi">   
+       <put-attribute name="body" value="/WEB-INF/jsp/searchexistingsi.jsp"></put-attribute>
+       <put-attribute name="viewName" value="searchexistingsi"></put-attribute>  
+    </definition>  
+    
+    <definition extends="ebz_template" name="subscriberdetails">   
+       <put-attribute name="body" value="/WEB-INF/jsp/subscriberdetails.jsp"></put-attribute>
+       <put-attribute name="viewName" value="subscriberdetails"></put-attribute>  
+    </definition>  
+    
+    <definition extends="ebz_template" name="testMso">
+       <put-attribute name="body" value="/WEB-INF/jsp/testMso.jsp"></put-attribute>
+       <put-attribute name="viewName" value="testMso"></put-attribute>
+    </definition>
+    <definition extends="ebz_template" name="testViewEdit">
+       <put-attribute name="body" value="/WEB-INF/jsp/testViewEdit.jsp"></put-attribute>
+       <put-attribute name="viewName" value="testViewEdit"></put-attribute>
+    </definition>
+    
+    <definition extends="ebz_template" name="subscriberSearch">
+       <put-attribute name="body" value="/WEB-INF/jsp/subscriberSearch.jsp"></put-attribute>
+       <put-attribute name="viewName" value="subscriberSearch"></put-attribute>
+    </definition>
+    
+	<definition extends="ebz_template" name="role_list">
+		<put-attribute name="body" value="/WEB-INF/fusion/jsp/role_list.jsp"></put-attribute>
+		<put-attribute name="viewName" value="role_list"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="role">
+		<put-attribute name="body" value="/WEB-INF/fusion/jsp/role.jsp"></put-attribute>
+		<put-attribute name="viewName" value="role"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="role_function_list">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/role_function_list.jsp"></put-attribute>
+		<put-attribute name="viewName" value="role_function_list"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="post_search">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/post_search.jsp"></put-attribute>
+		<put-attribute name="viewName" value="post_search"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="error">
+		<put-attribute name="body" value="/WEB-INF/jsp/error.jsp"></put-attribute>
+		<put-attribute name="viewName" value="error"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="collaborate_list">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/collaborateList.jsp"></put-attribute>
+	</definition>
+
+	<!-- <definition extends="ebz_template" name="notebook">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/notebook.jsp"></put-attribute>
+	</definition> -->
+	
+	<definition name="notebook"
+		template="app/fusion/notebook-integration/scripts/view-models/notebook.htm" />
+		
+	
+	 <definition name="nbooktest"
+		template="app/fusion/notebook-integration/scripts/view-models/notebook-frame.html"/>
+	
+	
+	<definition extends="ebz_template" name="jcs_admin">
+		<put-attribute name="body" value="/WEB-INF/fusion/jsp/jcs_admin.jsp"></put-attribute>
+		<put-attribute name="viewName" value="jcs_admin"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="usage_list">
+		<put-attribute name="body" value="/WEB-INF/fusion/jsp/usage_list.jsp"></put-attribute>
+		<put-attribute name="viewName" value="usage_list"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="broadcast_list">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/broadcast_list.jsp"></put-attribute>
+		<put-attribute name="viewName" value="broadcast_list"></put-attribute>
+	</definition>
+	<definition extends="ebz_template" name="broadcast">
+		<put-attribute name="body" value="/WEB-INF/fusion/jsp/broadcast.jsp"></put-attribute>
+		<put-attribute name="viewName" value="broadcast"></put-attribute>
+	</definition>
+
+
+	<definition extends="ebz_template" name="chart_wizard">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/chart_wizard.jsp"></put-attribute>
+		<put-attribute name="viewName" value="chart_wizard"></put-attribute>
+	</definition>
+
+	<!-- <definition extends="ebz_template_noheader_nofooter" name="collaboration"> 
+		<put-attribute name="body" value="/WEB-INF/fusion/jsp/webrtc/collaboration.jsp"></put-attribute> 
+		</definition> -->
+	<definition name="collaboration"
+		template="/WEB-INF/fusion/jsp/webrtc/collaboration.jsp" />
+	<definition name="user_profile_list"
+		template="/app/fusion/scripts/view-models/admin-page/profile.html" />
+	<definition name="admin"
+		template="/app/fusion/scripts/view-models/admin-page/admin.html" />
+	<definition name="workflows"
+		template="/app/fusion/scripts/view-models/workflows/workflow-landing.html" />
+	<definition name="report_dashboard"
+		template="/app/fusion/scripts/view-models/reportdashboard-page/src/report-dashboard.html" />
+	
+	<definition name="ds2_sample" template="/app/fusionapp/scripts/DS2-view-models/sampleDS2.html" /> 
+
+
+	<definition extends="ebz_template" name="report_wizard">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/report_wizard.jsp"></put-attribute>
+		<put-attribute name="viewName" value="report_wizard"></put-attribute>
+	</definition>
+	<definition extends="ebz_template" name="wizard_schedule_only">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/wizard_schedule_only.jsp"></put-attribute>
+		<put-attribute name="viewName" value="wizard_schedule_only"></put-attribute>
+	</definition>
+
+	<definition extends="ebz_template" name="report_import">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/report_import.jsp"></put-attribute>
+		<put-attribute name="viewName" value="report_import"></put-attribute>
+	</definition>
+
+
+	<definition extends="ebz_template" name="report">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/report_ebz.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_report_embedded" name="report_embedded">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/report_ebz.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template" name="report_sample">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/report_sample.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="test_run_sql">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/test_run_sql.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="date_start_field_run_sql">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/date_start_field_run_sql.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="date_end_field_run_sql">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/date_end_field_run_sql.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="test_field_run_sql">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/test_field_run_sql.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="default_field_run_sql">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/default_field_run_sql.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="popup_testrun_sql">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/popup_testrun_sql.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="popup_semaphore">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/popup_semaphore.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="popup_import_semaphore">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/popup_import_semaphore.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="popup_table_cols">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/popup_table_cols.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="popup_drill_down_report">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/popup_drill_down_report.jsp"></put-attribute>
+	</definition>
+	<definition extends="ebz_template_noheader_nofooter" name="popup_sql">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/popup_sql.jsp"></put-attribute>
+	</definition>	
+	<definition extends="ebz_template" name="error_page">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/raptor/error_page.jsp"></put-attribute>
+	</definition>
+	<definition name="data_out" template="/WEB-INF/fusion/jsp/data_out.jsp" />
+
+	<definition extends="ebz_template" name="frame_insert">
+		<put-attribute name="body"
+			value="/WEB-INF/fusion/jsp/frame_insert.jsp"></put-attribute>
+	</definition>
+
+	<!-- <definition name="test_field_run_sql" template="/WEB-INF/fusion/raptor/test_field_run_sql.jsp"/> 
+		<definition name="popup_testrun_sql" template="/WEB-INF/fusion/raptor/popup_testrun_sql.jsp"/> -->
+
+</tiles-definitions>
diff --git a/vid-app-common/src/main/webapp/WEB-INF/web.xml b/vid-app-common/src/main/webapp/WEB-INF/web.xml
new file mode 100755
index 0000000..7f0a40e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/WEB-INF/web.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee" 
+         xmlns:web="http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
+         version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee">
+
+	<display-name>vid-common</display-name>
+
+	<!-- The app can function on a HA cluster -->
+	<distributable />
+
+	<session-config>
+		<session-timeout>7</session-timeout>
+		<tracking-mode>COOKIE</tracking-mode>
+	</session-config>
+
+</web-app>
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/7450-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/7450-icon.png
new file mode 100755
index 0000000..52ab2b5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/7450-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/7450-text.png b/vid-app-common/src/main/webapp/app/vid/icons/7450-text.png
new file mode 100755
index 0000000..9b3c332
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/7450-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/7750-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/7750-icon.png
new file mode 100755
index 0000000..9ee5499
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/7750-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/7750-text.png b/vid-app-common/src/main/webapp/app/vid/icons/7750-text.png
new file mode 100755
index 0000000..aeb2dd0
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/7750-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/apn-dns-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/apn-dns-icon.png
new file mode 100755
index 0000000..0ba5c52
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/apn-dns-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/apn-dns-text.png b/vid-app-common/src/main/webapp/app/vid/icons/apn-dns-text.png
new file mode 100755
index 0000000..4663116
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/apn-dns-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/atcf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/atcf-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/atcf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/atcf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/atcf-text.png
new file mode 100755
index 0000000..1566d5b
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/atcf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/atgw-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/atgw-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/atgw-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/atgw-text.png b/vid-app-common/src/main/webapp/app/vid/icons/atgw-text.png
new file mode 100755
index 0000000..f7c50c6
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/atgw-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/bgcf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/bgcf-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/bgcf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/bgcf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/bgcf-text.png
new file mode 100755
index 0000000..b1e0869
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/bgcf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/com-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/com-icon.png
new file mode 100755
index 0000000..59463a9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/com-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/cpm-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/cpm-icon.png
new file mode 100755
index 0000000..9176a0d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/cpm-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/cpm-text.png b/vid-app-common/src/main/webapp/app/vid/icons/cpm-text.png
new file mode 100755
index 0000000..5b35e77
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/cpm-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/default-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/default-icon.png
new file mode 100755
index 0000000..296a6f5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/default-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/dra-epc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/dra-epc-icon.png
new file mode 100755
index 0000000..74bfcfc
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/dra-epc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/dra-epc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/dra-epc-text.png
new file mode 100755
index 0000000..00f2a2e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/dra-epc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/dra-ims-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/dra-ims-icon.png
new file mode 100755
index 0000000..74bfcfc
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/dra-ims-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/dra-ims-text.png b/vid-app-common/src/main/webapp/app/vid/icons/dra-ims-text.png
new file mode 100755
index 0000000..1d54d9a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/dra-ims-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/dslam-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/dslam-icon.png
new file mode 100755
index 0000000..b2a0585
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/dslam-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/dslam-text.png b/vid-app-common/src/main/webapp/app/vid/icons/dslam-text.png
new file mode 100755
index 0000000..1452d2e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/dslam-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/eatf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/eatf-icon.png
new file mode 100755
index 0000000..59463a9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/eatf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/eatf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/eatf-text.png
new file mode 100755
index 0000000..ba9b216
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/eatf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ecscf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/ecscf-icon.png
new file mode 100755
index 0000000..dafbe9e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ecscf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ecscf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/ecscf-text.png
new file mode 100755
index 0000000..ca98a51
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ecscf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/emsc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/emsc-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/emsc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/enb-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/enb-icon.png
new file mode 100755
index 0000000..e03be51
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/enb-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/enb-text.png b/vid-app-common/src/main/webapp/app/vid/icons/enb-text.png
new file mode 100755
index 0000000..9fbf8c2
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/enb-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/enum-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/enum-icon.png
new file mode 100755
index 0000000..daee75a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/enum-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/enum-text.png b/vid-app-common/src/main/webapp/app/vid/icons/enum-text.png
new file mode 100755
index 0000000..f04e3d5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/enum-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/esmlc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/esmlc-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/esmlc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/esmlc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/esmlc-text.png
new file mode 100755
index 0000000..0a29e73
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/esmlc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ettcs-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/ettcs-icon.png
new file mode 100755
index 0000000..6f15bdb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ettcs-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ettcs-text.png b/vid-app-common/src/main/webapp/app/vid/icons/ettcs-text.png
new file mode 100755
index 0000000..6f15bdb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ettcs-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/gmlc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/gmlc-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/gmlc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/gmlc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/gmlc-text.png
new file mode 100755
index 0000000..43cf74d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/gmlc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/hlr-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/hlr-icon.png
new file mode 100755
index 0000000..daee75a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/hlr-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/hlr-text.png b/vid-app-common/src/main/webapp/app/vid/icons/hlr-text.png
new file mode 100755
index 0000000..b276250
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/hlr-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/hss-epc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/hss-epc-icon.png
new file mode 100755
index 0000000..daee75a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/hss-epc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/hss-epc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/hss-epc-text.png
new file mode 100755
index 0000000..9739214
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/hss-epc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/hss-ims-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/hss-ims-icon.png
new file mode 100755
index 0000000..daee75a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/hss-ims-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/hss-ims-text.png b/vid-app-common/src/main/webapp/app/vid/icons/hss-ims-text.png
new file mode 100755
index 0000000..ec69f25
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/hss-ims-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/icscf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/icscf-icon.png
new file mode 100755
index 0000000..dafbe9e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/icscf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/icscf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/icscf-text.png
new file mode 100755
index 0000000..6dbfc81
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/icscf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ipag-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/ipag-icon.png
new file mode 100755
index 0000000..6f15bdb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ipag-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ipag-text.png b/vid-app-common/src/main/webapp/app/vid/icons/ipag-text.png
new file mode 100755
index 0000000..6f15bdb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ipag-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/isbc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/isbc-icon.png
new file mode 100755
index 0000000..dafbe9e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/isbc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/isbc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/isbc-text.png
new file mode 100755
index 0000000..a842e9f
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/isbc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/iwf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/iwf-icon.png
new file mode 100755
index 0000000..a82e73c
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/iwf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/iwf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/iwf-text.png
new file mode 100755
index 0000000..4d0092e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/iwf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/lrf-rdf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/lrf-rdf-icon.png
new file mode 100755
index 0000000..82b5c47
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/lrf-rdf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/lrf-rdf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/lrf-rdf-text.png
new file mode 100755
index 0000000..14daba8
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/lrf-rdf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/lrg-rdf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/lrg-rdf-text.png
new file mode 100755
index 0000000..3f7e224
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/lrg-rdf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mgc8-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/mgc8-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mgc8-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mgc8-text.png b/vid-app-common/src/main/webapp/app/vid/icons/mgc8-text.png
new file mode 100755
index 0000000..2ba933a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mgc8-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mgcf-emsc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/mgcf-emsc-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mgcf-emsc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mgcf-emsc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/mgcf-emsc-text.png
new file mode 100755
index 0000000..74bf8f2
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mgcf-emsc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mgw-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/mgw-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mgw-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mgw-text.png b/vid-app-common/src/main/webapp/app/vid/icons/mgw-text.png
new file mode 100755
index 0000000..a2470f5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mgw-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mind-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/mind-icon.png
new file mode 100755
index 0000000..daee75a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mind-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mind-text.png b/vid-app-common/src/main/webapp/app/vid/icons/mind-text.png
new file mode 100755
index 0000000..84f9d86
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mind-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mme-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/mme-icon.png
new file mode 100755
index 0000000..58ab86c
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mme-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mme-text.png b/vid-app-common/src/main/webapp/app/vid/icons/mme-text.png
new file mode 100755
index 0000000..e524f19
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mme-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mrf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/mrf-icon.png
new file mode 100755
index 0000000..59463a9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mrf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/mrf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/mrf-text.png
new file mode 100755
index 0000000..fa9a61c
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/mrf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/msc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/msc-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/msc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/msn-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/msn-icon.png
new file mode 100755
index 0000000..8386fcb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/msn-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/msn-text.png b/vid-app-common/src/main/webapp/app/vid/icons/msn-text.png
new file mode 100755
index 0000000..954982f
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/msn-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/multi-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/multi-icon.png
new file mode 100755
index 0000000..296a6f5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/multi-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7450-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/n7450-icon.png
new file mode 100755
index 0000000..1ed07db
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7450-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7450-text.png b/vid-app-common/src/main/webapp/app/vid/icons/n7450-text.png
new file mode 100755
index 0000000..9b3c332
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7450-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750a-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750a-icon.png
new file mode 100755
index 0000000..79ba2fc
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750a-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750a-text.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750a-text.png
new file mode 100755
index 0000000..afad34d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750a-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750b-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750b-icon.png
new file mode 100755
index 0000000..bfce0b1
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750b-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750b-text.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750b-text.png
new file mode 100755
index 0000000..afad34d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750b-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750c-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750c-icon.png
new file mode 100755
index 0000000..47870bc
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750c-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750c-text.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750c-text.png
new file mode 100755
index 0000000..afad34d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750c-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750d-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750d-icon.png
new file mode 100755
index 0000000..f407a0f
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750d-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/n7750d-text.png b/vid-app-common/src/main/webapp/app/vid/icons/n7750d-text.png
new file mode 100755
index 0000000..6e25a26
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/n7750d-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/nb-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/nb-icon.png
new file mode 100755
index 0000000..e03be51
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/nb-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/nb-text.png b/vid-app-common/src/main/webapp/app/vid/icons/nb-text.png
new file mode 100755
index 0000000..bbc1357
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/nb-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pas-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/pas-icon.png
new file mode 100755
index 0000000..74bfcfc
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pas-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pas-text.png b/vid-app-common/src/main/webapp/app/vid/icons/pas-text.png
new file mode 100755
index 0000000..48b1e27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pas-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pcef-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/pcef-icon.png
new file mode 100755
index 0000000..17ed4a4
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pcef-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pcef-text.png b/vid-app-common/src/main/webapp/app/vid/icons/pcef-text.png
new file mode 100755
index 0000000..23faa7d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pcef-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pcrf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/pcrf-icon.png
new file mode 100755
index 0000000..17ed4a4
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pcrf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pcrf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/pcrf-text.png
new file mode 100755
index 0000000..e48c305
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pcrf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pcscf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/pcscf-icon.png
new file mode 100755
index 0000000..dafbe9e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pcscf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pcscf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/pcscf-text.png
new file mode 100755
index 0000000..b8d2c3d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pcscf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pgw-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/pgw-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pgw-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pgw-text.png b/vid-app-common/src/main/webapp/app/vid/icons/pgw-text.png
new file mode 100755
index 0000000..d5f86b5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pgw-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/plrf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/plrf-icon.png
new file mode 100755
index 0000000..82b5c47
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/plrf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/plrf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/plrf-text.png
new file mode 100755
index 0000000..72662ef
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/plrf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/psap-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/psap-icon.png
new file mode 100755
index 0000000..2145c5f
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/psap-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pstn-tdm-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/pstn-tdm-icon.png
new file mode 100755
index 0000000..6f15bdb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pstn-tdm-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/pstn-tdm-text.png b/vid-app-common/src/main/webapp/app/vid/icons/pstn-tdm-text.png
new file mode 100755
index 0000000..6f15bdb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/pstn-tdm-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/rg-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/rg-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/rg-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/rg-text.png b/vid-app-common/src/main/webapp/app/vid/icons/rg-text.png
new file mode 100755
index 0000000..ab93224
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/rg-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/rnc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/rnc-icon.png
new file mode 100755
index 0000000..733d3da
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/rnc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/rnc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/rnc-text.png
new file mode 100755
index 0000000..24cab75
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/rnc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sbc-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/sbc-icon.png
new file mode 100755
index 0000000..dafbe9e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sbc-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sbc-text.png b/vid-app-common/src/main/webapp/app/vid/icons/sbc-text.png
new file mode 100755
index 0000000..f71bfba
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sbc-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sccas-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/sccas-icon.png
new file mode 100755
index 0000000..59463a9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sccas-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sccas-text.png b/vid-app-common/src/main/webapp/app/vid/icons/sccas-text.png
new file mode 100755
index 0000000..1ca4e1d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sccas-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/scscf-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/scscf-icon.png
new file mode 100755
index 0000000..dafbe9e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/scscf-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/scscf-text.png b/vid-app-common/src/main/webapp/app/vid/icons/scscf-text.png
new file mode 100755
index 0000000..fd3cab5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/scscf-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sdg-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/sdg-icon.png
new file mode 100755
index 0000000..b4c0288
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sdg-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sdg-text.png b/vid-app-common/src/main/webapp/app/vid/icons/sdg-text.png
new file mode 100755
index 0000000..3881e66
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sdg-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sgsns4-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/sgsns4-icon.png
new file mode 100755
index 0000000..8df1aac
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sgsns4-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sgsns4-text.png b/vid-app-common/src/main/webapp/app/vid/icons/sgsns4-text.png
new file mode 100755
index 0000000..92cbd29
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sgsns4-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sgw-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/sgw-icon.png
new file mode 100755
index 0000000..2904d27
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sgw-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/sgw-text.png b/vid-app-common/src/main/webapp/app/vid/icons/sgw-text.png
new file mode 100755
index 0000000..0801d79
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/sgw-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/siad-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/siad-icon.png
new file mode 100755
index 0000000..b2a0585
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/siad-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/siad-text.png b/vid-app-common/src/main/webapp/app/vid/icons/siad-text.png
new file mode 100755
index 0000000..323c125
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/siad-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ss7-gport-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/ss7-gport-icon.png
new file mode 100755
index 0000000..319bb37
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ss7-gport-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ss7-gport-text.png b/vid-app-common/src/main/webapp/app/vid/icons/ss7-gport-text.png
new file mode 100755
index 0000000..1ba8a76
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ss7-gport-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ss7gport-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/ss7gport-icon.png
new file mode 100755
index 0000000..daee75a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ss7gport-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ss7gport-text.png b/vid-app-common/src/main/webapp/app/vid/icons/ss7gport-text.png
new file mode 100755
index 0000000..8656f9f
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ss7gport-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/switch-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/switch-icon.png
new file mode 100755
index 0000000..6e51271
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/switch-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/tas-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/tas-icon.png
new file mode 100755
index 0000000..59463a9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/tas-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/tas-text.png b/vid-app-common/src/main/webapp/app/vid/icons/tas-text.png
new file mode 100755
index 0000000..7a843e8
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/tas-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/transcoder-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/transcoder-icon.png
new file mode 100755
index 0000000..b2a0585
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/transcoder-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/transcoder-text.png b/vid-app-common/src/main/webapp/app/vid/icons/transcoder-text.png
new file mode 100755
index 0000000..975dd30
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/transcoder-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/ue-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/ue-icon.png
new file mode 100755
index 0000000..e23dfd3
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/ue-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/uephone-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/uephone-icon.png
new file mode 100755
index 0000000..50182db
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/uephone-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/usp-dns-icon.png b/vid-app-common/src/main/webapp/app/vid/icons/usp-dns-icon.png
new file mode 100755
index 0000000..0ba5c52
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/usp-dns-icon.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/icons/usp-dns-text.png b/vid-app-common/src/main/webapp/app/vid/icons/usp-dns-text.png
new file mode 100755
index 0000000..46de0c2
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/icons/usp-dns-text.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/images/asterisk.png b/vid-app-common/src/main/webapp/app/vid/images/asterisk.png
new file mode 100755
index 0000000..2e02da8
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/images/asterisk.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/images/dummy.txt b/vid-app-common/src/main/webapp/app/vid/images/dummy.txt
new file mode 100755
index 0000000..e69de29
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/images/dummy.txt
diff --git a/vid-app-common/src/main/webapp/app/vid/images/error.png b/vid-app-common/src/main/webapp/app/vid/images/error.png
new file mode 100755
index 0000000..4fad985
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/images/error.png
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/images/spinner.gif b/vid-app-common/src/main/webapp/app/vid/images/spinner.gif
new file mode 100755
index 0000000..8ed30cb
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/images/spinner.gif
Binary files differ
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/angular-ui-tree.js b/vid-app-common/src/main/webapp/app/vid/scripts/angular-ui-tree.js
new file mode 100755
index 0000000..6ec9079
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/angular-ui-tree.js
@@ -0,0 +1,1656 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ * @license Angular UI Tree v2.17.0
+ * (c) 2010-2016. https://github.com/angular-ui-tree/angular-ui-tree
+ * License: MIT
+ */
+(function () {
+  'use strict';
+
+  angular.module('ui.tree', [])
+    .constant('treeConfig', {
+      treeClass: 'angular-ui-tree',
+      emptyTreeClass: 'angular-ui-tree-empty',
+      hiddenClass: 'angular-ui-tree-hidden',
+      nodesClass: 'angular-ui-tree-nodes',
+      nodeClass: 'angular-ui-tree-node',
+      handleClass: 'angular-ui-tree-handle',
+      placeholderClass: 'angular-ui-tree-placeholder',
+      dragClass: 'angular-ui-tree-drag',
+      dragThreshold: 3,
+      levelThreshold: 30,
+      defaultCollapsed: false
+    });
+
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+
+    .controller('TreeHandleController', ['$scope', '$element',
+      function ($scope, $element) {
+        this.scope = $scope;
+
+        $scope.$element = $element;
+        $scope.$nodeScope = null;
+        $scope.$type = 'uiTreeHandle';
+
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+    .controller('TreeNodeController', ['$scope', '$element',
+      function ($scope, $element) {
+        this.scope = $scope;
+
+        $scope.$element = $element;
+        $scope.$modelValue = null; // Model value for node;
+        $scope.$parentNodeScope = null; // uiTreeNode Scope of parent node;
+        $scope.$childNodesScope = null; // uiTreeNodes Scope of child nodes.
+        $scope.$parentNodesScope = null; // uiTreeNodes Scope of parent nodes.
+        $scope.$treeScope = null; // uiTree scope
+        $scope.$handleScope = null; // it's handle scope
+        $scope.$type = 'uiTreeNode';
+        $scope.$$allowNodeDrop = false;
+        $scope.collapsed = false;
+        $scope.expandOnHover = false;
+
+        $scope.init = function (controllersArr) {
+          var treeNodesCtrl = controllersArr[0];
+          $scope.$treeScope = controllersArr[1] ? controllersArr[1].scope : null;
+
+          // find the scope of it's parent node
+          $scope.$parentNodeScope = treeNodesCtrl.scope.$nodeScope;
+          // modelValue for current node
+          $scope.$modelValue = treeNodesCtrl.scope.$modelValue[$scope.$index];
+          $scope.$parentNodesScope = treeNodesCtrl.scope;
+          treeNodesCtrl.scope.initSubNode($scope); // init sub nodes
+
+          $element.on('$destroy', function () {
+            treeNodesCtrl.scope.destroySubNode($scope); // destroy sub nodes
+          });
+        };
+
+        $scope.index = function () {
+          return $scope.$parentNodesScope.$modelValue.indexOf($scope.$modelValue);
+        };
+
+        $scope.dragEnabled = function () {
+          return !($scope.$treeScope && !$scope.$treeScope.dragEnabled);
+        };
+
+        $scope.isSibling = function (targetNode) {
+          return $scope.$parentNodesScope == targetNode.$parentNodesScope;
+        };
+
+        $scope.isChild = function (targetNode) {
+          var nodes = $scope.childNodes();
+          return nodes && nodes.indexOf(targetNode) > -1;
+        };
+
+        $scope.prev = function () {
+          var index = $scope.index();
+          if (index > 0) {
+            return $scope.siblings()[index - 1];
+          }
+          return null;
+        };
+
+        $scope.siblings = function () {
+          return $scope.$parentNodesScope.childNodes();
+        };
+
+        $scope.childNodesCount = function () {
+          return $scope.childNodes() ? $scope.childNodes().length : 0;
+        };
+
+        $scope.hasChild = function () {
+          return $scope.childNodesCount() > 0;
+        };
+
+        $scope.childNodes = function () {
+          return $scope.$childNodesScope && $scope.$childNodesScope.$modelValue ?
+            $scope.$childNodesScope.childNodes() :
+            null;
+        };
+
+        $scope.accept = function (sourceNode, destIndex) {
+          return $scope.$childNodesScope &&
+            $scope.$childNodesScope.$modelValue &&
+            $scope.$childNodesScope.accept(sourceNode, destIndex);
+        };
+
+        $scope.remove = function () {
+          return $scope.$parentNodesScope.removeNode($scope);
+        };
+
+        $scope.toggle = function () {
+          $scope.collapsed = !$scope.collapsed;
+          $scope.$treeScope.$callbacks.toggle($scope.collapsed, $scope);
+        };
+
+        $scope.collapse = function () {
+          $scope.collapsed = true;
+        };
+
+        $scope.expand = function () {
+          $scope.collapsed = false;
+        };
+
+        $scope.depth = function () {
+          var parentNode = $scope.$parentNodeScope;
+          if (parentNode) {
+            return parentNode.depth() + 1;
+          }
+          return 1;
+        };
+
+        /**
+        * Returns the depth of the deepest subtree under this node
+        * @param scope a TreeNodesController scope object
+        * @returns Depth of all nodes *beneath* this node. If scope belongs to a leaf node, the
+        *   result is 0 (it has no subtree).
+        */
+        function countSubTreeDepth(scope) {
+          var thisLevelDepth = 0,
+              childNodes = scope.childNodes(),
+              childNode,
+              childDepth,
+              i;
+          if (!childNodes || childNodes.length === 0) {
+            return 0;
+          }
+          for (i = childNodes.length - 1; i >= 0 ; i--) {
+            childNode = childNodes[i],
+            childDepth = 1 + countSubTreeDepth(childNode);
+            thisLevelDepth = Math.max(thisLevelDepth, childDepth);
+          }
+          return thisLevelDepth;
+        }
+
+        $scope.maxSubDepth = function () {
+          return $scope.$childNodesScope ? countSubTreeDepth($scope.$childNodesScope) : 0;
+        };
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+
+    .controller('TreeNodesController', ['$scope', '$element',
+      function ($scope, $element) {
+        this.scope = $scope;
+
+        $scope.$element = $element;
+        $scope.$modelValue = null;
+        $scope.$nodeScope = null; // the scope of node which the nodes belongs to
+        $scope.$treeScope = null;
+        $scope.$type = 'uiTreeNodes';
+        $scope.$nodesMap = {};
+
+        $scope.nodropEnabled = false;
+        $scope.maxDepth = 0;
+        $scope.cloneEnabled = false;
+
+        $scope.initSubNode = function (subNode) {
+          if (!subNode.$modelValue) {
+            return null;
+          }
+          $scope.$nodesMap[subNode.$modelValue.$$hashKey] = subNode;
+        };
+
+        $scope.destroySubNode = function (subNode) {
+          if (!subNode.$modelValue) {
+            return null;
+          }
+          $scope.$nodesMap[subNode.$modelValue.$$hashKey] = null;
+        };
+
+        $scope.accept = function (sourceNode, destIndex) {
+          return $scope.$treeScope.$callbacks.accept(sourceNode, $scope, destIndex);
+        };
+
+        $scope.beforeDrag = function (sourceNode) {
+          return $scope.$treeScope.$callbacks.beforeDrag(sourceNode);
+        };
+
+        $scope.isParent = function (node) {
+          return node.$parentNodesScope == $scope;
+        };
+
+        $scope.hasChild = function () {
+          return $scope.$modelValue.length > 0;
+        };
+
+        $scope.safeApply = function (fn) {
+          var phase = this.$root.$$phase;
+          if (phase == '$apply' || phase == '$digest') {
+            if (fn && (typeof (fn) === 'function')) {
+              fn();
+            }
+          } else {
+            this.$apply(fn);
+          }
+        };
+
+        $scope.removeNode = function (node) {
+          var index = $scope.$modelValue.indexOf(node.$modelValue);
+          if (index > -1) {
+            $scope.safeApply(function () {
+              $scope.$modelValue.splice(index, 1)[0];
+            });
+            return $scope.$treeScope.$callbacks.removed(node);
+          }
+          return null;
+        };
+
+        $scope.insertNode = function (index, nodeData) {
+          $scope.safeApply(function () {
+            $scope.$modelValue.splice(index, 0, nodeData);
+          });
+        };
+
+        $scope.childNodes = function () {
+          var i, nodes = [];
+          if ($scope.$modelValue) {
+            for (i = 0; i < $scope.$modelValue.length; i++) {
+              nodes.push($scope.$nodesMap[$scope.$modelValue[i].$$hashKey]);
+            }
+          }
+          return nodes;
+        };
+
+        $scope.depth = function () {
+          if ($scope.$nodeScope) {
+            return $scope.$nodeScope.depth();
+          }
+          return 0; // if it has no $nodeScope, it's root
+        };
+
+        // check if depth limit has reached
+        $scope.outOfDepth = function (sourceNode) {
+          var maxDepth = $scope.maxDepth || $scope.$treeScope.maxDepth;
+          if (maxDepth > 0) {
+            return $scope.depth() + sourceNode.maxSubDepth() + 1 > maxDepth;
+          }
+          return false;
+        };
+
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+
+    .controller('TreeController', ['$scope', '$element',
+      function ($scope, $element) {
+        this.scope = $scope;
+
+        $scope.$element = $element;
+        $scope.$nodesScope = null; // root nodes
+        $scope.$type = 'uiTree';
+        $scope.$emptyElm = null;
+        $scope.$callbacks = null;
+
+        $scope.dragEnabled = true;
+        $scope.emptyPlaceholderEnabled = true;
+        $scope.maxDepth = 0;
+        $scope.dragDelay = 0;
+        $scope.cloneEnabled = false;
+        $scope.nodropEnabled = false;
+
+        // Check if it's a empty tree
+        $scope.isEmpty = function () {
+          return ($scope.$nodesScope && $scope.$nodesScope.$modelValue
+          && $scope.$nodesScope.$modelValue.length === 0);
+        };
+
+        // add placeholder to empty tree
+        $scope.place = function (placeElm) {
+          $scope.$nodesScope.$element.append(placeElm);
+          $scope.$emptyElm.remove();
+        };
+
+        this.resetEmptyElement = function () {
+          if ((!$scope.$nodesScope.$modelValue || $scope.$nodesScope.$modelValue.length === 0) &&
+            $scope.emptyPlaceholderEnabled) {
+            $element.append($scope.$emptyElm);
+          } else {
+            $scope.$emptyElm.remove();
+          }
+        };
+
+        $scope.resetEmptyElement = this.resetEmptyElement;
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+    .directive('uiTree', ['treeConfig', '$window',
+      function (treeConfig, $window) {
+        return {
+          restrict: 'A',
+          scope: true,
+          controller: 'TreeController',
+          link: function (scope, element, attrs, ctrl) {
+            var callbacks = {
+              accept: null,
+              beforeDrag: null
+            },
+              config = {},
+              tdElm,
+              $trElm,
+              emptyElmColspan;
+
+            angular.extend(config, treeConfig);
+            if (config.treeClass) {
+              element.addClass(config.treeClass);
+            }
+
+            if (element.prop('tagName').toLowerCase() === 'table') {
+              scope.$emptyElm = angular.element($window.document.createElement('tr'));
+              $trElm = element.find('tr');
+              // If we can find a tr, then we can use its td children as the empty element colspan.
+              if ($trElm.length > 0) {
+                emptyElmColspan = angular.element($trElm).children().length;
+              } else {
+                // If not, by setting a huge colspan we make sure it takes full width.
+                emptyElmColspan = 1000000;
+              }
+              tdElm = angular.element($window.document.createElement('td'))
+                .attr('colspan', emptyElmColspan);
+              scope.$emptyElm.append(tdElm);
+            } else {
+              scope.$emptyElm = angular.element($window.document.createElement('div'));
+            }
+
+            if (config.emptyTreeClass) {
+              scope.$emptyElm.addClass(config.emptyTreeClass);
+            }
+
+            scope.$watch('$nodesScope.$modelValue.length', function (val) {
+              if (!angular.isNumber(val)) {
+                return;
+              }
+
+              ctrl.resetEmptyElement();
+            }, true);
+
+            scope.$watch(attrs.dragEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.dragEnabled = val;
+              }
+            });
+
+            scope.$watch(attrs.emptyPlaceholderEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.emptyPlaceholderEnabled = val;
+                ctrl.resetEmptyElement();
+              }
+            });
+
+            scope.$watch(attrs.nodropEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.nodropEnabled = val;
+              }
+            });
+
+            scope.$watch(attrs.cloneEnabled, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.cloneEnabled = val;
+              }
+            });
+
+            scope.$watch(attrs.maxDepth, function (val) {
+              if ((typeof val) == 'number') {
+                scope.maxDepth = val;
+              }
+            });
+
+            scope.$watch(attrs.dragDelay, function (val) {
+              if ((typeof val) == 'number') {
+                scope.dragDelay = val;
+              }
+            });
+
+            /**
+             * Callback checks if the destination node can accept the dragged node.
+             * By default, ui-tree will check that 'data-nodrop-enabled' is not set for the
+             * destination ui-tree-nodes, and that the 'max-depth' attribute will not be exceeded
+             * if it is set on the ui-tree or ui-tree-nodes.
+             * This callback can be overridden, but callers must manually enforce nodrop and max-depth
+             * themselves if they need those to be enforced.
+             * @param sourceNodeScope Scope of the ui-tree-node being dragged
+             * @param destNodesScope Scope of the ui-tree-nodes where the node is hovering
+             * @param destIndex Index in the destination nodes array where the source node will drop
+             * @returns {boolean} True if the node is permitted to be dropped here
+             */
+            callbacks.accept = function (sourceNodeScope, destNodesScope, destIndex) {
+              return !(destNodesScope.nodropEnabled || destNodesScope.$treeScope.nodropEnabled || destNodesScope.outOfDepth(sourceNodeScope));
+            };
+
+            callbacks.beforeDrag = function (sourceNodeScope) {
+              return true;
+            };
+
+            callbacks.expandTimeoutStart = function()
+            {
+
+            };
+
+            callbacks.expandTimeoutCancel = function()
+            {
+
+            };
+
+            callbacks.expandTimeoutEnd = function()
+            {
+
+            };
+
+            callbacks.removed = function (node) {
+
+            };
+
+            /**
+             * Callback is fired when a node is successfully dropped in a new location
+             * @param event
+             */
+            callbacks.dropped = function (event) {
+
+            };
+
+            /**
+             * Callback is fired each time the user starts dragging a node
+             * @param event
+             */
+            callbacks.dragStart = function (event) {
+
+            };
+
+            /**
+             * Callback is fired each time a dragged node is moved with the mouse/touch.
+             * @param event
+             */
+            callbacks.dragMove = function (event) {
+
+            };
+
+            /**
+             * Callback is fired when the tree exits drag mode. If the user dropped a node, the drop may have been
+             * accepted or reverted.
+             * @param event
+             */
+            callbacks.dragStop = function (event) {
+
+            };
+
+            /**
+             * Callback is fired when a user drops a node (but prior to processing the drop action)
+             * beforeDrop can return a Promise, truthy, or falsy (returning nothing is falsy).
+             * If it returns falsy, or a resolve Promise, the node move is accepted
+             * If it returns truthy, or a rejected Promise, the node move is reverted
+             * @param event
+             * @returns {Boolean|Promise} Truthy (or rejected Promise) to cancel node move; falsy (or resolved promise)
+             */
+            callbacks.beforeDrop = function (event) {
+
+            };
+
+            /**
+             * Callback is fired when a user toggles node (but after processing the toggle action)
+             * @param sourceNodeScope
+             * @param collapsed
+             */
+            callbacks.toggle = function (collapsed, sourceNodeScope) {
+
+            };
+
+            scope.$watch(attrs.uiTree, function (newVal, oldVal) {
+              angular.forEach(newVal, function (value, key) {
+                if (callbacks[key]) {
+                  if (typeof value === 'function') {
+                    callbacks[key] = value;
+                  }
+                }
+              });
+
+              scope.$callbacks = callbacks;
+            }, true);
+
+
+          }
+        };
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+    .directive('uiTreeHandle', ['treeConfig',
+      function (treeConfig) {
+        return {
+          require: '^uiTreeNode',
+          restrict: 'A',
+          scope: true,
+          controller: 'TreeHandleController',
+          link: function (scope, element, attrs, treeNodeCtrl) {
+            var config = {};
+            angular.extend(config, treeConfig);
+            if (config.handleClass) {
+              element.addClass(config.handleClass);
+            }
+            // connect with the tree node.
+            if (scope != treeNodeCtrl.scope) {
+              scope.$nodeScope = treeNodeCtrl.scope;
+              treeNodeCtrl.scope.$handleScope = scope;
+            }
+          }
+        };
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+
+    .directive('uiTreeNode', ['treeConfig', 'UiTreeHelper', '$window', '$document', '$timeout', '$q',
+      function (treeConfig, UiTreeHelper, $window, $document, $timeout, $q) {
+        return {
+          require: ['^uiTreeNodes', '^uiTree'],
+          restrict: 'A',
+          controller: 'TreeNodeController',
+          link: function (scope, element, attrs, controllersArr) {
+            // todo startPos is unused
+            var config = {},
+              hasTouch = 'ontouchstart' in window,
+              startPos, firstMoving, dragInfo, pos,
+              placeElm, hiddenPlaceElm, dragElm,
+              treeScope = null,
+              elements, // As a parameter for callbacks
+              dragDelaying = true,
+              dragStarted = false,
+              dragTimer = null,
+              body = document.body,
+              html = document.documentElement,
+              document_height,
+              document_width,
+              dragStart,
+              tagName,
+              dragMove,
+              dragEnd,
+              dragStartEvent,
+              dragMoveEvent,
+              dragEndEvent,
+              dragCancelEvent,
+              dragDelay,
+              bindDragStartEvents,
+              bindDragMoveEvents,
+              unbindDragMoveEvents,
+              keydownHandler,
+              outOfBounds,
+              isHandleChild,
+              el;
+
+            angular.extend(config, treeConfig);
+            if (config.nodeClass) {
+              element.addClass(config.nodeClass);
+            }
+            scope.init(controllersArr);
+
+            scope.collapsed = !!UiTreeHelper.getNodeAttribute(scope, 'collapsed') || treeConfig.defaultCollapsed;
+			scope.expandOnHover = !!UiTreeHelper.getNodeAttribute(scope, 'expandOnHover');
+            scope.sourceOnly = scope.nodropEnabled || scope.$treeScope.nodropEnabled;
+
+            scope.$watch(attrs.collapsed, function (val) {
+              if ((typeof val) == 'boolean') {
+                scope.collapsed = val;
+              }
+            });
+
+            scope.$watch('collapsed', function (val) {
+              UiTreeHelper.setNodeAttribute(scope, 'collapsed', val);
+              attrs.$set('collapsed', val);
+            });
+
+            scope.$watch(attrs.expandOnHover, function(val) {
+              if ((typeof val) == 'boolean') {
+                scope.expandOnHover = val;
+              }
+            });
+
+			scope.$watch('expandOnHover', function (val) {
+              UiTreeHelper.setNodeAttribute(scope, 'expandOnHover', val);
+              attrs.$set('expandOnHover', val);
+            });
+
+            scope.$on('angular-ui-tree:collapse-all', function () {
+              scope.collapsed = true;
+            });
+
+            scope.$on('angular-ui-tree:expand-all', function () {
+              scope.collapsed = false;
+            });
+
+            /**
+             * Called when the user has grabbed a node and started dragging it
+             * @param e
+             */
+            dragStart = function (e) {
+              // disable right click
+              if (!hasTouch && (e.button === 2 || e.which === 3)) {
+                return;
+              }
+
+              // event has already fired in other scope
+              if (e.uiTreeDragging || (e.originalEvent && e.originalEvent.uiTreeDragging)) {
+                return;
+              }
+
+              // the node being dragged
+              var eventElm = angular.element(e.target),
+                isHandleChild, cloneElm, eventElmTagName, tagName,
+                eventObj, tdElm, hStyle,
+                isTreeNode,
+                isTreeNodeHandle;
+
+              // if the target element is a child element of a ui-tree-handle,
+              // use the containing handle element as target element
+              isHandleChild = UiTreeHelper.treeNodeHandlerContainerOfElement(eventElm);
+              if (isHandleChild) {
+                eventElm = angular.element(isHandleChild);
+              }
+
+              cloneElm = element.clone();
+              isTreeNode = UiTreeHelper.elementIsTreeNode(eventElm);
+              isTreeNodeHandle = UiTreeHelper.elementIsTreeNodeHandle(eventElm);
+
+              if (!isTreeNode && !isTreeNodeHandle) {
+                return;
+              }
+
+              if (isTreeNode && UiTreeHelper.elementContainsTreeNodeHandler(eventElm)) {
+                return;
+              }
+
+              eventElmTagName = eventElm.prop('tagName').toLowerCase();
+              if (eventElmTagName == 'input' ||
+                eventElmTagName == 'textarea' ||
+                eventElmTagName == 'button' ||
+                eventElmTagName == 'select') { // if it's a input or button, ignore it
+                return;
+              }
+
+              // check if it or it's parents has a 'data-nodrag' attribute
+              el = angular.element(e.target);
+              while (el && el[0] && el[0] !== element) {
+                if (UiTreeHelper.nodrag(el)) { // if the node mark as `nodrag`, DONOT drag it.
+                  return;
+                }
+                el = el.parent();
+              }
+
+              if (!scope.beforeDrag(scope)) {
+                return;
+              }
+
+              e.uiTreeDragging = true; // stop event bubbling
+              if (e.originalEvent) {
+                e.originalEvent.uiTreeDragging = true;
+              }
+              e.preventDefault();
+              eventObj = UiTreeHelper.eventObj(e);
+
+              firstMoving = true;
+              dragInfo = UiTreeHelper.dragInfo(scope);
+
+              tagName = element.prop('tagName');
+
+              if (tagName.toLowerCase() === 'tr') {
+                placeElm = angular.element($window.document.createElement(tagName));
+                tdElm = angular.element($window.document.createElement('td'))
+                  .addClass(config.placeholderClass)
+                  .attr('colspan', element[0].children.length);
+                placeElm.append(tdElm);
+              } else {
+                placeElm = angular.element($window.document.createElement(tagName))
+                  .addClass(config.placeholderClass);
+              }
+              hiddenPlaceElm = angular.element($window.document.createElement(tagName));
+              if (config.hiddenClass) {
+                hiddenPlaceElm.addClass(config.hiddenClass);
+              }
+
+              pos = UiTreeHelper.positionStarted(eventObj, element);
+              placeElm.css('height', UiTreeHelper.height(element) + 'px');
+
+              dragElm = angular.element($window.document.createElement(scope.$parentNodesScope.$element.prop('tagName')))
+                .addClass(scope.$parentNodesScope.$element.attr('class')).addClass(config.dragClass);
+              dragElm.css('width', UiTreeHelper.width(element) + 'px');
+              dragElm.css('z-index', 9999);
+
+              // Prevents cursor to change rapidly in Opera 12.16 and IE when dragging an element
+              hStyle = (element[0].querySelector('.angular-ui-tree-handle') || element[0]).currentStyle;
+              if (hStyle) {
+                document.body.setAttribute('ui-tree-cursor', $document.find('body').css('cursor') || '');
+                $document.find('body').css({'cursor': hStyle.cursor + '!important'});
+              }
+
+              if (scope.sourceOnly) {
+                placeElm.css('display', 'none');
+              }
+              element.after(placeElm);
+              element.after(hiddenPlaceElm);
+              if (dragInfo.isClone() && scope.sourceOnly) {
+                dragElm.append(cloneElm);
+              } else {
+                dragElm.append(element);
+              }
+
+              $document.find('body').append(dragElm);
+
+              dragElm.css({
+                'left': eventObj.pageX - pos.offsetX + 'px',
+                'top': eventObj.pageY - pos.offsetY + 'px'
+              });
+              elements = {
+                placeholder: placeElm,
+                dragging: dragElm
+              };
+
+              bindDragMoveEvents();
+              // Fire dragStart callback
+              scope.$apply(function () {
+                scope.$treeScope.$callbacks.dragStart(dragInfo.eventArgs(elements, pos));
+              });
+
+              document_height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+              document_width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
+            };
+
+            dragMove = function (e) {
+              var eventObj = UiTreeHelper.eventObj(e),
+                prev,
+                next,
+                leftElmPos,
+                topElmPos,
+                top_scroll,
+                bottom_scroll,
+                target,
+                decrease,
+                targetX,
+                targetY,
+                displayElm,
+                targetNode,
+                targetElm,
+                isEmpty,
+                scrollDownBy,
+                targetOffset,
+                targetBefore;
+
+              if (dragElm) {
+                e.preventDefault();
+
+                if ($window.getSelection) {
+                  $window.getSelection().removeAllRanges();
+                } else if ($window.document.selection) {
+                  $window.document.selection.empty();
+                }
+
+                leftElmPos = eventObj.pageX - pos.offsetX;
+                topElmPos = eventObj.pageY - pos.offsetY;
+
+                //dragElm can't leave the screen on the left
+                if (leftElmPos < 0) {
+                  leftElmPos = 0;
+                }
+
+                //dragElm can't leave the screen on the top
+                if (topElmPos < 0) {
+                  topElmPos = 0;
+                }
+
+                //dragElm can't leave the screen on the bottom
+                if ((topElmPos + 10) > document_height) {
+                  topElmPos = document_height - 10;
+                }
+
+                //dragElm can't leave the screen on the right
+                if ((leftElmPos + 10) > document_width) {
+                  leftElmPos = document_width - 10;
+                }
+
+                dragElm.css({
+                  'left': leftElmPos + 'px',
+                  'top': topElmPos + 'px'
+                });
+
+                top_scroll = window.pageYOffset || $window.document.documentElement.scrollTop;
+                bottom_scroll = top_scroll + (window.innerHeight || $window.document.clientHeight || $window.document.clientHeight);
+
+                // to scroll down if cursor y-position is greater than the bottom position the vertical scroll
+                if (bottom_scroll < eventObj.pageY && bottom_scroll < document_height) {
+                  scrollDownBy = Math.min(document_height - bottom_scroll, 10);
+                  window.scrollBy(0, scrollDownBy);
+                }
+
+                // to scroll top if cursor y-position is less than the top position the vertical scroll
+                if (top_scroll > eventObj.pageY) {
+                  window.scrollBy(0, -10);
+                }
+
+                UiTreeHelper.positionMoved(e, pos, firstMoving);
+                if (firstMoving) {
+                  firstMoving = false;
+                  return;
+                }
+
+                // check if add it as a child node first
+                // todo decrease is unused
+                decrease = (UiTreeHelper.offset(dragElm).left - UiTreeHelper.offset(placeElm).left) >= config.threshold;
+
+                targetX = eventObj.pageX - ($window.pageXOffset ||
+                  $window.document.body.scrollLeft ||
+                  $window.document.documentElement.scrollLeft) -
+                  ($window.document.documentElement.clientLeft || 0);
+
+                targetY = eventObj.pageY - ($window.pageYOffset ||
+                  $window.document.body.scrollTop ||
+                  $window.document.documentElement.scrollTop) -
+                  ($window.document.documentElement.clientTop || 0);
+
+                // Select the drag target. Because IE does not support CSS 'pointer-events: none', it will always
+                // pick the drag element itself as the target. To prevent this, we hide the drag element while
+                // selecting the target.
+                if (angular.isFunction(dragElm.hide)) {
+                  dragElm.hide();
+                } else {
+                  displayElm = dragElm[0].style.display;
+                  dragElm[0].style.display = 'none';
+                }
+
+                // when using elementFromPoint() inside an iframe, you have to call
+                // elementFromPoint() twice to make sure IE8 returns the correct value
+                $window.document.elementFromPoint(targetX, targetY);
+
+                targetElm = angular.element($window.document.elementFromPoint(targetX, targetY));
+
+                // if the target element is a child element of a ui-tree-handle,
+                // use the containing handle element as target element
+                isHandleChild = UiTreeHelper.treeNodeHandlerContainerOfElement(targetElm);
+                if (isHandleChild) {
+                  targetElm = angular.element(isHandleChild);
+                }
+
+                if (angular.isFunction(dragElm.show)) {
+                  dragElm.show();
+                } else {
+                  dragElm[0].style.display = displayElm;
+                }
+
+                outOfBounds = !UiTreeHelper.elementIsTreeNodeHandle(targetElm) &&
+                              !UiTreeHelper.elementIsTreeNode(targetElm) &&
+                              !UiTreeHelper.elementIsTreeNodes(targetElm) &&
+                              !UiTreeHelper.elementIsTree(targetElm) &&
+                              !UiTreeHelper.elementIsPlaceholder(targetElm);
+
+                // Detect out of bounds condition, update drop target display, and prevent drop
+                if (outOfBounds) {
+
+                  // Remove the placeholder
+                  placeElm.remove();
+
+                  // If the target was an empty tree, replace the empty element placeholder
+                  if (treeScope) {
+                    treeScope.resetEmptyElement();
+                    treeScope = null;
+                  }
+                }
+
+                // move horizontal
+                if (pos.dirAx && pos.distAxX >= config.levelThreshold) {
+                  pos.distAxX = 0;
+
+                  // increase horizontal level if previous sibling exists and is not collapsed
+                  if (pos.distX > 0) {
+                    prev = dragInfo.prev();
+                    if (prev && !prev.collapsed
+                      && prev.accept(scope, prev.childNodesCount())) {
+                      prev.$childNodesScope.$element.append(placeElm);
+                      dragInfo.moveTo(prev.$childNodesScope, prev.childNodes(), prev.childNodesCount());
+                    }
+                  }
+
+                  // decrease horizontal level
+                  if (pos.distX < 0) {
+                    // we can't decrease a level if an item preceeds the current one
+                    next = dragInfo.next();
+                    if (!next) {
+                      target = dragInfo.parentNode(); // As a sibling of it's parent node
+                      if (target
+                        && target.$parentNodesScope.accept(scope, target.index() + 1)) {
+                        target.$element.after(placeElm);
+                        dragInfo.moveTo(target.$parentNodesScope, target.siblings(), target.index() + 1);
+                      }
+                    }
+                  }
+                }
+
+                // move vertical
+                if (!pos.dirAx) {
+                  if (UiTreeHelper.elementIsTree(targetElm)) {
+                    targetNode = targetElm.controller('uiTree').scope;
+                  } else if (UiTreeHelper.elementIsTreeNodeHandle(targetElm)) {
+                    targetNode = targetElm.controller('uiTreeHandle').scope;
+                  } else if (UiTreeHelper.elementIsTreeNode(targetElm)) {
+                    targetNode = targetElm.controller('uiTreeNode').scope;
+                  } else if (UiTreeHelper.elementIsTreeNodes(targetElm)) {
+                    targetNode = targetElm.controller('uiTreeNodes').scope;
+                  } else if (UiTreeHelper.elementIsPlaceholder(targetElm)) {
+                    targetNode = targetElm.controller('uiTreeNodes').scope;
+                  } else if (targetElm.controller('uiTreeNode')) {
+                    // is a child element of a node
+                    targetNode = targetElm.controller('uiTreeNode').scope;
+                  }
+
+                  // check it's new position
+                  isEmpty = false;
+                  if (!targetNode) {
+                    return;
+                  }
+
+                  // Show the placeholder if it was hidden for nodrop-enabled and this is a new tree
+                  if (targetNode.$treeScope && !targetNode.$parent.nodropEnabled && !targetNode.$treeScope.nodropEnabled) {
+                    placeElm.css('display', '');
+                  }
+
+                  if (targetNode.$type == 'uiTree' && targetNode.dragEnabled) {
+                    isEmpty = targetNode.isEmpty(); // Check if it's empty tree
+                  }
+
+                  if (targetNode.$type == 'uiTreeHandle') {
+                    targetNode = targetNode.$nodeScope;
+                  }
+
+                  if (targetNode.$type != 'uiTreeNode'
+                    && !isEmpty) { // Check if it is a uiTreeNode or it's an empty tree
+                    return;
+                  }
+
+                  // if placeholder move from empty tree, reset it.
+                  if (treeScope && placeElm.parent()[0] != treeScope.$element[0]) {
+                    treeScope.resetEmptyElement();
+                    treeScope = null;
+                  }
+
+                  if (isEmpty) { // it's an empty tree
+                    treeScope = targetNode;
+                    if (targetNode.$nodesScope.accept(scope, 0)) {
+                      targetNode.place(placeElm);
+                      dragInfo.moveTo(targetNode.$nodesScope, targetNode.$nodesScope.childNodes(), 0);
+                    }
+                  } else if (targetNode.dragEnabled()) { // drag enabled
+                      if (angular.isDefined(scope.expandTimeoutOn) && scope.expandTimeoutOn !== targetNode.id) {
+                        $timeout.cancel(scope.expandTimeout);
+                        delete scope.expandTimeout;
+                        delete scope.expandTimeoutOn;
+
+                        scope.$callbacks.expandTimeoutCancel();
+                      }
+
+                      if (targetNode.collapsed) {
+                        if (scope.expandOnHover === true || (angular.isNumber(scope.expandOnHover) && scope.expandOnHover === 0)) {
+                          targetNode.collapsed = false;
+                        } else if (scope.expandOnHover !== false && angular.isNumber(scope.expandOnHover) && scope.expandOnHover > 0) {
+                          if (angular.isUndefined(scope.expandTimeoutOn)) {
+                            scope.expandTimeoutOn = targetNode.$id;
+
+                            scope.$callbacks.expandTimeoutStart();
+                            scope.expandTimeout = $timeout(function()
+                            {
+                              scope.$callbacks.expandTimeoutEnd();
+                              targetNode.collapsed = false;
+                            }, scope.expandOnHover);
+                          }
+                        }
+                      }
+
+                    targetElm = targetNode.$element; // Get the element of ui-tree-node
+                    targetOffset = UiTreeHelper.offset(targetElm);
+                    targetBefore = targetNode.horizontal ? eventObj.pageX < (targetOffset.left + UiTreeHelper.width(targetElm) / 2)
+                      : eventObj.pageY < (targetOffset.top + UiTreeHelper.height(targetElm) / 2);
+
+                    if (targetNode.$parentNodesScope.accept(scope, targetNode.index())) {
+                      if (targetBefore) {
+                        targetElm[0].parentNode.insertBefore(placeElm[0], targetElm[0]);
+                        dragInfo.moveTo(targetNode.$parentNodesScope, targetNode.siblings(), targetNode.index());
+                      } else {
+                        targetElm.after(placeElm);
+                        dragInfo.moveTo(targetNode.$parentNodesScope, targetNode.siblings(), targetNode.index() + 1);
+                      }
+                    } else if (!targetBefore && targetNode.accept(scope, targetNode.childNodesCount())) { // we have to check if it can add the dragging node as a child
+                      targetNode.$childNodesScope.$element.append(placeElm);
+                      dragInfo.moveTo(targetNode.$childNodesScope, targetNode.childNodes(), targetNode.childNodesCount());
+                    } else {
+                      outOfBounds = true;
+                    }
+                  }
+                }
+
+                scope.$apply(function () {
+                  scope.$treeScope.$callbacks.dragMove(dragInfo.eventArgs(elements, pos));
+                });
+              }
+            };
+
+            dragEnd = function (e) {
+              var dragEventArgs = dragInfo.eventArgs(elements, pos);
+              e.preventDefault();
+              unbindDragMoveEvents();
+
+              $timeout.cancel(scope.expandTimeout);
+
+              scope.$treeScope.$apply(function () {
+                $q.when(scope.$treeScope.$callbacks.beforeDrop(dragEventArgs))
+                    // promise resolved (or callback didn't return false)
+                    .then(function (allowDrop) {
+                      if (allowDrop !== false && scope.$$allowNodeDrop && !outOfBounds) { // node drop accepted)
+                        dragInfo.apply();
+                        // fire the dropped callback only if the move was successful
+                        scope.$treeScope.$callbacks.dropped(dragEventArgs);
+                      } else { // drop canceled - revert the node to its original position
+                        bindDragStartEvents();
+                      }
+                    })
+                    // promise rejected - revert the node to its original position
+                    .catch(function () {
+                      bindDragStartEvents();
+                    })
+                    .finally(function () {
+                      hiddenPlaceElm.replaceWith(scope.$element);
+                      placeElm.remove();
+
+                      if (dragElm) { // drag element is attached to the mouse pointer
+                        dragElm.remove();
+                        dragElm = null;
+                      }
+                      scope.$treeScope.$callbacks.dragStop(dragEventArgs);
+                      scope.$$allowNodeDrop = false;
+                      dragInfo = null;
+
+                      // Restore cursor in Opera 12.16 and IE
+                      var oldCur = document.body.getAttribute('ui-tree-cursor');
+                      if (oldCur !== null) {
+                        $document.find('body').css({'cursor': oldCur});
+                        document.body.removeAttribute('ui-tree-cursor');
+                      }
+                    });
+              });
+            };
+
+            dragStartEvent = function (e) {
+              if (scope.dragEnabled()) {
+                dragStart(e);
+              }
+            };
+
+            dragMoveEvent = function (e) {
+              dragMove(e);
+            };
+
+            dragEndEvent = function (e) {
+              scope.$$allowNodeDrop = true;
+              dragEnd(e);
+            };
+
+            dragCancelEvent = function (e) {
+              dragEnd(e);
+            };
+
+            dragDelay = (function () {
+              var to;
+
+              return {
+                exec: function (fn, ms) {
+                  if (!ms) {
+                    ms = 0;
+                  }
+                  this.cancel();
+                  to = $timeout(fn, ms);
+                },
+                cancel: function () {
+                  $timeout.cancel(to);
+                }
+              };
+            })();
+
+            /**
+             * Binds the mouse/touch events to enable drag start for this node
+             */
+            bindDragStartEvents = function () {
+              element.bind('touchstart mousedown', function (e) {
+                dragDelay.exec(function () {
+                  dragStartEvent(e);
+                }, scope.dragDelay || 0);
+              });
+              element.bind('touchend touchcancel mouseup', function () {
+                dragDelay.cancel();
+              });
+            };
+            bindDragStartEvents();
+
+            /**
+             * Binds mouse/touch events that handle moving/dropping this dragged node
+             */
+            bindDragMoveEvents = function () {
+              angular.element($document).bind('touchend', dragEndEvent);
+              angular.element($document).bind('touchcancel', dragEndEvent);
+              angular.element($document).bind('touchmove', dragMoveEvent);
+              angular.element($document).bind('mouseup', dragEndEvent);
+              angular.element($document).bind('mousemove', dragMoveEvent);
+              angular.element($document).bind('mouseleave', dragCancelEvent);
+            };
+
+            /**
+             * Unbinds mouse/touch events that handle moving/dropping this dragged node
+             */
+            unbindDragMoveEvents = function () {
+              angular.element($document).unbind('touchend', dragEndEvent);
+              angular.element($document).unbind('touchcancel', dragEndEvent);
+              angular.element($document).unbind('touchmove', dragMoveEvent);
+              angular.element($document).unbind('mouseup', dragEndEvent);
+              angular.element($document).unbind('mousemove', dragMoveEvent);
+              angular.element($document).unbind('mouseleave', dragCancelEvent);
+            };
+
+            keydownHandler = function (e) {
+              if (e.keyCode == 27) {
+                scope.$$allowNodeDrop = false;
+                dragEnd(e);
+              }
+            };
+
+            angular.element($window.document).bind('keydown', keydownHandler);
+
+            //unbind handler that retains scope
+            scope.$on('$destroy', function () {
+              angular.element($window.document).unbind('keydown', keydownHandler);
+            });
+          }
+        };
+      }
+    ]);
+
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+    .directive('uiTreeNodes', ['treeConfig', '$window',
+      function (treeConfig) {
+        return {
+          require: ['ngModel', '?^uiTreeNode', '^uiTree'],
+          restrict: 'A',
+          scope: true,
+          controller: 'TreeNodesController',
+          link: function (scope, element, attrs, controllersArr) {
+
+            var config = {},
+                ngModel = controllersArr[0],
+                treeNodeCtrl = controllersArr[1],
+                treeCtrl = controllersArr[2];
+
+            angular.extend(config, treeConfig);
+            if (config.nodesClass) {
+              element.addClass(config.nodesClass);
+            }
+
+            if (treeNodeCtrl) {
+              treeNodeCtrl.scope.$childNodesScope = scope;
+              scope.$nodeScope = treeNodeCtrl.scope;
+            } else {
+              // find the root nodes if there is no parent node and have a parent ui-tree
+              treeCtrl.scope.$nodesScope = scope;
+            }
+            scope.$treeScope = treeCtrl.scope;
+
+            if (ngModel) {
+              ngModel.$render = function () {
+                scope.$modelValue = ngModel.$modelValue;
+              };
+            }
+
+            scope.$watch(function () {
+              return attrs.maxDepth;
+            }, function (val) {
+              if ((typeof val) == 'number') {
+                scope.maxDepth = val;
+              }
+            });
+
+            scope.$watch(function () {
+              return attrs.nodropEnabled;
+            }, function (newVal) {
+              if ((typeof newVal) != 'undefined') {
+                scope.nodropEnabled = true;
+              }
+            }, true);
+
+            attrs.$observe('horizontal', function (val) {
+              scope.horizontal = ((typeof val) != 'undefined');
+            });
+
+          }
+        };
+      }
+    ]);
+})();
+
+(function () {
+  'use strict';
+
+  angular.module('ui.tree')
+
+  /**
+   * @ngdoc service
+   * @name ui.tree.service:UiTreeHelper
+   * @requires ng.$document
+   * @requires ng.$window
+   *
+   * @description
+   * angular-ui-tree.
+   */
+    .factory('UiTreeHelper', ['$document', '$window', 'treeConfig',
+      function ($document, $window, treeConfig) {
+        return {
+
+          /**
+           * A hashtable used to storage data of nodes
+           * @type {Object}
+           */
+          nodesData: {},
+
+          setNodeAttribute: function (scope, attrName, val) {
+            if (!scope.$modelValue) {
+              return null;
+            }
+            var data = this.nodesData[scope.$modelValue.$$hashKey];
+            if (!data) {
+              data = {};
+              this.nodesData[scope.$modelValue.$$hashKey] = data;
+            }
+            data[attrName] = val;
+          },
+
+          getNodeAttribute: function (scope, attrName) {
+            if (!scope.$modelValue) {
+              return null;
+            }
+            var data = this.nodesData[scope.$modelValue.$$hashKey];
+            if (data) {
+              return data[attrName];
+            }
+            return null;
+          },
+
+          /**
+           * @ngdoc method
+           * @methodOf ui.tree.service:$nodrag
+           * @param  {Object} targetElm angular element
+           * @return {Bool} check if the node can be dragged.
+           */
+          nodrag: function (targetElm) {
+            if (typeof targetElm.attr('data-nodrag') != 'undefined') {
+              return targetElm.attr('data-nodrag') !== 'false';
+            }
+            return false;
+          },
+
+          /**
+           * get the event object for touches
+           * @param  {[type]} e [description]
+           * @return {[type]}   [description]
+           */
+          eventObj: function (e) {
+            var obj = e;
+            if (e.targetTouches !== undefined) {
+              obj = e.targetTouches.item(0);
+            } else if (e.originalEvent !== undefined && e.originalEvent.targetTouches !== undefined) {
+              obj = e.originalEvent.targetTouches.item(0);
+            }
+            return obj;
+          },
+
+          dragInfo: function (node) {
+            return {
+              source: node,
+              sourceInfo: {
+                cloneModel: node.$treeScope.cloneEnabled === true ? angular.copy(node.$modelValue) : undefined,
+                nodeScope: node,
+                index: node.index(),
+                nodesScope: node.$parentNodesScope
+              },
+              index: node.index(),
+              siblings: node.siblings().slice(0),
+              parent: node.$parentNodesScope,
+
+              // Move the node to a new position
+              moveTo: function (parent, siblings, index) {
+                this.parent = parent;
+                this.siblings = siblings.slice(0);
+
+                // If source node is in the target nodes
+                var i = this.siblings.indexOf(this.source);
+                if (i > -1) {
+                  this.siblings.splice(i, 1);
+                  if (this.source.index() < index) {
+                    index--;
+                  }
+                }
+
+                this.siblings.splice(index, 0, this.source);
+                this.index = index;
+              },
+
+              parentNode: function () {
+                return this.parent.$nodeScope;
+              },
+
+              prev: function () {
+                if (this.index > 0) {
+                  return this.siblings[this.index - 1];
+                }
+
+                return null;
+              },
+
+              next: function () {
+                if (this.index < this.siblings.length - 1) {
+                  return this.siblings[this.index + 1];
+                }
+
+                return null;
+              },
+
+              isClone: function () {
+                return this.source.$treeScope.cloneEnabled === true;
+              },
+
+              clonedNode: function (node) {
+                return angular.copy(node);
+              },
+
+              isDirty: function () {
+                return this.source.$parentNodesScope != this.parent ||
+                  this.source.index() != this.index;
+              },
+
+              isForeign: function () {
+                return this.source.$treeScope !== this.parent.$treeScope;
+              },
+
+              eventArgs: function (elements, pos) {
+                return {
+                  source: this.sourceInfo,
+                  dest: {
+                    index: this.index,
+                    nodesScope: this.parent
+                  },
+                  elements: elements,
+                  pos: pos
+                };
+              },
+
+              apply: function () {
+
+                var nodeData = this.source.$modelValue;
+
+                // nodrop enabled on tree or parent
+                if (this.parent.nodropEnabled || this.parent.$treeScope.nodropEnabled) {
+                  return;
+                }
+
+                // node was dropped in the same place - do nothing
+                if (!this.isDirty()) {
+                  return;
+                }
+
+                // cloneEnabled and cross-tree so copy and do not remove from source
+                if (this.isClone() && this.isForeign()) {
+                  this.parent.insertNode(this.index, this.sourceInfo.cloneModel);
+                } else { // Any other case, remove and reinsert
+                  this.source.remove();
+                  this.parent.insertNode(this.index, nodeData);
+                }
+              }
+            };
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#height
+           * @methodOf ui.tree.service:UiTreeHelper
+           *
+           * @description
+           * Get the height of an element.
+           *
+           * @param {Object} element Angular element.
+           * @returns {String} Height
+           */
+          height: function (element) {
+            return element.prop('scrollHeight');
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#width
+           * @methodOf ui.tree.service:UiTreeHelper
+           *
+           * @description
+           * Get the width of an element.
+           *
+           * @param {Object} element Angular element.
+           * @returns {String} Width
+           */
+          width: function (element) {
+            return element.prop('scrollWidth');
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#offset
+           * @methodOf ui.nestedSortable.service:UiTreeHelper
+           *
+           * @description
+           * Get the offset values of an element.
+           *
+           * @param {Object} element Angular element.
+           * @returns {Object} Object with properties width, height, top and left
+           */
+          offset: function (element) {
+            var boundingClientRect = element[0].getBoundingClientRect();
+
+            return {
+              width: element.prop('offsetWidth'),
+              height: element.prop('offsetHeight'),
+              top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop || $document[0].documentElement.scrollTop),
+              left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft || $document[0].documentElement.scrollLeft)
+            };
+          },
+
+          /**
+           * @ngdoc method
+           * @name ui.tree#positionStarted
+           * @methodOf ui.tree.service:UiTreeHelper
+           *
+           * @description
+           * Get the start position of the target element according to the provided event properties.
+           *
+           * @param {Object} e Event
+           * @param {Object} target Target element
+           * @returns {Object} Object with properties offsetX, offsetY, startX, startY, nowX and dirX.
+           */
+          positionStarted: function (e, target) {
+            var pos = {},
+              pageX = e.pageX,
+              pageY = e.pageY;
+
+            if (e.originalEvent && e.originalEvent.touches && (e.originalEvent.touches.length > 0)) {
+              pageX = e.originalEvent.touches[0].pageX;
+              pageY = e.originalEvent.touches[0].pageY;
+            }
+            pos.offsetX = pageX - this.offset(target).left;
+            pos.offsetY = pageY - this.offset(target).top;
+            pos.startX = pos.lastX = pageX;
+            pos.startY = pos.lastY = pageY;
+            pos.nowX = pos.nowY = pos.distX = pos.distY = pos.dirAx = 0;
+            pos.dirX = pos.dirY = pos.lastDirX = pos.lastDirY = pos.distAxX = pos.distAxY = 0;
+            return pos;
+          },
+
+          positionMoved: function (e, pos, firstMoving) {
+            var pageX = e.pageX,
+              pageY = e.pageY,
+              newAx;
+            if (e.originalEvent && e.originalEvent.touches && (e.originalEvent.touches.length > 0)) {
+              pageX = e.originalEvent.touches[0].pageX;
+              pageY = e.originalEvent.touches[0].pageY;
+            }
+            // mouse position last events
+            pos.lastX = pos.nowX;
+            pos.lastY = pos.nowY;
+
+            // mouse position this events
+            pos.nowX = pageX;
+            pos.nowY = pageY;
+
+            // distance mouse moved between events
+            pos.distX = pos.nowX - pos.lastX;
+            pos.distY = pos.nowY - pos.lastY;
+
+            // direction mouse was moving
+            pos.lastDirX = pos.dirX;
+            pos.lastDirY = pos.dirY;
+
+            // direction mouse is now moving (on both axis)
+            pos.dirX = pos.distX === 0 ? 0 : pos.distX > 0 ? 1 : -1;
+            pos.dirY = pos.distY === 0 ? 0 : pos.distY > 0 ? 1 : -1;
+
+            // axis mouse is now moving on
+            newAx = Math.abs(pos.distX) > Math.abs(pos.distY) ? 1 : 0;
+
+            // do nothing on first move
+            if (firstMoving) {
+              pos.dirAx = newAx;
+              pos.moving = true;
+              return;
+            }
+
+            // calc distance moved on this axis (and direction)
+            if (pos.dirAx !== newAx) {
+              pos.distAxX = 0;
+              pos.distAxY = 0;
+            } else {
+              pos.distAxX += Math.abs(pos.distX);
+              if (pos.dirX !== 0 && pos.dirX !== pos.lastDirX) {
+                pos.distAxX = 0;
+              }
+
+              pos.distAxY += Math.abs(pos.distY);
+              if (pos.dirY !== 0 && pos.dirY !== pos.lastDirY) {
+                pos.distAxY = 0;
+              }
+            }
+
+            pos.dirAx = newAx;
+          },
+
+          elementIsTreeNode: function (element) {
+            return typeof element.attr('ui-tree-node') !== 'undefined';
+          },
+
+          elementIsTreeNodeHandle: function (element) {
+            return typeof element.attr('ui-tree-handle') !== 'undefined';
+          },
+          elementIsTree: function (element) {
+            return typeof element.attr('ui-tree') !== 'undefined';
+          },
+          elementIsTreeNodes: function (element) {
+            return typeof element.attr('ui-tree-nodes') !== 'undefined';
+          },
+          elementIsPlaceholder: function (element) {
+            return element.hasClass(treeConfig.placeholderClass);
+          },
+          elementContainsTreeNodeHandler: function (element) {
+            return element[0].querySelectorAll('[ui-tree-handle]').length >= 1;
+          },
+          treeNodeHandlerContainerOfElement: function (element) {
+            return findFirstParentElementWithAttribute('ui-tree-handle', element[0]);
+          }
+        };
+      }
+    ]);
+
+  // TODO: optimize this loop
+  function findFirstParentElementWithAttribute(attributeName, childObj) {
+    // undefined if the mouse leaves the browser window
+    if (childObj === undefined) {
+      return null;
+    }
+    var testObj = childObj.parentNode,
+      count = 1,
+      // check for setAttribute due to exception thrown by Firefox when a node is dragged outside the browser window
+      res = (typeof testObj.setAttribute === 'function' && testObj.hasAttribute(attributeName)) ? testObj : null;
+    while (testObj && typeof testObj.setAttribute === 'function' && !testObj.hasAttribute(attributeName)) {
+      testObj = testObj.parentNode;
+      res = testObj;
+      if (testObj === document.documentElement) {
+        res = null;
+        break;
+      }
+      count++;
+    }
+
+    return res;
+  }
+
+})();
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js b/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
new file mode 100755
index 0000000..855f990
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/constants/componentConstants.js
@@ -0,0 +1,148 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+appDS2.constant("COMPONENT", (function() {
+    return {
+    A_LA_CARTE : "a la carte",
+    CLOUD_REGION_ID : "cloudRegionID",
+    COMPONENT_STATUS : "ComponentStatus",
+    CREATE_COMPONENT : "createComponent",
+    DELETE_COMPONENT : "deleteComponent",
+    ENTITY : "entity",
+    GET_COMPONENT_LIST : "getComponentList",
+    GET_SUBS : "getSubs",
+    GET_SUB_DETAILS : "getSubDetails",
+    GLOBAL_CUSTOMER_ID : "globalCustomerId",
+    MACRO : "Macro",
+	MODEL_VERSION_1 : "1",
+	MSO_CREATE_REQ : "createInstance",
+	MSO_DELETE_REQ : "deleteInstance",
+    NAME : "name",
+	NETWORK : "network",
+	NETWORKS : "networks",
+
+	QUERY_SERVICE_INSTANCE : "queryServiceInstance",
+	REFRESH_PROPERTIES : "refreshProperties",
+	SERVICE : "service",
+	SERVICE_TYPE : "serviceType",
+	SHOW_COMPONENT_DETAILS : "showComponentDetails",
+	STATUS : "status",
+	SUBSCRIBER_NAME : "subscriberName",
+	TENANT_ID : "tenantID",
+	TENANT_NAME : "tenantName",
+	TRUE : "true",
+	
+	VF_MODULE : "vfModule",
+	VNF : "vnf",
+	VNF_CODE : "vnfCode",
+	VNF_FUNCTION : "vnfFunction",
+	VNF_ROLE : "vnfRole",
+	VNF_TYPE : "vnfType",
+	VOLUME_GROUP : "volumeGroup",
+	
+	
+	// IDs
+	CIDR_MASK_1 : "255.255.255.000",
+	//COMPONENT_LIST_NAMED_QUERY_ID : "ed0a0f5b-cf79-4784-88b2-911cd726cd3d",
+	CUSTOMER_ID_1 : "icore9883749",
+	DELETE_INSTANCE_ID_1 : "ff305d54-75b4-ff1b-fff1-eb6b9e5460ff",
+	GATEWAY_ADDRESS_1 : "10.10.125.1",
+	GLOBAL_SUBSCRIBER_ID_1 : "C12345",
+	INSTANCE_ID_1 : "ff305d54-75b4-431b-adb2-eb6b9e5ff000",
+	INSTANCE_ID_2 : "ff305d54-75b4-ff1b-adb2-eb6b9e5460ff",
+	INSTANCE_ID_3 : "ff305d54-75b4-ff1b-bdb2-eb6b9e5460ff",
+	MODEL_ID_1 : "sn5256d1-5a33-55df-13ab-12abad84e764",
+	MODEL_ID_2 : "ff5256d1-5a33-55df-aaaa-12abad84e7ff",
+	MODEL_ID_3 : "ff3514e3-5a33-55df-13ab-12abad84e7ff",
+	MODEL_ID_4 : "ff5256d1-5a33-55df-13ab-12abad84e7ff",
+	MODEL_ID_5 : "ff5256d1-5a33-55df-13ab-22abad84e7ff",
+	MODEL_NAME_VERSION_ID_1 : "ab6478e4-ea33-3346-ac12-ab121484a333",
+	MODEL_NAME_VERSION_ID_2 : "fe6478e4-ea33-3346-aaaa-ab121484a3fe",
+	MODEL_NAME_VERSION_ID_3 : "fe6985cd-ea33-3346-ac12-ab121484a3fe",
+	MODEL_NAME_VERSION_ID_4 : "fe6478e4-ea33-3346-ac12-ab121484a3fe",
+	MODEL_NAME_VERSION_ID_5 : "fe6478e4-ea33-3346-bc12-ab121484a3fe",
+	SERVICE_INSTANCE_ID_1 : "bc305d54-75b4-431b-adb2-eb6b9e546014",
+	SUBSCRIBER_NAME_GED12 : "General Electric Division 12",
+	VNF_INSTANCE_ID : "VNF_INSTANCE_ID_12345",
+	VPN_ID_1 : "1a2b3c4d5e6f",
+	
+	// PATHS
+	ASSIGN : "?r=",
+	AAI_GET_SERVICE_INSTANCE_PATH : "aai_get_service_instance/",
+	AAI_GET_SERVICES : "aai_get_services",
+	AAI_GET_TENANTS : "aai_get_tenants/",
+	AAI_SUB_DETAILS_PATH : "aai_sub_details/",
+	AAI_SUB_VIEWEDIT_PATH : "aai_sub_viewedit",
+	ASDC_GETMODEL_PATH : "asdc/getModel/",
+	CREATE_INSTANCE_PATH : "/models/services/createInstance", 
+	FORWARD_SLASH : "/",
+	GET_SYSTEM_PROP_VNF_PROV_STATUS_PATH : "get_system_prop_vnf_prov_status",
+	GET_USER_ID : "getuserID",
+	INSTANTIATE_ROOT_PATH : "#/instantiate?subscriberId=",
+	INSTANTIATE_PATH : "/instantiate",
+	INVALID_STRING : "/INVALID_STRING/",
+	INVALID_STRING_MSO_CREATE_SVC_INSTANCE : "INVALID_STRING_mso_create_svc_instance",
+	MSO_CREATE_NW_INSTANCE : "mso_create_nw_instance",
+	MSO_CREATE_NW_INSTANCE_PATH : "mso_create_nw_instance/",
+	MSO_CREATE_SVC_INSTANCE : "mso_create_svc_instance",
+	MSO_DELETE_SVC_INSTANCE_PATH : "mso_delete_svc_instance/",
+	SELECTED_SERVICE_SUB_PATH : "#/instances/subdetails?selectedServiceSubscription=",
+	SELECTED_SUB_PATH : "#/instances/subdetails?selectedSubscriber=",
+	SELECTEDSERVICEINSTANCE_SUB_PATH : "&selectedServiceInstance=",
+	SELECTEDSUBSCRIBER_SUB_PATH : "&selectedSubscriber=",
+	SERVICE_TYPE_LIST_PATH : "#/instances/serviceTypes?serviceTypeList=",
+	SERVICE_MODLES_INSTANCES_SUBSCRIBERS_PATH : 'serviceModels.htm#/instances/subscribers',
+	SERVICES_DIST_STATUS_PATH : "rest/models/services?distributionStatus=",
+	SERVICES_PATH : "rest/models/services/",
+	SERVICETYPE_SUB_PATH : "&serviceType=",
+	SERVICEINSTANCEID_SUB_PATH : "&serviceInstanceId=",
+	SERVICEMODELS_INSTANCES_SERVICES_PATH : "serviceModels.htm#/instances/services",
+	SERVICEMODELS_MODELS_SERVICES_PATH : "serviceModels.htm#/models/services",
+	SUBDETAILS_SELECTEDSUBSCRIBER : "#subdetails?selectedSubscriber=",
+	SUBSCRIBERNAME_SUB_PATH : "&subscriberName=",
+	WELCOME_PATH : "welcome.htm",
+	
+	//Template Urls
+	AAI_GET_SUBS_URL : "app/vid/scripts/view-models/aaiGetSubs.htm",
+	AAI_GET_SUBSCRIBER_URL : "app/vid/scripts/view-models/aaiGetSubscriberList.htm",
+	AAI_SERVICE_TYPES_URL : "app/vid/scripts/view-models/aaiServiceTypes.htm",
+	AAI_SUB_DETAILS_URL : "app/vid/scripts/view-models/aaiSubDetails.htm",
+	CREATE_INSTANCE_SERVICE_MODELS_URL : "app/vid/scripts/view-models/createInstanceServiceModels.htm",
+	INSTANTIATE_URL : "app/vid/scripts/view-models/instantiate.htm",
+	SERVICE_MODELS : "app/vid/scripts/view-models/serviceModels.htm",
+	
+	
+	
+	FULL_NAME_MAP : {
+	    "model-invariant-id" : "Model ID",
+	    "model-version-id" : "Model Version ID"
+	},
+	PARTIAL_NAME_MAP : {
+	    "id" : "ID",
+	    "uuid" : "UUID",
+	    "vfmodule" : "VF Module",
+	    "vnf" : "VNF",
+	    "volumegroup" : "Volume Group"
+	}
+	
+    };
+})())
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/constants/fieldConstants.js b/vid-app-common/src/main/webapp/app/vid/scripts/constants/fieldConstants.js
new file mode 100755
index 0000000..6dbcbc2
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/constants/fieldConstants.js
@@ -0,0 +1,378 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+appDS2.factory("FIELD", [ "PARAMETER", function(PARAMETER) {
+
+    /*
+     * ID values are typically used internally.
+     */
+    var ID = {
+		AVAILABLE_VOLUME_GROUP : "availableVolumeGroup",
+		INSTANCE_NAME : "instanceName",
+		LCP_REGION : "lcpRegion",
+		LCP_REGION_TEXT : "lcpRegionText",
+		PRODUCT_FAMILY : "productFamily",
+		SERVICE_TYPE : "serviceType",
+		SUBSCRIBER_NAME : "subscriberName",
+		SUPPRESS_ROLLBACK : "suppressRollback",
+		TENANT : "tenant",
+		VNF_TARGETPROVSTATUS : "target",
+		
+		AAI_GET_FULL_SUBSCRIBERS : "aai_get_full_subscribers",
+		AAI_REFRESH_FULL_SUBSCRIBERS : "aai_refresh_full_subscribers",
+		AAI_GET_SERVICES : "aai_get_services",
+		AAI_GET_SUBSCRIBERS : "aai_get_subscribers",
+		AAI_GET_TENTANTS : "aai_get_tenants",
+		AAI_REFRESH_SUBSCRIBERS : "aai_refresh_subscribers",
+		AAI_SUB_DETAILS : "aai_sub_details",
+		AAI_SUB_VIEWEDIT : "aai_sub_viewedit",
+		ANGULAR_UI_TREE_COLLAPSEALL : "angular-ui-tree:collapse-all",
+		ANGULAR_UI_TREE_EXPANDALL : "angular-ui-tree:expand-all",
+		CATEGORY : "category",
+		COLOR_8F8 : "#8F8",
+		COLOR_F88 : "#F88",
+		COLOR_NONE : "none",
+		CUSTOMER : "customer",
+		CUSTOMIZATION_UUID : "customizationUuid",
+		DESCRIPTION : "description",
+		GENERIC_VNF : "generic-vnf",
+		GLOBAL_CUSTOMER_ID : "global-customer-id",
+		GLOBAL_CUST_ID : "globalCustomerId",
+		IN_MAINT : "in-maint",
+		INVENTORY_RESPONSE_ITEMS : "inventory-response-items",
+		INVENTORY_RESPONSE_ITEM : "inventory-response-item",
+		L3_NETWORK : "l3-network",
+		SUB_NET : "subnet",
+		SUBNET_NAME : "subnet-name",
+		SUBNET_ID : "subnet-id",
+		GATEWAY_ADDRESS : "gateway-address",
+		NETWORK_START_ADDRESS : "network-start-address",
+		CIDR_MASK : "cidr-mask",
+		MODEL_CUSTOMIZATION_ID : "model-customization-id",
+		MODEL_CUSTOMIZATION_NAME : "modelCustomizationName",
+		MODEL_INVARIANT_ID : "modelInvariantId",
+		MODEL_INVAR_ID : "model-invariant-id",
+		MODEL_NAME : "modelName",
+		MODEL_NAME_VERSION_ID : "modelNameVersionId",
+		MODEL_VERSION : "modelVersion",
+		MODEL_VERSION_ID : "model-version-id",
+		NETWORK_NAME : "network-name",
+		NETWORK_ID : "network-id",
+		NETWORK_TYPE : "network-type",
+		NETWORKS : "networks",
+		OPERATIONAL_STATUS : "operational-status",
+		ORCHESTRATION_STATUS : "orchestration-status",
+		PERCENT_PROGRESS : "precentProgress",
+		PERSONA_MODEL_ID : "persona-model-id",
+		PERSONA_MODEL_VERSION : "persona-model-version",
+		PERSONA_MODEL_CUSTOMIZATION_ID : "persona-model-customization-id",
+		PROV_STATUS : "prov-status",
+		REQUEST : "request",
+		REQUEST_ID : "requestId",
+		REQUEST_LIST : "requestList",
+		REQUEST_TYPE : "requestType",
+		REQUEST_REFERENCES : "requestReferences",
+		REQUEST_STATE : "requestState",
+		REQUEST_STATUS : "requestStatus",
+		RESOURCE_LINK : "resource-link",
+		RESULT_DATA : "result-data",
+		SERVICE_DESCRIPTION : "service-description",
+		SERVICE_ID : "service-id",
+		SERVICE_INSTANCE : "service-instance",
+		SERVICE_INSTANCES : "service-instances",
+		SERVICE_INSTANCE_ID : "service-instance-id",
+		SERVICE_INSTANCE_NAME : "service-instance-name",
+		SERVICE_SUBSCRIPTION : "service-subscription",
+		SERVICE_SUBSCRIPTIONS : "service-subscriptions",
+		SERVICE_TYPE : "service-type",
+		STATUS_MESSAGE : "statusMessage",
+		SUBNAME : "subscriber-name",
+		TIMESTAMP : "timestamp",
+		VF_MODULE : "vf-module",
+		VF_MODULES : "vfModules",
+		VF_MODULE_ID : "vf-module-id",
+		VF_MODULE_NAME : "vf-module-name",
+		VID : "VID",
+		VNF_ID : "vnf-id",
+		VNF_NAME : "vnf-name",
+		VNF_TYPE : "vnf-type",
+		VNFS : "vnfs",
+		AVAILABLEVOLUMEGROUPS : "availableVolumeGroups",
+		VOLUMEGROUPS : "volumeGroups",
+		VOLUME_GROUP : "volume-group",
+		VOLUME_GROUP_ID : "volume-group-id",
+		VOLUME_GROUP_NAME : "volume-group-name",
+    };
+
+    var KEY = {
+	LCP_REGION_TEXT : "LEGACYREGION"
+    };
+
+    /*
+     * NAME values are displayed on GUI pages.
+     */
+    var NAME = {
+	AVAILABLE_VOLUME_GROUP : "Available Volume Group",
+	INSTANCE_NAME : "Instance Name",
+	CUSTOMER_ID : "Customer ID",
+	LCP_REGION : "LCP Region",
+	LCP_REGION_TEXT : "Legacy Region",
+	MODEL_INVARIANT_UUID: "Model Invariant UUID",
+	MODEL_NAME: "Model Name",
+	MODEL_VERSION: "Model Version",
+	MODEL_UUID: "Model UUID",
+	MODEL_CUSTOMIZATION_UUID: "Model Customization UUID",
+	MODEL_VNF_TYPE: "NF Type",
+	MODEL_VNF_ROLE: "NF Role",
+	MODEL_VNF_FUNCTION: "NF Function",
+	MODEL_VNF_CODE: "NF Code",
+	MODEL_CUSTOMIZATION_NAME: "Resource Name",
+	PRODUCT_FAMILY : "Product Family",
+	RESOURCE_DESCRIPTION : "Resource Description",
+	RESOURCE_NAME : "Resource Name",
+	SERVICE_CATEGORY : "Service Category",
+	SERVICE_DESCRIPTION : "Service Description",
+	SERVICE_INSTANCE_ID : "Service Instance ID",
+	SERVICE_INSTANCE_Id : "Service Instance Id",
+	SERVICE_INSTANCE_NAME : "Service Instance Name",
+	SERVICE_INVARIANT_UUID : "Service Invariant UUID",
+	SERVICE_NAME : "Service Name",
+	SERVICE_TYPE : "Service Type",
+	SERVICE_UUID : "Service UUID",
+	SERVICE_VERSION : "Service Version",
+	SUBSCRIBER_NAME : "Subscriber Name",
+	SUPPRESS_ROLLBACK : "Suppress Rollback on Failure",
+	TENANT : "Tenant",
+	USER_SERVICE_INSTANCE_NAME : "User Service Instance Name",
+	VF_MODULE_DESCRIPTION : "VF Module Description",
+	VF_MODULE_LABEL : "VF Module Label",
+	VF_MODULE_TYPE : "VF Module Type",
+	VNF_ORCHESTRATION_STATUS : "Orchestration Status",
+	VNF_Operational_Status: "Operational Status",
+	VNF_Current_Prov_Status: "Current Prov_Status",
+	VNF_Target_Prov_Status: "Target Prov Status",
+	VNF_VNF_ID : "VNF ID",
+	VNF_VNF_Name: "VNF Name",
+	VNF_VNF_Type: "VNF Type",
+	VNF_Service_ID: "Service ID",
+	VNF_In_Maint: "In Maint",
+	VFMDULE_CUSTOMIZATIONUUID: "VF Module Model Customization UUID",
+	RESOURCE_CUSTOMIZATION_UUID: "Resource Model Customization UUID"
+    };
+
+    /*
+     * PROMPT values are initial values displayed in select lists.
+     */
+    var PROMPT = {
+	AVAILABLE_VOLUME_GROUP : "Select Volume Group",
+	DEFAULT_A : "A default",
+	DEFAULT_B : "B default",
+	LCP_REGION : "Select LCP Region",
+	NO_SERVICE_INSTANCE : "No Service Instance Found",
+	NO_SERVICE_SUB : "No Service Subscription Found",
+	PRODUCT_FAMILY : "Select Product Family",
+	REGION : "Please choose a region",
+	SERVICE_TYPE : "Select Service Type",
+	SUBSCRIBER_NAME : "Select Subscriber Name",
+	TARGETPROVSTATUS : "Select Target Prov Status",
+	TENANT : "Select Tenant Name",
+	TEXT_INPUT : "Enter data",
+	SELECT_SERVICE : "Select a service type",
+	SELECT_SUB : "Select a subscriber name",
+	FETCHING_SUBS : " Fetching subscriber list from A&AI",
+	REFRESH_SUB_LIST : "Refreshing subscriber list from A&AI...",
+	VAR_DESCRIPTION_A : "This variable is 'a'",
+	VAR_DESCRIPTION_B : "This variable is 'b'",
+	
+    };
+    
+    var STATUS = {
+    		// Status
+    		ALL : "ALL",
+    		COMPLETE : "Complete",
+    		DONE : "Done",
+    		ERROR : "Error",
+    		FAILED : "Failed",
+    		FAILED_SERVICE_MODELS_ASDC : "Failed to get service models from SDC.",
+    		FETCHING_SERVICE_TYPES : "Fetching service types list from A&AI", 
+    		FETCHING_SERVICE_CATALOG : "Fetching service catalog from AAI.  Please wait.",
+    		FETCHING_SERVICE_CATALOG_ASDC : "Fetching service catalog from SDC.  Please wait.",
+    		FETCHING_SUB_DETAILS : "Fetching subscriber details from A&AI for ",
+    		FETCHING_SERVICE_INST_DATA : "Fetching service instance data from A&AI for service-instance-id=",
+    		FETCHING_SUBSCRIBER_LIST_AAI : "Fetching subscriber list from A&AI...",
+    		IN_PROGRESS : "In Progress",
+    		IS_SUCCESSFUL : " isSuccessful: ",
+    		MSO_FAILURE : "msoFailure",
+    		NONE : "None",
+    		NOT_FOUND : "Not Found",
+    		NO_SERVICE_SUBSCRIPTION_FOUND : "No Service Subscription Found",
+    		SUBMITTING_REQUEST : "Submitting Request",
+    		SUCCESS_VNF_PROV_STATUS : "Successfully set the VNF's Prov_Status to ",
+    		UNLOCKED : "Unlocked",
+    		
+    };
+    
+    var STYLE = {
+    		TABLE : "width: auto; margin: 0 auto; border-collapse: collapse; border: none;",
+    		NAME : "width: 220px; text-align: left; vertical-align: middle; font-weight: bold; padding: 3px 5px; border: none;",
+		    VALUE : "width: 400px; text-align: left; vertical-align: middle; padding: 3px 5px; border: none;",
+		    CHECKBOX_VALUE : "width: 400px; text-align: center; vertical-align: middle; padding: 3px 5px; border: none;",
+		    TEXT_INPUT : "height: 25px; padding: 2px 5px;",
+		    CHECKBOX_INPUT : "height: 18px; width: 18px; padding: 2px 5px;",
+		    SELECT : "height: 25px; padding: 2px; text-align: center;",
+		    REQUIRED_LABEL : "width: 25px; padding: 5px 10px 10px 5px;",
+		    
+		    DISABLED : "disabled",
+		    BTN_INACTIVE : "button--inactive",
+		    BTN_PRIMARY : "button--primary",
+		    BTN_TYPE : "btn-type",
+		    MSO_CTRL_BTN : "div[ng-controller=msoCommitController] button",
+		    PRIMARY : "primary",
+		    PROGRESS_BAR_INFO : "progress-bar progress-bar-info",
+		    PROGRESS_BAR_SUCCESS : "progress-bar progress-bar-success",
+    }
+    
+    var ERROR = {
+    		AAI : "A&AI failure - see log below for details",
+    		AAI_ERROR : "A&AI Error",
+    		AAI_FETCHING_CUST_DATA : "Failed to fetch customer data from A&AI: Response Code: ",
+    		FETCHING_SERVICE_TYPES : "Failed to fetch service types from A&AI: Response Code: ",
+    		FETCHING_SERVICES : "Failed to fetch services from A&AI: Response Code: ",
+    		FETCHING_SERVICE_INSTANCE_DATA : "Failed to fetch service instance data from A&AI: Response Code: ",
+    		INVALID_INSTANCE_NAME : "Invalid instance name: ",
+    		INSTANCE_NAME_VALIDATE : "The instance name must contain only alphanumeric or \"_-.\" characters, and must start with an alphabetic character",	
+    		MAX_POLLS_EXCEEDED : "Maximum number of poll attempts exceeded",
+    		MISSING_DATA : "Missing data",
+    		MODEL_VERSION_ID_MISSING : "Error: model-version-id is not populated in A&AI",
+    		MSO : "MSO failure - see log below for details",
+    		NO_MATCHING_MODEL : "No matching model found matching the persona Model Id = ",
+    		NO_MATCHING_MODEL_AAI : "No matching model found matching the A&AI model version ID = ",
+    		SELECT : "Please select a subscriber or enter a service instance", 
+    		SERVICE_INST_DNE : "That service instance does not exist.  Please try again.",
+    		SYSTEM_FAILURE : "System failure",
+    		
+    }
+
+    /*
+     * PARAMETER values indicate field configurations that are provided to
+     * parameter block directives.
+     */
+
+    var PARAMETER = {
+	AVAILABLE_VOLUME_GROUP : {
+	    name : NAME.AVAILABLE_VOLUME_GROUP,
+	    id : ID.AVAILABLE_VOLUME_GROUP,
+	    type : PARAMETER.SELECT,
+	    prompt : PROMPT.AVAILABLE_VOLUME_GROUP,
+	    isRequired : true
+	},
+	INSTANCE_NAME : {
+	    name : NAME.INSTANCE_NAME,
+	    id : ID.INSTANCE_NAME,
+	    isRequired : true
+	},
+	LCP_REGION : {
+	    name : NAME.LCP_REGION,
+	    id : ID.LCP_REGION,
+	    type : PARAMETER.SELECT,
+	    prompt : PROMPT.LCP_REGION,
+	    isRequired : true
+	},
+	VNF_TARGET_PROVSTATUS : {
+	    name : NAME.VNF_Target_Prov_Status,
+	    id : ID.VNF_TARGETPROVSTATUS,
+	    type : PARAMETER.SELECT,
+	    prompt : PROMPT.TARGETPROVSTATUS,
+	    isRequired : true
+	},
+	LCP_REGION_TEXT_HIDDEN : {
+	    id : ID.LCP_REGION_TEXT,
+	    isVisible : false
+	},
+	LCP_REGION_TEXT_VISIBLE : {
+	    name : NAME.LCP_REGION_TEXT,
+	    id : ID.LCP_REGION_TEXT,
+	    isRequired : true,
+	    isVisible : true
+	},
+	PRODUCT_FAMILY : {
+	    name : NAME.PRODUCT_FAMILY,
+	    id : ID.PRODUCT_FAMILY,
+	    type : PARAMETER.SELECT,
+	    prompt : PROMPT.PRODUCT_FAMILY,
+	    isRequired : true
+	},
+	SERVICE_TYPE : {
+	    name : NAME.SERVICE_TYPE,
+	    id : ID.SERVICE_TYPE,
+	    type : PARAMETER.SELECT,
+	    prompt : PROMPT.SERVICE_TYPE,
+	    isRequired : true
+	},
+	SERVICE_TYPE_DISABLED : {
+	    name : NAME.SERVICE_TYPE,
+	    id : ID.SERVICE_TYPE,
+	    type : PARAMETER.SELECT,
+	    isEnabled : false,
+	    isRequired : true
+	},
+	SUPPRESS_ROLLBACK : {
+	    name : NAME.SUPPRESS_ROLLBACK,
+	    id : ID.SUPPRESS_ROLLBACK,
+	    type : PARAMETER.BOOLEAN,
+	    value : false
+	},
+	SUBSCRIBER_NAME : {
+		name : NAME.SUBSCRIBER_NAME,
+		id : ID.SUBSCRIBER_NAME,
+	    type : PARAMETER.SELECT,
+	    prompt : PROMPT.SUBSCRIBER_NAME,
+		isRequired : true
+	},
+	TENANT_DISABLED : {
+	    name : NAME.TENANT,
+	    id : ID.TENANT,
+	    type : PARAMETER.SELECT,
+	    isEnabled : false,
+	    isRequired : true
+	},
+	TENANT_ENABLED : {
+	    name : NAME.TENANT,
+	    id : ID.TENANT,
+	    type : PARAMETER.SELECT,
+	    isEnabled : true,
+	    prompt : PROMPT.TENANT,
+	    isRequired : true
+	}
+    };
+
+    return {
+	ID : ID,
+	KEY : KEY,
+	NAME : NAME,
+	PARAMETER : PARAMETER,
+	PROMPT : PROMPT,
+	STATUS : STATUS,
+	STYLE : STYLE,
+	ERROR : ERROR,
+    }
+} ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/constants/parameterConstants.js b/vid-app-common/src/main/webapp/app/vid/scripts/constants/parameterConstants.js
new file mode 100755
index 0000000..4e3ad29
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/constants/parameterConstants.js
@@ -0,0 +1,52 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+appDS2.constant("PARAMETER", (function() {
+    return {
+		BOOLEAN : "boolean",
+		SELECT : "select",
+		STRING : "string",
+		NUMBER : "number",
+		VALID_VALUES : "valid_values",
+		EQUAL : "equal",
+		LENGTH : "length",
+		MAX_LENGTH : "max_length",
+		MIN_LENGTH : "min_length",
+		IN_RANGE : "in_range",
+		CONSTRAINTS : "constraints",
+		OPERATOR : "operator",
+		CONSTRAINT_VALUES : "constraintValues",
+		DEFAULT : "default",
+		DESCRIPTION : "description",
+		TYPE: "type",
+		INTEGER: "integer",
+		RANGE: "range",
+		LIST: "list",
+		MAP: "map",
+		REQUIRED: "required",
+		GREATER_THAN: "greater_than",
+		LESS_THAN: "less_than",
+		GREATER_OR_EQUAL: "greater_or_equal",
+		LESS_OR_EQUAL: "less_or_equal"
+		
+    };
+})())
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/constants/vidConfiguration.js b/vid-app-common/src/main/webapp/app/vid/scripts/constants/vidConfiguration.js
new file mode 100755
index 0000000..8fdfd3f
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/constants/vidConfiguration.js
@@ -0,0 +1,99 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+appDS2.constant("VIDCONFIGURATION", (function() {
+	/*
+	 * VNF_STATUS_CHECK_ENABLED: Determines whether VID will check the VNF valid status combination list, before allowing VNF updates.
+	 * Set to false, to disable the check.
+	 */
+	var VNF_STATUS_CHECK_ENABLED = false;
+	/*
+	 * List of valid VNF status combinations
+	 */
+	var vnfValidStatusList = [
+			{
+				"provStatus": "preprov",
+				"orchestrationStatus": "pending-create",
+				"inMaint": false,
+				"operationalStatus": null
+			},
+			{
+				"provStatus": "preprov",
+				"orchestrationStatus": "created",
+				"inMaint": false,
+				"operationalStatus": null
+			},
+			{
+				"provStatus": "preprov",
+				"orchestrationStatus": "active",
+				"inMaint": false,
+				"operationalStatus": null
+			},
+			{
+				"provStatus": "nvtprov",
+				"orchestrationStatus": "active",
+				"inMaint": false,
+				"operationalStatus": null
+			},
+			{
+				"provStatus": "prov",
+				"orchestrationStatus": "active",
+				"inMaint": false,
+				"operationalStatus": "out-of-service-path"
+			}
+	];
+	/* 
+	 * The model status VID uses to query SDC for a list of models. The possible values are:
+	 * DISTRIBUTION_NOT_APPROVED,
+	 * DISTRIBUTION_APPROVED,
+	 * DISTRIBUTED,
+	 * DISTRIBUTION_REJECTED,
+	 * ALL,
+	 * In the production env, this should always be set to DISTRIBUTED
+	 */
+	var ASDC_MODEL_STATUS = "DISTRIBUTED";
+	/*
+	 * Max number of times that VID will poll MSO for a given request status
+	 */
+	var MSO_MAX_POLLS = 10;
+	/*
+	 * Number of msecs that VID will wait between MSO polls.
+	 */
+	var MSO_POLLING_INTERVAL_MSECS = 10000;
+	/*
+	 * List of all service model invariant UUIDs that need macro instantiation.
+	 * Example:
+	 * MACRO_SERVICES : ["3cf30cbb-5fe7-4fb3-b049-559a4997b221", "b135a703-bab5-4295-a37f-580a4f2d0961"]
+	 * 
+	 */
+	var COMPONENT_LIST_NAMED_QUERY_ID = "0367193e-c785-4d5f-9cb8-7bc89dc9ddb7";
+	var MACRO_SERVICES = [];
+    return {
+    	ASDC_MODEL_STATUS : ASDC_MODEL_STATUS,
+    	MSO_MAX_POLLS : MSO_MAX_POLLS,
+    	MSO_POLLING_INTERVAL_MSECS : MSO_POLLING_INTERVAL_MSECS,
+    	VNF_STATUS_CHECK_ENABLED : VNF_STATUS_CHECK_ENABLED,
+    	VNF_VALID_STATUS_LIST : vnfValidStatusList,
+    	MACRO_SERVICES : MACRO_SERVICES,
+    	COMPONENT_LIST_NAMED_QUERY_ID : COMPONENT_LIST_NAMED_QUERY_ID
+    };
+})())
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/InstantiationController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/InstantiationController.js
new file mode 100755
index 0000000..f928f4e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/InstantiationController.js
@@ -0,0 +1,1217 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+/**
+ * The Instantiation (or View/Edit) Controller controls the instantiation/removal of
+ * deployable objects (Services, VNFs, VF-Modules, Networks, and Volume-Groups)
+ */
+(function () {
+	"use strict";
+
+	appDS2.requires.push('ui.tree');
+	
+	appDS2.controller("InstantiationController", function ($scope, $route, $location, $timeout, COMPONENT, VIDCONFIGURATION, FIELD, DataService, PropertyService, UtilityService, VnfService, $http, vidService) {
+		
+		$scope.popup = new Object();
+		$scope.defaultBaseUrl = "";
+		$scope.responseTimeoutMsec = 60000;
+		$scope.properties = UtilityService.getProperties();
+        $scope.init = function() {
+
+            /*
+             * These 2 statements should be included in non-test code.
+             */
+        	// takes a default value, retrieves the prop value from the file system and sets it
+    		var msecs = PropertyService.retrieveMsoMaxPollingIntervalMsec();
+    		PropertyService.setMsoMaxPollingIntervalMsec(msecs);
+    		
+    		// takes a default value, retrieves the prop value from the file system and sets it
+    		var polls = PropertyService.retrieveMsoMaxPolls();
+    		PropertyService.setMsoMaxPolls(polls);
+    		
+    		PropertyService.setServerResponseTimeoutMsec(10000);
+
+            /*
+             * Common parameters that shows an example of how the view edit screen
+             * is expected to pass some common service instance values to the
+             * popups.
+             */
+
+//            DataService.setSubscriberName("Mobility");
+//            DataService.setGlobalCustomerId("CUSTID12345")
+//            DataService.setServiceType("Mobility Type 1");
+//            DataService.setServiceInstanceName("Example Service Instance Name");
+//            DataService.setServiceName("Mobility Service 1");
+//            DataService.setServiceInstanceId("mmsc-test-service-instance");
+//            DataService.setServiceUuid("XXXX-YYYY-ZZZZ");
+//            DataService.setUserServiceInstanceName("USER_SERVICE_INSTANCE_NAME");
+        }
+        
+        //PropertyService.setMsoBaseUrl("testmso");
+
+		$scope.convertModel = function(asdcModel) {
+			if (!asdcModel) return undefined;
+			var convertedAsdcModel = UtilityService.convertModel(asdcModel);
+			return convertedAsdcModel;
+		};
+		
+		$scope.service = {
+			"model": vidService.getModel(),
+			"convertedModel": $scope.convertModel(vidService.getModel()),
+			"instance": vidService.getInstance()
+		};
+		
+		$scope.returnVfModules = function (vnfInstance) {
+			
+			var svcModel = $scope.service.convertedModel;
+			//var vnfModelInvariantUuid = vnfInstance[FIELD.ID.MODEL_INVAR_ID];
+			var vnfModelVersionId = vnfInstance[FIELD.ID.MODEL_VERSION_ID]; // model uuid
+			var vnfModelCustomizationUuid = vnfInstance[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+	
+			var vnfModel = null;
+			
+			if ( (!($scope.isObjectEmpty(svcModel))) && ( !($scope.isObjectEmpty(svcModel.vnfs) ) ) ) {
+				if ( (svcModel.isNewFlow) && (vnfModelCustomizationUuid != null ) ) {
+					vnfModel = svcModel.vnfs[vnfModelCustomizationUuid];
+					if ( !($scope.isObjectEmpty(vnfModel.vfModules) ) )  {
+						//console.log ("vnfModel.vfModules: "); console.log (JSON.stringify(vnfModel.vfModules, null, 4));
+						return (vnfModel.vfModules);
+					}
+				}
+				else {
+					// old flow
+					if ( vnfModelVersionId != null ) {
+						vnfModel = svcModel.vnfs[vnfModelVersionId];
+						if ( !($scope.isObjectEmpty(vnfModel.vfModules) ) )  {
+							//console.log ("vnfModel.vfModules: "); console.log (JSON.stringify(vnfModel.vfModules, null, 4));
+							return (vnfModel.vfModules);
+						}
+					}
+				}
+				
+			}
+			return null;
+		}
+		$scope.hasVfModules = function (vnfInstance) {
+			if ($scope.returnVfModules(vnfInstance) != null ){
+				return true;
+			}
+			return false;
+		}
+		$scope.returnVolumeGroups = function (vnfInstance) {
+			
+			var svcModel = $scope.service.convertedModel;
+
+			//var vnfModelInvariantUuid = vnfInstance[FIELD.ID.MODEL_INVAR_ID];
+			var vnfModelVersionId = vnfInstance[FIELD.ID.MODEL_VERSION_ID];
+			var vnfModelCustomizationUuid = vnfInstance[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+
+			var vnfModel = null;
+			
+			if ( (!($scope.isObjectEmpty(svcModel))) && ( !($scope.isObjectEmpty(svcModel.vnfs) ) ) ) {
+				if ( (svcModel.isNewFlow) && (vnfModelCustomizationUuid != null ) ) {
+					vnfModel = svcModel.vnfs[vnfModelCustomizationUuid];
+					if ( !($scope.isObjectEmpty(vnfModel.volumeGroups) ) )  {
+						//console.log ("vnfModel.volumeGroups: "); console.log (JSON.stringify(vnfModel.volumeGroups, null, 4));
+						return (vnfModel.volumeGroups);
+					}
+				}
+				else {
+					// old flow
+					if ( vnfModelVersionId != null ) {
+						vnfModel = svcModel.vnfs[vnfModelVersionId];
+						if ( !($scope.isObjectEmpty(vnfModel.volumeGroups) ) )  {
+							//console.log ("vnfModel.vfModules: "); console.log (JSON.stringify(vnfModel.volumeGroups, null, 4));
+							return (vnfModel.volumeGroups);
+						}
+					}
+				}
+				
+			}
+			return null;
+		}
+		$scope.hasVolumeGroups = function (vnfInstance) {
+			if ($scope.returnVolumeGroups(vnfInstance) != null ){
+				return true;
+			}
+			return false;
+		}
+		$scope.deleteNetwork = function(serviceObject, network) {
+
+			console.log("Removing Network " + network.name);
+
+			//Send delete network request to MSO
+
+			//var networks = this.service.instance.networks;
+
+			//networks.splice(networks.indexOf(network), 1);
+
+			//Retrieve updated data from A&AI
+            var serviceInstance = serviceObject.object;
+            var svcModel = $scope.service.convertedModel;
+			var netModel;
+			DataService.setInventoryItem(network.object);
+			// set model default and override later if found
+			DataService.setModelInfo(COMPONENT.NETWORK, {});
+			
+			if ( network.object != null ) {
+				
+				//var netModelInvariantUuid = network.object[FIELD.ID.MODEL_INVAR_ID];
+				var netModelVersionId = network.object[FIELD.ID.MODEL_VERSION_ID]; // model uuid
+				var netModelCustomizationUuid = network.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+			
+				if ( (!($scope.isObjectEmpty(svcModel))) && ( !($scope.isObjectEmpty(svcModel.networks) ) ) ) {
+					if ( (svcModel.isNewFlow) && (UtilityService.hasContents(netModelCustomizationUuid) ) ) {
+						netModel = svcModel.networks[netModelCustomizationUuid];
+					}
+					else {
+						
+						if ( UtilityService.hasContents(netModelVersionId) ) {
+							netModel = svcModel.networks[netModelVersionId];
+						}
+				
+					}
+				}
+			}
+			if (!($scope.isObjectEmpty(netModel) ) ) {
+				DataService.setModelInfo(COMPONENT.NETWORK, {
+					"modelInvariantId": netModel.invariantUuid,
+					"modelVersion": netModel.version,
+					"modelNameVersionId": netModel.uuid,
+					"modelCustomizationName": netModel.modelCustomizationName,
+					"customizationUuid": netModel.customizationUuid,
+					"modelName": netModel.name,
+					"inputs": ""
+				});
+			}
+			
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+	
+			DataService.setGlobalCustomerId(serviceObject[FIELD.ID.GLOBAL_CUST_ID]);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			DataService.setServiceName($scope.service.model.service.name);
+			DataService.setServiceUuid($scope.service.model.service.uuid);
+			DataService.setNetworkInstanceId(network.object[FIELD.ID.NETWORK_ID]);
+			
+			$scope.$broadcast(COMPONENT.DELETE_COMPONENT, {
+			    componentId : COMPONENT.NETWORK,
+			    callbackFunction : deleteCallbackFunction
+			});
+		};
+
+		$scope.deleteService = function(serviceObject) {
+
+			var serviceInstance = serviceObject.object;
+			
+			console.log("Removing Service " + $scope.service.instance.name);
+
+			DataService.setALaCarte (true);
+			DataService.setInventoryItem(serviceInstance);
+			
+			DataService.setModelInfo(COMPONENT.SERVICE, {
+				"modelInvariantId": serviceInstance[FIELD.ID.MODEL_INVAR_ID],
+				"modelVersion": $scope.service.model.service.version,
+				"modelNameVersionId": $scope.service.model.service.uuid,
+				"modelName": $scope.service.model.service.name,
+				"inputs": ""
+			});
+			
+			DataService.setSubscriberName(serviceObject[FIELD.ID.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[FIELD.ID.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+	
+			DataService.setGlobalCustomerId(serviceObject[COMPONENT.GLOBAL_CUSTOMER_ID]);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			
+			DataService.setServiceName($scope.service.model.service.name);
+			
+			DataService.setServiceUuid($scope.service.model.service.uuid);
+			
+			$scope.$broadcast(COMPONENT.DELETE_COMPONENT, {
+			    componentId : COMPONENT.SERVICE,
+			    callbackFunction : deleteServiceInstanceCallbackFunction
+			});
+		
+		};
+
+		$scope.deleteVfModule = function(serviceObject, vfModule, vnf) {
+
+			console.log("Removing VF-Module " + vfModule.name);
+			
+            var serviceInstance = serviceObject.object;
+
+			DataService.setInventoryItem(vfModule.object);
+			
+			var svcModel = $scope.service.convertedModel;
+
+			//var vnfModelInvariantUuid = vnf.object[FIELD.ID.MODEL_INVAR_ID];
+			var vnfModelVersionId = vnf.object[FIELD.ID.MODEL_VERSION_ID];
+			var vnfModelCustomizationUuid = vnf.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];;		
+			var vfModuleInstanceID = vfModule.object[FIELD.ID.VF_MODULE_ID];
+			if (vfModuleInstanceID == null) {
+				vfModuleInstanceID = "";
+			}
+			
+			var vnfModel = null;
+			var vfModuleModel = null;
+			
+			DataService.setModelInfo(COMPONENT.VF_MODULE, {
+				"modelInvariantId": "",
+				"modelVersion": "",
+				"modelNameVersionId": "",
+				"modelCustomizationName": "",
+				"customizationUuid": "",
+				"modelName": "",
+				"inputs": ""
+			});
+			
+			if ( (!($scope.isObjectEmpty(svcModel))) && ( !($scope.isObjectEmpty(svcModel.vnfs) ) ) ) {
+				if ( (svcModel.isNewFlow) && (vnfModelCustomizationUuid != null ) ) {
+					vnfModel = svcModel.vnfs[vnfModelCustomizationUuid];
+					
+					var vfModuleCustomizationUuid = vfModule.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+					if ( !($scope.isObjectEmpty(vnfModel.vfModules) ) && UtilityService.hasContents(vfModuleCustomizationUuid) ) {
+						
+						vfModuleModel = vnfModel.vfModules[vfModuleCustomizationUuid];
+						
+					}
+				}
+				else {
+					// old flow
+					if (vnfModelVersionId != null ) {
+						vnfModel = svcModel.vnfs[vnfModelVersionId];
+					}
+					//var vfModuleInvariantUuid = vfModule.object[FIELD.ID.MODEL_INVAR_ID];
+					var vfModuleModelVersionId = vfModule.object[FIELD.ID.MODEL_VERSION_ID];
+					if ( (!($scope.isObjectEmpty(vnfModel))) && (!($scope.isObjectEmpty(vnfModel.vfModules))) && 
+							  UtilityService.hasContents(vfModuleModelVersionId) ) {
+						vfModuleModel = vnfModel.vfModules[vfModuleModelVersionId];
+					}
+				}
+				if ( !($scope.isObjectEmpty(vfModuleModel)) ) {
+					DataService.setModelInfo(COMPONENT.VF_MODULE, {
+						"modelInvariantId": vfModuleModel.invariantUuid,
+						"modelVersion": vfModuleModel.version,
+						"modelNameVersionId": vfModuleModel.uuid,
+						"modelCustomizationName": vfModuleModel.modelCustomizationName,
+						"customizationUuid": vfModuleModel.customizationUuid,
+						"modelName": vfModuleModel.name,
+						"inputs": ""
+					});
+				}
+			}
+
+			DataService.setVnfInstanceId(vnf.object[FIELD.ID.VNF_ID]);
+			DataService.setVfModuleInstanceId(vfModuleInstanceID);
+			
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+	
+			DataService.setGlobalCustomerId(serviceObject[FIELD.ID.GLOBAL_CUST_ID]);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			
+			DataService.setServiceName($scope.service.model.service.name);
+			
+			DataService.setServiceUuid($scope.service.model.service.uuid);
+			
+			$scope.$broadcast(COMPONENT.DELETE_COMPONENT, {
+			    componentId : COMPONENT.VF_MODULE,
+			    callbackFunction : deleteCallbackFunction
+			});
+			
+			return;
+
+		};
+
+		$scope.deleteVnf = function(serviceObject, vnf) {
+
+			console.log("Removing VNF " + vnf.name);
+			
+			var serviceInstance = serviceObject.object;
+			var svcModel = $scope.service.convertedModel;
+			DataService.setInventoryItem(vnf.object);
+			
+			/*var vnftype = vnf.object['vnf-type'];
+			if (vnftype == null)
+				vnftype = "";
+			else
+			{
+				var n = vnftype.search("/");
+				if (n >= 0)
+					vnftype = vnftype.substring(n+1);
+			}*/
+		
+			var svcModel = $scope.service.convertedModel;
+			var vnfModelInvariantUuid = null;
+			var vnfModelVersion = null;
+			var vnfModelCustomizationUuid = null;
+			var vnfModel = null;
+			
+			vnfModelInvariantUuid = vnf.object[FIELD.ID.MODEL_INVAR_ID];
+			vnfModelVersionId = vnf.object[FIELD.ID.MODEL_VERSION_ID];
+			vnfModelCustomizationUuid = vnf.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+			
+			DataService.setModelInfo(COMPONENT.VNF, {
+				"modelInvariantId": vnfModelInvariantUuid,
+				"modelVersion": "",
+				"modelNameVersionId": vnfModelVersionId,
+				"modelCustomizationName": "",
+				"customizationUuid": vnfModelCustomizationUuid,
+				"modelName": "",
+				"inputs": ""
+			});
+			
+			if ( (!($scope.isObjectEmpty(svcModel))) && ( !($scope.isObjectEmpty(svcModel.vnfs) ) ) ) {
+				if ( (svcModel.isNewFlow) && (vnfModelCustomizationUuid != null ) ) {
+					vnfModel = svcModel.vnfs[vnfModelCustomizationUuid];
+				}
+				else {
+					vnfModel = svcModel.vnfs[vnfModelVersionId];
+				}
+				//console.log ( "vnf models: "); console.log ( JSON.stringify ($scope.service.convertedModel.vnfs, null, 4) );
+				if ( !($scope.isObjectEmpty(vnfModel) ) ) {
+						
+					DataService.setModelInfo(COMPONENT.VNF, {
+						"modelInvariantId": vnfModel.invariantUuid,
+						"modelVersion": vnfModel.version,
+						"modelNameVersionId": vnfModel.uuid,
+						"modelCustomizationName": vnfModel.modelCustomizationName,
+						"customizationUuid": vnfModel.customizationUuid,
+						"modelName": vnfModel.name,
+						"inputs": ""
+					});
+				}
+		    } 
+				
+			DataService.setVnfInstanceId(vnf.object[FIELD.ID.VNF_ID]);
+	
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+	
+			DataService.setGlobalCustomerId(serviceObject[FIELD.ID.GLOBAL_CUST_ID]);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			
+			DataService.setServiceName($scope.service.model.service.name);
+			
+			DataService.setServiceUuid($scope.service.model.service.uuid);
+			
+			$scope.$broadcast(COMPONENT.DELETE_COMPONENT, {
+			    componentId : COMPONENT.VNF,
+			    callbackFunction : deleteCallbackFunction
+			});
+		
+		};
+		
+		
+
+		$scope.deleteVolumeGroup = function(serviceObject, vnf, vfModule, volumeGroup) {
+
+			console.log("Removing Volume Group " + volumeGroup.name);
+			var haveModel = false;
+			var svcModel = $scope.service.convertedModel;
+			
+			var vnfModelInvariantUuid = null;
+			var vnfModelVersion = null;
+			var vnfModelCustomizationUuid = null;
+			var vnfModel = null;
+			
+			vnfModelInvariantUuid = vnf.object[FIELD.ID.MODEL_INVAR_ID];
+			vnfModelVersionId = vnf.object[FIELD.ID.MODEL_VERSION_ID];
+			vnfModelCustomizationUuid = vnf.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+		
+			DataService.setModelInfo(COMPONENT.VOLUME_GROUP, {
+				"modelInvariantId": "",
+				"modelVersion": "",
+				"modelNameVersionId": "",
+				"modelCustomizationName": "",
+				"customizationUuid": "",
+				"modelName": "",
+				"inputs": ""
+			});
+	
+			if ( (!($scope.isObjectEmpty(svcModel))) && ( !($scope.isObjectEmpty(svcModel.vnfs) ) ) ) {
+				if ( (svcModel.isNewFlow) && (vnfModelCustomizationUuid != null ) ) {
+					vnfModel = svcModel.vnfs[vnfModelCustomizationUuid];
+				}
+				else {
+					vnfModel = svcModel.vnfs[vnfModelVersionId];
+				}
+			}
+			
+						
+			// volume groups don't have model-invariant-id/version in a&ai.
+			// Their model-invariant-id/version is the one for the associated vfModule
+			
+			var vfModuleInvariantUuid = vfModule.object[FIELD.ID.MODEL_INVAR_ID];
+			var vfModuleModelVersionId = vfModule.object[FIELD.ID.MODEL_VERSION_ID];
+			var vfModuleCustomizationUuid = vfModule.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+			var volGroupModel = null;
+				
+			if ( !($scope.isObjectEmpty(vnfModel.volumeGroups) ) ) {
+				if ( ( !($scope.isObjectEmpty(vnfModel) ) ) && ( !($scope.isObjectEmpty(vnfModel.volumeGroups) ) ) ) {
+					if ( (svcModel.isNewFlow) && (UtilityService.hasContents(vfModuleCustomizationUuid) ) ){
+						volGroupModel = vnfModel.volumeGroups[vfModuleCustomizationUuid];
+					}
+					else {
+						volGroupModel = vnfModel.volumeGroups[vfModuleModelVersionId];
+					}
+					if ( !($scope.isObjectEmpty(volGroupModel) ) ) {
+						DataService.setModelInfo(COMPONENT.VOLUME_GROUP, {
+							"modelInvariantId": volGroupModel.invariantUuid,
+							"modelVersion": volGroupModel.version,
+							"modelNameVersionId": volGroupModel.uuid,
+							"modelCustomizationName": volGroupModel.modelCustomizationName,
+							"customizationUuid": volGroupModel.customizationUuid,
+							"modelName": volGroupModel.name,
+							"inputs": ""
+						});
+		
+					}
+				}
+			}
+
+			var serviceInstance = serviceObject.object;
+			
+            DataService.setInventoryItem(volumeGroup.object);
+		
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+			
+			DataService.setGlobalCustomerId(serviceObject[FIELD.ID.GLOBAL_CUST_ID]);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			
+			DataService.setServiceName($scope.service.model.service.name);
+			
+			DataService.setServiceUuid($scope.service.model.service.uuid);
+			DataService.setVnfInstanceId(vnf.nodeId);
+			DataService.setVolumeGroupInstanceId(volumeGroup.nodeId);
+			
+			$scope.$broadcast(COMPONENT.DELETE_COMPONENT, {
+			    componentId : COMPONENT.VOLUME_GROUP,
+			});
+		};
+		
+		$scope.deleteVnfVolumeGroup = function(serviceObject, vnf, volumeGroup) {
+
+			console.log("Removing Volume Group " + volumeGroup.name);
+            var serviceInstance = serviceObject.object;
+			
+            DataService.setInventoryItem(volumeGroup.object);
+        
+			var svcModel = $scope.service.convertedModel;
+			
+			var vnfModelInvariantUuid = vnf.object[FIELD.ID.MODEL_INVAR_ID];
+			var vnfModelVersionId = vnf.object[FIELD.ID.MODEL_VERSION_ID];
+			var vnfModelCustomizationUuid = vnf.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+			
+			var volGroupModelInvariantUuid = volumeGroup.object[FIELD.ID.MODEL_INVAR_ID];
+			var volGroupModelVersionId = volumeGroup.object[FIELD.ID.MODEL_VERSION_ID];
+			var volGroupModelCustomizationUuid = volumeGroup.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+			
+			var vnfModel = null;
+			var volGroupModel = null;
+			
+			// send an empty model by default since model is not required for deletes
+			DataService.setModelInfo(COMPONENT.VOLUME_GROUP, {});
+
+			if ( svcModel.isNewFlow ) {
+				vnfModel = svcModel.vnfs[vnfModelCustomizationUuid];
+				if ( UtilityService.hasContents (volGroupModelCustomizationUuid) ) {
+					volGroupModel = vnfModel.volumeGroups[volGroupModelCustomizationUuid];
+				}
+			}
+			else {
+				
+				vnfModel = svcModel.vnfs[vnfModelVersionId];
+				if (  UtilityService.hasContents (volGroupModelVersionId) ) {
+					volGroupModel = vnfModel.volumeGroups[volGroupModelVersionId];
+				}
+			}
+			if ( !($scope.isObjectEmpty(volGroupModel) ) ) {
+				DataService.setModelInfo(COMPONENT.VOLUME_GROUP, {		
+					"modelInvariantId": volGroupModel.invariantUuid,
+					"modelVersion": volGroupModel.version,
+					"modelNameVersionId": volGroupModel.uuid,
+					"modelName": volGroupModel.name,
+					"modelCustomizationName": volGroupModel.modelCustomizationName,
+					"customizationUuid": volGroupModel.customizationUuid,
+					"inputs": ""
+				});
+			}
+				
+			DataService.setVnfInstanceId(vnf.object[FIELD.ID.VNF_ID]);
+		
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+	
+			DataService.setGlobalCustomerId(serviceObject[FIELD.ID.GLOBAL_CUST_ID]);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			
+			DataService.setServiceName($scope.service.model.service.name);
+			
+			DataService.setServiceUuid($scope.service.model.service.uuid);
+			DataService.setVnfInstanceId(vnf.nodeId);
+			DataService.setVolumeGroupInstanceId(volumeGroup.nodeId);
+		
+			$scope.$broadcast(COMPONENT.DELETE_COMPONENT, {
+			    componentId : COMPONENT.VOLUME_GROUP,
+			    callbackFunction : deleteCallbackFunction
+			});
+		};
+
+		$scope.describeNetwork = function(serviceObject, networkObject) {
+			var serviceInstance = serviceObject.object;
+			var network = networkObject.object;
+			//console.log ("networkObject="); console.log (JSON.stringify(networkObject, null, 4));
+			
+			DataService.setResCustomizationUuid(" ");
+			
+			var svcModel = $scope.service.convertedModel;
+			var netModel = null;
+			
+			if ( !($scope.isObjectEmpty(network) ) ) {
+				
+				var netModelInvariantUuid = network[FIELD.ID.MODEL_INVAR_ID];
+				var netModelVersionId = network[FIELD.ID.MODEL_VERSION_ID];
+				var netModelCustomizationUuid = network[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+				
+				if ( UtilityService.hasContents (netModelCustomizationUuid) ) {
+					// set it to what came from a&ai 
+					DataService.setResCustomizationUuid(netModelCustomizationUuid);
+				}
+				
+				if ( (!($scope.isObjectEmpty(svcModel))) && (!($scope.isObjectEmpty(svcModel.networks))) ) {
+					if ( svcModel.isNewFlow ) {
+						netModel = svcModel.networks[netModelCustomizationUuid];
+					}
+					else {
+						netModel = svcModel.networks[netModelVersionId];
+					}
+					/*
+					 * The details pop-up should use a&ai info
+					 * if ( !($scope.isObjectEmpty(netModel) ) ) {
+						if (UtilityService.hasContents(netModel.customizationUuid)) {
+							DataService.setResCustomizationUuid(netModel.customizationUuid);
+						}
+					}*/
+				}
+			}
+			
+			DataService.setNetworkInstanceId(network[FIELD.ID.NETWORK_ID]);
+			DataService.setInventoryItem(networkObject);
+			DataService.setSubscriberName(serviceObject.subscriberName);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+			
+			$scope.$broadcast(COMPONENT.SHOW_COMPONENT_DETAILS, {
+			    componentId : COMPONENT.NETWORK
+			});
+		};
+
+		// for service instance id - no need for this!
+		$scope.describeService = function(serviceObject) {
+			var serviceInstance = serviceObject.object;
+		
+			DataService.setInventoryItem(serviceInstance);
+			//DataService.setModelInfo(serviceInstance['service-instance-id'], serviceInstance);
+			
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+			
+			//Display popup with additional service information
+			$scope.$broadcast(COMPONENT.SHOW_COMPONENT_DETAILS, {
+			    componentId : COMPONENT.SERVICE
+			});
+			
+		};
+
+		$scope.describeVfModule = function(serviceObject, vfModuleObject, vnf) {
+			var serviceInstance = serviceObject.object;
+			var vfModule = vfModuleObject.object;
+			
+			/*var vfModuleInvariantUuid = vfModule[FIELD.ID.MODEL_INVAR_ID];
+			var vfModuleModelVersionId = vfModule[FIELD.ID.MODEL_VERSION_ID];*/
+			var vfModuleCustomizationUuid = vfModule[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+
+			DataService.setCustomizationUuid(" ");
+			if ( UtilityService.hasContents (vfModuleCustomizationUuid) ) {
+				DataService.setCustomizationUuid(vfModuleCustomizationUuid);
+			}
+		
+			//Display popup with additional VF-Module information
+			DataService.setVfModuleInstanceId(vfModule[FIELD.ID.VF_MODULE_ID]);
+			DataService.setInventoryItem(vfModule)
+			
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+			
+			$scope.$broadcast(COMPONENT.SHOW_COMPONENT_DETAILS, {
+			    componentId : COMPONENT.VF_MODULE
+			});
+		};
+
+		$scope.getStatusOfVnf = function(serviceObject, vnfObject) {
+			var serviceInstance = serviceObject.object;
+			var vnf = vnfObject.object;
+		  
+			DataService.setVnfInstanceId(vnf[FIELD.ID.VNF_ID]);
+			DataService.setInventoryItem(vnf);
+			
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+			DataService.setServiceInstanceName(serviceInstance[FIELD.ID.SERVICE_INSTANCE_NAME]);
+			
+			$scope.$broadcast(COMPONENT.COMPONENT_STATUS, {
+			    componentId : COMPONENT.VNF,
+			    callbackFunction : updateProvStatusVnfCallbackFunction
+			});
+		};
+
+		$scope.describeVnf = function(serviceObject, vnfObject) {
+			var serviceInstance = serviceObject.object;
+			var vnf = vnfObject.object;
+			DataService.setResCustomizationUuid(" ");
+			
+			//var vnfInvariantUuid = vnf[FIELD.ID.MODEL_INVAR_ID];
+			//var vnfVersionId = vnf[FIELD.ID.MODEL_VERSION_ID];
+			var vnfCustomizationUuid = vnf[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+	
+			if ( UtilityService.hasContents (vnfCustomizationUuid) ) {
+				DataService.setResCustomizationUuid(vnfCustomizationUuid);
+		    }
+			//Display popup with additional VNF information
+			DataService.setVnfInstanceId(vnf[FIELD.ID.VNF_ID]);
+			DataService.setInventoryItem(vnf);
+			
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+			
+			$scope.$broadcast(COMPONENT.SHOW_COMPONENT_DETAILS, {
+			    componentId : COMPONENT.VNF
+			});
+		};
+
+		$scope.describeVolumeGroup = function(serviceObject, vnf, volumeGroupObject) {
+			
+			var serviceInstance = serviceObject.object;
+			var volumeGroup = volumeGroupObject.object;
+			
+			//var volGroupInvariantUuid = volumeGroup[FIELD.ID.MODEL_INVAR_ID];
+			//var volGroupVersionId = volumeGroup[FIELD.ID.MODEL_VERSION_ID];
+			var volGroupCustomizationUuid = volumeGroup[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+
+			DataService.setCustomizationUuid(" ");	
+			if ( UtilityService.hasContents(volGroupCustomizationUuid) ) {
+				DataService.setCustomizationUuid(volGroupCustomizationUuid);	 
+		    }
+			DataService.setVolumeGroupInstanceId(volumeGroup[FIELD.ID.VOLUME_GROUP_ID]);
+			DataService.setInventoryItem(volumeGroup);
+		
+			DataService.setSubscriberName(serviceObject[COMPONENT.SUBSCRIBER_NAME]);
+			DataService.setServiceType(serviceObject[COMPONENT.SERVICE_TYPE]);
+			DataService.setServiceInstanceId(serviceInstance[FIELD.ID.SERVICE_INSTANCE_ID]);
+			
+			
+			$scope.$broadcast(COMPONENT.SHOW_COMPONENT_DETAILS, {
+			    componentId : COMPONENT.VOLUME_GROUP
+			});
+		};
+
+		$scope.addNetworkInstance = function(netModel, existingVnfs) {
+			
+			// For networks we assume that we always follow the new flow
+			console.log("Adding network to service instance" + this.service.instance.name);
+			if ( VIDCONFIGURATION.VNF_STATUS_CHECK_ENABLED && (UtilityService.hasContents(existingVnfs)) && (existingVnfs.length > 0) ) {
+				var msg = VnfService.isVnfListStatusValid (existingVnfs);
+				if ( msg != "" ) {
+					alert ( msg );
+					return;
+				}
+			}
+			
+			DataService.setSubscriberName($scope.service.instance.subscriberName);
+			DataService.setGlobalCustomerId($scope.service.instance.globalCustomerId);
+			DataService.setServiceType($scope.service.instance.serviceType);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			DataService.setServiceInstanceId($scope.service.instance.id);
+			DataService.setServiceName($scope.service.model.service.name);
+			
+			DataService.setModelInfo(COMPONENT.NETWORK, {
+				"modelType": "network",
+				"modelInvariantId": netModel.invariantUuid,
+				"modelVersion": netModel.version,
+				"modelNameVersionId": netModel.uuid,
+				"modelName": netModel.name,
+				"modelCustomizationName": netModel.modelCustomizationName,
+				"customizationUuid": netModel.customizationUuid,
+				"inputs": "",
+				"displayInputs": netModel.displayInputs
+			});
+			
+			DataService.setModelInfo(COMPONENT.SERVICE, {
+				"modelInvariantId": $scope.service.model.service.invariantUuid, 
+				"modelVersion": $scope.service.model.service.version,
+				"modelNameVersionId": $scope.service.model.service.uuid,
+				"modelName": $scope.service.model.service.name,
+				"inputs": ""
+			});
+			
+			$scope.$broadcast(COMPONENT.CREATE_COMPONENT, {
+			    componentId : COMPONENT.NETWORK,
+			    callbackFunction : createVnfCallbackFunction
+			});		
+		};
+
+		$scope.addVnfInstance = function(vnf, existingVnfs) {
+				
+			if ( VIDCONFIGURATION.VNF_STATUS_CHECK_ENABLED && (UtilityService.hasContents(existingVnfs)) && (existingVnfs.length > 0) ) {
+				var msg = VnfService.isVnfListStatusValid (existingVnfs);
+				if ( msg != "" ) {
+					alert ( msg );
+					return;
+				}
+			}
+			DataService.setSubscriberName($scope.service.instance.subscriberName);
+			DataService.setGlobalCustomerId($scope.service.instance.globalCustomerId);
+			DataService.setServiceType($scope.service.instance.serviceType);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			DataService.setServiceInstanceId($scope.service.instance.id);
+			DataService.setServiceName($scope.service.model.service.name);
+			
+			console.log ( "existingVnfs: " ); console.log (JSON.stringify ( existingVnfs, null, 4));
+			var vnf_type = "";
+			var vnf_role = "";
+			var vnf_function = "";
+			var vnf_code = "";
+			
+			if (UtilityService.hasContents (vnf.nfType) ) {
+				vnf_type = vnf.nfType;
+			}
+			if (UtilityService.hasContents (vnf.nfRole) ) {
+				vnf_role = vnf.nfRole;
+			}
+			if (UtilityService.hasContents (vnf.nfFunction) ) {
+				vnf_function = vnf.nfFunction;
+			}
+			if (UtilityService.hasContents (vnf.nfCode) ) {
+				vnf_code = vnf.nfCode;
+			}
+			DataService.setModelInfo(COMPONENT.VNF, {
+				"modelType": "vnf",
+				"modelInvariantId": vnf.invariantUuid,
+				"modelVersion": vnf.version,
+				"modelNameVersionId": vnf.uuid,
+				"modelName": vnf.name,
+				"modelCustomizationName": vnf.modelCustomizationName,
+				"customizationUuid": vnf.customizationUuid,
+				"inputs": "",
+				"displayInputs": vnf.displayInputs,
+				"vnfType": vnf_type,
+				"vnfRole": vnf_role,
+				"vnfFunction": vnf_function,
+				"vnfCode": vnf_code
+			});
+			
+			DataService.setModelInstanceName($scope.service.model.service.name);
+			
+			DataService.setModelInfo(COMPONENT.SERVICE, {
+				"modelInvariantId": $scope.service.model.service.invariantUuid, 
+				"modelVersion": $scope.service.model.service.version,
+				"modelNameVersionId": $scope.service.model.service.uuid,
+				"modelName": $scope.service.model.service.name,
+				"inputs": ""
+			});
+			
+			$scope.$broadcast(COMPONENT.CREATE_COMPONENT, {
+			    componentId : COMPONENT.VNF,
+			    callbackFunction : createVnfCallbackFunction
+			});		
+		};
+
+		$scope.addVfModuleInstance = function(vnfInstance, vfModuleModel) {
+			
+			if ( VIDCONFIGURATION.VNF_STATUS_CHECK_ENABLED ) {
+				var msg = VnfService.isVnfStatusValid (vnfInstance);
+				if ( msg != "" ) {
+					alert ( msg );
+					return;
+				}
+				
+			}
+			var svcModel = $scope.service.convertedModel;
+			DataService.setSubscriberName($scope.service.instance.subscriberName);
+			DataService.setGlobalCustomerId($scope.service.instance.globalCustomerId);
+			DataService.setServiceType($scope.service.instance.serviceType);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			DataService.setServiceInstanceId($scope.service.instance.id);
+			DataService.setServiceName($scope.service.model.service.name);
+
+			var vnfModelInvariantUuid = vnfInstance.object[FIELD.ID.MODEL_INVAR_ID];
+			var vnfModelVersionId = vnfInstance.object[FIELD.ID.MODEL_VERSION_ID];
+			var vnfModelCustomizationUuid = vnfInstance.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+			var vnfModel = null;
+			if ( svcModel.isNewFlow ) {
+				vnfModel = svcModel.vnfs[vnfModelCustomizationUuid];
+			}
+			else {
+				vnfModel = svcModel.vnfs[vnfModelVersionId];
+			}
+			
+			var availableVolumeGroupList = [];
+			angular.forEach(vnfInstance[FIELD.ID.AVAILABLEVOLUMEGROUPS], function(volumeGroupInstance, key) {
+				availableVolumeGroupList.push({"instance": volumeGroupInstance});
+			});
+			
+			if (vfModuleModel.volumeGroupAllowed) {
+				DataService.setAvailableVolumeGroupList(availableVolumeGroupList);
+			}
+			
+			DataService.setModelInfo(COMPONENT.SERVICE, {
+				"modelInvariantId": $scope.service.model.service.invariantUuid,
+				"modelVersion": $scope.service.model.service.version,
+				"modelNameVersionId": $scope.service.model.service.uuid,
+				"modelName": $scope.service.model.service.name,
+				"inputs": ""
+			});
+
+			DataService.setVnfInstanceId(vnfInstance.object[FIELD.ID.VNF_ID]);
+			
+			DataService.setModelInfo(COMPONENT.VNF, {
+				"modelInvariantId": vnfModel.invariantUuid,
+				"modelVersion": vnfModel.version,
+				"modelNameVersionId": vnfModel.uuid,
+				"modelName": vnfModel.name,
+				"modelCustomizationName": vnfModel.modelCustomizationName,
+				"customizationUuid": vnfModel.customizationUuid,
+				"inputs": ""
+			});
+			
+			DataService.setModelInfo(COMPONENT.VF_MODULE, {
+				"modelInvariantId": vfModuleModel.invariantUuid,
+				"modelVersion": vfModuleModel.version,
+				"modelNameVersionId": vfModuleModel.uuid,
+				"customizationUuid": vfModuleModel.customizationUuid,
+				"modelCustomizationName": vfModuleModel.modelCustomizationName,
+				"modelName": vfModuleModel.name,
+				"inputs": ""
+			});
+			
+			$scope.$broadcast(COMPONENT.CREATE_COMPONENT, {
+			    componentId : COMPONENT.VF_MODULE,
+			    callbackFunction : createVfModuleCallbackFunction
+			});
+		
+		};
+
+		$scope.addVolumeGroupInstance = function(vnfInstance, volumeGroupModel) {
+			if ( VIDCONFIGURATION.VNF_STATUS_CHECK_ENABLED ) {
+				var msg = VnfService.isVnfStatusValid (vnfInstance);
+				if ( msg != "" ) {
+					alert ( msg );
+					return;
+				}
+			}
+			var svcModel = $scope.service.convertedModel;
+			DataService.setSubscriberName($scope.service.instance.subscriberName);
+			DataService.setGlobalCustomerId($scope.service.instance.globalCustomerId);
+			DataService.setServiceType($scope.service.instance.serviceType);
+			DataService.setServiceInstanceName($scope.service.instance.name);
+			DataService.setServiceInstanceId($scope.service.instance.id);
+			DataService.setServiceName($scope.service.model.service.name);
+
+			DataService.setModelInfo(COMPONENT.SERVICE, {
+				"modelInvariantId": $scope.service.model.service.invariantUuid,
+				"modelVersion": $scope.service.model.service.version,
+				"modelNameVersionId": $scope.service.model.service.uuid,
+				"modelName": $scope.service.model.service.name,
+				"inputs": ""
+			});
+
+			DataService.setVnfInstanceId(vnfInstance.object[FIELD.ID.VNF_ID]);
+
+			var vnfModelInvariantUuid = vnfInstance.object[FIELD.ID.MODEL_INVAR_ID];
+			var vnfModelVersionId = vnfInstance.object[FIELD.ID.MODEL_VERSION_ID];
+			var vnfCustomizationUuid = vnfInstance.object[FIELD.ID.MODEL_CUSTOMIZATION_ID];
+			var vnfModel = null;
+			
+			if ( svcModel.isNewFlow ) {
+				vnfModel = svcModel.vnfs[vnfCustomizationUuid];
+			}
+			else {
+				vnfModel = svcModel.vnfs[vnfModelVersionId];
+			}
+			
+			DataService.setModelInfo(COMPONENT.VNF, {
+				"modelInvariantId": vnfModel.invariantUuid,
+				"modelVersion": vnfModel.version,
+				"modelNameVersionId": vnfModel.uuid,
+				"modelName": vnfModel.name,
+				"modelCustomizationName": vnfModel.modelCustomizationName,
+				"customizationUuid": vnfModel.customizationUuid,
+				"inputs": ""
+			});
+			
+			DataService.setModelInfo(COMPONENT.VOLUME_GROUP, {
+				"modelInvariantId": volumeGroupModel.invariantUuid,
+				"modelVersion": volumeGroupModel.version,
+				"modelNameVersionId": volumeGroupModel.uuid,
+				"modelName": volumeGroupModel.name,
+				"modelCustomizationName": volumeGroupModel.modelCustomizationName,
+				"customizationUuid": volumeGroupModel.customizationUuid,
+				"inputs": ""
+			});
+			
+			$scope.$broadcast(COMPONENT.CREATE_COMPONENT, {
+			    componentId : COMPONENT.VOLUME_GROUP,
+			    callbackFunction : createVolumeGroupCallbackFunction
+			});
+		};
+
+		$scope.resetProgress = function() {
+			$scope.percentProgress = 0;
+			$scope.progressClass = FIELD.STYLE.PROGRESS_BAR_INFO;
+		};
+
+		$scope.setProgress = function(percentProgress) {
+			percentProgress = parseInt(percentProgress);
+			if (percentProgress >= 100) {
+				$scope.progressClass = FIELD.STYLE.PROGRESS_BAR_SUCCESS;					
+			}
+
+			if (percentProgress < $scope.percentProgress) {
+				return;
+			}
+
+			$scope.percentProgress = percentProgress;
+			$scope.progressWidth = {width: percentProgress + "%"};
+			if (percentProgress >= 5) {
+				$scope.progressText =  percentProgress + " %";
+			} else {
+				// Hidden since color combination is barely visible when progress portion is narrow.
+				$scope.progressText = "";
+			}
+		};
+		$scope.isObjectEmpty = function(o) {
+			var len = 0;
+			if (UtilityService.hasContents(o)){
+				var keys = Object.keys(o);
+				len = keys.length;
+				if ( len == 0 ) {
+					return true;
+				}
+				else {
+					return false;
+				}
+			}
+			else {
+				return true;
+			}
+		}
+		$scope.isMacro = function() {
+			if (UtilityService.arrayContains (VIDCONFIGURATION.MACRO_SERVICES, $scope.service.model.service.invariantUuid )) {
+				return(true);
+				
+			}
+			else {
+				return (false);
+			}
+		}
+		$scope.reloadRoute = function() {
+			$route.reload();
+		}
+		
+		var updateProvStatusVnfCallbackFunction = function(response) {
+			$scope.callbackResults = "";
+			var color = FIELD.ID.COLOR_NONE;
+			$scope.callbackStyle = {
+					"background-color" : color
+			};
+			$scope.reloadRoute();
+			/*
+			 * This 1/2 delay was only added to visually highlight the status
+			 * change. Probably not needed in the real application code.
+			 */
+			$timeout(function() {
+				$scope.callbackResults = UtilityService.getCurrentTime()
+				+ FIELD.STATUS.IS_SUCCESSFUL + response.isSuccessful;
+				if (response.isSuccessful) {
+					color = FIELD.ID.COLOR_8F8;
+					
+				} else {
+					color = FIELD.ID.COLOR_F88;
+				}
+				$scope.callbackStyle = {
+						"background-color" : color
+				};
+			}, 500);
+		
+		};
+
+		var createVnfCallbackFunction = function(response) {
+			$scope.callbackResults = "";
+			var color = FIELD.ID.COLOR_NONE;
+			$scope.callbackStyle = {
+					"background-color" : color
+			};
+			
+			/*
+			 * This 1/2 delay was only added to visually highlight the status
+			 * change. Probably not needed in the real application code.
+			 */
+			$timeout(function() {
+				$scope.callbackResults = UtilityService.getCurrentTime()
+				+ FIELD.STATUS.IS_SUCCESSFUL + response.isSuccessful;
+				if (response.isSuccessful) {
+					color = FIELD.ID.COLOR_8F8;
+					$scope.reloadRoute();
+				} else {
+					color = FIELD.ID.COLOR_F88;
+				}
+				$scope.callbackStyle = {
+						"background-color" : color
+				};
+			}, 500);
+			
+		
+			
+		};
+		
+		var deleteCallbackFunction = function(response) {
+			$scope.callbackResults = "";
+			var color = FIELD.ID.COLOR_NONE;
+			$scope.callbackStyle = {
+					"background-color" : color
+			};
+			
+			/*
+			 * This 1/2 delay was only added to visually highlight the status
+			 * change. Probably not needed in the real application code.
+			 */
+			$timeout(function() {
+				$scope.callbackResults = UtilityService.getCurrentTime()
+				+ FIELD.STATUS.IS_SUCCESSFUL + response.isSuccessful;
+				if (response.isSuccessful) {
+					color = FIELD.ID.COLOR_8F8;
+					$scope.reloadRoute();
+				} else {
+					color = FIELD.ID.COLOR_F88;
+				}
+				$scope.callbackStyle = {
+						"background-color" : color
+				};
+			}, 500);
+			
+		};
+		
+		var createVfModuleCallbackFunction = function(response) {
+			$scope.callbackResults = "";
+			var color = FIELD.ID.COLOR_NONE;
+			$scope.callbackStyle = {
+					"background-color" : color
+			};
+			
+			/*
+			 * This 1/2 delay was only added to visually highlight the status
+			 * change. Probably not needed in the real application code.
+			 */
+			$timeout(function() {
+				$scope.callbackResults = UtilityService.getCurrentTime()
+				+ FIELD.STATUS.IS_SUCCESSFUL + response.isSuccessful;
+				if (response.isSuccessful) {
+					color = FIELD.ID.COLOR_8F8;
+					$scope.reloadRoute();
+				} else {
+					color = FIELD.ID.COLOR_F88;
+				}
+				$scope.callbackStyle = {
+						"background-color" : color
+				};
+			}, 500);
+
+		};
+			
+		var deleteServiceInstanceCallbackFunction = function(response) {
+			$scope.callbackResults = "";
+			var color = FIELD.ID.COLOR_NONE;
+			$scope.callbackStyle = {
+					"background-color" : color
+			};
+			
+			/*
+			 * This 1/2 delay was only added to visually highlight the status
+			 * change. Probably not needed in the real application code.
+			 */
+			$timeout(function() {
+				$scope.callbackResults = UtilityService.getCurrentTime()
+				+ FIELD.STATUS.IS_SUCCESSFUL + response.isSuccessful;
+				if (response.isSuccessful) {
+					color = FIELD.ID.COLOR_8F8;
+					$location.path(COMPONENT.SERVICEMODELS_MODELS_SERVICES_PATH)
+				} else {
+					color = FIELD.ID.COLOR_F88;
+				}
+				$scope.callbackStyle = {
+						"background-color" : color
+				};
+			}, 500);
+
+		};
+	
+		var createVolumeGroupCallbackFunction = function(response) {
+			$scope.callbackResults = "";
+			var color = FIELD.ID.COLOR_NONE;
+			$scope.callbackStyle = {
+					"background-color" : color
+			};
+			
+			/*
+			 * This 1/2 delay was only added to visually highlight the status
+			 * change. Probably not needed in the real application code.
+			 */
+			$timeout(function() {
+				$scope.callbackResults = UtilityService.getCurrentTime()
+				+ FIELD.STATUS.IS_SUCCESSFUL + response.isSuccessful;
+				if (response.isSuccessful) {
+					color = FIELD.ID.COLOR_8F8;
+					$scope.reloadRoute();
+				} else {
+					color = FIELD.ID.COLOR_F88;
+				}
+				$scope.callbackStyle = {
+						"background-color" : color
+				};
+			}, 500);
+			
+			
+		
+		};
+			
+	});
+})();
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/ServiceModelController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/ServiceModelController.js
new file mode 100755
index 0000000..5d382e9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/ServiceModelController.js
@@ -0,0 +1,227 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+(function () {
+	'use strict';
+
+	appDS2.controller("ServiceModelController", function ($scope, $http, $location, COMPONENT, VIDCONFIGURATION, FIELD, DataService, vidService,
+			PropertyService, UtilityService) {
+
+		$scope.popup = {};
+		
+	//	var baseEndpoint = "vid";
+		var pathQuery = COMPONENT.SERVICES_DIST_STATUS_PATH + VIDCONFIGURATION.ASDC_MODEL_STATUS;
+		
+		if ( VIDCONFIGURATION.ASDC_MODEL_STATUS === FIELD.STATUS.ALL) {
+			pathQuery = COMPONENT.SERVICES_PATH;
+		}
+		
+		$scope.getServiceModels = function() {
+			$scope.status = FIELD.STATUS.FETCHING_SERVICE_CATALOG_ASDC;
+
+			$http.get(pathQuery)
+			.then(function successCallback(response) {
+				$scope.services = [];
+				if (angular.isArray(response.data)) {
+					$scope.services = response.data;
+					$scope.viewPerPage=10;
+					$scope.totalPage=$scope.services.length/$scope.viewPerPage;
+					$scope.sortBy=COMPONENT.NAME;
+					$scope.scrollViewPerPage=2;
+					$scope.currentPage=1;
+					$scope.searchCategory;
+					$scope.searchString="";
+					$scope.currentPageNum=1;
+					$scope.isSpinnerVisible = false;
+					$scope.isProgressVisible = false;
+				} else {
+					$scope.status = FIELD.STATUS.FAILED_SERVICE_MODELS_ASDC;
+					$scope.error = true;
+					$scope.isSpinnerVisible = false;
+				}
+			}, function errorCallback(response) {
+				console.log("Error: " + response);
+			});
+		}
+		
+		$scope.init = function() {
+    		var msecs = PropertyService.retrieveMsoMaxPollingIntervalMsec();
+    		PropertyService.setMsoMaxPollingIntervalMsec(msecs);
+    		
+    		var polls = PropertyService.retrieveMsoMaxPolls();
+    		PropertyService.setMsoMaxPolls(polls);
+    		
+    		//PropertyService.setMsoBaseUrl("testmso");
+    		PropertyService.setServerResponseTimeoutMsec(10000);
+        }
+		
+		$scope.prevPage = function() {
+			$scope.currentPage--;
+		}
+		
+		$scope.nextPage = function() {
+			$scope.currentPage++;
+		}
+		
+		$scope.createType = COMPONENT.A_LA_CARTE;
+		$scope.deployService = function(service) {
+			
+			
+			console.log("Instantiating SDC service " + service.uuid);
+			
+			$http.get(COMPONENT.SERVICES_PATH + service.uuid)
+				.then(function successCallback(getServiceResponse) {
+					
+					var serviceModel = getServiceResponse.data;
+					DataService.setServiceName(serviceModel.service.name);
+					
+					DataService.setModelInfo(COMPONENT.SERVICE, {
+						"modelInvariantId": serviceModel.service.invariantUuid,
+						"modelVersion": serviceModel.service.version,
+						"modelNameVersionId": serviceModel.service.uuid,
+						"modelName": serviceModel.service.name,
+						"description": serviceModel.service.description,
+						"category":serviceModel.service.category
+					});
+					DataService.setALaCarte (true);
+					$scope.createType = COMPONENT.A_LA_CARTE;
+					var broadcastType = COMPONENT.CREATE_COMPONENT;
+					
+					if (UtilityService.arrayContains (VIDCONFIGURATION.MACRO_SERVICES, serviceModel.service.invariantUuid )) {
+						DataService.setALaCarte (false);
+						$scope.createType = COMPONENT.MACRO;
+						var convertedAsdcModel = UtilityService.convertModel(serviceModel);
+						
+						//console.log ("display inputs "); 
+						//console.log (JSON.stringify ( convertedAsdcModel.completeDisplayInputs));
+						
+						DataService.setModelInfo(COMPONENT.SERVICE, {
+							"modelInvariantId": serviceModel.service.invariantUuid,
+							"modelVersion": serviceModel.service.version,
+							"modelNameVersionId": serviceModel.service.uuid,
+							"modelName": serviceModel.service.name,
+							"description": serviceModel.service.description,
+							"category":serviceModel.service.category,
+							"serviceEcompNaming": serviceModel.service.serviceEcompNaming,
+							"inputs": serviceModel.service.inputs,
+							"displayInputs": convertedAsdcModel.completeDisplayInputs
+						});
+					};
+					
+					$scope.$broadcast(broadcastType, {
+					    componentId : COMPONENT.SERVICE,
+					    callbackFunction : function(response) {
+					    	if (response.isSuccessful) {
+								vidService.setModel(serviceModel);
+								
+								var subscriberId = FIELD.STATUS.NOT_FOUND;
+								var serviceType = FIELD.STATUS.NOT_FOUND;
+								
+								var serviceInstanceId = response.instanceId;
+								
+								for (var i = 0; i < response.control.length; i++) {
+									if (response.control[i].id == COMPONENT.SUBSCRIBER_NAME) {
+										subscriberId = response.control[i].value;
+									} else if (response.control[i].id == "service-type") {
+										serviceType = response.control[i].value;
+									}
+								}
+								
+								
+								$scope.refreshSubs(subscriberId,serviceType,serviceInstanceId);
+							
+					    	}
+					    }
+					});
+					
+				}, function errorCallback(response) {
+					console.log("Error: " + response);
+				});
+		};
+		
+		$scope.refreshSubs = function(subscriberId, serviceType, serviceInstanceId) {
+			$scope.status = FIELD.STATUS.FETCHING_SUBSCRIBER_LIST_AAI;
+			$scope.init();
+			$http.get( FIELD.ID.AAI_REFRESH_FULL_SUBSCRIBERS, {
+
+			},{
+				timeout: $scope.responseTimeoutMsec
+			}).then(function(response){
+				
+				if (response.data.status < 200 || response.data.status > 202) {
+					$scope.showError(FIELD.ERROR.MSO)
+					return;
+				}
+
+				$scope.customer = response.data.customer; // get data from json
+
+				$scope.customerList = [];
+
+				$scope.serviceInstanceToCustomer = [];
+				
+				angular.forEach($scope.customer, function(subVal, subKey) {
+					var cust = { "globalCustomerId": subVal[FIELD.ID.GLOBAL_CUSTOMER_ID], "subscriberName": subVal[FIELD.ID.SUBNAME] };
+					$scope.customerList.push(cust);
+					if (subVal[FIELD.ID.SERVICE_SUBSCRIPTIONS] != null) {
+							angular.forEach(subVal[FIELD.ID.SERVICE_SUBSCRIPTIONS][FIELD.ID.SERVICE_SUBSCRIPTION], function(serviceSubscription, key) {
+								$scope.serviceInstanceId = [];
+								if (serviceSubscription[FIELD.ID.SERVICE_TYPE] != null) {
+									$scope.serviceType = serviceSubscription[FIELD.ID.SERVICE_TYPE];
+								} else {
+									$scope.serviceType = FIELD.STATUS.NO_SERVICE_SUBSCRIPTION_FOUND;
+								}
+								if (serviceSubscription[FIELD.ID.SERVICE_INSTANCES] != null) {
+									angular.forEach(serviceSubscription[FIELD.ID.SERVICE_INSTANCES][FIELD.ID.SERVICE_INSTANCE], function(instValue, instKey) {
+										var foo = { "serviceInstanceId": instValue[FIELD.ID.SERVICE_INSTANCE_ID], 
+												"globalCustomerId": subVal[FIELD.ID.GLOBAL_CUSTOMER_ID],
+												"subscriberName": subVal[FIELD.ID.SUBNAME] };
+										$scope.serviceInstanceToCustomer.push(foo);
+									});
+								}
+							});
+					}
+				});	
+				DataService.setServiceInstanceToCustomer($scope.serviceInstanceToCustomer);
+				var serviceIdList = [];
+				$http.get( FIELD.ID.AAI_GET_SERVICES, {
+				},{
+					timeout: $scope.responseTimeoutMsec
+				}).then(function(response) {
+					angular.forEach(response.data, function(value, key) {
+						angular.forEach(value, function(subVal, key) {
+							var newVal = { "id" : subVal[FIELD.ID.SERVICE_ID], "description" : subVal[FIELD.ID.SERVICE_DESCRIPTION] };
+							serviceIdList.push(newVal);
+							DataService.setServiceIdList(serviceIdList);
+							
+							$location.search({
+								"subscriberId": subscriberId,
+								"serviceType": serviceType,
+								"serviceInstanceId": serviceInstanceId
+							});
+							
+							$location.path(COMPONENT.INSTANTIATE_PATH);
+						});
+					});
+				});	
+			})
+			["catch"]($scope.handleServerError);
+		};
+	});
+})();
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/VidApp.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/VidApp.js
new file mode 100755
index 0000000..dcde2ec
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/VidApp.js
@@ -0,0 +1,79 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+(function () {
+  'use strict';
+  
+  appDS2.config(['$routeProvider', '$locationProvider', function ($routeProvider) {
+      $routeProvider
+        .when('/models/services', {
+          controller: 'ServiceModelController',
+          templateUrl: 'app/vid/scripts/view-models/serviceModels.htm'
+        })
+        .when('/models/services/createInstance', {
+          controller: 'aaiSubscriberController',
+          templateUrl: 'app/vid/scripts/view-models/createInstanceServiceModels.htm'
+        })
+        .when('/instances/services', {
+    		templateUrl : "app/vid/scripts/view-models/aaiGetSubs.htm", 
+    		controller : "aaiSubscriberController"
+        })
+        .when('/instances/subscribers', {
+    		templateUrl : "app/vid/scripts/view-models/aaiGetSubscriberList.htm", 
+    		controller : "aaiSubscriberController"
+        })
+        .when('/instances/serviceTypes', {
+    		templateUrl : "app/vid/scripts/view-models/aaiServiceTypes.htm", 
+    		controller : "aaiSubscriberController"
+        })
+        .when('/instances/subdetails', {
+    		templateUrl : "app/vid/scripts/view-models/aaiSubDetails.htm", 
+    		controller : "aaiSubscriberController"
+        })
+        .when('/instantiate', {
+          controller: 'InstantiationController',
+          templateUrl: 'app/vid/scripts/view-models/instantiate.htm'
+        })
+        .otherwise({
+        	redirectTo: '/models/services'
+        });
+    }]);
+  
+  appDS2.service('vidService', function() {
+	  var _model = undefined;
+	  var _instance = undefined;
+	  
+	  this.setModel = function(model) {
+		  _model = model;
+	  };
+	  
+	  this.getModel = function() {
+		  return _model;
+	  };
+	  
+	  this.setInstance = function(instance) {
+		  _instance = instance;
+	  };
+	  
+	  this.getInstance = function() {
+		  return _instance;
+	  };
+  });
+})();
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/aaiSubscriberController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/aaiSubscriberController.js
new file mode 100755
index 0000000..5caa329
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/aaiSubscriberController.js
@@ -0,0 +1,821 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+appDS2.controller("aaiSubscriberController", [ "COMPONENT", "FIELD", "PARAMETER", "DataService", "PropertyService", "$scope", "$http", "$timeout", "$location", "$log", "$route", "VIDCONFIGURATION", "UtilityService", "vidService","AaiService",
+                                            function(COMPONENT, FIELD, PARAMETER, DataService, PropertyService, $scope, $http, $timeout, $location, $log, $route, VIDCONFIGURATION, UtilityService, vidService, AaiService) {
+
+	$scope.showVnfDetails = function(vnf) {
+		console.log("showVnfDetails");
+		DataService.setVnfInstanceId(COMPONENT.VNF_INSTANCE_ID);
+		DataService
+		.setInventoryItem(aaiResult[FIELD.ID.INVENTORY_RESPONSE_ITEMS][FIELD.ID.INVENTORY_RESPONSE_ITEM][0]);
+
+		$scope.$broadcast(COMPONENT.SHOW_COMPONENT_DETAILS, {
+			componentId : COMPONENT.VNF,
+			callbackFunction : callbackFunction
+		});
+	}
+	$scope.popup = new Object();
+
+
+	$scope.isPopupVisible = false;
+	$scope.defaultBaseUrl = "";
+	$scope.responseTimeoutMsec = 60000;
+
+	$scope.serviceTypes=[ FIELD.PROMPT.SELECT_SERVICE ];
+	$scope.defaultSubscriberName=[ FIELD.PROMPT.SELECT_SUB ];
+
+	var callbackFunction = function(response) {
+		alert(response);
+	};
+
+	$scope.getSubs = function() {
+		$scope.init();
+		$scope.fetchSubs(FIELD.PROMPT.FETCHING_SUBS);
+		$scope.fetchServices();
+
+	};
+	
+	 $scope.cancelCreateSI = function(){
+	 		
+			window.location.href = COMPONENT.WELCOME_PATH;
+			
+		};
+	 
+		$scope.getServiceTypes = function(globalCustomerId){
+			DataService.setGlobalCustomerId(globalCustomerId);
+			DataService.setServiceIdList($scope.customerList)
+
+			if (globalCustomerId !== "" && globalCustomerId !== undefined ) {
+				window.location.href = COMPONENT.SERVICE_TYPE_LIST_PATH + $scope.serviceTypeList;
+			}
+		}
+		
+		$scope.refreshServiceTypes = function(globalCustomerId){
+			DataService.setGlobalCustomerId(globalCustomerId);
+			
+			$scope.getServiceTypesList();
+		}
+		
+		$scope.subId="";
+		$scope.createSubscriberName="";
+		$scope.serviceTypeList={};
+		$scope.custSubList=[];
+		$scope.getServiceTypesList = function(){
+			var notFound = true;
+			var globalCustomerId = DataService.getGlobalCustomerId();
+			$scope.custSubList = DataService.getServiceIdList();
+			if(globalCustomerId !== "" && globalCustomerId !== undefined ){
+				$scope.subId=globalCustomerId;
+				$scope.init();
+				$scope.status = FIELD.PROMPT.FETCHING_SERVICE_TYPES;
+				DataService.setGlobalCustomerId(globalCustomerId);
+				
+				AaiService.getSubscriptionServiceTypeList(DataService
+						.getGlobalCustomerId(), function(response) {
+					notFound = false;
+					$scope.setProgress(100); // done
+					$scope.status = FIELD.STATUS.DONE;
+					$scope.isSpinnerVisible = false;
+					$scope.serviceTypeList = response;
+					for(var i=0; i<$scope.custSubList.length;i++){
+						if(globalCustomerId === $scope.custSubList[i].globalCustomerId){
+							$scope.createSubscriberName = $scope.custSubList[i].subscriberName;
+						}
+					}
+				}, function(response) { // failure
+					$scope.showError(FIELD.ERROR.AAI);
+					$scope.errorMsg = FIELD.ERROR.FETCHING_SERVICE_TYPES + response.status;
+					$scope.errorDetails = response.data;
+				});
+			} else {
+				alert(FIELD.ERROR.SELECT);
+			}
+			
+		};
+		
+		$scope.subList = [];
+		$scope.getAaiServiceModels = function(selectedServicetype,subName){
+			DataService.setGlobalCustomerId(selectedServicetype);
+			DataService.setServiceIdList($scope.serviceTypeList)
+			DataService.setSubscriberName(subName);
+			
+			DataService.setSubscribers($scope.custSubList);
+
+			if (selectedServicetype !== "" && selectedServicetype !== 'undefined') {
+				$location.path(COMPONENT.CREATE_INSTANCE_PATH);
+			}			
+		};
+		
+		$scope.serviceTypeName="";
+		$scope.getAaiServiceModelsList = function(){
+			var globalCustomerId="";
+             var serviceTypeId = DataService.getGlobalCustomerId();			
+			$scope.serviceTypeList = DataService.getServiceIdList();
+			$scope.createSubscriberName = DataService.getSubscriberName();
+			$scope.status = FIELD.STATUS.FETCHING_SERVICE_CATALOG;
+			$scope.custSubList = DataService.getSubscribers();
+			for(var i=0; i<$scope.serviceTypeList.length;i++){
+						if(parseInt(serviceTypeId) === i ){
+							$scope.serviceTypeName = $scope.serviceTypeList[i];
+						}
+					};
+		    for(var i=0; i<$scope.custSubList.length;i++){
+						if($scope.createSubscriberName === $scope.custSubList[i].subscriberName){
+							globalCustomerId = $scope.custSubList[i].globalCustomerId;
+						}
+					};
+			
+			var pathQuery ="";
+			
+			if(null !== globalCustomerId && "" !== globalCustomerId && undefined !== globalCustomerId
+					&& null !== serviceTypeId && "" !== serviceTypeId && undefined !== serviceTypeId){
+				pathQuery = COMPONENT.SERVICES_PATH +globalCustomerId+"/"+$scope.serviceTypeName;
+			}
+			
+			AaiService.getServiceModels(globalCustomerId,$scope.serviceTypeName,function(response) { // success
+				console.log("service models : "+response.data);
+				DataService.setServiceIdList(response);
+			},  function(response) { // failure
+				$scope.showError(FIELD.ERROR.AAI);
+				$scope.errorMsg = FIELD.ERROR.FETCHING_SERVICES+ response.status;
+				$scope.errorDetails = response.data;
+			});
+			
+			/*$http.get('/aai_get_services/'+globalCustomerId+''+$scope.serviceTypeName)
+			.then(function successCallback(response) {
+				$scope.services = [];
+				if (angular.isArray(response.data)) {
+					$scope.services = response.data;
+					$scope.viewPerPage=10;
+					$scope.totalPage=$scope.services.length/$scope.viewPerPage;
+					$scope.sortBy="name";
+					$scope.scrollViewPerPage=2;
+					$scope.currentPage=1;
+					$scope.searchCategory;
+					$scope.searchString="";
+					$scope.currentPageNum=1;
+					$scope.isSpinnerVisible = false;
+					$scope.isProgressVisible = false;
+				} else {
+					$scope.status = "Failed to get service models from SDC.";
+					$scope.error = true;
+					$scope.isSpinnerVisible = false;
+				}
+			}, function errorCallback(response) {
+				console.log("Error: " + response);
+			}); */
+		
+			
+		};
+		
+		 $scope.cancelCreateSIType = function(){
+		 		
+				window.location.href = COMPONENT.SERVICE_MODLES_INSTANCES_SUBSCRIBERS_PATH;
+				
+			}
+
+	$scope.fetchServices = function() { 
+		var serviceIdList = [];
+
+		AaiService.getServices2(function(response) { // success
+			DataService.setServiceIdList(response);
+		},  function(response) { // failure
+			$scope.showError(FIELD.ERROR.AAI);
+			$scope.errorMsg = FIELD.ERROR.FETCHING_SERVICES + response.status;
+			$scope.errorDetails = response.data;
+		});
+	}
+
+	$scope.refreshSubs = function() {
+		$scope.fetchSubs(FIELD.PROMPT.REFRESH_SUB_LIST);
+		$scope.fetchServices();
+	};
+
+	$scope.fetchSubs = function(status) {
+		$scope.status = status;
+
+		AaiService.getSubList(function(response) { // sucesss
+			$scope.setProgress(100); // done
+			$scope.status = FIELD.STATUS.DONE;
+			$scope.isSpinnerVisible = false;
+			$scope.customerList = response;
+		},  function(response) { // failure
+			$scope.showError(FIELD.ERROR.AAI);
+			$scope.errorMsg = FIELD.ERROR.AAI_FETCHING_CUST_DATA + response.status;
+			$scope.errorDetails = response.data;
+		});
+	}
+
+
+	$scope.getSubDetails = function(request) {
+
+		$scope.init();
+		$scope.selectedSubscriber = $location.search().selectedSubscriber;
+		$scope.selectedServiceInstance = $location.search().selectedServiceInstance;
+		$scope.status = FIELD.STATUS.FETCHING_SUB_DETAILS + $scope.selectedSubscriber;
+
+		$scope.displayData = [];
+		AaiService.getSubDetails($scope.selectedSubscriber, $scope.selectedServiceInstance, function(displayData, subscriberName) {
+			$scope.displayData = displayData;
+			$scope.viewPerPage=10;
+			$scope.totalPage=$scope.displayData.length/$scope.viewPerPage;
+			$scope.scrollViewPerPage=2;
+			$scope.currentPage=1;
+			$scope.searchCategory;
+			$scope.searchString="";
+			$scope.currentPageNum=1;
+			$scope.defaultSort=COMPONENT.SUBSCRIBER_NAME;
+				$scope.setProgress(100); // done
+			$scope.status = FIELD.STATUS.DONE;
+			$scope.isSpinnerVisible = false;
+			$scope.subscriberName = subscriberName;
+		}, function(response) { 
+			$scope.showError(FIELD.ERROR.AAI);
+			$scope.errorMsg = FIELD.ERROR.AAI_FETCHING_CUST_DATA + response.status;
+			$scope.errorDetails = response.data;
+		});
+	}
+
+
+	$scope.$on(COMPONENT.MSO_DELETE_REQ, function(event, request) {
+		// $log.debug("deleteInstance: request:");
+		// $log.debug(request);
+		$scope.init();
+
+		$http.post($scope.baseUrl + request.url, {
+			requestDetails: request.requestDetails
+		},{
+			timeout: $scope.responseTimeoutMsec
+		}).then($scope.handleInitialResponse)
+		["catch"]($scope.handleServerError);
+	});
+
+	$scope.init = function() {
+
+		//PropertyService.setAaiBaseUrl("testaai");
+		//PropertyService.setAsdcBaseUrl("testasdc");
+
+		// takes a default value, retrieves the prop value from the file system and sets it
+		var msecs = PropertyService.retrieveMsoMaxPollingIntervalMsec();
+		PropertyService.setMsoMaxPollingIntervalMsec(msecs);
+
+		// takes a default value, retrieves the prop value from the file system and sets it
+		var polls = PropertyService.retrieveMsoMaxPolls();
+		PropertyService.setMsoMaxPolls(polls);
+
+		//PropertyService.setMsoBaseUrl("testmso");
+		PropertyService.setServerResponseTimeoutMsec();
+
+		/*
+		 * Common parameters that would typically be set when the page is
+		 * displayed for a specific service instance id.
+		 */
+
+		$scope.baseUrl = $scope.defaultBaseUrl;
+
+		$scope.isSpinnerVisible = true;
+		$scope.isProgressVisible = true;
+		$scope.isPopupVisible = true;
+		$scope.requestId = "";
+		$scope.error = "";
+		$scope.pollAttempts = 0;
+		$scope.log = "";				
+		$scope.enableCloseButton(false);
+		$scope.resetProgress();
+		$scope.setProgress(2); // Show "a little" progress
+	}
+
+	$scope.getComponentList = function(event, request) {
+
+		$scope.isSpinnerVisible = true;
+		$scope.isProgressVisible = true;
+		$scope.isPopupVisible = true;
+		$scope.requestId = "";
+		$scope.error = "";
+		$scope.pollAttempts = 0;
+		$scope.log = "";				
+
+		$scope.resetProgress();
+		$scope.setProgress(2); // Show "a little" progress
+
+		$scope.globalCustomerId = $location.search().subscriberId;
+		$scope.serviceType = $location.search().serviceType;
+		$scope.serviceInstanceId = $location.search().serviceInstanceId;
+		$scope.subscriberName = $location.search().subscriberName;
+
+		//$scope.getAsdcModel($location.search().modelUuid);
+
+		$scope.namedQueryId = VIDCONFIGURATION.COMPONENT_LIST_NAMED_QUERY_ID;
+		$scope.status = FIELD.STATUS.FETCHING_SERVICE_INST_DATA + $scope.serviceInstanceId;
+
+		AaiService.runNamedQuery($scope.namedQueryId, $scope.globalCustomerId, $scope.serviceType, $scope.serviceInstanceId, 
+				function(response) { //success
+			$scope.handleInitialResponseInventoryItems(response);
+			$scope.setProgress(100); // done
+			$scope.status = FIELD.STATUS.DONE;
+			$scope.isSpinnerVisible = false;
+		}, 
+		function(response){ //failure
+			$scope.showError(FIELD.ERROR.AAI);
+			$scope.errorMsg = FIELD.ERROR.FETCHING_SERVICE_INSTANCE_DATA + response.status;
+			$scope.errorDetails = response.data;
+		}
+		);
+
+	}
+
+	$scope.handleServerError = function(response, status) {				
+		alert(response.statusText);
+	}
+	
+	$scope.getAsdcModel = function(disData) {
+
+		console.log ("disData"); console.log (JSON.stringify (disData, null, 4));
+		
+		if ( !(UtilityService.hasContents (disData.aaiModelVersionId)) ) {
+			$scope.errorMsg = FIELD.ERROR.MODEL_VERSION_ID_MISSING;
+			alert($scope.errorMsg);
+			return;
+		}
+		
+		// aaiModelVersionId is the model uuid
+		var pathQuery = COMPONENT.SERVICES_PATH + disData.aaiModelVersionId;
+		$http({
+			  method: 'GET',
+			  url: pathQuery
+			}).then(function successCallback(response) {
+				vidService.setModel(response.data);
+				window.location.href = COMPONENT.INSTANTIATE_ROOT_PATH + disData.globalCustomerId + COMPONENT.SUBSCRIBERNAME_SUB_PATH + disData.subscriberName + COMPONENT.SERVICETYPE_SUB_PATH + disData.serviceType + COMPONENT.SERVICEINSTANCEID_SUB_PATH + disData.serviceInstanceId;
+				console.log("aaiSubscriber getAsdcModel DONE!!!!");
+			  }, function errorCallback(response) {
+				  console.log("aaiSubscriber getAsdcModel - No matching model found matching the A&AI model version ID = " + disData.aaiModelVersionId);
+					$scope.errorMsg = FIELD.ERROR.NO_MATCHING_MODEL_AAI + disData.aaiModelVersionId;
+					alert($scope.errorMsg);
+			  });
+
+	}
+
+	$scope.getTenants = function(globalCustomerId) {
+		$http.get(FIELD.ID.AAI_GET_TENTANTS + globalCustomerId)
+		.then(function successCallback(response) {
+			return response.data;
+			//$location.path("/instantiate");
+		}, function errorCallback(response) {
+			//TODO
+		});
+	}
+
+	$scope.handleInitialResponseInventoryItems = function(response) {
+
+		$scope.inventoryResponseItemList = response.data[FIELD.ID.INVENTORY_RESPONSE_ITEM]; // get data from json
+		console.log($scope.inventoryResponseItemList.toString());
+
+		$scope.displayData = [];
+		$scope.vnfs = [];
+
+		$scope.counter = 100;
+
+		$scope.subscriberName = "";
+		// just look up the subscriber name in A&AI here...
+		AaiService.getSubscriberName($scope.globalCustomerId, function(response) {
+			$scope.subscriberName = response;
+			DataService.setSubscriberName($scope.subscriberName);
+
+			angular.forEach($scope.inventoryResponseItemList, function(inventoryResponseItem, key) {
+
+				$scope.inventoryResponseItem = inventoryResponseItem;
+
+				$scope.service.instance = {
+						"name": $scope.inventoryResponseItem[FIELD.ID.SERVICE_INSTANCE][FIELD.ID.SERVICE_INSTANCE_NAME],
+						"serviceInstanceId": $scope.serviceInstanceId,
+						"serviceType": $scope.serviceType,
+						"globalCustomerId": $scope.globalCustomerId,
+						"subscriberName": $scope.subscriberName,
+						"id": $scope.serviceInstanceId,
+						"inputs": {
+							"a": {
+								"type": PARAMETER.STRING,
+								"description": FIELD.PROMPT.VAR_DESCRIPTION_A,
+								"default": FIELD.PROMPT.DEFAULT_A
+							},
+							"b": {
+								"type": PARAMETER.STRING,
+								"description": FIELD.PROMPT.VAR_DESCRIPTION_B,
+								"default": FIELD.PROMPT.DEFAULT_B
+							},
+						},
+						"object": $scope.inventoryResponseItem[FIELD.ID.SERVICE_INSTANCE],
+						"vnfs": [],
+						"networks": []
+				}
+
+				if (inventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS] != null) {
+
+					angular.forEach(inventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS][FIELD.ID.INVENTORY_RESPONSE_ITEM], function(subInventoryResponseItem, key) {
+						// i expect to find vnfs now
+
+						if (subInventoryResponseItem[FIELD.ID.L3_NETWORK] != null) { 
+							var l3NetworkObject = subInventoryResponseItem[FIELD.ID.L3_NETWORK];
+							var l3Network = { "id": $scope.counter++, 
+									"name": l3NetworkObject[FIELD.ID.NETWORK_NAME],
+									"itemType": FIELD.ID.L3_NETWORK,
+									"nodeId": l3NetworkObject[FIELD.ID.NETWORK_ID],
+									"nodeType": l3NetworkObject[FIELD.ID.NETWORK_TYPE],
+									"nodeStatus": l3NetworkObject[FIELD.ID.ORCHESTRATION_STATUS],
+									"object": l3NetworkObject,
+									"nodes": [],
+									"subnets": []
+							};
+							if (subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS] != null) {
+								//console.log ("subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS]=");
+								//console.log (JSON.stringify (subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS], null, 4 ));
+								angular.forEach(subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS][FIELD.ID.INVENTORY_RESPONSE_ITEM], function(subSubInventoryResponseItem, key) {
+									//console.log (JSON.stringify (subSubInventoryResponseItem, null, 4 ));
+									var subnet = {};
+									var subnetObject;
+									if (subSubInventoryResponseItem[FIELD.ID.SUB_NET] != null) {
+										subnetObject = subSubInventoryResponseItem[FIELD.ID.SUB_NET];
+										subnet = {
+												"subnet-id": subnetObject[FIELD.ID.SUBNET_ID],
+												"subnet-name": subnetObject[FIELD.ID.SUBNET_NAME],
+												"gateway-address": subnetObject[FIELD.ID.GATEWAY_ADDRESS],
+												"network-start-address": subnetObject[FIELD.ID.NETWORK_START_ADDRESS],
+												"cidr-mask": subnetObject[FIELD.ID.CIDR_MASK]
+										};
+										l3Network.subnets.push(subnet);
+									}
+								});
+							}
+							$scope.service.instance[FIELD.ID.NETWORKS].push(l3Network);
+						}
+
+						if (subInventoryResponseItem[FIELD.ID.GENERIC_VNF] != null) {
+							var genericVnfObject = subInventoryResponseItem[FIELD.ID.GENERIC_VNF];
+
+							var genericVnf = {
+									"name": genericVnfObject[FIELD.ID.VNF_NAME],
+									"id": $scope.counter++, 
+									"itemType": COMPONENT.VNF, 
+									"nodeType": genericVnfObject[FIELD.ID.VNF_TYPE],
+									"nodeId": genericVnfObject[FIELD.ID.VNF_ID],
+									"nodeStatus": genericVnfObject[FIELD.ID.ORCHESTRATION_STATUS],
+									"object": genericVnfObject,
+									"vfModules": [],
+									"volumeGroups": [],
+									"availableVolumeGroups": []
+							};
+							$scope.service.instance[FIELD.ID.VNFS].push(genericVnf);
+
+							// look for volume-groups
+							if (subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS] != null) {
+								angular.forEach(subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS][FIELD.ID.INVENTORY_RESPONSE_ITEM], function(vfmodules, key) {
+
+									if (vfmodules[FIELD.ID.VOLUME_GROUP] != null) { 
+										var volumeGroupObject = vfmodules[FIELD.ID.VOLUME_GROUP];
+										var volumeGroup = { "id": $scope.counter++, 
+												"name": volumeGroupObject[FIELD.ID.VOLUME_GROUP_NAME],
+												"itemType": FIELD.ID.VOLUME_GROUP,
+												"nodeId": volumeGroupObject[FIELD.ID.VOLUME_GROUP_ID],
+												"nodeType": volumeGroupObject[FIELD.ID.VNF_TYPE],
+												"nodeStatus": volumeGroupObject[FIELD.ID.ORCHESTRATION_STATUS],
+												"object": volumeGroupObject,
+												"nodes": []
+										};
+										genericVnf[FIELD.ID.VOLUMEGROUPS].push(volumeGroup);
+										genericVnf[FIELD.ID.AVAILABLEVOLUMEGROUPS].push(volumeGroup);
+									}
+								});
+							}
+							// now we've loaded up the availableVolumeGroups, we can use it
+							if (subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS] != null) {
+								angular.forEach(subInventoryResponseItem[FIELD.ID.INVENTORY_RESPONSE_ITEMS][FIELD.ID.INVENTORY_RESPONSE_ITEM], function(vfmodules, key) {
+
+									if (vfmodules[FIELD.ID.VF_MODULE] != null) { 
+										var vfModuleObject = vfmodules[FIELD.ID.VF_MODULE];
+										var vfModule = { "id": $scope.counter++,
+												"name": vfModuleObject[FIELD.ID.VF_MODULE_NAME],
+												"itemType": FIELD.ID.VF_MODULE,
+												"nodeType": FIELD.ID.VF_MODULE, 
+												"nodeStatus": vfModuleObject[FIELD.ID.ORCHESTRATION_STATUS],
+												"volumeGroups": [],
+												"object": vfModuleObject,
+												"networks": []
+										};
+										genericVnf[FIELD.ID.VF_MODULES].push(vfModule);
+										if (vfmodules[FIELD.ID.INVENTORY_RESPONSE_ITEMS] != null) {
+											angular.forEach(vfmodules[FIELD.ID.INVENTORY_RESPONSE_ITEMS][FIELD.ID.INVENTORY_RESPONSE_ITEM], function(networks, key) {
+												if (networks[FIELD.ID.L3_NETWORK] != null) { 
+													var l3NetworkObject = networks[FIELD.ID.L3_NETWORK];
+													var l3Network = { "id": $scope.counter++, 
+															"name": l3NetworkObject[FIELD.ID.NETWORK_NAME],
+															"itemType": FIELD.ID.L3_NETWORK,
+															"nodeId": l3NetworkObject[FIELD.ID.NETWORK_ID],
+															"nodeType": l3NetworkObject[FIELD.ID.NETWORK_TYPE],
+															"nodeStatus": l3NetworkObject[FIELD.ID.ORCHESTRATION_STATUS],
+															"object": l3NetworkObject,
+															"nodes": []
+													};
+													vfModule[FIELD.ID.NETWORKS].push(l3Network);
+												}
+												if (networks[FIELD.ID.VOLUME_GROUP] != null) { 
+													var volumeGroupObject = networks[FIELD.ID.VOLUME_GROUP];
+
+													var volumeGroup = { "id": $scope.counter++, 
+															"name": volumeGroupObject[FIELD.ID.VOLUME_GROUP_NAME],
+															"itemType": FIELD.ID.VOLUME_GROUP,
+															"nodeId": volumeGroupObject[FIELD.ID.VOLUME_GROUP_ID],
+															"nodeType": volumeGroupObject[FIELD.ID.VNF_TYPE],
+															"nodeStatus": volumeGroupObject[FIELD.ID.ORCHESTRATION_STATUS],
+															"object": volumeGroupObject,
+															"nodes": []
+													};
+													var tmpVolGroup = [];
+
+													angular.forEach(genericVnf[FIELD.ID.AVAILABLEVOLUMEGROUPS], function(avgroup, key) {
+														if (avgroup.name != volumeGroup.name) { 
+															tmpVolGroup.push(avgroup);
+														}
+													});
+
+													genericVnf[FIELD.ID.AVAILABLEVOLUMEGROUPS] = tmpVolGroup;
+
+													vfModule[FIELD.ID.VOLUMEGROUPS].push(volumeGroup);
+												}
+
+											});
+										}
+									}
+								});
+							}
+						}
+					});
+				}
+			});
+		});
+	}
+
+	$scope.handleInitialResponse = function(response) {
+		try {
+			$scope.enableCloseButton(true);
+			$scope.updateLog(response);
+			if (response.data.status < 200 || response.data.status > 202) {
+				$scope.showError(FIELD.ERROR.MSO);
+				$scope.status = FIELD.ERROR.AAI_FETCHING_CUST_DATA + response.data.status;
+
+				return;
+			}
+
+			$scope.setProgress(100); // done
+			$scope.status = FIELD.STATUS.DONE;
+			$scope.isSpinnerVisible = false;
+
+			$scope.customer = response.data.customer; // get data from json
+
+			$scope.customerList = [];
+
+			angular.forEach($scope.customer, function(subVal, subKey) {
+				var cust = { "globalCustomerId": subVal[FIELD.ID.GLOBAL_CUSTOMER_ID], "subscriberName": subVal[FIELD.ID.SUBNAME] };
+				$scope.customerList.push(cust);
+			});	
+
+		} catch (error) {
+			$scope.showContentError(error);
+		}
+	}
+
+	$scope.autoGetSubs = function() {
+		/*
+		 * Optionally comment in / out one of these method calls (or add a similar
+		 * entry) to auto-invoke an entry when the test screen is redrawn.
+		 */
+		$scope.getSubs();
+
+	}
+
+	$scope.updateLog = function(response) {
+//		$scope.log = UtilityService.getCurrentTime() + " HTTP Status: " + 
+//		UtilityService.getHttpStatusText(response.data.status) + "\n" +
+//		angular.toJson(response.data.entity, true) + "\n\n" + $scope.log;
+//		UtilityService.checkUndefined("entity", response.data.entity);
+//		UtilityService.checkUndefined("status", response.data.status);				
+	}
+
+	$scope.handleServerError = function(response, status) {				
+		$scope.enableCloseButton(true);
+		var message = UtilityService.getHttpErrorMessage(response);
+		if (message != ""){
+			message = " (" + message + ")";
+		}
+		$scope.showError(FIELD.ERROR.SYSTEM_ERROR + message);
+	}
+
+	$scope.showContentError = function(message) {
+		// $log.debug(message);
+		console.log(message);
+		if (UtilityService.hasContents(message)) {
+			$scope.showError("System failure (" + message + ")");
+		} else {
+			$scope.showError(FIELD.ERROR.SYSTEM_ERROR);
+		}
+	}
+
+	$scope.showError = function(message) {
+		$scope.isSpinnerVisible = false;
+		$scope.isProgressVisible = false;
+		$scope.error = message;
+		$scope.status = FIELD.STATUS.ERROR;
+	}
+
+	$scope.close = function() {
+		if ($scope.timer != undefined) {
+			$timeout.cancel($scope.timer);					
+		}
+		$scope.isPopupVisible = false;
+	}
+
+
+
+	/*
+	 * Consider converting the progress bar mechanism, the disabled button handling
+	 * and the following methods to generic Angular directive(s) and/or approach.
+	 */
+
+	$scope.enableCloseButton = function(isEnabled) {
+		var selector = FIELD.STYLE.MSO_CTRL_BTN;
+
+		$scope.isCloseEnabled = isEnabled;
+
+		if (isEnabled) {
+			$(selector).addClass(FIELD.STYLE.BTN_PRIMARY).removeClass(FIELD.STYLE.BTN_INACTIVE).attr(FIELD.STYLE.BTN_TYPE, FIELD.STYLE.PRIMARY);
+		} else {
+			$(selector).removeClass(FIELD.STYLE.BTN_PRIMARY).addClass(FIELD.STYLE.BTN_INACTIVE).attr(FIELD.STYLE.BTN_TYPE, FIELD.STYLE.DISABLED);					
+		}
+	}
+
+	$scope.resetProgress = function() {
+		$scope.percentProgress = 0;
+		$scope.progressClass = FIELD.STYLE.PROGRESS_BAR_INFO;
+	}
+
+	$scope.setProgress = function(percentProgress) {
+		percentProgress = parseInt(percentProgress);
+		if (percentProgress >= 100) {
+			$scope.progressClass = FIELD.STYLE.PROGRESS_BAR_SUCCESS;					
+		}
+
+		if (percentProgress < $scope.percentProgress) {
+			return;
+		}
+
+		$scope.percentProgress = percentProgress;
+		$scope.progressWidth = {width: percentProgress + "%"};
+		if (percentProgress >= 5) {
+			$scope.progressText =  percentProgress + " %";
+		} else {
+			// Hidden since color combination is barely visible when progress portion is narrow.
+			$scope.progressText = "";
+		}
+	}
+
+	$scope.reloadRoute = function() {
+		$route.reload();
+	}
+
+	$scope.prevPage = function() {
+		$scope.currentPage--;
+	}
+
+	$scope.nextPage = function() {
+		$scope.currentPage++;
+	}
+	$scope.serviceInstanceses = [{"sinstance":FIELD.NAME.SERVICE_INSTANCE_Id},{"sinstance":FIELD.NAME.SERVICE_INSTANCE_NAME}]
+	$scope.getSubscriberDet = function(selectedCustomer,selectedserviceinstancetype,selectedServiceInstance){
+		
+		var sintype =selectedserviceinstancetype;
+		if (selectedServiceInstance != "" && selectedServiceInstance != undefined) {
+			selectedServiceInstance.trim();
+
+			// check with A&AI
+			$http.get(COMPONENT.AAI_GET_SERVICE_INSTANCE_PATH  + selectedServiceInstance+"/"+sintype + "?r=" + Math.random(), {
+
+			},{
+				timeout: $scope.responseTimeoutMsec
+			}).then(function(response) {
+				var notFound = true;
+				if (angular.isArray(response.data[FIELD.ID.RESULT_DATA])) {
+					var item = [];
+					var urlParts = [];
+					item = response.data[FIELD.ID.RESULT_DATA][0];
+					var url = item[FIELD.ID.RESOURCE_LINK];
+					var globalCustomerId = "";
+					var serviceSubscription = "";
+					// split it and find the customer Id and service-subscription
+					urlParts = url.split("/");
+					if (urlParts[7] === FIELD.ID.CUSTOMER) { 
+						globalCustomerId = urlParts[8];
+					}
+					if (urlParts[10] === FIELD.ID.SERVICE_SUBSCRIPTION) { 
+						serviceSubscription = urlParts[11];
+					}
+
+					if (globalCustomerId !== "") {
+						notFound = false;
+						window.location.href = COMPONENT.SELECTED_SERVICE_SUB_PATH + serviceSubscription + COMPONENT.SELECTEDSUBSCRIBER_SUB_PATH + globalCustomerId + COMPONENT.SELECTEDSERVICEINSTANCE_SUB_PATH + selectedServiceInstance;
+					}
+				}
+				if (notFound) {
+					alert(FIELD.ERROR.SERVICE_INST_DNE);
+				}
+			}); // add a failure callback...
+		} else if (selectedCustomer != null) { 
+			window.location.href = COMPONENT.SELECTED_SUB_PATH + selectedCustomer;
+		} else {
+			alert(FIELD.ERROR.SELECT);
+		}
+	};
+  }]).directive('restrictInput', function(){
+		
+		return {
+			
+			restrict: 'A',
+			require: 'ngModel',
+			link: function($scope, element, attr, ctrl){
+				ctrl.$parsers.unshift(function(viewValue){
+					
+					var types = $scope.$eval(attr.restrictInput);
+					if(!types.regex && types.type){
+						
+						switch(types.type){
+							case 'Service Instance Name' : types.regex = '^[a-zA-Z0-9-_]*$'; break;
+							default: types.regex= '';
+						}
+					}
+					var reg = new RegExp(types.regex);
+					if(reg.test(viewValue)){
+						return viewValue;
+					} else {
+						var overrideValue = (reg.test(viewValue) ? viewValue : '');
+						element.val(overrideValue);
+						return overrideValue;
+					}
+				});
+			}
+		};
+
+            });
+appDS2.controller('TreeCtrl', ['$scope', function ($scope) {
+	$scope.remove = function (scope) {
+		scope.remove();
+	};
+
+	$scope.toggle = function (scope) {
+		scope.toggle();
+	};
+
+	$scope.moveLastToTheBeginning = function () {
+		var a = $scope.data.pop();
+		$scope.data.splice(0, 0, a);
+	};
+
+	$scope.newSubItem = function (scope) {
+		var nodeData = scope.$modelValue;
+		nodeData.nodes.push({
+			id: nodeData.id * 10 + nodeData.nodes.length,
+			title: nodeData.title + '.' + (nodeData.nodes.length + 1),
+			nodes: []
+		});
+	};
+
+	$scope.collapseAll = function () {
+		$scope.$broadcast(FIELD.ID.ANGULAR_UI_TREE_COLLAPSEALL);
+	};
+
+	$scope.expandAll = function () {
+		$scope.$broadcast(FIELD.ID.ANGULAR_UI_TREE_EXPANDALL);
+	};
+
+
+}]);
+
+
+
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/creationDialogController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/creationDialogController.js
new file mode 100755
index 0000000..6a1c14c
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/creationDialogController.js
@@ -0,0 +1,163 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var creationDialogController = function( COMPONENT, FIELD, $scope, $http, $timeout, $log,
+		CreationService, UtilityService, DataService) {
+
+	$scope.isDialogVisible = false;
+	$scope.summaryControl = {};
+	$scope.userProvidedControl = {};
+
+	var callbackFunction = undefined;
+	var componentId = undefined;
+
+	$scope.$on(COMPONENT.CREATE_COMPONENT, function(event, request) {
+
+		$scope.isSpinnerVisible = true;
+		$scope.isErrorVisible = false;
+		$scope.isDataVisible = false;
+		$scope.isConfirmEnabled = false;
+		$scope.isDialogVisible = true;
+		$scope.popup.isVisible = true;
+
+		callbackFunction = request.callbackFunction;
+		componentId = request.componentId;
+		CreationService.initializeComponent(request.componentId);
+
+		CreationService.setHttpErrorHandler(function(response) {
+			showError(FIELD.ERROR.SYSTEM_FAILURE, UtilityService
+					.getHttpErrorMessage(response));
+		});
+
+		$scope.componentName = CreationService.getComponentDisplayName();
+
+		CreationService.getParameters(handleGetParametersResponse);
+
+	});
+
+	var handleGetParametersResponse = function(parameters) {
+		$scope.summaryControl.setList(parameters.summaryList);
+		$scope.userProvidedControl.setList(parameters.userProvidedList);
+
+		$scope.isSpinnerVisible = false;
+		$scope.isDataVisible = true;
+		$scope.isConfirmEnabled = true;
+	};
+	
+	var validateInstanceName = function(iname) {
+		var patt1 = /^([a-z])+([0-9a-z\-_\.]*)$/i;
+		
+		if ( iname == null ){
+			return false;
+		}
+		if ( !iname.match(patt1) ) {
+			return false;
+		}
+		return true;
+	}
+
+	$scope.userParameterChanged = function(id) {
+		CreationService.updateUserParameterList(id, $scope.userProvidedControl);
+	}
+
+	$scope.confirm = function() {
+
+		var requiredFields = $scope.userProvidedControl.getRequiredFields();
+		if (requiredFields !== "") {
+			showError(FIELD.ERROR.MISSING_DATA, requiredFields);
+			return;
+		}
+	
+		var paramList = $scope.userProvidedControl.getList();
+		var instanceName = "";
+
+		if ( DataService.getALaCarte() ) {
+			if ( paramList != null ) {
+				for (var i = 0; i < paramList.length; i++) {
+					if (paramList[i].id === FIELD.ID.INSTANCE_NAME) {
+						instanceName = paramList[i].value;
+						break;
+					}
+				}
+			}
+			var isValid = validateInstanceName (instanceName);
+			if ( isValid ) {
+				$scope.isErrorVisible = false;
+			} else {
+				showError(FIELD.ERROR.INVALID_INSTANCE_NAME + instanceName, 
+						FIELD.ERROR.INSTANCE_NAME_VALIDATE);
+				return;
+			}
+		}
+		
+		var requestDetails = CreationService
+				.getMsoRequestDetails($scope.userProvidedControl.getList());
+
+		$scope.isDialogVisible = false;
+
+		$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {
+			url : CreationService.getMsoUrl(),
+			requestDetails : requestDetails,
+			componentId: componentId,
+			callbackFunction : function(response) {
+				if (response.isSuccessful) {
+					$scope.popup.isVisible = false;
+					runCallback(response);
+				} else {
+					$scope.isDialogVisible = false;
+					$scope.popup.isVisible = false;
+				}
+			}
+		});
+	}
+
+	$scope.cancel = function() {
+		$scope.isDialogVisible = false;
+		$scope.popup.isVisible = false;
+		runCallback(false);
+	}
+
+	var runCallback = function(response) {
+		if (angular.isFunction(callbackFunction)) {
+			callbackFunction({
+				isSuccessful : response.isSuccessful,
+				control : $scope.userProvidedControl.getList(),
+				instanceId : response.instanceId
+			});
+		}
+	}
+
+	var showError = function(summary, details) {
+		var message = summary;
+		if (UtilityService.hasContents(details)) {
+			message += " (" + details + ")";
+		}
+		$scope.isSpinnerVisible = false;
+		$scope.isErrorVisible = true;
+		$scope.error = message;
+	}
+	
+}
+
+appDS2.controller("creationDialogController", [ "COMPONENT", "FIELD", "$scope", "$http",
+				"$timeout", "$log", "CreationService", "UtilityService", "DataService",
+				creationDialogController ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/deletionDialogController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/deletionDialogController.js
new file mode 100755
index 0000000..137673d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/deletionDialogController.js
@@ -0,0 +1,119 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var deletionDialogController = function( COMPONENT, FIELD, $scope, $http, $timeout, $log,
+	DeletionService, UtilityService) {
+
+    $scope.isDialogVisible = false;
+    $scope.summaryControl = {};
+    $scope.userProvidedControl = {};
+    
+    var callbackFunction = undefined;
+    var componentId = undefined;
+
+    $scope.$on(COMPONENT.DELETE_COMPONENT, function(event, request) {
+
+    $scope.isDataVisible = false;
+	$scope.isSpinnerVisible = false;
+	$scope.isErrorVisible = false;
+	$scope.isDialogVisible = true;
+	$scope.popup.isVisible = true;
+	$scope.isConfirmEnabled = false;
+
+	callbackFunction = request.callbackFunction;
+	componentId = request.componentId;
+
+	DeletionService.initializeComponent(request.componentId);
+
+	$scope.componentName = DeletionService.getComponentDisplayName();
+
+	$scope.summaryControl.setList(DeletionService.getSummaryList());
+	
+	DeletionService.getParameters(handleGetParametersResponse);
+
+    });
+    
+    var handleGetParametersResponse = function(parameters, dontshow) {
+		$scope.summaryControl.setList(parameters.summaryList);
+		$scope.userProvidedControl.setList(parameters.userProvidedList);
+
+		$scope.isSpinnerVisible = false;
+		if (dontshow)
+		  $scope.isDataVisible = false;
+		else
+			$scope.isDataVisible = true;
+		$scope.isConfirmEnabled = true;
+	};
+
+	$scope.userParameterChanged = function(id) {
+		DeletionService.updateUserParameterList(id, $scope.userProvidedControl);
+	}
+
+    $scope.confirm = function() {
+
+    	var requiredFields = $scope.userProvidedControl.getRequiredFields();
+		if (requiredFields === "") {
+			$scope.isErrorVisible = false;
+		} else {
+			showError(FIELD.ERROR.MISSING_DATA, requiredFields);
+			return;
+		}
+
+		
+	var requestDetails = DeletionService.getMsoRequestDetails($scope.userProvidedControl.getList());
+
+	$scope.isDialogVisible = false;
+
+	$scope.$broadcast(COMPONENT.MSO_DELETE_REQ, {
+	    url : DeletionService.getMsoUrl(),
+	    requestDetails : requestDetails,
+		componentId: componentId,
+	    callbackFunction : function(isSuccessful) {
+		if (isSuccessful) {
+		    $scope.popup.isVisible = false;
+		    runCallback(true);
+		} else {
+		    $scope.isDialogVisible = true;
+		}
+	    }
+	});
+
+    }
+
+    $scope.cancel = function() {
+	$scope.isDialogVisible = false;
+	$scope.popup.isVisible = false;
+	runCallback(false);
+    }
+
+    var runCallback = function(isSuccessful) {
+	if (angular.isFunction(callbackFunction)) {
+	    callbackFunction({
+		isSuccessful : isSuccessful
+	    });
+	}
+    }
+}
+
+appDS2.controller("deletionDialogController", [ "COMPONENT", "FIELD", "$scope", "$http",
+		"$timeout", "$log", "DeletionService", "UtilityService",
+		deletionDialogController ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/detailsDialogController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/detailsDialogController.js
new file mode 100755
index 0000000..ddb1ac1
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/detailsDialogController.js
@@ -0,0 +1,84 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var detailsDialogController = function($scope, $http, $timeout, $log,
+	MsoService, DetailsService, UtilityService, COMPONENT, FIELD) {
+
+    $scope.isDialogVisible = false;
+    $scope.summaryControl = {};
+    $scope.detailsControl = {};
+
+    $scope.$on(COMPONENT.SHOW_COMPONENT_DETAILS, function(event, request) {
+
+	$scope.log = "";
+	$scope.isSpinnerVisible = true;
+	$scope.isErrorVisible = false;
+	$scope.isDialogVisible = true;
+	$scope.popup.isVisible = true;
+
+	DetailsService.initializeComponent(request.componentId);
+
+	$scope.componentName = DetailsService.getComponentDisplayName();
+
+	$scope.summaryControl.setList(DetailsService.getSummaryList());
+
+	$scope.detailsControl.setList(DetailsService.getDetailsList());
+
+	UtilityService.setHttpErrorHandler(function(response) {
+	    showError(FIELD.ERROR.SYSTEM_FAILURE, UtilityService
+		    .getHttpErrorMessage(response));
+	});
+
+	MsoService.getOrchestrationRequests(
+		DetailsService.getMsoFilterString(), handleGetResponse);
+    });
+
+    var handleGetResponse = function(response) {
+	$scope.isSpinnerVisible = false;
+	try {
+	    $scope.log = MsoService
+		    .getFormattedGetOrchestrationRequestsResponse(response);
+	} catch (error) {
+	    $scope.log = MsoService.getFormattedCommonResponse(response);
+	    MsoService.showResponseContentError(error, showError);
+	}
+    }
+
+    $scope.close = function() {
+	$scope.isDialogVisible = false;
+	$scope.popup.isVisible = false;
+    }
+
+    var showError = function(summary, details) {
+	var message = summary;
+	if (UtilityService.hasContents(details)) {
+	    message += " (" + details + ")";
+	}
+	$scope.isSpinnerVisible = false;
+	$scope.isErrorVisible = true;
+	$scope.error = message;
+    }
+}
+
+appDS2.controller("detailsDialogController", [ "$scope", "$http", "$timeout",
+	"$log", "MsoService", "DetailsService", "UtilityService", "COMPONENT", "FIELD",
+	detailsDialogController ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/msoCommitController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/msoCommitController.js
new file mode 100755
index 0000000..65fac28
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/msoCommitController.js
@@ -0,0 +1,300 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+/*
+ * "msoCommitController.js" provides controller code to commit MSO requests.
+ * 
+ * HIGHLIGHTS:
+ * 
+ * Parent HTML/JSP code is expected to include "msoCommit.htm" (via
+ * "ng-include") and this file (via "<script>"). "msoCommit.jsp" (displayed
+ * when the parent code includes "msoCommit.htm") renders a popup window, but
+ * initially hides the display.
+ * 
+ * The parent controller code is expected to broadcast either the
+ * "createInstance" or "deleteInstance" events when it is ready to commit the
+ * code.
+ * 
+ * This controller receives these events (via "$scope.on" declarations), calls
+ * "$scope.init()" to "unhide" and initialize the popup display and then makes a
+ * REST request to the appropriate server Java controller.
+ * 
+ * The initial REST response is handled by "handleInitialResponse". This method
+ * then polls the server (via "getRequestStatus") if the request is successful.
+ * 
+ * The subsequent "getRequestStatus" responses are handled by
+ * "handleGetResponse".
+ * 
+ * "handleInitialResponse" and "handleGetResponse" primarily filter response
+ * data, manipulate the display and provide error handling.
+ * 
+ * The mechanism has these dependencies (in addition to "msoCommit.htm"):
+ * 
+ * 1) Three services: MsoService, PropertyService and UtilityService
+ * 
+ * 2) The popup window directive found in "popupWindow.htm" and
+ * "popupWindowDirective.js"
+ * 
+ * 2) Display styling defined in "dialogs.css"
+ * 
+ * CAVEATS:
+ * 
+ * The parent HTML is assumed to be the "popup-window" directive and the
+ * corresponding parent controller is assumed to define the object
+ * "$scope.popup".
+ */
+
+var msoCommitController = function(COMPONENT, FIELD, $scope, $http, $timeout, $window, $log,
+		MsoService, PropertyService, UtilityService, DataService) {
+
+	$scope.isViewVisible = false;
+	$scope.progressBarControl = {};
+	$scope.popupWindowControl = {};
+
+	var _this = this;
+
+	$scope.$on("createInstance", function(event, request) {
+		init(request, COMPONENT.MSO_CREATE_REQ );
+		MsoService.createInstance(request, handleInitialResponse);
+	});
+
+	$scope.$on("deleteInstance", function(event, request) {
+		init(request, COMPONENT.MSO_DELETE_REQ);
+		MsoService.deleteInstance(request, handleInitialResponse);
+	});
+
+	var init = function(request, msoRequestType ) {
+		$scope.status = FIELD.STATUS.SUBMITTING_REQUEST;
+		$scope.isSpinnerVisible = true;
+		$scope.isProgressVisible = true;
+		$scope.error = "";
+		$scope.log = "";
+		$scope.isCloseEnabled = false;
+		$scope.isViewVisible = true;
+		$scope.popup.isVisible = true;
+
+		_this.pollAttempts = 0;
+		_this.callbackFunction = request.callbackFunction;
+		_this.componentId = request.componentId;
+		_this.msoRequestType = msoRequestType;
+		_this.isMsoError = false;
+
+		if (angular.isFunction($scope.progressBarControl.reset)) {
+			$scope.progressBarControl.reset();
+		}
+		$scope.percentProgress = 2; // Show "a little" progress
+
+		UtilityService.setHttpErrorHandler(function(response) {
+			$scope.isCloseEnabled = true;
+			_this.isMsoError = true;
+			showError(FIELD.ERROR.SYSTEM_FAILURE, UtilityService
+					.getHttpErrorMessage(response));
+		});
+	}
+
+	var handleInitialResponse = function(response) {
+		try {
+			updateViewAfterInitialResponse(response);
+			
+			_this.timer = $timeout(getRequestStatus, PropertyService
+					.getMsoMaxPollingIntervalMsec());
+
+			$scope.instanceId = response.data.entity.instanceId;
+			if ($scope.instanceId == null) { 
+				$scope.instanceId = response.data.entity.requestReferences.instanceId;
+			}
+		} catch (error) {
+			if ( response.data != null && response.data.status != null ) {
+				if (response.data.status > 299 || response.data.status < 200 ) {
+					// MSO returned an error
+					_this.isMsoError = true;
+				}
+			}
+			MsoService.showResponseContentError(error, showError);
+		}
+	}
+
+	var getRequestStatus = function() {
+		MsoService.getOrchestrationRequest(_this.requestId, handleGetResponse);
+	}
+
+	var handleGetResponse = function(response) {
+		try {
+			if (isUpdateViewAfterGetResponseComplete(response)) {
+				return;
+			}
+			//console.log ( "msoCommitController _this.pollAttempts=" + _this.pollAttempts + " max polls=" + PropertyService.getMsoMaxPolls());
+			if (++_this.pollAttempts > PropertyService.getMsoMaxPolls()) {
+				_this.isMsoError = true;
+				showError(FIELD.ERROR.MAX_POLLS_EXCEEDED);
+			} else {
+				_this.timer = $timeout(getRequestStatus, PropertyService
+						.getMsoMaxPollingIntervalMsec());
+			}
+		} catch (error) {
+			_this.isMsoError = true;
+			MsoService.showResponseContentError(error, showError);
+		}
+	}
+
+	var updateViewAfterInitialResponse = function(response) {
+		$scope.isCloseEnabled = true;
+
+		updateLog(response);
+
+		_this.requestId = UtilityService.checkUndefined(FIELD.ID.REQUEST_ID,
+				UtilityService.checkUndefined(FIELD.ID.REQUEST_REFERENCES,
+						response.data.entity.requestReferences).requestId);
+
+		$scope.percentProgress = 4; // Show "a little more" progress
+		$scope.status = FIELD.STATUS.IN_PROGRESS;
+	}
+
+	/*
+	 * Updates the view and returns "true" if the MSO operation has returned a
+	 * "Complete" status.
+	 */
+	var isUpdateViewAfterGetResponseComplete = function(response) {
+		//console.log("msoCommitController isUpdateViewAfterGetResponseComplete");
+		updateLogFinalResponse(response);
+
+		var requestStatus = UtilityService.checkUndefined(FIELD.ID.REQUEST_STATUS,
+				UtilityService.checkUndefined(FIELD.ID.REQUEST,
+						response.data.entity.request).requestStatus);
+
+		var requestState = requestStatus.requestState;
+		console.log("msoCommitController requestState=" + requestState);
+		// look for "progress" or "pending"
+		var patt1 = /progress/i;
+		var patt2 = /pending/i;
+		var result1 = patt1.test(requestState);
+		var result2 = patt2.test(requestState)
+		if (result1 || result2) {
+			requestState = FIELD.STATUS.IN_PROGRESS;
+		}
+		var statusMessage = requestStatus.statusMessage;
+		console.log("msoCommitController statusMessage=" + statusMessage);
+		if (UtilityService.hasContents(statusMessage)) {
+			$scope.status = requestState + " - " + statusMessage;
+		} else {
+			$scope.status = requestState;
+		}
+		if (UtilityService.hasContents(requestStatus.percentProgress)) {
+			$scope.percentProgress = requestStatus.percentProgress;
+		}
+
+		if ( (requestState.toLowerCase() === FIELD.STATUS.FAILED.toLowerCase()) || (requestState.toLowerCase() === FIELD.STATUS.UNLOCKED.toLowerCase())) {
+			throw {
+				type : FIELD.STATUS.MSO_FAILURE
+			};
+		}
+
+		if (requestState.toLowerCase() === FIELD.STATUS.COMPLETE.toLowerCase()) {
+			$scope.isSpinnerVisible = false;
+			return true;
+		}
+
+		return false;
+	}
+
+	var updateLog = function(response) {
+		$scope.log = MsoService.getFormattedCommonResponse(response)
+				+ $scope.log;
+		UtilityService.checkUndefined("entity", response.data.entity);
+		UtilityService.checkUndefined("status", response.data.status);
+		MsoService.checkValidStatus(response);
+	}
+	var updateLogFinalResponse = function(response) {
+		$scope.log = MsoService.getFormattedSingleGetOrchestrationRequestResponse(response)
+				+ $scope.log;
+		UtilityService.checkUndefined("entity", response.data.entity);
+		UtilityService.checkUndefined("status", response.data.status);
+		MsoService.checkValidStatus(response);
+	}
+	$scope.close = function() {
+		if (_this.timer !== undefined) {
+			$timeout.cancel(_this.timer);
+		}
+		$scope.isViewVisible = false;
+		if (angular.isFunction(_this.callbackFunction)) {
+			if ($scope.error === "") {
+				_this.callbackFunction({
+					isSuccessful : true,
+					instanceId : $scope.instanceId
+				});
+			} else {
+				_this.callbackFunction({
+					isSuccessful : false
+				});
+				findNextPage(_this.componentId, _this.msoRequestType, _this.isMsoError);
+			}
+		} else {
+			$scope.popup.isVisible = false;
+		}
+	}
+
+	var showError = function(summary, details) {
+		var message = summary;
+		if (UtilityService.hasContents(details)) {
+			message += " (" + details + ")";
+		}
+		$scope.isSpinnerVisible = false;
+		$scope.isProgressVisible = false;
+		$scope.error = message;
+		$scope.status = FIELD.STATUS.ERROR;
+	}
+	
+	var findNextPage = function ( cid, msoRequestType, isMsoError ) {
+		//console.log ("window.location.href" + window.location.href);
+		//console.log ("component id " + cid);
+		var originalUrl = window.location.href;
+		if  ( (cid === COMPONENT.SERVICE) && (msoRequestType === COMPONENT.MSO_CREATE_REQ) ) {
+			var url = originalUrl;
+			var x;
+			var count = 0;
+			var firstStr = "";
+			for ( x = 0; x < url.length; x++) {
+				if ( url.charAt(x) == '/' ) {
+					count++;
+					if ( count == 4 ) {
+						firstStr = url.substring (0,x);
+						break;
+					}
+				}
+			}
+			// By default show the search existing service instances screen
+			//var newUrl = firstStr + COMPONENT.SERVICEMODELS_INSTANCES_SERVICES_PATH;
+			var  newUrl = COMPONENT.SERVICEMODELS_INSTANCES_SERVICES_PATH;
+			
+			if ( isMsoError ) {
+				//Show the Browse SDC models screen
+				//newUrl = firstStr + COMPONENT.SERVICEMODELS_MODELS_SERVICES_PATH;
+				newUrl = COMPONENT.SERVICEMODELS_MODELS_SERVICES_PATH;
+			}
+			window.location.href = newUrl;
+		}	
+	}
+}
+
+appDS2.controller("msoCommitController", [ "COMPONENT", "FIELD", "$scope", "$http", "$timeout",
+		"$window", "$log", "MsoService", "PropertyService", "UtilityService",
+		msoCommitController ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/statusDialogController.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/statusDialogController.js
new file mode 100755
index 0000000..de15666
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/statusDialogController.js
@@ -0,0 +1,233 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var statusDialogController = function(COMPONENT, FIELD, $scope, $http, $timeout, $log, MsoService, StatusService, DataService, PropertyService, UtilityService) {
+
+    $scope.isDialogVisible = false;
+    $scope.summaryControl = {};
+    $scope.detailsControl = {};
+    $scope.userProvidedControl = {};
+    
+    var callbackFunction = undefined;
+    var componentId = undefined;
+    
+    $scope.$on("ComponentStatus", function(event, request) {
+
+	$scope.log = "";
+	$scope.isSpinnerVisible = true;
+	$scope.isErrorVisible = false;
+	$scope.isSuccessVisible = false;
+	$scope.isSubmitEnabled = false;
+	$scope.isDataVisible = false;
+	$scope.isDialogVisible = true;
+	$scope.popup.isVisible = true;
+	$scope.isCancelEnabled = true;
+	$scope.success = "";
+	$scope.error = "";
+
+	$scope.vnfid = undefined;
+	$scope.targetProvStatus = undefined;
+	
+	callbackFunction = request.callbackFunction;
+	componentId = request.componentId;
+	
+	StatusService.initializeComponent(request.componentId);
+
+	/*StatusService.setHttpErrorHandler(function(response) {
+		showError("System failure", UtilityService
+				.getHttpErrorMessage(response));
+	});*/
+
+	$scope.componentName = StatusService.getComponentDisplayName();
+
+	$scope.summaryControl.setList(StatusService.getSummaryList());
+
+	$scope.detailsControl.setList(StatusService.getVNFStatusList());
+
+	StatusService.getParameters(handleGetParametersResponse);
+	
+	//UtilityService.setHttpErrorHandler(function(response) {
+	//    showError("System failure", UtilityService
+	//	    .getHttpErrorMessage(response));
+	//});
+
+
+    });
+    
+    var handleGetParametersResponse = function(parameters, dontshow) {
+		$scope.summaryControl.setList(parameters.summaryList);
+		$scope.userProvidedControl.setList(parameters.userProvidedList);
+
+		$scope.isSpinnerVisible = false;
+		if (dontshow)
+		  $scope.isDataVisible = false;
+		else
+			$scope.isDataVisible = true;
+		$scope.isSubmitEnabled = true;
+	};
+
+	$scope.userParameterChanged = function(id) {
+		StatusService.updateUserParameterList(id, $scope.userProvidedControl);
+	}
+
+    /*$scope.submit = function() {
+
+    	var requiredFields = $scope.userProvidedControl.getRequiredFields();
+		if (requiredFields === "") {
+			$scope.isErrorVisible = false;
+		} else {
+			showError("Missing data", requiredFields);
+			return;
+		}
+		var paramList = $scope.userProvidedControl.getList();
+		var targetprovstatus = "";
+		
+		if ( paramList != null ) {
+			for (var i = 0; i < paramList.length; i++) {
+				if (paramList[i].id === FIELD.ID.VNF_TARGETPROVSTATUS) {
+					targetprovstatus = paramList[i].value;
+					break;
+				}
+			}
+		}
+        
+		$scope.vnfid = DataService.getVnfInstanceId();
+		$scope.targetProvStatus = StatusService.getTargetProvParameterText(targetprovstatus);
+		
+		$scope.setVnfProvStatus($scope.vnfid, $scope.targetProvStatus);
+	
+	   // $scope.isDialogVisible = false;
+
+	  //  $scope.popup.isVisible = false;
+	
+    }*/
+    
+    $scope.init = function() {
+		
+    	StatusService.updateVnfProvStatus = "";
+		var msecs = PropertyService.retrieveMsoMaxPollingIntervalMsec();
+		PropertyService.setMsoMaxPollingIntervalMsec(msecs);
+		
+		var polls = PropertyService.retrieveMsoMaxPolls();
+		PropertyService.setMsoMaxPolls(polls);
+		
+		PropertyService.setServerResponseTimeoutMsec(10000)
+
+		$scope.isSpinnerVisible = true;
+	
+		
+		$scope.error = "";
+		$scope.success = "";
+		$scope.pollAttempts = 0;
+		$scope.log = "";				
+		$scope.isSubmitEnabled = false;
+		$scope.isCancelEnabled = false;
+		
+	}
+
+
+    
+    $scope.handleInitialResponse = function(response) {
+		try {
+			$scope.isCancelEnabled = true;
+			
+			if (response.data.status < 200 || response.data.status > 202) {
+				showError(FIELD.ERROR.AAI_ERROR, "");
+				return;
+			}
+			else
+			{
+				DataService.setUpdatedVNFProvStatus($scope.targetProvStatus);
+				$scope.detailsControl.setList(StatusService.getVNFStatusList());
+				showSuccess(FIELD.STATUS.SUCCESS_VNF_PROV_STATUS, $scope.targetProvStatus);
+				
+			}
+			$scope.status = FIELD.STATUS.DONE;
+			$scope.isSpinnerVisible = false;
+//			DataService.setServiceInstanceToCustomer($scope.serviceInstanceToCustomer);
+		} catch (error) {
+			$scope.showContentError(error);
+		}
+	}
+    
+	/* $scope.setVnfProvStatus = function(vnfId, targetProvStatus) {
+		
+		$scope.init();
+		 $log
+		    .debug("AaiService:setVnfProvStatus: vnf-id: "
+			    + vnfId + " Target Prov_Status: " + targetProvStatus);
+	    var url =  "aai_vnf_update/"
+	    + vnfId + "/" + targetProvStatus + "?r=" + Math.random();
+
+	    $http.get(url,
+		    {
+			timeout : PropertyService
+				.getServerResponseTimeoutMsec()
+		    }).then(function(response) {
+		    	
+		    	$scope.handleInitialResponse(response);
+		    })["catch"]
+		    (UtilityService.runHttpErrorHandler);
+	   
+	};*/
+	
+
+	$scope.cancel = function() {
+		$scope.isDialogVisible = false;
+		$scope.popup.isVisible = false;
+		runCallback(false);
+	}
+
+	var runCallback = function(response) {
+		if (angular.isFunction(callbackFunction)) {
+			callbackFunction({
+				isSuccessful : response.isSuccessful,
+				control : $scope.userProvidedControl.getList(),
+				instanceId : response.instanceId
+			});
+		}
+	}
+   
+	var showSuccess = function(summary, details) {
+		var message = summary;
+		if (UtilityService.hasContents(details)) {
+		    message += " (" + details + ")";
+		}
+		$scope.isSpinnerVisible = false;
+		$scope.isSuccessVisible = true;
+		$scope.success = message;
+	    }
+		
+    var showError = function(summary, details) {
+	var message = summary;
+	if (UtilityService.hasContents(details)) {
+	    message += " (" + details + ")";
+	}
+	$scope.isSpinnerVisible = false;
+	$scope.isErrorVisible = true;
+	$scope.error = message;
+    }
+}
+
+appDS2.controller("statusDialogController", [ "COMPONENT", "FIELD", "$scope", "$http", "$timeout",
+	"$log", "MsoService", "StatusService", "DataService", "PropertyService", "UtilityService",
+	statusDialogController ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/controller/subscriberSearch.js b/vid-app-common/src/main/webapp/app/vid/scripts/controller/subscriberSearch.js
new file mode 100755
index 0000000..afd7aba
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/controller/subscriberSearch.js
@@ -0,0 +1,246 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+appDS2.requires.push('ngRoute');
+appDS2.requires.push('ui.tree');
+
+appDS2.config(function($routeProvider) {
+	$routeProvider
+	.when("/subviewedit", {
+		templateUrl : "app/vid/scripts/view-models/aaiSubViewEdit.htm",
+		controller : "aaiSubscriberSearchController"
+
+	})
+	.when("/subdetails", {
+		templateUrl : "app/vid/scripts/view-models/aaiSubDetails.htm",
+		controller : "aaiSubscriberController"
+
+	})
+	.otherwise({
+		templateUrl : "app/vid/scripts/view-models/aaiGetSubs.htm", 
+		controller : "aaiSubscriberSearchController"
+	});
+});
+
+appDS2.config(function(treeConfig) {
+	  treeConfig.defaultCollapsed = true; // collapse nodes by default
+	});
+
+appDS2.factory("user",function(){
+    return {};
+});
+
+appDS2.controller("aaiSubscriberSearchController", [ "$scope", "$timeout", "$log", "UtilityService", "user", "PropertyService", "COMPONENT", "FIELD",
+    function($scope, $timeout, $log, UtilityService, user, PropertyService, COMPONENT, FIELD) {
+
+		$scope.baseUrl = "";
+		$scope.responseTimeoutMsec = 10000;
+		$scope.msoMaxPollingIntervalMsec = 1000;
+		$scope.msoMaxPolls = 7;
+		
+		$scope.init = function(properties) {
+    		var msecs = PropertyService.retrieveMsoMaxPollingIntervalMsec();
+    		PropertyService.setMsoMaxPollingIntervalMsec(msecs);
+    		
+    		var polls = PropertyService.retrieveMsoMaxPolls();
+    		PropertyService.setMsoMaxPolls(polls);
+    		
+    		PropertyService.setServerResponseTimeoutMsec(10000);
+
+			// These two properties only added for testing	
+			properties.msoDefaultBaseUrl = $scope.baseUrl;
+			properties.responseTimeoutMsec = $scope.responseTimeoutMsec;
+
+			UtilityService.setProperties(properties);
+		}
+		
+		$scope.autoGetSubs = function() {
+			/*
+			 * Optionally comment in / out one of these method calls (or add a similar
+			 * entry) to auto-invoke an entry when the test screen is redrawn.
+			 */
+			$timeout(function() {
+				$scope.getSubscribers();
+				// $scope.deleteServiceInstance();
+				// $scope.generateInvalidUrl405();			
+			}, 100);
+		}
+		
+		$scope.autoGetSubDetails = function() {
+			/*
+			 * Optionally comment in / out one of these method calls (or add a similar
+			 * entry) to auto-invoke an entry when the test screen is redrawn.
+			 */
+			$timeout(function() {
+				$scope.getSubDetails();
+				// $scope.deleteServiceInstance();
+				// $scope.generateInvalidUrl405();			
+			}, 100);
+		}
+		
+		$scope.autoPopulateViewEdit = function() {
+			/*
+			 * Optionally comment in / out one of these method calls (or add a similar
+			 * entry) to auto-invoke an entry when the test screen is redrawn.
+			 */
+			$timeout(function() {
+			$scope.getComponentList();
+				// $scope.deleteServiceInstance();
+				// $scope.generateInvalidUrl405();			
+			}, 100);
+		}
+		
+		$scope.refreshSubs = function() {
+			/*
+			 * Optionally comment in / out one of these method calls (or add a similar
+			 * entry) to auto-invoke an entry when the test screen is redrawn.
+			 */
+			$timeout(function() {
+				$scope.refreshSubscribers();
+				// $scope.deleteServiceInstance();
+				// $scope.generateInvalidUrl405();			
+			}, 100);
+		}
+		
+		$scope.autoStartQueryTest = function() {
+			/*
+			 * Optionally comment in / out one of these method calls (or add a similar
+			 * entry) to auto-invoke an entry when the test screen is redrawn.
+			 */
+			$timeout(function() {
+				// $scope.queryServiceInstance();
+			}, 100);
+		}
+		
+		$scope.queryServiceInstance = function() {
+			/*
+			 * Example of method call needed to query a service instance.
+			 */
+			$scope.$broadcast(COMPONENT.QUERY_SERVICE_INSTANCE, {
+				serviceInstanceId: COMPONENT.SERVICE_INSTANCE_ID_1
+			});
+		}
+	
+		$scope.getSubscribers = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast(COMPONENT.GET_SUBS, {
+				url : FIELD.ID.AAI_GET_SUBSCRIBERS,
+				requestDetails : createServiceRequestDetails
+			});
+		}
+		
+		$scope.getSubDetails = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast(COMPONENT.GET_SUB_DETAILS, {
+				url : FIELD.ID.AAI_SUB_DETAILS,
+				requestDetails : createServiceRequestDetails
+			});
+		}
+		
+		$scope.getComponentList = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast(COMPONENT.GET_COMPONENT_LIST, {
+				url : FIELD.ID.AAI_SUB_VIEWEDIT,
+				requestDetails : createServiceRequestDetails
+			});
+		}
+		
+		
+		$scope.refreshSubscribers = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast(COMPONENT.GET_SUBS, {
+				url : FIELD.ID.AAI_REFRESH_SUBSCRIBERS,
+				requestDetails : createServiceRequestDetails
+			});
+		}
+	
+		$scope.deleteServiceInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance deletion request.
+			 */
+			$scope.$broadcast(COMPONENT.MSO_DELETE_REQ,	{
+				url : COMPONENT.MSO_DELETE_SVC_INSTANCE_PATH + COMPONENT.SERVICE_INSTANCE_ID_1,
+				requestDetails : deleteServiceRequestDetails
+			});
+		}
+	
+		$scope.createNetworkInstance = function() {
+			$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {
+				url : COMPONENT.MSO_CREATE_NW_INSTANCE,
+				requestDetails : createNetworkRequestDetails
+			});
+		}
+	
+		$scope.deleteNetworkInstance = function() {
+			$scope.$broadcast(COMPONENT.MSO_DELETE_REQ,	{
+				url : COMPONENT.MSO_CREATE_NW_INSTANCE_PATH + COMPONENT.SERVICE_INSTANCE_ID_1 + COMPONENT.FORWARD_SLASH + COMPONENT.NETWORKS + COMPONENT.FORWARD_SLASH + COMPONENT.DELETE_INSTANCE_ID_1,
+				requestDetails : deleteNetworkRequestDetails
+			});
+		}
+	
+		$scope.generateError = function(testName) {
+			// Clone example request object
+			var request = JSON.parse(JSON.stringify(createServiceRequestDetails));
+			request.modelInfo.modelName = testName;
+			$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {
+				url : COMPONENT.MSO_CREATE_SVC_INSTANCE,
+				requestDetails : request
+			});
+		}
+	
+		$scope.generateInvalidUrl404 = function() {
+			var properties = UtilityService.getProperties(properties);
+			properties.msoDefaultBaseUrl = COMPONENT.INVALID_STRING;
+			UtilityService.setProperties(properties);
+			$scope.$broadcast(COMPONENT.REFRESH_PROPERTIES);
+		
+			$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {
+				url : COMPONENT.MSO_CREATE_SVC_INSTANCE,
+				requestDetails : createServiceRequestDetails
+			});
+
+			properties.msoDefaultBaseUrl = $scope.baseUrl;
+			UtilityService.setProperties(properties);
+			$scope.$broadcast(COMPONENT.REFRESH_PROPERTIES);				
+		}
+	
+		$scope.generateInvalidUrl405 = function() {
+			$scope.$broadcast(COMPONENT.MSO_CREATE_REQ, {
+				url : COMPONENT.INVALID_STRING_MSO_CREATE_SVC_INSTANCE,
+				requestDetails : createServiceRequestDetails
+			});
+		}
+	
+
+		$scope.getSubscriberDet = function(selectedCustomer){
+			window.location.href = COMPONENT.SUBDETAILS_SELECTEDSUBSCRIBER + selectedCustomer;
+		};
+	}
+]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js
new file mode 100755
index 0000000..b5497b3
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/extensionsDirective.js
@@ -0,0 +1,79 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+/*
+ * Defines "extensions" to standard Angular directives. Provides attributes that
+ * can be included in HTML tags.
+ * 
+ * SYNTAX: ngx-enabled="true | false"
+ * 
+ * Enables / disables an element. Currently only supports button elements that
+ * include the "button" element. This extension was added since the similar
+ * standard Angular "ng-disabled" attribute does not handle buttons that use the
+ * ECOMP styling.
+ * 
+ * SYNTAX: ngx-visible="true | false"
+ * 
+ * Sets an element to visible / hidden. Different from ng-show / ng-hide as
+ * follows:
+ * 
+ * ng-show=false or ng-hide=true - Element is completely hidden.
+ * 
+ * ngx-visible=false - Element is not displayed. However, a blank area is
+ * displayed where the element would display if ngx-visible is set to true.
+ */
+
+appDS2.directive('ngxEnabled', function() {
+    return {
+	restrict : "A",
+	link : function(scope, element, attrs) {
+	    attrs.$observe("ngxEnabled", function(value) {
+		if (attrs.attButton === "") {
+		    if (value === "true") {
+			element.attr("btn-type", "primary").removeClass(
+				"button--inactive").addClass("button--primary")
+				.prop('disabled', false);
+		    } else {
+			element.attr("btn-type", "disabled").removeClass(
+				"button--primary").addClass("button--inactive")
+				.prop('disabled', true);
+		    }
+		}
+	    });
+	}
+    }
+});
+
+appDS2.directive('ngxVisible', function() {
+    return {
+	restrict : "A",
+	link : function(scope, element, attrs) {
+	    attrs.$observe("ngxVisible", function(value) {
+		if (value === "true") {
+		    element.css("visibility", "visible");
+		} else {
+		    element.css("visibility", "hidden");
+		}
+	    });
+	}
+    }
+});
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js
new file mode 100755
index 0000000..811a51e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/parameterBlockDirective.js
@@ -0,0 +1,420 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var parameterBlockDirective = function($log, PARAMETER, UtilityService) {
+    /*
+     * If "IS_SINGLE_OPTION_AUTO_SELECTED" is set to "true" ...
+     * 
+     * IF these 3 conditions all exist:
+     * 
+     * 1) The parameter type is PARAMETER.SELECT
+     * 
+     * 2) AND the "prompt" attribute is set to a string.
+     *
+     * 3) AND the optionList" only contains a single entry
+     * 
+     * THEN the "prompt" will not be displayed as an initial select option.
+     */
+
+    var IS_SINGLE_OPTION_AUTO_SELECTED = true;
+
+    /*
+     * Optionally remove "nameStyle" and "valueStyle" "width" entries to set
+     * dynamic sizing.
+     */
+    var tableStyle = "width: auto; margin: 0 auto; border-collapse: collapse; border: none;";
+    var nameStyle = "width: 220px; text-align: left; vertical-align: middle; font-weight: bold; padding: 3px 5px; border: none;";
+    var valueStyle = "width: 400px; text-align: left; vertical-align: middle; padding: 3px 5px; border: none;";
+    var checkboxValueStyle = "width: 400px; text-align: center; vertical-align: middle; padding: 3px 5px; border: none;"
+    var textInputStyle = "height: 25px; padding: 2px 5px;";
+    var checkboxInputStyle = "height: 18px; width: 18px; padding: 2px 5px;";
+    var selectStyle = "height: 25px; padding: 2px; text-align: center;";
+    var requiredLabelStyle = "width: 25px; padding: 5px 10px 10px 5px;";
+    var textInputPrompt = "Enter data";
+
+    var getParameterHtml = function(parameter, editable) {
+	var style = valueStyle;
+	var attributeString = "";
+	if (parameter.type === PARAMETER.BOOLEAN) {
+	    style = checkboxValueStyle;
+	}
+	if (UtilityService.hasContents(parameter.description)) {
+	    attributeString += " title=' " + parameter.description + " '";
+	}
+	var html = "<tr><td style='" + nameStyle + "'" + attributeString + ">"
+		+ getNameHtml(parameter) + "</td><td style='" + style + "'>";
+	if (editable === undefined) {
+	    if (UtilityService.hasContents(parameter.value)) {
+		html += parameter.value;
+	    }
+	} else {
+	    html += getValueHtml(parameter);
+	}
+	html += "</td></tr>";
+	return html;
+    };
+
+    var updateParameter = function(parameter, element, editable) {
+	$(element).parent().parent().children("td").first().html(
+		getNameHtml(parameter));
+	if (editable === undefined) {
+	    $(element).html(parameter.value);
+	} else {
+	    $(element).parent().html(getValueHtml(parameter));
+	}
+    };
+
+    var getNameHtml = function(parameter) {
+	if (parameter.isVisible === false) {
+	    return "";
+	}
+	var name = "";
+	if (UtilityService.hasContents(parameter.name)) {
+	    name = parameter.name;
+	} else {
+	    name = parameter.id;
+	}
+	var requiredLabel = "";
+	if (parameter.isRequired) {
+	    requiredLabel = "<img src='app/vid/images/asterisk.png' style='"
+		    + requiredLabelStyle + "'></img>";
+	}
+	return name + ":" + requiredLabel;
+    };
+
+    var getValueHtml = function(parameter) {
+	var attributeString = " parameter-id='" + parameter.id + "'";
+	var additionalStyle = "";
+	if (parameter.isEnabled === false) {
+	    attributeString += " disabled='disabled'";
+	}
+	if (parameter.isRequired) {
+		attributeString += " is-required='true'";
+	}
+	if (UtilityService.hasContents(parameter.description)) {
+	    attributeString += " title=' " + parameter.description + " '";
+	}
+	if (UtilityService.hasContents(parameter.isReadOnly) && (parameter.isReadOnly === true)) {
+		attributeString += " readonly";
+	}
+	if ( (UtilityService.hasContents(parameter.maxLength)) && (UtilityService.hasContents(parameter.minLength)) ) {
+		attributeString += " pattern='.{" + parameter.minLength + "," + parameter.maxLength + "}' required";
+	}
+	else if (UtilityService.hasContents(parameter.maxLength)) {
+		attributeString += " maxlength='" + parameter.maxLength + "'";
+	}
+	else if (UtilityService.hasContents(parameter.minLength)) {
+		attributeString += " pattern='.{" + parameter.minLength + ",}'"
+	}
+	if (parameter.isVisible === false) {
+	    additionalStyle = " visibility: hidden;";
+	}
+	
+	var name = "";
+	if (UtilityService.hasContents(parameter.name)) {
+	    name = parameter.name;
+	} else {
+	    name = parameter.id;
+	}
+	attributeString += " parameter-name='" + name + "'";
+
+	switch (parameter.type) {
+	case PARAMETER.BOOLEAN:
+		if (parameter.value) {
+			return "<select" + attributeString + " style='" + selectStyle
+			+ additionalStyle + "'>" + "<option value=true>true</option>"
+			+ "<option value=false>false</option>";
+			+ "</select>";
+		}else{
+			return "<select" + attributeString + " style='" + selectStyle
+			+ additionalStyle + "'>" + "<option value=false>false</option>"
+			+ "<option value=true>true</option>"
+			+ "</select>";
+		}
+	    break;
+	case PARAMETER.NUMBER:
+		var value=parameter.value;
+		var parameterSpec = "<input type='number'" + attributeString + " style='" + textInputStyle + additionalStyle + "'";
+		
+		if ( UtilityService.hasContents(parameter.min) ) {
+			parameterSpec += " min='" + parameter.min + "'";
+		}
+		if ( UtilityService.hasContents(parameter.max) ) {
+			parameterSpec += " max='" + parameter.max + "'";
+		}
+		if (UtilityService.hasContents(value)) {
+		parameterSpec += " value='" + value + "'";
+		}
+		parameterSpec += ">";
+		
+		/*if(!isNaN(value) && value.toString().index('.') != -1){
+			//float
+			 return "<input type='text'" + attributeString + " style='"
+			    + textInputStyle + additionalStyle + "' only-integers" + value
+			    + "></input>";
+		} else {
+			//integer
+			 return "<input type='text'" + attributeString + " style='"
+			    + textInputStyle + additionalStyle + "'  only-float" + value
+			    + "></input>";
+		}*/
+		return (parameterSpec);
+	    break;
+	case PARAMETER.SELECT:
+	    if (UtilityService.hasContents(parameter.prompt)) {
+		attributeString += " prompt='" + parameter.prompt + "'";
+	    }
+	    return "<select" + attributeString + " style='" + selectStyle
+		    + additionalStyle + "'>" + getOptionListHtml(parameter)
+		    + "</select>";
+	    break;
+	case PARAMETER.STRING:
+	default:
+	    var value = "";
+	    if (UtilityService.hasContents(parameter.value)) {
+		value = " value='" + parameter.value + "'";
+	    }
+	    if (UtilityService.hasContents(parameter.prompt)) {
+		attributeString += " placeholder='" + parameter.prompt + "'";
+	    } else if (textInputPrompt !== "") {
+		attributeString += " placeholder='" + textInputPrompt + "'";
+	    }
+	    var finalString = "<input type='text'" + attributeString + " style='"
+	    + textInputStyle + additionalStyle + "'" + value
+	    + ">";
+	    return finalString;
+	}
+    };
+    
+    
+    var getBooleanListHtml = function(parameter){
+    	var html = "";
+    	
+    };
+
+    var getOptionListHtml = function(parameter) {
+
+	var html = "";
+
+	if (!angular.isArray(parameter.optionList)
+		|| parameter.optionList.length === 0) {
+	    return "";
+	}
+
+	if (UtilityService.hasContents(parameter.prompt)) {
+	    if (!(IS_SINGLE_OPTION_AUTO_SELECTED && parameter.optionList.length === 1)) {
+		html += "<option value=''>" + parameter.prompt + "</option>";
+	    }
+	}
+
+	for (var i = 0; i < parameter.optionList.length; i++) {
+	    var option = parameter.optionList[i];
+	    var name = option.name;
+	    var value = "";
+	    if (option.id === undefined) {
+		value = option.name;
+	    } else {
+		if (name === undefined) {
+		    name = option.id;
+		}
+		value = option.id;
+	    }
+	    if (option.isDefault === undefined || option.isDefault === false )  {
+	    	html += "<option value='" + value + "'>" + name + "</option>";
+	    }
+	    else {
+	    	html += "<option value='" + value + "' selected>" + name + "</option>";
+	    }
+	}
+	return html;
+    };
+
+    var getParameter = function(element, expectedId) {
+	var id = $(element).attr("parameter-id");
+	if (expectedId !== undefined && expectedId !== id) {
+	    return undefined;
+	}
+	var parameter = {
+	    id : id
+	};
+	if ($(element).prop("type") === "checkbox") {
+	    parameter.value = $(element).prop("checked");
+	} else {
+	    if ($(element).prop("type") === "text") {
+		$(element).val($(element).val().trim());
+	    }
+	    parameter.value = $(element).val();
+	}
+	if ($(element).prop("selectedIndex") === undefined) {
+	    parameter.selectedIndex = -1;
+	} else {
+	    parameter.selectedIndex = $(element).prop("selectedIndex");
+	    if (UtilityService.hasContents($(element).attr("prompt"))) {
+		parameter.selectedIndex--;
+	    }
+	}
+	return parameter;
+    };
+
+    var getRequiredField = function(element) {
+	if ($(element).prop("type") === "text") {
+	    $(element).val($(element).val().trim());
+	}
+	if ($(element).val() === "" || $(element).val() === null) {
+	    return '"' + $(element).attr("parameter-name") + '"';
+	} else {
+	    return "";
+	}
+    };
+
+    var callback = function(element, scope) {
+	scope.callback({
+	    id : $(element).attr("parameter-id")
+	});
+    };
+
+    return {
+	restrict : "EA",
+	replace  : true,
+	template : "<div><table style='" + tableStyle + "'></table></div>",
+	scope : {
+	    control : "=",
+	    callback : "&"
+	},
+	link : function(scope, element, attrs) {
+		
+	    var control = scope.control || {};
+
+	    control.setList = function(parameterList) {
+		var html = "";
+		for (var i = 0; i < parameterList.length; i++) {
+		    html += getParameterHtml(parameterList[i], attrs.editable);
+		}
+		element.html(html);
+		element.find("input, select").bind("change", function() {
+		    callback(this, scope);
+		});
+	    }
+
+	    control.updateList = function(parameterList) {
+		element.find("input, select").each(
+			function() {
+			    for (var i = 0; i < parameterList.length; i++) {
+				if (parameterList[i].id === $(this).attr(
+					"parameter-id")) {
+				    updateParameter(parameterList[i], this,
+					    attrs.editable);
+				}
+			    }
+			});
+		element.find("input, select").bind("change", function() {
+		    callback(this, scope);
+		});
+	    }
+
+	    control.getList = function(expectedId) {
+		var parameterList = new Array();
+		element.find("input, select").each(function() {
+		    var parameter = getParameter(this, expectedId);
+		    if (parameter !== undefined) {
+			parameterList.push(parameter);
+		    }
+		});
+		return parameterList;
+	    }
+
+	    control.getRequiredFields = function() {
+		var requiredFields = "";
+		var count = 0;
+		element.find("input, select").each(function() {
+			if ($(this).attr("is-required") === "true") {
+			var requiredField = getRequiredField(this);
+			if (requiredField !== "") {
+			    if (++count == 1) {
+				requiredFields = requiredField;
+			    }
+			}
+			}
+		});
+		if (--count <= 0) {
+		    return requiredFields;
+		} else if (count == 1) {
+		    return requiredFields + " and 1 other field";
+		} else {
+		    return requiredFields + " and " + count + " other fields";
+		}
+	    }
+    }
+    }
+}
+
+appDS2.directive('parameterBlock', [ "$log", "PARAMETER", "UtilityService",
+	parameterBlockDirective ]);
+
+
+appDS2.directive('onlyIntegers', function () {
+    return  {
+        restrict: 'A',
+        link: function (scope, elm, attrs, ctrl) {
+            elm.on('keydown', function (event) {
+                if(event.shiftKey){event.preventDefault(); return false;}
+                //console.log(event.which);
+                if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
+                    // backspace, enter, escape, arrows
+                    return true;
+                } else if (event.which >= 49 && event.which <= 57) {
+                    // numbers
+                    return true;
+                } else if (event.which >= 96 && event.which <= 105) {
+                    // numpad number
+                    return true;
+                } 
+                // else if ([110, 190].indexOf(event.which) > -1) {
+                //     // dot and numpad dot
+                //     return true;
+                // }
+                else {
+                    event.preventDefault();
+                    return false;
+                }
+            });
+        }
+    }
+});
+
+appDS2.directive('onlyFloat', function () {
+    return  {
+        restrict: 'A',
+        link: function (scope, elm, attrs, ctrl) {
+            elm.on('keydown', function (event) {
+              if ([110, 190].indexOf(event.which) > -1) {
+                    // dot and numpad dot
+                    event.preventDefault();
+                    return true;
+                }
+                else{
+                  return false;
+                }
+            });
+        }
+    }
+});
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/popupWindowDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/popupWindowDirective.js
new file mode 100755
index 0000000..76034d5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/popupWindowDirective.js
@@ -0,0 +1,88 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var popupWindowDirective = function($log, $window) {
+
+    function getZIndex(element) {
+	var maxZIndex = 0;
+	$(window.document).find("*").each(function() {
+	    var zIndex = parseInt($(this).css("z-index"));
+	    if (zIndex > maxZIndex) {
+		maxZIndex = zIndex;
+	    }
+	});
+
+	return maxZIndex;
+    }
+
+    var scrollPosition = {
+	x : 0,
+	y : 0
+    };
+
+    var link = function(scope, element, attrs, controller, transcludeFn) {
+
+	var zIndex = getZIndex(element.parent()) + 1;
+
+	element.css("z-index", zIndex + 1);
+
+	var backgroundStyle = "display: none; position: fixed; z-index:"
+		+ zIndex + ";" + "top: 0; left: 0; width: 100%; height: 100%;"
+		+ "background-color: #000000; opacity: 0.5";
+
+	var className = attrs["class"];
+	var classString = "";
+	if (className !== undefined && className !== null && className !== "") {
+	    element.children().children().children().children().addClass(
+		    className);
+	    element.removeClass(className);
+	}
+
+	element.before("<div style='" + backgroundStyle + "'></div>");
+
+	attrs.$observe("ngxShow", function(value) {
+	    if (value === "true") {
+		scrollPosition = {
+		    x : $window.pageXOffset,
+		    y : $window.pageYOffset
+		}
+		$window.scrollTo(0, 0);
+		element.css("display", "table");
+		element.prev().css("display", "block");
+	    } else if (value === "false") {
+		element.css("display", "none");
+		element.prev().css("display", "none");
+		$window.scrollTo(scrollPosition.x, scrollPosition.y);
+	    }
+	});
+    }
+
+    return {
+	restrict : "EA",
+	transclude : true,
+	replace : true,
+	link : link,
+	template : '<table style="display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-collapse: collapse; margin: 0; padding: 0"> <tr><td align="center" style="vertical-align: top; padding: 10px"><div style="display: inline-block; padding: 5px; background-color: white" ng-transclude></div></td></tr></table>'
+    };
+}
+
+appDS2.directive("popupWindow", [ "$log", "$window", popupWindowDirective ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js b/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js
new file mode 100755
index 0000000..ed71436
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/directives/progressBarDirective.js
@@ -0,0 +1,173 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+/*
+ * "progressBarDirective.js" provides a progress bar directive.
+ * 
+ * SYNTAX:
+ * 
+ * <div progress-bar value="percentProgress"></div>
+ * 
+ * "percentProgress" is the numeric percent progress to be displayed (0 to 100)
+ * expressed as a number only (i.e. no trailing "%"). An "scoped" Angular value
+ * can be used (e.g. "{{percentProgress}}").
+ * 
+ * Two additional attributes can also be included:
+ * 
+ * increases-only="true | false"
+ * 
+ * Normally, the progress bar always updates the display with whatever value is
+ * set. Alternatively, if "increases-only" is set to "true", the display will
+ * only be updated if "percentProgress" is >= the previous value.
+ * 
+ * control="control"
+ * 
+ * Provides a method ... $scope.control.reset()" ... that a controller can call
+ * to reset the progress to it's initial zero state. This would only expected to
+ * be needed if A) increases-only is set to true and B) there is a need to reset
+ * the controller to 0. If increases-only is set to false or not present, an
+ * alternative method of resetting the progress is to just tset percentProgress
+ * to 0.
+ * 
+ * CAVEATS:
+ * 
+ * 1) The extended attribute "ngx-show" should be used instead of "ng-show" if
+ * the control needs to be conditionally visible. Example:
+ * ngx-show="{{isProgressVisible}}"
+ * 
+ * 2) $scope.control.reset() should be conditionally called as follows IF it is
+ * called immediately after HTML is rendered. This is due to a timing-related
+ * behavior.
+ * 
+ * 3) The progress bar displays values of "0" and "100" if precentProgress is,
+ * respectively, less than 0 or greater than 100.
+ * 
+ * CUSTOM STYLING:
+ * 
+ * The ECOMP portal styling uses the class named "progress". The class
+ * attributes can be overridden in CSS. This example was tested:
+ * 
+ * .progress { margin: 0px 10px; height: 40px }
+ * 
+ * Additional styling can be applied to the progress-bar element. Example:
+ * 
+ * div[progress-bar=""] { padding-top: 10px; }
+ * 
+ * if (angular.isFunction($scope.control.reset)) { $scope.control.reset(); }
+ * 
+ * DEPENDENCIES:
+ * 
+ * This code assumes dependency files provided by the ECOMP Portal framework are
+ * included. For example, ".../app/fusion/external/ebz/sandbox/styles/base.css"
+ * is one required dependency. There may also be others.
+ */
+
+var progressBarDirective = function() {
+
+    var style = "font-weight: bold;";
+    /*
+     * The 3 "aria-*" properties were added as per an Internet reference
+     * example. These appear to have no impact on current behavior but are
+     * retained for future reference.
+     */
+    var properties = "class='progress-bar' role='progressbar' "
+	    + "aria-valuenow='' aria-valuemin='0' aria-valuemax='100'";
+    var previousValue = 0;
+
+    var updateProgress = function(element, attrs, valueAsString) {
+	if (valueAsString === undefined || valueAsString === null
+		|| valueAsString === "") {
+	    valueAsString = "0";
+	}
+	var valueAsInteger = parseInt(valueAsString);
+	if (valueAsInteger > 100) {
+	    valueAsInteger = 100;
+	    valueAsString = "100";
+	}
+	if (attrs.increasesOnly === "true") {
+	    if (valueAsInteger >= previousValue) {
+		previousValue = valueAsInteger;
+	    } else {
+		return;
+	    }
+	}
+	element.css("width", valueAsString + "%");
+	if (valueAsInteger >= 100) {
+	    element.removeClass("progress-bar-info").addClass(
+		    "progress-bar-success");
+	} else {
+	    element.removeClass("progress-bar-success").addClass(
+		    "progress-bar-info");
+	}
+	if (valueAsInteger >= 5) {
+	    element.html(valueAsString + " %");
+	} else {
+	    /*
+	     * Hide text since color combination is barely visible when progress
+	     * portion is narrow.
+	     */
+	    element.html("");
+	}
+    }
+
+    return {
+	restrict : "EA",
+	transclude : true,
+	replace : true,
+	template : "<div ng-transclude " + properties + " style='" + style
+		+ "'></div>",
+	scope : {
+	    control : "=",
+	    progressBar : "@"
+	},
+	link : function(scope, element, attrs) {
+
+	    /*
+	     * It should be possible to alternatively add this wrapper in the
+	     * template instead of using "element.wrap". Some techniques were
+	     * attempted but were unsuccessful.
+	     */
+	    element.wrap("<div class='progress'></div");
+
+	    var control = scope.control || {};
+
+	    control.reset = function() {
+		previousValue = 0;
+		updateProgress(element, attrs, 0);
+	    }
+
+	    attrs.$observe("value", function(valueString) {
+		updateProgress(element, attrs, valueString);
+	    });
+
+	    attrs.$observe("ngxShow", function(valueString) {
+		if (valueString === "false") {
+		    element.parent().hide();
+		} else {
+		    element.parent().show();
+		}
+	    });
+	}
+    }
+}
+
+appDS2.directive("progressBar", progressBarDirective);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/aaiService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/aaiService.js
new file mode 100755
index 0000000..8132e3a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/aaiService.js
@@ -0,0 +1,339 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var AaiService = function($http, $log, PropertyService, UtilityService, COMPONENT, FIELD) {
+    return {
+    	getSubscriberName : function(globalCustomerId,
+    			successCallbackFunction) {
+    		    $log
+    			    .debug("AaiService:getSubscriberName: globalCustomerId: "
+    				    + globalCustomerId);
+    		    $http.get(
+    			          COMPONENT.AAI_SUB_DETAILS_PATH
+    				    + globalCustomerId + COMPONENT.ASSIGN + Math.random(),
+    			    {
+    				timeout : PropertyService
+    					.getServerResponseTimeoutMsec()
+    			    }).then(function(response) {
+    			    	var subName = "";
+    			    	if (response.data) {
+    			    		subName = response.data[FIELD.ID.SUBNAME];
+    			    	}
+    			    	successCallbackFunction(subName);
+    			    })["catch"]
+    			    (UtilityService.runHttpErrorHandler);
+    		},
+
+    		
+    		runNamedQuery : function (namedQueryId, globalCustomerId, serviceType, serviceInstanceId, successCallback, errorCallback) {
+    		
+    			var url = COMPONENT.AAI_SUB_VIEWEDIT_PATH +
+    				COMPONENT.FORWARD_SLASH + encodeURIComponent(namedQueryId) +
+    				COMPONENT.FORWARD_SLASH + encodeURIComponent(globalCustomerId) + 
+    				COMPONENT.FORWARD_SLASH + encodeURIComponent(serviceType) + 
+    				COMPONENT.FORWARD_SLASH + encodeURIComponent(serviceInstanceId);
+    			$http.get(url, {
+
+    			},{
+    				timeout : PropertyService.getServerResponseTimeoutMsec()
+    			}).then(function(response) {
+    				if (response.data != null) { 
+    				successCallback(response);
+    				} else {
+    					errorCallback(response);
+    				}
+    			}, function(response) {
+    				errorCallback(response);
+    			});
+    		},
+    		
+    		
+    		getSubDetails : function(selectedSubscriber, selectedServiceInstance, successCallback, errorCallback) { 
+    			var subscriber;
+    			var displayData;
+    			$http.get( COMPONENT.AAI_SUB_DETAILS_PATH  + selectedSubscriber, {
+
+    			},{
+    				timeout : PropertyService.getServerResponseTimeoutMsec()
+    			}).then(function(response) {
+    				displayData = [];
+    				subscriber = response.data;
+    				var subscriberName = subscriber[FIELD.ID.SUBNAME];
+    				if (subscriber[FIELD.ID.SERVICE_SUBSCRIPTIONS] != null) {
+    					angular.forEach(subscriber[FIELD.ID.SERVICE_SUBSCRIPTIONS][FIELD.ID.SERVICE_SUBSCRIPTION], function(serviceSubscription, key) {
+    						var serviceInstanceId = [];
+    						var serviceType = "";
+    						if (serviceSubscription[FIELD.ID.SERVICE_TYPE] != null) {
+    							serviceType = serviceSubscription[FIELD.ID.SERVICE_TYPE];
+    						} else {
+    							serviceType = FIELD.PROMPT.NO_SERVICE_SUB;
+    						}
+    						if (serviceSubscription[FIELD.ID.SERVICE_INSTANCES] != null) {
+    							angular.forEach(serviceSubscription[FIELD.ID.SERVICE_INSTANCES][FIELD.ID.SERVICE_INSTANCE], function(instValue, instKey) {
+    								// put them together, i guess
+    								var inst = { "serviceInstanceId": instValue[FIELD.ID.SERVICE_INSTANCE_ID], 
+											"aaiModelInvariantId": instValue[FIELD.ID.MODEL_INVAR_ID],
+											"aaiModelVersionId": instValue[FIELD.ID.MODEL_VERSION_ID],
+    										"serviceInstanceName": instValue[FIELD.ID.SERVICE_INSTANCE_NAME]
+    								};
+    								if (selectedServiceInstance != null) {
+    									if ((instValue[FIELD.ID.SERVICE_INSTANCE_ID] == selectedServiceInstance ) || (instValue[FIELD.ID.SERVICE_INSTANCE_NAME] == selectedServiceInstance)) {
+    										serviceInstanceId.push(inst);
+    									}
+    								} else {
+    									serviceInstanceId.push(inst);
+    								}
+    							});
+    						} else {
+    							if (serviceInstanceId == []) {
+    								serviceInstanceId = [ FIELD.PROMPT.NO_SERVICE_INSTANCE ];
+    							}
+    						}
+    						angular.forEach(serviceInstanceId, function(subVal, subKey) {
+    							displayData.push({
+    								globalCustomerId 	: selectedSubscriber,
+    								subscriberName   	: subscriberName,
+    								serviceType 		: serviceType,
+    								serviceInstanceId 	: subVal.serviceInstanceId,
+    								aaiModelInvariantId		: subVal.aaiModelInvariantId,
+    								aaiModelVersionId : subVal.aaiModelVersionId,
+    								serviceInstanceName	: subVal.serviceInstanceName
+    							});
+    						});
+    					});
+    				} else { 
+    					displayData.push({
+    						globalCustomerId 	: selectedSubscriber,
+    						subscriberName   	: selectedSubscriberName,
+    						serviceType 		: FIELD.PROMPT.NO_SERVICE_SUB,
+    						serviceInstanceId 	: FIELD.PROMPT.NO_SERVICE_INSTANCE
+    					});  
+    				}
+    				successCallback(displayData, subscriberName);
+    			}, function(response) { 
+    				errorCallback(response);
+    			});
+        	},
+    	getSubList : function(successCallback, errorCallback ) {
+
+    		$http.get( FIELD.ID.AAI_GET_FULL_SUBSCRIBERS, {
+
+    		},{
+    			timeout : PropertyService.getServerResponseTimeoutMsec()
+    		}).then(function(response) {
+    			var customerList = [];
+    			if (response.data.customer != null) {
+    				angular.forEach(response.data.customer, function(subVal, subKey) {
+    					var cust = { "globalCustomerId": subVal[FIELD.ID.GLOBAL_CUSTOMER_ID], "subscriberName": subVal[FIELD.ID.SUBNAME] };
+    					customerList.push(cust);
+    				});	
+    				successCallback(customerList);
+    			} else { 	
+    				errorCallback(response);
+    			}
+    		},function(response) {
+    			errorCallback(response);
+    		});
+    	},
+    	
+    	getServices2 : function(successCallback, errorCallback ) {
+
+    		$http.get( FIELD.ID.AAI_GET_SERVICES, {
+
+    		},{
+    			timeout : PropertyService.getServerResponseTimeoutMsec()
+    		}).then(function(response) {
+    			var customerList = [];
+    			if (response.data != null) {
+    				var serviceIdList = [];
+    				angular.forEach(response.data, function(value, key) {
+    					angular.forEach(value, function(subVal, key) {
+    						var newVal = { "id" : subVal[FIELD.ID.SERVICE_ID], "description" : subVal[FIELD.ID.SERVICE_DESCRIPTION] };
+    						serviceIdList.push(newVal);
+    					});
+    				});
+    				successCallback(serviceIdList);
+    			} else { 	
+    				errorCallback(response);
+    			}
+    		},function(response) {
+    			errorCallback(response);
+    		});
+    	},
+    	
+		getSubscriptionServiceTypeList : function(globalCustomerId,
+			successCallbackFunction) {
+		    $log
+			    .debug("AaiService:getSubscriptionServiceTypeList: globalCustomerId: "
+				    + globalCustomerId);
+		    if ( UtilityService.hasContents(globalCustomerId) ) {
+			    $http.get(
+				        COMPONENT.AAI_SUB_DETAILS_PATH
+					    + globalCustomerId + COMPONENT.ASSIGN + Math.random(),
+				    {
+					timeout : PropertyService
+						.getServerResponseTimeoutMsec()
+				    }).then(function(response) {
+				    	if (response.data && response.data[FIELD.ID.SERVICE_SUBSCRIPTIONS]) {
+					    	var serviceTypes = [];
+					    	var serviceSubscriptions = response.data[FIELD.ID.SERVICE_SUBSCRIPTIONS][FIELD.ID.SERVICE_SUBSCRIPTION];
+					    	
+					    	for (var i = 0; i < serviceSubscriptions.length; i++) {
+					    		serviceTypes.push(serviceSubscriptions[i][FIELD.ID.SERVICE_TYPE]);
+					    	}
+					    	successCallbackFunction(serviceTypes);
+				    	} else {
+				    		successCallbackFunction([]);
+				    	}
+				    })["catch"]
+				    (UtilityService.runHttpErrorHandler);
+			    }
+		},
+		getLcpCloudRegionTenantList : function(globalCustomerId, serviceType,
+				successCallbackFunction) {
+			    $log
+				    .debug("AaiService:getLcpCloudRegionTenantList: globalCustomerId: "
+					    + globalCustomerId);
+			    var url =   COMPONENT.AAI_GET_TENANTS
+			    + globalCustomerId + COMPONENT.FORWARD_SLASH + serviceType + COMPONENT.ASSIGN + Math.random();
+			    
+			    $http.get(url,
+				    {
+					timeout : PropertyService
+						.getServerResponseTimeoutMsec()
+				    }).then(function(response) {
+				    	var lcpCloudRegionTenants = [];
+				    	var aaiLcpCloudRegionTenants = response.data;
+				    	
+				    	lcpCloudRegionTenants.push({
+			    			"cloudRegionId": "",
+			    			"tenantName": FIELD.PROMPT.REGION,
+			    			"tenantId": ""
+			    		});
+				    	
+				    	for (var i = 0; i < aaiLcpCloudRegionTenants.length; i++) {
+				    		lcpCloudRegionTenants.push({
+				    			"cloudRegionId": aaiLcpCloudRegionTenants[i][COMPONENT.CLOUD_REGION_ID],
+				    			"tenantName": aaiLcpCloudRegionTenants[i][COMPONENT.TENANT_NAME],
+				    			"tenantId": aaiLcpCloudRegionTenants[i][COMPONENT.TENANT_ID]
+				    		});
+				    	}
+				    	
+				    	successCallbackFunction(lcpCloudRegionTenants);
+				    })["catch"]
+				    (UtilityService.runHttpErrorHandler);
+		},
+		getSubscribers : function(successCallbackFunction) {
+			    $log
+				    .debug("AaiService:getSubscribers");
+			    var url =  FIELD.ID.AAI_GET_SUBSCRIBERS + COMPONENT.ASSIGN + Math.random();
+		
+			    $http.get(url,
+				    {
+					timeout : PropertyService
+						.getServerResponseTimeoutMsec()
+				    }).then(function(response) {
+				    	if (response.data) {
+				    		successCallbackFunction(response.data.customer);
+				    	} else {
+				    		successCallbackFunction([]);
+				    	}
+				    })["catch"]
+				    (UtilityService.runHttpErrorHandler);
+		},
+		getProvOptionsFromSystemProp : function(successCallbackFunction) {
+		    $log
+			    .debug("AaiService:getProvOptionsFromSystemProp");
+		    var url =  COMPONENT.GET_SYSTEM_PROP_VNF_PROV_STATUS_PATH;
+	
+		    $http.get(url,
+			    {
+				timeout : PropertyService
+					.getServerResponseTimeoutMsec()
+			    }).then(function(response) {
+			    	if (response.data) {
+			    		successCallbackFunction(response);
+			    	} else {
+			    		successCallbackFunction([]);
+			    	}
+			    })["catch"]
+			    (UtilityService.runHttpErrorHandler);
+	    },
+	    getLoggedInUserID : function(successCallbackFunction) {
+		    $log
+			    .debug("AaiService:getLoggedInUserID");
+		    var url = COMPONENT.GET_USER_ID;
+	
+		    $http.get(url,
+			    {
+				timeout : PropertyService
+					.getServerResponseTimeoutMsec()
+			    }).then(function(response) {
+			    	if (response.data) {
+			    		successCallbackFunction(response);
+			    	} else {
+			    		successCallbackFunction([]);
+			    	}
+			    })["catch"]
+			    (UtilityService.runHttpErrorHandler);
+	    },
+		getServices : function(successCallbackFunction) {
+		    $log
+			    .debug("AaiService:getServices");
+		    var url =  COMPONENT.AAI_GET_SERVICES + COMPONENT.ASSIGN + Math.random();
+	
+		    $http.get(url,
+			    {
+				timeout : PropertyService
+					.getServerResponseTimeoutMsec()
+			    }).then(function(response) {
+			    	if (response.data) {
+			    		successCallbackFunction(response);
+			    	} else {
+			    		successCallbackFunction([]);
+			    	}
+			    })["catch"]
+			    (UtilityService.runHttpErrorHandler);
+	},
+	getServiceModels : function(globalCustomerId,serviceType,successCallbackFunction) {
+	    $log
+		    .debug("AaiService:getServices");
+		 var url =   COMPONENT.AAI_GET_SERVICES + COMPONENT.FORWARD_SLASH+globalCustomerId+ COMPONENT.FORWARD_SLASH +serviceType+COMPONENT.ASSIGN + Math.random();
+
+	    $http.get(url,
+		    {
+			timeout : PropertyService
+				.getServerResponseTimeoutMsec()
+		    }).then(function(response) {
+		    	if (response.data) {
+		    		successCallbackFunction(response);
+		    	} else {
+		    		successCallbackFunction([]);
+		    	}
+		    })["catch"]
+		    (UtilityService.runHttpErrorHandler);
+}
+    }
+}
+
+appDS2.factory("AaiService", [ "$http", "$log", "PropertyService",
+	"UtilityService", "COMPONENT", "FIELD", AaiService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/asdcService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/asdcService.js
new file mode 100755
index 0000000..68fdce4
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/asdcService.js
@@ -0,0 +1,40 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var AsdcService = function($http, $log, PropertyService, UtilityService) {
+    return {
+	getModel : function(modelId, successCallbackFunction) {
+	    $log.debug("AsdcService:getModel: modelId: " + modelId);
+	    $http.get(
+		     "asdc/getModel/" + modelId
+			    + "?r=" + Math.random(),
+		    {
+			timeout : PropertyService
+				.getServerResponseTimeoutMsec()
+		    }).then(successCallbackFunction)["catch"]
+		    (UtilityService.runHttpErrorHandler);
+	}
+    }
+}
+
+appDS2.factory("AsdcService", [ "$http", "$log", "PropertyService",
+	"UtilityService", AsdcService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/componentService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/componentService.js
new file mode 100755
index 0000000..391c6ba
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/componentService.js
@@ -0,0 +1,178 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var ComponentService = function($log, COMPONENT, UtilityService) {
+
+    var _this = this;
+
+    var componentList = [ {
+	id : COMPONENT.NETWORK,
+	displayName : "Network"
+    }, {
+	id : COMPONENT.SERVICE,
+	displayName : "Service Instance"
+    }, {
+	id : COMPONENT.VNF,
+	displayName : "Virtual Network Function"
+    }, {
+	id : COMPONENT.VF_MODULE,
+	displayName : "VF Module"
+    }, {
+	id : COMPONENT.VOLUME_GROUP,
+	displayName : "Volume Group"
+    } ];
+
+    var getInventoryInfo = function(suffix, inventoryItem) {
+	var pattern = new RegExp(suffix + "-");
+	for ( var key in inventoryItem) {
+	    if (pattern.exec(key)) {
+		return inventoryItem[key];
+	    }
+	}
+    };
+
+    /*
+     * Converts 'id' to a user friendly version.
+     * 
+     * The algorithm used is:
+     * 
+     * 1) If "id" found in COMPONENT.FULL_NAME_MAP, return the name found in the
+     * map.
+     * 
+     * 2) Otherwise, if camel case, add "-" between camel case words.
+     * 
+     * 3) Split id into multiple "partial names" assuming "-" is the delimiter.
+     * 
+     * 4) Map any partial names found in COMPONENT.PARTIAL_NAME_MAP to the name
+     * found in the map.
+     * 
+     * 5) Use partial names whenever not found in map.
+     * 
+     * 5) Return name by combining all partial names with " " delimiter.
+     */
+    var getDisplayName = function(id) {
+	var tmp = COMPONENT.FULL_NAME_MAP[id.toLowerCase()];
+	if (UtilityService.hasContents(tmp)) {
+	    return tmp;
+	}
+	/*
+	 * Add "-" if camel case found.
+	 */
+	var id = id.replace(/([a-z](?=[A-Z]))/g, '$1-');
+	var name = "";
+	var arg = id.split("-");
+	for (var i = 0; i < arg.length; i++) {
+	    if (i > 0) {
+		name += " ";
+	    }
+	    var tmp = COMPONENT.PARTIAL_NAME_MAP[arg[i].toLowerCase()];
+	    if (UtilityService.hasContents(tmp)) {
+		name += tmp;
+	    } else {
+		name += arg[i].slice(0, 1).toUpperCase() + arg[i].slice(1);
+	    }
+	}
+	return name;
+    };
+
+    return {
+	initialize : function(componentId) {
+	    for (var i = 0; i < componentList.length; i++) {
+		if (componentList[i].id === componentId) {
+		    _this.componentId = componentList[i].id;
+		    return componentId;
+		}
+	    }
+	    throw "ComponentService:initializeComponent: componentId not found: "
+		    + componentId;
+	},
+	getComponentDisplayName : function() {
+	    for (var i = 0; i < componentList.length; i++) {
+		if (componentList[i].id === _this.componentId) {
+		    return componentList[i].displayName;
+		}
+	    }
+	},
+	getInventoryInfo : getInventoryInfo,
+	getInventoryParameterList : function(suffix, inventoryItem, isPartial) {
+		console.log ("getInventoryParameterList" ); console.log ( JSON.stringify ( inventoryItem, null, 4));
+	    var parameterList = new Array();
+	    var pattern = new RegExp("network-id|network-name");
+	    var pattern1 = new RegExp("neutron");
+	
+	    if ( (suffix === COMPONENT.NETWORK) && (isPartial) ) {
+	    	for ( var id in inventoryItem.object) {
+				if (pattern.exec(id) && (!(pattern1.exec(id))) ) {
+				    parameterList.push({
+					id : id,
+					value : inventoryItem.object[id]
+				    });
+				}
+			}
+	    }
+	    else if (suffix === COMPONENT.NETWORK) {
+	    	for ( var id in inventoryItem.object) {
+	    		parameterList.push({
+	    			id : id,
+	    			value : inventoryItem.object[id]
+	    		});
+			}
+	    	for ( var index in inventoryItem.subnets) {
+	    		for (var fieldId in inventoryItem.subnets[index]) {
+	    			parameterList.push({
+	    				id : fieldId,
+	    				value : inventoryItem.subnets[index][fieldId]
+	    			});
+	    		}
+			}
+	    }
+	    else {
+		    for ( var id in inventoryItem) {
+			//if (pattern.exec(id)) {
+			    parameterList.push({
+				id : id,
+				value : inventoryItem[id]
+			    });
+			//}
+		    }
+	    }
+	    return parameterList;
+	},
+	getDisplayNames : function(inputList) {
+	    var outputList = new Array();
+	    for (var i = 0; i < inputList.length; i++) {
+		var entry = angular.copy(inputList[i]);
+		if (!UtilityService.hasContents(entry.name)) {
+		    entry.name = getDisplayName(entry.id);
+		}
+		outputList.push(entry);
+	    }
+	    return outputList;
+	},
+	getFieldDisplayName : function(name) {
+	    return getDisplayName(name);
+	}
+    }
+}
+
+appDS2.factory("ComponentService", [ "$log", "COMPONENT", "UtilityService",
+	ComponentService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/creationService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/creationService.js
new file mode 100755
index 0000000..f6838af
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/creationService.js
@@ -0,0 +1,924 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+/*
+ * "CreationService" isolates the "component-specific" logic required by the
+ * "CreationDialog" controller.
+ *
+ * "Components" are defined as the 5 element types managed by the dialogs: A)
+ * Service B) VNF C) VF Module D) Volume Group and E) Network.
+ * 
+ */
+
+var CreationService = function($log, AaiService, AsdcService, DataService,
+		ComponentService, COMPONENT, FIELD, PARAMETER, UtilityService) {
+
+	var _this = this;
+
+	var getAsyncOperationList = function() {
+		if (DataService.getLoggedInUserId() == null)
+			getLoggedInUserID();
+		switch (_this.componentId) {
+		case COMPONENT.SERVICE:
+			return [ getSubscribers, getServices ];
+		case COMPONENT.NETWORK:
+			return [ getLcpCloudRegionTenantList ];
+		case COMPONENT.VNF:
+			return [ getLcpCloudRegionTenantList ];
+		case COMPONENT.VF_MODULE:
+			return [ getLcpCloudRegionTenantList ];
+		case COMPONENT.VOLUME_GROUP:
+			return [ getLcpCloudRegionTenantList ];
+		}
+	};
+
+	/*
+	 * "getSummaryList" and "getUserProvidedList" return parameters that should
+	 * be displayed in the summary and user provided sections, respectively. The
+	 * functions are expected to return lists that are in the format needed by
+	 * the parameter-block directive.
+	 */
+
+	var getSummaryList = function() {
+
+		/*
+		 * These placeholders should be removed and their usage in
+		 * "getSummaryList" should be replaced by appropriate code as the
+		 * requirements and interfaces firm up.
+		 */
+
+		var PLACEHOLDER_RESOURCE_DESCRIPTION = "Resource Description (PLACEHOLDER)";
+		var PLACEHOLDER_SERVICE_CATEGORY = "Service Category (PLACEHOLDER)";
+		var PLACEHOLDER_VF_MODULE_DESCRIPTION = "VF Module Description (PLACEHOLDER)";
+		var PLACEHOLDER_VF_MODULE_LABEL = "VF Module Label (PLACEHOLDER)";
+		var PLACEHOLDER_VF_MODULE_TYPE = "VF Module Type (PLACEHOLDER)";
+
+		_this.parameterList = new Array();
+
+		/*
+		 * Common fields displayed at the top of all create instance screens.
+		 */
+		addToList(FIELD.NAME.SERVICE_NAME, DataService.getServiceName());
+
+		switch (_this.componentId) {
+		case COMPONENT.SERVICE:
+			if ( !DataService.getALaCarte() ) {
+				// for macro instantiation need to add the resource names under the node template list
+				// this field is called modelCustomizationName in the asdc client code
+				var p;
+				var rlist = DataService.getResources();
+				var res;
+				if ( rlist != null ) { 
+					for (var i = 0; i < rlist.length; i++) {
+						res = rlist[i];
+					
+						p = FIELD.NAME.RESOURCE_NAME.concat(" " + (i+1));
+						addToList(p, res.name );
+						p = FIELD.NAME.RESOURCE_DESCRIPTION.concat(" " + (i+1));
+						addToList(p, res.description );
+					}
+				}
+			}
+			addToList(FIELD.NAME.SERVICE_INVARIANT_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.SERVICE_VERSION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_VERSION]);
+			addToList(FIELD.NAME.SERVICE_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME_VERSION_ID]);
+			addToList(FIELD.NAME.SERVICE_DESCRIPTION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.DESCRIPTION]);
+			addToList(FIELD.NAME.SERVICE_CATEGORY, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.CATEGORY]);
+			break;
+		case COMPONENT.VF_MODULE:
+			addToList(FIELD.NAME.SUBSCRIBER_NAME, DataService
+					.getSubscriberName());
+			addToList(FIELD.NAME.SERVICE_INSTANCE_NAME, DataService
+					.getServiceInstanceName());
+			addToList(FIELD.NAME.MODEL_NAME, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_INVARIANT_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_VERSION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_VERSION]);
+			addToList(FIELD.NAME.MODEL_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME_VERSION_ID]);
+			addToList(FIELD.NAME.MODEL_CUSTOMIZATION_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.CUSTOMIZATION_UUID]);
+			break;
+		case COMPONENT.VNF:
+			addToList(FIELD.NAME.SUBSCRIBER_NAME, DataService
+					.getSubscriberName());
+			addToList(FIELD.NAME.SERVICE_INSTANCE_NAME, DataService
+					.getServiceInstanceName());
+			addToList(FIELD.NAME.MODEL_NAME, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_INVARIANT_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_VERSION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_VERSION]);
+			addToList(FIELD.NAME.MODEL_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME_VERSION_ID]);
+			addToList(FIELD.NAME.MODEL_CUSTOMIZATION_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.CUSTOMIZATION_UUID]);
+			addToList(FIELD.NAME.MODEL_CUSTOMIZATION_NAME, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_CUSTOMIZATION_NAME]);
+			addToList(FIELD.NAME.MODEL_VNF_TYPE, DataService
+					.getModelInfo(_this.componentId)[COMPONENT.VNF_TYPE]);
+			addToList(FIELD.NAME.MODEL_VNF_ROLE, DataService
+					.getModelInfo(_this.componentId)[COMPONENT.VNF_ROLE]);
+			addToList(FIELD.NAME.MODEL_VNF_FUNCTION, DataService
+					.getModelInfo(_this.componentId)[COMPONENT.VNF_FUNCTION]);
+			addToList(FIELD.NAME.MODEL_VNF_CODE, DataService
+					.getModelInfo(_this.componentId)[COMPONENT.VNF_CODE]);
+			break;
+		case COMPONENT.NETWORK:
+		case COMPONENT.VOLUME_GROUP:
+			addToList(FIELD.NAME.SUBSCRIBER_NAME, DataService
+					.getSubscriberName());
+			addToList(FIELD.NAME.SERVICE_INSTANCE_NAME, DataService
+					.getServiceInstanceName());
+			addToList(FIELD.NAME.MODEL_NAME, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_INVARIANT_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_VERSION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_VERSION]);
+			addToList(FIELD.NAME.MODEL_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME_VERSION_ID]);
+			addToList(FIELD.NAME.MODEL_CUSTOMIZATION_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.CUSTOMIZATION_UUID]);
+			break;
+		}
+
+		return _this.parameterList;
+	};
+
+	var getUserProvidedList = function() {
+		parameterList = [];
+		var isUserProvidedNaming = false;
+		if ( (DataService.getModelInfo(_this.componentId).serviceEcompNaming != null) 
+				&& (DataService.getModelInfo(_this.componentId).serviceEcompNaming === "false") ) {
+			isUserProvidedNaming = true;
+		}
+		var parameterList;
+		if (_this.componentId === COMPONENT.SERVICE) {
+			if ( DataService.getALaCarte() ) {
+				parameterList = [ FIELD.PARAMETER.INSTANCE_NAME ];
+				parameterList = parameterList.concat([ getSubscribersParameter(),
+				    FIELD.PARAMETER.SERVICE_TYPE_DISABLED ]);
+			}
+			else {
+				// macro
+				if (isUserProvidedNaming) {
+					parameterList = [ FIELD.PARAMETER.INSTANCE_NAME ];
+					
+				}
+				parameterList = parameterList.concat([ getSubscribersParameter(),
+				    FIELD.PARAMETER.SERVICE_TYPE_DISABLED ]);
+				parameterList = parameterList.concat([ getServiceId(),
+					FIELD.PARAMETER.SERVICE_TYPE,
+					FIELD.PARAMETER.LCP_REGION,
+					FIELD.PARAMETER.TENANT_DISABLED ]);
+			}
+		}
+		else {
+			parameterList = [ FIELD.PARAMETER.INSTANCE_NAME ];
+			switch (_this.componentId) {
+			case COMPONENT.NETWORK:
+			case COMPONENT.VNF:
+				parameterList = parameterList.concat([ getServiceId(),
+						getLcpRegion(), FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,
+						FIELD.PARAMETER.TENANT_DISABLED ]);
+				break;
+			case COMPONENT.VF_MODULE:
+				parameterList = parameterList.concat([
+				        getLcpRegion(),
+						FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,
+						FIELD.PARAMETER.TENANT_DISABLED
+				]);
+				
+				var availableVolumeGroupList = DataService.getAvailableVolumeGroupList();
+				
+				if (availableVolumeGroupList && availableVolumeGroupList.length > 0) {
+					var availableVolumeGroupNames = [FIELD.STATUS.NONE];
+	
+					for (var i = 0; i < availableVolumeGroupList.length; i++) {
+						availableVolumeGroupNames.push(availableVolumeGroupList[i].instance.name);
+					}
+					
+					parameterList.push(addOptionList(
+							FIELD.PARAMETER.AVAILABLE_VOLUME_GROUP,
+							availableVolumeGroupNames));
+				}
+				break;
+			case COMPONENT.VOLUME_GROUP:
+				parameterList = parameterList.concat([ getLcpRegion(),
+						FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,
+						FIELD.PARAMETER.TENANT_DISABLED ]);
+			}
+		}
+
+		parameterList.push(FIELD.PARAMETER.SUPPRESS_ROLLBACK);
+
+		addArbitraryParameters(parameterList);
+
+		return parameterList;
+	};
+
+	var addArbitraryParameters = function(parameterList) {
+		if ( DataService.getModelInfo(_this.componentId).displayInputs != null ) {
+			var inputs = DataService.getModelInfo(_this.componentId).displayInputs;	 
+			for ( var key in inputs) {
+				var parameter = {
+						id : key,
+						type : PARAMETER.STRING,
+						name : ComponentService.getFieldDisplayName(key),
+						value : inputs[key][PARAMETER.DEFAULT],
+						isRequired : inputs[key][PARAMETER.REQUIRED],
+						description : inputs[key][PARAMETER.DESCRIPTION]
+				};
+				switch (inputs[key][PARAMETER.TYPE]) {
+					case PARAMETER.INTEGER:
+						parameter.type = PARAMETER.NUMBER;
+						break;
+					case PARAMETER.BOOLEAN:
+						parameter.type = PARAMETER.BOOLEAN;
+						break;
+					case PARAMETER.RANGE:
+						break;
+					case PARAMETER.LIST:
+						break;
+					case PARAMETER.MAP:
+						parameter.type = PARAMETER.MAP;
+						break;
+				}
+			
+				if ( UtilityService.hasContents(inputs[key][PARAMETER.CONSTRAINTS]) 
+						&& ( inputs[key][PARAMETER.CONSTRAINTS].length > 0 ) ) {
+					var constraintsArray = inputs[key][PARAMETER.CONSTRAINTS];
+					//console.log ("Calling addConstraintParameters for input name=" + key);
+					addConstraintParameters (parameterList, constraintsArray, key, inputs, parameter);
+				}
+				else {
+					
+					parameterList.push(parameter);
+				}
+			}
+		}
+	};
+
+	var addConstraintParameters = function(parameterList, constraintsArray, key, inputs, parameter) {
+		// If there are constraints and the operator is "valid_values",
+		// use a select parameter type. 
+		var i = constraintsArray.length;
+		var parameterPushed = false;
+		if ( i > 0 ) {
+			while ( (i--) && (!parameterPushed) ) {
+				var keys = Object.keys(constraintsArray[i]);
+				//var keys_len = keys.length;
+				for ( var operator in keys ) {
+					//console.log ("keys[operator]=" + keys[operator]);
+					switch (keys[operator]) {
+					case PARAMETER.VALID_VALUES:
+						var j = constraintsArray[i][PARAMETER.VALID_VALUES].length;
+						if ( j > 0 ) {
+							var oList = [];
+							var option;
+							while (j--) {
+								option = {
+										name: constraintsArray[i][PARAMETER.VALID_VALUES][j],
+										isDefault: false
+								} 
+								if ( ( UtilityService.hasContents (inputs[key][PARAMETER.DEFAULT]) ) 
+										&& (inputs[key][PARAMETER.DEFAULT] === constraintsArray[i][PARAMETER.VALID_VALUES][j] ) ) {
+									option = {
+											name: constraintsArray[i][PARAMETER.VALID_VALUES][j],
+											isDefault: true
+									} 
+								}
+								oList.push(option);
+							}
+							parameter.type = PARAMETER.SELECT;
+							parameter.optionList = oList;
+							parameterList.push(parameter);
+							parameterPushed = true;
+							//console.log ("pushed param for valid values");
+						}
+					break; 
+					
+					case PARAMETER.EQUAL: 
+						if ( constraintsArray[i][PARAMETER.EQUAL] != null ) {
+							//override parameter type
+							parameter.type = PARAMETER.STRING;
+							parameter.isReadOnly = true;
+							parameter.value = constraintsArray[i][PARAMETER.EQUAL];
+							parameterList.push(parameter);
+							parameterPushed = true;
+							//console.log ("pushed param for equal");
+						}
+					break;
+						
+					case PARAMETER.LENGTH: 
+						if ( constraintsArray[i][PARAMETER.LENGTH] != null ) {
+							parameter.minLength = constraintsArray[i][PARAMETER.LENGTH];
+							parameter.maxLength = constraintsArray[i][PARAMETER.LENGTH];
+							parameterList.push(parameter);
+							parameterPushed = true;
+							//console.log ("pushed param for length: ");
+							//console.log (JSON.stringify (parameter, null, 4));
+						}
+					break;
+					case PARAMETER.MAX_LENGTH: 
+						if ( constraintsArray[i][PARAMETER.MAX_LENGTH] != null ) {
+							parameter.maxLength = constraintsArray[i][PARAMETER.MAX_LENGTH];
+							parameterList.push(parameter);
+							parameterPushed = true;
+							//console.log ("pushed param for max length: ");
+							//console.log (JSON.stringify (parameter, null, 4));
+						}
+					break;
+					case PARAMETER.MIN_LENGTH: 
+						if ( constraintsArray[i][PARAMETER.MIN_LENGTH] != null ) {
+							parameter.minLength = constraintsArray[i][PARAMETER.MIN_LENGTH];
+							parameterList.push(parameter);
+							parameterPushed = true;
+							//console.log ("pushed param for min length: ");
+							//console.log (JSON.stringify (parameter, null, 4));
+						}
+					break;
+					case PARAMETER.IN_RANGE:
+						if ( constraintsArray[i][PARAMETER.IN_RANGE] != null ) {
+							if (constraintsArray[i][PARAMETER.IN_RANGE].length > 1 ) {
+								parameter.min = constraintsArray[i][PARAMETER.IN_RANGE][0];
+								parameter.max = constraintsArray[i][PARAMETER.IN_RANGE][1];
+								parameter.type = PARAMETER.NUMBER;
+								parameter.value = inputs[key][PARAMETER.DEFAULT]
+								parameterList.push(parameter);
+								parameterPushed = true;
+								//console.log ("pushed param for in_range");
+							}
+						}
+					break; 
+					case PARAMETER.GREATER_THAN:
+						if ( constraintsArray[i][PARAMETER.GREATER_THAN] != null ) {
+								parameter.type = PARAMETER.NUMBER;
+								parameter.min = constraintsArray[i][PARAMETER.GREATER_THAN];
+								parameter.value = inputs[key][PARAMETER.DEFAULT]
+								parameterList.push(parameter);
+								parameterPushed = true;
+								//console.log ("pushed param for greater_than");
+							
+						}
+					break;
+					}//switch
+				}//for
+				
+			}//while
+		}//if
+	};
+	var addToList = function(name, value) {
+		_this.parameterList.push({
+			name : name,
+			value : value
+		});
+	};
+
+	/*
+	 * The "*Mso*" functions return URL and request details that can be passed
+	 * to the MSO controller. The request details defines the info passed as
+	 * part of the POST body.
+	 */
+
+	var getMsoUrl = function() {
+		switch (_this.componentId) {
+		case COMPONENT.NETWORK:
+			return "mso_create_nw_instance/"
+					+ DataService.getServiceInstanceId();
+		case COMPONENT.SERVICE:
+			return "mso_create_svc_instance";
+		case COMPONENT.VNF:
+			return "mso_create_vnf_instance/"
+					+ DataService.getServiceInstanceId();
+		case COMPONENT.VF_MODULE:
+			return "mso_create_vfmodule_instance/"
+					+ DataService.getServiceInstanceId() + "/vnfs/"
+					+ DataService.getVnfInstanceId();
+		case COMPONENT.VOLUME_GROUP:
+			return "mso_create_volumegroup_instance/"
+					+ DataService.getServiceInstanceId() + "/vnfs/"
+					+ DataService.getVnfInstanceId();
+		}
+	};
+
+	var getMsoRequestDetails = function(parameterList) {
+		console.log("getMsoRequestDetails invoked, parameterList="); console.log(JSON.stringify(parameterList,null,4));
+		var modelInfo = DataService.getModelInfo(_this.componentId);
+		var requestorloggedInId = DataService.getLoggedInUserId();
+		if (requestorloggedInId ==  null)
+			requestorloggedInId = "";
+		var isSupRollback = false;
+		if (getValueFromList(FIELD.ID.SUPPRESS_ROLLBACK,parameterList) === "true") {
+			isSupRollback = true;
+		}
+		var requestDetails = {
+			requestInfo : {
+				instanceName : getValueFromList(FIELD.ID.INSTANCE_NAME,
+						parameterList),
+				source : FIELD.ID.VID,
+				suppressRollback : isSupRollback,
+				requestorId: requestorloggedInId
+			},
+			modelInfo : {
+				modelType : _this.componentId,
+				modelInvariantId : modelInfo.modelInvariantId,
+				modelVersionId : modelInfo.modelNameVersionId,
+				modelName : modelInfo.modelName,
+				modelVersion : modelInfo.modelVersion,
+				modelCustomizationId: modelInfo.customizationUuid,
+				modelCustomizationName : modelInfo.modelCustomizationName
+			},
+			requestParameters : {
+				userParams : getArbitraryParameters(parameterList)
+			}
+		};
+		if ( (_this.componentId != COMPONENT.SERVICE) || ( !DataService.getALaCarte() ) ) {
+			// include cloud region for everything but service create alacarte
+			var lcpRegion = getValueFromList(FIELD.ID.LCP_REGION, parameterList);
+			if (lcpRegion === FIELD.KEY.LCP_REGION_TEXT) {
+				lcpRegion = getValueFromList(FIELD.ID.LCP_REGION_TEXT,
+						parameterList);
+			}
+			requestDetails.cloudConfiguration = {
+					lcpCloudRegionId : lcpRegion,
+					tenantId : getValueFromList(FIELD.ID.TENANT, parameterList)
+			};	
+		}
+		switch (_this.componentId) {
+		case COMPONENT.SERVICE:
+			requestDetails.subscriberInfo = {
+				globalSubscriberId : DataService.getGlobalCustomerId(),
+				subscriberName : DataService.getSubscriberName()
+			};
+			requestDetails.requestParameters.subscriptionServiceType = getValueFromList(
+					FIELD.ID.SERVICE_TYPE, parameterList);
+			requestDetails.requestParameters.aLaCarte = DataService.getALaCarte();
+			if ( !DataService.getALaCarte() ) {
+				requestDetails.requestInfo.productFamilyId = getValueFromList(
+					FIELD.ID.PRODUCT_FAMILY, parameterList);
+			}
+			var svcModelInfo = {
+					modelType : _this.componentId,
+					modelInvariantId : modelInfo.modelInvariantId,
+					modelVersionId : modelInfo.modelNameVersionId,
+					modelName : modelInfo.modelName,
+					modelVersion : modelInfo.modelVersion
+				};
+				requestDetails.modelInfo = svcModelInfo;
+			break;
+		case COMPONENT.VNF:
+			
+			requestDetails.requestInfo.productFamilyId = getValueFromList(
+					FIELD.ID.PRODUCT_FAMILY, parameterList);
+			break;
+		case COMPONENT.NETWORK:
+			requestDetails.requestInfo.productFamilyId = getValueFromList(
+					FIELD.ID.PRODUCT_FAMILY, parameterList);
+			
+			break;
+		case COMPONENT.VF_MODULE:
+				break;
+		case COMPONENT.VOLUME_GROUP:
+			break;
+		}
+
+		var relatedInstanceList = getRelatedInstanceList(parameterList);
+
+		if (relatedInstanceList !== undefined) {
+			requestDetails.relatedInstanceList = relatedInstanceList;
+		}
+
+		return requestDetails;
+	};
+
+	var getRelatedInstanceList = function(parameterList) {
+		var relatedInstanceList = new Array();
+		switch (_this.componentId) {
+		case COMPONENT.SERVICE:
+			return undefined;
+		case COMPONENT.NETWORK:
+		case COMPONENT.VNF:
+			addRelatedInstance(relatedInstanceList, COMPONENT.SERVICE,
+					DataService.getServiceInstanceId());
+			break;
+		case COMPONENT.VF_MODULE:
+			addRelatedInstance(relatedInstanceList, COMPONENT.SERVICE,
+					DataService.getServiceInstanceId());
+			addRelatedInstance(relatedInstanceList, COMPONENT.VNF, DataService
+					.getVnfInstanceId());
+
+			var availableVolumeGroup = getValueFromList(
+					FIELD.ID.AVAILABLE_VOLUME_GROUP, parameterList);
+			
+			if (UtilityService.hasContents(availableVolumeGroup) && availableVolumeGroup !== "None") {
+				var availableVolumeGroups = DataService.getAvailableVolumeGroupList();
+				
+				for (var i = 0; i < availableVolumeGroups.length; i++) {
+					if (availableVolumeGroups[i].instance.name == availableVolumeGroup) {
+						DataService.setModelInfo(COMPONENT.VOLUME_GROUP, DataService.getModelInfo(COMPONENT.VF_MODULE));
+						DataService.setVolumeGroupInstanceId(availableVolumeGroups[i].instance.object["volume-group-id"]);
+						break;
+					}
+				}
+				
+				addRelatedInstance(relatedInstanceList, COMPONENT.VOLUME_GROUP,
+						DataService.getVolumeGroupInstanceId());
+			}
+			break;
+		case COMPONENT.VOLUME_GROUP:
+			addRelatedInstance(relatedInstanceList, COMPONENT.SERVICE,
+					DataService.getServiceInstanceId());
+			addRelatedInstance(relatedInstanceList, COMPONENT.VNF, DataService
+					.getVnfInstanceId());
+			break;
+		}
+
+		return relatedInstanceList;
+	};
+
+	var addRelatedInstance = function(relatedInstanceList, componentId,
+			instanceId) {
+		var modelInfo = DataService.getModelInfo(componentId);
+		var relatedInstance;
+		if (modelInfo !== undefined) {
+			if (componentId === COMPONENT.SERVICE) {
+				relatedInstance = {
+					"instanceId" : instanceId,
+					"modelInfo" : {
+						"modelType" : componentId,
+						"modelName" : modelInfo.modelName,
+						"modelInvariantId" : modelInfo.modelInvariantId,
+						"modelVersion" : modelInfo.modelVersion,
+						"modelVersionId" : modelInfo.modelNameVersionId,
+						
+					}
+				};
+			}
+			else {
+				relatedInstance = {
+						"instanceId" : instanceId,
+						"modelInfo" : {
+							"modelType" : componentId,
+							"modelName" : modelInfo.modelName,
+							"modelInvariantId" : modelInfo.modelInvariantId,
+							"modelVersion" : modelInfo.modelVersion,
+							"modelVersionId" : modelInfo.modelNameVersionId,
+							"modelCustomizationId": modelInfo.customizationUuid,
+							"modelCustomizationName": modelInfo.modelCustomizationName
+						}
+				}
+			}
+			relatedInstanceList.push({
+				relatedInstance : relatedInstance
+			});
+		}
+	};
+
+	/*
+	 * var getArbitraryParameters = function(parameterList) { var
+	 * arbitraryParameters = new Object(); for (var i = 0; i <
+	 * parameterList.length; i++) { var parameter = parameterList[i]; switch
+	 * (parameter.id) { case FIELD.ID.INSTANCE_NAME: case
+	 * FIELD.ID.PRODUCT_FAMILY: case FIELD.ID.LCP_REGION: case
+	 * FIELD.ID.LCP_REGION_TEXT: case FIELD.ID.SERVICE_TYPE: case
+	 * FIELD.ID.TENANT: case FIELD.ID.SUPPRESS_ROLLBACK: break; default:
+	 * arbitraryParameters[parameter.id] = parameter.value; } } return
+	 * arbitraryParameters; }
+	 */
+	var getArbitraryParameters = function(parameterList) {
+		var arbitraryParameters = new Object();
+		var arbitraryArray = new Array();
+		for (var i = 0; i < parameterList.length; i++) {
+			var parameter = parameterList[i];
+			switch (parameter.id) {
+			case FIELD.ID.AVAILABLE_VOLUME_GROUP:
+				break;
+			case FIELD.ID.INSTANCE_NAME:
+				break;
+			case FIELD.ID.PRODUCT_FAMILY:
+				break;
+			case FIELD.ID.LCP_REGION:
+				break;
+			case FIELD.ID.LCP_REGION_TEXT:
+				break;
+			case FIELD.ID.SERVICE_TYPE:
+				break;
+			case FIELD.ID.TENANT:
+				break;
+			case FIELD.ID.SUPPRESS_ROLLBACK:
+				break;
+			case FIELD.ID.SUBSCRIBER_NAME:
+				break;
+			default:
+				arbitraryParameters = {
+					name : parameter.id,
+					value : parameter.value
+				}
+				arbitraryArray.push(arbitraryParameters);
+			}
+		}
+		return (arbitraryArray);
+	}
+
+	var getModel = function() {
+		AsdcService.getModel(DataService.getModelId(), function(response) {
+			DataService.setModelInfo(_this.componentId, {
+				modelInvariantId : response.data.invariantUUID,
+				modelNameVersionId : response.data.uuid,
+				modelName : response.data.name,
+				modelVersion : response.data.version,
+				inputs : response.data.inputs
+			});
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+
+	var getSubscriptionServiceTypeList = function() {
+		AaiService.getSubscriptionServiceTypeList(DataService
+				.getGlobalCustomerId(), function(response) {
+			DataService.setSubscriptionServiceTypeList(response);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+
+	var getLoggedInUserID = function() {
+		AaiService.getLoggedInUserID(function(response) {
+			DataService.setLoggedInUserId(response.data);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+	
+	var getSubscribers = function() {
+		AaiService.getSubscribers(function(response) {
+			DataService.setSubscribers(response);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+	var getServices = function() {
+		AaiService.getServices(function(response) {
+			var serviceIdList = [];
+			angular.forEach(response.data, function(value, key) {
+				angular.forEach(value, function(subVal, key) {
+					var newVal = { "id" : subVal[FIELD.ID.SERVICE_ID], "description" : subVal[FIELD.ID.SERVICE_DESCRIPTION] };
+					serviceIdList.push(newVal);
+					DataService.setServiceIdList(serviceIdList);
+				});
+			});
+		
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+	var getLcpCloudRegionTenantList = function() {
+		AaiService.getLcpCloudRegionTenantList(DataService
+				.getGlobalCustomerId(), DataService.getServiceType(), function(
+				response) {
+			DataService.setCloudRegionTenantList(response);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+
+	var internalGetParametersHandler = function() {
+		if (angular.isFunction(_this.getParametersHandler)) {
+			_this.getParametersHandler({
+				summaryList : getSummaryList(),
+				userProvidedList : getUserProvidedList()
+			});
+		}
+	};
+
+	var getSubscribersParameter = function() {
+		var subscribers = DataService.getSubscribers();
+		var parameter = FIELD.PARAMETER.SUBSCRIBER_NAME;
+		if ( UtilityService.hasContents(subscribers)) {
+			parameter.optionList = [];
+	
+			for (var i = 0; i < subscribers.length; i++) {
+				parameter.optionList.push({
+					id : subscribers[i][FIELD.ID.GLOBAL_CUSTOMER_ID],
+					name : subscribers[i][FIELD.ID.SUBNAME]
+				})
+			}
+		}
+		return parameter;
+	};
+
+	var getServiceId = function() {
+		var serviceIdList = DataService.getServiceIdList();
+		var serviceTypeList = DataService.getSubscriptionServiceTypeList();
+		var parameter = FIELD.PARAMETER.PRODUCT_FAMILY;
+		parameter.optionList = new Array();
+		
+		if (serviceTypeList == null) {
+			getSubscriptionServiceTypeList();
+			serviceTypeList = DataService.getSubscriptionServiceTypeList();
+		}
+		var went = 0;
+		if ( UtilityService.hasContents (serviceIdList) ) {
+			for (var i = 0; i < serviceIdList.length; i++) {
+				var go = 0;
+				var name = serviceIdList[i].id;
+	
+				if (UtilityService.hasContents(serviceTypeList) ) { 
+					console.log("STL: " + serviceTypeList);
+					for (var k = 0; k < serviceTypeList.length; k++) {
+						if (angular.equals(name,serviceTypeList[k])) {
+							go = 1;
+							went = 1;
+						}
+					}
+				} else { 
+					go = 1;
+					went = 1;
+				}
+				if (go == 1) {
+					parameter.optionList.push({
+						id : serviceIdList[i].id,
+						name : serviceIdList[i].description
+					});
+				}
+			}  // load them all, ours wasn't in the list
+			if (went == 0) { 
+				for (var i = 0; i < serviceIdList.length; i++) {
+						parameter.optionList.push({
+							id : serviceIdList[i].id,
+							name : serviceIdList[i].description
+						});
+				}
+			}
+		}
+		return parameter;
+	};
+
+	var getLcpRegion = function() {
+		var cloudRegionTenantList = DataService.getCloudRegionTenantList();
+		var parameter = FIELD.PARAMETER.LCP_REGION;
+		if ( UtilityService.hasContents (cloudRegionTenantList) ) {
+			parameter.optionList = new Array();
+			for (var i = 0; i < cloudRegionTenantList.length; i++) {
+				for (var j = 0; j < parameter.optionList.length; j++) {
+					if (parameter.optionList[j].id === cloudRegionTenantList[i].cloudRegionId) {
+						break;
+					}
+				}
+				if (j < parameter.optionList.length) {
+					continue;
+				}
+				parameter.optionList.push({
+					id : cloudRegionTenantList[i].cloudRegionId
+				});
+			}
+		}
+		return parameter;
+	};
+
+	var getTenantList = function(cloudRegionId) {
+		var cloudRegionTenantList = DataService.getCloudRegionTenantList();
+		var parameter = "";
+		if ( UtilityService.hasContents (cloudRegionTenantList) ) {
+			parameter = FIELD.PARAMETER.TENANT_ENABLED;
+			parameter.optionList = new Array();
+			for (var i = 0; i < cloudRegionTenantList.length; i++) {
+				if (cloudRegionTenantList[i].cloudRegionId === cloudRegionId) {
+					parameter.optionList.push({
+						id : cloudRegionTenantList[i].tenantId,
+						name : cloudRegionTenantList[i].tenantName
+					});
+				}
+			}
+		}
+		return parameter;
+
+	};
+
+	var addOptionList = function(parameter, optionSimpleArray) {
+		var optionList = new Array();
+		if (!angular.isArray(optionSimpleArray)) {
+			return optionList;
+		}
+		for (var i = 0; i < optionSimpleArray.length; i++) {
+			optionList.push({
+				name : optionSimpleArray[i]
+			});
+		}
+		parameter.optionList = optionList;
+		return parameter;
+	};
+
+	var getValueFromList = function(id, parameterList) {
+		for (var i = 0; i < parameterList.length; i++) {
+			if (parameterList[i].id === id) {
+				return parameterList[i].value;
+			}
+		}
+	};
+	var updateUserParameterList = function(updatedId, parameterListControl) {
+		console.log ("updateUserParameterList() updatedId=" + updatedId);
+		if (updatedId === FIELD.ID.LCP_REGION) {
+			var list = parameterListControl.getList(updatedId);
+			if (list[0].selectedIndex >= 0) {
+				parameterListControl
+						.updateList([ getTenantList(list[0].value) ]);
+			} else {
+				parameterListControl
+						.updateList([ FIELD.PARAMETER.TENANT_DISABLED ]);
+			}
+			if (list[0].value === FIELD.KEY.LCP_REGION_TEXT) {
+				parameterListControl
+						.updateList([ FIELD.PARAMETER.LCP_REGION_TEXT_VISIBLE ]);
+			} else {
+				parameterListControl
+						.updateList([ FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN ]);
+			}
+		} else if (updatedId === FIELD.ID.SUBSCRIBER_NAME) {
+			var list = parameterListControl.getList(updatedId);
+			if (list[0].selectedIndex >= 0) {
+				DataService.setGlobalCustomerId(list[0].value);
+
+				AaiService.getSubscriptionServiceTypeList(DataService
+						.getGlobalCustomerId(), function(response) {
+					DataService.setSubscriptionServiceTypeList(response);
+					var serviceTypeParameters = FIELD.PARAMETER.SERVICE_TYPE;
+					serviceTypeParameters.optionList = [];
+
+					for (var i = 0; i < response.length; i++) {
+						serviceTypeParameters.optionList.push({
+							"id" : response[i],
+							"name" : response[i]
+						});
+					}
+					console.log ( "updateUserParameterList: service type parameters " ); 
+					console.log ( JSON.stringify (serviceTypeParameters, null, 4));
+					parameterListControl.updateList([ serviceTypeParameters ]);
+				});
+
+			} 
+		} else if ( updatedId === FIELD.ID.SERVICE_TYPE ) {
+			var list = parameterListControl.getList(updatedId);
+			if (list[0].selectedIndex >= 0) {
+
+				DataService.setServiceType(list[0].value);
+				var cloudRegionTenantList = new Array();
+				AaiService.getLcpCloudRegionTenantList(DataService.getGlobalCustomerId(), DataService.getServiceType(), function(cloudRegionTenantList) {
+					DataService.setCloudRegionTenantList(cloudRegionTenantList);
+					parameterListControl.updateList([ getLcpRegion() ]);
+				}); 
+			} else {
+				parameterListControl
+				.updateList([ FIELD.PARAMETER.SERVICE_TYPE_DISABLED ]);
+			}
+		}
+
+	};
+
+	return {
+		initializeComponent : function(componentId) {
+			_this.componentId = ComponentService.initialize(componentId);
+		},
+		setHttpErrorHandler : function(httpErrorHandler) {
+			_this.httpErrorHandler = httpErrorHandler;
+		},
+		getComponentDisplayName : ComponentService.getComponentDisplayName,
+		getParameters : function(getParametersHandler) {
+			_this.getParametersHandler = getParametersHandler;
+			UtilityService.setHttpErrorHandler(_this.httpErrorHandler);
+			UtilityService.startAsyncOperations(getAsyncOperationList(),
+					internalGetParametersHandler);
+		},
+		updateUserParameterList : updateUserParameterList,
+		getMsoRequestDetails : getMsoRequestDetails,
+		getMsoUrl : getMsoUrl
+	}
+}
+
+appDS2.factory("CreationService", [ "$log", "AaiService", "AsdcService",
+		"DataService", "ComponentService", "COMPONENT", "FIELD", "PARAMETER",
+		"UtilityService", CreationService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/dataService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/dataService.js
new file mode 100755
index 0000000..7d913fa
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/dataService.js
@@ -0,0 +1,243 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var DataService = function($log, DataService) {
+
+	var _this = this;
+
+	return {
+		getAvailableVolumeGroupList : function() {
+			return _this.availableVolumeGroupList;
+		},
+		setAvailableVolumeGroupList : function(availableVolumeGroupList) {
+			_this.availableVolumeGroupList = availableVolumeGroupList;
+		},
+		getCloudRegionTenantList : function() {
+			return _this.cloudRegionTenantList;
+		},
+		setCloudRegionTenantList : function(cloudRegionTenantList) {
+			_this.cloudRegionTenantList = cloudRegionTenantList;
+		},
+		getGlobalCustomerId : function() {
+			return _this.globalCustomerId;
+		},
+		setGlobalCustomerId : function(globalCustomerId) {
+			_this.globalCustomerId = globalCustomerId;
+		},
+		getCustomizationUuid : function() {
+			return _this.customizationUUID;
+		},
+		setCustomizationUuid : function(customizationUUID) {
+			_this.customizationUUID = customizationUUID;
+		},
+		getResCustomizationUuid : function() {
+			return _this.rescustomizationUUID;
+		},
+		setResCustomizationUuid : function(rescustomizationUUID) {
+			_this.rescustomizationUUID = rescustomizationUUID;
+		},
+		getInventoryItem : function() {
+			return _this.inventoryItem;
+		},
+		setInventoryItem : function(inventoryItem) {
+			_this.inventoryItem = inventoryItem;
+		},
+		getModelId : function() {
+			return _this.modelId;
+		},
+		setModelId : function(modelId) {
+			_this.modelId = modelId;
+		},
+		getModelInstanceName : function() {
+			return _this.modelInstanceName;
+		},
+		setModelInstanceName : function(modelInstanceName) {
+			_this.modelInstanceName = modelInstanceName;
+		},
+		getModelInfo : function(componentId) {
+			return _this.modelInfo[componentId];
+		},
+		setModelInfo : function(componentId, modelInfo) {
+			if (_this.modelInfo === undefined) {
+				_this.modelInfo = new Object;
+			}
+			_this.modelInfo[componentId] = modelInfo;
+		},
+		getNetworkInstanceId : function() {
+			return _this.networkInstanceId;
+		},
+		setNetworkInstanceId : function(networkInstanceId) {
+			_this.networkInstanceId = networkInstanceId;
+		},
+		getServiceIdList : function() {
+			return _this.serviceIdList;
+		},
+		setServiceIdList : function(serviceIdList) {
+			_this.serviceIdList = serviceIdList;
+		},
+		getServiceInstanceId : function() {
+			return _this.serviceInstanceId;
+		},
+		setServiceInstanceId : function(serviceInstanceId) {
+			_this.serviceInstanceId = serviceInstanceId;
+		},
+		getServiceInstanceName : function() {
+			return _this.serviceInstanceName;
+		},
+		setServiceInstanceName : function(serviceInstanceName) {
+			_this.serviceInstanceName = serviceInstanceName;
+		},
+		getServiceName : function() {
+			return _this.serviceName;
+		},
+		setServiceName : function(serviceName) {
+			_this.serviceName = serviceName;
+		},
+		getServiceType : function() {
+			return _this.serviceType;
+		},
+		setServiceType : function(serviceType) {
+			_this.serviceType = serviceType;
+		},
+		getServiceUuid : function() {
+			return _this.serviceUuid;
+		},
+		setServiceUuid : function(serviceUuid) {
+			_this.serviceUuid = serviceUuid;
+		},
+		getSubscriberId : function() {
+			return _this.subscriberId;
+		},
+		setSubscriberId : function(subscriberId) {
+			_this.subscriberId = subscriberId;
+		},
+		getLoggedInUserId : function() {
+			return _this.loggedInUserId;
+		},
+		setLoggedInUserId : function(loggedInUserId) {
+			_this.loggedInUserId = loggedInUserId;
+		},
+		getSubscriberName : function() {
+			return _this.subscriberName;
+		},
+		setSubscriberName : function(subscriberName) {
+			_this.subscriberName = subscriberName;
+		},
+		getSubscribers : function() {
+			return _this.subscribers;
+		},
+		setSubscribers : function(subscribers) {
+			_this.subscribers = subscribers;
+		},
+		getSubscriptionServiceTypeList : function() {
+			return _this.subscriptionServiceTypeList;
+		},
+		setSubscriptionServiceTypeList : function(subscriptionServiceTypeList) {
+			_this.subscriptionServiceTypeList = subscriptionServiceTypeList;
+		},
+		getUserParams : function() {
+			return _this.userParams;
+		},
+		setUserParams : function(userParams) {
+			_this.userParams = userParams;
+		},
+		getUserServiceInstanceName : function() {
+			return _this.userServiceInstanceName;
+		},
+		setUserServiceInstanceName : function(userServiceInstanceName) {
+			_this.userServiceInstanceName = userServiceInstanceName;
+		},
+		getVfModuleInstanceId : function() {
+			return _this.vfModuleInstanceId;
+		},
+		setVfModuleInstanceId : function(vfModuleInstanceId) {
+			_this.vfModuleInstanceId = vfModuleInstanceId;
+		},
+		getVnfInstanceId : function() {
+			return _this.vnfInstanceId;
+		},
+		setVnfInstanceId : function(vnfInstanceId) {
+			_this.vnfInstanceId = vnfInstanceId;
+		},
+		getVolumeGroupInstanceId : function() {
+			return _this.volumeGroupInstanceId;
+		},
+		setVolumeGroupInstanceId : function(volumeGroupInstanceId) {
+			_this.volumeGroupInstanceId = volumeGroupInstanceId;
+		},
+		getLcpRegion : function() {
+			return _this.lcpRegion;
+		},
+		setLcpRegion : function(lcpRegion) {
+			_this.lcpRegion = lcpRegion;
+		},
+		getTenant : function() {
+			return _this.tenant;
+		},
+		setTenant : function(tenant) {
+			_this.tenant = tenant;
+		},
+		getTreeHandle : function() {
+			return _this.treeHandle;
+		},
+		setTreeHandle : function(treeHandle) {
+			_this.treeHandle = treeHandle;
+		},
+		setServiceInstanceToCustomer : function(serviceInstanceToCustomer) {
+			_this.serviceInstanceToCustomer = [];
+			_this.serviceInstanceToCustomer = serviceInstanceToCustomer;
+		},
+		getServiceInstanceToCustomer : function() {
+			return _this.serviceInstanceToCustomer;
+		},
+		setALaCarte : function(aval) {
+			_this.aLaCarte = aval;
+		},
+		getALaCarte : function() {
+			// if not set return true
+			if (_this.aLaCarte === undefined) {
+				return true;
+			}
+			return _this.aLaCarte;
+		},
+		getResources : function() {
+			return _this.resources;
+		},
+		setResources : function(r) {
+			_this.resources = r;
+		},
+		getSystemPropProvStatus : function() {
+			return _this.syspropProvStatusList;
+		},
+		setSystemPropProvStatus : function(r) {
+			_this.syspropProvStatusList = r;
+		},
+		getUpdatedVNFProvStatus : function() {
+			return _this.updatedvnfProvStatus;
+		},
+		setUpdatedVNFProvStatus : function(r) {
+			_this.updatedvnfProvStatus = r;
+		}
+	}
+}
+
+appDS2.factory("DataService", [ "$log", DataService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/deletionService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/deletionService.js
new file mode 100755
index 0000000..62c2b19
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/deletionService.js
@@ -0,0 +1,502 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var DeletionService = function($log, AaiService, AsdcService, DataService,
+	ComponentService, COMPONENT, FIELD, UtilityService) {
+
+    var _this = this;
+
+    var getAsyncOperationList = function() {
+    	if (DataService.getLoggedInUserId() == null)
+			getLoggedInUserID();
+		switch (_this.componentId) {
+		case COMPONENT.SERVICE:
+			return [ getSubscribers, getLcpCloudRegionTenantList ];
+		case COMPONENT.NETWORK:
+			return [ getLcpCloudRegionTenantList ];
+		case COMPONENT.VNF:
+			return [ getLcpCloudRegionTenantList ];
+		case COMPONENT.VF_MODULE:
+			return [ getLcpCloudRegionTenantList ];
+		case COMPONENT.VOLUME_GROUP:
+			return [ getLcpCloudRegionTenantList ];
+		}
+	};
+	
+	var getLcpCloudRegionTenantList = function() {
+		//console.log ( "global customer id: " ); 
+		//console.log ( JSON.stringify (DataService.getGlobalCustomerId()) );
+		
+		//console.log ( "service type: " ); 
+		//console.log ( JSON.stringify (DataService.getServiceType()) );
+		
+		AaiService.getLcpCloudRegionTenantList(DataService
+				.getGlobalCustomerId(), DataService.getServiceType(), function(
+				response) {
+			DataService.setCloudRegionTenantList(response);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+	
+	var getLoggedInUserID = function() {
+		AaiService.getLoggedInUserID(function(response) {
+			DataService.setLoggedInUserId(response.data);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+	
+	var getSubscribers = function() {
+		AaiService.getSubscribers(function(response) {
+			DataService.setSubscribers(response);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+	
+	var internalGetParametersHandler = function() {
+		if (angular.isFunction(_this.getParametersHandler)) {
+				if (_this.componentId == COMPONENT.SERVICE) {
+					if ( DataService.getALaCarte() ) {
+						_this.getParametersHandler({
+							summaryList : getSummaryList(),
+							userProvidedList : getUserProvidedList()
+						}, true);
+					}
+					else {
+						_this.getParametersHandler({
+							summaryList : getSummaryList(),
+							userProvidedList : getUserProvidedList()
+						}, false);
+					}
+			}
+			else {
+				_this.getParametersHandler({
+					summaryList : getSummaryList(),
+					userProvidedList : getUserProvidedList()
+				}, false);
+			}
+		}
+	};
+	
+	var getSubscribersParameter = function() {
+		var subscribers = DataService.getSubscribers();
+		var parameter = FIELD.PARAMETER.SUBSCRIBER_NAME;
+		parameter.optionList = [];
+
+		for (var i = 0; i < subscribers.length; i++) {
+			parameter.optionList.push({
+				id : subscribers[i][FIELD.ID.GLOBAL_CUSTOMER_ID],
+				name : subscribers[i][FIELD.ID.SUBNAME]
+			})
+		}
+		return parameter;
+	};
+	
+	var getServiceId = function() {
+		var serviceIdList = DataService.getServiceIdList();
+		var parameter = FIELD.PARAMETER.PRODUCT_FAMILY;
+		parameter.optionList = new Array();
+		for (var i = 0; i < serviceIdList.length; i++) {
+			parameter.optionList.push({
+				id : serviceIdList[i].id,
+				name : serviceIdList[i].description
+			});
+		}
+		return parameter;
+	};
+	
+	var getUserProvidedList = function() {
+
+		//var parameterList = [ FIELD.PARAMETER.INSTANCE_NAME ];
+
+		var parameterList = [];
+		
+		switch (_this.componentId) {
+		case COMPONENT.SERVICE:
+			if ( DataService.getALaCarte() ) {
+				parameterList = [];
+			}
+			else {
+				parameterList = parameterList.concat ([getLcpRegion(),
+				    FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,
+				    FIELD.PARAMETER.TENANT_DISABLED ]);
+			}
+			break;
+		case COMPONENT.NETWORK:
+		case COMPONENT.VNF:
+			parameterList = parameterList.concat([ //getServiceId(),
+					getLcpRegion(), FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,
+					FIELD.PARAMETER.TENANT_DISABLED ]);
+			break;
+		case COMPONENT.VF_MODULE:
+			parameterList = parameterList.concat([
+			        getLcpRegion(),
+					FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,
+					FIELD.PARAMETER.TENANT_DISABLED
+			]);
+			
+			break;
+		case COMPONENT.VOLUME_GROUP:
+			parameterList = parameterList.concat([ getLcpRegion(),
+					FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN,
+					FIELD.PARAMETER.TENANT_DISABLED ]);
+		}
+
+		//parameterList.push(FIELD.PARAMETER.SUPPRESS_ROLLBACK);
+
+		//addArbitraryParameters(parameterList);
+
+		return parameterList;
+	};
+    var getSummaryList = function() {
+	switch (_this.componentId) {
+	case COMPONENT.NETWORK:
+	case COMPONENT.SERVICE:
+	case COMPONENT.VNF:
+	case COMPONENT.VF_MODULE:
+	case COMPONENT.VOLUME_GROUP:
+	    var summaryList = [ {
+		name : FIELD.NAME.SUBSCRIBER_NAME,
+		value : DataService.getSubscriberName()
+	    }, {
+		name : FIELD.NAME.CUSTOMER_ID,
+		value : DataService.getGlobalCustomerId()
+	    }, {
+		name : FIELD.NAME.SERVICE_UUID,
+		value : DataService.getServiceUuid()
+	    }, {
+		name : FIELD.NAME.SERVICE_NAME,
+		value : DataService.getServiceName()
+	   /* }, {
+		name : FIELD.NAME.USER_SERVICE_INSTANCE_NAME,
+		value : DataService.getUserServiceInstanceName()*/
+	    } ];
+
+		_this.parameterList = new Array();
+		
+		addToList(FIELD.NAME.SERVICE_NAME, DataService.getServiceName());
+
+		switch (_this.componentId) {
+		case COMPONENT.SERVICE:
+			addToList(FIELD.NAME.SERVICE_INVARIANT_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.SERVICE_VERSION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_VERSION]);
+			addToList(FIELD.NAME.SERVICE_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME_VERSION_ID]);
+			addToList(FIELD.NAME.SERVICE_DESCRIPTION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.DESCRIPTION]);
+			addToList(FIELD.NAME.SERVICE_CATEGORY, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.CATEGORY]);
+			break;
+		case COMPONENT.VF_MODULE:
+			addToList(FIELD.NAME.SUBSCRIBER_NAME, DataService
+					.getSubscriberName());
+			addToList(FIELD.NAME.SERVICE_INSTANCE_NAME, DataService
+					.getServiceInstanceName());
+			addToList(FIELD.NAME.MODEL_NAME, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME]);
+			addToList(FIELD.NAME.MODEL_INVARIANT_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_VERSION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_VERSION]);
+			addToList(FIELD.NAME.MODEL_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME_VERSION_ID]);
+			break;
+		case COMPONENT.NETWORK:
+		case COMPONENT.VNF:
+		case COMPONENT.VOLUME_GROUP:
+			addToList(FIELD.NAME.SUBSCRIBER_NAME, DataService
+					.getSubscriberName());
+			addToList(FIELD.NAME.SERVICE_INSTANCE_NAME, DataService
+					.getServiceInstanceName());
+			addToList(FIELD.NAME.MODEL_NAME, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME]);
+			addToList(FIELD.NAME.MODEL_INVARIANT_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_INVARIANT_ID]);
+			addToList(FIELD.NAME.MODEL_VERSION, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_VERSION]);
+			addToList(FIELD.NAME.MODEL_UUID, DataService
+					.getModelInfo(_this.componentId)[FIELD.ID.MODEL_NAME_VERSION_ID]);
+			break;
+		}
+		
+	    /*var additionalList = ComponentService.getInventoryParameterList(
+		    _this.componentId, DataService.getInventoryItem());*/
+		var additionalList = ComponentService.getDisplayNames(ComponentService
+			    .getInventoryParameterList(_this.componentId, DataService
+				    .getInventoryItem(), true ));
+
+	    return summaryList.concat(ComponentService
+		    .getDisplayNames(additionalList));
+	}
+    };
+
+    var getMsoUrl = function() {
+	switch (_this.componentId) {
+	case COMPONENT.NETWORK:
+	    return "mso_delete_nw_instance/"
+		    + DataService.getServiceInstanceId() + "/networks/"
+		    + DataService.getNetworkInstanceId();
+	case COMPONENT.SERVICE:
+	    return "mso_delete_svc_instance/"
+		    + DataService.getServiceInstanceId();
+	case COMPONENT.VNF:
+	    return "mso_delete_vnf_instance/"
+		    + DataService.getServiceInstanceId() + "/vnfs/"
+		    + DataService.getVnfInstanceId();
+	case COMPONENT.VF_MODULE:
+	    return "mso_delete_vfmodule_instance/"
+		    + DataService.getServiceInstanceId() + "/vnfs/"
+		    + DataService.getVnfInstanceId() + "/vfModules/"
+		    + DataService.getVfModuleInstanceId();
+	case COMPONENT.VOLUME_GROUP:
+	    return "mso_delete_volumegroup_instance/"
+		    + DataService.getServiceInstanceId() + "/vnfs/"
+		    + DataService.getVnfInstanceId() + "/volumeGroups/"
+		    + DataService.getVolumeGroupInstanceId();
+	}
+    }
+
+	var addToList = function(name, value) {
+		_this.parameterList.push({
+			name : name,
+			value : value
+		});
+	};
+	
+    var getMsoRequestDetails = function(parameterList) {
+    	console.log("getMsoRequestDetails invoked");
+		var inventoryInfo = ComponentService.getInventoryInfo(
+			_this.componentId, DataService.getInventoryItem());
+		var modelInfo = DataService.getModelInfo(_this.componentId);
+		var requestorloggedInId = DataService.getLoggedInUserId();
+		if (requestorloggedInId ==  null)
+			requestorloggedInId = "";
+		var requestDetails = {
+				modelInfo : {
+					modelType : _this.componentId,
+					modelInvariantId : modelInfo.modelInvariantId,
+					modelVersionId : modelInfo.modelNameVersionId,
+					modelName : modelInfo.modelName,
+					modelCustomizationName : modelInfo.modelCustomizationName,
+					modelCustomizationId : modelInfo.customizationUuid,
+					modelVersion : modelInfo.modelVersion
+				},
+				requestInfo : {
+					source : FIELD.ID.VID,
+					requestorId: requestorloggedInId
+				}
+		};
+		
+		switch (_this.componentId) {
+			case COMPONENT.SERVICE:
+				requestDetails.requestParameters = {
+					aLaCarte : DataService.getALaCarte()
+				};
+				if ( !(DataService.getALaCarte()) ) {
+					// for macro delete include cloud config.
+					var lcpRegion = getValueFromList(FIELD.ID.LCP_REGION, parameterList);
+					if (lcpRegion === FIELD.KEY.LCP_REGION_TEXT) {
+						lcpRegion = getValueFromList(FIELD.ID.LCP_REGION_TEXT,
+								parameterList);
+					}
+					requestDetails.cloudConfiguration = {
+						lcpCloudRegionId : lcpRegion,
+						tenantId : getValueFromList(FIELD.ID.TENANT, parameterList)
+					};
+				}
+			    break;
+			case COMPONENT.VNF:
+			    console.log("getMsoRequestDetails COMPONENT.VNF");
+				var lcpRegion = getValueFromList(FIELD.ID.LCP_REGION, parameterList);
+				if (lcpRegion === FIELD.KEY.LCP_REGION_TEXT) {
+					lcpRegion = getValueFromList(FIELD.ID.LCP_REGION_TEXT,
+							parameterList);
+				}
+				requestDetails.cloudConfiguration = {
+					lcpCloudRegionId : lcpRegion,
+					tenantId : getValueFromList(FIELD.ID.TENANT, parameterList)
+				};
+	
+				break;
+			case COMPONENT.VF_MODULE:
+			case COMPONENT.NETWORK:
+					var lcpRegion = getValueFromList(FIELD.ID.LCP_REGION, parameterList);
+					if (lcpRegion === FIELD.KEY.LCP_REGION_TEXT) {
+						lcpRegion = getValueFromList(FIELD.ID.LCP_REGION_TEXT,
+								parameterList);
+					}
+					requestDetails.cloudConfiguration = {
+							lcpCloudRegionId : lcpRegion,
+							tenantId : getValueFromList(FIELD.ID.TENANT, parameterList)
+					};	
+					break;
+			case COMPONENT.VOLUME_GROUP:
+				var lcpRegion = getValueFromList(FIELD.ID.LCP_REGION, parameterList);
+				if (lcpRegion === FIELD.KEY.LCP_REGION_TEXT) {
+					lcpRegion = getValueFromList(FIELD.ID.LCP_REGION_TEXT,
+							parameterList);
+				}
+				requestDetails.cloudConfiguration = {
+						lcpCloudRegionId : lcpRegion,
+						tenantId : getValueFromList(FIELD.ID.TENANT, parameterList)
+				};	
+				
+				break;
+			default:
+				requestDetails.cloudConfiguration = {
+					lcpCloudRegionId : DataService.getLcpRegion(),
+					tenantId : DataService.getTenant()
+				};
+		}
+		return requestDetails;
+    }
+    
+    var getLcpRegion = function() {
+		var cloudRegionTenantList = DataService.getCloudRegionTenantList();
+		var parameter = "";
+		if ( UtilityService.hasContents (cloudRegionTenantList) ) {
+			parameter = FIELD.PARAMETER.LCP_REGION;
+			parameter.optionList = new Array();
+			for (var i = 0; i < cloudRegionTenantList.length; i++) {
+				for (var j = 0; j < parameter.optionList.length; j++) {
+					if (parameter.optionList[j].id === cloudRegionTenantList[i].cloudRegionId) {
+						break;
+					}
+				}
+				if (j < parameter.optionList.length) {
+					continue;
+				}
+				parameter.optionList.push({
+					id : cloudRegionTenantList[i].cloudRegionId
+				});
+			}
+		}
+		return parameter;
+	};
+	
+	var getTenantList = function(cloudRegionId) {
+		var parameter = "";
+		var cloudRegionTenantList = DataService.getCloudRegionTenantList();
+		if ( UtilityService.hasContents (cloudRegionTenantList) ) {
+			var parameter = FIELD.PARAMETER.TENANT_ENABLED;
+			parameter.optionList = new Array();
+			for (var i = 0; i < cloudRegionTenantList.length; i++) {
+				if (cloudRegionTenantList[i].cloudRegionId === cloudRegionId) {
+					parameter.optionList.push({
+						id : cloudRegionTenantList[i].tenantId,
+						name : cloudRegionTenantList[i].tenantName
+					});
+				}
+			}
+		}
+		return parameter;
+
+	};
+
+	var addOptionList = function(parameter, optionSimpleArray) {
+		var optionList = new Array();
+		if (!angular.isArray(optionSimpleArray)) {
+			return optionList;
+		}
+		for (var i = 0; i < optionSimpleArray.length; i++) {
+			optionList.push({
+				name : optionSimpleArray[i]
+			});
+		}
+		parameter.optionList = optionList;
+		return parameter;
+	};
+
+    var getValueFromList = function(id, parameterList) {
+		for (var i = 0; i < parameterList.length; i++) {
+			if (parameterList[i].id === id) {
+				return parameterList[i].value;
+			}
+		}
+	};
+
+	var updateUserParameterList = function(updatedId, parameterListControl) {
+		if (updatedId === FIELD.ID.LCP_REGION) {
+			var list = parameterListControl.getList(updatedId);
+			if (list[0].selectedIndex >= 0) {
+				parameterListControl
+						.updateList([ getTenantList(list[0].value) ]);
+			} else {
+				parameterListControl
+						.updateList([ FIELD.PARAMETER.TENANT_DISABLED ]);
+			}
+			if (list[0].value === FIELD.KEY.LCP_REGION_TEXT) {
+				parameterListControl
+						.updateList([ FIELD.PARAMETER.LCP_REGION_TEXT_VISIBLE ]);
+			} else {
+				parameterListControl
+						.updateList([ FIELD.PARAMETER.LCP_REGION_TEXT_HIDDEN ]);
+			}
+		} else if (updatedId === FIELD.ID.SUBSCRIBER_NAME) {
+			var list = parameterListControl.getList(updatedId);
+			if (list[0].selectedIndex >= 0) {
+				DataService.setGlobalCustomerId(list[0].value);
+
+				AaiService.getSubscriptionServiceTypeList(DataService
+						.getGlobalCustomerId(), function(response) {
+					DataService.setSubscriptionServiceTypeList(response);
+					var serviceTypeParameters = FIELD.PARAMETER.SERVICE_TYPE;
+					serviceTypeParameters.optionList = [];
+
+					for (var i = 0; i < response.length; i++) {
+						serviceTypeParameters.optionList.push({
+							"id" : response[i],
+							"name" : response[i]
+						});
+					}
+					parameterListControl.updateList([ serviceTypeParameters ]);
+				});
+
+			} else {
+				parameterListControl
+						.updateList([ FIELD.PARAMETER.SERVICE_TYPE_DISABLED ]);
+			}
+		}
+	};
+
+    return {
+	initializeComponent : function(componentId) {
+	    _this.componentId = ComponentService.initialize(componentId);
+	},
+	getComponentDisplayName : ComponentService.getComponentDisplayName,
+	getSummaryList : getSummaryList,
+	getParameters : function(getParametersHandler) {
+		_this.getParametersHandler = getParametersHandler;
+		UtilityService.setHttpErrorHandler(_this.httpErrorHandler);
+		UtilityService.startAsyncOperations(getAsyncOperationList(),
+				internalGetParametersHandler);
+	},
+	updateUserParameterList : updateUserParameterList,
+	getMsoRequestDetails : getMsoRequestDetails,
+	getMsoUrl : getMsoUrl
+    }
+}
+
+appDS2.factory("DeletionService", [ "$log", "AaiService", "AsdcService",
+	"DataService", "ComponentService", "COMPONENT", "FIELD",
+	"UtilityService", DeletionService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/detailsService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/detailsService.js
new file mode 100755
index 0000000..37220ff
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/detailsService.js
@@ -0,0 +1,98 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var DetailsService = function($log, DataService, ComponentService, COMPONENT,
+	FIELD, UtilityService) {
+
+    var _this = this;
+
+    var getSummaryList = function() {
+	switch (_this.componentId) {
+	case COMPONENT.NETWORK:
+	case COMPONENT.SERVICE:
+	case COMPONENT.VNF:
+	case COMPONENT.VF_MODULE:
+	case COMPONENT.VOLUME_GROUP:
+	    return [ {
+		name : FIELD.NAME.SUBSCRIBER_NAME,
+		value : DataService.getSubscriberName()
+	    }, {
+		name : FIELD.NAME.SERVICE_INSTANCE_ID,
+		value : DataService.getServiceInstanceId()
+	    }, {
+		name : FIELD.NAME.SERVICE_TYPE,
+		value : DataService.getServiceType()
+	    } ];
+	}
+    };
+
+    var getDetailsList = function() {
+    	switch (_this.componentId) {
+    	case COMPONENT.NETWORK:
+    	case COMPONENT.SERVICE:
+    	case COMPONENT.VNF:
+    	case COMPONENT.VF_MODULE:
+    	case COMPONENT.VOLUME_GROUP:
+    	    return ComponentService.getDisplayNames(ComponentService
+    		    .getInventoryParameterList(_this.componentId, DataService
+    			    .getInventoryItem(), false));
+    	}
+    };
+
+    var getMsoFilterString = function() {
+
+	var instanceId = "";
+
+	switch (_this.componentId) {
+	case COMPONENT.NETWORK:
+	    instanceId = DataService.getNetworkInstanceId();
+	    break;
+	case COMPONENT.SERVICE:
+	    instanceId = DataService.getServiceInstanceId();
+	    break;
+	case COMPONENT.VNF:
+	    instanceId = DataService.getVnfInstanceId();
+	    break;
+	case COMPONENT.VF_MODULE:
+	    instanceId = DataService.getVfModuleInstanceId();
+	    break;
+	case COMPONENT.VOLUME_GROUP:
+	    instanceId = DataService.getVolumeGroupInstanceId();
+	}
+
+	return "filter=" + _this.componentId + "InstanceId:EQUALS:"
+		+ instanceId;
+    };
+
+    return {
+	initializeComponent : function(componentId) {
+	    _this.componentId = ComponentService.initialize(componentId);
+	},
+	getComponentDisplayName : ComponentService.getComponentDisplayName,
+	getSummaryList : getSummaryList,
+	getDetailsList : getDetailsList,
+	getMsoFilterString : getMsoFilterString
+    }
+}
+
+appDS2.factory("DetailsService", [ "$log", "DataService", "ComponentService",
+	"COMPONENT", "FIELD", "UtilityService", DetailsService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/msoService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/msoService.js
new file mode 100755
index 0000000..864abe6
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/msoService.js
@@ -0,0 +1,175 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var MsoService = function($http, $log, PropertyService, UtilityService, COMPONENT, FIELD) {
+
+	var _this = this;
+
+	/*
+	 * Common function to handle both create and delete instance requests
+	 */
+	var requestInstanceUpdate = function(request, successCallbackFunction) {
+		$log.debug("MsoService:requestInstanceUpdate: request:");
+		$log.debug(request);
+		$http.post( "mso/" + request.url, {
+			requestDetails : request.requestDetails
+		}, {
+			timeout : PropertyService.getServerResponseTimeoutMsec()
+		}).then(successCallbackFunction)["catch"]
+				(UtilityService.runHttpErrorHandler);
+	}
+
+	var checkValidStatus = function(response) {
+		if (response.data.status < 200 || response.data.status > 202) {
+			throw {
+				type : FIELD.ID.MSO_FAILURE
+			}
+		}
+	}
+
+	var addListEntry = function(name, value) {
+		var entry = '"' + name + '": ';
+		if (value === undefined) {
+			return entry + "undefined";
+		} else {
+			return entry + '"' + value + '"';
+		}
+	}
+
+	return {
+		createInstance : requestInstanceUpdate,
+		deleteInstance : requestInstanceUpdate,
+		getOrchestrationRequest : function(requestId, successCallbackFunction) {
+			$log.debug("MsoService:getOrchestrationRequest: requestId: "
+					+ requestId);
+			$http.get(
+					"mso/mso_get_orch_req/"
+							+ requestId + "?r=" + Math.random(),
+					{
+						timeout : PropertyService
+								.getServerResponseTimeoutMsec()
+					}).then(successCallbackFunction)["catch"]
+					(UtilityService.runHttpErrorHandler);
+		},
+		getOrchestrationRequests : function(filterString,
+				successCallbackFunction) {
+			$log.debug("MsoService:getOrchestrationRequests: filterString: "
+					+ filterString);
+			$http.get(
+					"mso/mso_get_orch_reqs/"
+							+ encodeURIComponent(filterString) + "?r="
+							+ Math.random(),
+					{
+						timeout : PropertyService
+								.getServerResponseTimeoutMsec()
+					}).then(successCallbackFunction)["catch"]
+					(UtilityService.runHttpErrorHandler);
+		},
+		getFormattedCommonResponse : function(response) {
+				return UtilityService.getCurrentTime() + " HTTP Status: "
+						+ UtilityService.getHttpStatusText(response.data.status)
+						+ "\n" + angular.toJson(response.data.entity, true)
+			
+		},
+		checkValidStatus : checkValidStatus,
+		getFormattedGetOrchestrationRequestsResponse : function(response) {
+			UtilityService.checkUndefined(COMPONENT.ENTITY, response.data.entity);
+			UtilityService.checkUndefined(COMPONENT.STATUS, response.data.status);
+			checkValidStatus(response);
+
+			var list = response.data.entity.requestList
+			UtilityService.checkUndefined(FIELD.ID.REQUEST_LIST, list);
+
+			var message = "";
+
+			for (var i = 0; i < list.length; i++) {
+				var request = list[i].request;
+				message += addListEntry(FIELD.ID.REQUEST_ID, request.requestId) + ",\n";
+				message += addListEntry(FIELD.ID.REQUEST_TYPE, request.requestType)
+						+ ",\n";
+				var status = request.requestStatus;
+				if (status === undefined) {
+					message += addListEntry(FIELD.ID.REQUEST_STATUS, undefined) + "\n";
+				} else {
+					message += addListEntry(FIELD.ID.TIMESTAMP, status.timestamp)
+							+ ",\n";
+					message += addListEntry(FIELD.ID.REQUEST_STATE, status.requestState)
+							+ ",\n";
+					message += addListEntry(FIELD.ID.REQUEST_STATUS,
+							status.statusMessage)
+							+ ",\n";
+					message += addListEntry(FIELD.ID.PERCENT_PROGRESS,
+							status.percentProgress)
+							+ "\n";
+				}
+				if (i < (list.length - 1)) {
+					message += "\n";
+				}
+			}
+			return message;
+		},
+		getFormattedSingleGetOrchestrationRequestResponse : function (response) {
+			UtilityService.checkUndefined(COMPONENT.ENTITY, response.data.entity);
+			UtilityService.checkUndefined(COMPONENT.STATUS, response.data.status);
+			checkValidStatus(response);
+
+			var message = "";
+			if ( UtilityService.hasContents (response.data.entity.request) ) {
+				var request = response.data.entity.request;
+				message += addListEntry(FIELD.ID.REQUEST_ID, request.requestId) + ",\n";
+				message += addListEntry(FIELD.ID.REQUEST_TYPE, request.requestType)
+						+ ",\n";
+				var status = request.requestStatus;
+				if (status === undefined) {
+					message += addListEntry(FIELD.ID.REQUEST_STATUS, undefined) + "\n";
+				} else {
+					message += addListEntry(FIELD.ID.TIMESTAMP, status.timestamp)
+							+ ",\n";
+					message += addListEntry(FIELD.ID.REQUEST_STATE, status.requestState)
+							+ ",\n";
+					message += addListEntry(FIELD.ID.REQUEST_STATUS,
+							status.statusMessage)
+							+ ",\n";
+					message += addListEntry(FIELD.ID.PERCENT_PROGRESS,
+							status.percentProgress)
+							+ "\n\n";
+				}
+			}
+			return message;
+		},
+		showResponseContentError : function(error, showFunction) {
+			switch (error.type) {
+			case "undefinedObject":
+				showFunction(FIELD.ERROR.SYSTEM_FAILURE, error.message);
+				break;
+			case "msoFailure":
+				showFunction(FIELD.ERROR.MSO, "")
+				break;
+			default:
+				showFunction(FIELD.ERROR.SYSTEM_FAILURE);
+			}
+		}
+	}
+}
+
+appDS2.factory("MsoService", [ "$http", "$log", "PropertyService",
+		"UtilityService", "COMPONENT", "FIELD", MsoService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/propertyService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/propertyService.js
new file mode 100755
index 0000000..ad9bf7d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/propertyService.js
@@ -0,0 +1,89 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var PropertyService = function($location, $http, VIDCONFIGURATION ) {
+
+    var RE = /.*?:\/\/.*?:.*?\/(.*?)\//g;
+    var BASE_PATH = "vid";
+    var DEFAULT_AAI_BASE_URL = "/" + BASE_PATH;
+    var DEFAULT_ASDC_BASE_URL = "asdc";
+    var DEFAULT_MSO_MAX_POLLING_INTERVAL_MSEC = 60000;
+    var DEFAULT_MSO_MAX_POLLS = 10;
+    var DEFAULT_MSO_BASE_URL = "/" + BASE_PATH + "/mso";
+    var DEFAULT_SERVER_RESPONSE_TIMEOUT_MSEC = 60000;
+    var MSO_POLLING_INTERVAL_MSECS = "mso_polling_interval_msecs";
+    var MSO_MAX_POLLS = "mso_max_polls";
+
+    var _this = this;
+
+    _this.asdcBaseUrl = DEFAULT_ASDC_BASE_URL;
+    _this.aaiBaseUrl = DEFAULT_AAI_BASE_URL;
+    _this.msoMaxPollingIntervalMsec = DEFAULT_MSO_MAX_POLLING_INTERVAL_MSEC;
+    _this.msoMaxPolls = DEFAULT_MSO_MAX_POLLS;
+    _this.msoBaseUrl = DEFAULT_MSO_BASE_URL;
+    _this.serverResponseTimeoutMsec = DEFAULT_SERVER_RESPONSE_TIMEOUT_MSEC;
+
+    return {
+	
+	setAaiBaseUrl : function(aaiBaseUrl) {
+	    _this.aaiBaseUrl = aaiBaseUrl;
+	},
+	
+	setAsdcBaseUrl : function(asdcBaseUrl) {
+	    _this.asdcBaseUrl = asdcBaseUrl;
+	},
+	retrieveMsoMaxPollingIntervalMsec : function() {
+		_this.msoMaxPollingIntervalMsec = VIDCONFIGURATION.MSO_POLLING_INTERVAL_MSECS;
+	    return _this.msoMaxPollingIntervalMsec;
+	},
+	getMsoMaxPollingIntervalMsec : function() {
+	    return _this.msoMaxPollingIntervalMsec;
+	},
+	setMsoMaxPollingIntervalMsec : function(msoMaxPollingIntervalMsec) {
+	    _this.msoMaxPollingIntervalMsec = msoMaxPollingIntervalMsec;
+	},
+	retrieveMsoMaxPolls : function() {
+		_this.msoMaxPolls = VIDCONFIGURATION.MSO_MAX_POLLS;
+	    return _this.msoMaxPolls;
+	},
+	getMsoMaxPolls : function() {
+	    return _this.msoMaxPolls;
+	},
+	setMsoMaxPolls : function(msoMaxPolls) {
+	    _this.msoMaxPolls = msoMaxPolls;
+	},
+	getMsoBaseUrl : function() {
+	    return "mso";
+	},
+	setMsoBaseUrl : function(msoBaseUrl) {
+	    _this.msoBaseUrl = msoBaseUrl;
+	},
+	getServerResponseTimeoutMsec : function() {
+	    return _this.serverResponseTimeoutMsec;
+	},
+	setServerResponseTimeoutMsec : function(serverResponseTimeoutMsec) {
+	    _this.serverResponseTimeoutMsec = serverResponseTimeoutMsec;
+	}
+    };
+}
+
+appDS2.factory("PropertyService", PropertyService);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/statusService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/statusService.js
new file mode 100755
index 0000000..3ed56c3
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/statusService.js
@@ -0,0 +1,185 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var StatusService = function($log, AaiService, DataService, ComponentService, COMPONENT,
+	FIELD, PARAMETER, UtilityService) {
+
+    var _this = this;
+    
+    var getAsyncOperationList = function() {
+		
+    		return [ getTargetProvStatus ];
+		
+	};
+
+    var getSummaryList = function() {
+	switch (_this.componentId) {
+	case COMPONENT.NETWORK:
+	case COMPONENT.SERVICE:
+	case COMPONENT.VNF:
+	case COMPONENT.VF_MODULE:
+	case COMPONENT.VOLUME_GROUP:
+	    return [ {
+		name : FIELD.NAME.SUBSCRIBER_NAME,
+		value : DataService.getSubscriberName()
+	    }, {
+		name : FIELD.NAME.SERVICE_INSTANCE_ID,
+		value : DataService.getServiceInstanceId()
+	    }, {
+		name : FIELD.NAME.SERVICE_INSTANCE_ID,
+		value : DataService.getServiceInstanceName()
+		}, {
+		name : FIELD.NAME.SERVICE_TYPE,
+		value : DataService.getServiceType()
+	    } ];
+	}
+    };
+     
+    var getVNFStatusList = function() {
+    	 var inventoryItem = DataService.getInventoryItem();
+    	 var newProvStatus = DataService.getUpdatedVNFProvStatus();
+    	 if ( UtilityService.hasContents(newProvStatus) ) {
+    		 
+    	 }
+    	 else
+    		{
+    		 newProvStatus = inventoryItem['prov-status'];
+    		}
+    	 return [ {
+    		    name : FIELD.NAME.VNF_VNF_ID,
+     		    value : inventoryItem['vnf-id']
+    		    }, {
+    			name : FIELD.NAME.VNF_VNF_Name,
+    			value : inventoryItem['vnf-name']
+    		    }, {
+    		    name : FIELD.NAME.VNF_VNF_Type,
+        		value : inventoryItem['vnf-type']
+    			}, {
+    			name : FIELD.NAME.VNF_Service_ID,
+    			value : inventoryItem['service-id']
+    		    }, {
+    		    name : FIELD.NAME.VNF_ORCHESTRATION_STATUS,
+    			value :inventoryItem['orchestration-status']
+    			}, {
+        		name : FIELD.NAME.VNF_In_Maint,
+        	    value :inventoryItem['in-maint']
+        		}, {
+            	name : FIELD.NAME.VNF_Operational_Status,
+            	value :inventoryItem['operational-state']
+            	},
+            	{
+                name : FIELD.NAME.VNF_Current_Prov_Status,
+                value : newProvStatus
+                }
+    	];
+    };
+
+    var internalGetParametersHandler = function() {
+		if (angular.isFunction(_this.getParametersHandler)) {
+			if (_this.componentId == COMPONENT.SERVICE)
+			_this.getParametersHandler({
+				summaryList : getSummaryList(),
+				userProvidedList : getUserProvidedList()
+			}, true);
+			else
+				_this.getParametersHandler({
+					summaryList : getSummaryList(),
+					userProvidedList : getUserProvidedList()
+				}, false);
+		}
+	};
+	
+	var getTargetProvStatus = function() {
+		AaiService.getProvOptionsFromSystemProp(function(response) {
+			DataService.setSystemPropProvStatus(response);
+			UtilityService.startNextAsyncOperation();
+		});
+	};
+	
+	var getUserProvidedList = function() {
+
+	   var parameterList = [];
+	
+		parameterList = parameterList.concat([
+				getTargetProvParameter()]); 
+
+	   return parameterList;
+    };
+    
+	var getTargetProvParameter = function() {
+		var provStatus = DataService.getSystemPropProvStatus();
+		var parameter = FIELD.PARAMETER.VNF_TARGET_PROVSTATUS;
+		var provArray = provStatus.data.split(",");
+		parameter.optionList = new Array();
+		for (var i = 0; i < provArray.length; i++) {
+			parameter.optionList.push({
+				id : i+1,
+				name : provArray[i]
+			}); 
+		}
+		return parameter;
+	};
+
+	var getTargetProvParameterText = function(index) {
+		var provStatus = DataService.getSystemPropProvStatus();
+		var parameter = FIELD.PARAMETER.VNF_TARGET_PROVSTATUS;
+		var provArray = provStatus.data.split(",");
+	     
+		return provArray[index-1];
+	};
+	
+	var getTargetProvParameters = function() {
+		var provStatus = DataService.getSystemPropProvStatus();
+	
+	};
+	
+    var updateUserParameterList = function(updatedId, parameterListControl) {
+    	console.log ("updateUserParameterList() updatedId=" + updatedId);
+		if (updatedId === FIELD.ID.VNF_TARGETPROVSTATUS) {
+			var list = parameterListControl.getList(updatedId);
+			
+		} 
+    };
+
+    return {
+	initializeComponent : function(componentId) {
+	    _this.componentId = ComponentService.initialize(componentId);
+	},
+	setHttpErrorHandler : function(httpErrorHandler) {
+		_this.httpErrorHandler = httpErrorHandler;
+	},
+	getComponentDisplayName : ComponentService.getComponentDisplayName,
+	getSummaryList : getSummaryList,
+	getVNFStatusList : getVNFStatusList,
+	getParameters : function(getParametersHandler) {
+		_this.getParametersHandler = getParametersHandler;
+		UtilityService.setHttpErrorHandler(_this.httpErrorHandler);
+		UtilityService.startAsyncOperations(getAsyncOperationList(),
+				internalGetParametersHandler);
+	},
+	updateUserParameterList : updateUserParameterList,
+	getTargetProvParameterText : getTargetProvParameterText
+    }
+}
+
+appDS2.factory("StatusService", [ "$log", "AaiService", "DataService", "ComponentService",
+	"COMPONENT", "FIELD", "PARAMETER", "UtilityService", StatusService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/utilityService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/utilityService.js
new file mode 100755
index 0000000..1333269
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/utilityService.js
@@ -0,0 +1,640 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+/*
+ * "UtilityService" contains various generic methods.
+ * 
+ * (*** DEPRECATED - Use PropertyService instead ***) setProperties() and
+ * getProperties()
+ * 
+ * SYNTAX: hasContents(object)
+ * 
+ * Returns "true" if "object" contains contents (i.e. is NOT undefined, null or
+ * ""), "false" otherwise.
+ * 
+ * SYNTAX: checkUndefined(name, value)
+ * 
+ * Throws an exception if "value" is undefined. The exception includes "name" as
+ * the cause of the exception. Returns "value" if it is defined.
+ * 
+ * SYNTAX: getCurrentTime()
+ * 
+ * Returns the current local date and time in the format "MM/DD/YY HH:MM:SS"
+ * 
+ * SYNTAX: setHttpErrorHandler(function)
+ * 
+ * Sets the HTTP error handler to "function".
+ * 
+ * SYNTAX: runHttpErrorHandler(response, status)
+ * 
+ * Logs warning messages and the runs the HTTP error handler previously set by
+ * "setHttpErrorHandler". The intended usage is for "$http" calls. Example:
+ * $http.get(...).then(...)["catch"](UtilityService.runHttpErrorHandler);
+ * 
+ * SYNTAX: getHttpStatusText(statusCode)
+ * 
+ * Expects "statusCode" to be an HTTP response code (e.g. 404). The function
+ * returns a string that includes both the code and an equivalent text summary.
+ * Example: "Not found (404)"
+ * 
+ * SYNTAX: getHttpErrorMessage(response)
+ * 
+ * Expects "response" to be the response object generated by a "$http" error
+ * condition. "getHttpErrorMessage" examines the object and returns a summary
+ * string for some known conditions.
+ */
+
+var UtilityService = function($log, DataService) {
+
+    var _this = this;
+    var convertModel = function (serviceModel) {
+		
+		var isNewFlow = false;
+		
+		for (var networkCustomizationName in serviceModel.networks) {
+			var networkModel = serviceModel.networks[networkCustomizationName];
+			if ( networkModel.customizationUuid != null ) {
+				isNewFlow = true;
+				break;
+			}
+		}
+		if ( !isNewFlow ) {
+			for (var vnfCustomizationName in serviceModel.vnfs) {
+				var vnfModel = serviceModel.vnfs[vnfCustomizationName];
+				if ( vnfModel.customizationUuid != null ) {
+					isNewFlow = true;
+					break;
+				}
+			}
+		}
+		if ( isNewFlow ) {
+			return (convertNewModel (serviceModel) );
+		}
+		else {
+			return (convertOldModel (serviceModel) );
+		}
+    };
+    var convertNewModel = function (serviceModel ) {
+    	var completeResources = new Array();
+		var resource = {};
+		var convertedAsdcModel = {
+				"service": serviceModel.service,
+				"networks": {},
+				"vnfs": {},
+				"completeDisplayInputs": {},
+				"isNewFlow": true
+			};
+		var networkModelDisplayInputs = {};
+		var vnfModelDisplayInputs = {};
+    	for (var networkCustomizationName in serviceModel.networks) {
+			var networkModel = serviceModel.networks[networkCustomizationName];
+			
+			convertedAsdcModel.networks[networkModel.customizationUuid] = {
+					"uuid": networkModel.uuid,
+					"invariantUuid": networkModel.invariantUuid,
+					"version": networkModel.version,
+					"name": networkModel.name,
+					"modelCustomizationName": networkModel.modelCustomizationName,
+					"customizationUuid": networkModel.customizationUuid,
+					"inputs": "",
+					"description": networkModel.description,
+					"commands": {},
+					"displayInputs": {}
+			}
+			resource = {
+					"name": networkModel.modelCustomizationName,
+					"description": networkModel.description
+			};
+			completeResources.push (resource);
+			
+			if (networkModel.commands != null) {
+				/*
+				 * commands: 
+				 *  internal_net_param_ntu: {
+				 * 		command: get_input,
+				 * 		displaName: internal_net_param_ntu,
+				 * 		inputName: vccfd1_internal_net_param_ntu // pointer to input key
+				 * }
+				 * If the input name (ptr) is one of instance_node_target,  naming_policy or vf_instance_name
+				 * then ignore it
+				 * 
+				 */
+				
+				for ( var cmd in networkModel.commands ) {
+					var cmdObj = networkModel.commands[cmd];
+					if ( cmdObj.inputName != null ) {
+						switch (cmdObj.inputName) {
+							case "instance_node_target":
+								break;
+							case "naming_policy":
+								break;
+							case "vf_instance_name":
+								break;
+							default: 
+								if (serviceModel.service != null && serviceModel.service.inputs != null &&
+										serviceModel.service.inputs[cmdObj.inputName] != null ) {
+									networkModelDisplayInputs[cmdObj.inputName] = (serviceModel.service.inputs[cmdObj.inputName]);
+								}
+						}
+								
+					}
+					
+				}
+				convertedAsdcModel.networks[networkModel.customizationUuid].displayInputs=networkModelDisplayInputs;
+				
+			}
+		}
+		
+		for (var vnfCustomizationName in serviceModel.vnfs) {
+			var vnfModel = serviceModel.vnfs[vnfCustomizationName];
+			var vnfCustomizationUuid = vnfModel.customizationUuid;
+			convertedAsdcModel.vnfs[vnfModel.customizationUuid] = {
+					"uuid": vnfModel.uuid,
+					"invariantUuid": vnfModel.invariantUuid,
+					"version": vnfModel.version,
+					"name": vnfModel.name,
+					"modelCustomizationName": vnfModel.modelCustomizationName,
+					"customizationUuid": vnfModel.customizationUuid,
+					"inputs": "",
+					"description": vnfModel.description,
+					"vfModules": {},
+					"volumeGroups": {},
+					"commands": {},
+					"displayInputs": {},
+					"properties": {},
+					"nfRole": "",
+					"nfType": ""
+			}
+			
+			resource = {
+					"name": vnfModel.modelCustomizationName,
+					"description": vnfModel.description
+			};
+			completeResources.push (resource);
+			
+			if (vnfModel.commands != null) {
+				/*
+				 * commands: {
+				 *  internal_net_param_ntu: {
+				 * 		command: get_input,
+				 * 		displaName: internal_net_param_ntu,
+				 * 		inputName: vccfd1_internal_net_param_ntu // pointer to input key
+				 * }
+				 * If the input name (ptr) is one of instance_node_target,  naming_policy or vf_instance_name
+				 * then ignore it
+				 * 
+				 */
+				
+				for ( var cmd in vnfModel.commands ) {
+					var cmdObj = vnfModel.commands[cmd];
+					if ( cmdObj.inputName != null ) {
+						// To Do: Make this list configurable
+						switch (cmdObj.inputName) {
+							case "instance_node_target":
+								break;
+							case "naming_policy":
+								break;
+							case "vf_instance_name":
+								break;
+							default: 
+								if (serviceModel.service != null && serviceModel.service.inputs != null &&
+										serviceModel.service.inputs[cmdObj.inputName] != null ) {
+									vnfModelDisplayInputs[cmdObj.inputName] = (serviceModel.service.inputs[cmdObj.inputName]);
+								}
+						}
+								
+					}
+					
+				}
+				
+				convertedAsdcModel.vnfs[vnfCustomizationUuid].displayInputs=vnfModelDisplayInputs;
+				convertedAsdcModel.vnfs[vnfCustomizationUuid].properties=vnfModel.properties;
+				//
+				var vnf_type = "";
+				var vnf_role = "";
+				var vnf_function = "";
+				var vnf_code = "";
+				if ( !( isObjectEmpty(vnfModel.properties) ) ) {
+					if (hasContents (vnfModel.properties.nf_type) ) {
+						vnf_type = vnfModel.properties.nf_type;
+					}
+					if (hasContents (vnfModel.properties.nf_role) ) {
+						vnf_role = vnfModel.properties.nf_role;
+					}
+					if (hasContents (vnfModel.properties.nf_function) ) {
+						vnf_function = vnfModel.properties.nf_function;
+					}
+					if (hasContents (vnfModel.properties.nf_code) ) {
+						vnf_code = vnfModel.properties.nf_code;
+					}
+				}
+				convertedAsdcModel.vnfs[vnfCustomizationUuid]["nfType"] = vnf_type;
+				convertedAsdcModel.vnfs[vnfCustomizationUuid]["nfRole"] = vnf_role;
+				convertedAsdcModel.vnfs[vnfCustomizationUuid]["nfFunction"] = vnf_function;
+				convertedAsdcModel.vnfs[vnfCustomizationUuid]["nfCode"] = vnf_code;
+				//
+				for (var vfModuleCustomizationName in serviceModel.vnfs[vnfCustomizationName].vfModules) {
+					var vfModuleModel = serviceModel.vnfs[vnfCustomizationName].vfModules[vfModuleCustomizationName];
+					convertedAsdcModel.vnfs[vnfCustomizationUuid].vfModules[vfModuleModel.customizationUuid] = vfModuleModel;
+				}
+				
+				for (var volumeGroupCustomizationName in serviceModel.vnfs[vnfCustomizationName].volumeGroups) {
+					var volumeGroupModel = serviceModel.vnfs[vnfCustomizationName].volumeGroups[volumeGroupCustomizationName];
+					convertedAsdcModel.vnfs[vnfCustomizationUuid].volumeGroups[volumeGroupModel.customizationUuid] = volumeGroupModel;
+				}
+			}
+		}
+		
+		var completeDisplayInputs = {};
+		
+		for (var key in vnfModelDisplayInputs) {
+			completeDisplayInputs[key] = vnfModelDisplayInputs[key];
+		}
+		for (var key in networkModelDisplayInputs) {
+			completeDisplayInputs[key] = networkModelDisplayInputs[key];
+		}
+		
+		convertedAsdcModel.completeDisplayInputs = completeDisplayInputs;
+		// Need to collect all the model customization names (node template tag) and descriptions
+		DataService.setResources (completeResources);
+		
+		console.log ("convertedAsdcModel: "); console.log (JSON.stringify ( convertedAsdcModel, null, 4 ));
+		return (convertedAsdcModel);
+    };
+    
+    var convertOldModel = function (serviceModel ) {
+    	
+		var resource = {};
+		var convertedAsdcModel = {
+				"service": serviceModel.service,
+				"networks": {},
+				"vnfs": {},
+				"completeDisplayInputs": {},
+				"isNewFlow": false
+			};
+		var completeResources = new Array();
+		var resource = {};
+		var vnfModelDisplayInputs = {};
+		var networkModelDisplayInputs = {};
+		for (var networkCustomizationName in serviceModel.networks) {
+			var networkModel = serviceModel.networks[networkCustomizationName];
+			convertedAsdcModel.networks[networkModel.invariantUuid] = {};
+			//convertedAsdcModel.networks[networkModel.invariantUuid][networkModel.version] = networkModel;
+			// need a network model to test this
+			convertedAsdcModel.networks[networkModel.uuid] = {
+					"uuid": networkModel.uuid,
+					"invariantUuid": networkModel.invariantUuid,
+					"version": networkModel.version,
+					"name": networkModel.name,
+					"modelCustomizationName": networkModel.modelCustomizationName,
+					"customizationUuid": networkModel.customizationUuid,
+					"inputs": "",
+					"description": networkModel.description,
+					"commands": {},
+					"displayInputs": {}
+			}
+			resource = {
+					"name": networkModel.modelCustomizationName,
+					"description": networkModel.description
+			};
+			completeResources.push (resource);
+			if (networkModel.commands != null) {
+				/*
+				 * commands: 
+				 *  internal_net_param_ntu: {
+				 * 		command: get_input,
+				 * 		displaName: internal_net_param_ntu,
+				 * 		inputName: vccfd1_internal_net_param_ntu // pointer to input key
+				 * }
+				 * If the input name (ptr) is one of instance_node_target,  naming_policy or vf_instance_name
+				 * then ignore it
+				 * 
+				 */
+				
+				for ( var cmd in networkModel.commands ) {
+					var cmdObj = networkModel.commands[cmd];
+					if ( cmdObj.inputName != null ) {
+						switch (cmdObj.inputName) {
+							case "instance_node_target":
+								break;
+							case "naming_policy":
+								break;
+							case "vf_instance_name":
+								break;
+							default: 
+								if (serviceModel.service != null && serviceModel.service.inputs != null &&
+										serviceModel.service.inputs[cmdObj.inputName] != null ) {
+									networkModelDisplayInputs[cmdObj.inputName] = (serviceModel.service.inputs[cmdObj.inputName]);
+								}
+						}
+								
+					}
+					
+				}
+				convertedAsdcModel.networks[networkModel.uuid].displayInputs=networkModelDisplayInputs;
+			}
+		}
+		
+		for (var vnfCustomizationName in serviceModel.vnfs) {
+			var vnfModel = serviceModel.vnfs[vnfCustomizationName];
+			convertedAsdcModel.vnfs[vnfModel.uuid] = {
+					"uuid": vnfModel.uuid,
+					"invariantUuid": vnfModel.invariantUuid,
+					"version": vnfModel.version,
+					"name": vnfModel.name,
+					"modelCustomizationName": vnfModel.modelCustomizationName,
+					"customizationUuid": vnfModel.customizationUuid,
+					"inputs": "",
+					"description": vnfModel.description,
+					"vfModules": {},
+					"volumeGroups": {},
+					"commands": {},
+					"displayInputs": {}
+			}
+			resource = {
+					"name": vnfModel.modelCustomizationName,
+					"description": vnfModel.description
+			};
+			completeResources.push (resource);
+			
+			if (vnfModel.commands != null) {
+				/*
+				 * commands: {
+				 *  internal_net_param_ntu: {
+				 * 		command: get_input,
+				 * 		displaName: internal_net_param_ntu,
+				 * 		inputName: vccfd1_internal_net_param_ntu // pointer to input key
+				 * }
+				 * If the input name (ptr) is one of instance_node_target,  naming_policy or vf_instance_name
+				 * then ignore it
+				 * 
+				 */
+				
+				for ( var cmd in vnfModel.commands ) {
+					var cmdObj = vnfModel.commands[cmd];
+					if ( cmdObj.inputName != null ) {
+						// To Do: Make this list configurable
+						switch (cmdObj.inputName) {
+							case "instance_node_target":
+								break;
+							case "naming_policy":
+								break;
+							case "vf_instance_name":
+								break;
+							default: 
+								if (serviceModel.service != null && serviceModel.service.inputs != null &&
+										serviceModel.service.inputs[cmdObj.inputName] != null ) {
+									vnfModelDisplayInputs[cmdObj.inputName] = (serviceModel.service.inputs[cmdObj.inputName]);
+								}
+						}
+								
+					}
+					
+				}
+				convertedAsdcModel.vnfs[vnfModel.uuid].displayInputs=vnfModelDisplayInputs;
+			}
+			
+			for (var vfModuleCustomizationName in serviceModel.vnfs[vnfCustomizationName].vfModules) {
+				var vfModuleModel = serviceModel.vnfs[vnfCustomizationName].vfModules[vfModuleCustomizationName];
+				convertedAsdcModel.vnfs[vnfModel.uuid].vfModules[vfModuleModel.uuid] = vfModuleModel;
+			}
+			
+			for (var volumeGroupCustomizationName in serviceModel.vnfs[vnfCustomizationName].volumeGroups) {
+				var volumeGroupModel = serviceModel.vnfs[vnfCustomizationName].volumeGroups[volumeGroupCustomizationName];
+				convertedAsdcModel.vnfs[vnfModel.uuid].volumeGroups[volumeGroupModel.uuid] = volumeGroupModel;
+			}
+		}
+		//console.log ("convertedAsdcModel: "); console.log (JSON.stringify ( convertedAsdcModel, null, 4 ) );
+		
+		var completeDisplayInputs = {};
+		
+		for (var key in vnfModelDisplayInputs) {
+			completeDisplayInputs[key] = vnfModelDisplayInputs[key];
+		}
+		for (var key in networkModelDisplayInputs) {
+			completeDisplayInputs[key] = networkModelDisplayInputs[key];
+		}
+		
+		convertedAsdcModel.completeDisplayInputs = completeDisplayInputs;
+		// Need to collect all the model customization names (node template tag) and descriptions
+		DataService.setResources (completeResources);
+		console.log ("convertedAsdcModel: "); console.log (JSON.stringify ( convertedAsdcModel, null, 4 ));
+		return (convertedAsdcModel);
+    };
+    
+    function hasContents(object) {
+	if (object === undefined || object === null || object === "") {
+	    return false;
+	}
+	return true;
+    };
+    function isObjectEmpty(o) {
+		var len = 0;
+		if (hasContents(o)){
+			var keys = Object.keys(o);
+			len = keys.length;
+			if ( len == 0 ) {
+				return true;
+			}
+			else {
+				return false;
+			}
+		}
+		else {
+			return true;
+		}
+    };
+    function padZero(number) {
+	if (number < 10) {
+	    return "0" + number;
+	} else {
+	    return "" + number;
+	}
+    };
+
+    var httpErrorHandler = function(response, status) {
+	$log.warn("UtilityService:httpErrorHandler: response:");
+	$log.warn(response);
+	$log.warn("UtilityService:httpErrorHandler: status:");
+	$log.warn(status);
+	if (angular.isFunction(_this.httpErrorHandler)) {
+	    _this.httpErrorHandler(response, status);
+	}
+    };
+
+    var startNextAsyncOperation = function() {
+	if (_this.asyncOperations.count < _this.asyncOperations.operationList.length) {
+	    _this.asyncOperations.operationList[_this.asyncOperations.count++]
+		    ();
+	} else {
+	    if (angular.isFunction(_this.asyncOperations.callbackFunction)) {
+		_this.asyncOperations.callbackFunction();
+	    }
+	}
+    };
+
+    return {
+	setProperties : function(properties) {
+	    _this.properties = properties;
+	},
+	getProperties : function() {
+	    return _this.properties;
+	},
+	hasContents : hasContents,
+	checkUndefined : function(name, value) {
+	    if (value === undefined) {
+		throw {
+		    type : "undefinedObject",
+		    message : "undefined object: \"" + name + "\""
+		};
+	    }
+	    return value;
+	},
+	jsonConcat : function (o1, o2) {
+		 for (var key in o2) {
+		  o1[key] = o2[key];
+		 }
+		 return o1;
+   },
+	getCurrentTime : function() {
+	    var time = new Date();
+	    return padZero(time.getMonth() + 1) + "/"
+		    + padZero(time.getDate()) + "/"
+		    + (time.getFullYear() - 2000) + " "
+		    + padZero(time.getHours()) + ":"
+		    + padZero(time.getMinutes()) + ":"
+		    + padZero(time.getSeconds())
+	},
+	getHttpStatusText : function(statusCode) {
+	    var statusMap = {
+		"200" : "OK",
+		"201" : "Created",
+		"202" : "Accepted",
+		"400" : "Bad Request",
+		"401" : "Unauthorized",
+		"404" : "Not Found",
+		"405" : "Method Not Allowed",
+		"409" : "Locked",
+		"500" : "Internal Server Error",
+		"503" : "Service Unavailable",
+		"504" : "Gateway Timeout"
+	    }
+
+	    if (status === undefined) {
+		return "Undefined";
+	    }
+
+	    var statusText = statusMap[statusCode];
+	    if (statusText === undefined) {
+		statusText = "Unknown";
+	    }
+
+	    return statusText + " (" + statusCode + ")";
+	},
+	getHttpErrorMessage : function(response) {
+	    var data = response.data;
+	    if (response.status === 500 && hasContents(data.exception)) {
+		var summary = "exception: " + data.exception;
+		if (hasContents(data.message)) {
+		    summary += " message: " + data.message;
+		}
+		return summary;
+	    }
+	    if (response.status === 0 && response.statusText === "") {
+		/*
+		 * This logic is somewhat "fuzzy". Potential (brainstorming)
+		 * enhancements if users find the message unreliable include:
+		 * 
+		 * A) SERVER TIMEOUT: perhaps a newer version of Angular can
+		 * reliably determine timeouts.
+		 * 
+		 * B) SERVER TIMEOUT: recording start / end times and using that
+		 * to determine if timeout occured
+		 * 
+		 * C) SESSION TIMEOUT "Potentially" examine cookies, although
+		 * that may not be feasible if cookies are set to "httponly".
+		 */
+		if (data === null) {
+		    //return "possible server timeout";
+			return "VID has timed out waiting for a response. To see status, close this popup and the screen will be refreshed automatically";
+		}
+		if (data === "") {
+		    return "Possible reasons include a session timeout or a server issue. "
+			    + "A session timeout might be resolved by refreshing the screen and re-logging in";
+		}
+	    }
+	    var summary = "";
+	    if (response.status !== undefined && response.status > 0) {
+		summary = "status: " + response.status;
+	    }
+	    if (hasContents(response.statusText)) {
+		if (summary !== "") {
+		    summary += " ";
+		}
+		summary += "message: " + response.statusText;
+	    }
+	    return summary;
+	},
+	setHttpErrorHandler : function(httpErrorHandler) {
+	    _this.httpErrorHandler = httpErrorHandler;
+	},
+	runHttpErrorHandler : function(response, status) {
+	    httpErrorHandler(response, status);
+	},
+	startAsyncOperations : function(operationList, callbackFunction) {
+	    for (var i = 0; i < operationList.length; i++) {
+		if (!angular.isFunction(operationList[i])) {
+		    throw "UtilityService:startAsyncOperations: invalid function: index: "
+			    + i;
+		}
+	    }
+	    _this.asyncOperations = {
+		operationList : operationList,
+		callbackFunction : callbackFunction,
+		count : 0
+	    };
+	    startNextAsyncOperation();
+	},
+	startNextAsyncOperation : startNextAsyncOperation,
+	stopAsyncOperations : function() {
+	    _this.asyncOperations.count = _this.asyncOperations.operationList.length;
+	},
+	isObjectEmpty : isObjectEmpty,
+	convertModel : convertModel,
+	convertNewModel : convertNewModel,
+	convertOldModel : convertOldModel,
+	arrayContains : function (a, obj) {
+	    var i = a.length;
+	    if ( i > 0 ) {
+		    while (i--) {
+		       if (a[i] === obj) {
+		           return true;
+		       }
+		    }
+	    }
+	    return false;
+	}
+	}
+}
+
+//app.factory("UtilityService", UtilityService);
+appDS2.factory("UtilityService", [ "$log", "DataService", UtilityService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/services/vnfService.js b/vid-app-common/src/main/webapp/app/vid/scripts/services/vnfService.js
new file mode 100755
index 0000000..836279b
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/services/vnfService.js
@@ -0,0 +1,82 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+"use strict";
+
+var VnfService = function($http, $log, VIDCONFIGURATION, FIELD, UtilityService) {
+	var isVnfStatusValid = function(vnfInstance) {
+
+		if ( (UtilityService.isObjectEmpty(vnfInstance)) || (UtilityService.isObjectEmpty(vnfInstance.object)) ) {
+			return (errorInternalMsg);
+		}
+		var status = {
+				"provStatus": "",
+				"orchestrationStatus": "",
+				"inMaint": false,
+				"operationalStatus": null
+		};
+		var errorAaiStatusMsg = "The prov-status, orchestration-status or in-maint fields are not captured correctly in A&AI for this VNF: "
+			+ vnfInstance.object['vnf-name'] + ". Please update these statuses in A&AI before attempting this change.";
+		var errorInvalidCombinationMsg = "The VNF: " +  vnfInstance.object['vnf-name'] + 
+		", has reached a status where further changes cannot be made in VID. Additional changes should be made through the Change Management Processes.";
+		var errorInternalMsg = "Internal VID Error: The VNF Instance is not populated."
+			
+		if ( ( UtilityService.hasContents ( vnfInstance.object[FIELD.ID.ORCHESTRATION_STATUS] ) ) &&
+				( UtilityService.hasContents ( vnfInstance.object[FIELD.ID.IN_MAINT] ) ) &&
+				( UtilityService.hasContents ( vnfInstance.object[FIELD.ID.PROV_STATUS] ) ) ) {
+
+			status.provStatus = vnfInstance.object[FIELD.ID.PROV_STATUS].toLowerCase();
+			status.orchestrationStatus = vnfInstance.object[FIELD.ID.ORCHESTRATION_STATUS].toLowerCase();
+			status.inMaint = vnfInstance.object[FIELD.ID.IN_MAINT];
+
+			if ( UtilityService.hasContents(vnfInstance.object[FIELD.ID.OPERATIONAL_STATUS]) ) {
+				status.operationalStatus = vnfInstance.object[FIELD.ID.OPERATIONAL_STATUS].toLowerCase();
+			}
+
+			if ( UtilityService.arrayContains ( VIDCONFIGURATION.VNF_VALID_STATUS_LIST, status ) ) {
+				return ("");
+			}
+			else {
+				return (errorInvalidCombinationMsg);
+			}
+		}
+		else {
+			return (errorAaiStatusMsg);
+		}
+	};
+	var isVnfListStatusValid = function(vnfArray) {
+		var msg = "";
+		for(var i = 0; i < vnfArray.length; i++) {
+			var vnf = vnfArray[i];
+			msg = isVnfStatusValid (vnf);
+			if ( msg != "" ) {
+				return (msg);
+			} 
+		}
+		return (msg);
+	};
+	return {
+		isVnfStatusValid: isVnfStatusValid,
+		isVnfListStatusValid : isVnfListStatusValid
+	}
+};
+
+appDS2.factory("VnfService", [ "$http", "$log", "VIDCONFIGURATION", "FIELD",
+                            "UtilityService", VnfService ]);
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiGetSubs.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiGetSubs.htm
new file mode 100755
index 0000000..d22e3d9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiGetSubs.htm
@@ -0,0 +1,83 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiGetSubs.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiSubDetails.css" />
+<script src="app/vid/scripts/controller/aaiSubscriberController.js"></script>
+<div ng-controller="aaiSubscriberController" ng-cloak>
+
+	<div>
+		<div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+			<img src="app/vid/images/spinner.gif"></img>
+			<label>Status:</label><span class="status">{{status}}</span>
+		</div>
+
+		<div ng-if="errorMsg != null"><font color='red'>{{errorMsg}}<pre>{{errorDetails | json}}</pre></font></div>
+		
+		 <h2 class="heading2"><center>Search Existing Service Instances</center></h2>
+     		<br>
+    	Please search by the Subscriber name or enter Service Instance Id or Service Instance Name below:&nbsp;<br><br>
+    	 
+		<table> 
+			<tr>
+				<td style="width:30%">
+				<div class="fn-ebz-container">	
+					<label  class="fn-ebz-text-label">Subscriber Name:</label>
+				</div>
+				</td>
+				<td style="width:30%" nowrap>
+					<div class="fn-ebz-container" ng-init="autoGetSubs();">
+						<select  ng-model="selectedCustomer" ng-options="item.globalCustomerId as item.subscriberName for item in customerList | orderBy:'subscriberName'">
+						<option value="">Select a subscriber</option></select>
+					  &nbsp;&nbsp;<a class="btn btn-primary" ng-click="refreshSubs();" ><span class="glyphicon glyphicon-refresh"></span></a>
+					</div>
+				</td>
+	 		
+			</tr>
+			<tr>
+				<td style="width:30%">
+					<div class="fn-ebz-container">
+						<select  style="width: 250px;" ng-model="selectedserviceinstancetype" ng-options="stype.sinstance as stype.sinstance for stype in serviceInstanceses" >
+						<option value="">Select a Service Instance</option>						
+						</select>
+					</div>
+				</td>
+    			<td style="width:60%">
+    				<div class="fn-ebz-container">
+						<input type="text" style="width: 350px;" name="selectedServiceInstance" ng-model="selectedServiceInstance" restrict-input ="{type : selectedserviceinstancetype}" />
+					</div> 
+				</td>
+				
+    		</tr>
+    		<tr>
+				<td>
+				<td style="width:30%">
+					<div>	
+						<button type="submit" class="btn btn-primary" size="small" ng-click="getSubscriberDet(selectedCustomer,selectedserviceinstancetype,selectedServiceInstance);">Submit</button></a>
+					</div>
+				</td>
+				</td>
+			</tr>
+		</table>	
+		
+	
+	</div>
+
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiGetSubscriberList.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiGetSubscriberList.htm
new file mode 100755
index 0000000..6a911be
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiGetSubscriberList.htm
@@ -0,0 +1,67 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiGetSubs.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiSubDetails.css" />
+<script src="app/vid/scripts/controller/aaiSubscriberController.js"></script>
+<div ng-controller="aaiSubscriberController" ng-cloak>
+
+	<div>
+		<div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+			<img src="app/vid/images/spinner.gif"></img>
+			<label>Status:</label><span class="status">{{status}}</span>
+		</div>
+		
+		<div ng-if="errorMsg != null"><font color='red'>{{errorMsg}}<pre>{{errorDetails | json}}</pre></font></div>
+		
+		 <h2 class="heading2"><center>Create New Service Instance</center></h2>
+		 
+		<table> 
+			<tr>
+				<td >
+				<div class="fn-ebz-container">	
+					<label  class="fn-ebz-text-label">Subscriber Name:</label>
+				</div>
+				</td>
+				<td style="width:80%" nowrap>
+					<div class="fn-ebz-container" ng-init="autoGetSubs();">
+						<select  ng-model="selectedCustomer" ng-options="item.globalCustomerId as item.subscriberName for item in customerList | orderBy:'subscriberName'">
+						<option value="">Select Subscriber Name</option></select>
+					  &nbsp;&nbsp;<a class="btn btn-primary" ng-click="refreshSubs();" ><span class="glyphicon glyphicon-refresh"></span></a>
+					</div>
+				</td>
+	 		
+			</tr>
+    		<tr>
+				<td >
+				</td>
+				<td style="width:80%">
+					<div >	
+						<button type="submit" class="btn btn-primary"  size="small" ng-click="getServiceTypes(selectedCustomer);">Submit</button></a>
+						&nbsp;&nbsp;<button type="submit" class="btn btn-primary" size="small" ng-click="cancelCreateSI()">Cancel</button></a>
+					</div>
+				</td>
+			</tr>
+		</table>	
+		
+	
+	</div>
+
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiServiceTypes.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiServiceTypes.htm
new file mode 100755
index 0000000..6711bfa
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiServiceTypes.htm
@@ -0,0 +1,80 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiGetSubs.css" />
+<link rel="stylesheet" type="text/css" href="app/vid/styles/aaiSubDetails.css" />
+<script src="app/vid/scripts/controller/aaiSubscriberController.js"></script>
+<div  ng-controller="aaiSubscriberController" ng-cloak>
+
+	<div>
+		<div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+			<img src="app/vid/images/spinner.gif"></img>
+			<label>Status:</label><span class="status">{{status}}</span>
+		</div>
+		<div ng-if="errorMsg != null"><font color='red'>{{errorMsg}}<pre>{{errorDetails | json}}</pre></font></div>
+		<h2 class="heading2"><center>Create New Service Instance</center></h2>
+		
+		<table> 
+		
+		<tr>
+				<td >
+				<div class="fn-ebz-container">	
+					<label  class="fn-ebz-text-label" >Subscriber Name :</label>
+				</div>
+				</td>
+				<td style="width:80%" nowrap>
+					<div class="fn-ebz-container">
+					<textarea style=" height: 15px  width: 100% border: none resize: none  overflow: hidden background-color: #ddd outline: none" ng-model="createSubscriberName">{{createSubscriberName}}</textarea>
+						
+					</div>
+				</td>
+	 		
+			</tr>
+			<tr>
+				<td >
+				<div class="fn-ebz-container">	
+					<label  class="fn-ebz-text-label">Service Type :</label>
+				</div>
+				</td>
+				<td style="width:80%" nowrap>
+					<div class="fn-ebz-container" ng-init="getServiceTypesList()">
+						<select  ng-model="selectedServicetype" ng-options="key as value for (key , value) in serviceTypeList">
+						<option value="">Select Service Type</option></select>
+					  &nbsp;&nbsp;<a class="btn btn-primary" ng-click="refreshServiceTypes(subId);" ><span class="glyphicon glyphicon-refresh"></span></a>
+					</div>
+				</td>
+	 		
+			</tr>
+    		<tr>
+				<td >
+				</td>
+				<td style="width:80%">
+					<div >	
+						<button type="submit" class="btn btn-primary"  size="small" ng-click="getAaiServiceModels(selectedServicetype,createSubscriberName);">Submit</button></a>
+						&nbsp;&nbsp;<button type="submit" class="btn btn-primary" size="small" ng-click="cancelCreateSIType()">Cancel</button></a>
+					</div>
+				</td>
+			</tr>
+		</table>	
+		
+	
+	</div>
+
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiSubDetails.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiSubDetails.htm
new file mode 100755
index 0000000..2426f15
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiSubDetails.htm
@@ -0,0 +1,95 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+	<div ng-controller="aaiSubscriberController" ng-cloak>
+	
+		<div>
+			<div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+				<img src="app/vid/images/spinner.gif">
+					</img>
+				<label>Status:</label><span class="status">{{status}}</span>
+			</div>
+
+			<div ng-if="errorMsg != null"><font color='red'>{{errorMsg}}<pre>{{errorDetails | json}}</pre></font></div>
+	
+			 <h1 class="heading1"><center>Subscriber Details for {{selectedSubscriber}} ({{selectedSubscriberName}})</center></h1>
+	     		<br>
+		<div class="fn-ebz-container">
+		         Filter:
+		          <input class="fn-ebz-text" type="text" ng-model="searchString" size="20" style="width: 250px;">
+	    </div>
+			<div ng-init="getSubDetails();">
+				
+				<div style="margin-top: 30px">
+					<table att-table width="100%" table-data="displayData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage" type="header">
+	
+						<thead att-table-row>
+							<tr>
+								<th att-table-header sortable="false" key="viewSubDetails">View/Edit</th>
+								<th att-table-header sortable="true" key="globalCustomerId">Global Customer ID</th>
+								<th att-table-header sortable="true" key="subscriberName">Subscriber Name</th>
+								<th att-table-header sortable="true" key="serviceType">Service Type</th>
+								<th att-table-header default-sort="A" sortable="true" key="serviceInstanceName">Service Instance Name</th>
+								<th att-table-header sortable="true" key="serviceInstanceId">Service Instance ID</th>
+							</tr>
+						</thead>
+						<tbody att-table-row type="body" row-repeat="disData in displayData">
+							<tr>
+								 <td att-table-body>
+									<div>
+										<a alt="View/Edit" ng-click="getAsdcModel(disData);"> View/Edit </a>
+									</div>
+								</td> 
+							<!--	<td att-table-body ><button type=button ng-click="getAsdcModel(disData);" att-button btn-type="primary" size="small">View/Edit</button></td> --->
+								<td att-table-body ng-bind="disData['globalCustomerId']"></td>
+								<td att-table-body ng-bind="disData['subscriberName']"></td>
+								<td att-table-body ng-bind="disData['serviceType']"></td>
+								<td att-table-body ng-bind="disData['serviceInstanceName']"></td>
+								<td att-table-body ng-bind="disData['serviceInstanceId']"></td>
+							</tr>
+						</tbody>
+					</table>
+					<table width='100%'>
+					<tr>
+					<td width='33%' valign='middle'>
+						<span style="cursor: pointer" ng-if="currentPage>1"><button att-button size="small" ng-click="prevPage();">&lt; prev page</button></span>
+					</td>
+					<td width='33%' valign='middle'>
+						Jump to page:
+		          		<input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+		    			Results per page: <span style="cursor: pointer" ng-click="viewPerPage = 10" ng-style="viewPerPage === 10 && {'textDecoration':'underline','text-color':'black'}">10</span> 
+	    				| <span style="cursor: pointer" ng-click="viewPerPage = 25" ng-style="viewPerPage === 25 && {'textDecoration':'underline','text-color':'black'}">25</span> 
+	    				| <span style="cursor: pointer" ng-click="viewPerPage = 50" ng-style="viewPerPage === 50 && {'textDecoration':'underline','text-color':'black'}">50</span> 
+	    			</td>
+	    			<td width='34%' align='right' valign='middle'>
+	    			 	<span style="cursor: pointer" ng-if="currentPage<totalPage"><button att-button size="small" ng-click="nextPage();">next page &gt;</button></span>
+					</td>
+					</tr>
+					</table>
+					 
+	    			
+				</div>
+	
+			</div>
+	
+	
+		</div>
+	
+	</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiSubViewEdit.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiSubViewEdit.htm
new file mode 100755
index 0000000..a7ea833
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/aaiSubViewEdit.htm
@@ -0,0 +1,147 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div ng-controller="aaiSubscriberController" ng-cloak>
+
+	<div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"
+		ng-cloak>
+		<div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"></div>
+		<div ng-include="'app/vid/scripts/view-models/deletionDialog.htm'"></div>
+		<div ng-include="'app/vid/scripts/view-models/detailsDialog.htm'"></div>
+	</div> 
+
+	<div>
+		<div class="statusLine">
+			<img src="app/vid/images/spinner.gif"
+				ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]"></img>
+			<label>Status:</label><span class="status">{{status}}</span>
+		</div>
+
+		<h2 class="heading2">
+			<center>VIEW/EDIT SERVICE INSTANCE <a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();" ><span class="glyphicon glyphicon-refresh"></span></a></center>
+			</h2>
+			</center>
+		</h2>
+		<br>
+
+
+		<center>
+			<table border="1">
+				<tr>
+					<th style="text-align: center" width="33%">SUBSCRIBER:
+						{{globalCustomerId}}</th>
+					<th style="text-align: center" width="34%">SERVICE TYPE:
+						{{serviceType}}</th>
+					<th style="text-align: center" width="33%">SERVICE INSTANCE
+						ID: {{serviceInstanceId}}</th>
+				<tr>
+				<tr>
+					<td colspan='3' style="text-align: center">Service Instance
+						Name: {{serviceInstanceName || "Not defined"}}
+					</td>
+				<tr>
+			</table>
+
+		</center>
+
+
+		<br>
+
+		<div ng-init="autoPopulateViewEdit();">
+			<script type="text/ng-template" id="nodes_renderer.html">
+  <div ui-tree-handle data-drag-enabled="false" class="tree-node tree-node-content">
+    <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
+        class="glyphicon"
+        ng-class="{
+          'glyphicon-chevron-right': collapsed,
+          'glyphicon-chevron-down': !collapsed
+        }"></span></a>
+   <div class='btn'>{{node.nodeType}}</div><div class='btn'>{{node.nodeId}}</div><div class='btn'>{{node.nodeStatus}}</div>
+	
+	<a class="pull-right btn btn-danger btn-xs" ng-if="node.delete != false" data-nodrag ng-click="showVnfDetails(node);"><span class="glyphicon glyphicon-remove"></a> 
+    <a class="pull-right btn btn-primary btn-xs" ng-if="node.info != false" data-nodrag ng-click="showVnfDetails();"><span
+        class="glyphicon glyphicon-zoom-in"></span></a>
+    
+  </div>
+  <ol ui-tree-nodes ng-model="node.nodes" ng-class="{hidden: collapsed}">
+    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
+    </li>
+  </ol>
+</script>
+			<b>EXISTING</b>
+			<div ng-controller="TreeCtrl">
+				<div>
+					<div ui-tree id="tree-root" >
+						<ol ui-tree-nodes ng-model="treeList"">
+							<li ng-repeat="node in treeList" ui-tree-node data-nodrag
+								ng-include="'nodes_renderer.html'"></li>
+						</ol>
+					</div>
+				</div>
+
+			</div>
+			<b>AVAILABLE</b>
+			
+						<script type="text/ng-template" id="nodes_renderer2.html">
+  <div ui-tree-handle data-drag-enabled="false" class="tree-node tree-node-content" >
+    <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
+        class="glyphicon"
+        ng-class="{
+          'glyphicon-chevron-right': collapsed,
+          'glyphicon-chevron-down': !collapsed
+        }"></span></a>
+    <div class='btn'>{{node.nodeType}}</div><div class='btn'>{{node.nodeId}}</div><div class='btn'>{{node.nodeStatus}}</div>
+	
+	<a class="pull-right btn btn-primary btn-xs" ng-if="node.delete != false" data-nodrag ng-click="callDelete(this)">
+		<span class="glyphicon glyphicon-plus"></span>
+	</a>
+
+    <a class="pull-right btn btn-primary btn-xs" ng-if="node.info != false" data-nodrag ng-click="showInfoDialog(node.itemType, node.nodeId, node.nodeType);">
+		<span class="glyphicon glyphicon-zoom-in"></span>
+	</a>
+    
+  </div>
+  <ol ui-tree-nodes ng-model="node.nodes" ng-class="{hidden: collapsed}">
+    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer2.html'">
+    </li>
+  </ol>
+</script>
+				
+			<div ng-controller="TreeCtrl">
+				<div>
+					<div ui-tree id="tree-root">
+						<ol ui-tree-nodes ng-model="availableTreeList">
+							<li ng-repeat="node in availableTreeList" ui-tree-node
+								data-nodrag ng-include="'nodes_renderer2.html'"></li>
+						</ol>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div>
+		
+		<button type="button" " att-button
+					btn-type="primary" size="small">Show Details</button>
+		
+			<pre>
+  				{{inventoryResponseItem | json}}
+			</pre>
+		</div>
+	</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/createInstanceServiceModels.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/createInstanceServiceModels.htm
new file mode 100755
index 0000000..a78b95e
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/createInstanceServiceModels.htm
@@ -0,0 +1,125 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<link rel="stylesheet" type="text/css" href="app/vid/styles/serviceModels.css" />
+<div popup-window class="popupContents" ngx-show="{{popup.isVisible}}" ng-cloak>
+	<div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"/>
+</div>
+<div >
+
+	<span class="statusLine" ng-class="{true:'smcVisible', false:'smcHidden'}[isSpinnerVisible]">
+			<img src="app/vid/images/spinner.gif"></img>
+			</span>
+			<span class="statusLine" ng-class="{true:'progVisible', false:'progHidden'}[isProgressVisible]">
+			<label>Status:</label><span class="status"><span ng-show="error"><font color='red'><b>Error: </b></font></span>{{status}}</span>
+		</span>
+	<br><br>
+	
+	
+	<table> 
+		
+		<tr>
+				<td >
+				<div class="fn-ebz-container">	
+					<label  class="fn-ebz-text-label" >Subscriber Name :</label>
+				</div>
+				</td>
+				<td style="width:80%" nowrap>
+					<div class="fn-ebz-container">
+					<textarea style=" height: 15px  width: 100% border: none resize: none  overflow: hidden background-color: #ddd outline: none" ng-model="createSubscriberName">{{createSubscriberName}}</textarea>
+						
+					</div>
+				</td>
+	 		
+			</tr>
+			<tr>
+				<td >
+				<div class="fn-ebz-container">	
+					<label  class="fn-ebz-text-label" >Service Type :</label>
+				</div>
+				</td>
+				<td style="width:80%" nowrap>
+					<div class="fn-ebz-container">
+					<textarea style=" height: 15px  width: 100% border: none resize: none  overflow: hidden background-color: #ddd outline: none" ng-model="serviceTypeName">{{serviceTypeName}}</textarea>
+						
+					</div>
+				</td>
+	 		
+			</tr>
+			 
+    </table>			
+	
+   	<div class="fn-ebz-container">
+		         Filter:
+		          <input class="fn-ebz-text" type="text" ng-model="searchString" size="20" style="width: 250px;">
+	</div>
+
+	<!-- <h1 class="heading1" style="margin-top:20px;">Browse SDC Service Models</h1> -->
+	<div style="margin-top:30px" ng-init="getAaiServiceModelsList();">
+		
+		<table att-table table-data="services" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		    <thead  att-table-row type="header">
+				<tr>
+					<th att-table-header key="action">Action</th>
+					<th att-table-header key="uuid">UUID</th>
+					<th att-table-header key="invariantUUID">Invariant UUID</th>
+					<th att-table-header default-sort="A" key="name">Name</th>
+		            <th att-table-header key="version">Version</th>
+		            <th att-table-header key="category">Category</th>
+		            <th att-table-header key="distributionStatus">Distribution Status</th>
+		            <th att-table-header key="lastUpdaterUserId">Last Updated By</th>
+		            <th att-table-header key="toscaModelUrl">Tosca Model</th>
+		        </tr>
+		    </thead>
+		    <tbody att-table-row type="body" row-repeat="service in services">
+		        <tr>
+		        	<td att-table-body ><button type=button ng-click="deployService(service)" att-button btn-type="primary" size="small">Deploy</button></td>
+	            	<td att-table-body ng-bind="service['uuid']"></td>
+	            	<td att-table-body ng-bind="service['invariantUUID']"></td>
+	            	<td att-table-body ng-bind="service['name']"></td>
+	            	<td att-table-body ng-bind="service['version']"></td>
+	            	<td att-table-body ng-bind="service['category']"></td>
+	            	<td att-table-body ng-bind="service['distributionStatus']"></td>
+	            	<td att-table-body ng-bind="service['lastUpdaterUserId']"></td>
+	            	<td att-table-body ng-bind="service['toscaModelUrl']"></td>
+		        </tr>     
+		    </tbody>	  
+		</table>
+		<table width='100%'>
+			<tr>
+					<td width='33%' valign='middle'>
+						<span style="cursor: pointer" ng-if="currentPage>1"><button att-button size="small" ng-click="prevPage();">&lt; prev page</button></span>
+					</td>
+					<td width='33%' valign='middle'>
+						Jump to page:
+		          		<input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+		    			Results per page: <span style="cursor: pointer" ng-click="viewPerPage = 10" ng-style="viewPerPage === 10 && {'textDecoration':'underline','text-color':'black'}">10</span> 
+	    				| <span style="cursor: pointer" ng-click="viewPerPage = 25" ng-style="viewPerPage === 25 && {'textDecoration':'underline','text-color':'black'}">25</span> 
+	    				| <span style="cursor: pointer" ng-click="viewPerPage = 50" ng-style="viewPerPage === 50 && {'textDecoration':'underline','text-color':'black'}">50</span> 
+	    			</td>
+	    			<td width='34%' align='right' valign='middle'>
+	    			 	<span style="cursor: pointer" ng-if="currentPage<totalPage"><button att-button size="small" ng-click="nextPage();">next page &gt;</button></span>
+					</td>
+			</tr>
+		</table>
+		
+	</div>
+	</div>
+
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
new file mode 100755
index 0000000..0ac74a9
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
@@ -0,0 +1,64 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div ng-controller="creationDialogController">
+
+	<div ng-show="isDialogVisible">
+		<div class="titleLine">
+			<img src="app/vid/images/spinner.gif"
+				ngx-visible="{{isSpinnerVisible}}"></img>
+			<h3>Create {{componentName}} -- {{createType}}</h3>
+		</div>
+
+		<div class="error" ng-show="isErrorVisible">
+			<img src="app/vid/images/error.png"></img>{{error}}
+		</div>
+
+		<div ngx-visible="{{isDataVisible}}">
+			<parameter-block control="summaryControl"></parameter-block>
+			<h4>
+				User Provided Data (<img class="requiredIndicator"
+					src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)
+			</h4>
+			<parameter-block control="userProvidedControl"
+				callback="userParameterChanged(id);" editable></parameter-block>
+
+			<div class="prompt">
+				<p>
+					Enter Data and <span>Confirm</span> to<br />Create <span>{{componentName}}</span>
+				</p>
+				<p>
+					<span>Cancel</span> to Return to Previous Page.<br />Data entered
+					will be lost
+				</p>
+			</div>
+
+		</div>
+		<div class="buttonRow">
+			<button ngx-enabled="{{isConfirmEnabled}}" att-button size="small"
+				ng-click="confirm();">Confirm</button>
+			<button type="button" ng-click="cancel();" att-button
+				btn-type="primary" size="small">Cancel</button>
+		</div>
+	</div>
+
+	<div ng-include="'app/vid/scripts/view-models/msoCommit.htm'"></div>
+
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/deletionDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/deletionDialog.htm
new file mode 100755
index 0000000..b4b9316
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/deletionDialog.htm
@@ -0,0 +1,70 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div ng-controller="deletionDialogController">
+
+	<div ng-show="isDialogVisible">
+		<div class="titleLine">
+			<img src="app/vid/images/spinner.gif"
+				ngx-visible="{{isSpinnerVisible}}"></img>
+			<h3>Delete {{componentName}}</h3>
+		</div>
+
+		<div class="error" ng-show="isErrorVisible">
+			<img src="app/vid/images/error.png"></img>{{error}}
+		</div>
+
+      <parameter-block control="summaryControl"></parameter-block>
+      
+      <div ngx-visible="{{isDataVisible}}">
+		
+        <h4>
+				User Provided Data (<img class="requiredIndicator"
+					src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)
+			</h4>
+			<parameter-block control="userProvidedControl"
+				callback="userParameterChanged(id);" editable></parameter-block>
+
+			<div class="prompt">
+				<p>
+					Enter Data and <span>Confirm</span> to<br />Delete <span>{{componentName}}</span>
+				</p>
+				<p>
+					<span>Cancel</span> to Return to Previous Page.<br />Data entered
+					will be lost
+				</p>
+			</div>
+        </div>
+
+		<div class="buttonRow">
+			<!-- <button type="button" ng-click="confirm();" att-button
+				btn-type="primary" size="small" class="confirm">Confirm</button>
+			<button type="button" ng-click="cancel();" att-button
+				btn-type="primary" size="small">Cancel</button> --->
+			<button ngx-enabled="{{isConfirmEnabled}}" att-button size="small"
+				ng-click="confirm();">Confirm</button>
+			<button type="button" ng-click="cancel();" att-button
+				btn-type="primary" size="small">Cancel</button>
+		</div>
+	</div>
+
+	<div ng-include="'app/vid/scripts/view-models/msoCommit.htm'"></div>
+
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm
new file mode 100755
index 0000000..0e72e77
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm
@@ -0,0 +1,48 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div ng-controller="detailsDialogController" ng-show="isDialogVisible">
+
+	<div class="titleLine">
+		<img src="app/vid/images/spinner.gif"
+			ngx-visible="{{isSpinnerVisible}}"></img>
+		<h3>Service Instance Details</h3> <!-- {{componentName}} -->
+	</div>
+
+	<div class="error" ng-show="isErrorVisible">
+		<img src="app/vid/images/error.png"></img>{{error}}
+	</div>
+
+	<parameter-block control="summaryControl"></parameter-block>
+
+	<h4>{{componentName}} Details</h4>
+
+	<parameter-block control="detailsControl"></parameter-block>
+
+	<h4>Instantiation Transactions</h4>
+
+	<pre class="log">{{log}}</pre>
+
+	<div class="buttonRow">
+		<button type="button" ng-click="close();" att-button
+			btn-type="primary" size="small">Close</button>
+	</div>
+
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/instantiate.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/instantiate.htm
new file mode 100755
index 0000000..e4bb67f
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/instantiate.htm
@@ -0,0 +1,248 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div ng-controller="InstantiationController">
+
+    <div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"
+		ng-cloak>
+		<div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"></div>
+		<div ng-include="'app/vid/scripts/view-models/deletionDialog.htm'"></div>
+		<div ng-include="'app/vid/scripts/view-models/detailsDialog.htm'"></div>
+		<div ng-include="'app/vid/scripts/view-models/statusDialog.htm'"></div>
+	</div> 
+	<div ng-controller="aaiSubscriberController" ng-init="getComponentList() ">
+	<div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+			<img src="app/vid/images/spinner.gif"></img>
+			<label>Status:</label><span class="status">{{status}}</span>
+	</div>
+	
+	<div ng-if="errorMsg != null"><font color='red'>{{errorMsg}}<pre>{{errorDetails | json}}</pre></font></div>
+	
+			<h1 class="heading1" style="margin-top: 20px;">View/Edit Service Instance</h1>
+			<a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();" ><span class="glyphicon glyphicon-refresh"></span></a>
+		
+		<br>
+
+		<center>
+			<table att-table border="1" ng-model="service">
+				<tr>
+					<th style="text-align: center" width="33%">SUBSCRIBER:
+						{{service.instance.subscriberName}}</th>
+					<th style="text-align: center" width="34%">SERVICE TYPE:
+						{{service.instance.serviceType}}</th>
+					<th style="text-align: center" width="33%">SERVICE INSTANCE
+						ID: {{service.instance.serviceInstanceId}}</th>
+				<tr>
+				<tr>
+					<td colspan='3' style="text-align: center">Service Instance
+						Name: {{service.instance.name || "Not defined"}}
+					</td>
+				<tr>
+			</table>
+
+		</center>
+	
+	<div ui-tree data-drag-enabled="false" data-nodrop-enabled="true" style="margin: 30px">
+		
+		<ol ui-tree-nodes="" ng-model="service"  >
+			<li ng-repeat="aService in [service]" ui-tree-node>
+				<div ui-tree-handle class="tree-node tree-node-content">
+					<a class="btn btn-success btn-xs" ng-if="(aService.instance.vnfs && aService.instance.vnfs.length > 0) || (aService.instance.networks && aService.instance.networks.length > 0)" data-nodrag ng-click="this.toggle()">
+						<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+					</a>
+					SERVICE INSTANCE: {{aService.instance.name}}
+					<a ng-if="((isMacro()) || ( ( isObjectEmpty(aService.instance.vnfs) && isObjectEmpty(aService.instance.networks) ) ))" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteService(aService.instance);">
+						<span class="glyphicon glyphicon-remove"></span>
+					</a>
+					<div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs && (!(isObjectEmpty(aService.convertedModel.vnfs))) && (!(aService.convertedModel.isNewFlow))">
+					  <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						Add VNF<span class="caret"></span>
+					  </button>
+					  <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">
+					    <a role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs" ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}</a>
+					    	
+					  </ul>
+					</div>
+					<div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs && (!(isObjectEmpty(aService.convertedModel.vnfs))) && (aService.convertedModel.isNewFlow)">
+					  <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						Add VNF<span class="caret"></span>
+					  </button>
+					  <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">
+					    <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs">
+					    	<a ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}} {{vnf.nfType}} {{vnf.nfRole}} {{vnf.nfFunction}} {{vnf.nfCode}}</a>
+					    </li>
+					  </ul>
+					</div>
+					 <!--  <div class="pull-right btn-group" ng-if="aService.model.networks && !equals(aService.model.networks, {})">-->
+					 <div class="pull-right btn-group" ng-if="aService.convertedModel.networks && (!(isObjectEmpty(aService.convertedModel.networks)))">
+					 <!--<div class="pull-right btn-group" ng-if="aService.model.networks">-->
+					  <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+						Add Network<span class="caret"></span>
+					  </button>
+					  <ul class="dropdown-menu" ng-model="aService.convertedModel.networks">
+					    <li ng-repeat="(networkUuid, network) in aService.convertedModel.networks">
+					    	<a ng-click="addNetworkInstance(network, aService.instance.vnfs)">{{network.modelCustomizationName}}</a>
+					    </li>
+					  </ul>
+					</div>
+					<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeService(aService.instance)" style="margin-right: 8px;">
+						<span class="glyphicon glyphicon-info-sign"></span>
+					</a>
+				</div>
+				<ol ui-tree-nodes="" ng-model="aService.instance.vnfs" ng-class="{hidden: collapsed}">
+					<li ng-repeat="vnf in aService.instance.vnfs" ui-tree-node>
+						<div ui-tree-handle class="tree-node tree-node-content">
+							<a class="btn btn-success btn-xs" ng-if="(vnf.vfModules && vnf.vfModules.length > 0) || (vnf.volumeGroups && vnf.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">
+								<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+							</a>
+							VNF: {{vnf.name}} | TYPE: {{vnf.nodeType}} | ORCH STATUS: {{vnf.nodeStatus}}
+							<a ng-if="(vnf.vfModules.length == 0) && (vnf.volumeGroups.length == 0)" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVnf(aService.instance, vnf)">
+								<span class="glyphicon glyphicon-remove"></span>
+							</a>
+							<!--  <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs[vnf.object['model-invariant-id']][vnf.object['model-version-id']].vfModules">-->
+							<div class="pull-right btn-group" ng-if="(hasVfModules(vnf.object) && (aService.convertedModel.isNewFlow))">
+								
+							  <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								Add VF-Module<span class="caret"></span>
+							  </button>
+							  <ul class="dropdown-menu" ng-model="vfModule" >
+							    <a ng-repeat="(vfModuleCustomizationUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].vfModules" ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}} </a>
+							  </ul>
+							</div>
+						
+							
+							<div class="pull-right btn-group" ng-if="(hasVfModules(vnf.object) && (!(aService.convertedModel.isNewFlow)))">
+								
+							  <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								Add VF-Module<span class="caret"></span>
+							  </button>
+							  <ul class="dropdown-menu" ng-model="vnf">
+							    <a ng-repeat="(vfModuleUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-version-id']].vfModules" ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}}</a>
+							    </li>
+							  </ul>
+								
+							</div>
+				
+							<div class="pull-right btn-group" ng-if="(hasVolumeGroups(vnf.object) && (aService.convertedModel.isNewFlow))">
+								
+							  <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								Add Volume Group<span class="caret"></span>
+							  </button>
+							  <ul class="dropdown-menu" ng-model="volumeGroup" >
+							    <a ng-repeat="(volumeGroupCustomizationUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].volumeGroups" ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>
+							  </ul>
+							</div>
+				
+							<div class="pull-right btn-group" ng-if="(hasVolumeGroups(vnf.object) && (!(aService.convertedModel.isNewFlow)))">
+								
+							  <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+								Add Volume Group<span class="caret"></span>
+							  </button>
+							  <ul class="dropdown-menu" ng-model="vnf">
+							    <a ng-repeat="(volumeGroupUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-version-id']].volumeGroups" ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>
+							    </li>
+							  </ul>
+								
+							</div>
+							
+						    <!-- VID-374/378 - switching-off feature <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="getStatusOfVnf(aService.instance, vnf)" style="margin-right: 8px;">
+                                <span class="glyphicon glyphicon-exclamation-sign"></span>
+                            </a>  -->
+							<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">
+								<span class="glyphicon glyphicon-info-sign"></span>
+							</a>
+						</div>
+						<ol ui-tree-nodes="" ng-model="vnf.vfModules" ng-class="{hidden: collapsed}">
+							<li ng-repeat="vfModule in vnf.vfModules" ui-tree-node>
+								<div ui-tree-handle class="tree-node tree-node-content">
+									<a class="btn btn-success btn-xs" ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">
+										<span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+									</a>
+									VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS: {{vfModule.nodeStatus}}
+									<!--  -->
+									<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVfModule(aService.instance, vfModule, vnf)">
+										<span class="glyphicon glyphicon-remove"></span>
+									</a>
+									<div class="pull-right btn-group">
+									<!--   <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+										Attach Volume Group<span class="caret"></span>
+									  </button> 
+									  <ul class="dropdown-menu" ng-model="vnf.volumeGroups">
+									    <li ng-repeat="volumeGroup in vnf.availableVolumeGroups">
+									    	<a ng-click="attachVolumeGroupInstance(vfModule, volumeGroup)">{{volumeGroup.name}}</a>
+									    </li>
+									  </ul> -->
+									</div>
+									<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVfModule(aService.instance, vfModule, vnf)" style="margin-right: 8px;">
+										<span class="glyphicon glyphicon-info-sign"></span>
+									</a>
+								</div>
+								<ol ui-tree-nodes="" ng-model="vfModule.volumeGroups" ng-class="{hidden: collapsed}">
+									<li ng-repeat="volumeGroup in vfModule.volumeGroups" ui-tree-node>
+										<div ui-tree-handle class="tree-node tree-node-content">
+											VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}
+											<!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVolumeGroup(aService.instance, vnf, vfModule, volumeGroup)">
+												<span class="glyphicon glyphicon-remove"></span>
+											</a> -->
+											<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)" style="margin-right: 8px;">
+												<span class="glyphicon glyphicon-info-sign"></span>
+											</a>
+										</div>
+									</li>
+								</ol>
+							</li>
+						</ol>
+						<ol ui-tree-nodes="" ng-model="vnf.availableVolumeGroups" ng-class="{hidden: collapsed}">
+							<li ng-repeat="volumeGroup in vnf.availableVolumeGroups" ui-tree-node>
+								<div ui-tree-handle class="tree-node tree-node-content">
+									VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}
+									<a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVnfVolumeGroup(aService.instance, vnf, volumeGroup)">
+										<span class="glyphicon glyphicon-remove"></span>
+									</a>
+									<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)" style="margin-right: 8px;">
+										<span class="glyphicon glyphicon-info-sign"></span>
+									</a>
+								</div>
+							</li>
+						</ol>
+					</li>
+				</ol>
+				<ol ui-tree-nodes="" ng-model="aService.instance.networks" ng-class="{hidden: collapsed}">
+					<li ng-repeat="network in aService.instance.networks" ui-tree-node>
+						<div ui-tree-handle class="tree-node tree-node-content">
+							NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH	STATUS: {{network.nodeStatus}}
+							
+							<a class="pull-right btn btn-danger btn-xs" ng-if="(!isMacro())" data-nodrag ng-click="deleteNetwork(aService.instance, network)">
+								<span class="glyphicon glyphicon-remove"></span>
+							</a> 
+							 <!--  <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteNetwork(aService.instance, network)">
+								<span class="glyphicon glyphicon-remove"></span>
+							</a>-->
+							<a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeNetwork(aService.instance, network)" style="margin-right: 8px;">
+								<span class="glyphicon glyphicon-info-sign"></span>
+							</a>
+						</div>
+					</li>
+				</ol>
+			</li>
+		</ol>
+		</div>
+	</div>
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/msoCommit.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/msoCommit.htm
new file mode 100755
index 0000000..e3f415c
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/msoCommit.htm
@@ -0,0 +1,47 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div ng-controller="msoCommitController" ng-show="isViewVisible">
+
+	<div class="statusLine">
+		<img src="app/vid/images/spinner.gif"
+			ngx-visible="{{isSpinnerVisible}}"> </img> <label>Status:</label><span
+			class="status">{{status}}</span>
+	</div>
+
+	<div class="feedback">
+
+		<div progress-bar control="progressBarControl"
+			value="{{percentProgress}}" increases-only="true"
+			ngx-show="{{isProgressVisible}}"></div>
+
+		<div class="error" ng-show="!isProgressVisible">
+			<img src="app/vid/images/error.png"></img>{{error}}
+		</div>
+
+	</div>
+
+	<pre class="log">{{log}}</pre>
+
+	<div class="buttonRow">
+		<button ngx-enabled="{{isCloseEnabled}}" att-button size="small"
+			ng-click="close();">Close</button>
+	</div>
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/popupWindow.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/popupWindow.htm
new file mode 100755
index 0000000..b932f25
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/popupWindow.htm
@@ -0,0 +1,30 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div>
+<table
+	style="display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-collapse: collapse; margin: 0; padding: 0">
+	<tr>
+		<td align="center" style="vertical-align: top; padding: 10px"><div
+				style="display: inline-block; padding: 5px; background-color: white"
+				ng-transclude></div></td>
+	</tr>
+</table>
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm
new file mode 100755
index 0000000..c0a8ee5
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm
@@ -0,0 +1,91 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<link rel="stylesheet" type="text/css" href="app/vid/styles/serviceModels.css" />
+<div popup-window class="popupContents" ngx-show="{{popup.isVisible}}" ng-cloak>
+	<div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"/>
+</div>
+<div>
+
+	<span class="statusLine" ng-class="{true:'smcVisible', false:'smcHidden'}[isSpinnerVisible]">
+			<img src="app/vid/images/spinner.gif"></img>
+			</span>
+			<span class="statusLine" ng-class="{true:'progVisible', false:'progHidden'}[isProgressVisible]">
+			<label>Status:</label><span class="status"><span ng-show="error"><font color='red'><b>Error: </b></font></span>{{status}}</span>
+		</span>
+	<br><br>
+
+	<div class="fn-ebz-container">
+		         Filter:
+		          <input class="fn-ebz-text" type="text" ng-model="searchString" size="20" style="width: 250px;">
+	</div>
+
+	<h1 class="heading1" style="margin-top:20px;">Browse SDC Service Models</h1>
+	<div style="margin-top:30px" ng-init="getServiceModels();">
+		
+		<table att-table table-data="services" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		    <thead  att-table-row type="header">
+				<tr>
+					<th att-table-header key="action">Action</th>
+					<th att-table-header key="uuid">UUID</th>
+					<th att-table-header key="invariantUUID">Invariant UUID</th>
+					<th att-table-header default-sort="A" key="name">Name</th>
+		            <th att-table-header key="version">Version</th>
+		            <th att-table-header key="category">Category</th>
+		            <th att-table-header key="distributionStatus">Distribution Status</th>
+		            <th att-table-header key="lastUpdaterUserId">Last Updated By</th>
+		            <th att-table-header key="toscaModelUrl">Tosca Model</th>
+		        </tr>
+		    </thead>
+		    <tbody att-table-row type="body" row-repeat="service in services">
+		        <tr>
+		        	<td att-table-body ><button type=button ng-click="deployService(service)" att-button btn-type="primary" size="small">Deploy</button></td>
+	            	<td att-table-body ng-bind="service['uuid']"></td>
+	            	<td att-table-body ng-bind="service['invariantUUID']"></td>
+	            	<td att-table-body ng-bind="service['name']"></td>
+	            	<td att-table-body ng-bind="service['version']"></td>
+	            	<td att-table-body ng-bind="service['category']"></td>
+	            	<td att-table-body ng-bind="service['distributionStatus']"></td>
+	            	<td att-table-body ng-bind="service['lastUpdaterUserId']"></td>
+	            	<td att-table-body ng-bind="service['toscaModelUrl']"></td>
+		        </tr>     
+		    </tbody>	  
+		</table>
+		<table width='100%'>
+			<tr>
+					<td width='33%' valign='middle'>
+						<span style="cursor: pointer" ng-if="currentPage>1"><button att-button size="small" ng-click="prevPage();">&lt; prev page</button></span>
+					</td>
+					<td width='33%' valign='middle'>
+						Jump to page:
+		          		<input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+		    			Results per page: <span style="cursor: pointer" ng-click="viewPerPage = 10" ng-style="viewPerPage === 10 && {'textDecoration':'underline','text-color':'black'}">10</span> 
+	    				| <span style="cursor: pointer" ng-click="viewPerPage = 25" ng-style="viewPerPage === 25 && {'textDecoration':'underline','text-color':'black'}">25</span> 
+	    				| <span style="cursor: pointer" ng-click="viewPerPage = 50" ng-style="viewPerPage === 50 && {'textDecoration':'underline','text-color':'black'}">50</span> 
+	    			</td>
+	    			<td width='34%' align='right' valign='middle'>
+	    			 	<span style="cursor: pointer" ng-if="currentPage<totalPage"><button att-button size="small" ng-click="nextPage();">next page &gt;</button></span>
+					</td>
+			</tr>
+		</table>
+		
+	</div>
+	</div>
+
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/statusDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/statusDialog.htm
new file mode 100755
index 0000000..914516b
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/statusDialog.htm
@@ -0,0 +1,66 @@
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div ng-controller="statusDialogController" ng-show="isDialogVisible">
+
+	<div class="titleLine">
+		<img src="app/vid/images/spinner.gif"
+			ngx-visible="{{isSpinnerVisible}}"></img>
+		<h3>VNF Update Prov Status</h3> <!-- {{componentName}} -->
+	</div>
+
+	<div class="error" ng-show="isErrorVisible">
+		<img src="app/vid/images/error.png"></img>{{error}}
+	</div>
+
+   <div class="success" ng-show="isSuccessVisible">
+		<b><center><h3><font color="green">{{success}}</font></h3></center></b>
+	</div>
+	
+	<parameter-block control="summaryControl"></parameter-block>
+
+	<h4>{{componentName}} Status</h4>
+
+	<parameter-block control="detailsControl"></parameter-block>
+
+	<h4>
+				Modify Prov_Status: (<img class="requiredIndicator"
+					src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)
+			</h4>
+    <parameter-block control="userProvidedControl"
+				callback="userParameterChanged(id);" editable></parameter-block>
+
+			<div class="prompt">
+				<p>
+					Select Target Prov Status and <span>Submit</span> to<br />to Change the Prov Status of <span>{{componentName}}</span>
+				</p>
+				<p>
+					<span>Close</span> to Return to Previous Page.<br />
+				</p>
+			</div>
+			
+   	<div class="buttonRow">
+			<button ngx-enabled="{{isSubmitEnabled}}" att-button size="small"
+				ng-click="submit();">Submit</button>
+			<button ngx-enabled="{{isCancelEnabled}}" ng-click="cancel();" att-button
+				btn-type="primary" size="small">Close</button>
+		</div>
+
+</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/aaiGetSubs.css b/vid-app-common/src/main/webapp/app/vid/styles/aaiGetSubs.css
new file mode 100755
index 0000000..feabda8
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/aaiGetSubs.css
@@ -0,0 +1,62 @@
+div[ng-controller=aaiSubscriberController] .popupContents {
+	text-align: left;
+}
+
+div[ng-controller=aaiSubscriberController] .statusLine {
+	vertical-align: center;
+}
+
+div[ng-controller=aaiSubscriberController] .statusLine img {
+	width: 20px;
+	margin: 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .status {
+	margin-left: 5px;
+}
+
+div[ng-controller=aaiSubscriberController] .feedback {
+	height: 35px;
+	vertical-align: center;
+}
+
+div[ng-controller=aaiSubscriberController] .progress {
+	margin: 0px 10px;
+	font-weight: bold;
+}
+
+div[ng-controller=aaiSubscriberController] .error {
+	width: 630px;
+	font-weight: bold;
+	font-size: 16px;
+	color: red;
+	margin: 0px 10px 0px 45px;
+}
+
+div[ng-controller=aaiSubscriberController] .error img {
+	width: 25px;
+	margin: 0px 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .buttonRow {
+	text-align: center;
+	margin-bottom: 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .log {
+	width: 700px;
+	height: 500px;
+	border: solid black 1px;
+	text-align: left !important;
+	margin: 10px;
+	padding: 10px;
+	overflow: auto;
+}
+
+div[ng-controller=aaiSubscriberController] .aaiHidden {
+	visibility: hidden;
+}
+
+div[ng-controller=aaiSubscriberController] .aaiVisible {
+	visibility: visible;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/aaiSubDetails.css b/vid-app-common/src/main/webapp/app/vid/styles/aaiSubDetails.css
new file mode 100755
index 0000000..feabda8
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/aaiSubDetails.css
@@ -0,0 +1,62 @@
+div[ng-controller=aaiSubscriberController] .popupContents {
+	text-align: left;
+}
+
+div[ng-controller=aaiSubscriberController] .statusLine {
+	vertical-align: center;
+}
+
+div[ng-controller=aaiSubscriberController] .statusLine img {
+	width: 20px;
+	margin: 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .status {
+	margin-left: 5px;
+}
+
+div[ng-controller=aaiSubscriberController] .feedback {
+	height: 35px;
+	vertical-align: center;
+}
+
+div[ng-controller=aaiSubscriberController] .progress {
+	margin: 0px 10px;
+	font-weight: bold;
+}
+
+div[ng-controller=aaiSubscriberController] .error {
+	width: 630px;
+	font-weight: bold;
+	font-size: 16px;
+	color: red;
+	margin: 0px 10px 0px 45px;
+}
+
+div[ng-controller=aaiSubscriberController] .error img {
+	width: 25px;
+	margin: 0px 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .buttonRow {
+	text-align: center;
+	margin-bottom: 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .log {
+	width: 700px;
+	height: 500px;
+	border: solid black 1px;
+	text-align: left !important;
+	margin: 10px;
+	padding: 10px;
+	overflow: auto;
+}
+
+div[ng-controller=aaiSubscriberController] .aaiHidden {
+	visibility: hidden;
+}
+
+div[ng-controller=aaiSubscriberController] .aaiVisible {
+	visibility: visible;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/aaiSubViewEdit.css b/vid-app-common/src/main/webapp/app/vid/styles/aaiSubViewEdit.css
new file mode 100755
index 0000000..feabda8
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/aaiSubViewEdit.css
@@ -0,0 +1,62 @@
+div[ng-controller=aaiSubscriberController] .popupContents {
+	text-align: left;
+}
+
+div[ng-controller=aaiSubscriberController] .statusLine {
+	vertical-align: center;
+}
+
+div[ng-controller=aaiSubscriberController] .statusLine img {
+	width: 20px;
+	margin: 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .status {
+	margin-left: 5px;
+}
+
+div[ng-controller=aaiSubscriberController] .feedback {
+	height: 35px;
+	vertical-align: center;
+}
+
+div[ng-controller=aaiSubscriberController] .progress {
+	margin: 0px 10px;
+	font-weight: bold;
+}
+
+div[ng-controller=aaiSubscriberController] .error {
+	width: 630px;
+	font-weight: bold;
+	font-size: 16px;
+	color: red;
+	margin: 0px 10px 0px 45px;
+}
+
+div[ng-controller=aaiSubscriberController] .error img {
+	width: 25px;
+	margin: 0px 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .buttonRow {
+	text-align: center;
+	margin-bottom: 10px;
+}
+
+div[ng-controller=aaiSubscriberController] .log {
+	width: 700px;
+	height: 500px;
+	border: solid black 1px;
+	text-align: left !important;
+	margin: 10px;
+	padding: 10px;
+	overflow: auto;
+}
+
+div[ng-controller=aaiSubscriberController] .aaiHidden {
+	visibility: hidden;
+}
+
+div[ng-controller=aaiSubscriberController] .aaiVisible {
+	visibility: visible;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/angular-ui-tree.css b/vid-app-common/src/main/webapp/app/vid/styles/angular-ui-tree.css
new file mode 100755
index 0000000..8a0ea78
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/angular-ui-tree.css
@@ -0,0 +1,61 @@
+.angular-ui-tree {
+}
+
+.angular-ui-tree-empty {
+    border: 1px dashed #bbb;
+    min-height: 100px;
+    background-color: #e5e5e5;
+    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+    background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+    background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
+    background-size: 60px 60px;
+    background-position: 0 0, 30px 30px;
+    pointer-events: none;
+}
+
+.angular-ui-tree-nodes {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.angular-ui-tree-nodes .angular-ui-tree-nodes {
+    padding-left: 20px;
+}
+
+.angular-ui-tree-node, .angular-ui-tree-placeholder {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    min-height: 20px;
+    line-height: 20px;
+}
+
+.angular-ui-tree-hidden {
+    display: none;
+}
+
+.angular-ui-tree-placeholder {
+    margin: 5px 0;
+    padding: 0;
+    min-height: 30px;
+}
+
+.angular-ui-tree-handle {
+    cursor: move;
+    text-decoration: none;
+    font-weight: bold;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    min-height: 20px;
+    line-height: 20px;
+}
+
+.angular-ui-tree-drag {
+    position: absolute;
+    pointer-events: none;
+    z-index: 999;
+    opacity: .8;
+}
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/dialogs.css b/vid-app-common/src/main/webapp/app/vid/styles/dialogs.css
new file mode 100755
index 0000000..f199aaa
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/dialogs.css
@@ -0,0 +1,133 @@
+/*
+ * Common style sheet for the pop-up dialogs.
+ */
+
+/*
+ * Common style settings ...
+ */
+.popupContents .titleLine img {
+	float: left;
+	margin: 5px;
+	width: 20px;
+}
+
+.popupContents .titleLine>h3 {
+	display: inline-block;
+	padding-right: 40px;
+}
+
+.popupContents .requiredIndicator {
+	width: 14px;
+	padding-bottom: 5px;
+}
+
+.popupContents div[control=summaryControl] {
+	display: inline-block;
+	width: 600px;
+	margin: 0px 10px 10px 10px;
+}
+
+.popupContents div[control=detailsControl], .popupContents div[control=userProvidedControl]
+	{
+	display: inline-block;
+	border: solid black 1px;
+	margin: 10px;
+	padding: 10px;
+	max-height: 300px;
+	width: 600px;
+	overflow: auto;
+}
+
+.popupContents .prompt {
+	margin: 10px;
+}
+
+.popupContents .prompt p {
+	margin: 5px;
+}
+
+.popupContents .prompt span {
+	font-weight: bold;
+}
+
+.popupContents .statusLine {
+	vertical-align: center;
+}
+
+.popupContents .statusLine img {
+	width: 20px;
+	margin: 10px;
+}
+
+.popupContents .status {
+	margin-left: 5px;
+}
+
+.popupContents .feedback {
+	height: 35px;
+	vertical-align: center;
+}
+
+.popupContents .progress {
+	margin: 0px 10px;
+}
+
+.popupContents .error {
+	width: 630px;
+	text-align: left;
+	font-weight: bold;
+	font-size: 16px;
+	color: red;
+	margin: 0px 10px 0px 45px;
+	font-weight: bold;
+}
+
+.popupContents .error img {
+	width: 25px;
+	margin: 0px 10px;
+}
+
+.popupContents .buttonRow {
+	text-align: center;
+	margin-bottom: 10px;
+}
+
+.popupContents .log {
+	width: 700px;
+	height: 500px;
+	border: solid black 1px;
+	text-align: left !important;
+	margin: 10px;
+	padding: 10px;
+	overflow: auto;
+}
+
+::-webkit-input-placeholder {
+	text-align: center;
+}
+
+::-moz-placeholder {
+	text-align: center;
+}
+
+:-ms-input-placeholder {
+	text-align: center;
+}
+
+/*
+ * Styling for specific screens ...
+ */
+div[ng-controller=detailsDialogController] .log {
+	height: 200px;
+}
+
+/*
+ * Styling for specific screens ...
+ */
+div[ng-controller=statusDialogController] .log {
+	height: 200px;
+}
+
+div[ng-controller=msoCommitController] {
+	text-align: left;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/dummy.txt b/vid-app-common/src/main/webapp/app/vid/styles/dummy.txt
new file mode 100755
index 0000000..e69de29
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/dummy.txt
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/instantiate.css b/vid-app-common/src/main/webapp/app/vid/styles/instantiate.css
new file mode 100755
index 0000000..13e2cf0
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/instantiate.css
@@ -0,0 +1,62 @@
+div[ng-controller=InstantiationController] .popupContents {
+	text-align: left;
+}
+
+div[ng-controller=InstantiationController] .statusLine {
+	vertical-align: center;
+}
+
+div[ng-controller=InstantiationController] .statusLine img {
+	width: 20px;
+	margin: 10px;
+}
+
+div[ng-controller=InstantiationController] .status {
+	margin-left: 5px;
+}
+
+div[ng-controller=InstantiationController] .feedback {
+	height: 35px;
+	vertical-align: center;
+}
+
+div[ng-controller=InstantiationController] .progress {
+	margin: 0px 10px;
+	font-weight: bold;
+}
+
+div[ng-controller=InstantiationController] .error {
+	width: 630px;
+	font-weight: bold;
+	font-size: 16px;
+	color: red;
+	margin: 0px 10px 0px 45px;
+}
+
+div[ng-controller=InstantiationController] .error img {
+	width: 25px;
+	margin: 0px 10px;
+}
+
+div[ng-controller=InstantiationController] .buttonRow {
+	text-align: center;
+	margin-bottom: 10px;
+}
+
+div[ng-controller=InstantiationController] .log {
+	width: 700px;
+	height: 500px;
+	border: solid black 1px;
+	text-align: left !important;
+	margin: 10px;
+	padding: 10px;
+	overflow: auto;
+}
+
+div[ng-controller=InstantiationController] .aaiHidden {
+	visibility: hidden;
+}
+
+div[ng-controller=InstantiationController] .aaiVisible {
+	visibility: visible;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/serviceModels.css b/vid-app-common/src/main/webapp/app/vid/styles/serviceModels.css
new file mode 100755
index 0000000..0a64299
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/serviceModels.css
@@ -0,0 +1,70 @@
+div[ng-controller=ServiceModelController] .popupContents {
+	text-align: left;
+}
+
+div[ng-controller=ServiceModelController] .statusLine {
+	vertical-align: center;
+}
+
+div[ng-controller=ServiceModelController] .statusLine img {
+	width: 20px;
+	margin: 10px;
+}
+
+div[ng-controller=ServiceModelController] .status {
+	margin-left: 5px;
+}
+
+div[ng-controller=ServiceModelController] .feedback {
+	height: 35px;
+	vertical-align: center;
+}
+
+div[ng-controller=ServiceModelController] .progress {
+	margin: 0px 10px;
+	font-weight: bold;
+}
+
+div[ng-controller=ServiceModelController] .error {
+	width: 630px;
+	font-weight: bold;
+	font-size: 16px;
+	color: red;
+	margin: 0px 10px 0px 45px;
+}
+
+div[ng-controller=ServiceModelController] .error img {
+	width: 25px;
+	margin: 0px 10px;
+}
+
+div[ng-controller=ServiceModelController] .buttonRow {
+	text-align: center;
+	margin-bottom: 10px;
+}
+
+div[ng-controller=ServiceModelController] .log {
+	width: 700px;
+	height: 500px;
+	border: solid black 1px;
+	text-align: left !important;
+	margin: 10px;
+	padding: 10px;
+	overflow: auto;
+}
+
+div[ng-controller=ServiceModelController] .smcHidden {
+	visibility: hidden;
+}
+
+div[ng-controller=ServiceModelController] .smcVisible {
+	visibility: visible;
+}
+
+div[ng-controller=ServiceModelController] .progHidden {
+	visibility: hidden;
+}
+
+div[ng-controller=ServiceModelController] .progVisible {
+	visibility: visible;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/subscriberSearch.css b/vid-app-common/src/main/webapp/app/vid/styles/subscriberSearch.css
new file mode 100755
index 0000000..461de01
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/subscriberSearch.css
@@ -0,0 +1,8 @@
+div[ng-controller=aaiSubscriberSearchController] button {
+	width: 200px;
+	margin: 3px;
+}
+
+h3 {
+	margin-bottom: 5px;
+}
diff --git a/vid-app-common/src/main/webapp/app/vid/styles/vidTree.css b/vid-app-common/src/main/webapp/app/vid/styles/vidTree.css
new file mode 100755
index 0000000..1aec73d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/styles/vidTree.css
@@ -0,0 +1,67 @@
+
+.btn {
+    margin-right: 8px;
+}
+
+.angular-ui-tree-handle {
+    background: #f8faff;
+    border: 1px solid #dae2ea;
+    color: #7c9eb2;
+    padding: 10px 10px;
+}
+
+.angular-ui-tree-handle:hover {
+    color: #438eb9;
+    background: #f4f6f7;
+    border-color: #dce2e8;
+}
+
+.angular-ui-tree-placeholder {
+    background: #f0f9ff;
+    border: 2px dashed #bed2db;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+tr.angular-ui-tree-empty {
+    height:100px
+}
+
+.group-title {
+    background-color: #687074 !important;
+    color: #FFF !important;
+}
+
+
+/* --- Tree --- */
+.tree-node {
+    border: 1px solid #dae2ea;
+    background: #f8faff;
+    color: #7c9eb2;
+}
+
+.nodrop {
+    background-color: #f2dede;
+}
+
+.tree-node-content {
+    margin: 10px;
+}
+.tree-handle {
+    padding: 10px;
+    background: #428bca;
+    color: #FFF;
+    margin-right: 10px;
+}
+
+.angular-ui-tree-handle:hover {
+}
+
+.angular-ui-tree-placeholder {
+    background: #f0f9ff;
+    border: 2px dashed #bed2db;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/test/testAaiData.js b/vid-app-common/src/main/webapp/app/vid/test/testAaiData.js
new file mode 100755
index 0000000..95dd158
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/test/testAaiData.js
@@ -0,0 +1,254 @@
+var exampleServiceModelInfo = {
+    modelInvariantId : "SERVICE_INVARIANT_ID_c99-b43e0d88a9a1",
+    modelNameVersionId : "SERVICE_NAME_VERSION_ID-4d54-8548-5d0ed23e962b",
+    modelName : "SERVICE_NAME_DE220127",
+    modelVersion : "SERVICE_VERSION_0.1"
+};
+
+var exampleVnfModelInfo = {
+    modelInvariantId : "VNF_INVARIANT_ID_c99-b43e0d88a9a1",
+    modelNameVersionId : "VNF_NAME_VERSION_ID-4d54-8548-5d0ed23e962b",
+    modelName : "VNF_NAME_DE220127",
+    modelVersion : "VNF_VERSION_0.1"
+};
+
+var exampleVfModuleModelInfo = {
+    modelInvariantId : "VF_MODULE_INVARIANT_ID_c99-b43e0d88a9a1",
+    modelNameVersionId : "VF_MODULE_NAME_VERSION_ID-4d54-8548-5d0ed23e962b",
+    modelName : "VF_MODULE_NAME_DE220127",
+    modelVersion : "VF_MODULE_VERSION_0.1"
+};
+
+var exampleVolumeGroupModelInfo = {
+    modelInvariantId : "VOLUME_GROUP_INVARIANT_ID_c99-b43e0d88a9a1",
+    modelNameVersionId : "VOLUME_GROUP_NAME_VERSION_ID-4d54-8548-5d0ed23e962b",
+    modelName : "VOLUME_GROUP_NAME_DE220127",
+    modelVersion : "VOLUME_GROUP_VERSION_0.1"
+};
+
+var exampleAvailableVolumeGroupList = [ "Volume Group Alpha",
+	"Volume Group Baker", "Volume Group Charlie" ];
+
+var exampleNetworkModelInfo = {
+    modelInvariantId : "NETWORK_INVARIANT_ID_c99-b43e0d88a9a1",
+    modelNameVersionId : "NETWORK_NAME_VERSION_ID-4d54-8548-5d0ed23e962b",
+    modelName : "NETWORK_NAME_DE220127",
+    modelVersion : "NETWORK_VERSION_0.1"
+};
+
+var exampleCloudRegionTenantList = [ {
+    cloudRegionId : "LEGACYREGION",
+    tenantId : "ebe382f38e414b4dbf45b408c7e5bf9f",
+    tenantName : "vMOG-AKRON-123"
+}, {
+    cloudRegionId : "LEGACYREGION",
+    tenantId : "abcdefhi38e414b4dbf45b408c7e5bf9f",
+    tenantName : "tenant 2"
+}, {
+    cloudRegionId : "LEGACYREGION",
+    tenantId : "rstuvwzyx38e414b4dbf45b408c7e5bf9f",
+    tenantName : "tenant 3"
+}, {
+    cloudRegionId : "cloudR2",
+    tenantId : "jklmnop38e414b4dbf45b408c7e5bf9f",
+    tenantName : "tenant4"
+}, {
+    cloudRegionId : "cloudR2",
+    tenantId : "qurstuv38e414b4dbf45b408c7e5bf9f",
+    tenantName : "tenant 5"
+}, {
+    cloudRegionId : "cloudR3",
+    tenantId : "zyxw38e414b4dbf45b408c7e5bf9f",
+    tenantName : "tenant 6"
+} ];
+
+var exampleServiceIdList = [ {
+    id : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+    description : "Mobility"
+}, {
+    id : "e433710f-9217-458d-a79d-1c7aff376d89",
+    description : "VIRTUAL USP"
+}, {
+    id : "c7611ebe-c324-48f1-8085-94aef0c6ef3d",
+    description : "HOSTED COMMUNICATIONS"
+} ];
+
+var exampleServiceItem = {
+    "generic-service" : {
+	"service-id" : "415d4d6c-19e8-44ed-bd28-28d41c5b5185",
+	"service-name" : "ZRDM1MMSC01",
+	"service-type" : "vMMSC Svc Jul 12/vMMSC VOLUME VF new Jul 12 13",
+	"service-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+	"orchestration-status" : "active",
+	"in-maint" : false,
+	"is-closed-loop-disabled" : false,
+	"resource-version" : "1469558690",
+	"persona-model-id" : "1fe5c0e1-7ae8-4a3b-bf06-e64b9fa7e7c9",
+	"persona-model-version" : "1.0"
+    }
+};
+
+var exampleVfModuleItem = {
+    "generic-vfModule" : {
+	"vfModule-id" : "415d4d6c-19e8-44ed-bd28-28d41c5b5185",
+	"vfModule-name" : "ZRDM1MMSC01",
+	"vfModule-type" : "vMMSC Svc Jul 12/vMMSC VOLUME VF new Jul 12 13",
+	"vfModule-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+	"orchestration-status" : "active",
+	"in-maint" : false,
+	"is-closed-loop-disabled" : false,
+	"resource-version" : "1469558690",
+	"persona-model-id" : "1fe5c0e1-7ae8-4a3b-bf06-e64b9fa7e7c9",
+	"persona-model-version" : "1.0"
+    }
+};
+
+var exampleVolumeGroupItem = {
+    "generic-volumeGroup" : {
+	"volumeGroup-id" : "415d4d6c-19e8-44ed-bd28-28d41c5b5185",
+	"volumeGroup-name" : "ZRDM1MMSC01",
+	"volumeGroup-type" : "vMMSC Svc Jul 12/vMMSC VOLUME VF new Jul 12 13",
+	"volumeGroup-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+	"orchestration-status" : "active",
+	"in-maint" : false,
+	"is-closed-loop-disabled" : false,
+	"resource-version" : "1469558690",
+	"persona-model-id" : "1fe5c0e1-7ae8-4a3b-bf06-e64b9fa7e7c9",
+	"persona-model-version" : "1.0"
+    }
+};
+
+var exampleNetworkItem = {
+    "generic-network" : {
+	"network-id" : "415d4d6c-19e8-44ed-bd28-28d41c5b5185",
+	"network-name" : "ZRDM1MMSC01",
+	"network-type" : "vMMSC Svc Jul 12/vMMSC VOLUME VF new Jul 12 13",
+	"network-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+	"orchestration-status" : "active",
+	"in-maint" : false,
+	"is-closed-loop-disabled" : false,
+	"resource-version" : "1469558690",
+	"persona-model-id" : "1fe5c0e1-7ae8-4a3b-bf06-e64b9fa7e7c9",
+	"persona-model-version" : "1.0"
+    }
+};
+
+/*
+ * Sample query provided by Jimmy on 8/11/16.
+ */
+
+var exampleAaiResult = {
+    "service-instance" : {
+	"service-instance-id" : "mmsc-test-service-instance",
+	"resource-version" : "1470921501"
+    },
+    "extra-properties" : {},
+    "inventory-response-items" : {
+	"inventory-response-item" : [ {
+	    "generic-vnf" : {
+		"vnf-id" : "415d4d6c-19e8-44ed-bd28-28d41c5b5185",
+		"vnf-name" : "ZRDM1MMSC01",
+		"vnf-type" : "vMMSC Svc Jul 12/vMMSC VOLUME VF new Jul 12 13",
+		"service-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+		"orchestration-status" : "active",
+		"in-maint" : false,
+		"is-closed-loop-disabled" : false,
+		"resource-version" : "1469558690",
+		"persona-model-id" : "1fe5c0e1-7ae8-4a3b-bf06-e64b9fa7e7c9",
+		"persona-model-version" : "1.0"
+	    },
+	    "extra-properties" : {},
+	    "inventory-response-items" : {
+		"inventory-response-item" : [ {
+		    "vf-module" : {
+			"vf-module-id" : "4dd25057-0b2b-4255-b9cd-669443c9b470",
+			"vf-module-name" : "ZRDM1MMSC01_base",
+			"heat-stack-id" : "ZRDM1MMSC01_base/6261554c-6c34-4604-b91c-68afd148a096",
+			"orchestration-status" : "active",
+			"is-base-vf-module" : true,
+			"resource-version" : "1469559159",
+			"persona-model-id" : "6e3b9ac7-cb21-4f39-99ba-f248ba2a597a",
+			"persona-model-version" : "1"
+		    },
+		    "extra-properties" : {},
+		    "inventory-response-items" : {
+			"inventory-response-item" : [
+				{
+				    "l3-network" : {
+					"network-id" : "b13635a1-5ab8-4dee-9598-768a83eea099",
+					"network-name" : "MMS-24413-LAB-vMMSC-01_int_eca_mgmt_net_1",
+					"network-type" : "CONTRAIL_BASIC",
+					"network-role" : "int_eca_mgmt",
+					"network-technology" : "contrail",
+					"neutron-network-id" : "07919187-754f-49c2-abb3-9888cfd8ec7d",
+					"is-bound-to-vpn" : false,
+					"service-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+					"network-role-instance" : 0,
+					"resource-version" : "1469558694",
+					"orchestration-status" : "active",
+					"heat-stack-id" : "MMS-24413-LAB-vMMSC-01_int_eca_mgmt_net_1/8d34d139-c95f-4d80-86df-d7d13af01067"
+				    },
+				    "extra-properties" : {},
+				    "inventory-response-items" : {}
+				},
+				{
+				    "l3-network" : {
+					"network-id" : "44e0d9e0-9334-4ec6-9344-07a96dac629f",
+					"network-name" : "dmz_protected_net_0",
+					"network-type" : "CONTRAIL_EXTERNAL",
+					"network-role" : "dmz_protected",
+					"network-technology" : "contrail",
+					"neutron-network-id" : "1ad6b2c5-97d0-4298-b016-7e28939e0baf",
+					"is-bound-to-vpn" : false,
+					"service-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+					"resource-version" : "1469563787",
+					"orchestration-status" : "active",
+					"heat-stack-id" : "dmz_protected_net_0/3f93df5c-f4f1-484f-a269-12d3a6b1ec82"
+				    },
+				    "extra-properties" : {},
+				    "inventory-response-items" : {}
+				},
+				{
+				    "l3-network" : {
+					"network-id" : "ac49d99b-5daf-4624-9f8e-188b126ea166",
+					"network-name" : "cor_direct_net_0",
+					"network-type" : "CONTRAIL_BASIC",
+					"network-role" : "cor_direct",
+					"network-technology" : "contrail",
+					"neutron-network-id" : "ac49d99b-5daf-4624-9f8e-188b126ea166",
+					"is-bound-to-vpn" : false,
+					"service-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+					"network-role-instance" : 0,
+					"resource-version" : "1470846979",
+					"orchestration-status" : "active",
+					"heat-stack-id" : "",
+					"mso-catalog-key" : ""
+				    },
+				    "extra-properties" : {},
+				    "inventory-response-items" : {}
+				},
+				{
+				    "l3-network" : {
+					"network-id" : "c597ab81-fece-49f4-a4f5-710cebb13c29",
+					"network-name" : "oam_protected_net_0",
+					"network-type" : "CONTRAIL_BASIC",
+					"network-role" : "oam_protected",
+					"network-technology" : "contrail",
+					"neutron-network-id" : "c597ab81-fece-49f4-a4f5-710cebb13c29",
+					"is-bound-to-vpn" : false,
+					"service-id" : "a9a77d5a-123e-4ca2-9eb9-0b015d2ee0fb",
+					"network-role-instance" : 0,
+					"resource-version" : "1470846979",
+					"orchestration-status" : "active",
+					"heat-stack-id" : "",
+					"mso-catalog-key" : ""
+				    },
+				    "extra-properties" : {},
+				    "inventory-response-items" : {}
+				} ]
+		    }
+		} ]
+	    }
+	} ]
+    }
+};
diff --git a/vid-app-common/src/main/webapp/app/vid/test/testMso.css b/vid-app-common/src/main/webapp/app/vid/test/testMso.css
new file mode 100755
index 0000000..b0844ee
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/test/testMso.css
@@ -0,0 +1,22 @@
+div[ng-controller=testController] button {
+	width: 200px;
+	margin: 3px;
+}
+
+h3 {
+	margin-bottom: 5px;
+}
+
+ol, li {
+	list-style-type: decimal !important;
+}
+
+div[ng-controller=testController]>div>span {
+	font-size: 20px;
+	margin-left: 10px;
+}
+
+div[ng-controller=testController] input[type=checkbox] {
+	height: 20px;
+	width: 20px;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/test/testMso.js b/vid-app-common/src/main/webapp/app/vid/test/testMso.js
new file mode 100755
index 0000000..884ba8d
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/test/testMso.js
@@ -0,0 +1,486 @@
+"use strict";
+
+app.config(function($logProvider){
+    // Optionally set to "false" to disable debug logging.
+    $logProvider.debugEnabled(true);
+});
+
+app.controller("testController", [ "$scope", "$timeout", "$cookieStore", "$log", "COMPONENT", "DataService", "PropertyService",
+    function($scope, $timeout, $cookieStore, $log, COMPONENT, DataService, PropertyService) {
+
+		$scope.popup = new Object();
+		$scope.isTestMode = false;
+
+		$scope.init = function(properties) {
+	    		/*
+	    		 * These 2 statements should be included in non-test code.
+	    		 */
+			PropertyService.setMsoMaxPollingIntervalMsec(properties.msoMaxPollingIntervalMsec);
+			PropertyService.setMsoMaxPolls(properties.msoMaxPolls);
+
+			/*
+			 * "setTestMode" is only used for testing.
+			 */
+
+			setTestMode();
+			
+			DataService.setSubscriberName("Mobility");
+			DataService.setGlobalCustomerId("CUSTID12345")
+			DataService.setServiceType("Mobility Type 1");
+			DataService.setServiceName("Mobility Service 1");
+			DataService.setServiceInstanceId("mmsc-test-service-instance");
+			DataService.setVnfInstanceId("abcd-12345-56789");
+			DataService.setVfModuleInstanceId("xye-99990123213");
+		}
+		
+		var TEST_MODE_COOKIE = "isTestModeEnabled";
+
+		var defaultMsoBaseUrl = PropertyService.getMsoBaseUrl();
+
+		var setTestMode = function() {
+		    setTestMsoMode($cookieStore.get(TEST_MODE_COOKIE));
+		    PropertyService.setMsoMaxPollingIntervalMsec(1000);
+		    PropertyService.setMsoMaxPolls(7);
+		    PropertyService.setServerResponseTimeoutMsec(10000);
+		};
+
+		$scope.testMsoModeChanged = function() {
+		    setTestMsoMode($scope.isTestMsoMode);
+		};
+
+		var setTestMsoMode = function(isEnabled) {
+		    $scope.isTestMsoMode = isEnabled;
+		    $cookieStore.put(TEST_MODE_COOKIE, isEnabled);
+		    if (isEnabled) {
+			PropertyService.setMsoBaseUrl("testmso");
+		    } else {
+			PropertyService.setMsoBaseUrl(defaultMsoBaseUrl);
+		    }
+		}
+		
+		$scope.autoStartCommitTest = function() {
+			/*
+			 * Optionally comment in / out one of these method calls (or add a similar
+			 * entry) to auto-invoke an entry when the test screen is redrawn.
+			 */
+			$timeout(function() {
+				// $scope.createServiceInstance();
+				// $scope.deleteServiceInstance();
+				// $scope.generateInvalidUrl404();			
+			}, 500);
+		}
+		
+		$scope.autoStartQueryTest = function() {
+			/*
+			 * Optionally comment in / out one of these method calls (or add a similar
+			 * entry) to auto-invoke an entry when the test screen is redrawn.
+			 */
+			$timeout(function() {
+				// $scope.queryServiceInstance();
+			}, 500);
+		}
+		
+		$scope.queryServiceInstance = function() {
+			/*
+			 * Example of method call needed to show service instance details.
+			 */
+			$scope.$broadcast("showComponentDetails", {
+			    componentId : COMPONENT.SERVICE
+			});
+		}
+	
+		$scope.createServiceInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast("createInstance", {
+				url : "mso_create_svc_instance",
+				requestDetails : createServiceRequestDetails
+			});
+		}
+	
+		$scope.deleteServiceInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance deletion request.
+			 */
+			$scope.$broadcast("deleteInstance",	{
+				url : "mso_delete_svc_instance/bc305d54-75b4-431b-adb2-eb6b9e546014",
+				requestDetails : deleteServiceRequestDetails
+			});
+		}
+	
+		$scope.createVNFInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast("createInstance", {
+				url : "mso_create_vnf_instance/bc305d54-75b4-431b-adb2-eb6b9e546099",
+				requestDetails : createVnfRequestDetails
+			});
+		}
+	
+		$scope.deleteVNFInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance deletion request.
+			 */
+			$scope.$broadcast("deleteInstance",	{
+				url : "mso_delete_vnf_instance/bc305d54-75b4-431b-adb2-eb6b9e546014/vnfs/ab9000-0009-9999",
+				requestDetails : deleteVnfRequestDetails
+			});
+		}
+		
+		$scope.createVolumeGroupInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast("createInstance", {
+				url : "mso_create_volumegroup_instance/bc305d54-75b4-431b-adb2-eb6b9e546099/vnfs/fe305d54-75b4-431b-adb2-eb6b9e546fea",
+				requestDetails : createVolumeGroupRequestDetails
+			});
+		}
+	
+		$scope.deleteVolumeGroupInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance deletion request.
+			 */
+			$scope.$broadcast("deleteInstance",	{
+				url : "mso_delete_volumegroup_instance/bc305d54-75b4-431b-adb2-eb6b9e546014/vnfs/fe305d54-75b4-431b-adb2-eb6b9e546fea/volumeGroups/fe9000-0009-9999",
+				requestDetails : deleteVolumeGroupRequestDetails
+			});
+		}
+		$scope.createVFModuleInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance creation request.
+			 */
+			$scope.$broadcast("createInstance", {
+				url : "mso_create_vfmodule_instance/bc305d54-75b4-431b-adb2-eb6b9e546099/vnfs/111-111-111-111",
+				requestDetails : createVFModuleRequestDetails
+			});
+		}
+	
+		$scope.deleteVFModuleInstance = function() {
+			/*
+			 * Example of method call needed to commit an instance deletion request.
+			 * 
+			 */
+			$scope.$broadcast("deleteInstance",	{
+				url : "mso_delete_vfmodule_instance/2/vnfs/ab/vfModules/a1",
+				requestDetails : deleteVFModuleRequestDetails
+			});
+		}
+		$scope.createNetworkInstance = function() {
+			$scope.$broadcast("createInstance", {
+				url : "mso_create_nw_instance/789098877777",
+				requestDetails : createNetworkRequestDetails
+			});
+		}
+	
+		$scope.deleteNetworkInstance = function() {
+			$scope.$broadcast("deleteInstance",	{
+				url : "mso_delete_nw_instance/bc305d54-75b4-431b-adb2-eb6b9e546014/networks/ff305d54-75b4-ff1b-fff1-eb6b9e5460ff",
+				requestDetails : deleteNetworkRequestDetails
+			});
+		}
+	
+		$scope.generateError = function(testName) {
+			// Clone example request object
+			var request = JSON.parse(JSON.stringify(createServiceRequestDetails));
+			request.modelInfo.modelName = testName;
+			$scope.$broadcast("createInstance", {
+				url : "mso_create_svc_instance",
+				requestDetails : request
+			});
+		}
+	
+		$scope.generateInvalidUrl404 = function() {
+		    	var baseUrl = PropertyService.getMsoBaseUrl();
+		    	PropertyService.setMsoBaseUrl("/INVALID_STRING/");
+
+			$scope.$broadcast("createInstance", {
+				url : "mso_create_svc_instance",
+				requestDetails : createServiceRequestDetails,
+				callbackFunction : function() {
+				    PropertyService.setMsoBaseUrl(baseUrl);
+				    $scope.popup.isVisible = false;
+				}
+			});	
+		}
+	
+		$scope.generateInvalidUrl405 = function() {
+			$scope.$broadcast("createInstance", {
+				url : "INVALID_STRING_mso_create_svc_instance",
+				requestDetails : createServiceRequestDetails
+			});
+		}
+	
+		/*
+		 * Test data objects:
+		 */
+		/*var requestParameters = {
+				"subscriptionServiceType":"ef5256d1-5a33-aadf-13ab-12abad84e764",
+				"userParams":[{"name":"goldenr","value":"Willie"}, {"name":"lab","value":"Jackson"}, {"name":"goldend","value":"Max"}]} */
+		var requestParameters = { "subscriptionServiceType":"ef5256d1-5a33-aadf-13ab-12abad84e764", userParams:[] };
+		var requestInfo = {
+				instanceName: "sn5256d1-5a33-55df-13ab-12abad84e764",
+				productFamilyId: "sn5256d1-5a33-55df-13ab-12abad84edde",
+				source: "VID",
+				suppressRollback: true
+		};
+		var subscriberInfo = {
+			globalSubscriberId : "C12345",
+			subscriberName : "General Electric Division 12"
+		};
+	
+		var cloudConfiguration = {
+				lcpCloudRegionId: "cloudregion1",
+				tenantId: "df5256d1-5a33-55df-13ab-12abad843456"
+				
+		};
+		var createServiceRequestDetails = {
+			modelInfo : {
+				modelType : "service",
+				modelInvariantId : "sn5256d1-5a33-55df-13ab-12abad84e764",
+				modelNameVersionId : "ab6478e4-ea33-3346-ac12-ab121484adca",
+				modelName : "WanBonding",
+				modelVersion : "1",
+				modelCustomizationName: ""
+			},
+			subscriberInfo : subscriberInfo,
+			requestInfo : requestInfo,
+			requestParameters : requestParameters
+		};
+	
+		var deleteServiceRequestDetails = {
+				modelInfo : {
+					modelType : "service",
+					modelInvariantId : "sn5256d1-5a33-55df-13ab-12abad84e764",
+					modelNameVersionId : "ab6478e4-ea33-3346-ac12-ab121484adca",
+					modelName : "WanBonding",
+					modelVersion : "1",
+					modelCustomizationName: ""
+				},
+				requestInfo : requestInfo
+		};
+		
+		var createVFModuleRequestDetails = {
+				modelInfo : {
+					modelType : "VFModule",
+					modelInvariantId : "ab5256d1-5a33-55df-13ab-12abad84e764",
+					modelNameVersionId : "9b6478e4-ea33-3346-ac12-ab121484adc2",
+					modelName : "model1",
+					modelVersion : "1",
+					modelCustomizationName: ""
+				},
+				cloudConfiguration: cloudConfiguration,
+				requestInfo : requestInfo,
+				relatedInstanceList: [
+										{
+										    relatedInstance: {
+										       instanceId: "c3514e3-5a33-55df-13ab-12abad84e7cc",
+										       modelInfo: {   
+										          modelType: "volumeGroup",
+										          modelInvariantId: "ff3514e3-5a33-55df-13ab-12abad84e7ff",
+										          modelNameVersionId: "fe6985cd-ea33-3346-ac12-ab121484a3fe",
+										          modelName: "parentServiceModelName",
+										          modelVersion: "1.0"
+										       }
+										    }
+										 },
+				                        {
+				                           relatedInstance: {
+				                              instanceId: "c3514e3-5a33-55df-13ab-12abad84e7cc",
+				                              modelInfo: {   
+				                                 modelType: "service",
+				                                 modelInvariantId: "ff3514e3-5a33-55df-13ab-12abad84e7ff",
+				                                 modelNameVersionId: "fe6985cd-ea33-3346-ac12-ab121484a3fe",
+				                                 modelName: "parentServiceModelName",
+				                                 modelVersion: "1.0"
+				                              }
+				                           }
+				                        },
+				                        {
+				                           relatedInstance: {
+				                              instanceId: "fab256d1-5a33-55df-13ab-12abad8445ff34",
+				                              modelInfo: {
+				                                 modelType: "vnf",
+				                                 modelInvariantId: "ff5256d1-5a33-55df-13ab-12abad84e7ff",
+				                                 modelNameVersionId: "fe6478e4-ea33-3346-ac12-ab121484a3fe",
+				                                 modelName: "vSAMP12",
+				                                 modelVersion: "1.0",
+				                                 modelCustomizationName: "vSAMP12 1"
+				                              }
+				                           }
+				                        }
+
+				                     ],
+				                     requestParameters : requestParameters
+			};
+		
+			var deleteVFModuleRequestDetails = {
+					modelInfo : {
+						modelType : "VFModule",
+						modelInvariantId : "ab5256d1-5a33-55df-13ab-12abad84e764",
+						modelNameVersionId : "9b6478e4-ea33-3346-ac12-ab121484adc2",
+						modelName : "model1",
+						modelVersion : "1",
+						modelCustomizationName: ""
+					},
+					cloudConfiguration: cloudConfiguration,
+					requestInfo : requestInfo,
+					
+			};
+			
+		var createVnfRequestDetails = {
+				modelInfo : {
+					modelType : "vnf",
+					modelInvariantId : "ab5256d1-5a33-55df-13ab-12abad84efc2",
+					modelNameVersionId : "9b6478e4-ea33-3346-ac12-ab1214847890",
+					modelName : "model1",
+					modelVersion : "1",
+					modelCustomizationName: ""
+				},
+				requestInfo : requestInfo,
+				cloudConfiguration : cloudConfiguration,
+				relatedInstanceList: [
+					{
+					    relatedInstance: {
+					       instanceId: "c3514e3-5a09-55df-13ab-1babad84e7cc",
+					       modelInfo: {   
+					          modelType: "service",
+					          modelInvariantId: "ff3514e3-5a33-55df-13ab-12abad84e7ff",
+					          modelNameVersionId: "fe6985cd-ea33-3346-ac12-ab121484a3fe",
+					          modelName: "parentServiceModelName",
+					          modelVersion: "1.0"
+					       }
+					    }
+					 }
+					]
+			};
+		
+			var deleteVnfRequestDetails = {
+					modelInfo : {
+						modelType : "vnf",
+						modelInvariantId : "ab5256d1-5a33-55df-13ab-12abad84efc2",
+						modelNameVersionId : "9b6478e4-ea33-3346-ac12-ab1214847890",
+						modelName : "model1",
+						modelVersion : "1",
+						modelCustomizationName: ""
+					},
+					cloudConfiguration : cloudConfiguration,
+					requestInfo : requestInfo	
+			};
+			var createVolumeGroupRequestDetails = {
+				modelInfo : {
+						modelType : "volumeGroup",
+						modelInvariantId : "ab5256d1-5a33-55df-13ab-12abad84efda",
+						modelNameVersionId : "9b6478e4-ea33-3346-ac12-ab12148478fa",
+						modelName : "model1",
+						modelVersion : "1",
+						modelCustomizationName: ""
+					},
+					cloudConfiguration : cloudConfiguration,
+					requestInfo : requestInfo,
+					relatedInstanceList: [
+                      {
+                    	  relatedInstance: {
+                    		  instanceId: "c3514e3-5a33-55df-13ab-12abad84e7cc",
+                    		  modelInfo: {   
+                    			  modelType: "service",
+                    			  modelInvariantId: "ff3514e3-5a33-55df-13ab-12abad84e7ff",
+                    			  modelNameVersionId: "fe6985cd-ea33-3346-ac12-ab121484a3fe",
+                    			  modelName: "parentServiceModelName",
+                    			  modelVersion: "1.0"
+                    		  }
+                    	  }
+                      },
+                      {
+                    	  relatedInstance: {
+                    		  instanceId: "fab256d1-5a33-55df-13ab-12abad8445ff34",
+                    		  modelInfo: {
+                    			  modelType: "vnf",
+                    			  modelInvariantId: "ff5256d1-5a33-55df-13ab-12abad84e7ff",
+                    			  modelNameVersionId: "fe6478e4-ea33-3346-ac12-ab121484a3fe",
+                    			  modelName: "vSAMP12",
+                    			  modelVersion: "1.0",
+                    			  modelCustomizationName: "vSAMP12 1"
+                    		  }
+                    	  }
+                      }
+                      ]
+
+				};
+			
+				var deleteVolumeGroupRequestDetails = {
+					modelInfo : {
+						modelType : "volumeGroup",
+						modelInvariantId : "ab5256d1-5a33-55df-13ab-12abad84efda",
+						modelNameVersionId : "9b6478e4-ea33-3346-ac12-ab12148478fa",
+						modelName : "vIsbcOamNetwork",
+						modelVersion : "1",
+						modelCustomizationName: ""
+					},
+					cloudConfiguration : cloudConfiguration,
+					requestInfo : requestInfo
+				};
+			
+		var createNetworkRequestDetails = {
+			modelInfo : {
+				modelType : "network",
+				modelInvariantId : "ab5256d1-5a33-55df-13ab-12abad84e890",
+				modelNameVersionId : "fe6478e4-ea33-3346-aaaa-ab121484a3fa",
+				modelName : "vIsbcOamNetwork",
+				modelVersion : "1",
+				modelCustomizationName: ""
+			},
+			cloudConfiguration: cloudConfiguration,
+			requestInfo : requestInfo
+		};
+	
+		var deleteNetworkRequestDetails = {
+			modelInfo : {
+				modelType : "network",
+				modelId : "ff5256d1-5a33-55df-aaaa-12abad84e7ff",
+				modelNameVersionId : "fe6478e4-ea33-3346-aaaa-ab121484a3fe",
+				modelName : "vIsbcOamNetwork",
+				modelVersion : "1"
+			},
+			relatedModelList : [
+					{
+						relatedModel : {
+							instanceId : "ff305d54-75b4-431b-adb2-eb6b9e5ff000",
+							modelInfo : {
+								modelType : "service",
+								modelId : "ff3514e3-5a33-55df-13ab-12abad84e7ff",
+								modelNameVersionId : "fe6985cd-ea33-3346-ac12-ab121484a3fe",
+								modelName : "Intercarrier Interconnect Session Border Controller",
+								modelVersion : "1"
+							}
+						}
+					},
+					{
+						relatedModel : {
+							instanceId : "ff305d54-75b4-ff1b-adb2-eb6b9e5460ff",
+							modelInfo : {
+								modelType : "vnf",
+								modelId : "ff5256d1-5a33-55df-13ab-12abad84e7ff",
+								modelNameVersionId : "fe6478e4-ea33-3346-ac12-ab121484a3fe",
+								modelName : "vIsbc",
+								modelVersion : "1"
+							}
+						}
+					},
+					{
+						relatedModel : {
+							instanceId : "ff305d54-75b4-ff1b-bdb2-eb6b9e5460ff",
+							modelInfo : {
+								modelType : "vfModule",
+								modelId : "ff5256d1-5a33-55df-13ab-22abad84e7ff",
+								modelNameVersionId : "fe6478e4-ea33-3346-bc12-ab121484a3fe",
+								modelName : "vIsbcRtpExpansionModule",
+								modelVersion : "1"
+							}
+						}
+					} ]
+		};
+	}
+]);
diff --git a/vid-app-common/src/main/webapp/app/vid/test/testViewEdit.css b/vid-app-common/src/main/webapp/app/vid/test/testViewEdit.css
new file mode 100755
index 0000000..0dfb450
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/test/testViewEdit.css
@@ -0,0 +1,30 @@
+div[ng-controller=testViewEditController] button {
+	width: 120px;
+}
+
+div[ng-controller=testViewEditController]>table {
+	border: solid black 1px;
+	width: auto;
+}
+
+div[ng-controller=testViewEditController]>table td {
+	border: solid black 1px;
+}
+
+h3 {
+	margin-bottom: 5px;
+}
+
+ol, li {
+	list-style-type: decimal !important;
+}
+
+div[ng-controller=testViewEditController]>div>span {
+	font-size: 20px;
+	margin-left: 10px;
+}
+
+div[ng-controller=testViewEditController] input[type=checkbox] {
+	height: 20px;
+	width: 20px;
+}
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/test/testViewEdit.js b/vid-app-common/src/main/webapp/app/vid/test/testViewEdit.js
new file mode 100755
index 0000000..73da4db
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/test/testViewEdit.js
@@ -0,0 +1,376 @@
+"use strict";
+
+app.config(function($logProvider) {
+    // Optionally set to "false" to disable debug logging.
+    $logProvider.debugEnabled(true);
+});
+
+var testViewEditController = function(COMPONENT, DataService, PropertyService,
+	UtilityService, $scope, $timeout, $cookieStore, $log) {
+
+    $scope.popup = new Object();
+    $scope.isTestMode = false;
+
+    $scope.init = function(properties) {
+
+	/*
+	 * These 2 statements should be included in non-test code.
+	 */
+	PropertyService
+		.setMsoMaxPollingIntervalMsec(properties.msoMaxPollingIntervalMsec);
+	PropertyService.setMsoMaxPolls(properties.msoMaxPolls);
+
+	/*
+	 * Common parameters that shows an example of how the view edit screen
+	 * is expected to pass some common service instance values to the
+	 * popups.
+	 */
+
+	DataService.setSubscriberName("Mobility");
+	DataService.setGlobalCustomerId("CUSTID12345")
+	DataService.setServiceType("Mobility Type 1");
+	DataService.setServiceInstanceName("Example Service Instance Name");
+	DataService.setServiceName("Mobility Service 1");
+	DataService.setServiceInstanceId("mmsc-test-service-instance");
+	DataService.setServiceUuid("XXXX-YYYY-ZZZZ");
+	DataService.setUserServiceInstanceName("USER_SERVICE_INSTANCE_NAME");
+
+	/*
+	 * "setTestMode" is only used for testing.
+	 */
+
+	setTestMode();
+
+    }
+
+    $scope.autoStartTest = function() {
+	/*
+	 * Optionally comment in / out one of these method calls (or add a
+	 * similar entry) to auto-invoke an entry as soon as the page is
+	 * refreshed.
+	 */
+	$timeout(function() {
+	    // $scope.showServiceDetails();
+	    // $scope.showVnfDetails();
+	    // $scope.createService();
+	    // $scope.deleteService();
+	    // $scope.createNetwork();
+	    // $scope.createVnf();
+	    // $scope.createVfModule();
+	    // $scope.deleteVnf();
+	    // $scope.createVfModule();
+	}, 500);
+    }
+
+    /*
+     * This block of code is only used for testing.
+     */
+
+    /*
+     * The first 3 functions override default values set in the server
+     * properties file.
+     * 
+     * 1) The URL for the MSO controller is set to either the "real" controller
+     * or the test version depending on the "Use test MSO controller" checkbox.
+     * 
+     * 2) SDC and AAI are set to use test controller versions.
+     * 
+     * 3) Maximum polling and timeout values are set to lower values to lessen
+     * the time required to run tests.
+     * 
+     */
+
+    var TEST_MODE_COOKIE = "isTestModeEnabled";
+
+    var defaultMsoBaseUrl = PropertyService.getMsoBaseUrl();
+
+    var setTestMode = function() {
+	setTestMsoMode($cookieStore.get(TEST_MODE_COOKIE));
+	PropertyService.setAaiBaseUrl("testaai");
+	PropertyService.setAsdcBaseUrl("testasdc");
+	PropertyService.setMsoMaxPollingIntervalMsec(1000);
+	PropertyService.setMsoMaxPolls(7);
+	PropertyService.setServerResponseTimeoutMsec(10000);
+    };
+
+    $scope.testMsoModeChanged = function() {
+	setTestMsoMode($scope.isTestMsoMode);
+    };
+
+    var setTestMsoMode = function(isEnabled) {
+	$scope.isTestMsoMode = isEnabled;
+	$cookieStore.put(TEST_MODE_COOKIE, isEnabled);
+	if (isEnabled) {
+	    PropertyService.setMsoBaseUrl("testmso");
+	} else {
+	    PropertyService.setMsoBaseUrl(defaultMsoBaseUrl);
+	}
+    };
+
+    var callbackFunction = function(response) {
+	$scope.callbackResults = "";
+	var color = "none";
+	$scope.callbackStyle = {
+	    "background-color" : color
+	};
+	/*
+	 * This 1/2 delay was only added to visually highlight the status
+	 * change. Probably not needed in the real application code.
+	 */
+	$timeout(function() {
+	    $scope.callbackResults = UtilityService.getCurrentTime()
+		    + " isSuccessful: " + response.isSuccessful;
+	    if (response.isSuccessful) {
+		color = "#8F8";
+	    } else {
+		color = "#F88";
+	    }
+	    $scope.callbackStyle = {
+		"background-color" : color
+	    };
+	}, 500);
+    };
+
+    /*
+     * End of block of test-specific code
+     */
+
+    /*
+     * Create functions
+     */
+    $scope.createService = function() {
+
+	DataService.setModelId("91238134091820938018230918230989");
+
+	$scope.$broadcast("createComponent", {
+	    componentId : COMPONENT.SERVICE,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.createVnf = function() {
+
+	DataService.setModelId("91238134091820938018230918230989");
+	DataService.setModelInstanceName("VNF_MODEL_INSTANCE_NAME");
+
+	DataService.setCloudRegionTenantList(exampleCloudRegionTenantList)
+	DataService.setServiceIdList(exampleServiceIdList);
+
+	// Data used to create MSO "relatedInstanceList" object
+
+	DataService.setModelInfo(COMPONENT.SERVICE, exampleServiceModelInfo);
+
+	$scope.$broadcast("createComponent", {
+	    componentId : COMPONENT.VNF,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.createVfModule = function() {
+	DataService
+		.setInventoryItem(exampleAaiResult["inventory-response-items"][0]);
+
+	DataService.setModelId("91238134091820938018230918230989");
+	DataService.setModelInstanceName("VF_MODULE_MODEL_INSTANCE_NAME");
+
+	DataService.setLcpRegion("Region2");
+	DataService.setTenant("Tenant2");
+	// Data used to create MSO "relatedInstanceList" object
+
+	DataService.setModelInfo(COMPONENT.SERVICE, exampleServiceModelInfo);
+
+	DataService.setVnfInstanceId("VNF_INSTANCE_ID_12345");
+	DataService.setModelInfo(COMPONENT.VNF, exampleVnfModelInfo);
+
+	DataService.setVolumeGroupInstanceId("VOLUME_GROUP_INSTANCE_ID_12345");
+	DataService
+		.setAvailableVolumeGroupList(exampleAvailableVolumeGroupList);
+	DataService.setModelInfo(COMPONENT.VOLUME_GROUP,
+		exampleVolumeGroupModelInfo);
+
+	$scope.$broadcast("createComponent", {
+	    componentId : COMPONENT.VF_MODULE,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.createVolumeGroup = function() {
+
+	DataService.setModelId("91238134091820938018230918230989");
+	DataService.setModelInstanceName("VOLUME_GROUP_MODEL_INSTANCE_NAME");
+	DataService.setLcpRegion("Region1");
+	DataService.setTenant("Tenant1");
+	// Data used to create MSO "relatedInstanceList" object
+
+	DataService.setModelInfo(COMPONENT.SERVICE, exampleServiceModelInfo);
+
+	DataService.setVnfInstanceId("VNF_INSTANCE_ID_12345");
+	DataService.setModelInfo(COMPONENT.VNF, exampleVnfModelInfo);
+
+	$scope.$broadcast("createComponent", {
+	    componentId : COMPONENT.VOLUME_GROUP,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.createNetwork = function() {
+
+	DataService.setModelId("91238134091820938018230918230989");
+	DataService.setModelInstanceName("NETWORK_MODEL_INSTANCE_NAME");
+
+	DataService.setCloudRegionTenantList(exampleCloudRegionTenantList)
+	DataService.setServiceIdList(exampleServiceIdList);
+
+	// Data used to create MSO "relatedInstanceList" object
+
+	DataService.setModelInfo(COMPONENT.SERVICE, exampleServiceModelInfo);
+
+	$scope.$broadcast("createComponent", {
+	    componentId : COMPONENT.NETWORK,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    /*
+     * Delete functions
+     */
+    $scope.deleteService = function() {
+
+	DataService.setInventoryItem(exampleServiceItem);
+
+	DataService.setModelInfo(COMPONENT.SERVICE, exampleServiceModelInfo);
+
+	$scope.$broadcast("deleteComponent", {
+	    componentId : COMPONENT.SERVICE,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.deleteVnf = function() {
+
+	DataService
+		.setInventoryItem(exampleAaiResult["inventory-response-items"]["inventory-response-item"][0]);
+
+	DataService.setVnfInstanceId("VNF_INSTANCE_ID_12345");
+	DataService.setModelInfo(COMPONENT.VNF, exampleVnfModelInfo);
+	DataService.setLcpRegion("Region3");
+	DataService.setTenant("Tenant3");
+
+	$scope.$broadcast("deleteComponent", {
+	    componentId : COMPONENT.VNF,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.deleteVfModule = function() {
+
+	DataService.setInventoryItem(exampleVfModuleItem);
+
+	DataService.setVnfInstanceId("VNF_INSTANCE_ID_12345");
+
+	DataService.setVfModuleInstanceId("VF_MODULE_INSTANCE_ID_12345");
+	DataService.setModelInfo(COMPONENT.VF_MODULE, exampleVfModuleModelInfo);
+	DataService.setLcpRegion("Region4");
+	DataService.setTenant("Tenant4");
+
+	$scope.$broadcast("deleteComponent", {
+	    componentId : COMPONENT.VF_MODULE,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.deleteVolumeGroup = function() {
+
+	DataService.setInventoryItem(exampleVolumeGroupItem);
+
+	DataService.setVolumeGroupInstanceId("VOLUME_GROUP_INSTANCE_ID_12345");
+	DataService.setModelInfo(COMPONENT.VOLUME_GROUP,
+		exampleVolumeGroupModelInfo);
+	DataService.setLcpRegion("Region3");
+	DataService.setTenant("Tenant3");
+
+
+	$scope.$broadcast("deleteComponent", {
+	    componentId : COMPONENT.VOLUME_GROUP,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.deleteNetwork = function() {
+
+	DataService.setInventoryItem(exampleNetworkItem);
+
+	DataService.setNetworkInstanceId("NETWORK_INSTANCE_ID_12345");
+	DataService.setModelInfo(COMPONENT.NETWORK, exampleNetworkModelInfo);
+	DataService.setLcpRegion("Region5");
+	DataService.setTenant("Tenant5");
+
+	$scope.$broadcast("deleteComponent", {
+	    componentId : COMPONENT.NETWORK,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    /*
+     * Show Details functions
+     */
+    $scope.showServiceDetails = function() {
+
+	DataService.setInventoryItem(exampleServiceItem);
+
+	$scope.$broadcast("showComponentDetails", {
+	    componentId : COMPONENT.SERVICE,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.showVnfDetails = function() {
+
+	DataService.setVnfInstanceId("VNF_INSTANCE_ID_12345");
+	DataService
+		.setInventoryItem(exampleAaiResult["inventory-response-items"]["inventory-response-item"][0]);
+
+	$scope.$broadcast("showComponentDetails", {
+	    componentId : COMPONENT.VNF,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.showVfModuleDetails = function() {
+
+	DataService.setVnfInstanceId("VNF_INSTANCE_ID_12345");
+	DataService.setVfModuleInstanceId("VF_MODULE_INSTANCE_ID_12345");
+	DataService.setInventoryItem(exampleVfModuleItem);
+
+	$scope.$broadcast("showComponentDetails", {
+	    componentId : COMPONENT.VF_MODULE,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.showVolumeGroupDetails = function() {
+
+	DataService.setVolumeGroupInstanceId("VOLUME_GROUP_INSTANCE_ID_12345");
+	DataService.setInventoryItem(exampleVolumeGroupItem);
+
+	$scope.$broadcast("showComponentDetails", {
+	    componentId : COMPONENT.VOLUME_GROUP,
+	    callbackFunction : callbackFunction
+	});
+    }
+
+    $scope.showNetworkDetails = function() {
+
+	DataService.setNetworkInstanceId("NETWORK_INSTANCE_ID_12345");
+	DataService.setInventoryItem(exampleNetworkItem);
+
+	$scope.$broadcast("showComponentDetails", {
+	    componentId : COMPONENT.NETWORK,
+	    callbackFunction : callbackFunction
+	});
+    }
+}
+
+app.controller("testViewEditController", [ "COMPONENT", "DataService",
+	"PropertyService", "UtilityService", "$scope", "$timeout",
+	"$cookieStore", "$log", testViewEditController ]);
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/index.jsp b/vid-app-common/src/main/webapp/index.jsp
new file mode 100755
index 0000000..056f209
--- /dev/null
+++ b/vid-app-common/src/main/webapp/index.jsp
@@ -0,0 +1,5 @@
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+
+<%-- Redirected because we can't set the welcome page to a virtual URL. --%>
+<%-- Forward to the intended start page to reduce frustration for new users. --%> 
+<c:redirect url="/login.htm"></c:redirect>
diff --git a/vid-app-common/src/main/webapp/test.jsp b/vid-app-common/src/main/webapp/test.jsp
new file mode 100755
index 0000000..1b0c14a
--- /dev/null
+++ b/vid-app-common/src/main/webapp/test.jsp
@@ -0,0 +1,29 @@
+<html>
+<head><title>Test VID Properties related to MSO </title></head>
+<!-- This is a temporary test page. It will be removed from source control -->
+<body>
+<%@ page import="org.openecomp.portalsdk.core.util.SystemProperties" %>
+<%@ page import="org.openecomp.vid.controller.MsoController" %>
+<%@ page import="org.openecomp.vid.mso.rest.Request" %>
+<%@ page import="org.openecomp.vid.mso.rest.RequestDetails" %>
+<%@ page import="org.openecomp.vid.mso.rest.RelatedModel" %>
+<%@ page import="org.openecomp.vid.domain.mso.SubscriberInfo" %>
+<%@ page import="org.openecomp.vid.domain.mso.Response" %>
+<%@ page import="org.openecomp.vid.domain.mso.ModelInfo" %>
+<%@ page import="org.openecomp.vid.domain.mso.RequestInfo" %>
+<%@ page import="org.openecomp.vid.domain.mso.CloudConfiguration" %>
+<%@ page import="org.openecomp.vid.mso.MsoProperties" %>
+<%@ page import="java.net.URI" %>
+<%@ page import="com.sun.jersey.api.client.ClientResponse" %>
+  <%
+  String url = SystemProperties.getProperty(MsoProperties.MSO_SERVER_URL);
+  String max_polls = SystemProperties.getProperty(MsoProperties.MSO_MAX_POLLS);
+  String max_polling_interval_msecs = SystemProperties.getProperty(MsoProperties.MSO_POLLING_INTERVAL_MSECS);
+  %>
+  	<h2>VID properties related to MSO:</h2>
+      <h3>MSO server URL:</h3><p>"<%= url %>"</p>
+      <h3>MSO max number of polls:</h3><p>"<%= max_polls %>"</p>
+      <h3>MSO polling interval (msecs):</h3><p>"<%= max_polling_interval_msecs %>"</p>
+  <a href="<%= request.getRequestURI() %>"><h3>Try Again</h3></a>
+</body>
+</html>