Show Templates popup when deploying from "SDC Catalog"

Issue-ID: VID-739
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>
Change-Id: I99fe7eff025341da9b8f8555c8fda4528c2c1426
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>

10 files changed, 512 insertions, 427 deletions

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
index b29680f9d..1b6457308 100755
--- 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
@@ -1,360 +1,361 @@
-/*-

- * ============LICENSE_START=======================================================

- * VID

- * ================================================================================

- * Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.

- * Modifications Copyright (C) 2019 IBM.

- * ================================================================================

- * 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 ($uibModal, $scope, $http, $location, COMPONENT, VIDCONFIGURATION, FIELD, DataService, vidService,

-			PropertyService, UtilityService, AsdcService, $timeout, featureFlags) {

-

-		$scope.popup = {};

-		var defaultViewPerPage = 10;

-	//	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;

-		}

-        window.addEventListener("message", receiveMessage, false);

-

-		function receiveMessage(event){

-            if(event.data == 'navigateTo') {

-                $location.path('/models/services').search({});

-                $scope.$apply();

-                $scope.rememberFilter = true;

-            }

-            if(event.data == 'navigateToInstantiationStatus') {

-                $location.path('/instantiationStatus').search({});

-                $scope.$apply();

-            }

-		}

-

-		$scope.getServiceModels = function() {

-			$scope.status = FIELD.STATUS.FETCHING_SERVICE_CATALOG_ASDC;

-

-			$http.get(pathQuery)

-			.then(function (response) {

-				$scope.services = [];

-				if (response.data && angular.isArray(response.data.services)) {

-					wholeData = response.data.services;

-                    $scope.services = $scope.filterDataWithHigherVersion(wholeData);

-                    $scope.viewPerPage = defaultViewPerPage;

-                    $scope.totalPage=$scope.services.length/$scope.viewPerPage;

-                    $scope.sortBy=COMPONENT.NAME;

-                    $scope.scrollViewPerPage=2;

-                    $scope.currentPage=1;

-                    $scope.currentPageNum=1;

-                    $scope.isSpinnerVisible = false;

-                    $scope.isProgressVisible = false;

-					var searchKey = sessionStorage.getItem("searchKey");

-                    if (searchKey != 'undefined' && searchKey!=null && ($scope.rememberFilter)) {

-                        var searchKey = JSON.parse(sessionStorage.getItem("searchKey"));

-                        $scope.searchString = searchKey.searchString || '';

-                        $scope.viewPerPage = searchKey.viewPerPage || defaultViewPerPage;

-                        $scope.totalPage = $scope.services.length / $scope.viewPerPage;

-                        $timeout(function () {

-                        	// the table controller handles the current page once

-							// data is loaded, therefore we're delying the paging

-							// override

-                            $scope.currentPage = $scope.currentPageNum = searchKey.currentPage ? parseInt(searchKey.currentPage) : 1;

-                        }, 0);

-                        $scope.rememberFilter = false;

-                    }

-				} else {

-					$scope.status = FIELD.STATUS.FAILED_SERVICE_MODELS_ASDC;

-					$scope.error = true;

-					$scope.isSpinnerVisible = false;

-				}

-				$scope.deployButtonType = response.data.readOnly ? 'disabled' : 'primary';

-			}, function (response) {

-				console.log("Error: " + response);

-			});

-		};

-

-		$scope.isShowOrchestrationType = function() {

-			return featureFlags.isOn(COMPONENT.FEATURE_FLAGS.FLAG_SHOW_ORCHESTRATION_TYPE);

-		};

-

-		var wholeData=[];

-

-		$scope.filterDataWithHigherVersion = function(serviceData){

-			var delimiter = '$$';

-			var fiterDataServices = {};

-			for(var i=0;i<serviceData.length;i++) {

-				var index = serviceData[i].invariantUUID.trim() + delimiter + serviceData[i].name.trim();

-				if(!fiterDataServices[index]) {

-                    var hasPreviousVersion = false;

-                    fiterDataServices[index] = {

-                        service: serviceData[i],

-                        hasPreviousVersion: false

-                    };

-                }

-                else {

-                    fiterDataServices[index].hasPreviousVersion = true;

-                    if(parseFloat(serviceData[i].version.trim())>parseFloat(fiterDataServices[index].service.version.trim())) {

-                        fiterDataServices[index].service = serviceData[i];

-					}

-				}

-			}

-            return Object.keys(fiterDataServices).map(function(key) {

-            	var service = fiterDataServices[key].service;

-            	service.hasPreviousVersion = fiterDataServices[key].hasPreviousVersion;

-                return  service;

-            });

-		};

-

-		$scope.init = function() {

-    		var msecs = PropertyService.retrieveMsoMaxPollingIntervalMsec();

-    		PropertyService.setMsoMaxPollingIntervalMsec(msecs);

-    		

-    		var polls = PropertyService.retrieveMsoMaxPolls();

-    		PropertyService.setMsoMaxPolls(polls);

-        };

-		

-		$scope.prevPage = function() {

-			$scope.currentPage--;

-		};

-		

-		$scope.nextPage = function() {

-			$scope.currentPage++;

-		};

-

-		$scope.showReportWindow = function() {

-

-			const modalWindow = $uibModal.open({

-				templateUrl: 'app/vid/scripts/modals/report-modal/report-modal.html',

-				controller: 'reportModalController',

-				controllerAs: 'vm',

-				resolve: {

-					errorMsg: function () {

-						return $scope.status;

-					}

-				}

-			});

-

-		};

-

-		$scope.isShowErrorReport = function() {

-			return featureFlags.isOn(COMPONENT.FEATURE_FLAGS.FLAG_CREATE_ERROR_REPORTS);

-		};

-		

-		$scope.createType = COMPONENT.A_LA_CARTE;

-		$scope.deployService = function(service) {

-			var searchKey = {

-				searchString: $scope.searchString,

-                viewPerPage: $scope.viewPerPage,

-                currentPage: $scope.currentPage

-			};

-			sessionStorage.setItem("searchKey",JSON.stringify(searchKey));

-

-			console.log("Instantiating SDC service " + service.uuid);

-

-			$http.get(COMPONENT.SERVICES_PATH + service.uuid)

-				.then(function (getServiceResponse) {

-

-					var serviceModel = getServiceResponse.data;

-

-					//VID-233 bug fix when models doesn't exists

-					if(typeof(serviceModel)==="string"){  //not an object

-						$scope.status = FIELD.STATUS.FAILED_SERVICE_MODELS_ASDC;

-						$scope.error = true;

-						$scope.isSpinnerVisible = false;

-						$scope.isProgressVisible = true;

-						return;

-					} else{ //clean error message

-						$scope.status = "";

-						$scope.error = false;

-						$scope.isSpinnerVisible = false;

-						$scope.isProgressVisible = false;

-					}

-

-					DataService.setServiceName(serviceModel.service.name);

-

-					//VOLTE services need input list generated and macro style

-					DataService.setE2EService(false);

-					if(serviceModel.service.category === 'E2E Service') {

-						DataService.setE2EService(true);

-						DataService.setHideServiceFields(false);

-						VIDCONFIGURATION.MACRO_SERVICES.push(serviceModel.service.invariantUuid);

-					}

-

-					DataService.setModelInfo(COMPONENT.SERVICE, {

-						"modelInvariantId": serviceModel.service.invariantUuid,

-						"modelVersion": serviceModel.service.version,

-						"serviceType" : serviceModel.service.serviceType,

-						"serviceRole": serviceModel.service.serviceRole,

-						"modelNameVersionId": serviceModel.service.uuid,

-						"modelName": serviceModel.service.name,

-						"description": serviceModel.service.description,

-						"category":serviceModel.service.category

-					});

-

-                    var shouldTakeTheAsyncInstantiationFlow = AsdcService.shouldTakeTheAsyncInstantiationFlow(serviceModel);

-                    DataService.setShouldIncludeInAsyncInstantiationFlow(shouldTakeTheAsyncInstantiationFlow);

-

-                    DataService.setALaCarte (true);

-                    DataService.setPnf(!angular.equals(serviceModel.pnfs, {}));

-					$scope.createType = COMPONENT.A_LA_CARTE;

-					var broadcastType = COMPONENT.CREATE_COMPONENT;

-                    if (AsdcService.isMacro(serviceModel) || DataService.getE2EService()) {

-                        DataService.setALaCarte(false);

-                        if(!shouldTakeTheAsyncInstantiationFlow){

-                            $scope.createType = COMPONENT.MACRO;

-                            var convertedAsdcModel = UtilityService.convertModel(serviceModel);

-

-                            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,

-                                "serviceType": serviceModel.service.serviceType,

-                                "serviceRole": serviceModel.service.serviceRole,

-                                "displayInputs": convertedAsdcModel.completeDisplayInputs

-                            });

-                        }

-                    }

-

-					$scope.$broadcast(broadcastType, {

-					    componentId : COMPONENT.SERVICE,

-                        modelNameVersionId: serviceModel.service.uuid,

-					    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 == FIELD.ID.SERVICE_TYPE) {

-										serviceType = response.control[i].value;

-									}

-								}

-

-

-								$scope.refreshSubs(subscriberId,serviceType,serviceInstanceId);

-

-					    	}

-					    }

-					});

-				}, function (response) {

-					console.log("Error: " + response);

-				});

-		};

-		

-		$scope.tableData=[];

-		var oldData=[];

-		$scope.loadPreviousVersionData=function(invariantUUID , name, version){

-			$scope.tableData =[];

-			oldData=[];

-			for(var i=0;i<wholeData.length;i++){

-				if(wholeData[i].invariantUUID == invariantUUID && wholeData[i].name == name && version!=wholeData[i].version){

-					oldData.push(wholeData[i]);

-				}

-			}

-			$scope.tableData = oldData;

-			$scope.createType = "Previous Version";

-			var broadcastType = "createTableComponent";

-			$scope.componentName = name;

-			$scope.$broadcast(broadcastType, {

-			    componentId : COMPONENT.OLDVERSION,

-			    callbackFunction : function(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.SERVICETYPE] != null) {

-									$scope.serviceType = serviceSubscription[FIELD.ID.SERVICETYPE];

-								} 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] ,"isPermitted" : subVal[FIELD.ID.IS_PERMITTED] };

-							serviceIdList.push(newVal);

-							DataService.setServiceIdList(serviceIdList);

-							

-							$location.search({

-								"subscriberId": subscriberId,

-								"serviceType": serviceType,

-								"serviceInstanceId": serviceInstanceId,

-								"isPermitted": newVal.isPermitted.toString()

-							});

-							

-							$location.path(COMPONENT.INSTANTIATE_PATH);

-						});

-					});

-				});	

-			})

-			["catch"]($scope.handleServerError);

-		};

-	});

-})();

+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2019 IBM.
+ * ================================================================================
+ * 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 ($uibModal, $scope, $http, $location, COMPONENT, VIDCONFIGURATION, FIELD, DataService, vidService,
+			PropertyService, UtilityService, AsdcService, $timeout, featureFlags) {
+
+		$scope.popup = {};
+		var defaultViewPerPage = 10;
+	//	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;
+		}
+        window.addEventListener("message", receiveMessage, false);
+
+		function receiveMessage(event){
+            if(event.data == 'navigateTo') {
+                $location.path('/models/services').search({});
+                $scope.$apply();
+                $scope.rememberFilter = true;
+            }
+            if(event.data == 'navigateToInstantiationStatus') {
+                $location.path('/instantiationStatus').search({});
+                $scope.$apply();
+            }
+		}
+
+		$scope.getServiceModels = function() {
+			$scope.status = FIELD.STATUS.FETCHING_SERVICE_CATALOG_ASDC;
+
+			$http.get(pathQuery)
+			.then(function (response) {
+				$scope.services = [];
+				if (response.data && angular.isArray(response.data.services)) {
+					wholeData = response.data.services;
+                    $scope.services = $scope.filterDataWithHigherVersion(wholeData);
+                    $scope.viewPerPage = defaultViewPerPage;
+                    $scope.totalPage=$scope.services.length/$scope.viewPerPage;
+                    $scope.sortBy=COMPONENT.NAME;
+                    $scope.scrollViewPerPage=2;
+                    $scope.currentPage=1;
+                    $scope.currentPageNum=1;
+                    $scope.isSpinnerVisible = false;
+                    $scope.isProgressVisible = false;
+					var searchKey = sessionStorage.getItem("searchKey");
+                    if (searchKey != 'undefined' && searchKey!=null && ($scope.rememberFilter)) {
+                        var searchKey = JSON.parse(sessionStorage.getItem("searchKey"));
+                        $scope.searchString = searchKey.searchString || '';
+                        $scope.viewPerPage = searchKey.viewPerPage || defaultViewPerPage;
+                        $scope.totalPage = $scope.services.length / $scope.viewPerPage;
+                        $timeout(function () {
+                        	// the table controller handles the current page once
+							// data is loaded, therefore we're delying the paging
+							// override
+                            $scope.currentPage = $scope.currentPageNum = searchKey.currentPage ? parseInt(searchKey.currentPage) : 1;
+                        }, 0);
+                        $scope.rememberFilter = false;
+                    }
+				} else {
+					$scope.status = FIELD.STATUS.FAILED_SERVICE_MODELS_ASDC;
+					$scope.error = true;
+					$scope.isSpinnerVisible = false;
+				}
+				$scope.deployButtonType = response.data.readOnly ? 'disabled' : 'primary';
+			}, function (response) {
+				console.log("Error: " + response);
+			});
+		};
+
+		$scope.isShowOrchestrationType = function() {
+			return featureFlags.isOn(COMPONENT.FEATURE_FLAGS.FLAG_SHOW_ORCHESTRATION_TYPE);
+		};
+
+		var wholeData=[];
+
+		$scope.filterDataWithHigherVersion = function(serviceData){
+			var delimiter = '$$';
+			var fiterDataServices = {};
+			for(var i=0;i<serviceData.length;i++) {
+				var index = serviceData[i].invariantUUID.trim() + delimiter + serviceData[i].name.trim();
+				if(!fiterDataServices[index]) {
+                    var hasPreviousVersion = false;
+                    fiterDataServices[index] = {
+                        service: serviceData[i],
+                        hasPreviousVersion: false
+                    };
+                }
+                else {
+                    fiterDataServices[index].hasPreviousVersion = true;
+                    if(parseFloat(serviceData[i].version.trim())>parseFloat(fiterDataServices[index].service.version.trim())) {
+                        fiterDataServices[index].service = serviceData[i];
+					}
+				}
+			}
+            return Object.keys(fiterDataServices).map(function(key) {
+            	var service = fiterDataServices[key].service;
+            	service.hasPreviousVersion = fiterDataServices[key].hasPreviousVersion;
+                return  service;
+            });
+		};
+
+		$scope.init = function() {
+    		var msecs = PropertyService.retrieveMsoMaxPollingIntervalMsec();
+    		PropertyService.setMsoMaxPollingIntervalMsec(msecs);
+    		
+    		var polls = PropertyService.retrieveMsoMaxPolls();
+    		PropertyService.setMsoMaxPolls(polls);
+        };
+		
+		$scope.prevPage = function() {
+			$scope.currentPage--;
+		};
+		
+		$scope.nextPage = function() {
+			$scope.currentPage++;
+		};
+
+		$scope.showReportWindow = function() {
+
+			const modalWindow = $uibModal.open({
+				templateUrl: 'app/vid/scripts/modals/report-modal/report-modal.html',
+				controller: 'reportModalController',
+				controllerAs: 'vm',
+				resolve: {
+					errorMsg: function () {
+						return $scope.status;
+					}
+				}
+			});
+
+		};
+
+		$scope.isShowErrorReport = function() {
+			return featureFlags.isOn(COMPONENT.FEATURE_FLAGS.FLAG_CREATE_ERROR_REPORTS);
+		};
+		
+		$scope.createType = COMPONENT.A_LA_CARTE;
+		$scope.deployService = function(service) {
+			var searchKey = {
+				searchString: $scope.searchString,
+                viewPerPage: $scope.viewPerPage,
+                currentPage: $scope.currentPage
+			};
+			DataService.setHasTemplate(service.hasTemplate);
+			sessionStorage.setItem("searchKey",JSON.stringify(searchKey));
+
+			console.log("Instantiating SDC service " + service.uuid);
+
+			$http.get(COMPONENT.SERVICES_PATH + service.uuid)
+				.then(function (getServiceResponse) {
+
+					var serviceModel = getServiceResponse.data;
+
+					//VID-233 bug fix when models doesn't exists
+					if(typeof(serviceModel)==="string"){  //not an object
+						$scope.status = FIELD.STATUS.FAILED_SERVICE_MODELS_ASDC;
+						$scope.error = true;
+						$scope.isSpinnerVisible = false;
+						$scope.isProgressVisible = true;
+						return;
+					} else{ //clean error message
+						$scope.status = "";
+						$scope.error = false;
+						$scope.isSpinnerVisible = false;
+						$scope.isProgressVisible = false;
+					}
+
+					DataService.setServiceName(serviceModel.service.name);
+
+					//VOLTE services need input list generated and macro style
+					DataService.setE2EService(false);
+					if(serviceModel.service.category === 'E2E Service') {
+						DataService.setE2EService(true);
+						DataService.setHideServiceFields(false);
+						VIDCONFIGURATION.MACRO_SERVICES.push(serviceModel.service.invariantUuid);
+					}
+
+					DataService.setModelInfo(COMPONENT.SERVICE, {
+						"modelInvariantId": serviceModel.service.invariantUuid,
+						"modelVersion": serviceModel.service.version,
+						"serviceType" : serviceModel.service.serviceType,
+						"serviceRole": serviceModel.service.serviceRole,
+						"modelNameVersionId": serviceModel.service.uuid,
+						"modelName": serviceModel.service.name,
+						"description": serviceModel.service.description,
+						"category":serviceModel.service.category
+					});
+
+                    var shouldTakeTheAsyncInstantiationFlow = AsdcService.shouldTakeTheAsyncInstantiationFlow(serviceModel);
+                    DataService.setShouldIncludeInAsyncInstantiationFlow(shouldTakeTheAsyncInstantiationFlow);
+
+                    DataService.setALaCarte (true);
+                    DataService.setPnf(!angular.equals(serviceModel.pnfs, {}));
+					$scope.createType = COMPONENT.A_LA_CARTE;
+					var broadcastType = COMPONENT.CREATE_COMPONENT;
+                    if (AsdcService.isMacro(serviceModel) || DataService.getE2EService()) {
+                        DataService.setALaCarte(false);
+                        if(!shouldTakeTheAsyncInstantiationFlow){
+                            $scope.createType = COMPONENT.MACRO;
+                            var convertedAsdcModel = UtilityService.convertModel(serviceModel);
+
+                            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,
+                                "serviceType": serviceModel.service.serviceType,
+                                "serviceRole": serviceModel.service.serviceRole,
+                                "displayInputs": convertedAsdcModel.completeDisplayInputs
+                            });
+                        }
+                    }
+
+					$scope.$broadcast(broadcastType, {
+					    componentId : COMPONENT.SERVICE,
+                        modelNameVersionId: serviceModel.service.uuid,
+					    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 == FIELD.ID.SERVICE_TYPE) {
+										serviceType = response.control[i].value;
+									}
+								}
+
+
+								$scope.refreshSubs(subscriberId,serviceType,serviceInstanceId);
+
+					    	}
+					    }
+					});
+				}, function (response) {
+					console.log("Error: " + response);
+				});
+		};
+		
+		$scope.tableData=[];
+		var oldData=[];
+		$scope.loadPreviousVersionData=function(invariantUUID , name, version){
+			$scope.tableData =[];
+			oldData=[];
+			for(var i=0;i<wholeData.length;i++){
+				if(wholeData[i].invariantUUID == invariantUUID && wholeData[i].name == name && version!=wholeData[i].version){
+					oldData.push(wholeData[i]);
+				}
+			}
+			$scope.tableData = oldData;
+			$scope.createType = "Previous Version";
+			var broadcastType = "createTableComponent";
+			$scope.componentName = name;
+			$scope.$broadcast(broadcastType, {
+			    componentId : COMPONENT.OLDVERSION,
+			    callbackFunction : function(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.SERVICETYPE] != null) {
+									$scope.serviceType = serviceSubscription[FIELD.ID.SERVICETYPE];
+								} 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] ,"isPermitted" : subVal[FIELD.ID.IS_PERMITTED] };
+							serviceIdList.push(newVal);
+							DataService.setServiceIdList(serviceIdList);
+							
+							$location.search({
+								"subscriberId": subscriberId,
+								"serviceType": serviceType,
+								"serviceInstanceId": serviceInstanceId,
+								"isPermitted": newVal.isPermitted.toString()
+							});
+							
+							$location.path(COMPONENT.INSTANTIATE_PATH);
+						});
+					});
+				});	
+			})
+			["catch"]($scope.handleServerError);
+		};
+	});
+})();
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
index a35411dd1..002bcb95a 100755
--- 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
@@ -93,9 +93,13 @@ var creationDialogController = function (COMPONENT, FIELD, PARAMETER, $scope, $h
 
 
         if (!$scope.shouldShowOldPopup()) {
-            $scope.url = COMPONENT.SERVICE_POPUP_IFRAME_URL + request.modelNameVersionId + "&isCreate=true&r=" + Math.random();
-            window.addEventListener("message", receiveMessage, false);
-
+            if(DataService.getHasTemplate()){
+                $scope.url = COMPONENT.INSTANTIATION_TEMPLATES_IFRAME_URL + request.modelNameVersionId;
+                window.addEventListener("message", receiveMessage, false);
+            }else {
+                $scope.url = COMPONENT.SERVICE_POPUP_IFRAME_URL + request.modelNameVersionId + "&isCreate=true&r=" + Math.random();
+                window.addEventListener("message", receiveMessage, false);
+            }
         }
         else {
             callbackFunction = request.callbackFunction;
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
index 56729f2d3..10c4277ca 100755
--- 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
@@ -319,6 +319,12 @@ var DataService = function($log, DataService) {
 		},
 		setOwningEntityProperties: function (properties) {
 				_this.owningEntityProperties = properties;
+		},
+		getHasTemplate: function () {
+				return _this.hasTemplate;
+		},
+		setHasTemplate: function (hasTemplate) {
+				_this.hasTemplate = hasTemplate;
 		}
 	};
 };
diff --git a/vid-webpack-master/cypress/integration/iFrames/browse-sdc.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/browse-sdc.e2e.ts
index b3ef7f032..427696561 100644
--- a/vid-webpack-master/cypress/integration/iFrames/browse-sdc.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/browse-sdc.e2e.ts
@@ -4,72 +4,105 @@ import {JsonBuilder} from '../../support/jsonBuilders/jsonBuilder';
 import {ServiceModel} from '../../support/jsonBuilders/models/service.model';
 
 describe('Browse SDC', function () {
-    var jsonBuilderAndMock : JsonBuilder<ServiceModel> = new JsonBuilder<ServiceModel>();
+  const jsonBuilderAndMock: JsonBuilder<ServiceModel> = new JsonBuilder<ServiceModel>();
 
 
-    beforeEach(() => {
-        cy.clearSessionStorage();
-        cy.preventErrorsOnLoading();
-        cy.initAAIMock();
-        cy.initVidMock();
-        cy.initZones();
-        cy.login();
-        cy.visit("welcome.htm")
+  beforeEach(() => {
+    cy.clearSessionStorage();
+    cy.preventErrorsOnLoading();
+    cy.initAAIMock();
+    cy.initVidMock();
+    cy.initZones();
+    cy.login();
+    cy.visit("welcome.htm")
+  });
+
+  afterEach(() => {
+    cy.screenshot();
+  });
+
+  it(`browse sdc open macro with network and then macro for new flow`, function () {
+    // const MACRO_WITH_CONFIGURATION_ID: string = 'ee6d61be-4841-4f98-8f23-5de9da846ca7';
+    const MACRO_WITH_NETWORK_ID: string = "bd8ffd14-da36-4f62-813c-6716ba9f4354";
+    const MACRO_FOR_NEW_FLOW_ID: string = '74fa72dd-012b-49c3-800d-06b12bcaf1a0';
+    const CANCEL_BUTTON = "cancelButton";
+
+    cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/list-services.json').then((res) => {
+      jsonBuilderAndMock.basicJson(res,
+        Cypress.config('baseUrl') + '/rest/models/services?distributionStatus=DISTRIBUTED',
+        200,
+        0,
+        'list_services');
     });
 
-    afterEach(() => {
-      cy.screenshot();
+    cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/service-with-configuration.json').then((res) => {
+      jsonBuilderAndMock.basicJson(res,
+        Cypress.config('baseUrl') + '/rest/models/services/' + MACRO_WITH_NETWORK_ID,
+        200,
+        0,
+        'MACRO_WITH_CONFIGURATION');
     });
 
-    it(`browse sdc open macro with network and then macro for new flow`, function () {
-       // const MACRO_WITH_CONFIGURATION_ID: string = 'ee6d61be-4841-4f98-8f23-5de9da846ca7';
-      const MACRO_WITH_NETWORK_ID: string = "bd8ffd14-da36-4f62-813c-6716ba9f4354";
-      const MACRO_FOR_NEW_FLOW_ID: string = '74fa72dd-012b-49c3-800d-06b12bcaf1a0';
-      const CANCEL_BUTTON = "cancelButton";
-
-      cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/list-services.json').then((res) => {
-        jsonBuilderAndMock.basicJson(res,
-          Cypress.config('baseUrl') + '/rest/models/services?distributionStatus=DISTRIBUTED',
-          200,
-          0,
-          'list_services');
-      });
+    cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/Dror_service1806_Macro1.json').then((res) => {
+      jsonBuilderAndMock.basicJson(res,
+        Cypress.config('baseUrl') + '/rest/models/services/' + MACRO_FOR_NEW_FLOW_ID,
+        200,
+        0,
+        'MACRO_FOR_NEW_FLOW');
+    });
 
-      cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/service-with-configuration.json').then((res) => {
-        jsonBuilderAndMock.basicJson(res,
-          Cypress.config('baseUrl') + '/rest/models/services/' + MACRO_WITH_NETWORK_ID,
-          200,
-          0,
-          'MACRO_WITH_CONFIGURATION');
-      });
+    cy.get('span').contains('Browse SDC Service Models').click({force: true});
+    cy.wait("@list_services").then(() => {
+      cy.getElementByDataTestsId('deploy-' + MACRO_WITH_NETWORK_ID).click({force: true})
+        .getElementByDataTestsId(CANCEL_BUTTON).click({force: true});
+      cy.getElementByDataTestsId('deploy-' + MACRO_FOR_NEW_FLOW_ID).click({force: true});
+      cy.get("iframe");
+    });
 
-      cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/Dror_service1806_Macro1.json').then((res) => {
-        jsonBuilderAndMock.basicJson(res,
-          Cypress.config('baseUrl') + '/rest/models/services/' + MACRO_FOR_NEW_FLOW_ID,
-          200,
-          0,
-          'MACRO_FOR_NEW_FLOW');
-      });
+    cy.visit("welcome.htm"); //relaod page to not break the following tests
+
+  });
+
+  it(`browse sdc should open instantiation template modal if service hasTemplate is true`, function () {
+    const SERVICE_MODEL_ID: string = '74fa72dd-012b-49c3-800d-06b12bcaf1a0';
 
-      cy.get('span').contains('Browse SDC Service Models').click({force: true});
-      cy.wait("@list_services").then(() => {
-        cy.getElementByDataTestsId('deploy-' + MACRO_WITH_NETWORK_ID).click({force: true})
-          .getElementByDataTestsId(CANCEL_BUTTON).click({force: true});
-        cy.getElementByDataTestsId('deploy-' + MACRO_FOR_NEW_FLOW_ID).click({force: true});
-        cy.get("iframe");
+    cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/list-services.json').then((res) => {
+      res.services = res.services.map((service: { uuid: string, hasTemplate: boolean }) => {
+        if (service.uuid === SERVICE_MODEL_ID) {
+          service.hasTemplate = true;
+        }
+        return service;
       });
+      jsonBuilderAndMock.basicJson(res,
+        Cypress.config('baseUrl') + '/rest/models/services?distributionStatus=DISTRIBUTED',
+        200,
+        0,
+        'list_services');
+    });
 
-      cy.visit("welcome.htm"); //relaod page to not break the following tests
+    cy.readFile('cypress/support/jsonBuilders/mocks/jsons/bug616888/Dror_service1806_Macro1.json').then((res) => {
+      jsonBuilderAndMock.basicJson(res,
+        Cypress.config('baseUrl') + '/rest/models/services/' + SERVICE_MODEL_ID,
+        200,
+        0,
+        'MACRO_FOR_NEW_FLOW');
+    });
 
+
+    cy.get('span').contains('Browse SDC Service Models').click({force: true});
+    cy.wait("@list_services").then(() => {
+      cy.getElementByDataTestsId('deploy-' + SERVICE_MODEL_ID).click({force: true});
+      cy.get('iframe').then(function ($iframe) {
+        expect($iframe.attr('src')).to.contain(`app/ui/#/instantiationTemplatesPopup?serviceModelId=${SERVICE_MODEL_ID}`);
+      });
     });
+  });
 
   it(`browse sdc of service without instantiationType open aLaCarte popup`, function () {
     const VERY_OLD_SERVICE_UUID: string = "09c476c7-91ae-44b8-a731-04d8d8fa3695";
-    const TEST_MOCKS_PATH="cypress/support/jsonBuilders/mocks/jsons/bug_aLaCarteServiceWrongPopup/";
+    const TEST_MOCKS_PATH = "cypress/support/jsonBuilders/mocks/jsons/bug_aLaCarteServiceWrongPopup/";
 
-    const CANCEL_BUTTON = "cancelButton";
-
-    cy.readFile(TEST_MOCKS_PATH+'list-services.json').then((res) => {
+    cy.readFile(TEST_MOCKS_PATH + 'list-services.json').then((res) => {
       jsonBuilderAndMock.basicJson(res,
         Cypress.config('baseUrl') + '/rest/models/services?distributionStatus=DISTRIBUTED',
         200,
@@ -77,7 +110,7 @@ describe('Browse SDC', function () {
         'list_services');
     });
 
-    cy.readFile(TEST_MOCKS_PATH+'serviceWithoutInstantiationType.json').then((res) => {
+    cy.readFile(TEST_MOCKS_PATH + 'serviceWithoutInstantiationType.json').then((res) => {
       jsonBuilderAndMock.basicJson(res,
         Cypress.config('baseUrl') + '/rest/models/services/' + VERY_OLD_SERVICE_UUID,
         200,
@@ -96,5 +129,4 @@ describe('Browse SDC', function () {
   });
 
 
-
 });
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
index 3cd633de6..eb608652c 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.ts
@@ -70,11 +70,7 @@ export class GenericFormPopupComponent extends DialogComponent<PopupModel, boole
   }
 
   closeDialog(that): void {
-    this._iframeService.removeClassCloseModal(that.parentElementClassName);
-    this.dialogService.removeDialog(this);
-    setTimeout(() => {
-      window.parent.postMessage("closeIframe", "*");
-    }, 15);
+    this._iframeService.closeIframe(this.dialogService, this);
   }
 
   shouldShowNotification(): boolean {
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html
index 07fc7ab22..e2922b2a2 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.html
@@ -2,6 +2,7 @@
   <div class="modal-content">
     <div class="modal-header">
       <button type="button"
+              [attr.data-tests-id]="'closeModal'"
               class="close"
               (click)="closeModal()">&times;
       </button>
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts
index 6a734161f..20655d54a 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.ts
@@ -68,6 +68,6 @@ export class InstantiationTemplatesModalComponent extends DialogComponent<string
   };
 
   closeModal(): void {
-    this.dialogService.removeDialog(this);
+    this._iframeService.closeIframe(this.dialogService, this);
   }
 }
diff --git a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts
index 211f59337..47f849059 100644
--- a/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts
+++ b/vid-webpack-master/src/app/shared/components/searchMembersModal/search-elements-modal.component.ts
@@ -60,11 +60,7 @@ export class SearchElementsModalComponent extends DialogComponent<{ modalInforma
 
   closeDialog(): void {
     this._iframeService.removeFullScreen();
-    this._iframeService.removeClassCloseModal(this.parentElementClassName);
-    this.dialogService.removeDialog(this);
-    setTimeout(() => {
-      window.parent.postMessage("closeIframe", "*");
-    }, 15);
+    this._iframeService.closeIframe(this.dialogService, this);
   }
 
   selectedMembersAmountChange(selectedMembersAmount: number): void {
diff --git a/vid-webpack-master/src/app/shared/utils/iframe.service.spec.ts b/vid-webpack-master/src/app/shared/utils/iframe.service.spec.ts
new file mode 100644
index 000000000..fd5fe0e65
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/utils/iframe.service.spec.ts
@@ -0,0 +1,40 @@
+import {getTestBed, TestBed} from "@angular/core/testing";
+import {IframeService} from "./iframe.service";
+import {DialogService} from "ng2-bootstrap-modal";
+
+export class DialogServiceMock extends DialogService {
+  removeDialog: (that) => ({})
+}
+
+describe('Iframe service', () => {
+  let injector;
+  let service: IframeService;
+  beforeAll(done => (async () => {
+    TestBed.configureTestingModule({
+      providers : [
+        IframeService
+      ]
+    });
+    await TestBed.compileComponents();
+
+    injector = getTestBed();
+    service = injector.get(IframeService);
+
+  })().then(done).catch(done.fail));
+
+
+  test('service should be defined', ()=>{
+    expect(service).toBeDefined();
+  });
+
+  test('closeIframe: should call removeClassCloseModal', ()=>{
+    const dialogService = new DialogServiceMock(null, null, null, null);
+    spyOn(service, 'removeClassCloseModal');
+    spyOn(dialogService, 'removeDialog');
+    service.closeIframe(dialogService, {})
+
+    expect(service.removeClassCloseModal).toBeCalledWith('content');
+    expect(dialogService.removeDialog).toBeCalledWith({});
+  });
+
+});
diff --git a/vid-webpack-master/src/app/shared/utils/iframe.service.ts b/vid-webpack-master/src/app/shared/utils/iframe.service.ts
index 4c699825f..ab93d1ac8 100644
--- a/vid-webpack-master/src/app/shared/utils/iframe.service.ts
+++ b/vid-webpack-master/src/app/shared/utils/iframe.service.ts
@@ -1,22 +1,31 @@
 import {Injectable} from "@angular/core";
+import {DialogService} from "ng2-bootstrap-modal";
 
 @Injectable()
 export class IframeService {
 
   addClassOpenModal(elementClassName: string) {
-    var parentBodyElement = parent.document.getElementsByClassName(elementClassName)[0];
+    const parentBodyElement = parent.document.getElementsByClassName(elementClassName)[0];
     if (parentBodyElement)  {
       parentBodyElement.classList.add("modal-open");
     }
   }
 
   removeClassCloseModal(elementClassName: string) {
-    var parentBodyElement = parent.document.getElementsByClassName(elementClassName)[0];
+    const parentBodyElement = parent.document.getElementsByClassName(elementClassName)[0];
     if (parentBodyElement)  {
       parentBodyElement.classList.remove("modal-open");
     }
   }
 
+  closeIframe(dialogService : DialogService, that){
+    this.removeClassCloseModal('content');
+    dialogService.removeDialog(that);
+    setTimeout(() => {
+      window.parent.postMessage("closeIframe", "*");
+    }, 15);
+  }
+
 
   addFullScreen(){
     let parentBodyElement =  parent.document.getElementsByClassName('service-model-content')[0];