diff --git a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx
index c58aaa5dffb04e..d1500d5d9587bf 100644
--- a/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx
+++ b/x-pack/plugins/monitoring/public/application/pages/elasticsearch/overview.tsx
@@ -10,7 +10,8 @@ import { find } from 'lodash';
 import { ElasticsearchTemplate } from './elasticsearch_template';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { GlobalStateContext } from '../../contexts/global_state_context';
-import { ElasticsearchOverview } from '../../../components/elasticsearch';
+// @ts-ignore
+import { ElasticsearchOverviewReact } from '../../../components/elasticsearch';
 import { ComponentProps } from '../../route_init';
 import { useCharts } from '../../hooks/use_charts';
 import { BreadcrumbContainer } from '../../hooks/use_breadcrumbs';
@@ -78,7 +79,7 @@ export const ElasticsearchOverviewPage: React.FC<ComponentProps> = ({ clusters }
     const shardActivityData = shardActivity && filterShardActivityData(shardActivity); // no filter on data = null
 
     return (
-      <ElasticsearchOverview
+      <ElasticsearchOverviewReact
         clusterStatus={clusterStatus}
         metrics={metrics}
         logs={logs}
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/index.ts b/x-pack/plugins/monitoring/public/components/elasticsearch/index.ts
index 6a7dbe609c433a..657617c698696b 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/index.ts
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index.ts
@@ -6,6 +6,7 @@
  */
 
 export { ElasticsearchOverview } from './overview';
+export { ElasticsearchOverviewReact } from './overview';
 export { ElasticsearchNodes } from './nodes';
 export { NodeReact } from './node';
 export { ElasticsearchIndices } from './indices';
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/overview/index.ts b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/index.ts
index 73bba0033e16a2..dd7e63c14fc53c 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/overview/index.ts
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/index.ts
@@ -6,3 +6,5 @@
  */
 
 export { ElasticsearchOverview } from './overview';
+// @ts-ignore
+export { ElasticsearchOverviewReact } from './overview_react';
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview_react.js b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview_react.js
new file mode 100644
index 00000000000000..ff4e531e31744e
--- /dev/null
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview_react.js
@@ -0,0 +1,66 @@
+/*
+ * 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 { ClusterStatus } from '../cluster_status';
+import { ShardActivityReact } from '../shard_activity';
+import { MonitoringTimeseriesContainer } from '../../chart';
+import {
+  EuiPage,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiPageBody,
+  EuiPageContent,
+} from '@elastic/eui';
+import { Logs } from '../../logs/logs';
+
+export function ElasticsearchOverviewReact({
+  clusterStatus,
+  metrics,
+  logs,
+  cluster,
+  shardActivity,
+  ...props
+}) {
+  const metricsToShow = [
+    metrics.cluster_search_request_rate,
+    metrics.cluster_query_latency,
+    metrics.cluster_index_request_rate,
+    metrics.cluster_index_latency,
+  ];
+
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPanel>
+          <ClusterStatus stats={clusterStatus} />
+        </EuiPanel>
+        <EuiSpacer size="m" />
+        <EuiPageContent>
+          <EuiFlexGrid columns={2} gutterSize="s">
+            {metricsToShow.map((metric, index) => (
+              <EuiFlexItem key={index}>
+                <MonitoringTimeseriesContainer series={metric} {...props} />
+                <EuiSpacer />
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGrid>
+        </EuiPageContent>
+        <EuiSpacer size="m" />
+        <EuiPanel>
+          <Logs logs={logs} clusterUuid={cluster.cluster_uuid} />
+        </EuiPanel>
+        <EuiSpacer size="m" />
+        <EuiPanel>
+          <ShardActivityReact data={shardActivity} {...props} />
+        </EuiPanel>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/index.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/index.js
index bcdbbe715f86e7..8c0b8b4c9c82de 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/index.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/index.js
@@ -6,3 +6,4 @@
  */
 
 export { ShardActivity } from './shard_activity';
+export { ShardActivityReact } from './shard_activity_react';
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/parse_props.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/parse_props.js
index 76f22583af0c8d..1f0ed47adf3876 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/parse_props.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/parse_props.js
@@ -37,18 +37,26 @@ export const parseProps = (props) => {
     target,
     translog,
     type,
+    timezone,
   } = props;
 
   const { files, size } = index;
-  const injector = Legacy.shims.getAngularInjector();
-  const timezone = injector.get('config').get('dateFormat:tz');
+
+  let thisTimezone;
+  // react version passes timezone while Angular uses injector
+  if (!timezone) {
+    const injector = Legacy.shims.getAngularInjector();
+    thisTimezone = injector.get('config').get('dateFormat:tz');
+  } else {
+    thisTimezone = timezone;
+  }
 
   return {
     name: indexName || index.name,
     shard: `${id} / ${isPrimary ? 'Primary' : 'Replica'}`,
     relocationType: type === 'PRIMARY_RELOCATION' ? 'Primary Relocation' : normalizeString(type),
     stage: normalizeString(stage),
-    startTime: formatDateTimeLocal(startTimeInMillis, timezone),
+    startTime: formatDateTimeLocal(startTimeInMillis, thisTimezone),
     totalTime: formatMetric(Math.floor(totalTimeInMillis / 1000), '00:00:00'),
     isCopiedFromPrimary: !isPrimary || type === 'PRIMARY_RELOCATION',
     sourceName: source.name === undefined ? 'n/a' : source.name,
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity_react.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity_react.js
new file mode 100644
index 00000000000000..cc219ff0fff321
--- /dev/null
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity_react.js
@@ -0,0 +1,156 @@
+/*
+ * 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, { Fragment } from 'react';
+import { EuiText, EuiTitle, EuiLink, EuiSpacer, EuiSwitch } from '@elastic/eui';
+import { EuiMonitoringTable } from '../../table';
+import { RecoveryIndex } from './recovery_index';
+import { TotalTime } from './total_time';
+import { SourceDestination } from './source_destination';
+import { FilesProgress, BytesProgress, TranslogProgress } from './progress';
+import { parseProps } from './parse_props';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+
+const columns = [
+  {
+    name: i18n.translate('xpack.monitoring.kibana.shardActivity.indexTitle', {
+      defaultMessage: 'Index',
+    }),
+    field: 'name',
+    render: (_name, shard) => <RecoveryIndex {...shard} />,
+  },
+  {
+    name: i18n.translate('xpack.monitoring.kibana.shardActivity.stageTitle', {
+      defaultMessage: 'Stage',
+    }),
+    field: 'stage',
+  },
+  {
+    name: i18n.translate('xpack.monitoring.kibana.shardActivity.totalTimeTitle', {
+      defaultMessage: 'Total Time',
+    }),
+    field: null,
+    render: (shard) => <TotalTime {...shard} />,
+  },
+  {
+    name: i18n.translate('xpack.monitoring.kibana.shardActivity.sourceDestinationTitle', {
+      defaultMessage: 'Source / Destination',
+    }),
+    field: null,
+    render: (shard) => <SourceDestination {...shard} />,
+  },
+  {
+    name: i18n.translate('xpack.monitoring.kibana.shardActivity.filesTitle', {
+      defaultMessage: 'Files',
+    }),
+    field: null,
+    render: (shard) => <FilesProgress {...shard} />,
+  },
+  {
+    name: i18n.translate('xpack.monitoring.kibana.shardActivity.bytesTitle', {
+      defaultMessage: 'Bytes',
+    }),
+    field: null,
+    render: (shard) => <BytesProgress {...shard} />,
+  },
+  {
+    name: i18n.translate('xpack.monitoring.kibana.shardActivity.translogTitle', {
+      defaultMessage: 'Translog',
+    }),
+    field: null,
+    render: (shard) => <TranslogProgress {...shard} />,
+  },
+];
+
+export const ShardActivityReact = (props) => {
+  const {
+    data: rawData,
+    sorting,
+    pagination,
+    onTableChange,
+    toggleShardActivityHistory,
+    showShardActivityHistory,
+  } = props;
+  const { services } = useKibana();
+  const timezone = services.uiSettings?.get('dateFormat:tz');
+  const getNoDataMessage = () => {
+    if (showShardActivityHistory) {
+      return i18n.translate('xpack.monitoring.elasticsearch.shardActivity.noDataMessage', {
+        defaultMessage:
+          'There are no historical shard activity records for the selected time range.',
+      });
+    }
+    return (
+      <Fragment>
+        <FormattedMessage
+          id="xpack.monitoring.elasticsearch.shardActivity.noActiveShardRecoveriesMessage.completedRecoveriesLinkTextProblem"
+          defaultMessage="There are no active shard recoveries for this cluster."
+        />
+        <br />
+        <FormattedMessage
+          id="xpack.monitoring.elasticsearch.shardActivity.noActiveShardRecoveriesMessage.completedRecoveriesLinkTextSolution"
+          defaultMessage="Try viewing {shardActivityHistoryLink}."
+          values={{
+            shardActivityHistoryLink: (
+              <EuiLink onClick={toggleShardActivityHistory}>
+                <FormattedMessage
+                  id="xpack.monitoring.elasticsearch.shardActivity.noActiveShardRecoveriesMessage.completedRecoveriesLinkText"
+                  defaultMessage="completed recoveries"
+                />
+              </EuiLink>
+            ),
+          }}
+        />
+      </Fragment>
+    );
+  };
+
+  const rows = rawData.map((data) => parseProps({ ...data, timezone }));
+
+  return (
+    <Fragment>
+      <EuiText>
+        <EuiTitle size="s">
+          <h2>
+            <FormattedMessage
+              id="xpack.monitoring.elasticsearch.shardActivityTitle"
+              defaultMessage="Shard Activity"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiText>
+      <EuiSpacer />
+      <EuiSwitch
+        id="monitoring_completed_recoveries"
+        label={
+          <FormattedMessage
+            id="xpack.monitoring.elasticsearch.shardActivity.completedRecoveriesLabel"
+            defaultMessage="Completed recoveries"
+          />
+        }
+        onChange={toggleShardActivityHistory}
+        checked={showShardActivityHistory}
+      />
+      <EuiSpacer />
+      <EuiMonitoringTable
+        className="esShardActivityTable"
+        rows={rows}
+        columns={columns}
+        message={getNoDataMessage()}
+        sorting={sorting}
+        search={false}
+        pagination={pagination}
+        onTableChange={onTableChange}
+        executeQueryOptions={{
+          defaultFields: ['name'],
+        }}
+      />
+    </Fragment>
+  );
+};