Beats instance page (#113086)
* Beats instance page * Remove unused getPaginationRouteOptions
This commit is contained in:
parent
c95f10d195
commit
ba4913829e
2 changed files with 105 additions and 0 deletions
|
@ -21,6 +21,7 @@ import { RouteInit } from './route_init';
|
|||
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 { CODE_PATH_ELASTICSEARCH, CODE_PATH_BEATS } from '../../common/constants';
|
||||
import { ElasticsearchNodesPage } from './pages/elasticsearch/nodes_page';
|
||||
import { MonitoringTimeContainer } from './hooks/use_monitoring_time';
|
||||
|
@ -94,6 +95,13 @@ const MonitoringApp: React.FC<{
|
|||
/>
|
||||
|
||||
{/* Beats Views */}
|
||||
<RouteInit
|
||||
path="/beats/beats"
|
||||
component={BeatsInstancesPage}
|
||||
codePaths={[CODE_PATH_BEATS]}
|
||||
fetchAllClusters={false}
|
||||
/>
|
||||
|
||||
<RouteInit
|
||||
path="/beats"
|
||||
component={BeatsOverviewPage}
|
||||
|
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
* 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 { GlobalStateContext } from '../../global_state_context';
|
||||
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
import { useTable } from '../../hooks/use_table';
|
||||
import { BeatsTemplate } from './beats_template';
|
||||
// @ts-ignore
|
||||
import { Listing } from '../../../components/beats/listing';
|
||||
import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
|
||||
import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
|
||||
interface SetupModeProps {
|
||||
setupMode: any;
|
||||
flyoutComponent: any;
|
||||
bottomBarComponent: any;
|
||||
}
|
||||
|
||||
export const BeatsInstancesPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const { getPaginationTableProps } = useTable('beats.instances');
|
||||
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 title = i18n.translate('xpack.monitoring.beats.routeTitle', { defaultMessage: 'Beats' });
|
||||
|
||||
const pageTitle = i18n.translate('xpack.monitoring.beats.listing.pageTitle', {
|
||||
defaultMessage: 'Beats listing',
|
||||
});
|
||||
|
||||
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/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]);
|
||||
|
||||
return (
|
||||
<BeatsTemplate
|
||||
title={title}
|
||||
pageTitle={pageTitle}
|
||||
getPageData={getPageData}
|
||||
data-test-subj="beatsListingPage"
|
||||
cluster={cluster}
|
||||
>
|
||||
<div data-test-subj="monitoringBeatsInstancesApp">
|
||||
<SetupModeRenderer
|
||||
render={({ setupMode, flyoutComponent, bottomBarComponent }: SetupModeProps) => (
|
||||
<SetupModeContext.Provider value={{ setupModeSupported: true }}>
|
||||
{flyoutComponent}
|
||||
<Listing
|
||||
stats={data.stats}
|
||||
data={data.listing}
|
||||
setupMode={setupMode}
|
||||
{...getPaginationTableProps()}
|
||||
/>
|
||||
{bottomBarComponent}
|
||||
</SetupModeContext.Provider>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</BeatsTemplate>
|
||||
);
|
||||
};
|
Loading…
Reference in a new issue