[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>

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 */}
+                  <RouteInit
+                    path="/kibana"
+                    component={KibanaOverviewPage}
+                    codePaths={[CODE_PATH_KIBANA]}
+                    fetchAllClusters={false}
+                  />
+
                   <Redirect
                     to={{
                       pathname: '/loading',

x-pack/plugins/monitoring/public/application/pages/kibana/kibana_template.tsx

@@ -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" />;
+};

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 (
+    <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>
+  );
+};