Improve alpha messaging

x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.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 {
+  EuiButtonEmpty,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiFlyoutFooter,
+  EuiLink,
+  EuiText,
+  EuiTitle,
+} 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.introText"
+              defaultMessage="This release is experimental and is not subject to the support SLA. It is designed for users to test and offer feedback about Ingest
+            Manager and the new Elastic Agent. It is not intended for use in production environments since certain features may change or go away in a future release."
+            />
+          </p>
+          <FormattedMessage
+            id="xpack.ingestManager.alphaMessaging.feedbackText"
+            defaultMessage="We encourage you to read our {docsLink} or to ask questions and send 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.warningText"
+              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 a future release and there is no migration
+              path. Also, licensing for certain features is under consideration and may change in the future. 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="Note"
+                    />
+                  </strong>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButtonEmpty iconType="cross" onClick={onClose} flush="left">
+          <FormattedMessage
+            id="xpack.ingestManager.alphaMessging.closeFlyoutLabel"
+            defaultMessage="Close"
+          />
+        </EuiButtonEmpty>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+};

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

@@ -3,35 +3,45 @@
  * 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',
   textAlign: 'center',
+  size: 's',
 }))`
   padding: ${props => props.theme.eui.paddingSizes.m};
 `;
 
-export const AlphaMessaging: React.FC<{}> = () => (
-  <Message>
-    <p>
-      <small>
-        <strong>
+export const AlphaMessaging: React.FC<{}> = () => {
+  const [isAlphaFlyoutOpen, setIsAlphaFlyoutOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <Message>
+        <p>
+          <strong>
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessageTitle"
+              defaultMessage="Experimental"
+            />
+          </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
+            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>
+        </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,19 @@ export const IngestManagerOverview: React.FunctionComponent = () => {
                   id="xpack.ingestManager.overviewPageTitle"
                   defaultMessage="Ingest Manager"
                 />
+                <AlphaBadge
+                  iconType="beaker"
+                  label={i18n.translate('xpack.ingestManager.alphaBadge.labelText', {
+                    defaultMessage: 'Experimental',
+                  })}
+                  title={i18n.translate('xpack.ingestManager.alphaBadge.titleText', {
+                    defaultMessage: 'Experimental',
+                  })}
+                  tooltipContent={i18n.translate('xpack.ingestManager.alphaBadge.tooltipText', {
+                    defaultMessage:
+                      'This plugin might change or be removed in a future release and is not subject to the support SLA.',
+                  })}
+                />
               </h1>
             </EuiText>
           </EuiFlexItem>
@@ -213,7 +233,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"