[ML] Explain Log Rate Spikes: Adds technical preview badge.

x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx

@@ -7,12 +7,15 @@
 
 import React, { FC } from 'react';
 
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ExplainLogRateSpikes } from '@kbn/aiops-plugin/public';
 
 import { useMlContext } from '../contexts/ml';
 import { useMlKibana } from '../contexts/kibana';
 import { HelpMenu } from '../components/help_menu';
+import { TechnicalPreviewBadge } from '../components/technical_preview_badge';
 
 import { MlPageHeader } from '../components/page_header';
 
@@ -28,10 +31,17 @@ export const ExplainLogRateSpikesPage: FC = () => {
   return (
     <>
       <MlPageHeader>
-        <FormattedMessage
-          id="xpack.ml.explainLogRateSpikes.pageHeader"
-          defaultMessage="Explain log rate spikes"
-        />
+        <EuiFlexGroup responsive={false} wrap={false} alignItems={'center'} gutterSize={'m'}>
+          <EuiFlexItem grow={false}>
+            <FormattedMessage
+              id="xpack.ml.explainLogRateSpikes.pageHeader"
+              defaultMessage="Explain log rate spikes"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <TechnicalPreviewBadge />
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </MlPageHeader>
       {dataView.timeFieldName && (
         <ExplainLogRateSpikes dataView={dataView} savedSearch={savedSearch} />

x-pack/plugins/ml/public/application/components/technical_preview_badge/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { TechnicalPreviewBadge } from './technical_preview_badge';

x-pack/plugins/ml/public/application/components/technical_preview_badge/technical_preview_badge.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { FC } from 'react';
+
+import { EuiBetaBadge } from '@elastic/eui';
+
+import { i18n } from '@kbn/i18n';
+
+export const TechnicalPreviewBadge: FC = () => {
+  return (
+    <EuiBetaBadge
+      label={i18n.translate('xpack.ml.navMenu.trainedModelsTabBetaLabel', {
+        defaultMessage: 'Technical preview',
+      })}
+      size="m"
+      color="hollow"
+      tooltipContent={i18n.translate('xpack.ml.navMenu.trainedModelsTabBetaTooltipContent', {
+        defaultMessage:
+          'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
+      })}
+      tooltipPosition={'right'}
+    />
+  );
+};

x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx

@@ -8,14 +8,15 @@
 import React, { FC } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { NavigateToPath } from '../../../contexts/kibana';
 import { MlRoute, PageLoader, PageProps } from '../../router';
 import { useResolver } from '../../use_resolver';
 import { basicResolvers } from '../../resolvers';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { ModelsList } from '../../../trained_models/models_management';
 import { MlPageHeader } from '../../../components/page_header';
+import { TechnicalPreviewBadge } from '../../../components/technical_preview_badge';
 
 export const modelsListRouteFactory = (
   navigateToPath: NavigateToPath,
@@ -60,21 +61,7 @@ const PageWrapper: FC<PageProps> = ({ location, deps }) => {
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiBetaBadge
-              label={i18n.translate('xpack.ml.navMenu.trainedModelsTabBetaLabel', {
-                defaultMessage: 'Technical preview',
-              })}
-              size="m"
-              color="hollow"
-              tooltipContent={i18n.translate(
-                'xpack.ml.navMenu.trainedModelsTabBetaTooltipContent',
-                {
-                  defaultMessage:
-                    'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
-                }
-              )}
-              tooltipPosition={'right'}
-            />
+            <TechnicalPreviewBadge />
           </EuiFlexItem>
         </EuiFlexGroup>
       </MlPageHeader>

x-pack/plugins/ml/public/application/routing/routes/trained_models/nodes_list.tsx

@@ -8,14 +8,15 @@
 import React, { FC } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
-import { EuiBetaBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { NavigateToPath, useTimefilter } from '../../../contexts/kibana';
 import { MlRoute, PageLoader, PageProps } from '../../router';
 import { useResolver } from '../../use_resolver';
 import { basicResolvers } from '../../resolvers';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { NodesList } from '../../../trained_models/nodes_overview';
 import { MlPageHeader } from '../../../components/page_header';
+import { TechnicalPreviewBadge } from '../../../components/technical_preview_badge';
 
 export const nodesListRouteFactory = (
   navigateToPath: NavigateToPath,
@@ -58,21 +59,7 @@ const PageWrapper: FC<PageProps> = ({ location, deps }) => {
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiBetaBadge
-              label={i18n.translate('xpack.ml.navMenu.trainedModelsTabBetaLabel', {
-                defaultMessage: 'Technical preview',
-              })}
-              size="m"
-              color="hollow"
-              tooltipContent={i18n.translate(
-                'xpack.ml.navMenu.trainedModelsTabBetaTooltipContent',
-                {
-                  defaultMessage:
-                    'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
-                }
-              )}
-              tooltipPosition={'right'}
-            />
+            <TechnicalPreviewBadge />
           </EuiFlexItem>
         </EuiFlexGroup>
       </MlPageHeader>