[Profiling] adding KQL bar to embeddables

x-pack/plugins/apm/common/utils/to_kuery_filter_format.test.ts

@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { toKueryFilterFormat } from './to_kuery_filter_format';
+import { toKueryFilterFormat, mergeKueries } from './to_kuery_filter_format';
 
 describe('toKueryFilterFormat', () => {
   it('returns a single value', () => {
@@ -26,4 +26,32 @@ describe('toKueryFilterFormat', () => {
   it('return empty string when no hostname', () => {
     expect(toKueryFilterFormat('key', [])).toEqual('');
   });
+
+  describe('mergeKueries', () => {
+    it('returns empty string when both kueries are empty', () => {
+      expect(mergeKueries('', '')).toEqual('');
+    });
+
+    it('returns only first kuery when second is empty', () => {
+      expect(mergeKueries('host.name: "foo"', '')).toEqual(
+        '(host.name: "foo")'
+      );
+    });
+
+    it('returns second kuery when first is empty', () => {
+      expect(mergeKueries('', 'host.name: "foo"')).toEqual('host.name: "foo"');
+    });
+
+    it('returns merged kueries with default separator', () => {
+      expect(
+        mergeKueries('host.name: "foo" OR host.name: "bar"', 'process.id: "1"')
+      ).toEqual('(host.name: "foo" OR host.name: "bar") AND process.id: "1"');
+    });
+
+    it('uses custom separator', () => {
+      expect(mergeKueries('host.name: "foo"', 'process.id: "1"', 'OR')).toEqual(
+        '(host.name: "foo") OR process.id: "1"'
+      );
+    });
+  });
 });

x-pack/plugins/apm/common/utils/to_kuery_filter_format.ts

@@ -5,10 +5,34 @@
  * 2.0.
  */
 
+import { isEmpty } from 'lodash';
+
+type Separator = 'OR' | 'AND';
+
 export function toKueryFilterFormat(
   key: string,
   values: string[],
-  separator: 'OR' | 'AND' = 'OR'
+  separator: Separator = 'OR'
 ) {
   return values.map((value) => `${key} : "${value}"`).join(` ${separator} `);
 }
+export function mergeKueries(
+  kuery1: string,
+  kuery2: string,
+  separator: Separator = 'AND'
+) {
+  if (isEmpty(kuery1) && isEmpty(kuery2)) {
+    return '';
+  }
+
+  const kueries = [];
+  if (!isEmpty(kuery1)) {
+    kueries.push(`(${kuery1})`);
+  }
+
+  if (!isEmpty(kuery2)) {
+    kueries.push(kuery2);
+  }
+
+  return kueries.join(` ${separator} `);
+}

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

@@ -17,7 +17,8 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
+import { SearchBarFilter } from '@kbn/observability-shared-plugin/public';
 import { ApmDocumentType } from '../../../../common/document_type';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useLocalStorage } from '../../../hooks/use_local_storage';
@@ -43,6 +44,11 @@ export function ProfilingOverview() {
     type: ApmDocumentType.TransactionMetric,
     numBuckets: 20,
   });
+  const [searchBarFilter, setSearchBarFilter] = useState<SearchBarFilter>({
+    id: '',
+    filters: '',
+  });
+
   const [
     apmUniversalProfilingShowCallout,
     setAPMUniversalProfilingShowCallout,
@@ -67,6 +73,8 @@ export function ProfilingOverview() {
               end={end}
               environment={environment}
               dataSource={preferred?.source}
+              searchBarFilter={searchBarFilter}
+              onSearchBarFilterChange={setSearchBarFilter}
             />
           </>
         ),
@@ -87,12 +95,21 @@ export function ProfilingOverview() {
               startIndex={0}
               endIndex={10}
               dataSource={preferred?.source}
+              searchBarFilter={searchBarFilter}
+              onSearchBarFilterChange={setSearchBarFilter}
             />
           </>
         ),
       },
     ];
-  }, [end, environment, preferred?.source, serviceName, start]);
+  }, [
+    end,
+    environment,
+    preferred?.source,
+    searchBarFilter,
+    serviceName,
+    start,
+  ]);
 
   if (!isProfilingAvailable) {
     return null;

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

@@ -13,13 +13,19 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EmbeddableFlamegraph } from '@kbn/observability-shared-plugin/public';
+import {
+  EmbeddableFlamegraph,
+  SearchBarFilter,
+} from '@kbn/observability-shared-plugin/public';
 import { isEmpty } from 'lodash';
 import React from 'react';
 import { ApmDataSourceWithSummary } from '../../../../common/data_source';
 import { ApmDocumentType } from '../../../../common/document_type';
 import { HOST_NAME } from '../../../../common/es_fields/apm';
