[APM] Add elasticsearch queries to api response (#95146)

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

@@ -412,4 +412,8 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'observability:enableInspectEsQueries': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
 };

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

@@ -31,6 +31,7 @@ export interface UsageStats {
   'apm:enableSignificantTerms': boolean;
   'apm:enableServiceOverview': boolean;
   'observability:enableAlertingExperience': boolean;
+  'observability:enableInspectEsQueries': boolean;
   'visualize:enableLabs': boolean;
   'visualization:heatmap:maxBuckets': number;
   'visualization:colorMapping': string;

src/plugins/telemetry/schema/oss_plugins.json

@@ -8032,6 +8032,12 @@
           "_meta": {
             "description": "Non-default value of setting."
           }
+        },
+        "observability:enableInspectEsQueries": {
+          "type": "boolean",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
         }
       }
     },

x-pack/plugins/apm/common/apm_api/parse_endpoint.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+type Method = 'get' | 'post' | 'put' | 'delete';
+
+export function parseEndpoint(
+  endpoint: string,
+  pathParams: Record<string, any> = {}
+) {
+  const [method, rawPathname] = endpoint.split(' ');
+
+  // replace template variables with path params
+  const pathname = Object.keys(pathParams).reduce((acc, paramName) => {
+    return acc.replace(`{${paramName}}`, pathParams[paramName]);
+  }, rawPathname);
+
+  return { method: parseMethod(method), pathname };
+}
+
+export function parseMethod(method: string) {
+  const res = method.trim().toLowerCase() as Method;
+
+  if (!['get', 'post', 'put', 'delete'].includes(res)) {
+    throw new Error('Endpoint was not prefixed with a valid HTTP method');
+  }
+
+  return res;
+}

x-pack/plugins/apm/common/runtime_types/strict_keys_rt/index.test.ts

@@ -45,10 +45,10 @@ describe('strictKeysRt', () => {
       {
         type: t.intersection([
           t.type({ query: t.type({ bar: t.string }) }),
-          t.partial({ query: t.partial({ _debug: t.boolean }) }),
+          t.partial({ query: t.partial({ _inspect: t.boolean }) }),
         ]),
-        passes: [{ query: { bar: '', _debug: true } }],
-        fails: [{ query: { _debug: true } }],
+        passes: [{ query: { bar: '', _inspect: true } }],
+        fails: [{ query: { _inspect: true } }],
       },
     ];
 
@@ -91,12 +91,12 @@ describe('strictKeysRt', () => {
     } as Record<string, any>);
 
     const typeB = t.partial({
-      query: t.partial({ _debug: jsonRt.pipe(t.boolean) }),
+      query: t.partial({ _inspect: jsonRt.pipe(t.boolean) }),
     });
 
     const value = {
       query: {
-        _debug: 'true',
+        _inspect: 'true',
         filterNames: JSON.stringify(['host', 'agentName']),
       },
     };

x-pack/plugins/apm/public/application/application.test.tsx

@@ -8,7 +8,7 @@
 import { act } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Observable } from 'rxjs';
-import { AppMountParameters, CoreStart, HttpSetup } from 'src/core/public';
+import { AppMountParameters, CoreStart } from 'src/core/public';
 import { mockApmPluginContextValue } from '../context/apm_plugin/mock_apm_plugin_context';
 import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
