Add tooltips to Ingest manager overview section and update text to sa…

…y Beta (#71373) * add tooltips and beta label to Ingest Manager overview page * updated footer messaging and about-this-release flyout * forgot to remove commented out code * fixed responsive issue with tooltip * removed unused import * fix i18n * update link to docs * update text Co-authored-by: Elastic Machine <[email protected]>
elastic · Jul 14, 2020 · 82562a8 · 82562a8
1 parent 00f03fb
commit 82562a8
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 157 deletions.
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/alpha_flyout.tsx
@@ -38,50 +38,34 @@ export const AlphaFlyout: React.FunctionComponent<Props> = ({ onClose }) => {
           <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."
+              defaultMessage="Ingest Manager is under active development and is not intended for use in production environments. This beta release is designed for users to test and offer feedback about Ingest
+            Manager and the new Elastic Agent. This plugin is not subject to the support SLA."
             />
           </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."
+              id="xpack.ingestManager.alphaMessaging.feedbackText"
+              defaultMessage="We encourage you to read our {docsLink} or to ask questions and send feedback in our {forumLink}."
               values={{
-                note: (
-                  <strong>
+                docsLink: (
+                  <EuiLink
+                    href="https://www.elastic.co/guide/en/ingest-management/current/index.html"
+                    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.warningNote"
-                      defaultMessage="Note"
+                      id="xpack.ingestManager.alphaMessaging.forumLink"
+                      defaultMessage="Discuss forum"
                     />
-                  </strong>
+                  </EuiLink>
                 ),
               }}
             />

diff --git a/.../plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx b/.../plugins/ingest_manager/public/applications/ingest_manager/components/alpha_messaging.tsx
@@ -28,17 +28,20 @@ export const AlphaMessaging: React.FC<{}> = () => {
           <strong>
             <FormattedMessage
               id="xpack.ingestManager.alphaMessageTitle"
-              defaultMessage="Experimental"
+              defaultMessage="Beta release"
             />
           </strong>
           {' – '}
           <FormattedMessage
             id="xpack.ingestManager.alphaMessageDescription"
-            defaultMessage="Ingest Manager is under active development and is not
-          intended for production purposes."
+            defaultMessage="Ingest Manager is not
+            recommended for production environments."
           />{' '}
           <EuiLink color="subdued" onClick={() => setIsAlphaFlyoutOpen(true)}>
-            View more details.
+            <FormattedMessage
+              id="xpack.ingestManager.alphaMessageLinkText"
+              defaultMessage="See more details."
+            />
           </EuiLink>
         </p>
       </Message>

diff --git a/...manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx b/...manager/public/applications/ingest_manager/sections/overview/components/agent_section.tsx
@@ -5,13 +5,13 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import {
-  EuiTitle,
-  EuiButtonEmpty,
+  EuiI18nNumber,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { OverviewPanel } from './overview_panel';
 import { OverviewStats } from './overview_stats';
@@ -24,23 +24,19 @@ export const OverviewAgentSection = () => {
 
   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={getHref('fleet_agent_list')}>
-            <FormattedMessage
-              id="xpack.ingestManager.overviewPageFleetPanelAction"
-              defaultMessage="View agents"
-            />
-          </EuiButtonEmpty>
-        </header>
+      <OverviewPanel
+        title={i18n.translate('xpack.ingestManager.overviewPageFleetPanelTitle', {
+          defaultMessage: 'Fleet',
+        })}
+        tooltip={i18n.translate('xpack.ingestManager.overviewPageFleetPanelTooltip', {
+          defaultMessage:
+            'Use Fleet to enroll agents and manage their configurations from a central location.',
+        })}
+        linkTo={getHref('fleet_agent_list')}
+        linkToText={i18n.translate('xpack.ingestManager.overviewPageFleetPanelAction', {
+          defaultMessage: 'View agents',
+        })}
+      >
         <OverviewStats>
           {agentStatusRequest.isLoading ? (
             <Loading />

diff --git a/...public/applications/ingest_manager/sections/overview/components/configuration_section.tsx b/...public/applications/ingest_manager/sections/overview/components/configuration_section.tsx
@@ -5,11 +5,11 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import {
-  EuiTitle,
-  EuiButtonEmpty,
+  EuiFlexItem,
+  EuiI18nNumber,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
 } from '@elastic/eui';
@@ -30,23 +30,18 @@ export const OverviewConfigurationSection: React.FC<{ agentConfigs: AgentConfig[
 
   return (
     <EuiFlexItem component="section">
-      <OverviewPanel>
-        <header>
-          <EuiTitle size="xs">
-            <h2>
-              <FormattedMessage
-                id="xpack.ingestManager.overviewPageConfigurationsPanelTitle"
-                defaultMessage="Agent configurations"
-              />
-            </h2>
-          </EuiTitle>
-          <EuiButtonEmpty size="xs" flush="right" href={getHref('configurations_list')}>
-            <FormattedMessage
-              id="xpack.ingestManager.overviewPageConfigurationsPanelAction"
-              defaultMessage="View configs"
-            />
-          </EuiButtonEmpty>
-        </header>
+      <OverviewPanel
+        title={i18n.translate('xpack.ingestManager.overviewPageConfigurationsPanelTitle', {
+          defaultMessage: 'Agent configurations',
+        })}
+        tooltip={i18n.translate('xpack.ingestManager.overviewPageConfigurationsPanelTooltip', {
+          defaultMessage: 'Use agent configurations to control the data that your agents collect.',
+        })}
+        linkTo={getHref('configurations_list')}
+        linkToText={i18n.translate('xpack.ingestManager.overviewPageConfigurationsPanelAction', {
+          defaultMessage: 'View configurations',
+        })}
+      >
         <OverviewStats>
           {packageConfigsRequest.isLoading ? (
             <Loading />

diff --git a/...er/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx b/...er/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx
@@ -5,11 +5,11 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import {
-  EuiTitle,
-  EuiButtonEmpty,
+  EuiFlexItem,
+  EuiI18nNumber,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
 } from '@elastic/eui';
@@ -45,23 +45,18 @@ export const OverviewDatastreamSection: React.FC = () => {
 
   return (
     <EuiFlexItem component="section">
-      <OverviewPanel>
-        <header>
-          <EuiTitle size="xs">
-            <h2>
-              <FormattedMessage
-                id="xpack.ingestManager.overviewPageDataStreamsPanelTitle"
-                defaultMessage="Datasets"
-              />
-            </h2>
-          </EuiTitle>
-          <EuiButtonEmpty size="xs" flush="right" href={getHref('data_streams')}>
-            <FormattedMessage
-              id="xpack.ingestManager.overviewPageDataStreamsPanelAction"
-              defaultMessage="View datasets"
-            />
-          </EuiButtonEmpty>
-        </header>
+      <OverviewPanel
+        title={i18n.translate('xpack.ingestManager.overviewPageDataStreamsPanelTitle', {
+          defaultMessage: 'Datasets',
+        })}
+        tooltip={i18n.translate('xpack.ingestManager.overviewPageDataStreamsPanelTooltip', {
+          defaultMessage: 'Data that your agents collect are organized into various datasets.',
+        })}
+        linkTo={getHref('data_streams')}
+        linkToText={i18n.translate('xpack.ingestManager.overviewPageDataStreamsPanelAction', {
+          defaultMessage: 'View datasets',
+        })}
+      >
         <OverviewStats>
           {datastreamRequest.isLoading ? (
             <Loading />

diff --git a/...r/public/applications/ingest_manager/sections/overview/components/integration_section.tsx b/...r/public/applications/ingest_manager/sections/overview/components/integration_section.tsx
@@ -5,11 +5,11 @@
  */
 
 import React from 'react';
-import { EuiFlexItem, EuiI18nNumber } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import {
-  EuiTitle,
-  EuiButtonEmpty,
+  EuiFlexItem,
+  EuiI18nNumber,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
 } from '@elastic/eui';
@@ -31,23 +31,19 @@ export const OverviewIntegrationSection: React.FC = () => {
     )?.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={getHref('integrations_all')}>
-            <FormattedMessage
-              id="xpack.ingestManager.overviewPageIntegrationsPanelAction"
-              defaultMessage="View integrations"
-            />
-          </EuiButtonEmpty>
-        </header>
+      <OverviewPanel
+        title={i18n.translate('xpack.ingestManager.overviewPageIntegrationsPanelTitle', {
+          defaultMessage: 'Integrations',
+        })}
+        tooltip={i18n.translate('xpack.ingestManager.overviewPageIntegrationsPanelTooltip', {
+          defaultMessage:
+            'Browse and install integrations for the Elastic Stack. Add integrations to your agent configurations to start sending data.',
+        })}
+        linkTo={getHref('integrations_all')}
+        linkToText={i18n.translate('xpack.ingestManager.overviewPageIntegrationsPanelAction', {
+          defaultMessage: 'View integrations',
+        })}
+      >
         <OverviewStats>
           {packagesRequest.isLoading ? (
             <Loading />

diff --git a/...anager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx b/...anager/public/applications/ingest_manager/sections/overview/components/overview_panel.tsx
@@ -4,10 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import styled from 'styled-components';
-import { EuiPanel } from '@elastic/eui';
+import {
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+  EuiIconTip,
+  EuiButtonEmpty,
+} from '@elastic/eui';
 
-export const OverviewPanel = styled(EuiPanel).attrs((props) => ({
+const StyledPanel = styled(EuiPanel).attrs((props) => ({
   paddingSize: 'm',
 }))`
   header {
@@ -26,3 +34,40 @@ export const OverviewPanel = styled(EuiPanel).attrs((props) => ({
     padding: ${(props) => props.theme.eui.paddingSizes.xs} 0;
   }
 `;
+
+interface OverviewPanelProps {
+  title: string;
+  tooltip: string;
+  linkToText: string;
+  linkTo: string;
+  children: React.ReactNode;
+}
+
+export const OverviewPanel = ({
+  title,
+  tooltip,
+  linkToText,
+  linkTo,
+  children,
+}: OverviewPanelProps) => {
+  return (
+    <StyledPanel>
+      <header>
+        <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiTitle size="xs">
+              <h2>{title}</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiIconTip content={tooltip} position="top" type="iInCircle" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiButtonEmpty size="xs" flush="right" href={linkTo}>
+          {linkToText}
+        </EuiButtonEmpty>
+      </header>
+      {children}
+    </StyledPanel>
+  );
+};