Hidden feature flag

x-pack/plugins/apm/common/ui_settings_keys.ts

@@ -6,4 +6,3 @@
  */
 
 export const enableServiceOverview = 'apm:enableServiceOverview';
-export const enableProfiling = 'apm:enableProfiling';

x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx

@@ -8,11 +8,11 @@
 import { EuiTab } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ReactNode } from 'react';
+import { EuiBetaBadge } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import { isJavaAgentName, isRumAgentName } from '../../../../common/agent_name';
-import {
-  enableServiceOverview,
-  enableProfiling,
-} from '../../../../common/ui_settings_keys';
+import { enableServiceOverview } from '../../../../common/ui_settings_keys';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
@@ -36,7 +36,7 @@ import { Correlations } from '../correlations';
 interface Tab {
   key: string;
   href: string;
-  text: string;
+  text: ReactNode;
   render: () => ReactNode;
 }
 
@@ -54,7 +54,10 @@ interface Props {
 
 export function ServiceDetailTabs({ serviceName, tab }: Props) {
   const { agentName } = useApmServiceContext();
-  const { uiSettings } = useApmPluginContext().core;
+  const {
+    core: { uiSettings },
+    config,
+  } = useApmPluginContext();
   const {
     urlParams: { latencyAggregationType },
   } = useUrlParams();
@@ -123,9 +126,32 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
   const profilingTab = {
     key: 'profiling',
     href: useServiceProfilingHref({ serviceName }),
-    text: i18n.translate('xpack.apm.serviceDetails.profilingTabLabel', {
-      defaultMessage: 'Profiling',
-    }),
+    text: (
+      <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: 'Experimental',
+              }
+            )}
+            tooltipContent={i18n.translate(
+              'xpack.apm.serviceDetails.profilingTabExperimentalDedcription',
+              {
+                defaultMessage:
+                  'Profiling is highly experimental and for internal use only.',
+              }
+            )}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
     render: () => <ServiceProfiling serviceName={serviceName} />,
   };
 
@@ -143,7 +169,7 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
 
   tabs.push(serviceMapTab);
 
-  if (uiSettings.get(enableProfiling)) {
+  if (config.profilingEnabled) {
     tabs.push(profilingTab);
   }
 

x-pack/plugins/apm/public/components/app/service_profiling/index.tsx

@@ -4,8 +4,13 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiPanel } from '@elastic/eui';
-import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPage,
+  EuiPanel,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
 import {

x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx

@@ -326,7 +326,6 @@ export function ServiceProfilingFlamegraph({
                 // @ts-ignore (coming soon in Elastic charts)
                 clip: true,
               },
-              // @ts-expect-error (coming soon in Elastic charts)
               drilldown: true,
               fontFamily: theme.eui.euiCodeFontFamily,
               minFontSize: 9,

x-pack/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx

@@ -81,6 +81,7 @@ const mockConfig: ConfigSchema = {
   ui: {
     enabled: false,
   },
+  profilingEnabled: false,
 };
 
 const mockPlugin = {

x-pack/plugins/apm/public/index.ts

@@ -13,6 +13,7 @@ import { ApmPlugin, ApmPluginSetup, ApmPluginStart } from './plugin';
 
 export interface ConfigSchema {
   serviceMapEnabled: boolean;
+  profilingEnabled: boolean;
   ui: {
     enabled: boolean;
   };

x-pack/plugins/apm/server/index.ts

@@ -16,6 +16,7 @@ export const config = {
   exposeToBrowser: {
     serviceMapEnabled: true,
     ui: true,
+    profilingEnabled: true,
   },
   schema: schema.object({
     enabled: schema.boolean({ defaultValue: true }),
@@ -47,6 +48,7 @@ export const config = {
     metricsInterval: schema.number({ defaultValue: 30 }),
     maxServiceEnvironments: schema.number({ defaultValue: 100 }),
     maxServiceSelection: schema.number({ defaultValue: 50 }),
+    profilingEnabled: schema.boolean({ defaultValue: false }),
   }),
 };
 

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

@@ -8,10 +8,7 @@
 import { schema } from '@kbn/config-schema';
 import { i18n } from '@kbn/i18n';
 import { UiSettingsParams } from '../../../../src/core/types';
-import {
-  enableServiceOverview,
-  enableProfiling,
-} from '../common/ui_settings_keys';
+import { enableServiceOverview } from '../common/ui_settings_keys';
 
 /**
  * uiSettings definitions for APM.
@@ -31,18 +28,4 @@ export const uiSettings: Record<string, UiSettingsParams<boolean>> = {
     ),
     schema: schema.boolean(),
   },
-  [enableProfiling]: {
-    category: ['observability'],
-    name: i18n.translate('xpack.apm.enableProfilingExperimentName', {
-      defaultMessage: 'APM Profiling',
-    }),
-    value: false,
-    description: i18n.translate(
-      'xpack.apm.enableProfilingExperimentDescription',
-      {
-        defaultMessage: 'Enable the Profiling tab for services in APM.',
-      }
-    ),
-    schema: schema.boolean(),
-  },
 };