Add Beta label to Infrastructure tab (#136710)

* Add Beta label to Infrastructure tab

* improve BetaBadge and reuse TechnicalPreviewBadge

* use append prop for tabs with beta or technical preview badge

x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/feature_flag/infrastructure.spec.ts

@@ -35,35 +35,9 @@ describe('Infrastracture feature flag', () => {
     cy.loginAsEditorUser();
   });
 
-  describe('when infrastracture feature is disabled', () => {
-    it('shows the flag as disabled in kibana advanced settings', () => {
-      cy.visit(settingsPath);
-
-      cy.get(infraToggle)
-        .should('have.attr', 'aria-checked')
-        .and('equal', 'false');
-    });
-
-    it('hides infrastructure tab in service overview page', () => {
-      cy.visit(serviceOverviewPath);
-      cy.contains('a[role="tab"]', 'Infrastructure').should('not.exist');
-    });
-  });
-
   describe('when infrastracture feature is enabled', () => {
-    after(() => {
-      // Reverts to default state, which is infrastructureView disabled
-      cy.visit(settingsPath);
-      cy.get(infraToggle).click();
-      cy.contains('Save changes').should('not.be.disabled');
-      cy.contains('Save changes').click();
-    });
-
     it('shows the flag as enabled in kibana advanced settings', () => {
       cy.visit(settingsPath);
-      cy.get(infraToggle).click();
-      cy.contains('Save changes').should('not.be.disabled');
-      cy.contains('Save changes').click();
 
       cy.get(infraToggle)
         .should('have.attr', 'aria-checked')
@@ -75,4 +49,22 @@ describe('Infrastracture feature flag', () => {
       cy.contains('a[role="tab"]', 'Infrastructure');
     });
   });
+
+  describe('when infrastracture feature is disabled', () => {
+    it('shows the flag as disabled in kibana advanced settings', () => {
+      cy.visit(settingsPath);
+      cy.get(infraToggle).click();
+      cy.contains('Save changes').should('not.be.disabled');
+      cy.contains('Save changes').click();
+
+      cy.get(infraToggle)
+        .should('have.attr', 'aria-checked')
+        .and('equal', 'false');
+    });
+
+    it('hides infrastructure tab in service overview page', () => {
+      cy.visit(serviceOverviewPath);
+      cy.contains('a[role="tab"]', 'Infrastructure').should('not.exist');
+    });
+  });
 });

x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx

@@ -6,7 +6,6 @@
  */
 
 import {
-  EuiBetaBadge,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPageHeaderProps,
@@ -36,6 +35,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 { BetaBadge } from '../../../shared/beta_badge';
 import { TechnicalPreviewBadge } from '../../../shared/technical_preview_badge';
 
 type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
@@ -265,9 +265,11 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         path: { serviceName },
         query,
       }),
+      append: <BetaBadge />,
       label: i18n.translate('xpack.apm.home.infraTabLabel', {
         defaultMessage: 'Infrastructure',
       }),
+
       hidden: !showInfraTab,
     },
     {
@@ -301,32 +303,10 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         query,
       }),
       hidden: !config.profilingEnabled,
-      label: (
-        <EuiFlexGroup direction="row" gutterSize="s">
-          <EuiFlexItem>
-            {i18n.translate('xpack.apm.serviceDetails.profilingTabLabel', {
-              defaultMessage: 'Profiling',
-            })}
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiBetaBadge
-              label={i18n.translate(
-                'xpack.apm.serviceDetails.profilingTabExperimentalLabel',
-                {
-                  defaultMessage: 'Technical preview',
-                }
-              )}
-              tooltipContent={i18n.translate(
-                'xpack.apm.serviceDetails.profilingTabExperimentalDescription',
-                {
-                  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.',
-                }
-              )}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      ),
+      append: <TechnicalPreviewBadge icon="beaker" />,
+      label: i18n.translate('xpack.apm.serviceDetails.profilingTabLabel', {
+        defaultMessage: 'Profiling',
+      }),
     },
     {
       key: 'alerts',
@@ -334,27 +314,20 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         path: { serviceName },
         query,
       }),
-      label: (
-        <EuiFlexGroup gutterSize="xs">
-          <EuiFlexItem>
-            {i18n.translate('xpack.apm.home.alertsTabLabel', {
-              defaultMessage: 'Alerts',
-            })}
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <TechnicalPreviewBadge icon="beaker" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      ),
+      append: <TechnicalPreviewBadge icon="beaker" />,
+      label: i18n.translate('xpack.apm.home.alertsTabLabel', {
+        defaultMessage: 'Alerts',
+      }),
       hidden: !(isAlertingAvailable && canReadAlerts),
     },
   ];
 
   return tabs
     .filter((t) => !t.hidden)
