From 211aa7f1a3149803dae22524204d56ebf8ff5d7e Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Wed, 7 Dec 2022 16:08:41 -0800 Subject: [PATCH] [BUG] Issues in the UI above 200 destinations #195 (#386) (#410) Signed-off-by: Jovan Cvetkovic Signed-off-by: Jovan Cvetkovic (cherry picked from commit f30cabad1d621ae7ae7fcb718e46b7ea19117fb3) Co-authored-by: Jovan Cvetkovic --- .../ConfigureActions/ConfigureActions.js | 112 +++++++++++------- .../DestinationsList/DestinationsList.js | 4 +- .../DestinationsList/utils/constants.js | 2 +- 3 files changed, 73 insertions(+), 45 deletions(-) diff --git a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js index 19bfd1f22..e4c84db25 100644 --- 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 index 583118b3c..3db4b9212 100644 --- 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 index dd179cb6d..878c0f1d3 100644 --- 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 = [ {