[Logs UI] Move beta badges from tabs to headings (#54572)

This moves the beta badges for the Ml integration tabs from the tabbed navigation bar into the primary headings of the respective setup and result pages.

x-pack/legacy/plugins/infra/public/components/beta_badge.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 { EuiBetaBadge } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+export const BetaBadge: React.FunctionComponent = () => (
+  <EuiBetaBadge
+    aria-label={betaBadgeLabel}
+    label={betaBadgeLabel}
+    tooltipContent={betaBadgeTooltipContent}
+    className="eui-alignMiddle"
+  />
+);
+const betaBadgeLabel = i18n.translate('xpack.infra.common.tabBetaBadgeLabel', {
+  defaultMessage: 'Beta',
+});
+
+const betaBadgeTooltipContent = i18n.translate('xpack.infra.common.tabBetaBadgeTooltipContent', {
+  defaultMessage:
+    'This feature is under active development. Extra functionality is coming, and some functionality may change.',
+});

x-pack/legacy/plugins/infra/public/components/navigation/routed_tabs.tsx

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiBetaBadge, EuiLink, EuiTab, EuiTabs } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { EuiLink, EuiTab, EuiTabs } from '@elastic/eui';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
@@ -56,24 +55,6 @@ export class RoutedTabs extends React.Component<RoutedTabsProps> {
   }
 }
 
-const tabBetaBadgeLabel = i18n.translate('xpack.infra.common.tabBetaBadgeLabel', {
-  defaultMessage: 'Beta',
-});
-
-const tabBetaBadgeTooltipContent = i18n.translate('xpack.infra.common.tabBetaBadgeTooltipContent', {
-  defaultMessage:
-    'This feature is under active development. Extra functionality is coming, and some functionality may change.',
-});
-
-export const TabBetaBadge = euiStyled(EuiBetaBadge).attrs({
-  'aria-label': tabBetaBadgeLabel,
-  label: tabBetaBadgeLabel,
-  tooltipContent: tabBetaBadgeTooltipContent,
-})`
-  margin-left: 4px;
-  vertical-align: baseline;
-`;
-
 const TabContainer = euiStyled.div`
   .euiLink {
     color: inherit !important;

x-pack/legacy/plugins/infra/public/pages/logs/index.tsx

@@ -11,7 +11,7 @@ import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { Header } from '../../components/header';
-import { RoutedTabs, TabBetaBadge } from '../../components/navigation/routed_tabs';
+import { RoutedTabs } from '../../components/navigation/routed_tabs';
 import { ColumnarPage } from '../../components/page';
 import { SourceLoadingPage } from '../../components/source_loading_page';
 import { SourceErrorPage } from '../../components/source_error_page';
@@ -41,22 +41,12 @@ export const LogsPage = ({ match }: RouteComponentProps) => {
   };
 
   const logRateTab = {
-    title: (
-      <>
-        {logRateTabTitle}
-        <TabBetaBadge title={logRateTabTitle} />
-      </>
-    ),
+    title: logRateTabTitle,
     path: `${match.path}/log-rate`,
   };
 
   const logCategoriesTab = {
-    title: (
-      <>
-        {logCategoriesTabTitle}
-        <TabBetaBadge title={logCategoriesTabTitle} />
-      </>
-    ),
+    title: logCategoriesTabTitle,
     path: `${match.path}/log-categories`,
   };
 

x-pack/legacy/plugins/infra/public/pages/logs/log_entry_categories/page_setup_content.tsx

@@ -8,6 +8,7 @@ import { EuiSpacer, EuiSteps, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useMemo } from 'react';
 
+import { BetaBadge } from '../../../components/beta_badge';
 import {
   createInitialConfigurationStep,
   createProcessStep,
@@ -82,7 +83,8 @@ export const LogEntryCategoriesSetupContent: React.FunctionComponent = () => {
         <FormattedMessage
           id="xpack.infra.logs.logEntryCategories.setupTitle"
           defaultMessage="Enable Machine Learning analysis"
-        />
+        />{' '}
+        <BetaBadge />
       </LogAnalysisSetupPageHeader>
       <LogAnalysisSetupPageContent>
         <EuiText size="s">

x-pack/legacy/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_section.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 
 import { LogEntryCategory } from '../../../../../../common/http_api/log_analysis';
 import { TimeRange } from '../../../../../../common/http_api/shared';
+import { BetaBadge } from '../../../../../components/beta_badge';
 import { LoadingOverlayWrapper } from '../../../../../components/loading_overlay_wrapper';
 import { RecreateJobButton } from '../../../../../components/logging/log_analysis_job_status';
 import { AnalyzeInMlButton } from '../../../../../components/logging/log_analysis_results';
@@ -42,7 +43,9 @@ export const TopCategoriesSection: React.FunctionComponent<{
       <EuiFlexGroup alignItems="center" gutterSize="s">
         <EuiFlexItem>
           <EuiTitle size="m" aria-label={title}>
-            <h1>{title}</h1>
+            <h1>
+              {title} <BetaBadge />
+            </h1>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/page_setup_content.tsx

@@ -8,6 +8,7 @@ import { EuiSpacer, EuiSteps, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useMemo } from 'react';
 
+import { BetaBadge } from '../../../components/beta_badge';
 import {
   createInitialConfigurationStep,
   createProcessStep,
@@ -82,7 +83,8 @@ export const LogEntryRateSetupContent: React.FunctionComponent = () => {
         <FormattedMessage
           id="xpack.infra.analysisSetup.analysisSetupTitle"
           defaultMessage="Enable Machine Learning analysis"
-        />
+        />{' '}
+        <BetaBadge />
       </LogAnalysisSetupPageHeader>
       <LogAnalysisSetupPageContent>
         <EuiText size="s">

x-pack/legacy/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/index.tsx

@@ -4,15 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiEmptyPrompt, EuiLoadingSpinner, EuiSpacer, EuiTitle, EuiText } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLoadingSpinner, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 
-import { LogEntryRateResults as Results } from '../../use_log_entry_rate_results';
 import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
-import { LogEntryRateBarChart } from './bar_chart';
-import { getLogEntryRatePartitionedSeries } from '../helpers/data_formatters';
+import { BetaBadge } from '../../../../../components/beta_badge';
 import { LoadingOverlayWrapper } from '../../../../../components/loading_overlay_wrapper';
+import { LogEntryRateResults as Results } from '../../use_log_entry_rate_results';
+import { getLogEntryRatePartitionedSeries } from '../helpers/data_formatters';
+import { LogEntryRateBarChart } from './bar_chart';
 
 export const LogRateResults = ({
   isLoading,
@@ -33,7 +34,9 @@ export const LogRateResults = ({
   return (
     <>
       <EuiTitle size="m" aria-label={title}>
-        <h2>{title}</h2>
+        <h2>
+          {title} <BetaBadge />
+        </h2>
       </EuiTitle>
       <LoadingOverlayWrapper isLoading={isLoading} loadingChildren={<LoadingOverlayContent />}>
         {!results || (results && results.histogramBuckets && !results.histogramBuckets.length) ? (