-    .map(({ href, key, label }) => ({
+    .map(({ href, key, label, append }) => ({
       href,
       label,
+      append,
       isSelected: key === selectedTab,
     }));
 }

x-pack/plugins/apm/public/components/shared/beta_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 { EuiBetaBadge, IconType } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+interface Props {
+  icon?: IconType;
+}
+
+export function BetaBadge({ icon }: Props) {
+  return (
+    <EuiBetaBadge
+      label={i18n.translate('xpack.apm.betaBadgeLabel', {
+        defaultMessage: 'Beta',
+      })}
+      tooltipContent={i18n.translate('xpack.apm.betaBadgeDescription', {
+        defaultMessage:
+          'This feature is currently in beta. If you encounter any bugs or have feedback, please open an issue or visit our discussion forum.',
+      })}
+      iconType={icon}
+    />
+  );
+}

x-pack/plugins/observability/server/ui_settings.ts

@@ -89,7 +89,7 @@ export const uiSettings: Record<string, UiSettingsParams<boolean | number | stri
     name: i18n.translate('xpack.observability.enableInfrastructureView', {
       defaultMessage: 'Infrastructure feature',
     }),
-    value: false,
+    value: true,
     description: i18n.translate('xpack.observability.enableInfrastructureViewDescription', {
       defaultMessage: 'Enable the Infrastructure view feature in APM app',
     }),

x-pack/plugins/translations/translations/fr-FR.json

@@ -7932,8 +7932,6 @@
     "xpack.apm.serviceDetails.metricsTabLabel": "Indicateurs",
     "xpack.apm.serviceDetails.nodesTabLabel": "JVM",
     "xpack.apm.serviceDetails.overviewTabLabel": "Aperçu",
-    "xpack.apm.serviceDetails.profilingTabExperimentalDescription": "Cette fonctionnalité est en version d'évaluation technique et pourra être modifiée ou retirée complètement dans une future version. Elastic s'efforcera au maximum de corriger tout problème, mais les fonctionnalités en version d'évaluation technique ne sont pas soumises aux accords de niveau de service d'assistance des fonctionnalités officielles en disponibilité générale.",
-    "xpack.apm.serviceDetails.profilingTabExperimentalLabel": "Version d'évaluation technique",
     "xpack.apm.serviceDetails.profilingTabLabel": "Profilage",
     "xpack.apm.serviceDetails.transactionsTabLabel": "Transactions",
     "xpack.apm.serviceGroup.allServices.title": "Tous les services",

x-pack/plugins/translations/translations/ja-JP.json

@@ -7924,8 +7924,6 @@
     "xpack.apm.serviceDetails.metricsTabLabel": "メトリック",
     "xpack.apm.serviceDetails.nodesTabLabel": "JVM",
     "xpack.apm.serviceDetails.overviewTabLabel": "概要",
-    "xpack.apm.serviceDetails.profilingTabExperimentalDescription": "この機能はテクニカルプレビュー中であり、将来のリリースでは変更されたり完全に削除されたりする場合があります。Elasticは最善の努力を講じてすべての問題の修正に努めますが、テクニカルプレビュー中の機能には正式なGA機能のサポートSLAが適用されません。",
-    "xpack.apm.serviceDetails.profilingTabExperimentalLabel": "テクニカルプレビュー",
     "xpack.apm.serviceDetails.profilingTabLabel": "プロファイリング",
     "xpack.apm.serviceDetails.transactionsTabLabel": "トランザクション",
     "xpack.apm.serviceGroup.allServices.title": "すべてのサービス",

x-pack/plugins/translations/translations/zh-CN.json

@@ -7938,8 +7938,6 @@
     "xpack.apm.serviceDetails.metricsTabLabel": "指标",
     "xpack.apm.serviceDetails.nodesTabLabel": "JVM",
     "xpack.apm.serviceDetails.overviewTabLabel": "概览",
-    "xpack.apm.serviceDetails.profilingTabExperimentalDescription": "此功能处于技术预览状态，在未来版本中可能会更改或完全移除。Elastic 将尽最大努力来修复任何问题，但处于技术预览状态的功能不受正式 GA 功能支持 SLA 的约束。",
-    "xpack.apm.serviceDetails.profilingTabExperimentalLabel": "技术预览",
     "xpack.apm.serviceDetails.profilingTabLabel": "分析",
     "xpack.apm.serviceDetails.transactionsTabLabel": "事务",
     "xpack.apm.serviceGroup.allServices.title": "所有服务",