[APM] Adding tech preview on Alert Tab feature (#136615)

* [APM] Adding tech preview on Alert Tab feature * Display the icon on the right side
elastic · Jul 20, 2022 · f30cfc1 · f30cfc1
1 parent 092fb35
commit f30cfc1
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:
@@ -333,9 +334,18 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         path: { serviceName },
         query,
       }),
-      label: i18n.translate('xpack.apm.home.alertsTabLabel', {
-        defaultMessage: 'Alerts',
-      }),
+      label: (
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem>
+            {i18n.translate('xpack.apm.home.alertsTabLabel', {
+              defaultMessage: 'Alerts',
+            })}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <TechnicalPreviewBadge icon="beaker" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ),
       hidden: !(isAlertingAvailable && canReadAlerts),
     },
   ];