[Stack Monitoring] Add breadcrumbs to ES pages after migrating from Angular (#114555)

* add breadcrumbs

* fix bad merge

* fix types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_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';
@@ -18,7 +18,7 @@ import { SetupModeContext } from '../../../components/setup_mode/setup_mode_cont
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
 import { ELASTICSEARCH_SYSTEM_ID, RULE_CCR_READ_EXCEPTIONS } from '../../../../common/constants';
-
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 interface SetupModeProps {
   setupMode: any;
   flyoutComponent: any;
@@ -27,6 +27,7 @@ interface SetupModeProps {
 
 export const ElasticsearchCcrPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const { services } = useKibana<{ data: any }>();
 
   const clusterUuid = globalState.cluster_uuid;
@@ -37,6 +38,14 @@ export const ElasticsearchCcrPage: React.FC<ComponentProps> = ({ clusters }) =>
   const [data, setData] = useState({} as any);
   const [alerts, setAlerts] = useState<AlertsByName>({});
 
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+      });
+    }
+  }, [cluster, generateBreadcrumbs]);
+
   const title = i18n.translate('xpack.monitoring.elasticsearch.ccr.title', {
     defaultMessage: 'Elasticsearch - Ccr',
   });

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx

@@ -4,8 +4,9 @@
  * 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 { useParams } from 'react-router-dom';
+import { find } from 'lodash';
 import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { PageTemplate } from '../page_template';
@@ -19,6 +20,7 @@ import { SetupModeContext } from '../../../components/setup_mode/setup_mode_cont
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
 import { ELASTICSEARCH_SYSTEM_ID, RULE_CCR_READ_EXCEPTIONS } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 interface SetupModeProps {
   setupMode: any;
@@ -26,14 +28,28 @@ interface SetupModeProps {
   bottomBarComponent: any;
 }
 
-export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = () => {
+export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
   const { services } = useKibana<{ data: any }>();
+  const [data, setData] = useState({} as any);
   const { index, shardId }: { index: string; shardId: string } = useParams();
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
 
   const clusterUuid = globalState.cluster_uuid;
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  }) as any;
+
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+        name: 'ccr',
+        instance: `Index: ${index} Shard: ${shardId}`,
+      });
+    }
+  }, [cluster, generateBreadcrumbs, index, shardId]);
   const ccs = globalState.ccs;
-  const [data, setData] = useState({} as any);
   const [alerts, setAlerts] = useState<AlertsByName>({});
 
   const title = i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.title', {

x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_advanced_page.tsx

@@ -4,8 +4,9 @@
  * 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 { useParams } from 'react-router-dom';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
@@ -19,9 +20,11 @@ import { AdvancedIndex } from '../../../components/elasticsearch/index/advanced'
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
 import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
