Show previous instantiations button in new service modal

Issue-ID: VID-724
Signed-off-by: Sara Weiss <sara.weiss@intl.att.com>
Change-Id: I18633adbabbc22c68f9bcd712427033deaffd33c

11 files changed, 490 insertions, 416 deletions

diff --git a/vid-app-common/src/main/java/org/onap/vid/properties/Features.java b/vid-app-common/src/main/java/org/onap/vid/properties/Features.java
index 0a78c3471..d1a0cf97f 100644
--- a/vid-app-common/src/main/java/org/onap/vid/properties/Features.java
+++ b/vid-app-common/src/main/java/org/onap/vid/properties/Features.java
@@ -80,6 +80,7 @@ public enum Features implements Feature {
     FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS,
     FLAG_2002_IDENTIFY_INVARIANT_MACRO_UUID_BY_BACKEND,
     FLAG_2004_INSTANTIATION_STATUS_FILTER,
+    FLAG_2004_TEMP_BUTTON_TO_INSTANTIATION_STATUS_FILTER,
     ;
 
 
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 15627835e..a35411dd1 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
@@ -1,409 +1,413 @@
-/*-

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

- * VID

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

- * Copyright (C) 2017 - 2019 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, PARAMETER, $scope, $http, $timeout, $log,

-                                         CreationService, UtilityService, DataService, VIDCONFIGURATION, $location, $uibModal, featureFlags) {

-

-    $scope.isDialogVisible = false;

-    $scope.isServiceError = false;

-    $scope.summaryControl = {};

-    $scope.userProvidedControl = {};

-

-

-    var callbackFunction = undefined;

-    var componentId = undefined;

-

-    $scope.showReportWindow = function() {

-

-        let errorMsg;

-

-        if($scope.error !== undefined && $scope.error != null) {

-            errorMsg = $scope.error;

-        } else {

-            errorMsg = "";

-        }

-

-        const modalWindow = $uibModal.open({

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

-            controller: 'reportModalController',

-            controllerAs: 'vm',

-            resolve: {

-                errorMsg: function () {

-                    return errorMsg;

-                }

-            }

-        });

-

-        $scope.isDialogVisible = false;

-        $scope.popup.isVisible = false;

-    };

-

-    $scope.isShowErrorReport = function() {

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

-    };

-

-    $scope.shouldShowOldPopup = function () {

-        return !DataService.getShouldIncludeInAsyncInstantiationFlow();

-    };

-

-    function receiveMessage(event) {

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

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

-

-            $scope.cancel();

-        }

-        else if (event.data.eventId == 'submitIframe') {

-            {

-                $location.path('/servicePlanning').search({serviceModelId: event.data.data.serviceModelId});

-            }

-        }

-        $scope.$apply();

-    }

-

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

-

-

-        if (!$scope.shouldShowOldPopup()) {

-            $scope.url = COMPONENT.SERVICE_POPUP_IFRAME_URL + request.modelNameVersionId + "&isCreate=true&r=" + Math.random();

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

-

-        }

-        else {

-            callbackFunction = request.callbackFunction;

-            componentId = request.componentId;

-            CreationService.initializeComponent(request.componentId);

-

-            CreationService.setHttpErrorHandler(function (response) {

-                $scope.isServiceError = true;

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

-    };

-    var validateMap = function (mname) {

-        var patt1 = /^{(\s*\w+\s*:\s*\w+\s*)(\s*,\s*\w+\s*:\s*\w+\s*)*}$/im;

-        if (mname == null) {

-            return true;

-        }

-        if (!mname.match(patt1)) {

-            return false;

-        }

-        return true;

-    };

-

-    var validateList = function (lname) {

-        var patt1 = /^\[(\s*\w+\s*)(\s*,\s*\w+\s*)*\]$/i;

-        if (lname == null) {

-            return true;

-        }

-        if (!lname.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 isUploadAvailable = false;

-        var uploadIndex = 0;

-        var paramList = $scope.userProvidedControl.getList();

-        var isAnyError = false;

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

-            if (paramList[i].id === FIELD.ID.SUPPLEMENTORY_DATA_FILE) {

-                isUploadAvailable = true;

-                uploadIndex = i;

-            }

-            if (paramList[i].id === FIELD.ID.UPLOAD_SUPPLEMENTORY_DATA_FILE && paramList[i].value && document.getElementById(FIELD.ID.SUPPLEMENTORY_DATA_FILE).value == '') {

-                isAnyError = true;

-            }

-        }

-

-        if (isUploadAvailable && isAnyError) {

-            showError(FIELD.ERROR.MISSING_DATA, FIELD.ERROR.MISSING_FILE);

-

-        } else if (isUploadAvailable && document.getElementById(FIELD.ID.SUPPLEMENTORY_DATA_FILE).value != '') {

-            var errorMsg = "";

-            var fileInput = document.getElementById(FIELD.ID.SUPPLEMENTORY_DATA_FILE);

-            var file = fileInput.files[0];

-            var reader = new FileReader();

-            reader.onload = function (e) {

-                try {

-                    paramList[uploadIndex].value = JSON.parse(reader.result);

-                    FIELD.PARAMETER.SUPPLEMENTORY_DATA_FILE['value'] = paramList[uploadIndex].value;

-

-                    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 arbitraryParametersList = DataService.getArbitraryParameters();

-                    var p = null;

-                    if (UtilityService.hasContents(arbitraryParametersList)) {

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

-                            p = arbitraryParametersList[i];

-                            if (p.type === PARAMETER.MAP) {

-                                //validate a map: { <entry_key_1>: <entry_value_1>, ... , <entry_key_n>: <entry_value_n> }

-                                // need to find the value in paramList

-                                for (var j = 0; j < paramList.length; j++) {

-                                    if (paramList[j].id === p.id) {

-                                        p.value = paramList[j].value;

-                                        var isValid = validateMap(p.value);

-                                        if (isValid) {

-                                            $scope.isErrorVisible = false;

-                                            break;

-                                        }

-                                        else {

-                                            showError(FIELD.ERROR.INVALID_MAP + p.id,

-                                                FIELD.ERROR.MAP_VALIDATE);

-                                            return;

-                                        }

-                                    }

-                                }

-                            } else if (p.type === PARAMETER.LIST) {

-                                //validate a list: { value or a list of comma separated values }

-                                // need to find the value in paramList

-                                for (var j = 0; j < paramList.length; j++) {

-                                    if (paramList[j].id === p.id) {

-                                        p.value = paramList[j].value;

-                                        var isValid = validateList(p.value);

-                                        if (isValid) {

-                                            $scope.isErrorVisible = false;

-                                            break;

-                                        }

-                                        else {

-                                            showError(FIELD.ERROR.INVALID_LIST + p.id,

-                                                FIELD.ERROR.LIST_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;

-                            }

-                        }

-                    });

-

-                } catch (e) {

-                    errorMsg = errorMsg + FIELD.ERROR.INVALID_DATA_FORMAT;

-                }

-                if (errorMsg !== "") {

-                    showError(FIELD.ERROR.SYSTEM_FAILURE, errorMsg);

-

-                }

-            };

-            reader.readAsText(file);

-        } else {

-

-            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 arbitraryParametersList = DataService.getArbitraryParameters();

-            var p = null;

-            if (UtilityService.hasContents(arbitraryParametersList)) {

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

-                    p = arbitraryParametersList[i];

-                    if (p.type === PARAMETER.MAP) {

-                        //validate a map: { <entry_key_1>: <entry_value_1>, ... , <entry_key_n>: <entry_value_n> }

-                        // need to find the value in paramList

-                        for (var j = 0; j < paramList.length; j++) {

-                            if (paramList[j].id === p.id) {

-                                p.value = paramList[j].value;

-                                var isValid = validateMap(p.value);

-                                if (isValid) {

-                                    $scope.isErrorVisible = false;

-                                    break;

-                                }

-                                else {

-                                    showError(FIELD.ERROR.INVALID_MAP + p.id,

-                                        FIELD.ERROR.MAP_VALIDATE);

-                                    return;

-                                }

-                            }

-                        }

-                    } else if (p.type === PARAMETER.LIST) {

-                        //validate a list: { value or a list of comma separated values }

-                        // need to find the value in paramList

-                        for (var j = 0; j < paramList.length; j++) {

-                            if (paramList[j].id === p.id) {

-                                p.value = paramList[j].value;

-                                var isValid = validateList(p.value);

-                                if (isValid) {

-                                    $scope.isErrorVisible = false;

-                                    break;

-                                }

-                                else {

-                                    showError(FIELD.ERROR.INVALID_LIST + p.id,

-                                        FIELD.ERROR.LIST_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", "PARAMETER", "$scope", "$http",

-    "$timeout", "$log", "CreationService", "UtilityService", "DataService", "VIDCONFIGURATION", "$location",

-    "$uibModal", "featureFlags",

-    creationDialogController]);

+/*-
+ * ============LICENSE_START=======================================================
+ * VID
+ * ================================================================================
+ * Copyright (C) 2017 - 2019 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, PARAMETER, $scope, $http, $timeout, $log,
+                                         CreationService, UtilityService, DataService, VIDCONFIGURATION, $location, $uibModal, featureFlags) {
+
+    $scope.isDialogVisible = false;
+    $scope.isServiceError = false;
+    $scope.summaryControl = {};
+    $scope.userProvidedControl = {};
+
+
+    var callbackFunction = undefined;
+    var componentId = undefined;
+
+    $scope.showReportWindow = function() {
+
+        let errorMsg;
+
+        if($scope.error !== undefined && $scope.error != null) {
+            errorMsg = $scope.error;
+        } else {
+            errorMsg = "";
+        }
+
+        const modalWindow = $uibModal.open({
+            templateUrl: 'app/vid/scripts/modals/report-modal/report-modal.html',
+            controller: 'reportModalController',
+            controllerAs: 'vm',
+            resolve: {
+                errorMsg: function () {
+                    return errorMsg;
+                }
+            }
+        });
+
+        $scope.isDialogVisible = false;
+        $scope.popup.isVisible = false;
+    };
+
+    $scope.isShowErrorReport = function() {
+        return featureFlags.isOn(COMPONENT.FEATURE_FLAGS.FLAG_CREATE_ERROR_REPORTS);
+    };
+
+    $scope.shouldShowOldPopup = function () {
+        return !DataService.getShouldIncludeInAsyncInstantiationFlow();
+    };
+
+    function receiveMessage(event) {
+        if (event.data == 'closeIframe') {
+            window.removeEventListener("message", receiveMessage, false);
+
+            $scope.cancel();
+        }
+        else if (event.data.eventId == 'submitIframe') {
+            {
+                $location.path('/servicePlanning').search({serviceModelId: event.data.data.serviceModelId});
+            }
+        } else if (event.data.eventId == 'showPreviousInstantiations') {
+            {
+                $location.path('/instantiationStatus').search({filterText: event.data.data.serviceModelId});
+            }
+        }
+        $scope.$apply();
+    }
+
+    $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;
+
+
+        if (!$scope.shouldShowOldPopup()) {
+            $scope.url = COMPONENT.SERVICE_POPUP_IFRAME_URL + request.modelNameVersionId + "&isCreate=true&r=" + Math.random();
+            window.addEventListener("message", receiveMessage, false);
+
+        }
+        else {
+            callbackFunction = request.callbackFunction;
+            componentId = request.componentId;
+            CreationService.initializeComponent(request.componentId);
+
+            CreationService.setHttpErrorHandler(function (response) {
+                $scope.isServiceError = true;
+                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;
+    };
+    var validateMap = function (mname) {
+        var patt1 = /^{(\s*\w+\s*:\s*\w+\s*)(\s*,\s*\w+\s*:\s*\w+\s*)*}$/im;
+        if (mname == null) {
+            return true;
+        }
+        if (!mname.match(patt1)) {
+            return false;
+        }
+        return true;
+    };
+
+    var validateList = function (lname) {
+        var patt1 = /^\[(\s*\w+\s*)(\s*,\s*\w+\s*)*\]$/i;
+        if (lname == null) {
+            return true;
+        }
+        if (!lname.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 isUploadAvailable = false;
+        var uploadIndex = 0;
+        var paramList = $scope.userProvidedControl.getList();
+        var isAnyError = false;
+        for (var i = 0; i < paramList.length; i++) {
+            if (paramList[i].id === FIELD.ID.SUPPLEMENTORY_DATA_FILE) {
+                isUploadAvailable = true;
+                uploadIndex = i;
+            }
+            if (paramList[i].id === FIELD.ID.UPLOAD_SUPPLEMENTORY_DATA_FILE && paramList[i].value && document.getElementById(FIELD.ID.SUPPLEMENTORY_DATA_FILE).value == '') {
+                isAnyError = true;
+            }
+        }
+
+        if (isUploadAvailable && isAnyError) {
+            showError(FIELD.ERROR.MISSING_DATA, FIELD.ERROR.MISSING_FILE);
+
+        } else if (isUploadAvailable && document.getElementById(FIELD.ID.SUPPLEMENTORY_DATA_FILE).value != '') {
+            var errorMsg = "";
+            var fileInput = document.getElementById(FIELD.ID.SUPPLEMENTORY_DATA_FILE);
+            var file = fileInput.files[0];
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                try {
+                    paramList[uploadIndex].value = JSON.parse(reader.result);
+                    FIELD.PARAMETER.SUPPLEMENTORY_DATA_FILE['value'] = paramList[uploadIndex].value;
+
+                    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 arbitraryParametersList = DataService.getArbitraryParameters();
+                    var p = null;
+                    if (UtilityService.hasContents(arbitraryParametersList)) {
+                        for (var i = 0; i < arbitraryParametersList.length; i++) {
+                            p = arbitraryParametersList[i];
+                            if (p.type === PARAMETER.MAP) {
+                                //validate a map: { <entry_key_1>: <entry_value_1>, ... , <entry_key_n>: <entry_value_n> }
+                                // need to find the value in paramList
+                                for (var j = 0; j < paramList.length; j++) {
+                                    if (paramList[j].id === p.id) {
+                                        p.value = paramList[j].value;
+                                        var isValid = validateMap(p.value);
+                                        if (isValid) {
+                                            $scope.isErrorVisible = false;
+                                            break;
+                                        }
+                                        else {
+                                            showError(FIELD.ERROR.INVALID_MAP + p.id,
+                                                FIELD.ERROR.MAP_VALIDATE);
+                                            return;
+                                        }
+                                    }
+                                }
+                            } else if (p.type === PARAMETER.LIST) {
+                                //validate a list: { value or a list of comma separated values }
+                                // need to find the value in paramList
+                                for (var j = 0; j < paramList.length; j++) {
+                                    if (paramList[j].id === p.id) {
+                                        p.value = paramList[j].value;
+                                        var isValid = validateList(p.value);
+                                        if (isValid) {
+                                            $scope.isErrorVisible = false;
+                                            break;
+                                        }
+                                        else {
+                                            showError(FIELD.ERROR.INVALID_LIST + p.id,
+                                                FIELD.ERROR.LIST_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;
+                            }
+                        }
+                    });
+
+                } catch (e) {
+                    errorMsg = errorMsg + FIELD.ERROR.INVALID_DATA_FORMAT;
+                }
+                if (errorMsg !== "") {
+                    showError(FIELD.ERROR.SYSTEM_FAILURE, errorMsg);
+
+                }
+            };
+            reader.readAsText(file);
+        } else {
+
+            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 arbitraryParametersList = DataService.getArbitraryParameters();
+            var p = null;
+            if (UtilityService.hasContents(arbitraryParametersList)) {
+                for (var i = 0; i < arbitraryParametersList.length; i++) {
+                    p = arbitraryParametersList[i];
+                    if (p.type === PARAMETER.MAP) {
+                        //validate a map: { <entry_key_1>: <entry_value_1>, ... , <entry_key_n>: <entry_value_n> }
+                        // need to find the value in paramList
+                        for (var j = 0; j < paramList.length; j++) {
+                            if (paramList[j].id === p.id) {
+                                p.value = paramList[j].value;
+                                var isValid = validateMap(p.value);
+                                if (isValid) {
+                                    $scope.isErrorVisible = false;
+                                    break;
+                                }
+                                else {
+                                    showError(FIELD.ERROR.INVALID_MAP + p.id,
+                                        FIELD.ERROR.MAP_VALIDATE);
+                                    return;
+                                }
+                            }
+                        }
+                    } else if (p.type === PARAMETER.LIST) {
+                        //validate a list: { value or a list of comma separated values }
+                        // need to find the value in paramList
+                        for (var j = 0; j < paramList.length; j++) {
+                            if (paramList[j].id === p.id) {
+                                p.value = paramList[j].value;
+                                var isValid = validateList(p.value);
+                                if (isValid) {
+                                    $scope.isErrorVisible = false;
+                                    break;
+                                }
+                                else {
+                                    showError(FIELD.ERROR.INVALID_LIST + p.id,
+                                        FIELD.ERROR.LIST_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", "PARAMETER", "$scope", "$http",
+    "$timeout", "$log", "CreationService", "UtilityService", "DataService", "VIDCONFIGURATION", "$location",
+    "$uibModal", "featureFlags",
+    creationDialogController]);
diff --git a/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts
index d1d41d0d9..7d1a1829d 100644
--- a/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts
@@ -82,6 +82,14 @@ describe('Service popup', function () {
         cy.get('form-general-error').contains('Page contains errors. Please see details next to the relevant fields.');
       });
     });
+
+    it('when open service popup should show showPrevious button', () => {
+      cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
+      cy.getElementByDataTestsId('ShowPreviousInstancesButton').contains('Previous Instantiation').click();
+
+    })
+
+
   });
 });
 
diff --git a/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json b/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json
index 0f5e15298..9afc1723f 100644
--- a/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json
+++ b/vid-webpack-master/cypress/support/jsonBuilders/mocks/jsons/flags.cypress.json
@@ -19,6 +19,7 @@
   "FLAG_1911_INSTANTIATION_ORDER_BUTTON_IN_ASYNC_ALACARTE": false,
   "FLAG_2002_VNF_PLATFORM_MULTI_SELECT" : false,
   "FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS": true,
+  "FLAG_2004_TEMP_BUTTON_TO_INSTANTIATION_STATUS_FILTER": true,
   "FLAG_2004_INSTANTIATION_STATUS_FILTER": true,
   "FLAG_2004_INSTANTIATION_TEMPLATES_POPUP" : false
 }
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.html b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.html
index 5b8dfa9c9..f9da42607 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.html
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/generic-form-popup.component.html
@@ -61,6 +61,13 @@
           (click)="openTemplateModal()"
         ><span>Template</span></button>
         <button
+          *ngIf=isInstantiationStatusFilterFlagOn()
+          [attr.data-tests-id]="'ShowPreviousInstancesButton'"
+          type="button" class="btn btn-success submit"
+          (click)="formPopupDetails.onOtherAction(formPopupDetails.that, dynamicForm)">
+          <span>Previous Instantiation</span>
+        </button>
+        <button
           [attr.data-tests-id]="'cancelButton'"
           type="button" class="btn btn-default cancel"
           (click)="formPopupDetails.onCancel(formPopupDetails.that, dynamicForm)"><span>Cancel</span></button>
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 cadce7ddb..159871f45 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
@@ -13,6 +13,7 @@ import {AaiService} from "../../services/aaiService/aai.service";
 import {GenericFormPopupService} from "./generic-form-popup.service";
 import {FormControlModel} from "../../models/formControlModels/formControl.model";
 import {FormGeneralErrorsService} from "../formGeneralErrors/formGeneralErrors.service";
+import {FeatureFlagsService, Features} from "../../services/featureFlag/feature-flags.service";
 import {InstantiationTemplatesModalComponent} from "./instantiationTemplatesModal/instantiation.templates.modal.component";
 
 
@@ -146,6 +147,10 @@ export class GenericFormPopupComponent extends DialogComponent<PopupModel, boole
   openTemplateModal = (): void => {
     this._dialogService.addDialog(InstantiationTemplatesModalComponent, {});
   }
+
+  isInstantiationStatusFilterFlagOn() {
+    return FeatureFlagsService.getFlagState(Features.FLAG_2004_TEMP_BUTTON_TO_INSTANTIATION_STATUS_FILTER, this._store);
+  }
 }
 
 
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts
index ccfaacd0d..ebea695f7 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.spec.ts
@@ -2140,6 +2140,33 @@ describe('Service popup service', () => {
     expect(service.closeDialogEvent.next).toHaveBeenCalledWith(that);
   });
 
+  test('showPreviousInstantiations should trigger postMessage', () => {
+    let that = <any>{
+      parentElementClassName: 'content',
+      _iframeService: iframeService,
+      resetPopupData : () =>{      },
+      serviceModel:{
+        uuid:'1111'
+      }
+
+    };
+
+    let expectedMessage= {
+      eventId: 'showPreviousInstantiations',
+      data: {
+        serviceModelId: that.serviceModel.uuid
+      }
+    };
+
+    jest.spyOn(window.parent, 'postMessage');
+
+    service.showPreviousInstantiations(that, fb.group({}));
+
+    expect( window.parent.postMessage).toHaveBeenCalledWith(expectedMessage,"*")
+
+  });
+
+
 
   test('getDynamicInputs should return list of controls' ,() => {
     const result:  FormControlModel[] = service.getDynamicInputs('6b528779-44a3-4472-bdff-9cd15ec93450');
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.ts b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.ts
index e2033aa74..3e7e8c1e5 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.ts
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/genericFormServices/service/service.popup.service.ts
@@ -59,7 +59,12 @@ export class ServicePopupService implements GenericPopupInterface {
       this.getDynamicInputs(serviceId),
       this.modelInformations,
       (that, form: FormGroup) => {that.onSubmit(that, form);},
-      (that: any, form: FormGroup) => {that.onCancel(that, form); }
+      (that: any, form: FormGroup) => {
+        that.onCancel(that, form);
+      },
+      (that: any, form: FormGroup) => {
+        that.showPreviousInstantiations(that, form);
+      }
     );
   }
 
@@ -123,13 +128,24 @@ export class ServicePopupService implements GenericPopupInterface {
   onSubmit(that, form: FormGroup, ...args): void {
     form = that.updateExtraValues(that, form);
     that.storeServiceInstance(form.value, args[0], [], new ModelInfo(that.serviceModel), that.serviceModel);
-    window.parent.postMessage( {
-      eventId: 'submitIframe',
+    const eventId = 'submitIframe';
+    this.postMessageToWindowParent(eventId, that.serviceModel.uuid);
+    this.onCancel(that, form);
+  }
+
+  showPreviousInstantiations(that, form: FormGroup,): void {
+    const eventId = 'showPreviousInstantiations';
+    this.postMessageToWindowParent(eventId, that.serviceModel.uuid);
+    this.onCancel(that, form);
+  }
+
+  private postMessageToWindowParent(eventId: string, serviceModelId:string) {
+    window.parent.postMessage({
+      eventId: eventId,
       data: {
-        serviceModelId: that.serviceModel.uuid
+        serviceModelId
       }
     }, "*");
-    this.onCancel(that, form);
   }
 
   updateExtraValues = (that, form) : any => {
diff --git a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss
index 23c950c33..ef8d01a75 100644
--- a/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss
+++ b/vid-webpack-master/src/app/shared/components/genericFormPopup/instantiationTemplatesModal/instantiation.templates.modal.component.scss
@@ -114,7 +114,7 @@ $grid-border: 1px #d2d2d2 solid;
   }
 
   .submit {
-    width: 120px;
+    min-width: 120px;
     height: 36px;
     background: #009fdb;
     border-radius: 2px;
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
index 0a7e61082..40d74d63f 100644
--- a/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
@@ -14,6 +14,8 @@ export class FormPopupDetails {
   modelInformationItems: ModelInformationItem[];
   onSubmit : (that : any, form: FormGroup , ...args) =>  void;
   onCancel : (that : any, form: FormGroup) => void;
+  onOtherAction: (that: any, form: FormGroup) => void;
+
 
   constructor(that : any,
               popupTypeName : PopupType ,
@@ -25,7 +27,8 @@ export class FormPopupDetails {
               dynamicInputsControlList : FormControlModel[],
               modelInformationItems : ModelInformationItem[],
               onSubmit : (that : any, form : FormGroup, ...args) =>  void,
-              onCancel : (that : any, form : FormGroup) => void){
+              onCancel: (that: any, form: FormGroup) => void,
+              onOtherAction?: (that: any, form: FormGroup) => void) {
     this.title = title;
     this.leftSubTitle = leftSubTitle;
     this.rightSubTitle = rightSubTitle;
@@ -34,6 +37,7 @@ export class FormPopupDetails {
     this.modelInformationItems = modelInformationItems;
     this.onSubmit = onSubmit;
     this.onCancel = onCancel;
+    this.onOtherAction = onOtherAction;
     this.popupTypeName = popupTypeName;
     this.UUIDData = UUIDData;
     this.that = that;
diff --git a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
index 2fb39e8b9..8570b0866 100644
--- a/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
+++ b/vid-webpack-master/src/app/shared/services/featureFlag/feature-flags.service.ts
@@ -14,6 +14,7 @@ export enum Features {
   FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT ='FLAG_FLASH_MORE_ACTIONS_BUTTON_IN_OLD_VIEW_EDIT',
   FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS ='FLAG_2002_VFM_UPGRADE_ADDITIONAL_OPTIONS',
   FLAG_2004_INSTANTIATION_STATUS_FILTER ='FLAG_2004_INSTANTIATION_STATUS_FILTER',
+  FLAG_2004_TEMP_BUTTON_TO_INSTANTIATION_STATUS_FILTER ='FLAG_2004_TEMP_BUTTON_TO_INSTANTIATION_STATUS_FILTER',
 }
 
 @Injectable()