diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx index 652fe83231441..1fee700b4d920 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/nodes_page.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { useContext, useState, useCallback } from 'react'; +import React, { useContext, useState, useCallback, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; import { find } from 'lodash'; import { ElasticsearchTemplate } from './elasticsearch_template'; @@ -16,6 +16,7 @@ import { ComponentProps } from '../../route_init'; import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer'; import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context'; import { useTable } from '../../hooks/use_table'; +import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; interface SetupModeProps { setupMode: any; @@ -27,13 +28,14 @@ export const ElasticsearchNodesPage: React.FC = ({ clusters }) = const globalState = useContext(GlobalStateContext); const { showCgroupMetricsElasticsearch } = useContext(ExternalConfigContext); const { services } = useKibana<{ data: any }>(); + const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context); const { getPaginationRouteOptions, updateTotalItemCount, getPaginationTableProps } = useTable('elasticsearch.nodes'); const clusterUuid = globalState.cluster_uuid; const ccs = globalState.ccs; const cluster = find(clusters, { cluster_uuid: clusterUuid, - }); + }) as any; const [data, setData] = useState({} as any); const title = i18n.translate('xpack.monitoring.elasticsearch.nodes.routeTitle', { @@ -44,6 +46,14 @@ export const ElasticsearchNodesPage: React.FC = ({ clusters }) = defaultMessage: 'Elasticsearch nodes', }); + useEffect(() => { + if (cluster) { + generateBreadcrumbs(cluster.cluster_name, { + inElasticsearch: true, + }); + } + }, [cluster, generateBreadcrumbs]); + const getPageData = useCallback(async () => { const bounds = services.data?.query.timefilter.timefilter.getBounds(); const url = `../api/monitoring/v1/clusters/${clusterUuid}/elasticsearch/nodes`; diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx index 4e885229b436a..3334c7e7b880a 100644 --- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { useContext, useState, useCallback } from 'react'; +import React, { useContext, useState, useCallback, useEffect } from 'react'; import { i18n } from '@kbn/i18n'; import { find } from 'lodash'; import { ElasticsearchTemplate } from './elasticsearch_template'; @@ -13,16 +13,18 @@ import { GlobalStateContext } from '../../global_state_context'; import { ElasticsearchOverview } from '../../../components/elasticsearch'; import { ComponentProps } from '../../route_init'; import { useCharts } from '../../hooks/use_charts'; +import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; export const ElasticsearchOverviewPage: React.FC = ({ clusters }) => { const globalState = useContext(GlobalStateContext); const { zoomInfo, onBrush } = useCharts(); const { services } = useKibana<{ data: any }>(); + const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context); const clusterUuid = globalState.cluster_uuid; const ccs = globalState.ccs; const cluster = find(clusters, { cluster_uuid: clusterUuid, - }); + }) as any; const [data, setData] = useState(null); const [showShardActivityHistory, setShowShardActivityHistory] = useState(false); const toggleShardActivityHistory = () => { @@ -42,6 +44,14 @@ export const ElasticsearchOverviewPage: React.FC = ({ clusters } defaultMessage: 'Elasticsearch overview', }); + useEffect(() => { + if (cluster) { + generateBreadcrumbs(cluster.cluster_name, { + inElasticsearch: true, + }); + } + }, [cluster, generateBreadcrumbs]); + const getPageData = useCallback(async () => { const bounds = services.data?.query.timefilter.timefilter.getBounds(); const url = `../api/monitoring/v1/clusters/${clusterUuid}/elasticsearch`;