From 3d5fd4996d8d562ff9e32c388305d2f43323e925 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 23 Oct 2024 19:41:45 +0000 Subject: [PATCH] fix: data source picker is remounted multiple times (#1131) Signed-off-by: SuZhou-Joe (cherry picked from commit 7deec899da935484f1a48de3dbb29f4d74dc4f51) Signed-off-by: github-actions[bot] --- .../DataSourceAlertsCard/DataSourceAlertsCard.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx index 35b707ae8..d1677b181 100644 --- a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx +++ b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import { EuiBadge, EuiDescriptionList, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiLoadingContent, EuiPanel, EuiText, EuiTitle } from "@elastic/eui"; import { DataSourceManagementPluginSetup, DataSourceOption } from "../../../../../src/plugins/data_source_management/public"; import { getApplication, getClient, getNotifications, getSavedObjectsClient } from "../../services"; @@ -17,7 +17,13 @@ export interface DataSourceAlertsCardProps { } export const DataSourceAlertsCard: React.FC = ({ getDataSourceMenu }) => { - const DataSourceSelector = getDataSourceMenu?.(); + const DataSourceSelector = useMemo(() => { + if (getDataSourceMenu) { + return getDataSourceMenu(); + } + + return null; + }, [getDataSourceMenu]); const [loading, setLoading] = useState(false); const [dataSource, setDataSource] = useState({ label: 'Local cluster',