From 357257b12516d35e61e379d048eb15183cad8938 Mon Sep 17 00:00:00 2001
From: Nicolas Chaulet <nicolas.chaulet@elastic.co>
Date: Mon, 4 May 2020 15:33:59 -0400
Subject: [PATCH] [Ingest] Add data to Overview page (#65024) (#65122)

---
 .../common/types/rest_spec/agent.ts           |   2 +-
 .../hooks/use_request/agents.ts               |   9 +
 .../overview/components/agent_section.tsx     |  91 ++++++++++
 .../components/configuration_section.tsx      |  79 +++++++++
 .../components/datastream_section.tsx         | 101 +++++++++++
 .../components/integration_section.tsx        |  78 +++++++++
 .../overview/components/overview_panel.tsx    |  26 +++
 .../overview/components/overview_stats.tsx    |  23 +++
 .../sections/overview/index.tsx               | 163 +-----------------
 9 files changed, 417 insertions(+), 155 deletions(-)
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx
 create mode 100644 x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_stats.tsx

diff --git a/x-pack/plugins/ingest_manager/common/types/rest_spec/agent.ts b/x-pack/plugins/ingest_manager/common/types/rest_spec/agent.ts
index 64ed95db74f4c1..7214611ca9122d 100644
--- a/x-pack/plugins/ingest_manager/common/types/rest_spec/agent.ts
+++ b/x-pack/plugins/ingest_manager/common/types/rest_spec/agent.ts
@@ -152,7 +152,7 @@ export interface UpdateAgentRequest {
 
 export interface GetAgentStatusRequest {
   query: {
-    configId: string;
+    configId?: string;
   };
 }
 
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agents.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agents.ts
index 453bcf2bd81e7e..cad1791af41bea 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agents.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_request/agents.ts
@@ -62,6 +62,15 @@ export function sendGetAgentStatus(
   });
 }
 
