diff --git a/x-pack/plugins/monitoring/public/application/index.tsx b/x-pack/plugins/monitoring/public/application/index.tsx
index dea8d18bb65b..acdf3b0986a6 100644
--- a/x-pack/plugins/monitoring/public/application/index.tsx
+++ b/x-pack/plugins/monitoring/public/application/index.tsx
@@ -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 */}
+
+
= ({ ...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 ;
+};
diff --git a/x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx b/x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx
new file mode 100644
index 000000000000..2356011a3f77
--- /dev/null
+++ b/x-pack/plugins/monitoring/public/application/pages/kibana/overview.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export const KibanaOverviewPage: React.FC = ({ clusters }) => {
+ const globalState = useContext(GlobalStateContext);
+ const { services } = useKibana<{ data: any }>();
+ const { generate: generateBreadcrumbs } = useContext(BreadcrumbContainer.Context);
+ const [data, setData] = useState();
+ 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 (
+
+
+
+ );
+};