fix: multiple api calls issue while creating pipelines , alerts (#6531)

1. this PR fixes the issue #6530

web/src/components/alerts/AddAlert.vue

@@ -439,6 +439,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               <q-btn
                 data-test="add-alert-submit-btn"
                 :label="t('alerts.save')"
+                :loading="isAlertSaving"
+                :disable="isAlertSaving"
                 class="q-mb-md text-bold no-border q-ml-md"
                 color="secondary"
                 padding="sm xl"
@@ -656,6 +658,8 @@ export default defineComponent({
     
     const activeFolderId = ref(router.currentRoute.value.query.folder || "default");
 
+    const isAlertSaving = ref(false);
+
     const updateActiveFolderId = (folderId: any) => {
       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);
             });

web/src/components/alerts/ImportAlert.vue

@@ -49,6 +49,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           padding="sm xl"
           no-caps
           @click="importJson"
+          :loading="isAlertImporting"
+          :disable="isAlertImporting"
           data-test="alert-import-json-btn"
         />
       </div>
@@ -522,6 +524,7 @@ export default defineComponent({
     const selectedFolderId = ref<any>(router.currentRoute.value.query.folder || "default");
     const activeFolderId = ref(router.currentRoute.value.query.folder || router.currentRoute.value.query?.folderId);
     const activeFolderAlerts = ref<any>([]);
+    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: {

web/src/components/pipeline/PipelineEditor.vue

@@ -62,6 +62,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         color="secondary"
         padding="sm xl"
         no-caps
+        :loading="isPipelineSaving"
+        :disable="isPipelineSaving"
         @click="savePipeline"
       />
     </div>
@@ -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();
     });
 };