Add popup informing about long validation time for large pm_dictionary files.

For large pm_dictionary files, validation may take up to several minutes (average ~ 17s).
The popup informs the user that the system is still working properly.

Issue-ID: SDC-3390
Change-Id: Ia9ef211f2cab8a557aa1631d311ed06439fb3c26
Signed-off-by: Maciej Malewski <maciej.malewski@nokia.com>

6 files changed, 82 insertions, 22 deletions

diff --git a/catalog-ui/configurations/dev.js b/catalog-ui/configurations/dev.js
index a57d1b9516..26c98d2c6e 100644
--- a/catalog-ui/configurations/dev.js
+++ b/catalog-ui/configurations/dev.js
@@ -429,7 +429,8 @@ const SDC_CONFIG = {
 			}
 
 		]
-	}
+	},
+	"displayAlertValidationAfterMilisec": 3000
 };
 
 module.exports = SDC_CONFIG;
diff --git a/catalog-ui/configurations/prod.js b/catalog-ui/configurations/prod.js
index 1b7ae7debd..028c44c99e 100644
--- a/catalog-ui/configurations/prod.js
+++ b/catalog-ui/configurations/prod.js
@@ -429,7 +429,8 @@ const SDC_CONFIG = {
 			}
 
 		]
-	}
+	},
+	"displayAlertValidationAfterMilisec": 3000
 };
 
 module.exports = SDC_CONFIG;
diff --git a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts
index ead85a6afa..8c5280d85c 100644
--- a/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts
+++ b/catalog-ui/src/app/ng2/components/forms/artifacts-form/artifacts.service.ts
@@ -8,6 +8,7 @@ import { TranslateService } from '../../../shared/translator/translate.service';
 import { CreateOrUpdateArtifactAction, DeleteArtifactAction } from '../../../store/actions/artifacts.action';
 import { EnvParamsComponent } from '../env-params/env-params.component';
 import { ArtifactFormComponent } from './artifact-form.component';
