From 0c97516d0fd21963fe65e3303b833e2a396d4299 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Mon, 25 Jul 2022 12:40:19 +0200
Subject: [PATCH] [ML] Explain Log Rate Spikes: Adds technical preview badge.
 (#136862)

---
 .../aiops/explain_log_rate_spikes.tsx         | 18 +++++++++---
 .../technical_preview_badge/index.ts          |  8 +++++
 .../technical_preview_badge.tsx               | 29 +++++++++++++++++++
 .../routes/trained_models/models_list.tsx     | 19 ++----------
 .../routes/trained_models/nodes_list.tsx      | 19 ++----------
 5 files changed, 57 insertions(+), 36 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/application/components/technical_preview_badge/index.ts
 create mode 100644 x-pack/plugins/ml/public/application/components/technical_preview_badge/technical_preview_badge.tsx

diff --git a/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx b/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx
index 862f8edfb614a..7ab537fc26d81 100644
--- a/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx
+++ b/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} />
diff --git a/x-pack/plugins/ml/public/application/components/technical_preview_badge/index.ts b/x-pack/plugins/ml/public/application/components/technical_preview_badge/index.ts
new file mode 100644
index 0000000000000..86a309414943c
--- /dev/null
+++ b/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';
diff --git a/x-pack/plugins/ml/public/application/components/technical_preview_badge/technical_preview_badge.tsx b/x-pack/plugins/ml/public/application/components/technical_preview_badge/technical_preview_badge.tsx
new file mode 100644
index 0000000000000..a216a7ce7fc75
--- /dev/null
+++ b/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'}
+    />
+  );
+};
diff --git a/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx
index a8f92e8ae9f71..2f89b8dff4e6d 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx
@@ -8,7 +8,7 @@
 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';
@@ -16,6 +16,7 @@ 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>
diff --git a/x-pack/plugins/ml/public/application/routing/routes/trained_models/nodes_list.tsx b/x-pack/plugins/ml/public/application/routing/routes/trained_models/nodes_list.tsx
index 33791f1e2aa81..68cdd956719d3 100644
--- a/x-pack/plugins/ml/public/application/routing/routes/trained_models/nodes_list.tsx
+++ b/x-pack/plugins/ml/public/application/routing/routes/trained_models/nodes_list.tsx
@@ -8,7 +8,7 @@
 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';
@@ -16,6 +16,7 @@ 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>