[Stack Monitoring] Fix missing breadcrumbs to logstash (#115780)

elastic · Oct 21, 2021 · 00f05ce · 00f05ce
1 parent 29e5a3a
commit 00f05ce
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 13 deletions.
diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/advanced.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/advanced.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, useMemo } from 'react';
+import React, { useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { find } from 'lodash';
 import {
@@ -32,6 +32,7 @@ import { useCharts } from '../../hooks/use_charts';
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
 import { RULE_LOGSTASH_VERSION_MISMATCH } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 export const LogStashNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -42,7 +43,9 @@ export const LogStashNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters })
   const ccs = globalState.ccs;
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,
-  });
+  }) as any;
+
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
 
   const [data, setData] = useState({} as any);
   const [alerts, setAlerts] = useState<AlertsByName>({});
@@ -108,6 +111,16 @@ export const LogStashNodeAdvancedPage: React.FC<ComponentProps> = ({ clusters })
     ];
   }, [data.metrics]);
 
+  useEffect(() => {
+    if (cluster && data.nodeSummary) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inLogstash: true,
+        instance: data.nodeSummary.host,
+        name: 'nodes',
+      });
+    }
+  }, [cluster, data, generateBreadcrumbs]);
+
   return (
     <LogstashTemplate
       instance={data}

diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/node.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/node.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, useMemo } from 'react';
+import React, { useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { find } from 'lodash';
 import { useRouteMatch } from 'react-router-dom';
@@ -33,16 +33,18 @@ import { useCharts } from '../../hooks/use_charts';
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
 import { RULE_LOGSTASH_VERSION_MISMATCH } from '../../../../common/constants';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 export const LogStashNodePage: React.FC<ComponentProps> = ({ clusters }) => {
   const match = useRouteMatch<{ uuid: string | undefined }>();
   const globalState = useContext(GlobalStateContext);
   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({} as any);
   const [alerts, setAlerts] = useState<AlertsByName>({});
   const { zoomInfo, onBrush } = useCharts();
@@ -60,6 +62,16 @@ export const LogStashNodePage: React.FC<ComponentProps> = ({ clusters }) => {
     },
   });
 
+  useEffect(() => {
+    if (cluster && data.nodeSummary) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inLogstash: true,
+        instance: data.nodeSummary.host,
+        name: 'nodes',
+      });
+    }
+  }, [cluster, data, generateBreadcrumbs]);
+
   const getPageData = useCallback(async () => {
     const url = `../api/monitoring/v1/clusters/${clusterUuid}/logstash/node/${match.params.uuid}`;
     const bounds = services.data?.query.timefilter.timefilter.getBounds();

diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/node_pipelines.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/node_pipelines.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';
 // @ts-ignore
@@ -25,6 +25,7 @@ import { useTable } from '../../hooks/use_table';
 // @ts-ignore
 import { PipelineListing } from '../../../components/logstash/pipeline_listing/pipeline_listing';
 import { useCharts } from '../../hooks/use_charts';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 export const LogStashNodePipelinesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -35,7 +36,9 @@ export const LogStashNodePipelinesPage: React.FC<ComponentProps> = ({ clusters }
   const { onBrush, zoomInfo } = useCharts();
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,
-  });
+  }) as any;
+
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
 
   const { getPaginationTableProps, getPaginationRouteOptions, updateTotalItemCount } =
     useTable('logstash.pipelines');
@@ -83,6 +86,16 @@ export const LogStashNodePipelinesPage: React.FC<ComponentProps> = ({ clusters }
     match.params.uuid,
   ]);
 
+  useEffect(() => {
+    if (cluster && data.nodeSummary) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inLogstash: true,
+        instance: data.nodeSummary.host,
+        name: 'nodes',
+      });
+    }
+  }, [cluster, data, generateBreadcrumbs]);
+
   return (
     <LogstashTemplate
       instance={data}

diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/nodes.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/nodes.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 { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
@@ -19,6 +19,7 @@ import { useTable } from '../../hooks/use_table';
 import { LOGSTASH_SYSTEM_ID, RULE_LOGSTASH_VERSION_MISMATCH } from '../../../../common/constants';
 import { AlertsByName } from '../../../alerts/types';
 import { fetchAlerts } from '../../../lib/fetch_alerts';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 interface SetupModeProps {
   setupMode: any;
@@ -31,9 +32,10 @@ export const LogStashNodesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const { services } = useKibana<{ data: any }>();
   const clusterUuid = globalState.cluster_uuid;
   const ccs = globalState.ccs;
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,
-  });
+  }) as any;
   const [data, setData] = useState({} as any);
   const [alerts, setAlerts] = useState<AlertsByName>({});
   const { getPaginationTableProps } = useTable('logstash.nodes');