-import { toKueryFilterFormat } from '../../../../common/utils/to_kuery_filter_format';
+import {
+  mergeKueries,
+  toKueryFilterFormat,
+} from '../../../../common/utils/to_kuery_filter_format';
 import {
   FETCH_STATUS,
   isPending,
@@ -36,6 +42,8 @@ interface Props {
   dataSource?: ApmDataSourceWithSummary<
     ApmDocumentType.TransactionMetric | ApmDocumentType.TransactionEvent
   >;
+  searchBarFilter: SearchBarFilter;
+  onSearchBarFilterChange: (next: SearchBarFilter) => void;
 }
 
 export function ProfilingFlamegraph({
@@ -44,6 +52,8 @@ export function ProfilingFlamegraph({
   serviceName,
   environment,
   dataSource,
+  searchBarFilter,
+  onSearchBarFilterChange,
 }: Props) {
   const { profilingLocators } = useProfilingPlugin();
 
@@ -61,13 +71,14 @@ export function ProfilingFlamegraph({
                 environment,
                 documentType: dataSource.documentType,
                 rollupInterval: dataSource.rollupInterval,
+                kuery: searchBarFilter.filters,
               },
             },
           }
         );
       }
     },
-    [dataSource, serviceName, start, end, environment]
+    [dataSource, serviceName, start, end, environment, searchBarFilter]
   );
 
   const hostNamesKueryFormat = toKueryFilterFormat(
@@ -86,7 +97,10 @@ export function ProfilingFlamegraph({
             <EuiLink
               data-test-subj="apmProfilingFlamegraphGoToFlamegraphLink"
               href={profilingLocators?.flamegraphLocator.getRedirectUrl({
-                kuery: hostNamesKueryFormat,
+                kuery: mergeKueries(
+                  hostNamesKueryFormat,
+                  searchBarFilter.filters
+                ),
               })}
             >
               {i18n.translate('xpack.apm.profiling.flamegraph.link', {
@@ -113,6 +127,8 @@ export function ProfilingFlamegraph({
           data={data?.flamegraph}
           isLoading={isPending(status)}
           height="60vh"
+          onSearchBarFilterChange={onSearchBarFilterChange}
+          searchBarFilter={searchBarFilter}
         />
       )}
     </>

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

@@ -7,15 +7,21 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EmbeddableFunctions } from '@kbn/observability-shared-plugin/public';
+import {
+  EmbeddableFunctions,
+  SearchBarFilter,
+} from '@kbn/observability-shared-plugin/public';
 import React from 'react';
+import { ApmDataSourceWithSummary } from '../../../../common/data_source';
+import { ApmDocumentType } from '../../../../common/document_type';
 import { HOST_NAME } from '../../../../common/es_fields/apm';
-import { toKueryFilterFormat } from '../../../../common/utils/to_kuery_filter_format';
+import {
+  mergeKueries,
+  toKueryFilterFormat,
+} from '../../../../common/utils/to_kuery_filter_format';
 import { isPending, useFetcher } from '../../../hooks/use_fetcher';
 import { useProfilingPlugin } from '../../../hooks/use_profiling_plugin';
 import { HostnamesFilterWarning } from './host_names_filter_warning';
-import { ApmDataSourceWithSummary } from '../../../../common/data_source';
-import { ApmDocumentType } from '../../../../common/document_type';
 
 interface Props {
   serviceName: string;
@@ -27,6 +33,8 @@ interface Props {
   dataSource?: ApmDataSourceWithSummary<
     ApmDocumentType.TransactionMetric | ApmDocumentType.TransactionEvent
   >;
+  searchBarFilter: SearchBarFilter;
+  onSearchBarFilterChange: (next: SearchBarFilter) => void;
 }
 
 export function ProfilingTopNFunctions({
@@ -37,6 +45,8 @@ export function ProfilingTopNFunctions({
   startIndex,
   endIndex,
   dataSource,
+  searchBarFilter,
+  onSearchBarFilterChange,
 }: Props) {
   const { profilingLocators } = useProfilingPlugin();
 
@@ -56,13 +66,23 @@ export function ProfilingTopNFunctions({
                 endIndex,
                 documentType: dataSource.documentType,
                 rollupInterval: dataSource.rollupInterval,
+                kuery: searchBarFilter.filters,
               },
             },
           }
         );
       }
     },
-    [dataSource, serviceName, start, end, environment, startIndex, endIndex]
+    [
+      dataSource,
+      serviceName,
+      start,
+      end,
+      environment,
+      startIndex,
+      endIndex,
+      searchBarFilter,
+    ]
   );
 
   const hostNamesKueryFormat = toKueryFilterFormat(
@@ -81,7 +101,10 @@ export function ProfilingTopNFunctions({
             <EuiLink
               data-test-subj="apmProfilingTopNFunctionsGoToUniversalProfilingFlamegraphLink"
               href={profilingLocators?.topNFunctionsLocator.getRedirectUrl({
-                kuery: hostNamesKueryFormat,
+                kuery: mergeKueries(
+                  hostNamesKueryFormat,
+                  searchBarFilter.filters
+                ),
               })}
             >
               {i18n.translate('xpack.apm.profiling.topnFunctions.link', {
@@ -97,6 +120,8 @@ export function ProfilingTopNFunctions({
         isLoading={isPending(status)}
         rangeFrom={new Date(start).valueOf()}
         rangeTo={new Date(end).valueOf()}
+        onSearchBarFilterChange={onSearchBarFilterChange}
+        searchBarFilter={searchBarFilter}
       />
     </>
   );

x-pack/plugins/apm/server/routes/profiling/route.ts

@@ -10,11 +10,15 @@ import type { BaseFlameGraph, TopNFunctions } from '@kbn/profiling-utils';
 import * as t from 'io-ts';
 import { profilingUseLegacyFlamegraphAPI } from '@kbn/observability-plugin/common';
 import { HOST_NAME } from '../../../common/es_fields/apm';
-import { toKueryFilterFormat } from '../../../common/utils/to_kuery_filter_format';
+import {
+  mergeKueries,
+  toKueryFilterFormat,
+} from '../../../common/utils/to_kuery_filter_format';
 import { getApmEventClient } from '../../lib/helpers/get_apm_event_client';
 import { createApmServerRoute } from '../apm_routes/create_apm_server_route';
 import {
   environmentRt,
+  kueryRt,
   rangeRt,
   serviceTransactionDataSourceRt,
 } from '../default_api_types';
@@ -28,6 +32,7 @@ const profilingFlamegraphRoute = createApmServerRoute({
       rangeRt,
       environmentRt,
       serviceTransactionDataSourceRt,
+      kueryRt,
     ]),
   }),
   options: { tags: ['access:apm'] },
@@ -48,7 +53,7 @@ const profilingFlamegraphRoute = createApmServerRoute({
         await plugins.profilingDataAccess?.start(),
       ]);
     if (profilingDataAccessStart) {
-      const { start, end, environment, documentType, rollupInterval } =
+      const { start, end, environment, documentType, rollupInterval, kuery } =
         params.query;
       const { serviceName } = params.path;
 
@@ -71,7 +76,10 @@ const profilingFlamegraphRoute = createApmServerRoute({
           esClient: esClient.asCurrentUser,
           rangeFromMs: start,
           rangeToMs: end,
-          kuery: toKueryFilterFormat(HOST_NAME, serviceHostNames),
+          kuery: mergeKueries(
+            toKueryFilterFormat(HOST_NAME, serviceHostNames),
+            kuery
+          ),
           useLegacyFlamegraphAPI,
         });
 
@@ -91,6 +99,7 @@ const profilingFunctionsRoute = createApmServerRoute({
       environmentRt,
       serviceTransactionDataSourceRt,
       t.type({ startIndex: toNumberRt, endIndex: toNumberRt }),
+      kueryRt,
     ]),
   }),
   options: { tags: ['access:apm'] },
@@ -113,6 +122,7 @@ const profilingFunctionsRoute = createApmServerRoute({
         endIndex,
         documentType,
         rollupInterval,
+        kuery,
       } = params.query;
       const { serviceName } = params.path;
 
@@ -134,7 +144,10 @@ const profilingFunctionsRoute = createApmServerRoute({
         esClient: esClient.asCurrentUser,
         rangeFromMs: start,
         rangeToMs: end,
-        kuery: toKueryFilterFormat(HOST_NAME, serviceHostNames),
+        kuery: mergeKueries(
+          toKueryFilterFormat(HOST_NAME, serviceHostNames),
+          kuery
+        ),
         startIndex,
         endIndex,
       });

x-pack/plugins/observability_shared/public/components/profiling/embeddables/index.ts

@@ -14,3 +14,5 @@ export { EmbeddableFlamegraph } from './embeddable_flamegraph';
 export const EMBEDDABLE_FUNCTIONS = 'EMBEDDABLE_FUNCTIONS';
 /** Profiling functions embeddable */
 export { EmbeddableFunctions } from './embeddable_functions';
+/** Profiling Search bar params */
+export type { SearchBarFilter } from './profiling_embeddable';