[BUG] Issues in the UI above 200 destinations opensearch-project#195 (o…

…pensearch-project#386) (opensearch-project#410) Signed-off-by: Jovan Cvetkovic <[email protected]> Signed-off-by: Jovan Cvetkovic <[email protected]> (cherry picked from commit f30caba) Co-authored-by: Jovan Cvetkovic <[email protected]>
kohinoor98 · Dec 8, 2022 · 211aa7f · 211aa7f
1 parent 0d3c286
commit 211aa7f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 45 deletions.
diff --git a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js
@@ -12,10 +12,11 @@ import AddActionButton from '../../components/AddActionButton';
 import { DEFAULT_MESSAGE_SOURCE, FORMIK_INITIAL_ACTION_VALUES } from '../../utils/constants';
 import { DESTINATION_OPTIONS } from '../../../Destinations/utils/constants';
 import { getAllowList } from '../../../Destinations/utils/helpers';
-import { MAX_QUERY_RESULT_SIZE, MONITOR_TYPE } from '../../../../utils/constants';
+import { MONITOR_TYPE } from '../../../../utils/constants';
 import { backendErrorNotification } from '../../../../utils/helpers';
 import { TRIGGER_TYPE } from '../CreateTrigger/utils/constants';
 import { formikToTrigger } from '../CreateTrigger/utils/formikToTrigger';
+import { MAX_DESTINATIONS } from '../../../Destinations/containers/DestinationsList/utils/constants';
 
 const createActionContext = (context, action) => ({
   ctx: {
@@ -59,59 +60,86 @@ class ConfigureActions extends React.Component {
     this.loadDestinations();
   }
 
-  loadDestinations = async (searchText = '') => {
-    const { httpClient, values, arrayHelpers, notifications, fieldPath } = this.props;
-    const { allowList, actionDeleted } = this.state;
-    this.setState({ loadingDestinations: true });
+  /**
+   * Returns all destinations in consecutive requests until all destinations are returned
+   * @returns {Promise<*[]>}
+   */
+  getDestinations = async () => {
+    const { httpClient } = this.props;
+    const { allowList } = this.state;
     const getDestinationLabel = (destination) => {
       const foundDestination = DESTINATION_OPTIONS.find(({ value }) => value === destination.type);
       if (foundDestination) return foundDestination.text;
       return destination.type;
     };
-    try {
-      const response = await httpClient.get('../api/alerting/destinations', {
-        query: { search: searchText, size: MAX_QUERY_RESULT_SIZE },
+
+    let destinations = [];
+    let index = 0;
+    const getDestinations = async () => {
+      const getDestinationsQuery = {
+        from: index,
+        size: MAX_DESTINATIONS,
+      };
+
+      const destinationsResponse = await httpClient.get('../api/alerting/destinations', {
+        query: getDestinationsQuery,
       });
-      if (response.ok) {
-        const destinations = response.destinations
+
+      destinations = destinations.concat(
+        destinationsResponse.destinations
           .map((destination) => ({
             label: `${destination.name} - (${getDestinationLabel(destination)})`,
             value: destination.id,
             type: destination.type,
           }))
-          .filter(({ type }) => allowList.includes(type));
-        this.setState({ destinations, loadingDestinations: false });
-
-        const monitorType = _.get(
-          arrayHelpers,
-          'form.values.monitor_type',
-          MONITOR_TYPE.QUERY_LEVEL
-        );
-        const initialActionValues = _.cloneDeep(FORMIK_INITIAL_ACTION_VALUES);
-        switch (monitorType) {
-          case MONITOR_TYPE.BUCKET_LEVEL:
-            _.set(
-              initialActionValues,
-              'message_template.source',
-              DEFAULT_MESSAGE_SOURCE.BUCKET_LEVEL_MONITOR
-            );
-            break;
-          case MONITOR_TYPE.QUERY_LEVEL:
-          case MONITOR_TYPE.CLUSTER_METRICS:
-            _.set(
-              initialActionValues,
-              'message_template.source',
-              DEFAULT_MESSAGE_SOURCE.QUERY_LEVEL_MONITOR
-            );
-            break;
-        }
+          .filter(({ type }) => allowList.includes(type))
+      );
 
-        // If actions is not defined  If user choose to delete actions, it will not override customer's preferences.
-        if (destinations.length > 0 && !_.get(values, `${fieldPath}actions`) && !actionDeleted) {
-          arrayHelpers.insert(0, initialActionValues);
-        }
-      } else {
-        backendErrorNotification(notifications, 'load', 'destinations', response.err);
+      if (
+        destinationsResponse.totalDestinations &&
+        destinations.length < destinationsResponse.totalDestinations
+      ) {
+        index += MAX_DESTINATIONS;
+        await getDestinations();
+      }
+    };
+
+    await getDestinations();
+
+    return destinations;
+  };
+
+  loadDestinations = async () => {
+    const { values, arrayHelpers, fieldPath } = this.props;
+    const { actionDeleted } = this.state;
+    this.setState({ loadingDestinations: true });
+    try {
+      const destinations = await this.getDestinations();
+      this.setState({ destinations, loadingDestinations: false });
+
+      const monitorType = _.get(arrayHelpers, 'form.values.monitor_type', MONITOR_TYPE.QUERY_LEVEL);
+      const initialActionValues = _.cloneDeep(FORMIK_INITIAL_ACTION_VALUES);
+      switch (monitorType) {
+        case MONITOR_TYPE.BUCKET_LEVEL:
+          _.set(
+            initialActionValues,
+            'message_template.source',
+            DEFAULT_MESSAGE_SOURCE.BUCKET_LEVEL_MONITOR
+          );
+          break;
+        case MONITOR_TYPE.QUERY_LEVEL:
+        case MONITOR_TYPE.CLUSTER_METRICS:
+          _.set(
+            initialActionValues,
+            'message_template.source',
+            DEFAULT_MESSAGE_SOURCE.QUERY_LEVEL_MONITOR
+          );
+          break;
+      }
+
+      // If actions is not defined  If user choose to delete actions, it will not override customer's preferences.
+      if (destinations.length > 0 && !_.get(values, `${fieldPath}actions`) && !actionDeleted) {
+        arrayHelpers.insert(0, initialActionValues);
       }
     } catch (err) {
       console.error(err);

diff --git a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js
@@ -15,7 +15,7 @@ import {
   DestinationsControls,
   DeleteConfirmation,
 } from '../../components/DestinationsList';
-import { staticColumns, MAX_DESTINATIONS } from './utils/constants';
+import { staticColumns } from './utils/constants';
 import { getURLQueryParams } from './utils/helpers';
 import { isDeleteAllowedQuery } from './utils/deleteHelpers';
 import { INDEX } from '../../../../../utils/constants';
@@ -280,7 +280,7 @@ class DestinationsList extends React.Component {
     const pagination = {
       pageIndex: page,
       pageSize: size,
-      totalItemCount: Math.min(MAX_DESTINATIONS, totalDestinations),
+      totalItemCount: totalDestinations,
       pageSizeOptions: [5, 10, 20, 50],
     };
     const sorting = {

diff --git a/public/pages/Destinations/containers/DestinationsList/utils/constants.js b/public/pages/Destinations/containers/DestinationsList/utils/constants.js
@@ -14,7 +14,7 @@ export const DEFAULT_QUERY_PARAMS = {
   type: 'ALL',
 };
 
-export const MAX_DESTINATIONS = 200;
+export const MAX_DESTINATIONS = 5000;
 
 export const staticColumns = [
   {