Merge branch 'fix/#5098/amqp2tty-create-event-delay' into 'develop'

[Issue #5098] introduce promisedWait for async handling and refactor event actions

See merge request canopsis/canopsis-pro!4279

community/sources/webcore/src/canopsis-next/src/components/common/code-editor/code-editor.vue

@@ -24,6 +24,8 @@ import iPlasticTheme from 'monaco-themes/themes/iPlastic.json';
 
 import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
 
+import { promisedWait } from '@/helpers/async';
+
 export default {
   props: {
     value: {
@@ -123,7 +125,7 @@ export default {
           return;
         } catch {
           // eslint-disable-next-line no-await-in-loop
-          await new Promise(resolve => setTimeout(resolve, 500));
+          await promisedWait(500);
         }
       }
     },

community/sources/webcore/src/canopsis-next/src/components/modals/events-record/apply-event-filter.vue

@@ -39,6 +39,7 @@ import { ref } from 'vue';
 
 import { MODALS, VALIDATION_DELAY } from '@/constants';
 
+import { promisedWait } from '@/helpers/async';
 import { formGroupsToPatternRules, patternToForm } from '@/helpers/entities/pattern/form';
 
 import { useInnerModal } from '@/hooks/modals';
@@ -69,7 +70,12 @@ export default {
       form,
       method: async () => {
         await config.value.action?.(formGroupsToPatternRules(form.value?.groups));
-
+        /**
+         * We've added that to avoiding problem with async on the backend side.
+         * There is 3000ms timeout on the backend side for sync
+         */
+        await promisedWait(3000);
+        await config.value.afterSubmit?.();
         close();
       },
     });

community/sources/webcore/src/canopsis-next/src/components/other/events-record/hooks/recording.js

@@ -1,5 +1,7 @@
 import { EVENT_FILTER_PATTERN_FIELDS, MODALS } from '@/constants';
 
+import { promisedWait } from '@/helpers/async';
+
 import { useI18n } from '@/hooks/i18n';
 import { useModals } from '@/hooks/modals';
 import { useEventsRecordCurrent } from '@/hooks/store/modules/events-record-current';
@@ -33,11 +35,8 @@ export const useEventsRecordRecording = (fetchListHandler = () => {}) => {
         { value: EVENT_FILTER_PATTERN_FIELDS.author },
         { value: EVENT_FILTER_PATTERN_FIELDS.initiator },
       ],
-      action: async (eventPattern) => {
-        await startEventsRecordCurrent({ data: { event_pattern: eventPattern } });
-
-        return fetchListHandler();
-      },
+      action: eventPattern => startEventsRecordCurrent({ data: { event_pattern: eventPattern } }),
+      afterSubmit: fetchListHandler,
     },
   });
 
@@ -50,6 +49,12 @@ export const useEventsRecordRecording = (fetchListHandler = () => {}) => {
       action: async () => {
         await stopEventsRecordCurrent();
 
+        /**
+         * We've added that to avoiding problem with async on the backend side.
+         * There is 3000ms timeout on the backend side for sync
+         */
+        await promisedWait(3000);
+
         return fetchListHandler();
       },
     },

community/sources/webcore/src/canopsis-next/src/helpers/async.js

@@ -0,0 +1,67 @@
+/**
+ * Executes a callback function after a specified timeout and returns a promise that resolves with
+ * the callback's result.
+ *
+ * @function
+ * @param {Function} callback - The asynchronous function to be executed after the timeout. It should return a promise
+ * or a value.
+ * @param {number} [timeout=0] - The time, in milliseconds, to wait before executing the callback.
+ * @returns {Promise<*>} A promise that resolves with the result of the callback function.
+ *
+ * @example
+ * // Example 1: Using promisesTimeout with a simple callback
+ * promisesTimeout(() => 'Hello, World!', 1000).then(result => {
+ *   console.log(result); // Logs 'Hello, World!' after 1 second
+ * });
+ *
+ * @example
+ * // Example 2: Using promisesTimeout with an asynchronous callback
+ * const asyncFunction = async () => {
+ *   return new Promise(resolve => {
+ *     setTimeout(() => {
+ *       resolve('Async Result');
+ *     }, 500);
+ *   });
+ * };
+ *
+ * promisedTimeout(asyncFunction, 1000).then(result => {
+ *   console.log(result); // Logs 'Async Result' after 1 second
+ * });
+ *
+ * @example
+ * // Example 3: Using promisedTimeout with default timeout
+ * promisesTimeout(() => 'Immediate Result').then(result => {
+ *   console.log(result); // Logs 'Immediate Result' immediately
+ * });
+ */
+export const promisedTimeout = (callback, timeout = 0) => new Promise(resolve => setTimeout(async () => {
+  const result = await callback?.();
+
+  return resolve(result);
+}, timeout));
+
+/**
+ * Waits for a specified timeout before resolving a promise.
+ * This function is useful for introducing delays in asynchronous workflows.
+ *
+ * @function
+ * @param {number} timeout - The time, in milliseconds, to wait before the promise resolves.
+ * @returns {Promise<void>} A promise that resolves after the specified timeout.
+ *
+ * @example
+ * // Example 1: Using promisedWait to introduce a delay
+ * promisedWait(2000).then(() => {
+ *   console.log('Waited for 2 seconds');
+ * });
+ *
+ * @example
+ * // Example 2: Using promisedWait in an async function
+ * async function delayedExecution() {
+ *   console.log('Start delay');
+ *   await promisedWait(1000);
+ *   console.log('End delay after 1 second');
+ * }
+ *
+ * delayedExecution();
+ */
+export const promisedWait = timeout => promisedTimeout(() => {}, timeout);

community/sources/webcore/src/canopsis-next/src/helpers/vuetify.js

@@ -2,12 +2,14 @@ import { getZIndex } from 'vuetify/lib/util/helpers';
 
 import { VUETIFY_ANIMATION_DELAY } from '@/config';
 
+import { promisedWait } from '@/helpers/async';
+
 /**
  * Wait a vuetify animation
  *
  * @return {Promise}
  */
-export const waitVuetifyAnimation = () => new Promise(resolve => setTimeout(resolve, VUETIFY_ANIMATION_DELAY));
+export const waitVuetifyAnimation = () => promisedWait(VUETIFY_ANIMATION_DELAY);
 
 /**
  * Get the maximum z-index among the specified elements.

community/sources/webcore/src/canopsis-next/src/hooks/submittable-form.js

@@ -1,5 +1,7 @@
 import { computed } from 'vue';
 
+import { promisedTimeout } from '@/helpers/async';
+
 import { usePendingHandler } from './query/pending';
 import { useValidationFormErrors } from './validator/validation-form-errors';
 import { useI18n } from './i18n';
@@ -66,15 +68,15 @@ export const useSubmittableForm = ({ form, method, withTimeout = true }) => {
      * to avoid combobox lag. Otherwise, `submitHandler` is called directly.
      */
     withTimeout
-      ? (...args) => setTimeout(() => submitHandler(...args), 0)
+      ? (...args) => promisedTimeout(() => submitHandler(...args), 0)
       : submitHandler,
   );
 
   const isDisabled = computed(() => submitting.value || validator.errors?.any?.());
 
   return {
-    submit,
     submitting,
     isDisabled,
+    submit,
   };
 };