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

This commit is contained in:
Phillip Burch 2021-10-21 15:23:35 -05:00 committed by GitHub
parent 29e5a3a37f
commit 00f05ce207
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 93 additions and 13 deletions

View file

@ -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}

View file

@ -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();

View file

@ -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}

View file

@ -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}

View file

@ -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;

View file

@ -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}

View file

@ -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;