From 063864d67e7372d7adf2a1f398129f8d5b7a687c Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 2 Oct 2025 10:42:05 -0600 Subject: [PATCH 1/2] [dashboard] fixs controls cause double fetch (#237169) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes https://github.com/elastic/kibana/issues/237147 PR updates dashboard to wait until controls are ready before rendering panels. This prevents a double fetch when panels would fetch data while controls where building filters and then fetch data again once controls filters are available. This PR introduces a small performance degradation to dashboards with controls. Panels will not start rendering until controls have finished initializing. This is a better performance trade-off then the current behavior of issuing a new round of requests once controls are ready. ### Testing * install sample web logs * create new dashboard * add options list control on field `machine.os.keyword` * Select `ios` in control * add metric vis with count * save dashboard * open dashboard filter network requests to `ese`. Ensure metric chart only makes a single request Screenshot 2025-10-01 at 12 39 45 PM --------- Co-authored-by: Elastic Machine (cherry picked from commit 7f7bd4fd3b5d731ba9f2e073f4a2a82efad0cd4c) # Conflicts: # src/platform/plugins/shared/dashboard/public/dashboard_api/control_group_manager.ts # src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts # src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts # src/platform/plugins/shared/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx # src/platform/plugins/shared/dashboard/public/dashboard_renderer/viewport/dashboard_viewport.test.tsx --- .../public/dashboard_api/get_dashboard_api.ts | 17 ++++++++++++++++- .../dashboard/public/dashboard_api/types.ts | 1 + .../component/viewport/dashboard_viewport.tsx | 17 +++++++---------- 3 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts b/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts index 9ee38abb73d31..190900661fe6f 100644 --- a/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts +++ b/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts @@ -12,7 +12,7 @@ import { ControlGroupApi, ControlGroupSerializedState } from '@kbn/controls-plug import { EmbeddablePackageState } from '@kbn/embeddable-plugin/public'; import { StateComparators } from '@kbn/presentation-publishing'; import { omit } from 'lodash'; -import { BehaviorSubject, debounceTime, merge } from 'rxjs'; +import { BehaviorSubject, debounceTime, merge, first, skipWhile, switchMap } from 'rxjs'; import { v4 } from 'uuid'; import { getReferencesForControls, @@ -271,6 +271,21 @@ export function getDashboardApi({ }, setControlGroupApi: (controlGroupApi: ControlGroupApi) => controlGroupApi$.next(controlGroupApi), + untilControlsInitialized: async () => { + return new Promise((resolve) => { + controlGroupApi$ + .pipe( + skipWhile((controlGroupApi) => !controlGroupApi), + switchMap(async (controlGroupApi) => { + await controlGroupApi?.untilInitialized(); + }), + first() + ) + .subscribe(() => { + resolve(); + }); + }); + } } as DashboardInternalApi, cleanup: () => { dataLoadingManager.cleanup(); diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts b/src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts index 094ebbe62c73b..535123a7752c0 100644 --- a/src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts +++ b/src/platform/plugins/shared/dashboard/public/dashboard_api/types.ts @@ -189,4 +189,5 @@ export interface DashboardInternalApi { getSerializedStateForControlGroup: () => SerializedPanelState; registerChildApi: (api: DefaultEmbeddableApi) => void; setControlGroupApi: (controlGroupApi: ControlGroupApi) => void; + untilControlsInitialized: () => Promise; } diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx b/src/platform/plugins/shared/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx index 857dbcba901fd..1152abcea94ef 100644 --- a/src/platform/plugins/shared/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx +++ b/src/platform/plugins/shared/dashboard/public/dashboard_container/component/viewport/dashboard_viewport.tsx @@ -79,23 +79,18 @@ export const DashboardViewport = ({ }; }, [controlGroupApi]); - // Bug in main where panels are loaded before control filters are ready - // Want to migrate to react embeddable controls with same behavior - // TODO - do not load panels until control filters are ready - /* - const [dashboardInitialized, setDashboardInitialized] = useState(false); + const [controlsReady, setControlsReady] = useState(false); useEffect(() => { let ignore = false; - dashboard.untilContainerInitialized().then(() => { + dashboardInternalApi.untilControlsInitialized().then(() => { if (!ignore) { - setDashboardInitialized(true); + setControlsReady(true); } }); return () => { ignore = true; }; - }, [dashboard]); - */ + }, [dashboardInternalApi]); return (
- + {viewMode === 'print' || controlsReady ? ( + + ) : null}
); From b429ae35f4aa2a8a3310515c639f27a5cab01f51 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 2 Oct 2025 18:24:08 +0000 Subject: [PATCH 2/2] [CI] Auto-commit changed files from 'node scripts/eslint_all_files --no-cache --fix' --- .../shared/dashboard/public/dashboard_api/get_dashboard_api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts b/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts index 190900661fe6f..4eb16e4ec25ad 100644 --- a/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts +++ b/src/platform/plugins/shared/dashboard/public/dashboard_api/get_dashboard_api.ts @@ -285,7 +285,7 @@ export function getDashboardApi({ resolve(); }); }); - } + }, } as DashboardInternalApi, cleanup: () => { dataLoadingManager.cleanup();