From 3c957597725f306b4ca06cebfa54fbf0f2622938 Mon Sep 17 00:00:00 2001 From: Maciej Malewski Date: Wed, 27 Jan 2021 08:54:20 +0100 Subject: 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 --- catalog-ui/configurations/dev.js | 3 ++- catalog-ui/configurations/prod.js | 3 ++- .../forms/artifacts-form/artifacts.service.ts | 13 ++++++++++--- catalog-ui/src/app/ng2/services/modal.service.ts | 22 ++++++++++++++++------ 4 files changed, 30 insertions(+), 11 deletions(-) (limited to 'catalog-ui') 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 => { 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 { } - - -- cgit 1.2.3-korg