+export function useGetAgentStatus(query: GetAgentStatusRequest['query'], options?: RequestOptions) {
+  return useRequest<GetAgentStatusResponse>({
+    method: 'get',
+    path: agentRouteService.getStatusPath(),
+    query,
+    ...options,
+  });
+}
+
 export function sendPutAgentReassign(
   agentId: string,
   body: PutAgentReassignRequest['body'],
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx
new file mode 100644
index 00000000000000..0f6d3c5b55ce69
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiTitle,
+  EuiButtonEmpty,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '@elastic/eui';
+import { OverviewPanel } from './overview_panel';
+import { OverviewStats } from './overview_stats';
+import { useLink, useGetAgentStatus } from '../../../hooks';
+import { FLEET_PATH } from '../../../constants';
+import { Loading } from '../../fleet/components';
+
+export const OverviewAgentSection = () => {
+  const agentStatusRequest = useGetAgentStatus({});
+
+  return (
+    <EuiFlexItem component="section">
+      <OverviewPanel>
+        <header>
+          <EuiTitle size="xs">
+            <h2>
+              <FormattedMessage
+                id="xpack.ingestManager.overviewPageFleetPanelTitle"
+                defaultMessage="Fleet"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiButtonEmpty size="xs" flush="right" href={useLink(FLEET_PATH)}>
+            <FormattedMessage
+              id="xpack.ingestManager.overviewPageFleetPanelAction"
+              defaultMessage="View agents"
+            />
+          </EuiButtonEmpty>
+        </header>
+        <OverviewStats>
+          {agentStatusRequest.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewAgentTotalTitle"
+                  defaultMessage="Total agents"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={agentStatusRequest.data?.results?.total ?? 0} />
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewAgentActiveTitle"
+                  defaultMessage="Active"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={agentStatusRequest.data?.results?.online ?? 0} />
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewAgentOfflineTitle"
+                  defaultMessage="Offline"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={agentStatusRequest.data?.results?.offline ?? 0} />
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewAgentErrorTitle"
+                  defaultMessage="Error"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={agentStatusRequest.data?.results?.error ?? 0} />
+              </EuiDescriptionListDescription>
+            </>
+          )}
+        </OverviewStats>
+      </OverviewPanel>
+    </EuiFlexItem>
+  );
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx
new file mode 100644
index 00000000000000..b74cac9a621769
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/configuration_section.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiTitle,
+  EuiButtonEmpty,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '@elastic/eui';
+import { OverviewPanel } from './overview_panel';
+import { OverviewStats } from './overview_stats';
+import { useLink, useGetDatasources } from '../../../hooks';
+import { AgentConfig } from '../../../types';
+import { AGENT_CONFIG_PATH } from '../../../constants';
+import { Loading } from '../../fleet/components';
+
+export const OverviewConfigurationSection: React.FC<{ agentConfigs: AgentConfig[] }> = ({
+  agentConfigs,
+}) => {
+  const datasourcesRequest = useGetDatasources({
+    page: 1,
+    perPage: 10000,
+  });
+
+  return (
+    <EuiFlexItem component="section">
+      <OverviewPanel>
+        <header>
+          <EuiTitle size="xs">
+            <h2>
+              <FormattedMessage
+                id="xpack.ingestManager.overviewPageConfigurationsPanelTitle"
+                defaultMessage="Configurations"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiButtonEmpty size="xs" flush="right" href={useLink(AGENT_CONFIG_PATH)}>
+            <FormattedMessage
+              id="xpack.ingestManager.overviewPageConfigurationsPanelAction"
+              defaultMessage="View configs"
+            />
+          </EuiButtonEmpty>
+        </header>
+        <OverviewStats>
+          {datasourcesRequest.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewConfigTotalTitle"
+                  defaultMessage="Total configs"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={agentConfigs.length} />
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewDatasourceTitle"
+                  defaultMessage="Data sources"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={datasourcesRequest.data?.total ?? 0} />
+              </EuiDescriptionListDescription>
+            </>
+          )}
+        </OverviewStats>
+      </OverviewPanel>
+    </EuiFlexItem>
+  );
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx
new file mode 100644
index 00000000000000..7d1f0598a27673
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx
@@ -0,0 +1,101 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiTitle,
+  EuiButtonEmpty,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '@elastic/eui';
+import { OverviewPanel } from './overview_panel';
+import { OverviewStats } from './overview_stats';
+import { useLink, useGetDataStreams, useStartDeps } from '../../../hooks';
+import { Loading } from '../../fleet/components';
+import { DATA_STREAM_PATH } from '../../../constants';
+
+export const OverviewDatastreamSection: React.FC = () => {
+  const datastreamRequest = useGetDataStreams();
+  const {
+    data: { fieldFormats },
+  } = useStartDeps();
+
+  const total = datastreamRequest.data?.data_streams?.length ?? 0;
+  let sizeBytes = 0;
+  const namespaces = new Set<string>();
+  if (datastreamRequest.data) {
+    datastreamRequest.data.data_streams.forEach(val => {
+      namespaces.add(val.namespace);
+      sizeBytes += val.size_in_bytes;
+    });
+  }
+
+  let size: string;
+  try {
+    const formatter = fieldFormats.getInstance('bytes');
+    size = formatter.convert(sizeBytes);
+  } catch (e) {
+    size = `${sizeBytes}b`;
+  }
+
+  return (
+    <EuiFlexItem component="section">
+      <OverviewPanel>
+        <header>
+          <EuiTitle size="xs">
+            <h2>
+              <FormattedMessage
+                id="xpack.ingestManager.overviewPageDataStreamsPanelTitle"
+                defaultMessage="Data streams"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiButtonEmpty size="xs" flush="right" href={useLink(DATA_STREAM_PATH)}>
+            <FormattedMessage
+              id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
+              defaultMessage="View data streams"
+            />
+          </EuiButtonEmpty>
+        </header>
+        <OverviewStats>
+          {datastreamRequest.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewDatastreamTotalTitle"
+                  defaultMessage="Data streams"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={total} />
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewDatastreamNamespacesTitle"
+                  defaultMessage="Namespaces"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={namespaces.size} />
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewDatastreamSizeTitle"
+                  defaultMessage="Total size"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>{size}</EuiDescriptionListDescription>
+            </>
+          )}
+        </OverviewStats>
+      </OverviewPanel>
+    </EuiFlexItem>
+  );
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx
new file mode 100644
index 00000000000000..f4c122af88371c
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/integration_section.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import {
+  EuiTitle,
+  EuiButtonEmpty,
+  EuiDescriptionListTitle,
+  EuiDescriptionListDescription,
+} from '@elastic/eui';
+import { OverviewPanel } from './overview_panel';
+import { OverviewStats } from './overview_stats';
+import { useLink, useGetPackages } from '../../../hooks';
+import { EPM_PATH } from '../../../constants';
+import { Loading } from '../../fleet/components';
+import { InstallationStatus } from '../../../types';
+
+export const OverviewIntegrationSection: React.FC = () => {
+  const packagesRequest = useGetPackages();
+
+  const total = packagesRequest.data?.response?.length ?? 0;
+  const installed =
+    packagesRequest.data?.response?.filter(p => p.status === InstallationStatus.installed)
+      ?.length ?? 0;
+  return (
+    <EuiFlexItem component="section">
+      <OverviewPanel>
+        <header>
+          <EuiTitle size="xs">
+            <h2>
+              <FormattedMessage
+                id="xpack.ingestManager.overviewPageIntegrationsPanelTitle"
+                defaultMessage="Integrations"
+              />
+            </h2>
+          </EuiTitle>
+          <EuiButtonEmpty size="xs" flush="right" href={useLink(EPM_PATH)}>
+            <FormattedMessage
+              id="xpack.ingestManager.overviewPageIntegrationsPanelAction"
+              defaultMessage="View integrations"
+            />
+          </EuiButtonEmpty>
+        </header>
+        <OverviewStats>
+          {packagesRequest.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewIntegrationsTotalTitle"
+                  defaultMessage="Total available"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={total} />
+              </EuiDescriptionListDescription>
+              <EuiDescriptionListTitle>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewIntegrationsInstalledTitle"
+                  defaultMessage="Installed"
+                />
+              </EuiDescriptionListTitle>
+              <EuiDescriptionListDescription>
+                <EuiI18nNumber value={installed} />
+              </EuiDescriptionListDescription>
+            </>
+          )}
+        </OverviewStats>
+      </OverviewPanel>
+    </EuiFlexItem>
+  );
+};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx
new file mode 100644
index 00000000000000..41d7a7a5f0bc3c
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import styled from 'styled-components';
+import { EuiPanel } from '@elastic/eui';
+
+export const OverviewPanel = styled(EuiPanel).attrs(props => ({
+  paddingSize: 'm',
+}))`
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid ${props => props.theme.eui.euiColorLightShade};
+    margin: -${props => props.theme.eui.paddingSizes.m} -${props => props.theme.eui.paddingSizes.m}
+      ${props => props.theme.eui.paddingSizes.m};
+    padding: ${props => props.theme.eui.paddingSizes.s} ${props => props.theme.eui.paddingSizes.m};
+  }
+
+  h2 {
+    padding: ${props => props.theme.eui.paddingSizes.xs} 0;
+  }
+`;
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_stats.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_stats.tsx
new file mode 100644
index 00000000000000..04de22c34fe6f4
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/overview_stats.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import styled from 'styled-components';
+import { EuiDescriptionList } from '@elastic/eui';
+
+export const OverviewStats = styled(EuiDescriptionList).attrs(props => ({
+  compressed: true,
+  textStyle: 'reverse',
+  type: 'column',
+}))`
+  & > * {
+    margin-top: ${props => props.theme.eui.paddingSizes.s} !important;
+
+    &:first-child,
+    &:nth-child(2) {
+      margin-top: 0 !important;
+    }
+  }
+`;
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
index 70d8e7d6882f88..3cd778fb4f0168 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
@@ -7,14 +7,8 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import {
   EuiButton,
-  EuiButtonEmpty,
   EuiBetaBadge,
-  EuiPanel,
   EuiText,
-  EuiTitle,
-  EuiDescriptionList,
-  EuiDescriptionListDescription,
-  EuiDescriptionListTitle,
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
@@ -22,42 +16,12 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { WithHeaderLayout } from '../../layouts';
-import { useLink, useGetAgentConfigs } from '../../hooks';
+import { useGetAgentConfigs } from '../../hooks';
 import { AgentEnrollmentFlyout } from '../fleet/agent_list_page/components';
-import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH, DATA_STREAM_PATH } from '../../constants';
-
-const OverviewPanel = styled(EuiPanel).attrs(props => ({
-  paddingSize: 'm',
-}))`
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid ${props => props.theme.eui.euiColorLightShade};
-    margin: -${props => props.theme.eui.paddingSizes.m} -${props => props.theme.eui.paddingSizes.m}
-      ${props => props.theme.eui.paddingSizes.m};
-    padding: ${props => props.theme.eui.paddingSizes.s} ${props => props.theme.eui.paddingSizes.m};
-  }
-
-  h2 {
-    padding: ${props => props.theme.eui.paddingSizes.xs} 0;
-  }
-`;
-
-const OverviewStats = styled(EuiDescriptionList).attrs(props => ({
-  compressed: true,
-  textStyle: 'reverse',
-  type: 'column',
-}))`
-  & > * {
-    margin-top: ${props => props.theme.eui.paddingSizes.s} !important;
-
-    &:first-child,
-    &:nth-child(2) {
-      margin-top: 0 !important;
-    }
-  }
-`;
+import { OverviewAgentSection } from './components/agent_section';
+import { OverviewConfigurationSection } from './components/configuration_section';
+import { OverviewIntegrationSection } from './components/integration_section';
+import { OverviewDatastreamSection } from './components/datastream_section';
 
 const AlphaBadge = styled(EuiBetaBadge)`
   vertical-align: top;
@@ -135,121 +99,12 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
       )}
 
       <EuiFlexGrid gutterSize="l" columns={2}>
-        <EuiFlexItem component="section">
-          <OverviewPanel>
-            <header>
-              <EuiTitle size="xs">
-                <h2>
-                  <FormattedMessage
-                    id="xpack.ingestManager.overviewPageIntegrationsPanelTitle"
-                    defaultMessage="Integrations"
-                  />
-                </h2>
-              </EuiTitle>
-              <EuiButtonEmpty size="xs" flush="right" href={useLink(EPM_PATH)}>
-                <FormattedMessage
-                  id="xpack.ingestManager.overviewPageIntegrationsPanelAction"
-                  defaultMessage="View integrations"
-                />
-              </EuiButtonEmpty>
-            </header>
-            <OverviewStats>
-              <EuiDescriptionListTitle>Total available</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>999</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Installed</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>1</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Updated available</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0</EuiDescriptionListDescription>
-            </OverviewStats>
-          </OverviewPanel>
-        </EuiFlexItem>
+        <OverviewIntegrationSection />
+        <OverviewConfigurationSection agentConfigs={agentConfigs} />
 
-        <EuiFlexItem component="section">
-          <OverviewPanel>
-            <header>
-              <EuiTitle size="xs">
-                <h2>
-                  <FormattedMessage
-                    id="xpack.ingestManager.overviewPageConfigurationsPanelTitle"
-                    defaultMessage="Configurations"
-                  />
-                </h2>
-              </EuiTitle>
-              <EuiButtonEmpty size="xs" flush="right" href={useLink(AGENT_CONFIG_PATH)}>
-                <FormattedMessage
-                  id="xpack.ingestManager.overviewPageConfigurationsPanelAction"
-                  defaultMessage="View configs"
-                />
-              </EuiButtonEmpty>
-            </header>
-            <OverviewStats>
-              <EuiDescriptionListTitle>Total configs</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>1</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Data sources</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>1</EuiDescriptionListDescription>
-            </OverviewStats>
-          </OverviewPanel>
-        </EuiFlexItem>
+        <OverviewAgentSection />
 
-        <EuiFlexItem component="section">
-          <OverviewPanel>
-            <header>
-              <EuiTitle size="xs">
-                <h2>
-                  <FormattedMessage
-                    id="xpack.ingestManager.overviewPageFleetPanelTitle"
-                    defaultMessage="Fleet"
-                  />
-                </h2>
-              </EuiTitle>
-              <EuiButtonEmpty size="xs" flush="right" href={useLink(FLEET_PATH)}>
-                <FormattedMessage
-                  id="xpack.ingestManager.overviewPageFleetPanelAction"
-                  defaultMessage="View agents"
-                />
-              </EuiButtonEmpty>
-            </header>
-            <OverviewStats>
-              <EuiDescriptionListTitle>Total agents</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Active</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Offline</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Error</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0</EuiDescriptionListDescription>
-            </OverviewStats>
-          </OverviewPanel>
-        </EuiFlexItem>
-
-        <EuiFlexItem component="section">
-          <OverviewPanel>
-            <header>
-              <EuiTitle size="xs">
-                <h2>
-                  <FormattedMessage
-                    id="xpack.ingestManager.overviewPageDataStreamsPanelTitle"
-                    defaultMessage="Data streams"
-                  />
-                </h2>
-              </EuiTitle>
-              <EuiButtonEmpty size="xs" flush="right" href={useLink(DATA_STREAM_PATH)}>
-                <FormattedMessage
-                  id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
-                  defaultMessage="View data streams"
-                />
-              </EuiButtonEmpty>
-            </header>
-            <OverviewStats>
-              <EuiDescriptionListTitle>Data streams</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Name spaces</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0</EuiDescriptionListDescription>
-              <EuiDescriptionListTitle>Total size</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>0 MB</EuiDescriptionListDescription>
-            </OverviewStats>
-          </OverviewPanel>
-        </EuiFlexItem>
+        <OverviewDatastreamSection />
       </EuiFlexGrid>
     </WithHeaderLayout>
   );