From 90bf4f89df73b6eafee2010675818a7c8a9adf7f Mon Sep 17 00:00:00 2001 From: Mat Schaffer Date: Thu, 30 Sep 2021 06:08:22 +0000 Subject: [PATCH 1/7] Add beat instance page --- .../monitoring/public/application/index.tsx | 8 ++ .../application/pages/beats/instance.tsx | 89 +++++++++++++++++++ 2 files changed, 97 insertions(+) create mode 100644 x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx index 690ea26319bd3..ae2f423f24b52 100644 --- a/x-pack/plugins/monitoring/public/application/index.tsx +++ b/x-pack/plugins/monitoring/public/application/index.tsx @@ -22,6 +22,7 @@ import { NoDataPage } from './pages/no_data'; import { ElasticsearchOverviewPage } from './pages/elasticsearch/overview'; import { BeatsOverviewPage } from './pages/beats/overview'; import { BeatsInstancesPage } from './pages/beats/instances'; +import { BeatsInstancePage } from './pages/beats/instance'; import { CODE_PATH_ELASTICSEARCH, CODE_PATH_BEATS } from '../../common/constants'; import { ElasticsearchNodesPage } from './pages/elasticsearch/nodes_page'; import { ElasticsearchIndicesPage } from './pages/elasticsearch/indices_page'; @@ -111,6 +112,13 @@ const MonitoringApp: React.FC<{ /> {/* Beats Views */} + + = ({ clusters }) => { + const { instance }: { instance: string } = useParams(); + + const globalState = useContext(GlobalStateContext); + const { services } = useKibana<{ data: any }>(); + const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context); + const { zoomInfo, onBrush } = useCharts(); + 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 [beatName, setBeatName] = useState(''); + + const title = i18n.translate('xpack.monitoring.beats.instance.routeTitle', { + defaultMessage: 'Beats - {instanceName} - Overview', + values: { + instanceName: beatName, + }, + }); + + const pageTitle = i18n.translate('xpack.monitoring.beats.instance.pageTitle', { + defaultMessage: 'Beat instance: {beatName}', + values: { + beatName, + }, + }); + + useEffect(() => { + if (cluster) { + generateBreadcrumbs(cluster.cluster_name, { + inBeats: true, + }); + } + }, [cluster, generateBreadcrumbs]); + + const getPageData = useCallback(async () => { + const bounds = services.data?.query.timefilter.timefilter.getBounds(); + const url = `../api/monitoring/v1/clusters/${clusterUuid}/beats/beat/${instance}`; + const response = await services.http?.fetch(url, { + method: 'POST', + body: JSON.stringify({ + ccs, + timeRange: { + min: bounds.min.toISOString(), + max: bounds.max.toISOString(), + }, + }), + }); + + setData(response); + setBeatName(response.summary.name); + }, [ccs, clusterUuid, instance, services.data?.query.timefilter.timefilter, services.http]); + + return ( + +
+ +
+ + ); +}; From cb40cc6e37cc51d6ebbca2c92518bdcd06fe6bed Mon Sep 17 00:00:00 2001 From: Mat Schaffer Date: Thu, 30 Sep 2021 06:18:27 +0000 Subject: [PATCH 2/7] Fix beat instance tabs to match angular --- .../application/pages/beats/instance.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx b/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx index 39b0a39a5a1cf..08c409c663280 100644 --- a/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx @@ -13,10 +13,10 @@ import { ComponentProps } from '../../route_init'; import { GlobalStateContext } from '../../global_state_context'; import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'; import { useCharts } from '../../hooks/use_charts'; -import { BeatsTemplate } from './beats_template'; // @ts-ignore import { Beat } from '../../../components/beats/beat'; import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; +import { PageTemplate, TabMenuItem } from '../page_template'; export const BeatsInstancePage: React.FC = ({ clusters }) => { const { instance }: { instance: string } = useParams(); @@ -73,17 +73,28 @@ export const BeatsInstancePage: React.FC = ({ clusters }) => { setBeatName(response.summary.name); }, [ccs, clusterUuid, instance, services.data?.query.timefilter.timefilter, services.http]); + const tabs: TabMenuItem[] = [ + { + id: 'overview', + label: i18n.translate('xpack.monitoring.beatsNavigation.instance.overviewLinkText', { + defaultMessage: 'Overview', + }), + route: `/beats/beat/${instance}`, + }, + ]; + return ( -
- + ); }; From 5cd6ef7bbfdf24741ddc84e6016526c9317bb99a Mon Sep 17 00:00:00 2001 From: Mat Schaffer Date: Thu, 30 Sep 2021 06:19:47 +0000 Subject: [PATCH 3/7] Remove unused cluster prop on beats template --- .../public/application/pages/beats/beats_template.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx b/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx index 90df1b49aa5d7..3823924dc41a8 100644 --- a/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx @@ -9,11 +9,7 @@ import { i18n } from '@kbn/i18n'; import { PageTemplate } from '../page_template'; import { TabMenuItem, PageTemplateProps } from '../page_template'; -interface BeatsTemplateProps extends PageTemplateProps { - cluster: any; -} - -export const BeatsTemplate: React.FC = ({ cluster, ...props }) => { +export const BeatsTemplate: React.FC = ({ ...props }) => { const tabs: TabMenuItem[] = [ { id: 'overview', From 82fed2ca1f9e9601cd09e29047428744d8bec9ed Mon Sep 17 00:00:00 2001 From: Mat Schaffer Date: Thu, 30 Sep 2021 06:27:23 +0000 Subject: [PATCH 4/7] Fix breadcrumbs --- .../monitoring/public/application/pages/beats/instance.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx b/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx index 08c409c663280..5c7c8e9b97397 100644 --- a/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx @@ -51,9 +51,10 @@ export const BeatsInstancePage: React.FC = ({ clusters }) => { if (cluster) { generateBreadcrumbs(cluster.cluster_name, { inBeats: true, + instance: beatName, }); } - }, [cluster, generateBreadcrumbs]); + }, [cluster, beatName, generateBreadcrumbs]); const getPageData = useCallback(async () => { const bounds = services.data?.query.timefilter.timefilter.getBounds(); From 6936241479f71d79a49a943202583a40a600f8cd Mon Sep 17 00:00:00 2001 From: Mat Schaffer Date: Thu, 30 Sep 2021 07:00:46 +0000 Subject: [PATCH 5/7] Remove unused cluster prop --- .../monitoring/public/application/pages/beats/instances.tsx | 1 - .../monitoring/public/application/pages/beats/overview.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx b/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx index 3f32e1abf9a88..873cc7e939269 100644 --- a/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/beats/instances.tsx @@ -81,7 +81,6 @@ export const BeatsInstancesPage: React.FC = ({ clusters }) => { pageTitle={pageTitle} getPageData={getPageData} data-test-subj="beatsListingPage" - cluster={cluster} >
= ({ clusters }) => { pageTitle={pageTitle} getPageData={getPageData} data-test-subj="beatsOverviewPage" - cluster={cluster} >
{renderOverview(data)}
From 76c66b274a1b81beea4b88d6d512df94a362470d Mon Sep 17 00:00:00 2001 From: Mat Schaffer Date: Thu, 30 Sep 2021 14:29:19 +0000 Subject: [PATCH 6/7] Use correct codepath --- x-pack/plugins/monitoring/public/application/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx index ae2f423f24b52..dea8d18bb65b1 100644 --- a/x-pack/plugins/monitoring/public/application/index.tsx +++ b/x-pack/plugins/monitoring/public/application/index.tsx @@ -115,7 +115,7 @@ const MonitoringApp: React.FC<{ From d6fb0b28e19d0adaad1f5adb33cc60dea9175ae5 Mon Sep 17 00:00:00 2001 From: Mat Schaffer Date: Thu, 30 Sep 2021 15:23:30 +0000 Subject: [PATCH 7/7] Switch beats instance back to use template Doesn't buy us a lot here, but mirrors the pattern used in logstash where it's a lot better than just calling PageTemplate directly. --- .../pages/beats/beats_template.tsx | 28 ++++++++++++++----- .../application/pages/beats/instance.tsx | 19 +++---------- 2 files changed, 25 insertions(+), 22 deletions(-) diff --git a/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx b/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx index 3823924dc41a8..3bab01af8ceb7 100644 --- a/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/beats/beats_template.tsx @@ -9,23 +9,37 @@ import { i18n } from '@kbn/i18n'; import { PageTemplate } from '../page_template'; import { TabMenuItem, PageTemplateProps } from '../page_template'; -export const BeatsTemplate: React.FC = ({ ...props }) => { - const tabs: TabMenuItem[] = [ - { +interface BeatsTemplateProps extends PageTemplateProps { + instance?: any; +} + +export const BeatsTemplate: React.FC = ({ instance, ...props }) => { + const tabs: TabMenuItem[] = []; + + if (!instance) { + tabs.push({ id: 'overview', label: i18n.translate('xpack.monitoring.beatsNavigation.overviewLinkText', { defaultMessage: 'Overview', }), route: '/beats', - }, - { + }); + tabs.push({ id: 'instances', label: i18n.translate('xpack.monitoring.beatsNavigation.instancesLinkText', { defaultMessage: 'Instances', }), route: '/beats/beats', - }, - ]; + }); + } else { + tabs.push({ + id: 'overview', + label: i18n.translate('xpack.monitoring.beatsNavigation.instance.overviewLinkText', { + defaultMessage: 'Overview', + }), + route: `/beats/beat/${instance}`, + }); + } return ; }; diff --git a/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx b/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx index 5c7c8e9b97397..f7ff03898fda6 100644 --- a/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx +++ b/x-pack/plugins/monitoring/public/application/pages/beats/instance.tsx @@ -16,7 +16,7 @@ import { useCharts } from '../../hooks/use_charts'; // @ts-ignore import { Beat } from '../../../components/beats/beat'; import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs'; -import { PageTemplate, TabMenuItem } from '../page_template'; +import { BeatsTemplate } from './beats_template'; export const BeatsInstancePage: React.FC = ({ clusters }) => { const { instance }: { instance: string } = useParams(); @@ -74,28 +74,17 @@ export const BeatsInstancePage: React.FC = ({ clusters }) => { setBeatName(response.summary.name); }, [ccs, clusterUuid, instance, services.data?.query.timefilter.timefilter, services.http]); - const tabs: TabMenuItem[] = [ - { - id: 'overview', - label: i18n.translate('xpack.monitoring.beatsNavigation.instance.overviewLinkText', { - defaultMessage: 'Overview', - }), - route: `/beats/beat/${instance}`, - }, - ]; - return ( -
- + ); };