@@ -75,6 +77,14 @@ export const LogStashNodesPage: React.FC<ComponentProps> = ({ clusters }) => {
     }
   }, [ccs, clusterUuid, services.data?.query.timefilter.timefilter, services.http]);
 
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inLogstash: true,
+      });
+    }
+  }, [cluster, generateBreadcrumbs]);
+
   return (
     <LogstashTemplate
       title={title}

diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/overview.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/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 { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
@@ -14,6 +14,7 @@ import { useCharts } from '../../hooks/use_charts';
 // @ts-ignore
 import { Overview } from '../../../components/logstash/overview';
 import { LogstashTemplate } from './logstash_template';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 export const LogStashOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -23,7 +24,8 @@ export const LogStashOverviewPage: React.FC<ComponentProps> = ({ clusters }) =>
   const ccs = globalState.ccs;
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,
-  });
+  }) as any;
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
   const [data, setData] = useState(null);
   // const [showShardActivityHistory, setShowShardActivityHistory] = useState(false);
 
@@ -53,6 +55,14 @@ export const LogStashOverviewPage: React.FC<ComponentProps> = ({ clusters }) =>
     setData(response);
   }, [ccs, clusterUuid, services.data?.query.timefilter.timefilter, services.http]);
 
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inLogstash: true,
+      });
+    }
+  }, [cluster, data, generateBreadcrumbs]);
+
   const renderOverview = (overviewData: any) => {
     if (overviewData === null) {
       return null;

diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/pipeline.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/pipeline.tsx
@@ -29,6 +29,7 @@ import { formatTimestampToDuration } from '../../../../common';
 import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
 import { getSafeForExternalLink } from '../../../lib/get_safe_for_external_link';
 import { PipelineVersions } from './pipeline_versions_dropdown';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 export const LogStashPipelinePage: React.FC<ComponentProps> = ({ clusters }) => {
   const match = useRouteMatch<{ id: string | undefined; hash: string | undefined }>();
@@ -43,7 +44,7 @@ export const LogStashPipelinePage: React.FC<ComponentProps> = ({ clusters }) =>
   const ccs = globalState.ccs;
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,
-  });
+  }) as any;
   const [data, setData] = useState({} as any);
   const [detailVertexId, setDetailVertexId] = useState<string | null>(null);
   const { updateTotalItemCount } = useTable('logstash.pipelines');
@@ -125,6 +126,7 @@ export const LogStashPipelinePage: React.FC<ComponentProps> = ({ clusters }) =>
   }, [data]);
 
   const timeseriesTooltipXValueFormatter = (xValue: any) => moment(xValue).format(dateFormat);
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
 
   const onVertexChange = useCallback(
     (vertex: any) => {
@@ -145,6 +147,15 @@ export const LogStashPipelinePage: React.FC<ComponentProps> = ({ clusters }) =>
     );
   }, [pipelineId, pipelineHash]);
 
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inLogstash: true,
+        page: 'pipeline',
+      });
+    }
+  }, [cluster, data, generateBreadcrumbs]);
+
   return (
     <LogstashTemplate
       tabsDisabled={true}

diff --git a/x-pack/plugins/monitoring/public/application/pages/logstash/pipelines.tsx b/x-pack/plugins/monitoring/public/application/pages/logstash/pipelines.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 { useKibana, useUiSetting } from '../../../../../../../src/plugins/kibana_react/public';
@@ -17,6 +17,7 @@ import { isPipelineMonitoringSupportedInVersion } from '../../../lib/logstash/pi
 import { PipelineListing } from '../../../components/logstash/pipeline_listing/pipeline_listing';
 import { LogstashTemplate } from './logstash_template';
 import { useTable } from '../../hooks/use_table';
+import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
 
 export const LogStashPipelinesPage: React.FC<ComponentProps> = ({ clusters }) => {
   const globalState = useContext(GlobalStateContext);
@@ -29,7 +30,7 @@ export const LogStashPipelinesPage: React.FC<ComponentProps> = ({ clusters }) =>
 
   const cluster = find(clusters, {
     cluster_uuid: clusterUuid,
-  });
+  }) as any;
   const [data, setData] = useState(null);
   const { getPaginationTableProps, getPaginationRouteOptions, updateTotalItemCount } =
     useTable('logstash.pipelines');
@@ -42,6 +43,8 @@ export const LogStashPipelinesPage: React.FC<ComponentProps> = ({ clusters }) =>
     defaultMessage: 'Logstash pipelines',
   });
 
+  const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
+
   const getPageData = useCallback(async () => {
     const bounds = services.data?.query.timefilter.timefilter.getBounds();
     const url = `../api/monitoring/v1/clusters/${clusterUuid}/logstash/pipelines`;
@@ -69,6 +72,14 @@ export const LogStashPipelinesPage: React.FC<ComponentProps> = ({ clusters }) =>
     updateTotalItemCount,
   ]);
 
+  useEffect(() => {
+    if (cluster) {
+      generateBreadcrumbs(cluster.cluster_name, {
+        inLogstash: true,
+      });
+    }
+  }, [cluster, data, generateBreadcrumbs]);
+
   const renderOverview = (pageData: any) => {
     if (pageData === null) {
       return null;