diff --git a/public/pages/CreateTrigger/components/Action/Action.js b/public/pages/CreateTrigger/components/Action/Action.js index bb1ae8d9f..d085a16c6 100644 --- a/public/pages/CreateTrigger/components/Action/Action.js +++ b/public/pages/CreateTrigger/components/Action/Action.js @@ -78,7 +78,7 @@ const Action = ({ // Just a swap correct fields. arrayHelpers.replace(index, { ...action, - destination_id: options[0].value, + destination_id: options[0]?.value, }); }, onBlur: (e, field, form) => { @@ -96,7 +96,6 @@ const Action = ({ ), rowHeight: 45, - async: true, isLoading: loadingDestinations, }} /> diff --git a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js index ea2e51f42..85b685d5e 100644 --- a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js +++ b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js @@ -17,6 +17,7 @@ import { import { getAllowList } from '../../../Destinations/utils/helpers'; import { MAX_QUERY_RESULT_SIZE, + MAX_CHANNELS_RESULT_SIZE, MONITOR_TYPE, OS_NOTIFICATION_PLUGIN, } from '../../../../utils/constants'; @@ -84,10 +85,54 @@ class ConfigureActions extends React.Component { } } + /** + * Returns all channels in consecutive requests until all channels are returned + * @returns {Promise<*[]>} + */ + getChannels = async () => { + const { plugins } = this.props; + const hasNotificationPlugin = plugins.indexOf(OS_NOTIFICATION_PLUGIN) !== -1; + + let channels = []; + let index = 0; + const getChannels = async () => { + const getChannelsQuery = { + from_index: index, + max_items: MAX_CHANNELS_RESULT_SIZE, + config_type: CHANNEL_TYPES, + sort_field: 'name', + sort_order: 'asc', + }; + + const channelsResponse = await this.props.notificationService.getChannels(getChannelsQuery); + + // TODO: Might still need to filter the allowed channel types here if the backend doesn't + // since Notifications uses its own setting + channels = channels.concat( + channelsResponse.items.map((channel) => ({ + label: `[Channel] ${channel.name}`, + value: channel.config_id, + type: channel.config_type, + description: channel.description, + })) + ); + + if (channelsResponse.total && channels.length < channelsResponse.total) { + index += MAX_CHANNELS_RESULT_SIZE; + await getChannels(); + } + }; + + if (hasNotificationPlugin) { + await getChannels(); + } + + return channels; + }; + loadDestinations = async (searchText = '') => { - const { httpClient, values, arrayHelpers, notifications, fieldPath, plugins } = this.props; + const { httpClient, values, arrayHelpers, notifications, fieldPath } = this.props; const { allowList, actionDeleted } = this.state; - const hasNotificationPlugin = plugins.indexOf(OS_NOTIFICATION_PLUGIN) !== -1; this.setState({ loadingDestinations: true }); try { @@ -109,27 +154,7 @@ class ConfigureActions extends React.Component { backendErrorNotification(notifications, 'load', 'destinations', response.err); } - let channels = []; - if (hasNotificationPlugin) { - // Fetch Notification Channels - const getChannelsQuery = { - from_index: 0, - max_items: MAX_QUERY_RESULT_SIZE, - query: searchText, - config_type: CHANNEL_TYPES, - sort_field: 'name', - sort_order: 'asc', - }; - const channelsResponse = await this.props.notificationService.getChannels(getChannelsQuery); - // TODO: Might still need to filter the allowed channel types here if the backend doesn't - // since Notifications uses its own setting - channels = channelsResponse.items.map((channel) => ({ - label: `[Channel] ${channel.name}`, - value: channel.config_id, - type: channel.config_type, - description: channel.description, - })); - } + let channels = await this.getChannels(); const destinationsAndChannels = destinations.concat(channels); const channelOptionsByType = getChannelOptions(destinationsAndChannels, CHANNEL_TYPES); diff --git a/public/pages/Destinations/containers/DestinationsList/DestinationsList.js b/public/pages/Destinations/containers/DestinationsList/DestinationsList.js index f27b76179..63452970b 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'; @@ -292,7 +292,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/utils/constants.js b/public/utils/constants.js index 58e8c585e..c6aae5e80 100644 --- a/public/utils/constants.js +++ b/public/utils/constants.js @@ -63,6 +63,7 @@ export const MONITOR_INPUT_DETECTOR_ID = `inputs.${INPUTS_DETECTOR_ID}`; export const AD_PREVIEW_DAYS = 7; export const MAX_QUERY_RESULT_SIZE = 200; +export const MAX_CHANNELS_RESULT_SIZE = 5000; export const MONITOR_GROUP_BY = 'ui_metadata.search.groupBy';