+import { ModalService } from "../../../services/modal.service";
 
 import {
     CreateInstanceArtifactAction,
@@ -22,6 +23,7 @@ export class ArtifactsService {
                 private modalService: SdcUiServices.ModalService,
                 private topologyTemplateService: TopologyTemplateService,
                 private translateService: TranslateService,
+                private modalAlertservice: ModalService,
                 private store: Store) {
     }
 
@@ -56,8 +58,13 @@ export class ArtifactsService {
         const onOkPressed = () => {
             const updatedArtifact = modalInstance.innerModalContent.instance.artifact;
             this.serviceLoader.activate();
+            this.modalAlertservice.openDelayedAlertModal('Please be patient', 'Large files processing may take up to several minutes.', 'Cancel');
             this.dispatchArtifactAction(componentId, componentType, updatedArtifact, artifactType, instanceId, resourceType)
-                    .subscribe().add(() => this.serviceLoader.deactivate());
+                .subscribe().add(() => {
+                this.serviceLoader.deactivate();
+                this.modalAlertservice._shouldDisplayDelayedAlertModal = false;
+                this.modalAlertservice.closeCurrentModal();
+            });
         };
 
         const addOrUpdateArtifactModalConfig = {
@@ -116,7 +123,7 @@ export class ArtifactsService {
             const updatedArtifact = modalInstance.innerModalContent.instance.artifact;
             this.serviceLoader.activate();
             this.dispatchArtifactAction(componentId, componentType, updatedArtifact, ArtifactType.DEPLOYMENT, instanceId)
-                    .subscribe().add(() => this.serviceLoader.deactivate());
+                .subscribe().add(() => this.serviceLoader.deactivate());
         };
 
         const envParamsModal = {
@@ -160,7 +167,7 @@ export class ArtifactsService {
         const onOkPressed: Function = () => {
             this.serviceLoader.activate();
             this.store.dispatch((instanceId) ? new DeleteInstanceArtifactAction(artifactObject) : new DeleteArtifactAction(artifactObject))
-                    .subscribe().add(() => this.serviceLoader.deactivate());
+                .subscribe().add(() => this.serviceLoader.deactivate());
         };
 
         const title = this.translateService.translate('ARTIFACT_VIEW_DELETE_MODAL_TITLE');
diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts
index a8f1b99ac2..897571b5ee 100644
--- a/catalog-ui/src/app/ng2/services/modal.service.ts
+++ b/catalog-ui/src/app/ng2/services/modal.service.ts
@@ -7,7 +7,7 @@ import {MultiStepsWizardComponent} from "../components/ui/multi-steps-wizard/mul
 import {ModalComponent} from "../components/ui/modal/modal.component";
 import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component";
 import { DynamicComponentService } from 'app/ng2/services/dynamic-component.service';
-
+import { getSdcConfig } from "../config/sdc-config.config.factory";
 
 @Injectable()
 export class ModalService {
@@ -16,7 +16,8 @@ export class ModalService {
 
     constructor(private dynamicComponentService: DynamicComponentService) { }
 
-    
+    public _shouldDisplayDelayedAlertModal: boolean = true;
+
     /* Shortcut method to open an alert modal with title, message, and close button that simply closes the modal. */
     public openAlertModal(title: string, message: string, closeButtonText?:string) {
         let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
@@ -24,6 +25,17 @@ export class ModalService {
         this.createCustomModal(modalModel).instance.open();
     }
 
+    public openDelayedAlertModal(title: string, message: string,
+                                 closeButtonText?:string) {
+        const timeDelay : number = getSdcConfig().displayAlertValidationAfterMilisec;
+        setTimeout(() => {
+            if(this._shouldDisplayDelayedAlertModal) {
+                this.openAlertModal(title, message, closeButtonText);
+            }
+        }, timeDelay);
+        this._shouldDisplayDelayedAlertModal = true;
+    }
+
     public openErrorModal = (closeButtonText?: string, errorMessage?: string):void => {
         let errorModal = this.createErrorModal(closeButtonText, errorMessage);
         errorModal.instance.open();
@@ -38,7 +50,7 @@ export class ModalService {
      * @param actionButtonText Blue call to action button
      * @param actionButtonCallback function to invoke when button is clicked
      * @param cancelButtonText text for close/cancel button
-     */    
+     */
     public createActionModal = (title: string, message: string, actionButtonText: string, actionButtonCallback: Function, cancelButtonText: string): ComponentRef<ModalComponent> => {
         let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
         let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
@@ -81,7 +93,7 @@ export class ModalService {
         return wizardInstance;
     }
 
-    
+
     public closeCurrentModal = () => {
         if (!this.currentModal) return;
         this.currentModal.instance.close();
@@ -106,5 +118,3 @@ export class ModalService {
 
 
 }
-
-
diff --git a/openecomp-ui/src/sdc-app/config/config.json b/openecomp-ui/src/sdc-app/config/config.json
index c2c794024c..b79adf2f82 100644
--- a/openecomp-ui/src/sdc-app/config/config.json
+++ b/openecomp-ui/src/sdc-app/config/config.json
@@ -12,5 +12,6 @@
     "defaultWebsocketPath": "notification-api/ws/notificationHandler",
     "defaultNotificationsWorkerUpdateMillisecond": 10000,
     "showBrowseVNF": true,
-    "allTestScenario": "onap-dublin"
+    "allTestScenario": "onap-dublin",
+    "displayAlertValidationAfterMilisec": 3000
 }
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index 9a177b2a53..4e3133216b 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -1,5 +1,6 @@
 /*!
  * Copyright © 2016-2018 European Support Limited
+ * Modifications copyright (c) 2021 Nokia
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -51,6 +52,11 @@ import {
     versionStatus
 } from 'sdc-app/common/helpers/ItemsHelperConstants.js';
 
+let shouldDisplayTimingValidationInfo = true;
+let alertValidationTiming = Configuration.get(
+    'displayAlertValidationAfterMilisec'
+);
+
 function getLicensingData(licensingData = {}) {
     const { licenseAgreement, featureGroups } = licensingData;
     const newlicenseAgreement = getValue(licenseAgreement);
@@ -63,6 +69,33 @@ function getLicensingData(licensingData = {}) {
         : undefined;
 }
 
+function getTimingInfoWarning() {
+    return {
+        type: modalActionTypes.GLOBAL_MODAL_WARNING,
+        data: {
+            title: 'Please be patient',
+            msg: 'Large files processing may take up to several minutes.',
+            cancelButtonText: i18n('Cancel')
+        }
+    };
+}
+
+function displayTimingValidationInfo(dispatch) {
+    shouldDisplayTimingValidationInfo = true;
+    setTimeout(() => {
+        if (shouldDisplayTimingValidationInfo) {
+            dispatch(getTimingInfoWarning());
+        }
+    }, alertValidationTiming);
+}
+
+function closeTimingValidationInfo(dispatch) {
+    shouldDisplayTimingValidationInfo = false;
+    dispatch({
+        type: modalActionTypes.GLOBAL_MODAL_CLOSE
+    });
+}
+
 function baseUrl() {
     const restPrefix = Configuration.get('restPrefix');
     return `${restPrefix}/v1.0/vendor-software-products/`;
@@ -345,6 +378,7 @@ const SoftwareProductActionHelper = {
     },
 
     processAndValidateHeatCandidate(dispatch, { softwareProductId, version }) {
+        displayTimingValidationInfo(dispatch);
         return validateHeatCandidate(softwareProductId, version).then(
             response => {
                 if (response.status === 'Success') {
@@ -362,6 +396,7 @@ const SoftwareProductActionHelper = {
                         version
                     });
                 }
+                closeTimingValidationInfo(dispatch);
             }
         );
     },
@@ -374,7 +409,7 @@ const SoftwareProductActionHelper = {
             type: HeatSetupActions.FILL_HEAT_SETUP_CACHE,
             payload: {}
         });
-
+        displayTimingValidationInfo(dispatch);
         Promise.resolve()
             .then(() => uploadFile(softwareProductId, formData, version))
             .then(response => {
@@ -410,20 +445,25 @@ const SoftwareProductActionHelper = {
                             });
                             break;
                     }
+                    closeTimingValidationInfo(dispatch);
                 } else {
                     throw new Error(parseUploadErrorMsg(response.errors));
                 }
             })
             .catch(error => {
-                dispatch({
-                    type: modalActionTypes.GLOBAL_MODAL_ERROR,
-                    data: {
-                        title: failedNotificationTitle,
-                        msg:
-                            error.message ||
-                            (error.responseJSON && error.responseJSON.message)
-                    }
-                });
+                dispatch(
+                    {
+                        type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                        data: {
+                            title: failedNotificationTitle,
+                            msg:
+                                error.message ||
+                                (error.responseJSON &&
+                                    error.responseJSON.message)
+                        }
+                    },
+                    closeTimingValidationInfo(dispatch)
+                );
             });
     },