Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Stack Monitoring] Beats Overview view migration #112377

Merged
merged 14 commits into from
Sep 27, 2021
Merged
12 changes: 11 additions & 1 deletion x-pack/plugins/monitoring/public/application/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ import { createPreserveQueryHistory } from './preserve_query_history';
import { RouteInit } from './route_init';
import { NoDataPage } from './pages/no_data';
import { ElasticsearchOverviewPage } from './pages/elasticsearch/overview';
import { CODE_PATH_ELASTICSEARCH } from '../../common/constants';
import { BeatsOverviewPage } from './pages/beats/overview';
import { CODE_PATH_ELASTICSEARCH, CODE_PATH_BEATS } from '../../common/constants';
import { MonitoringTimeContainer } from './hooks/use_monitoring_time';
import { BreadcrumbContainer } from './hooks/use_breadcrumbs';

Expand Down Expand Up @@ -83,6 +84,15 @@ const MonitoringApp: React.FC<{
codePaths={[CODE_PATH_ELASTICSEARCH]}
fetchAllClusters={false}
/>

{/* Beats Views */}
<RouteInit
path="/beats"
component={BeatsOverviewPage}
codePaths={[CODE_PATH_BEATS]}
fetchAllClusters={false}
/>

<Redirect
to={{
pathname: '/loading',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React from 'react';
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<BeatsTemplateProps> = ({ cluster, ...props }) => {
const tabs: TabMenuItem[] = [
{
id: 'overview',
label: i18n.translate('xpack.monitoring.beatsNavigation.overviewLinkText', {
defaultMessage: 'Overview',
}),
route: '/beats',
},
{
id: 'instances',
label: i18n.translate('xpack.monitoring.beatsNavigation.instancesLinkText', {
defaultMessage: 'Instances',
}),
route: '/beats/beats',
},
];

return <PageTemplate {...props} tabs={tabs} product="beats" />;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React, { useContext, useState, useCallback, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { find } from 'lodash';
import { ComponentProps } from '../../route_init';
import { BeatsTemplate } from './beats_template';
import { GlobalStateContext } from '../../global_state_context';
import { useCharts } from '../../hooks/use_charts';
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
// @ts-ignore
import { BeatsOverview } from '../../../components/beats/overview';
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';

export const BeatsOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
const globalState = useContext(GlobalStateContext);
const { zoomInfo, onBrush } = useCharts();
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(null);

const title = i18n.translate('xpack.monitoring.beats.overview.routeTitle', {
defaultMessage: 'Beats - Overview',
});

const pageTitle = i18n.translate('xpack.monitoring.beats.overview.pageTitle', {
defaultMessage: 'Beats overview',
});

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

const response = await services.http?.fetch(url, {
method: 'POST',
body: JSON.stringify({
ccs,
timeRange: {
min: bounds.min.toISOString(),
max: bounds.max.toISOString(),
},
}),
});

setData(response);
}, [ccs, clusterUuid, services.data?.query.timefilter.timefilter, services.http]);

const renderOverview = (overviewData: any) => {
if (overviewData === null) {
return null;
}
return <BeatsOverview {...overviewData} onBrush={onBrush} zoomInfo={zoomInfo} />;
};

return (
<BeatsTemplate
title={title}
pageTitle={pageTitle}
getPageData={getPageData}
data-test-subj="beatsOverviewPage"
cluster={cluster}
>
<div data-test-subj="beatsOverviewPage">{renderOverview(data)}</div>
</BeatsTemplate>
);
};