[Integrate Profiling with APM] Navigate from the transaction details view into the Profiling

packages/kbn-optimizer/limits.yml

@@ -101,7 +101,7 @@ pageLoadAssetSize:
   osquery: 107090
   painlessLab: 179748
   presentationUtil: 58834
-  profiling: 18628
+  profiling: 36694
   remoteClusters: 51327
   reporting: 57003
   rollup: 97204

x-pack/plugins/apm/kibana.jsonc

@@ -45,7 +45,8 @@
       "taskManager",
       "usageCollection",
       "customIntegrations", // Move this to requiredPlugins after completely migrating from the Tutorials Home App
-      "licenseManagement"
+      "licenseManagement",
+      "profiling"
     ],
     "requiredBundles": [
       "fleet",

x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections.ts

@@ -12,13 +12,14 @@ import { isEmpty, pickBy } from 'lodash';
 import moment from 'moment';
 import url from 'url';
 import type { InfraLocators } from '@kbn/infra-plugin/common/locators';
+import type { ProfilingLocators } from '@kbn/profiling-plugin/public';
 import type { Transaction } from '../../../../typings/es_schemas/ui/transaction';
 import { getDiscoverHref } from '../links/discover_links/discover_link';
 import { getDiscoverQuery } from '../links/discover_links/discover_transaction_link';
 import { getInfraHref } from '../links/infra_link';
 import { fromQuery } from '../links/url_helpers';
 import { SectionRecord, getNonEmptySections, Action } from './sections_helper';
-import { TRACE_ID } from '../../../../common/es_fields/apm';
+import { HOST_NAME, TRACE_ID } from '../../../../common/es_fields/apm';
 import { ApmRouter } from '../../routing/apm_route_config';
 
 function getInfraMetricsQuery(transaction: Transaction) {
@@ -38,13 +39,15 @@ export const getSections = ({
   apmRouter,
   infraLocators,
   infraLinksAvailable,
+  profilingLocators,
 }: {
   transaction?: Transaction;
   basePath: IBasePath;
   location: Location;
   apmRouter: ApmRouter;
   infraLocators: InfraLocators;
   infraLinksAvailable: boolean;
+  profilingLocators?: ProfilingLocators;
 }) => {
   if (!transaction) return [];
   const hostName = transaction.host?.hostname;
@@ -163,6 +166,42 @@ export const getSections = ({
       }),
       condition: !!hostName,
     },
+    {
+      key: 'hostProfilingFlamegraph',
+      label: i18n.translate(
+        'xpack.apm.transactionActionMenu.showHostProfilingFlamegraphLinkLabel',
+        { defaultMessage: 'Host flamegraph' }
+      ),
+      href: profilingLocators?.flamegraphLocator.getRedirectUrl({
+        kuery: `${HOST_NAME}: "${hostName}"`,
+      }),
+      condition: !!hostName && !!profilingLocators,
+      showNewBadge: true,
+    },
+    {
+      key: 'hostProfilingTopNFunctions',
+      label: i18n.translate(
+        'xpack.apm.transactionActionMenu.showHostProfilingTopNFunctionsLinkLabel',
+        { defaultMessage: 'Host topN functions' }
+      ),
+      href: profilingLocators?.topNFunctionsLocator.getRedirectUrl({
+        kuery: `${HOST_NAME}: "${hostName}"`,
+      }),
+      condition: !!hostName && !!profilingLocators,
+      showNewBadge: true,
+    },
+    {
+      key: 'hostProfilingStacktraces',
+      label: i18n.translate(
+        'xpack.apm.transactionActionMenu.showHostProfilingStacktracesLinkLabel',
+        { defaultMessage: 'Host stacktraces' }
+      ),
+      href: profilingLocators?.stacktracesLocator.getRedirectUrl({
+        kuery: `${HOST_NAME}: "${hostName}"`,
+      }),
+      condition: !!hostName && !!profilingLocators,
+      showNewBadge: true,
+    },
   ];
 
   const logActions: Action[] = [

x-pack/plugins/apm/public/components/shared/transaction_action_menu/sections_helper.ts

@@ -14,6 +14,7 @@ export interface Action {
   href?: string;
   onClick?: (event: MouseEvent) => void;
   condition: boolean;
+  showNewBadge?: boolean;
 }
 
 interface Section {

x-pack/plugins/apm/public/components/shared/transaction_action_menu/transaction_action_menu.tsx

@@ -7,17 +7,18 @@
 
 import { EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { ObservabilityTriggerId } from '@kbn/observability-shared-plugin/common';
 import {
   ActionMenu,
   ActionMenuDivider,
+  getContextMenuItemsFromActions,
   Section,
   SectionLink,
   SectionLinks,
   SectionSubtitle,
   SectionTitle,
 } from '@kbn/observability-shared-plugin/public';
-import { ObservabilityTriggerId } from '@kbn/observability-shared-plugin/common';
-import { getContextMenuItemsFromActions } from '@kbn/observability-shared-plugin/public';
+import { ProfilingLocators } from '@kbn/profiling-plugin/public';
 import React, { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
@@ -27,6 +28,7 @@ import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_
 import { useLicenseContext } from '../../../context/license/use_license_context';
 import { useApmFeatureFlag } from '../../../hooks/use_apm_feature_flag';
 import { useApmRouter } from '../../../hooks/use_apm_router';
+import { useProfilingPlugin } from '../../../hooks/use_profiling_plugin';
 import { CustomLinkMenuSection } from './custom_link_menu_section';
 import { getSections } from './sections';
 
@@ -63,6 +65,9 @@ export function TransactionActionMenu({ transaction, isLoading }: Props) {
 
   const [isActionPopoverOpen, setIsActionPopoverOpen] = useState(false);
 
+  const { isProfilingPluginInitialized, profilingLocators } =
+    useProfilingPlugin();
+
   return (
     <>
       <ActionMenu
@@ -72,7 +77,7 @@ export function TransactionActionMenu({ transaction, isLoading }: Props) {
         anchorPosition="downRight"
         button={
           <ActionMenuButton
-            isLoading={isLoading}
+            isLoading={isLoading || isProfilingPluginInitialized === undefined}
             onClick={() =>
               setIsActionPopoverOpen(
                 (prevIsActionPopoverOpen) => !prevIsActionPopoverOpen
@@ -81,14 +86,23 @@ export function TransactionActionMenu({ transaction, isLoading }: Props) {
           />
         }
       >
-        <ActionMenuSections transaction={transaction} />
+        <ActionMenuSections
+          transaction={transaction}
+          profilingLocators={profilingLocators}
+        />
         {hasGoldLicense && <CustomLinkMenuSection transaction={transaction} />}
       </ActionMenu>
     </>
   );
 }
 
-function ActionMenuSections({ transaction }: { transaction?: Transaction }) {
+function ActionMenuSections({
+  transaction,
+  profilingLocators,
+}: {
+  transaction?: Transaction;
+  profilingLocators?: ProfilingLocators;
+}) {
   const {
     core,
     uiActions,
@@ -108,6 +122,7 @@ function ActionMenuSections({ transaction }: { transaction?: Transaction }) {
     apmRouter,
     infraLocators: locators,
     infraLinksAvailable,
+    profilingLocators,
   });
 
   const externalMenuItems = useAsync(() => {
@@ -156,6 +171,7 @@ function ActionMenuSections({ transaction }: { transaction?: Transaction }) {
                       label={action.label}
                       href={action.href}
                       onClick={action.onClick}
+                      showNewBadge={action.showNewBadge}
                     />
                   ))}
                 </SectionLinks>

x-pack/plugins/apm/public/hooks/use_profiling_plugin.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { useApmPluginContext } from '../context/apm_plugin/use_apm_plugin_context';
+
+export function useProfilingPlugin() {
+  const { plugins } = useApmPluginContext();
+  const [isProfilingPluginInitialized, setIsProfilingPluginInitialized] =
+    useState<boolean | undefined>();
+
+  useEffect(() => {
+    async function fetchIsProfilingSetup() {
+      if (!plugins.profiling) {
+        setIsProfilingPluginInitialized(false);
+        return;
+      }
+      const resp = await plugins.profiling.hasSetup();
+      setIsProfilingPluginInitialized(resp);
+    }
+
+    fetchIsProfilingSetup();
+  }, [plugins.profiling]);
+
+  return {
+    isProfilingPluginInitialized,
+    profilingLocators: isProfilingPluginInitialized
+      ? plugins.profiling?.locators
+      : undefined,
+  };
+}

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

@@ -61,6 +61,10 @@ import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { UiActionsStart, UiActionsSetup } from '@kbn/ui-actions-plugin/public';
 import { ObservabilityTriggerId } from '@kbn/observability-shared-plugin/common';
 import { LicenseManagementUIPluginSetup } from '@kbn/license-management-plugin/public';
+import {
+  ProfilingPluginSetup,
+  ProfilingPluginStart,
+} from '@kbn/profiling-plugin/public';
 import { registerApmRuleTypes } from './components/alerting/rule_types/register_apm_rule_types';
 import {
   getApmEnrollmentFlyoutData,
@@ -92,6 +96,7 @@ export interface ApmPluginSetupDeps {
   triggersActionsUi: TriggersAndActionsUIPublicPluginSetup;
   share: SharePluginSetup;
   uiActions: UiActionsSetup;
+  profiling?: ProfilingPluginSetup;
 }
 
 export interface ApmPluginStartDeps {
@@ -117,6 +122,7 @@ export interface ApmPluginStartDeps {
   storage: IStorageWrapper;
   lens: LensPublicStart;
   uiActions: UiActionsStart;
+  profiling?: ProfilingPluginStart;
 }
 
 const servicesTitle = i18n.translate('xpack.apm.navigation.servicesTitle', {

x-pack/plugins/apm/tsconfig.json

@@ -92,6 +92,7 @@
     "@kbn/dashboard-plugin",
     "@kbn/controls-plugin",
     "@kbn/core-http-server",
+    "@kbn/profiling-plugin",
     "@kbn/unified-field-list",
     "@kbn/slo-schema",
   ],

x-pack/plugins/observability_shared/public/components/section/section.tsx

@@ -11,10 +11,14 @@ import {
   EuiSpacer,
   EuiListGroupItem,
   EuiListGroupItemProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBadge,
 } from '@elastic/eui';
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { EuiListGroupProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 
 export function SectionTitle({ children }: { children?: ReactNode }) {
   return (
@@ -40,7 +44,7 @@ export function SectionSubtitle({ children }: { children?: ReactNode }) {
 
 export function SectionLinks({ children, ...props }: { children?: ReactNode } & EuiListGroupProps) {
   return (
-    <EuiListGroup {...props} flush={true} bordered={false}>
+    <EuiListGroup {...props} size={'s'} color={'primary'} flush={true} bordered={false}>
       {children}
     </EuiListGroup>
   );
@@ -58,6 +62,24 @@ export const Section = styled.div`
 `;
 
 export type SectionLinkProps = EuiListGroupItemProps;
-export function SectionLink(props: SectionLinkProps) {
-  return <EuiListGroupItem style={{ padding: 0 }} size={'xs'} {...props} />;
+export function SectionLink({
+  showNewBadge,
+  ...props
+}: SectionLinkProps & { showNewBadge?: boolean }) {
+  return (
+    <EuiFlexGroup gutterSize="none">
+      <EuiFlexItem>
+        <EuiListGroupItem style={{ padding: 0 }} size={'xs'} {...props} />
+      </EuiFlexItem>
+      {showNewBadge && (
+        <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
+          <EuiBadge color="accent">
+            {i18n.translate('xpack.observabilityShared.sectionLink.newLabel', {
+              defaultMessage: 'New',
+            })}
+          </EuiBadge>
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
 }

x-pack/plugins/profiling/common/setup.ts

@@ -6,7 +6,7 @@
  */
 
 import { merge } from 'lodash';
-import { RecursivePartial } from '@kbn/apm-plugin/typings/common';
+import type { RecursivePartial } from '@elastic/eui';
 
 export interface SetupState {
   cloud: {

x-pack/plugins/profiling/kibana.jsonc

@@ -19,6 +19,7 @@
       "observability",
       "observabilityShared",
       "unifiedSearch",
+      "share"
     ],
     "requiredBundles": [
       "kibanaReact",

x-pack/plugins/profiling/public/index.tsx

@@ -6,7 +6,12 @@
  */
 
 import { ProfilingPlugin } from './plugin';
+import type { ProfilingPluginSetup, ProfilingPluginStart } from './plugin';
 
 export function plugin() {
   return new ProfilingPlugin();
 }
+
+export type { ProfilingPluginSetup, ProfilingPluginStart };
+
+export type ProfilingLocators = ProfilingPluginSetup['locators'];

x-pack/plugins/profiling/public/locators/flamegraph_locator.ts

@@ -0,0 +1,30 @@
+/*
+ * 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 qs from 'query-string';
+import type { SerializableRecord } from '@kbn/utility-types';
+import type { LocatorDefinition, LocatorPublic } from '@kbn/share-plugin/public';
+
+export interface FlamegraphLocatorParams extends SerializableRecord {
+  kuery?: string;
+  rangeFrom?: string;
+  rangeTo?: string;
+}
+
+export type FlamegraphLocator = LocatorPublic<FlamegraphLocatorParams>;
+
+export class FlamegraphLocatorDefinition implements LocatorDefinition<FlamegraphLocatorParams> {
+  public readonly id = 'flamegraphLocator';
+
+  public readonly getLocation = async ({ rangeFrom, rangeTo, kuery }: FlamegraphLocatorParams) => {
+    const params = { rangeFrom, rangeTo, kuery };
+    return {
+      app: 'profiling',
+      path: `/flamegraphs/flamegraph?${qs.stringify(params)}`,
+      state: {},
+    };
+  };
+}