[VID-6] Initial rebase push

Change-Id: I9077be9663754d9b22f77c6a7b3109b361b39346
Signed-off-by: jimmydot <jf2512@att.com>
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>