[APM] Adding tech preview on Alert Tab feature

elastic · Jul 19, 2022 · 32da501 · 32da501
1 parent e57d1f4
commit 32da501
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
@@ -36,6 +36,7 @@ import { ServiceIcons } from '../../../shared/service_icons';
 import { ApmMainTemplate } from '../apm_main_template';
 import { AnalyzeDataButton } from './analyze_data_button';
 import { getAlertingCapabilities } from '../../../alerting/get_alerting_capabilities';
+import { TechnicalPreviewBadge } from '../../../shared/technical_preview_badge';
 
 type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
   key:
@@ -330,9 +331,18 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         path: { serviceName },
         query,
       }),
-      label: i18n.translate('xpack.apm.home.alertsTabLabel', {
-        defaultMessage: 'Alerts',
-      }),
+      label: (
+        <EuiFlexGroup direction="row" gutterSize="xs">
+          <EuiFlexItem>
+            <TechnicalPreviewBadge icon="beaker" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            {i18n.translate('xpack.apm.home.alertsTabLabel', {
+              defaultMessage: 'Alerts',
+            })}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ),
       hidden: !(isAlertingAvailable && canReadAlerts),
     },
   ];