-export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = () => {
+export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const { services } = useKibana<{ data: any }>();
   const { index }: { index: string } = useParams();
   const { zoomInfo, onBrush } = useCharts();
@@ -29,6 +32,20 @@ export const ElasticsearchIndexAdvancedPage: React.FC<ComponentProps> = () => {
   const [data, setData] = useState({} as any);
   const [alerts, setAlerts] = useState<AlertsByName>({});
 
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  }) as any;
+
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+        name: 'indices',
+        instance: index,
+      });
+    }
+  }, [cluster, generateBreadcrumbs, index]);
+
   const title = i18n.translate('xpack.monitoring.elasticsearch.index.advanced.title', {
     defaultMessage: 'Elasticsearch - Indices - {indexName} - Advanced',
     values: {

x-pack/plugins/monitoring/public/application/pages/elasticsearch/index_page.tsx

@@ -4,9 +4,10 @@
  * 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 { useParams } from 'react-router-dom';
+import { find } from 'lodash';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
 // @ts-ignore
@@ -23,9 +24,11 @@ import { labels } from '../../../components/elasticsearch/shard_allocation/lib/l
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
 import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
-export const ElasticsearchIndexPage: React.FC<ComponentProps> = () => {
+export const ElasticsearchIndexPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const { services } = useKibana<{ data: any }>();
   const { index }: { index: string } = useParams();
   const { zoomInfo, onBrush } = useCharts();
@@ -34,6 +37,19 @@ export const ElasticsearchIndexPage: React.FC<ComponentProps> = () => {
   const [indexLabel, setIndexLabel] = useState(labels.index as any);
   const [nodesByIndicesData, setNodesByIndicesData] = useState([]);
   const [alerts, setAlerts] = useState<AlertsByName>({});
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  }) as any;
+
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+        name: 'indices',
+        instance: index,
+      });
+    }
+  }, [cluster, generateBreadcrumbs, index]);
 
   const title = i18n.translate('xpack.monitoring.elasticsearch.index.overview.title', {
     defaultMessage: 'Elasticsearch - Indices - {indexName} - Overview',

x-pack/plugins/monitoring/public/application/pages/elasticsearch/indices_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';
@@ -19,16 +19,18 @@ import { useLocalStorage } from '../../hooks/use_local_storage';
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
 import { ELASTICSEARCH_SYSTEM_ID, RULE_LARGE_SHARD_SIZE } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 export const ElasticsearchIndicesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const { services } = useKibana<{ data: any }>();
   const { getPaginationTableProps } = useTable('elasticsearch.indices');
   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 [showSystemIndices, setShowSystemIndices] = useLocalStorage<boolean>(
     'showSystemIndices',
@@ -36,6 +38,14 @@ export const ElasticsearchIndicesPage: React.FC<ComponentProps> = ({ clusters })
   );
   const [alerts, setAlerts] = useState<AlertsByName>({});
 
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+      });
+    }
+  }, [cluster, generateBreadcrumbs]);
+
   const title = i18n.translate('xpack.monitoring.elasticsearch.indices.routeTitle', {
     defaultMessage: 'Elasticsearch - Indices',
   });

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ml_jobs_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 { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
 import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
 import { useTable } from '../../hooks/use_table';
 import type { MLJobs } from '../../../types';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 
 interface SetupModeProps {
@@ -26,13 +27,22 @@ interface SetupModeProps {
 
 export const ElasticsearchMLJobsPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const { services } = useKibana<{ data: any }>();
   const { getPaginationTableProps } = useTable('elasticsearch.mlJobs');
   const clusterUuid = globalState.cluster_uuid;
   const ccs = globalState.ccs;
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,
-  });
+  }) as any;
+
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+      });
+    }
+  }, [cluster, generateBreadcrumbs]);
   const [data, setData] = useState({} as any);
 
   const title = i18n.translate('xpack.monitoring.elasticsearch.mlJobs.routeTitle', {

x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_advanced_page.tsx

@@ -4,8 +4,9 @@
  * 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 { useParams } from 'react-router-dom';
+import { find } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { ItemTemplate } from './item_template';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
@@ -24,19 +25,35 @@ import {
   RULE_DISK_USAGE,
   RULE_MEMORY_USAGE,
 } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
-export const ElasticsearchNodeAdvancedPage: React.FC<ComponentProps> = () => {
+export const ElasticsearchNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const { zoomInfo, onBrush } = useCharts();
+  const [data, setData] = useState({} as any);
 
   const { node }: { node: string } = useParams();
   const { services } = useKibana<{ data: any }>();
 
   const clusterUuid = globalState.cluster_uuid;
   const ccs = globalState.ccs;
-  const [data, setData] = useState({} as any);
   const [alerts, setAlerts] = useState<AlertsByName>({});
 
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  }) as any;
+
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+        name: 'nodes',
+        instance: data?.nodeSummary?.name,
+      });
+    }
+  }, [cluster, generateBreadcrumbs, data?.nodeSummary?.name]);
+
   const title = i18n.translate('xpack.monitoring.elasticsearch.node.advanced.title', {
     defaultMessage: 'Elasticsearch - Nodes - {nodeName} - Advanced',
     values: {

x-pack/plugins/monitoring/public/application/pages/elasticsearch/node_page.tsx

@@ -4,8 +4,9 @@
  * 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 { useParams } from 'react-router-dom';
+import { find } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { ItemTemplate } from './item_template';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
@@ -30,9 +31,11 @@ import {
   RULE_DISK_USAGE,
   RULE_MEMORY_USAGE,
 } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
-export const ElasticsearchNodePage: React.FC<ComponentProps> = () => {
+export const ElasticsearchNodePage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const { zoomInfo, onBrush } = useCharts();
   const [showSystemIndices, setShowSystemIndices] = useLocalStorage<boolean>(
     'showSystemIndices',
@@ -42,10 +45,23 @@ export const ElasticsearchNodePage: React.FC<ComponentProps> = () => {
 
   const { node }: { node: string } = useParams();
   const { services } = useKibana<{ data: any }>();
+  const [data, setData] = useState({} as any);
 
   const clusterUuid = globalState.cluster_uuid;
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  }) as any;
+
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inElasticsearch: true,
+        name: 'nodes',
+        instance: data?.nodeSummary?.name,
+      });
+    }
+  }, [cluster, generateBreadcrumbs, data?.nodeSummary?.name]);
   const ccs = globalState.ccs;
-  const [data, setData] = useState({} as any);
   const [nodesByIndicesData, setNodesByIndicesData] = useState([]);
 
   const title = i18n.translate('xpack.monitoring.elasticsearch.node.overview.title', {