@@ -72,7 +72,7 @@ describe('renderApp', () => {
       embeddable,
     };
     jest.spyOn(window, 'scrollTo').mockReturnValueOnce(undefined);
-    createCallApmApi((core.http as unknown) as HttpSetup);
+    createCallApmApi((core as unknown) as CoreStart);
 
     jest
       .spyOn(window.console, 'warn')

x-pack/plugins/apm/public/application/csmApp.tsx

@@ -118,7 +118,7 @@ export const renderApp = (
 ) => {
   const { element } = appMountParameters;
 
-  createCallApmApi(core.http);
+  createCallApmApi(core);
 
   // Automatically creates static index pattern and stores as saved object
   createStaticIndexPattern().catch((e) => {

x-pack/plugins/apm/public/application/index.tsx

@@ -120,7 +120,7 @@ export const renderApp = (
   // render APM feedback link in global help menu
   setHelpExtension(core);
   setReadonlyBadge(core);
-  createCallApmApi(core.http);
+  createCallApmApi(core);
 
   // Automatically creates static index pattern and stores as saved object
   createStaticIndexPattern().catch((e) => {

x-pack/plugins/apm/public/components/alerting/error_count_alert_trigger/index.tsx

@@ -107,7 +107,11 @@ export function ErrorCountAlertTrigger(props: Props) {
   ];
 
   const chartPreview = (
-    <ChartPreview data={data} threshold={threshold} yTickFormat={asInteger} />
+    <ChartPreview
+      data={data?.errorCountChartPreview}
+      threshold={threshold}
+      yTickFormat={asInteger}
+    />
   );
 
   return (

x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.tsx

@@ -13,7 +13,6 @@ import { useParams } from 'react-router-dom';
 import { ForLastExpression } from '../../../../../triggers_actions_ui/public';
 import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values';
 import { getDurationFormatter } from '../../../../common/utils/formatters';
-import { TimeSeries } from '../../../../typings/timeseries';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useEnvironmentsFetcher } from '../../../hooks/use_environments_fetcher';
@@ -116,9 +115,9 @@ export function TransactionDurationAlertTrigger(props: Props) {
     ]
   );
 
-  const maxY = getMaxY([
-    { data: data ?? [] } as TimeSeries<{ x: number; y: number | null }>,
-  ]);
+  const latencyChartPreview = data?.latencyChartPreview ?? [];
+
+  const maxY = getMaxY([{ data: latencyChartPreview }]);
   const formatter = getDurationFormatter(maxY);
   const yTickFormat = getResponseTimeTickFormatter(formatter);
 
@@ -127,7 +126,7 @@ export function TransactionDurationAlertTrigger(props: Props) {
 
   const chartPreview = (
     <ChartPreview
-      data={data}
+      data={latencyChartPreview}
       threshold={thresholdMs}
       yTickFormat={yTickFormat}
     />

x-pack/plugins/apm/public/components/alerting/transaction_error_rate_alert_trigger/index.tsx

@@ -132,7 +132,7 @@ export function TransactionErrorRateAlertTrigger(props: Props) {
 
   const chartPreview = (
     <ChartPreview
-      data={data}
+      data={data?.errorRateChartPreview}
       yTickFormat={(d: number | null) => asPercent(d, 1)}
       threshold={thresholdAsPercent}
     />

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx

@@ -35,7 +35,7 @@ export function BreakdownSeries({
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
 
-  const { data, status } = useBreakdowns({
+  const { breakdowns, status } = useBreakdowns({
     field,
     value,
     percentileRange,
@@ -49,7 +49,7 @@ export function BreakdownSeries({
   // so don't user that here
   return (
     <>
-      {data?.map(({ data: seriesData, name }, sortIndex) => (
+      {breakdowns.map(({ data: seriesData, name }, sortIndex) => (
         <LineSeries
           id={`${field}-${value}-${name}`}
           key={`${field}-${value}-${name}`}

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

@@ -95,13 +95,13 @@ export function PageLoadDistribution() {
       </EuiFlexGroup>
       <EuiSpacer size="m" />
       <PageLoadDistChart
-        data={data}
+        data={data?.pageLoadDistribution}
         onPercentileChange={onPercentileChange}
         loading={status !== 'success'}
         breakdown={breakdown}
         percentileRange={{
-          max: percentileRange.max || data?.maxDuration,
-          min: percentileRange.min || data?.minDuration,
+          max: percentileRange.max || data?.pageLoadDistribution?.maxDuration,
+          min: percentileRange.min || data?.pageLoadDistribution?.minDuration,
         }}
       />
     </div>

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/use_breakdowns.ts

@@ -17,12 +17,10 @@ interface Props {
 
 export const useBreakdowns = ({ percentileRange, field, value }: Props) => {
   const { urlParams, uiFilters } = useUrlParams();
-
   const { start, end, searchTerm } = urlParams;
-
   const { min: minP, max: maxP } = percentileRange ?? {};
 
-  return useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
       if (start && end && field && value) {
         return callApmApi({
@@ -47,4 +45,6 @@ export const useBreakdowns = ({ percentileRange, field, value }: Props) => {
     },
     [end, start, uiFilters, field, value, minP, maxP, searchTerm]
   );
+
+  return { breakdowns: data?.pageLoadDistBreakdown ?? [], status };
 };

x-pack/plugins/apm/public/components/app/RumDashboard/Panels/MainFilters.tsx

@@ -38,6 +38,7 @@ export function MainFilters() {
     [start, end]
   );
 
+  const rumServiceNames = data?.rumServices ?? [];
   const { isSmall } = useBreakPoints();
 
   // on mobile we want it to take full width
@@ -48,7 +49,7 @@ export function MainFilters() {
       <EuiFlexItem grow={false}>
         <ServiceNameFilter
           loading={status !== 'success'}
-          serviceNames={data ?? []}
+          serviceNames={rumServiceNames}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false} style={envStyle}>

x-pack/plugins/apm/public/components/app/RumDashboard/hooks/useLocalUIFilters.ts

@@ -68,7 +68,7 @@ export function useLocalUIFilters({
     });
   };
 
-  const { data = getInitialData(filterNames), status } = useFetcher(
+  const { data, status } = useFetcher(
     (callApmApi) => {
       if (shouldFetch && urlParams.start && urlParams.end) {
         return callApmApi({
@@ -96,7 +96,8 @@ export function useLocalUIFilters({
     ]
   );
 
-  const filters = data.map((filter) => ({
+  const localUiFilters = data?.localUiFilters ?? getInitialData(filterNames);
+  const filters = localUiFilters.map((filter) => ({
     ...filter,
     value: values[filter.name] || [],
   }));

x-pack/plugins/apm/public/components/app/RumDashboard/hooks/use_call_api.ts

@@ -11,9 +11,9 @@ import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plug
 import { FetchOptions } from '../../../../../common/fetch_options';
 
 export function useCallApi() {
-  const { http } = useApmPluginContext().core;
+  const { core } = useApmPluginContext();
 
   return useMemo(() => {
-    return <T = void>(options: FetchOptions) => callApi<T>(http, options);
-  }, [http]);
+    return <T = void>(options: FetchOptions) => callApi<T>(core, options);
+  }, [core]);
 }

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import cytoscape from 'cytoscape';
-import { HttpSetup } from 'kibana/public';
+import { CoreStart } from 'kibana/public';
 import React, { ComponentType } from 'react';
 import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context';
@@ -21,19 +21,21 @@ export default {
   component: Popover,
   decorators: [
     (Story: ComponentType) => {
-      const httpMock = ({
-        get: async () => ({
-          avgCpuUsage: 0.32809666568309237,
-          avgErrorRate: 0.556068173242986,
-          avgMemoryUsage: 0.5504868173242986,
-          transactionStats: {
-            avgRequestsPerMinute: 164.47222031860858,
-            avgTransactionDuration: 61634.38905590272,
-          },
-        }),
-      } as unknown) as HttpSetup;
+      const coreMock = ({
+        http: {
+          get: async () => ({
+            avgCpuUsage: 0.32809666568309237,
+            avgErrorRate: 0.556068173242986,
+            avgMemoryUsage: 0.5504868173242986,
+            transactionStats: {
+              avgRequestsPerMinute: 164.47222031860858,
+              avgTransactionDuration: 61634.38905590272,
+            },
+          }),
+        },
+      } as unknown) as CoreStart;
 
-      createCallApmApi(httpMock);
+      createCallApmApi(coreMock);
 
       return (
         <EuiThemeProvider>

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx

@@ -33,7 +33,7 @@ interface Props {
 }
 
 export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
-  const { data: serviceNames = [], status: serviceNamesStatus } = useFetcher(
+  const { data: serviceNamesData, status: serviceNamesStatus } = useFetcher(
     (callApmApi) => {
       return callApmApi({
         endpoint: 'GET /api/apm/settings/agent-configuration/services',
@@ -43,8 +43,9 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
     [],
     { preservePreviousData: false }
   );
+  const serviceNames = serviceNamesData?.serviceNames ?? [];
 
-  const { data: environments = [], status: environmentStatus } = useFetcher(
+  const { data: environmentsData, status: environmentsStatus } = useFetcher(
     (callApmApi) => {
       if (newConfig.service.name) {
         return callApmApi({
@@ -59,6 +60,8 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
     { preservePreviousData: false }
   );
 
+  const environments = environmentsData?.environments ?? [];
+
   const { status: agentNameStatus } = useFetcher(
     async (callApmApi) => {
       const serviceName = newConfig.service.name;
@@ -153,11 +156,11 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
           'xpack.apm.agentConfig.servicePage.environment.fieldLabel',
           { defaultMessage: 'Service environment' }
         )}
-        isLoading={environmentStatus === FETCH_STATUS.LOADING}
+        isLoading={environmentsStatus === FETCH_STATUS.LOADING}
         options={environmentOptions}
         value={newConfig.service.environment}
         disabled={
-          !newConfig.service.name || environmentStatus === FETCH_STATUS.LOADING
+          !newConfig.service.name || environmentsStatus === FETCH_STATUS.LOADING
         }
         onChange={(e) => {
           e.preventDefault();

x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.stories.tsx

@@ -7,7 +7,7 @@
 
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { HttpSetup } from 'kibana/public';
+import { CoreStart } from 'kibana/public';
 import { EuiThemeProvider } from '../../../../../../../../../src/plugins/kibana_react/common';
 import { AgentConfiguration } from '../../../../../../common/agent_configuration/configuration_types';
 import { FETCH_STATUS } from '../../../../../hooks/use_fetcher';
@@ -23,10 +23,10 @@ storiesOf(
   module
 )
   .addDecorator((storyFn) => {
-    const httpMock = {};
+    const coreMock = ({} as unknown) as CoreStart;
 
     // mock
-    createCallApmApi((httpMock as unknown) as HttpSetup);
+    createCallApmApi(coreMock);
 
     const contextMock = {
       core: {