[APM] Show Universal Profiling on Transaction view

packages/kbn-io-ts-utils/index.ts

@@ -15,6 +15,7 @@ export { jsonRt } from './src/json_rt';
 export { mergeRt } from './src/merge_rt';
 export { strictKeysRt } from './src/strict_keys_rt';
 export { isoToEpochRt } from './src/iso_to_epoch_rt';
+export { isoToEpochSecsRt } from './src/iso_to_epoch_secs_rt';
 export { toNumberRt } from './src/to_number_rt';
 export { toBooleanRt } from './src/to_boolean_rt';
 export { toJsonSchema } from './src/to_json_schema';

packages/kbn-io-ts-utils/src/iso_to_epoch_secs_rt/index.test.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { isoToEpochSecsRt } from '.';
+import { isRight } from 'fp-ts/lib/Either';
+
+describe('isoToEpochSecsRt', () => {
+  it('validates whether its input is a valid ISO timestamp', () => {
+    expect(isRight(isoToEpochSecsRt.decode(1566299881499))).toBe(false);
+
+    expect(isRight(isoToEpochSecsRt.decode('2019-08-20T11:18:31.407Z'))).toBe(true);
+  });
+
+  it('decodes valid ISO timestamps to epoch secs time', () => {
+    const iso = '2019-08-20T11:18:31.407Z';
+    const result = isoToEpochSecsRt.decode(iso);
+
+    if (isRight(result)) {
+      expect(result.right).toBe(new Date(iso).getTime() / 1000);
+    } else {
+      fail();
+    }
+  });
+
+  it('encodes epoch secs time to ISO string', () => {
+    expect(isoToEpochSecsRt.encode(1566299911407)).toBe('2019-08-20T11:18:31.407Z');
+  });
+});

packages/kbn-io-ts-utils/src/iso_to_epoch_secs_rt/index.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { chain } from 'fp-ts/lib/Either';
+import { pipe } from 'fp-ts/lib/function';
+import * as t from 'io-ts';
+import { isoToEpochRt } from '../iso_to_epoch_rt';
+
+export const isoToEpochSecsRt = new t.Type<number, string, unknown>(
+  'isoToEpochSecsRt',
+  t.number.is,
+  (value) =>
+    pipe(
+      isoToEpochRt.decode(value),
+      chain((epochMsValue) => {
+        return t.success(epochMsValue / 1000);
+      })
+    ),
+  (output) => new Date(output).toISOString()
+);

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -568,6 +568,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'observability:apmEnableTransactionProfiling': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
   'observability:profilingPerVCPUWattX86': {
     type: 'integer',
     _meta: { description: 'Non-default value of setting.' },

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -166,5 +166,6 @@ export interface UsageStats {
   'observability:profilingCostPervCPUPerHour': number;
   'observability:profilingAWSCostDiscountRate': number;
   'data_views:fields_excluded_data_tiers': string;
+  'observability:apmEnableTransactionProfiling': boolean;
   'devTools:enableDockedConsole': boolean;
 }

src/plugins/telemetry/schema/oss_plugins.json

@@ -10168,6 +10168,12 @@
             "description": "Non-default value of setting."
           }
         },
