Improve alpha messaging

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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, { useState } from 'react';
+import {
+  EuiCallOut,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiSpacer,
+  EuiTitle,
+  EuiIcon,
+  EuiText,
+  EuiTextColor,
+  EuiLink,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiButton,
+  EuiFlyoutFooter,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface Props {
+  onClose: () => void;
+}
+
+export const AlphaFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
+  return (
+    <EuiFlyout onClose={onClose} size="m" maxWidth={640}>
+      <EuiFlyoutHeader hasBorder aria-labelledby="AlphaMessagingFlyoutTitle">
+        <EuiTitle size="m">
+          <h2 id="AlphaMessagingFlyoutTitle">
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessaging.flyoutTitle"
+              defaultMessage="About this release"
+            />
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText size="m">
+          <p>
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessaging.intro"
+              defaultMessage="This Alpha release is designed for users to test and offer feedback on the new Ingest
+            Manager and Elastic Agent. It is not intended for use in a production environments and
+            these features are not officially supported. We encourage you to read our {docsLink} or to ask for help and other feedback in our {forumLink}."
+              values={{
+                docsLink: (
+                  <EuiLink href="https://ela.st/ingest-manager-docs" external target="_blank">
+                    <FormattedMessage
+                      id="xpack.ingestManager.alphaMessaging.docsLink"
+                      defaultMessage="documentation"
+                    />
+                  </EuiLink>
+                ),
+                forumLink: (
+                  <EuiLink href="https://ela.st/ingest-manager-forum" external target="_blank">
+                    <FormattedMessage
+                      id="xpack.ingestManager.alphaMessaging.forumLink"
+                      defaultMessage="Discuss forum"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+
+          <p>
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessaging.warning"
+              defaultMessage=" {note}: you should not store important data with Ingest Manager
+              since you will have limited visibility to it in a future release. This version uses an
+              indexing strategy that will be deprecated in the next release and there is no migration
+              path. Also, the licensing for features is under consideration and may change before our
+              GA release. As a result, you may lose access to certain features based on your license
+              tier."
+              values={{
+                note: (
+                  <strong>
+                    <FormattedMessage
+                      id="xpack.ingestManager.alphaMessaging.warningNote"
+                      defaultMessage="Please note"
+                    />
+                  </strong>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+          <FormattedMessage
+            id="xpack.ingestManager.agentEnrollment.cancelButtonLabel"
+            defaultMessage="Close"
+          />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx

@@ -3,10 +3,11 @@
  * 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 React, { useState } from 'react';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiText } from '@elastic/eui';
+import { EuiText, EuiLink } from '@elastic/eui';
+import { AlphaFlyout } from './alpha_flyout';
 
 const Message = styled(EuiText).attrs(props => ({
   color: 'subdued',
@@ -15,23 +16,33 @@ const Message = styled(EuiText).attrs(props => ({
   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
+export const AlphaMessaging: React.FC<{}> = () => {
+  const [isAlphaFlyoutOpen, setIsAlphaFlyoutOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <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>
-);
+            />{' '}
+            <EuiLink color="subdued" onClick={() => setIsAlphaFlyoutOpen(true)}>
+              View more details.
+            </EuiLink>
+          </small>
+        </p>
+      </Message>
+      {isAlphaFlyoutOpen && <AlphaFlyout onClose={() => setIsAlphaFlyoutOpen(false)} />}
+    </>
+  );
+};

x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiBetaBadge,
   EuiPanel,
   EuiText,
   EuiTitle,
@@ -19,10 +20,11 @@ import {
   EuiFlexItem,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 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';
+import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH, DATA_STREAM_PATH } from '../../constants';
 
 const OverviewPanel = styled(EuiPanel).attrs(props => ({
   paddingSize: 'm',
@@ -57,6 +59,11 @@ const OverviewStats = styled(EuiDescriptionList).attrs(props => ({
   }
 `;
 
+const AlphaBadge = styled(EuiBetaBadge)`
+  vertical-align: top;
+  margin-left: ${props => props.theme.eui.paddingSizes.s};
+`;
+
 export const IngestManagerOverview: React.FunctionComponent = () => {
   // Agent enrollment flyout state
   const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
@@ -79,6 +86,18 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
                   id="xpack.ingestManager.overviewPageTitle"
                   defaultMessage="Ingest Manager"
                 />
+                <AlphaBadge
+                  label={i18n.translate('xpack.IngestManager.alphaBadge.label', {
+                    defaultMessage: 'Alpha',
+                  })}
+                  title={i18n.translate('xpack.IngestManager.alphaBadge.title', {
+                    defaultMessage: 'Alpha release',
+                  })}
+                  tooltipContent={i18n.translate('xpack.IngestManager.alphaBadge.title', {
+                    defaultMessage:
+                      'Ingest Manager is under active development and is not intended for production purposes.',
+                  })}
+                />
               </h1>
             </EuiText>
           </EuiFlexItem>
@@ -213,7 +232,7 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
                   />
                 </h2>
               </EuiTitle>
-              <EuiButtonEmpty size="xs" flush="right">
+              <EuiButtonEmpty size="xs" flush="right" href={useLink(DATA_STREAM_PATH)}>
                 <FormattedMessage
                   id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
                   defaultMessage="View data streams"