From 8291ded0b3ab246ffdaa2bfa5138bc07ffb086a8 Mon Sep 17 00:00:00 2001 From: Sai Nikhil Date: Mon, 14 Apr 2025 14:53:54 +0530 Subject: [PATCH] fix: multiple api calls issue while creating pipelines , alerts (#6531) 1. this PR fixes the issue #6530 --- web/src/components/alerts/AddAlert.vue | 21 ++++++++++++++++++- web/src/components/alerts/ImportAlert.vue | 20 ++++++++++-------- .../components/pipeline/PipelineEditor.vue | 7 +++++++ 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/web/src/components/alerts/AddAlert.vue b/web/src/components/alerts/AddAlert.vue index 8b5f256e58..7d3ea3542b 100644 --- a/web/src/components/alerts/AddAlert.vue +++ b/web/src/components/alerts/AddAlert.vue @@ -439,6 +439,8 @@ along with this program. If not, see . { activeFolderId.value = folderId.value; }; @@ -1366,6 +1370,7 @@ export default defineComponent({ activeFolderId, updateActiveFolderId, alertType, + isAlertSaving, }; }, @@ -1456,6 +1461,9 @@ export default defineComponent({ async onSubmit() { // Delaying submission by 500ms to allow the form to validate, as query is validated in validateSqlQuery method // When user updated query and click on save + // made the isAlertSaving to true to disable the save button + // and also added a spinner to the save button + this.isAlertSaving = true; await new Promise((resolve) => setTimeout(resolve, 500)); if ( @@ -1468,6 +1476,7 @@ export default defineComponent({ message: "Selecting all Columns in SQL query is not allowed.", timeout: 1500, }); + this.isAlertSaving = false; return false; } @@ -1477,6 +1486,7 @@ export default defineComponent({ message: "Please select stream name.", timeout: 1500, }); + this.isAlertSaving = false; return false; } @@ -1512,11 +1522,15 @@ export default defineComponent({ this.addAlertForm.validate().then(async (valid: any) => { if (!valid) { + this.isAlertSaving = false; return false; } const payload = this.getAlertPayload(); - if (!this.validateInputs(payload)) return; + if (!this.validateInputs(payload)) { + this.isAlertSaving = false; + return; + } const dismiss = this.q.notify({ spinner: true, @@ -1537,6 +1551,7 @@ export default defineComponent({ } catch (error) { dismiss(); console.log("Error while validating sql query"); + this.isAlertSaving = false; return false; } } @@ -1554,12 +1569,14 @@ export default defineComponent({ this.$emit("update:list", this.activeFolderId); this.addAlertForm.resetValidation(); dismiss(); + this.isAlertSaving = false; this.q.notify({ type: "positive", message: `Alert updated successfully.`, }); }) .catch((err: any) => { + this.isAlertSaving = false; dismiss(); this.handleAlertError(err); }); @@ -1586,12 +1603,14 @@ export default defineComponent({ this.$emit("update:list", this.activeFolderId); this.addAlertForm.resetValidation(); dismiss(); + this.isAlertSaving = false; this.q.notify({ type: "positive", message: `Alert saved successfully.`, }); }) .catch((err: any) => { + this.isAlertSaving = false; dismiss(); this.handleAlertError(err); }); diff --git a/web/src/components/alerts/ImportAlert.vue b/web/src/components/alerts/ImportAlert.vue index ee2261171c..6bae0eebb2 100644 --- a/web/src/components/alerts/ImportAlert.vue +++ b/web/src/components/alerts/ImportAlert.vue @@ -49,6 +49,8 @@ along with this program. If not, see . padding="sm xl" no-caps @click="importJson" + :loading="isAlertImporting" + :disable="isAlertImporting" data-test="alert-import-json-btn" /> @@ -522,6 +524,7 @@ export default defineComponent({ const selectedFolderId = ref(router.currentRoute.value.query.folder || "default"); const activeFolderId = ref(router.currentRoute.value.query.folder || router.currentRoute.value.query?.folderId); const activeFolderAlerts = ref([]); + const isAlertImporting = ref(false); const getFormattedDestinations: any = computed(() => { return props.destinations.map((destination: any) => { return destination.name; @@ -688,6 +691,9 @@ export default defineComponent({ } let allAlertsCreated = true; + // made the isAlertImporting to true to disable the import button + // and also added a spinner to the import button + isAlertImporting.value = true; // Now we can always process as an array for (const [index, jsonObj] of jsonArrayOfObj.value.entries()) { const success = await processJsonObject(jsonObj, index + 1); @@ -710,6 +716,9 @@ export default defineComponent({ }, }); } + //if the alerts created successfully or not make the isAlertImporting to false + //it will only enable the import button after the alerts are created successfully + isAlertImporting.value = false; }; const processJsonObject = async (jsonObj: any, index: number) => { @@ -748,17 +757,10 @@ export default defineComponent({ field: "alert_name", }); } - if (checkAlertsInList(activeFolderAlerts.value, input.name)) { - alertErrors.push({ - message: `Alert - ${index}: "${input.name}" already exists`, - field: "alert_name", - }); - } const organizationData = store.state.organizations; const orgList = organizationData.map((org: any) => org.identifier); // 2. Validate 'org_id' field - console.log(input.org_id,'org id') if ( !input.org_id || typeof input.org_id !== "string" || @@ -909,7 +911,6 @@ export default defineComponent({ `Alert - ${index}: Operator should be one of: '=', '!=', '>=', '<=', '>', '<', 'Contains', 'NotContains'.`, ); } - console.log(input,'input') if ( @@ -1219,7 +1220,8 @@ export default defineComponent({ selectedFolderId, getActiveFolderAlerts, activeFolderAlerts, - store + store, + isAlertImporting, }; }, components: { diff --git a/web/src/components/pipeline/PipelineEditor.vue b/web/src/components/pipeline/PipelineEditor.vue index 9974045cc8..66b2ab6540 100644 --- a/web/src/components/pipeline/PipelineEditor.vue +++ b/web/src/components/pipeline/PipelineEditor.vue @@ -62,6 +62,8 @@ along with this program. If not, see . color="secondary" padding="sm xl" no-caps + :loading="isPipelineSaving" + :disable="isPipelineSaving" @click="savePipeline" /> @@ -384,6 +386,8 @@ const isFetchingFunctions = ref(false); const chartContainerRef = ref(null); +const isPipelineSaving = ref(false); + const nodeRows = ref<(string | null)[]>([]); const q = useQuasar(); @@ -660,7 +664,9 @@ const validatePipeline = () => { }; const onSubmitPipeline = async () => { + isPipelineSaving.value = true; if(!validatePipeline()){ + isPipelineSaving.value = false; return; } const dismiss = q.notify({ @@ -724,6 +730,7 @@ const onSubmitPipeline = async () => { } }) .finally(() => { + isPipelineSaving.value = false; dismiss(); }); };