[Stack Monitoring] De-angularize CCR pages

x-pack/plugins/monitoring/public/application/index.tsx

@@ -33,6 +33,8 @@ import { ElasticsearchIndexPage } from './pages/elasticsearch/index_page';
 import { ElasticsearchIndexAdvancedPage } from './pages/elasticsearch/index_advanced_page';
 import { ElasticsearchNodePage } from './pages/elasticsearch/node_page';
 import { ElasticsearchNodeAdvancedPage } from './pages/elasticsearch/node_advanced_page';
+import { ElasticsearchCcrPage } from './pages/elasticsearch/ccr_page';
+import { ElasticsearchCcrShardPage } from './pages/elasticsearch/ccr_shard_page';
 import { MonitoringTimeContainer } from './hooks/use_monitoring_time';
 import { BreadcrumbContainer } from './hooks/use_breadcrumbs';
 import {
@@ -96,6 +98,20 @@ const MonitoringApp: React.FC<{
                   />
 
                   {/* ElasticSearch Views */}
+                  <RouteInit
+                    path="/elasticsearch/ccr/:index/shard/:shardId"
+                    component={ElasticsearchCcrShardPage}
+                    codePaths={[CODE_PATH_ELASTICSEARCH]}
+                    fetchAllClusters={false}
+                  />
+
+                  <RouteInit
+                    path="/elasticsearch/ccr"
+                    component={ElasticsearchCcrPage}
+                    codePaths={[CODE_PATH_ELASTICSEARCH]}
+                    fetchAllClusters={false}
+                  />
+
                   <RouteInit
                     path="/elasticsearch/indices/:index/advanced"
                     component={ElasticsearchIndexAdvancedPage}

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_page.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 } from 'react';
+import { i18n } from '@kbn/i18n';
+import { find } from 'lodash';
+import { ElasticsearchTemplate } from './elasticsearch_template';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { GlobalStateContext } from '../../global_state_context';
+// @ts-ignore
+import { Ccr } from '../../../components/elasticsearch/ccr';
+import { ComponentProps } from '../../route_init';
+import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
+
+interface SetupModeProps {
+  setupMode: any;
+  flyoutComponent: any;
+  bottomBarComponent: any;
+}
+
+export const ElasticsearchCcrPage: React.FC<ComponentProps> = ({ clusters }) => {
+  const globalState = useContext(GlobalStateContext);
+  const { services } = useKibana<{ data: any }>();
+
+  const clusterUuid = globalState.cluster_uuid;
+  const cluster = find(clusters, {
+    cluster_uuid: clusterUuid,
+  }) as any;
+  const ccs = globalState.ccs;
+  const [data, setData] = useState({} as any);
+
+  const title = i18n.translate('xpack.monitoring.elasticsearch.ccr.title', {
+    defaultMessage: 'Elasticsearch - Ccr',
+  });
+
+  const pageTitle = i18n.translate('xpack.monitoring.elasticsearch.ccr.pageTitle', {
+    defaultMessage: 'Elasticsearch Ccr',
+  });
+
+  const getPageData = useCallback(async () => {
+    const bounds = services.data?.query.timefilter.timefilter.getBounds();
+    const url = `../api/monitoring/v1/clusters/${clusterUuid}/elasticsearch/ccr`;
+
+    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 (
+    <ElasticsearchTemplate
+      title={title}
+      pageTitle={pageTitle}
+      getPageData={getPageData}
+      data-test-subj="elasticsearchCcrPage"
+      cluster={cluster}
+    >
+      <SetupModeRenderer
+        render={({ flyoutComponent, bottomBarComponent }: SetupModeProps) => (
+          <SetupModeContext.Provider value={{ setupModeSupported: true }}>
+            {flyoutComponent}
+            <Ccr data={data.data} alerts={{}} />
+            {bottomBarComponent}
+          </SetupModeContext.Provider>
+        )}
+      />
+    </ElasticsearchTemplate>
+  );
+};

x-pack/plugins/monitoring/public/application/pages/elasticsearch/ccr_shard_page.tsx

@@ -0,0 +1,92 @@
+/*
+ * 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 } from 'react';
+import { useParams } from 'react-router-dom';
+import { get } from 'lodash';
+import { i18n } from '@kbn/i18n';
+import { PageTemplate } from '../page_template';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { GlobalStateContext } from '../../global_state_context';
+// @ts-ignore
+import { CcrShardReact } from '../../../components/elasticsearch/ccr_shard';
+import { ComponentProps } from '../../route_init';
+import { SetupModeRenderer } from '../../setup_mode/setup_mode_renderer';
+import { SetupModeContext } from '../../../components/setup_mode/setup_mode_context';
+
+interface SetupModeProps {
+  setupMode: any;
+  flyoutComponent: any;
+  bottomBarComponent: any;
+}
+
+export const ElasticsearchCcrShardPage: React.FC<ComponentProps> = ({ clusters }) => {
+  const globalState = useContext(GlobalStateContext);
+  const { services } = useKibana<{ data: any }>();
+  const { index, shardId }: { index: string; shardId: string } = useParams();
+
+  const clusterUuid = globalState.cluster_uuid;
+  const ccs = globalState.ccs;
+  const [data, setData] = useState({} as any);
+
+  const title = i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.title', {
+    defaultMessage: 'Elasticsearch - Ccr - Shard',
+  });
+
+  const pageTitle = i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.pageTitle', {
+    defaultMessage: 'Elasticsearch Ccr Shard - Index: {followerIndex} Shard: {shardId}',
+    values: {
+      followerIndex: get(data, 'stat.follower.index', get(data, 'stat.follower_index')),
+      shardId: get(data, 'stat.follower.shard.number', get(data, 'stat.shard_id')),
+    },
+  });
+
+  const instance = i18n.translate('xpack.monitoring.elasticsearch.ccr.shard.instanceTitle', {
+    defaultMessage: 'Index: {followerIndex} Shard: {shardId}',
+    values: {
+      followerIndex: get(data, 'stat.follower_index'),
+      shardId: get(data, 'stat.shard_id'),
+    },
+  });
+
+  const getPageData = useCallback(async () => {
+    const bounds = services.data?.query.timefilter.timefilter.getBounds();
+    const url = `../api/monitoring/v1/clusters/${clusterUuid}/elasticsearch/ccr/${index}/shard/${shardId}`;
+
+    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, index, shardId]);
+
+  return (
+    <PageTemplate
+      title={title}
+      pageTitle={pageTitle}
+      getPageData={getPageData}
+      data-test-subj="elasticsearchCcrShardPage"
+    >
+      <SetupModeRenderer
+        instance={instance}
+        render={({ flyoutComponent, bottomBarComponent }: SetupModeProps) => (
+          <SetupModeContext.Provider value={{ setupModeSupported: true }}>
+            {flyoutComponent}
+            <CcrShardReact {...data} alerts={{}} />
+            {bottomBarComponent}
+          </SetupModeContext.Provider>
+        )}
+      />
+    </PageTemplate>
+  );
+};