From 49a972171f899cafac8606d2b2968ebac016afd7 Mon Sep 17 00:00:00 2001 From: Vignesh Shanmugam Date: Tue, 5 Aug 2025 15:21:46 -0700 Subject: [PATCH] perf(synthetics): improve use public location logic (#229391) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary + Optimize the heavy calls during rendering of Synthetics monitors overview page by memoizing the relevant calls and avoiding potential rerenders. Performance improvements speaks for themselves, attaching the context below ## Scenario With 5000 monitors - going to `app/synthetics` page - No scrolling - Just page load ### Before **M1 Mac - No throttle** Screenshot 2025-07-24 at 5 39 02 PM **Slowdown on 1x throttled M1 Mac** Screenshot 2025-07-24 at 5 43 31 PM **Midtier desktop/ Highend Mobile** Screenshot 2025-07-24 at 5 42 30 PM ### After **M1 Mac - No throttle** Screenshot 2025-07-24 at 4 56 54 PM **Midtier desktop/ Highend Mobile / Slowdown on 1x throttled M1 Mac** Screenshot 2025-07-24 at 6 01 38 PM ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. --------- Co-authored-by: vigneshshanmugam Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Shahzad (cherry picked from commit 93daf0db56f1e4d0bce80437cce9ba56e9ae00ee) --- .../hooks/use_can_use_public_loc_id.ts | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_can_use_public_loc_id.ts b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_can_use_public_loc_id.ts index 8aa1cd4416f1f..b0d8318e8c56c 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_can_use_public_loc_id.ts +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/hooks/use_can_use_public_loc_id.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { useMemo } from 'react'; import { useSelector } from 'react-redux'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { selectServiceLocationsState } from '../../../state'; @@ -13,23 +14,31 @@ import { useEnablement } from '../../../hooks'; export const useCanUsePublicLocById = (configId: string) => { const { allConfigs } = useSelector(selectOverviewStatus); - const { isServiceAllowed } = useEnablement(); - const { locations: allLocations } = useSelector(selectServiceLocationsState); + const kibana = useKibana(); - const listIds = allLocations?.filter((loc) => loc.isServiceManaged).map((loc) => loc.id) ?? []; + const canUsePublicLocations = useMemo( + () => Boolean(kibana.services?.application?.capabilities.uptime.elasticManagedLocationsEnabled), + [kibana.services?.application?.capabilities.uptime.elasticManagedLocationsEnabled] + ); - const hasManagedLocation = allConfigs?.filter( - (mon) => mon.configId === configId && listIds.includes(mon.locationId) + const managedLocationIds = useMemo( + () => new Set(allLocations?.filter((loc) => loc.isServiceManaged).map((loc) => loc.id) ?? []), + [allLocations] ); - const canUsePublicLocations = - useKibana().services?.application?.capabilities.uptime.elasticManagedLocationsEnabled ?? true; + const hasManagedLocation = useMemo( + () => + allConfigs?.some( + (mon) => mon.configId === configId && managedLocationIds.has(mon.locationId) + ) ?? false, + [allConfigs, configId, managedLocationIds] + ); if (!isServiceAllowed) { return false; } - return hasManagedLocation ? !!canUsePublicLocations : true; + return hasManagedLocation ? canUsePublicLocations : true; };