diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
new file mode 100644
index 0000000000000..0f3ddee29fa44
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 styled from 'styled-components';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiText } from '@elastic/eui';
+
+const Message = styled(EuiText).attrs(props => ({
+ color: 'subdued',
+ textAlign: 'center',
+}))`
+ padding: ${props => props.theme.eui.paddingSizes.m};
+`;
+
+export const AlphaMessaging: React.FC<{}> = () => (
+
+
+
+
+
+
+ {' – '}
+
+
+
+
+);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts
index 5551bff2c8bde..bdc8f350f7108 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts
@@ -6,3 +6,4 @@
export { Loading } from './loading';
export { Error } from './error';
export { Header, HeaderProps } from './header';
+export { AlphaMessaging } from './alpha_messaging';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
index 26f2c85a291a3..f797c509bfca0 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
@@ -8,6 +8,7 @@ import styled from 'styled-components';
import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { Section } from '../sections';
+import { AlphaMessaging } from '../components';
import { useLink, useConfig } from '../hooks';
import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../constants';
@@ -19,6 +20,8 @@ interface Props {
const Container = styled.div`
min-height: calc(100vh - ${props => props.theme.eui.euiHeaderChildSize});
background: ${props => props.theme.eui.euiColorEmptyShade};
+ display: flex;
+ flex-direction: column;
`;
const Nav = styled.nav`
@@ -80,6 +83,7 @@ export const DefaultLayout: React.FunctionComponent = ({ section, childre
{children}
+
);
};
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx
index c77a50d95dca3..bb867718204b2 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx
@@ -10,6 +10,8 @@ import { Header, HeaderProps } from '../components';
const Page = styled(EuiPage)`
background: ${props => props.theme.eui.euiColorEmptyShade};
+ flex: 1;
+ align-items: flex-start;
`;
interface Props extends HeaderProps {
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/without_header.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/without_header.tsx
index cad98c5a0a7e1..9f9fa03942c09 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/without_header.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/without_header.tsx
@@ -9,6 +9,8 @@ import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
const Page = styled(EuiPage)`
background: ${props => props.theme.eui.euiColorEmptyShade};
+ flex: 1;
+ align-items: flex-start;
`;
interface Props {
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 ea6b045f504ec..05d150fd9ae23 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
@@ -3,12 +3,71 @@
* 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 { EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import {
+ EuiButton,
+ EuiButtonEmpty,
+ EuiPanel,
+ EuiText,
+ EuiTitle,
+ EuiDescriptionList,
+ EuiDescriptionListDescription,
+ EuiDescriptionListTitle,
+ EuiFlexGrid,
+ EuiFlexGroup,
+ EuiFlexItem,
+} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { WithHeaderLayout } from '../../layouts';
+import { useLink, useGetAgentConfigs } from '../../hooks';
+import { AgentEnrollmentFlyout } from '../fleet/agent_list_page/components';
+import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_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;
+ }
+ }
+`;
export const IngestManagerOverview: React.FunctionComponent = () => {
+ // Agent enrollment flyout state
+ const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState(false);
+
+ // Agent configs required for enrollment flyout
+ const agentConfigsRequest = useGetAgentConfigs({
+ page: 1,
+ perPage: 1000,
+ });
+ const agentConfigs = agentConfigsRequest.data ? agentConfigsRequest.data.items : [];
+
return (
{
}
- />
+ rightColumn={
+
+
+ setIsEnrollmentFlyoutOpen(true)}>
+
+
+
+
+ }
+ >
+ {isEnrollmentFlyoutOpen && (
+ setIsEnrollmentFlyoutOpen(false)}
+ />
+ )}
+
+
+
+
+
+
+ Total available
+ 999
+ Installed
+ 1
+ Updated available
+ 0
+
+
+
+
+
+
+
+
+ Total configs
+ 1
+ Data sources
+ 1
+
+
+
+
+
+
+
+
+ Total agents
+ 0
+ Active
+ 0
+ Offline
+ 0
+ Error
+ 0
+
+
+
+
+
+
+
+
+ Data streams
+ 0
+ Name spaces
+ 0
+ Total size
+ 0 MB
+
+
+
+
+
);
};