From 61a8c39d6b77122668c4e884b80a77c609071c5f Mon Sep 17 00:00:00 2001 From: Jovan Cvetkovic Date: Thu, 1 Dec 2022 16:24:29 +0100 Subject: [PATCH 1/3] [BUG] Issues in the UI above 200 destinations #195 Signed-off-by: Jovan Cvetkovic --- .../CreateTrigger/components/Action/Action.js | 3 +- .../ConfigureActions/ConfigureActions.js | 70 +++++++++++++------ .../DestinationsList/DestinationsList.js | 4 +- public/utils/constants.js | 2 +- 4 files changed, 51 insertions(+), 28 deletions(-) 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..2955f16d1 100644 --- a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js +++ b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js @@ -84,10 +84,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_QUERY_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_QUERY_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 +153,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..84ae46818 100644 --- a/public/utils/constants.js +++ b/public/utils/constants.js @@ -62,7 +62,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_QUERY_RESULT_SIZE = 5000; export const MONITOR_GROUP_BY = 'ui_metadata.search.groupBy'; From b945ba4a647791279e18b9672f7b92607bb2b716 Mon Sep 17 00:00:00 2001 From: Jovan Cvetkovic Date: Thu, 1 Dec 2022 16:24:29 +0100 Subject: [PATCH 2/3] [BUG] Issues in the UI above 200 destinations #195 Signed-off-by: Jovan Cvetkovic --- .../CreateTrigger/components/Action/Action.js | 3 +- .../ConfigureActions/ConfigureActions.js | 70 +++++++++++++------ .../DestinationsList/DestinationsList.js | 4 +- public/utils/constants.js | 2 +- 4 files changed, 51 insertions(+), 28 deletions(-) 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..2955f16d1 100644 --- a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js +++ b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js @@ -84,10 +84,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_QUERY_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_QUERY_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 +153,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..84ae46818 100644 --- a/public/utils/constants.js +++ b/public/utils/constants.js @@ -62,7 +62,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_QUERY_RESULT_SIZE = 5000; export const MONITOR_GROUP_BY = 'ui_metadata.search.groupBy'; From a6e796f31753f5a6619a1066376ffef32cc67ff6 Mon Sep 17 00:00:00 2001 From: Jovan Cvetkovic Date: Fri, 2 Dec 2022 08:18:48 +0100 Subject: [PATCH 3/3] [BUG] Issues in the UI above 200 destinations #195 Signed-off-by: Jovan Cvetkovic --- .../containers/ConfigureActions/ConfigureActions.js | 5 +++-- public/utils/constants.js | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js index 2955f16d1..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'; @@ -97,7 +98,7 @@ class ConfigureActions extends React.Component { const getChannels = async () => { const getChannelsQuery = { from_index: index, - max_items: MAX_QUERY_RESULT_SIZE, + max_items: MAX_CHANNELS_RESULT_SIZE, config_type: CHANNEL_TYPES, sort_field: 'name', sort_order: 'asc', @@ -117,7 +118,7 @@ class ConfigureActions extends React.Component { ); if (channelsResponse.total && channels.length < channelsResponse.total) { - index += MAX_QUERY_RESULT_SIZE; + index += MAX_CHANNELS_RESULT_SIZE; await getChannels(); } }; diff --git a/public/utils/constants.js b/public/utils/constants.js index 84ae46818..c6aae5e80 100644 --- a/public/utils/constants.js +++ b/public/utils/constants.js @@ -62,7 +62,8 @@ export const MONITOR_INPUT_DETECTOR_ID = `inputs.${INPUTS_DETECTOR_ID}`; export const AD_PREVIEW_DAYS = 7; -export const MAX_QUERY_RESULT_SIZE = 5000; +export const MAX_QUERY_RESULT_SIZE = 200; +export const MAX_CHANNELS_RESULT_SIZE = 5000; export const MONITOR_GROUP_BY = 'ui_metadata.search.groupBy';