+        "observability:apmEnableTransactionProfiling": {
+          "type": "boolean",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
         "observability:profilingPerVCPUWattX86": {
           "type": "integer",
           "_meta": {

x-pack/plugins/apm/public/components/app/profiling_overview/profiling_flamegraph.tsx

@@ -5,16 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiEmptyPrompt,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiLink,
-  EuiSpacer,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { EmbeddableFlamegraph } from '@kbn/observability-shared-plugin/public';
-import { isEmpty } from 'lodash';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React from 'react';
 import { ApmDataSourceWithSummary } from '../../../../common/data_source';
 import { ApmDocumentType } from '../../../../common/document_type';
@@ -23,12 +14,9 @@ import {
   mergeKueries,
   toKueryFilterFormat,
 } from '../../../../common/utils/kuery_utils';
-import {
-  FETCH_STATUS,
-  isPending,
-  useFetcher,
-} from '../../../hooks/use_fetcher';
-import { useProfilingPlugin } from '../../../hooks/use_profiling_plugin';
+import { useFetcher } from '../../../hooks/use_fetcher';
+import { ProfilingFlamegraphChart } from '../../shared/profiling/flamegraph';
+import { ProfilingFlamegraphLink } from '../../shared/profiling/flamegraph/flamegraph_link';
 import { HostnamesFilterWarning } from './host_names_filter_warning';
 
 interface Props {
@@ -54,8 +42,6 @@ export function ProfilingFlamegraph({
   rangeFrom,
   rangeTo,
 }: Props) {
-  const { profilingLocators } = useProfilingPlugin();
-
   const { data, status } = useFetcher(
     (callApmApi) => {
       if (dataSource) {
@@ -93,40 +79,16 @@ export function ProfilingFlamegraph({
         </EuiFlexItem>
         <EuiFlexItem>
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <EuiLink
-              data-test-subj="apmProfilingFlamegraphGoToFlamegraphLink"
-              href={profilingLocators?.flamegraphLocator.getRedirectUrl({
-                kuery: mergeKueries([`(${hostNamesKueryFormat})`, kuery]),
-                rangeFrom,
-                rangeTo,
-              })}
-            >
-              {i18n.translate('xpack.apm.profiling.flamegraph.link', {
-                defaultMessage: 'Go to Universal Profiling Flamegraph',
-              })}
-            </EuiLink>
+            <ProfilingFlamegraphLink
+              kuery={mergeKueries([`(${hostNamesKueryFormat})`, kuery])}
+              rangeFrom={rangeFrom}
+              rangeTo={rangeTo}
+            />
           </div>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
-      {status === FETCH_STATUS.SUCCESS && isEmpty(data) ? (
-        <EuiEmptyPrompt
-          titleSize="s"
-          title={
-            <div>
-              {i18n.translate('xpack.apm.profiling.flamegraph.noDataFound', {
-                defaultMessage: 'No data found',
-              })}
-            </div>
-          }
-        />
-      ) : (
-        <EmbeddableFlamegraph
-          data={data?.flamegraph}
-          isLoading={isPending(status)}
-          height="60vh"
-        />
-      )}
+      <ProfilingFlamegraphChart data={data?.flamegraph} status={status} />
     </>
   );
 }

x-pack/plugins/apm/public/components/app/profiling_overview/profiling_top_functions.tsx

@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { EmbeddableFunctions } from '@kbn/observability-shared-plugin/public';
 import React from 'react';
 import { ApmDataSourceWithSummary } from '../../../../common/data_source';
@@ -17,7 +16,7 @@ import {
   toKueryFilterFormat,
 } from '../../../../common/utils/kuery_utils';
 import { isPending, useFetcher } from '../../../hooks/use_fetcher';
-import { useProfilingPlugin } from '../../../hooks/use_profiling_plugin';
+import { ProfilingTopNFunctionsLink } from '../../shared/profiling/top_functions/top_functions_link';
 import { HostnamesFilterWarning } from './host_names_filter_warning';
 
 interface Props {
@@ -47,8 +46,6 @@ export function ProfilingTopNFunctions({
   rangeFrom,
   rangeTo,
 }: Props) {
-  const { profilingLocators } = useProfilingPlugin();
-
   const { data, status } = useFetcher(
     (callApmApi) => {
       if (dataSource) {
@@ -97,18 +94,11 @@ export function ProfilingTopNFunctions({
         </EuiFlexItem>
         <EuiFlexItem>
           <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <EuiLink
-              data-test-subj="apmProfilingTopNFunctionsGoToUniversalProfilingFlamegraphLink"
-              href={profilingLocators?.topNFunctionsLocator.getRedirectUrl({
-                kuery: mergeKueries([`(${hostNamesKueryFormat})`, kuery]),
-                rangeFrom,
-                rangeTo,
-              })}
-            >
-              {i18n.translate('xpack.apm.profiling.topnFunctions.link', {
-                defaultMessage: 'Go to Universal Profiling Functions',
-              })}
-            </EuiLink>
+            <ProfilingTopNFunctionsLink
+              kuery={mergeKueries([`(${hostNamesKueryFormat})`, kuery])}
+              rangeFrom={rangeFrom}
+              rangeTo={rangeTo}
+            />
           </div>
         </EuiFlexItem>
       </EuiFlexGroup>

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

@@ -21,6 +21,7 @@ import {
   enableAgentExplorerView,
   apmEnableProfilingIntegration,
   apmEnableTableSearchBar,
+  apmEnableTransactionProfiling,
 } from '@kbn/observability-plugin/common';
 import { isEmpty } from 'lodash';
 import React from 'react';
@@ -57,7 +58,9 @@ function getApmSettingsKeys(isProfilingIntegrationEnabled: boolean) {
   ];
 
   if (isProfilingIntegrationEnabled) {
-    keys.push(apmEnableProfilingIntegration);
+    keys.push(
+      ...[apmEnableProfilingIntegration, apmEnableTransactionProfiling]
+    );
   }
 
   return keys;

x-pack/plugins/apm/public/components/app/transaction_details/profiling_flamegraph.tsx

@@ -0,0 +1,81 @@
+/*
+ * 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 { EuiSpacer } from '@elastic/eui';
+import React from 'react';
+import { useFetcher } from '../../../hooks/use_fetcher';
+import { useTimeRange } from '../../../hooks/use_time_range';
+import { ProfilingFlamegraphChart } from '../../shared/profiling/flamegraph';
+import { ProfilingFlamegraphLink } from '../../shared/profiling/flamegraph/flamegraph_link';
+
+interface Props {
+  serviceName: string;
+  rangeFrom: string;
+  rangeTo: string;
+  kuery: string;
+  transactionName: string;
+  transactionType?: string;
+  environment: string;
+}
+
+export function ProfilingFlamegraph({
+  serviceName,
+  rangeFrom,
+  rangeTo,
+  kuery,
+  transactionName,
+  transactionType,
+  environment,
+}: Props) {
+  const { start, end } = useTimeRange({ rangeFrom, rangeTo });
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (!transactionType) {
+        return;
+      }
+      return callApmApi(
+        'GET /internal/apm/services/{serviceName}/transactions/flamegraph',
+        {
+          params: {
+            path: { serviceName },
+            query: {
+              start,
+              end,
+              kuery,
+              transactionName,
+              transactionType,
+              environment,
+            },
+          },
+        }
+      );
+    },
+    [
+      serviceName,
+      start,
+      end,
+      kuery,
+      transactionName,
+      transactionType,
+      environment,
+    ]
+  );
+
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <ProfilingFlamegraphLink
+          kuery={kuery}
+          rangeFrom={rangeFrom}
+          rangeTo={rangeTo}
+        />
+      </div>
+      <EuiSpacer />
+      <ProfilingFlamegraphChart data={data} status={status} />
+    </>
+  );
+}