[User Experience App] Pass filters down to page view and page load charts (#137822) (#137951)

(cherry picked from commit cc328ff6d5)

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>

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

@@ -87,7 +87,7 @@ export { NavigationWarningPromptProvider, Prompt } from './utils/navigation_warn
 export { getApmTraceUrl } from './utils/get_apm_trace_url';
 export { createExploratoryViewUrl } from './components/shared/exploratory_view/configurations/exploratory_view_url';
 export type { AllSeries } from './components/shared/exploratory_view/hooks/use_series_storage';
-export type { SeriesUrl } from './components/shared/exploratory_view/types';
+export type { SeriesUrl, UrlFilter } from './components/shared/exploratory_view/types';
 
 export type {
   ObservabilityRuleTypeFormatter,

x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_load_dist_chart.tsx

@@ -7,11 +7,13 @@
 
 import React from 'react';
 import { AllSeries } from '@kbn/observability-plugin/public';
+import { getExploratoryViewFilter } from '../../../../services/data/get_exp_view_filter';
 import { useExpViewAttributes } from './use_exp_view_attrs';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 import { useDataView } from '../local_uifilters/use_data_view';
 import { useKibanaServices } from '../../../../hooks/use_kibana_services';
 import { TRANSACTION_DURATION } from '../../../../../common/elasticsearch_fieldnames';
+import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 
 interface Props {
   breakdown: BreakdownItem | null;
@@ -21,6 +23,8 @@ interface Props {
 export function PageLoadDistChart({ onPercentileChange, breakdown }: Props) {
   const { dataViewTitle } = useDataView();
 
+  const { uxUiFilters, urlParams } = useLegacyUrlParams();
+
   const kibana = useKibanaServices();
   const { ExploratoryViewEmbeddable } = kibana.observability!;
 
@@ -42,6 +46,7 @@ export function PageLoadDistChart({ onPercentileChange, breakdown }: Props) {
       name: 'page-load-distribution',
       selectedMetricField: TRANSACTION_DURATION,
       breakdown: breakdown?.fieldName,
+      filters: getExploratoryViewFilter(uxUiFilters, urlParams),
     },
   ];
 

x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_views_chart.tsx

@@ -16,6 +16,8 @@ import {
 } from '@kbn/observability-plugin/public';
 import { useHistory } from 'react-router-dom';
 
+import { getExploratoryViewFilter } from '../../../../services/data/get_exp_view_filter';
+import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { BreakdownItem } from '../../../../../typings/ui_filters';
 import { useKibanaServices } from '../../../../hooks/use_kibana_services';
 import { useDataView } from '../local_uifilters/use_data_view';
@@ -31,6 +33,8 @@ export function PageViewsChart({ breakdown }: Props) {
   const kibana = useKibanaServices();
   const { ExploratoryViewEmbeddable } = kibana.observability;
 
+  const { uxUiFilters, urlParams } = useLegacyUrlParams();
+
   const theme = useTheme();
 
   const { reportDefinitions, time } = useExpViewAttributes();
@@ -44,6 +48,7 @@ export function PageViewsChart({ breakdown }: Props) {
       selectedMetricField: RECORDS_FIELD,
       breakdown: breakdown?.fieldName,
       color: theme.eui.euiColorVis1,
+      filters: getExploratoryViewFilter(uxUiFilters, urlParams),
     },
   ];
   const onBrushEnd = ({ range }: { range: number[] }) => {

x-pack/plugins/ux/public/services/data/get_exp_view_filter.test.ts

@@ -0,0 +1,63 @@
+/*
+ * 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 { getExploratoryViewFilter } from './get_exp_view_filter';
+
+const urlParams = {
+  start: '2022-08-02T08:35:00.000Z',
+  end: '2022-08-02T08:50:32.150Z',
+  exactStart: '2022-08-02T08:35:32.150Z',
+  exactEnd: '2022-08-02T08:50:32.150Z',
+  rangeFrom: 'now-15m',
+  rangeTo: 'now',
+  page: 0,
+  percentile: 50,
+  transactionUrl: 'https://www.elastic.co/',
+  location: 'US',
+  serviceName: 'elastic-co-frontend',
+};
+
+const uiFilters = {
+  environment: 'ENVIRONMENT_ALL',
+  transactionUrl: ['https://www.elastic.co/'],
+  location: ['US'],
+  serviceName: ['elastic-co-frontend'],
+};
+
+describe('getExploratoryViewFilter', function () {
+  it('should return as expected', function () {
+    const result = getExploratoryViewFilter(
+      {
+        browser: ['Chrome'],
+        environment: 'production',
+      },
+      {}
+    );
+
+    expect(result).toEqual([
+      {
+        field: 'user_agent.name',
+        values: ['Chrome'],
+      },
+    ]);
+  });
+
+  it('should not return service name in filters', function () {
+    const result = getExploratoryViewFilter(uiFilters, urlParams);
+
+    expect(result).toEqual([
+      {
+        field: 'url.full',
+        values: ['https://www.elastic.co/'],
+      },
+      {
+        field: 'client.geo.country_iso_code',
+        values: ['US'],
+      },
+    ]);
+  });
+});

x-pack/plugins/ux/public/services/data/get_exp_view_filter.ts

@@ -0,0 +1,60 @@
+/*
+ * 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 { UrlFilter } from '@kbn/observability-plugin/public';
+import { TRANSACTION_URL } from '../../../common/elasticsearch_fieldnames';
+import { UrlParams } from '../../context/url_params_context/types';
+import {
+  uxLocalUIFilterNames,
+  uxLocalUIFilters,
+} from '../../../common/ux_ui_filter';
+import { UxUIFilters } from '../../../typings/ui_filters';
+
+export function getExploratoryViewFilter(
+  uiFilters: UxUIFilters,
+  urlParams: UrlParams
+) {
+  const { searchTerm } = urlParams;
+
+  const validFilters = uxLocalUIFilterNames.filter(
+    (name) => name in uiFilters && name !== 'serviceName'
+  );
+
+  const filters: Record<string, UrlFilter> = {};
+
+  validFilters.forEach((filterName) => {
+    const field = uxLocalUIFilters[filterName];
+    const value = uiFilters[filterName];
+    let curr = filters[field.fieldName] ?? { field: field.fieldName };
+
+    if (filterName.includes('Excluded')) {
+      curr = {
+        ...curr,
+        notValues: value ? [...value] : value,
+      };
+    } else {
+      curr = {
+        ...curr,
+        values: value ? [...value] : value,
+      };
+    }
+
+    filters[field.fieldName] = curr;
+  });
+
+  if (searchTerm) {
+    const urlFilter: UrlFilter = {
+      field: TRANSACTION_URL,
+    };
+    if (searchTerm) {
+      urlFilter.wildcards = [searchTerm];
+    }
+    filters[TRANSACTION_URL] = { ...urlFilter, ...filters[TRANSACTION_URL] };
+  }
+
+  return Object.values(filters);
+}