Add a Beta badge to the analysis tab

Kerry350 · Aug 22, 2019 · 2245d82 · 2245d82
1 parent a4764d1
commit 2245d82
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx b/x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx
@@ -10,7 +10,7 @@ import { Route } from 'react-router-dom';
 import euiStyled from '../../../../../common/eui_styled_components';
 
 interface TabConfiguration {
-  title: string;
+  title: string | React.ReactNode;
   path: string;
 }
 

diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx
@@ -6,6 +6,7 @@
 
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { EuiBetaBadge } from '@elastic/eui';
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { UICapabilities } from 'ui/capabilities';
@@ -43,11 +44,46 @@ export const LogsPage = injectUICapabilities(
       }),
       path: `${match.path}/stream`,
     };
+    const analysisBetaBadgeTitle = i18n.translate('xpack.infra.logs.index.analysisBetaBadgeTitle', {
+      defaultMessage: 'Analysis',
+    });
+    const analysisBetaBadgeLabel = i18n.translate('xpack.infra.logs.index.analysisBetaBadgeLabel', {
+      defaultMessage: 'Beta',
+    });
+    const analysisBetaBadgeTooltipContent = i18n.translate(
+      'xpack.infra.logs.index.analysisBetaBadgeTooltipContent',
+      {
+        defaultMessage:
+          'This feature is under active development. Extra functionality is coming, and some functionality may change.',
+      }
+    );
+    const analysisBetaBadge = (
+      <EuiBetaBadge
+        label={analysisBetaBadgeLabel}
+        aria-label={analysisBetaBadgeLabel}
+        title={analysisBetaBadgeTitle}
+        tooltipContent={analysisBetaBadgeTooltipContent}
+      />
+    );
     const analysisTab = {
-      title: intl.formatMessage({
-        id: 'xpack.infra.logs.index.analysisTabTitle',
-        defaultMessage: 'Analysis',
-      }),
+      title: (
+        <>
+          <span
+            style={{
+              display: 'inline-block',
+              position: 'relative',
+              top: '-4px',
+              marginRight: '5px',
+            }}
+          >
+            {intl.formatMessage({
+              id: 'xpack.infra.logs.index.analysisTabTitle',
+              defaultMessage: 'Analysis',
+            })}
+          </span>
+          {analysisBetaBadge}
+        </>
+      ),
       path: `${match.path}/analysis`,
     };
     const settingsTab = {