[Stack Monitoring] React migration kibana overview (#113604)
* Create react Kibana template * React Kibana overview * Add breadcrumb to kibana overview * fix linting errors Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
edf16e6012
commit
163133827b
|
@ -23,7 +23,8 @@ 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 { KibanaOverviewPage } from './pages/kibana/overview';
|
||||
import { CODE_PATH_ELASTICSEARCH, CODE_PATH_BEATS, CODE_PATH_KIBANA } from '../../common/constants';
|
||||
import { ElasticsearchNodesPage } from './pages/elasticsearch/nodes_page';
|
||||
import { ElasticsearchIndicesPage } from './pages/elasticsearch/indices_page';
|
||||
import { ElasticsearchNodePage } from './pages/elasticsearch/node_page';
|
||||
|
@ -133,6 +134,14 @@ const MonitoringApp: React.FC<{
|
|||
fetchAllClusters={false}
|
||||
/>
|
||||
|
||||
{/* Kibana Views */}
|
||||
<RouteInit
|
||||
path="/kibana"
|
||||
component={KibanaOverviewPage}
|
||||
codePaths={[CODE_PATH_KIBANA]}
|
||||
fetchAllClusters={false}
|
||||
/>
|
||||
|
||||
<Redirect
|
||||
to={{
|
||||
pathname: '/loading',
|
||||
|
|
|
@ -0,0 +1,30 @@
|
|||
/*
|
||||
* 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, TabMenuItem, PageTemplateProps } from '../page_template';
|
||||
|
||||
export const KibanaTemplate: React.FC<PageTemplateProps> = ({ ...props }) => {
|
||||
const tabs: TabMenuItem[] = [
|
||||
{
|
||||
id: 'overview',
|
||||
label: i18n.translate('xpack.monitoring.kibanaNavigation.overviewLinkText', {
|
||||
defaultMessage: 'Overview',
|
||||
}),
|
||||
route: '/kibana',
|
||||
},
|
||||
{
|
||||
id: 'instances',
|
||||
label: i18n.translate('xpack.monitoring.kibanaNavigation.instancesLinkText', {
|
||||
defaultMessage: 'Instances',
|
||||
}),
|
||||
route: '/kibana/instances',
|
||||
},
|
||||
];
|
||||
|
||||
return <PageTemplate {...props} tabs={tabs} product="kibana" />;
|
||||
};
|
|
@ -0,0 +1,119 @@
|
|||
/*
|
||||
* 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, { useCallback, useContext, useEffect, useState } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { find } from 'lodash';
|
||||
import {
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent,
|
||||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { KibanaTemplate } from './kibana_template';
|
||||
import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
|
||||
import { GlobalStateContext } from '../../global_state_context';
|
||||
import { ComponentProps } from '../../route_init';
|
||||
// @ts-ignore
|
||||
import { MonitoringTimeseriesContainer } from '../../../components/chart';
|
||||
// @ts-ignore
|
||||
import { ClusterStatus } from '../../../components/kibana/cluster_status';
|
||||
import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
|
||||
import { useCharts } from '../../hooks/use_charts';
|
||||
|
||||
const KibanaOverview = ({ data }: { data: any }) => {
|
||||
const { zoomInfo, onBrush } = useCharts();
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<EuiPage>
|
||||
<EuiPageBody>
|
||||
<EuiPanel>
|
||||
<ClusterStatus stats={data.clusterStatus} />
|
||||
</EuiPanel>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiPageContent>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={true}>
|
||||
<MonitoringTimeseriesContainer
|
||||
series={data.metrics.kibana_cluster_requests}
|
||||
onBrush={onBrush}
|
||||
zoomInfo={zoomInfo}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={true}>
|
||||
<MonitoringTimeseriesContainer
|
||||
series={data.metrics.kibana_cluster_response_times}
|
||||
onBrush={onBrush}
|
||||
zoomInfo={zoomInfo}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
);
|
||||
};
|
||||
|
||||
export const KibanaOverviewPage: React.FC<ComponentProps> = ({ clusters }) => {
|
||||
const globalState = useContext(GlobalStateContext);
|
||||
const { services } = useKibana<{ data: any }>();
|
||||
const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
|
||||
const [data, setData] = useState<any>();
|
||||
const clusterUuid = globalState.cluster_uuid;
|
||||
const cluster = find(clusters, {
|
||||
cluster_uuid: clusterUuid,
|
||||
}) as any;
|
||||
const ccs = globalState.ccs;
|
||||
const title = i18n.translate('xpack.monitoring.kibana.overview.title', {
|
||||
defaultMessage: 'Kibana',
|
||||
});
|
||||
const pageTitle = i18n.translate('xpack.monitoring.kibana.overview.pageTitle', {
|
||||
defaultMessage: 'Kibana overview',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (cluster) {
|
||||
generateBreadcrumbs(cluster.cluster_name, {
|
||||
inKibana: true,
|
||||
});
|
||||
}
|
||||
}, [cluster, generateBreadcrumbs]);
|
||||
|
||||
const getPageData = useCallback(async () => {
|
||||
const bounds = services.data?.query.timefilter.timefilter.getBounds();
|
||||
const url = `../api/monitoring/v1/clusters/${clusterUuid}/kibana`;
|
||||
|
||||
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 (
|
||||
<KibanaTemplate
|
||||
data-test-subj="kibanaOverviewPage"
|
||||
getPageData={getPageData}
|
||||
title={title}
|
||||
pageTitle={pageTitle}
|
||||
>
|
||||
<KibanaOverview data={data} />
|
||||
</KibanaTemplate>
|
||||
);
|
||||
};
|
Loading…
Reference in a new issue