Ingest overview page (#63214)

* use fixed table layout

* added markup structure / css for overview page

* add flyout and links to other pages

* add "alpha" messaging at bottom of all pages

* attrs instead of defaultProps on styled components

* use FormattedMessage on alpha messaging component

* remove leftover code

* remove unused import

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<{}> = () => (
+  <Message>
+    <p>
+      <small>
+        <strong>
+          <FormattedMessage
+            id="xpack.ingestManager.alphaMessageTitle"
+            defaultMessage="Alpha release"
+          />
+        </strong>
+        {' – '}
+        <FormattedMessage
+          id="xpack.ingestManager.alphaMessageDescription"
+          defaultMessage="Ingest Manager is under active development and is not
+          intended for production purposes."
+        />
+      </small>
+    </p>
+  </Message>
+);

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';

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<Props> = ({ section, childre
         </EuiFlexGroup>
       </Nav>
       {children}
+      <AlphaMessaging />
     </Container>
   );
 };

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 {

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 {

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<boolean>(false);
+
+  // Agent configs required for enrollment flyout
+  const agentConfigsRequest = useGetAgentConfigs({
+    page: 1,
+    perPage: 1000,
+  });
+  const agentConfigs = agentConfigsRequest.data ? agentConfigsRequest.data.items : [];
+
   return (
     <WithHeaderLayout
       leftColumn={
@@ -28,13 +87,150 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
               <p>
                 <FormattedMessage
                   id="xpack.ingestManager.overviewPageSubtitle"
-                  defaultMessage="Lorem ipsum some description about ingest manager."
+                  defaultMessage="Centralized management for Elastic Agents and configurations."
                 />
               </p>
             </EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
       }
-    />
+      rightColumn={
+        <EuiFlexGroup justifyContent="flexEnd">
+          <EuiFlexItem grow={false}>
+            <EuiButton fill iconType="plusInCircle" onClick={() => setIsEnrollmentFlyoutOpen(true)}>
+              <FormattedMessage
+                id="xpack.ingestManager.overviewPageEnrollAgentButton"
+                defaultMessage="Enroll new agent"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+    >
+      {isEnrollmentFlyoutOpen && (
+        <AgentEnrollmentFlyout
+          agentConfigs={agentConfigs}
+          onClose={() => setIsEnrollmentFlyoutOpen(false)}
+        />
+      )}
+
+      <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>
+
+        <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>
+
+        <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">
+                <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>
+      </EuiFlexGrid>
+    </WithHeaderLayout>
   );
 };