diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 7377ea3ffe353..793805005de8b 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -150,9 +150,6 @@ # Client Side Monitoring / Uptime (lives in APM directories but owned by Uptime) /x-pack/plugins/apm/public/application/uxApp.tsx @elastic/uptime /x-pack/plugins/apm/public/components/app/rum_dashboard @elastic/uptime -/x-pack/plugins/apm/server/lib/rum_client @elastic/uptime -/x-pack/plugins/apm/server/routes/rum_client.ts @elastic/uptime -/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts @elastic/uptime /x-pack/test/apm_api_integration/tests/csm/ @elastic/uptime ### END Observability Plugins diff --git a/.github/paths-labeller.yml b/.github/paths-labeller.yml index 6800aeea65b9d..efc03d8942b8d 100644 --- a/.github/paths-labeller.yml +++ b/.github/paths-labeller.yml @@ -17,7 +17,3 @@ - "x-pack/plugins/synthetics/**/*.*" - "x-pack/plugins/ux/**/*.*" - "x-pack/plugins/observability/public/components/shared/exploratory_view/**/*.*" - - "x-pack/plugins/apm/server/lib/rum_client/**/*.*" - - "x-pack/plugins/apm/server/lib/rum_client/*.*" - - "x-pack/plugins/apm/server/routes/rum_client.ts" - - "x-pack/plugins/apm/server/projections/rum_overview.ts" diff --git a/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts b/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts deleted file mode 100644 index 545e90914f4d2..0000000000000 --- a/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts +++ /dev/null @@ -1,121 +0,0 @@ -/* - * 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 { rangeQuery } from '@kbn/observability-plugin/server'; -import { SetupUX } from '../routes/rum_client/route'; -import { - AGENT_NAME, - TRANSACTION_TYPE, - SERVICE_LANGUAGE_NAME, -} from '../../common/elasticsearch_fieldnames'; -import { ProcessorEvent } from '../../common/processor_event'; -import { TRANSACTION_PAGE_LOAD } from '../../common/transaction_types'; -import { getEsFilter } from '../routes/rum_client/ui_filters/get_es_filter'; - -export function getRumPageLoadTransactionsProjection({ - setup, - urlQuery, - checkFetchStartFieldExists = true, - start, - end, -}: { - setup: SetupUX; - urlQuery?: string; - checkFetchStartFieldExists?: boolean; - start: number; - end: number; -}) { - const { uiFilters } = setup; - - const bool = { - filter: [ - ...rangeQuery(start, end), - { term: { [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD } }, - ...(checkFetchStartFieldExists - ? [ - { - // Adding this filter to cater for some inconsistent rum data - // not available on aggregated transactions - exists: { - field: 'transaction.marks.navigationTiming.fetchStart', - }, - }, - ] - : []), - ...(urlQuery - ? [ - { - wildcard: { - 'url.full': `*${urlQuery}*`, - }, - }, - ] - : []), - ...getEsFilter(uiFilters), - ], - must_not: [...getEsFilter(uiFilters, true)], - }; - - return { - apm: { - events: [ProcessorEvent.transaction], - }, - body: { - query: { - bool, - }, - }, - }; -} - -export function getRumErrorsProjection({ - setup, - urlQuery, - start, - end, -}: { - setup: SetupUX; - urlQuery?: string; - start: number; - end: number; -}) { - const { uiFilters } = setup; - - const bool = { - filter: [ - ...rangeQuery(start, end), - { term: { [AGENT_NAME]: 'rum-js' } }, - { - term: { - [SERVICE_LANGUAGE_NAME]: 'javascript', - }, - }, - ...getEsFilter(uiFilters), - ...(urlQuery - ? [ - { - wildcard: { - 'url.full': `*${urlQuery}*`, - }, - }, - ] - : []), - ], - must_not: [...getEsFilter(uiFilters, true)], - }; - - return { - apm: { - events: [ProcessorEvent.error], - }, - body: { - query: { - bool, - }, - }, - }; -} diff --git a/x-pack/plugins/apm/server/projections/typings.ts b/x-pack/plugins/apm/server/projections/typings.ts deleted file mode 100644 index 6ba7d315bfa6d..0000000000000 --- a/x-pack/plugins/apm/server/projections/typings.ts +++ /dev/null @@ -1,24 +0,0 @@ -/* - * 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 type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey'; -import { AggregationOptionsByType } from '@kbn/core/types/elasticsearch'; -import { APMEventESSearchRequest } from '../lib/helpers/create_es_client/create_apm_event_client'; - -export type Projection = Omit & { - body: Omit< - Required['body'], - 'aggs' | 'aggregations' | 'size' - > & { - size?: number; - aggs?: { - [key: string]: { - terms: AggregationOptionsByType['terms'] & { field: string }; - aggs?: Record; - }; - }; - }; -}; diff --git a/x-pack/plugins/apm/server/projections/util/merge_projection/index.test.ts b/x-pack/plugins/apm/server/projections/util/merge_projection/index.test.ts deleted file mode 100644 index 8294630dad9d4..0000000000000 --- a/x-pack/plugins/apm/server/projections/util/merge_projection/index.test.ts +++ /dev/null @@ -1,80 +0,0 @@ -/* - * 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 { mergeProjection } from '.'; - -describe('mergeProjection', () => { - it('overrides arrays', () => { - expect( - mergeProjection( - { - apm: { events: [] }, - body: { query: { bool: { must: [{ terms: { field: ['a'] } }] } } }, - }, - { - apm: { events: [] }, - body: { query: { bool: { must: [{ term: { field: 'b' } }] } } }, - } - ) - ).toEqual({ - apm: { - events: [], - }, - body: { - query: { - bool: { - must: [ - { - term: { field: 'b' }, - }, - ], - }, - }, - }, - }); - }); - - it('merges plain objects', () => { - const termsAgg = { terms: { field: 'bar' } }; - expect( - mergeProjection( - { apm: { events: [] }, body: { query: {}, aggs: { foo: termsAgg } } }, - { - apm: { - events: [], - }, - body: { - aggs: { - foo: { ...termsAgg, aggs: { bar: { terms: { field: 'baz' } } } }, - }, - }, - } - ) - ).toEqual({ - apm: { - events: [], - }, - body: { - query: {}, - aggs: { - foo: { - terms: { - field: 'bar', - }, - aggs: { - bar: { - terms: { - field: 'baz', - }, - }, - }, - }, - }, - }, - }); - }); -}); diff --git a/x-pack/plugins/apm/server/projections/util/merge_projection/index.ts b/x-pack/plugins/apm/server/projections/util/merge_projection/index.ts deleted file mode 100644 index 992f47c9c1066..0000000000000 --- a/x-pack/plugins/apm/server/projections/util/merge_projection/index.ts +++ /dev/null @@ -1,37 +0,0 @@ -/* - * 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 { cloneDeep, isPlainObject, mergeWith } from 'lodash'; -import { DeepPartial } from 'utility-types'; -import { APMEventESSearchRequest } from '../../../lib/helpers/create_es_client/create_apm_event_client'; -import { Projection } from '../../typings'; - -type PlainObject = Record; - -type SourceProjection = DeepPartial; - -type DeepMerge = U extends PlainObject - ? T extends PlainObject - ? Omit & { - [key in keyof U]: T extends { [k in key]: any } - ? DeepMerge - : U[key]; - } - : U - : U; - -export function mergeProjection< - T extends Projection, - U extends SourceProjection ->(target: T, source: U): DeepMerge { - return mergeWith({}, cloneDeep(target), source, (a, b) => { - if (isPlainObject(a) && isPlainObject(b)) { - return undefined; - } - return b; - }) as DeepMerge; -} diff --git a/x-pack/plugins/apm/server/routes/apm_routes/get_global_apm_server_route_repository.ts b/x-pack/plugins/apm/server/routes/apm_routes/get_global_apm_server_route_repository.ts index 4c6bc38192fa4..f906d6d95feb0 100644 --- a/x-pack/plugins/apm/server/routes/apm_routes/get_global_apm_server_route_repository.ts +++ b/x-pack/plugins/apm/server/routes/apm_routes/get_global_apm_server_route_repository.ts @@ -26,7 +26,6 @@ import { infrastructureRouteRepository } from '../infrastructure/route'; import { latencyDistributionRouteRepository } from '../latency_distribution/route'; import { metricsRouteRepository } from '../metrics/route'; import { observabilityOverviewRouteRepository } from '../observability_overview/route'; -import { rumRouteRepository } from '../rum_client/route'; import { serviceRouteRepository } from '../services/route'; import { serviceGroupRouteRepository } from '../service_groups/route'; import { serviceMapRouteRepository } from '../service_map/route'; @@ -50,7 +49,6 @@ function getTypedGlobalApmServerRouteRepository() { ...latencyDistributionRouteRepository, ...metricsRouteRepository, ...observabilityOverviewRouteRepository, - ...rumRouteRepository, ...serviceMapRouteRepository, ...serviceNodeRouteRepository, ...serviceRouteRepository, diff --git a/x-pack/plugins/apm/server/routes/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/routes/rum_client/__snapshots__/queries.test.ts.snap deleted file mode 100644 index c36088481d07c..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/__snapshots__/queries.test.ts.snap +++ /dev/null @@ -1,272 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`rum client dashboard queries fetches page load distribution 1`] = ` -Object { - "apm": Object { - "events": Array [ - "transaction", - ], - }, - "body": Object { - "aggs": Object { - "durPercentiles": Object { - "percentiles": Object { - "field": "transaction.duration.us", - "hdr": Object { - "number_of_significant_value_digits": 3, - }, - "percents": Array [ - 50, - 75, - 90, - 95, - 99, - ], - }, - }, - "loadDistribution": Object { - "percentile_ranks": Object { - "field": "transaction.duration.us", - "hdr": Object { - "number_of_significant_value_digits": 3, - }, - "keyed": false, - "values": Array [ - 0, - 500000, - 1000000, - 1500000, - 2000000, - 2500000, - 3000000, - 3500000, - 4000000, - 4500000, - 5000000, - 5500000, - 6000000, - 6500000, - 7000000, - 7500000, - 8000000, - 8500000, - 9000000, - 9500000, - 10000000, - 10500000, - 11000000, - 11500000, - 12000000, - 12500000, - 13000000, - 13500000, - 14000000, - 14500000, - 15000000, - 15500000, - 16000000, - 16500000, - 17000000, - 17500000, - 18000000, - 18500000, - 19000000, - 19500000, - 20000000, - 20500000, - 21000000, - 21500000, - 22000000, - 22500000, - 23000000, - 23500000, - 24000000, - 24500000, - 25000000, - 25500000, - 26000000, - 26500000, - 27000000, - 27500000, - 28000000, - 28500000, - 29000000, - 29500000, - 30000000, - 30500000, - 31000000, - 31500000, - 32000000, - 32500000, - 33000000, - 33500000, - 34000000, - 34500000, - 35000000, - 35500000, - 36000000, - 36500000, - 37000000, - 37500000, - 38000000, - 38500000, - 39000000, - 39500000, - 40000000, - 40500000, - 41000000, - 41500000, - 42000000, - 42500000, - 43000000, - 43500000, - 44000000, - 44500000, - 45000000, - 45500000, - 46000000, - 46500000, - 47000000, - 47500000, - 48000000, - 48500000, - 49000000, - 49500000, - 50000000, - 50500000, - 51000000, - 51500000, - 52000000, - 52500000, - 53000000, - 53500000, - 54000000, - 54500000, - 55000000, - 55500000, - 56000000, - 56500000, - 57000000, - 57500000, - 58000000, - 58500000, - 59000000, - 59500000, - 60000000, - 60500000, - 61000000, - 61500000, - 62000000, - 62500000, - 63000000, - 63500000, - 64000000, - 64500000, - 65000000, - 65500000, - 66000000, - 66500000, - 67000000, - 67500000, - 68000000, - 68500000, - 69000000, - 69500000, - 70000000, - 70500000, - 71000000, - 71500000, - 72000000, - 72500000, - 73000000, - 73500000, - 74000000, - 74500000, - 75000000, - 75500000, - 76000000, - 76500000, - 77000000, - 77500000, - 78000000, - 78500000, - 79000000, - 79500000, - 80000000, - 80500000, - 81000000, - 81500000, - 82000000, - 82500000, - 83000000, - 83500000, - 84000000, - 84500000, - 85000000, - 85500000, - 86000000, - 86500000, - 87000000, - 87500000, - 88000000, - 88500000, - 89000000, - 89500000, - 90000000, - 90500000, - 91000000, - 91500000, - 92000000, - 92500000, - 93000000, - 93500000, - 94000000, - 94500000, - 95000000, - 95500000, - 96000000, - 96500000, - 97000000, - 97500000, - 98000000, - 98500000, - 99000000, - ], - }, - }, - }, - "query": Object { - "bool": Object { - "filter": Array [ - Object { - "range": Object { - "@timestamp": Object { - "format": "epoch_millis", - "gte": 0, - "lte": 50000, - }, - }, - }, - Object { - "term": Object { - "transaction.type": "page-load", - }, - }, - Object { - "exists": Object { - "field": "transaction.marks.navigationTiming.fetchStart", - }, - }, - Object { - "term": Object { - "service.environment": "staging", - }, - }, - ], - "must_not": Array [], - }, - }, - "size": 0, - }, -} -`; diff --git a/x-pack/plugins/apm/server/routes/rum_client/get_page_load_distribution.ts b/x-pack/plugins/apm/server/routes/rum_client/get_page_load_distribution.ts deleted file mode 100644 index 27c8c4668ce9b..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/get_page_load_distribution.ts +++ /dev/null @@ -1,233 +0,0 @@ -/* - * 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 { TRANSACTION_DURATION } from '../../../common/elasticsearch_fieldnames'; -import { getRumPageLoadTransactionsProjection } from '../../projections/rum_page_load_transactions'; -import { mergeProjection } from '../../projections/util/merge_projection'; -import { SetupUX } from './route'; - -export const MICRO_TO_SEC = 1000000; - -export function microToSec(val: number) { - return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100; -} - -export function removeZeroesFromTail( - distData: Array<{ x: number; y: number }> -) { - if (distData.length > 0) { - while (distData[distData.length - 1].y === 0) { - distData.pop(); - } - } - return distData; -} - -export const getPLDChartSteps = ({ - maxDuration, - minDuration, - initStepValue, -}: { - maxDuration: number; - minDuration: number; - initStepValue?: number; -}) => { - let stepValue = 0.5; - // if diff is too low, let's lower - // down the steps value to increase steps - if (maxDuration - minDuration <= 5 * MICRO_TO_SEC) { - stepValue = 0.1; - } - - if (initStepValue) { - stepValue = initStepValue; - } - - let initValue = minDuration; - const stepValues = [initValue]; - - while (initValue < maxDuration) { - initValue += stepValue * MICRO_TO_SEC; - stepValues.push(initValue); - } - - return stepValues; -}; - -export async function getPageLoadDistribution({ - setup, - minPercentile, - maxPercentile, - urlQuery, - start, - end, -}: { - setup: SetupUX; - minPercentile?: string; - maxPercentile?: string; - urlQuery?: string; - start: number; - end: number; -}) { - const projection = getRumPageLoadTransactionsProjection({ - setup, - urlQuery, - start, - end, - }); - - // we will first get 100 steps using 0sec and 50sec duration, - // most web apps will cover this use case - // if 99th percentile is greater than 50sec, - // we will fetch additional 5 steps beyond 99th percentile - let maxDuration = (maxPercentile ? +maxPercentile : 50) * MICRO_TO_SEC; - const minDuration = minPercentile ? +minPercentile * MICRO_TO_SEC : 0; - const stepValues = getPLDChartSteps({ - maxDuration, - minDuration, - }); - - const params = mergeProjection(projection, { - body: { - size: 0, - aggs: { - durPercentiles: { - percentiles: { - field: TRANSACTION_DURATION, - percents: [50, 75, 90, 95, 99], - hdr: { - number_of_significant_value_digits: 3, - }, - }, - }, - loadDistribution: { - percentile_ranks: { - field: TRANSACTION_DURATION, - values: stepValues, - keyed: false, - hdr: { - number_of_significant_value_digits: 3, - }, - }, - }, - }, - }, - }); - - const { apmEventClient } = setup; - - const { - aggregations, - hits: { total }, - } = await apmEventClient.search('get_page_load_distribution', params); - - if (total.value === 0) { - return null; - } - - const { durPercentiles, loadDistribution } = aggregations ?? {}; - - let pageDistVals = loadDistribution?.values ?? []; - - const maxPercQuery = durPercentiles?.values['99.0'] ?? 0; - - // we assumed that page load will never exceed 50secs, if 99th percentile is - // greater then let's fetch additional 10 steps, to cover that on the chart - if (maxPercQuery > maxDuration && !maxPercentile) { - const additionalStepsPageVals = await getPercentilesDistribution({ - setup, - maxDuration: maxPercQuery, - // we pass 50sec as min to get next steps - minDuration: maxDuration, - start, - end, - }); - - pageDistVals = pageDistVals.concat(additionalStepsPageVals); - maxDuration = maxPercQuery; - } - - // calculate the diff to get actual page load on specific duration value - let pageDist = pageDistVals.map( - ({ key, value: maybeNullValue }, index: number, arr) => { - // FIXME: values from percentile* aggs can be null - const value = maybeNullValue!; - return { - x: microToSec(key), - y: index === 0 ? value : value - arr[index - 1].value!, - }; - } - ); - - pageDist = removeZeroesFromTail(pageDist); - - Object.entries(durPercentiles?.values ?? {}).forEach(([key, val]) => { - if (durPercentiles?.values?.[key]) { - durPercentiles.values[key] = microToSec(val as number); - } - }); - - return { - pageLoadDistribution: pageDist, - percentiles: durPercentiles?.values, - minDuration: microToSec(minDuration), - maxDuration: microToSec(maxDuration), - }; -} - -const getPercentilesDistribution = async ({ - setup, - minDuration, - maxDuration, - start, - end, -}: { - setup: SetupUX; - minDuration: number; - maxDuration: number; - start: number; - end: number; -}) => { - const stepValues = getPLDChartSteps({ - minDuration: minDuration + 0.5 * MICRO_TO_SEC, - maxDuration, - initStepValue: 0.5, - }); - - const projection = getRumPageLoadTransactionsProjection({ - setup, - start, - end, - }); - - const params = mergeProjection(projection, { - body: { - size: 0, - aggs: { - loadDistribution: { - percentile_ranks: { - field: TRANSACTION_DURATION, - values: stepValues, - keyed: false, - hdr: { - number_of_significant_value_digits: 3, - }, - }, - }, - }, - }, - }); - - const { apmEventClient } = setup; - - const { aggregations } = await apmEventClient.search( - 'get_page_load_distribution', - params - ); - - return aggregations?.loadDistribution.values ?? []; -}; diff --git a/x-pack/plugins/apm/server/routes/rum_client/get_pl_dist_breakdown.ts b/x-pack/plugins/apm/server/routes/rum_client/get_pl_dist_breakdown.ts deleted file mode 100644 index d6a67b57fa98f..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/get_pl_dist_breakdown.ts +++ /dev/null @@ -1,128 +0,0 @@ -/* - * 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 { getRumPageLoadTransactionsProjection } from '../../projections/rum_page_load_transactions'; -import { ProcessorEvent } from '../../../common/processor_event'; -import { mergeProjection } from '../../projections/util/merge_projection'; -import { SetupUX } from './route'; -import { - CLIENT_GEO_COUNTRY_ISO_CODE, - USER_AGENT_DEVICE, - USER_AGENT_NAME, - USER_AGENT_OS, - TRANSACTION_DURATION, -} from '../../../common/elasticsearch_fieldnames'; -import { - getPLDChartSteps, - MICRO_TO_SEC, - microToSec, - removeZeroesFromTail, -} from './get_page_load_distribution'; - -export const getBreakdownField = (breakdown: string) => { - switch (breakdown) { - case 'Location': - return CLIENT_GEO_COUNTRY_ISO_CODE; - case 'Device': - return USER_AGENT_DEVICE; - case 'OS': - return USER_AGENT_OS; - case 'Browser': - default: - return USER_AGENT_NAME; - } -}; - -export const getPageLoadDistBreakdown = async ({ - setup, - minPercentile, - maxPercentile, - breakdown, - urlQuery, - start, - end, -}: { - setup: SetupUX; - minPercentile: number; - maxPercentile: number; - breakdown: string; - urlQuery?: string; - start: number; - end: number; -}) => { - // convert secs to micros - const stepValues = getPLDChartSteps({ - maxDuration: (maxPercentile ? +maxPercentile : 50) * MICRO_TO_SEC, - minDuration: minPercentile ? +minPercentile * MICRO_TO_SEC : 0, - }); - - const projection = getRumPageLoadTransactionsProjection({ - setup, - urlQuery, - start, - end, - }); - - const params = mergeProjection(projection, { - apm: { - events: [ProcessorEvent.transaction], - }, - body: { - size: 0, - aggs: { - breakdowns: { - terms: { - field: getBreakdownField(breakdown), - size: 9, - }, - aggs: { - page_dist: { - percentile_ranks: { - field: TRANSACTION_DURATION, - values: stepValues, - keyed: false, - hdr: { - number_of_significant_value_digits: 3, - }, - }, - }, - }, - }, - }, - }, - }); - - const { apmEventClient } = setup; - - const { aggregations } = await apmEventClient.search( - 'get_page_load_dist_breakdown', - params - ); - - const pageDistBreakdowns = aggregations?.breakdowns.buckets; - - return pageDistBreakdowns?.map(({ key, page_dist: pageDist }) => { - let seriesData = pageDist.values?.map( - ({ key: pKey, value: maybeNullValue }, index: number, arr) => { - // FIXME: values from percentile* aggs can be null - const value = maybeNullValue!; - return { - x: microToSec(pKey), - y: index === 0 ? value : value - arr[index - 1].value!, - }; - } - ); - - // remove 0 values from tail - seriesData = removeZeroesFromTail(seriesData); - - return { - name: String(key), - data: seriesData, - }; - }); -}; diff --git a/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts b/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts deleted file mode 100644 index bbc67fef9d8e1..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* - * 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 { - SearchParamsMock, - inspectSearchParams, -} from '../../utils/test_helpers'; -import { getPageLoadDistribution } from './get_page_load_distribution'; - -describe('rum client dashboard queries', () => { - let mock: SearchParamsMock; - - afterEach(() => { - mock.teardown(); - }); - - it('fetches page load distribution', async () => { - mock = await inspectSearchParams( - (setup) => - getPageLoadDistribution({ - setup, - minPercentile: '0', - maxPercentile: '99', - start: 0, - end: 50000, - }), - { uiFilters: { environment: 'staging' } } - ); - expect(mock.params).toMatchSnapshot(); - }); -}); diff --git a/x-pack/plugins/apm/server/routes/rum_client/route.ts b/x-pack/plugins/apm/server/routes/rum_client/route.ts deleted file mode 100644 index 834b71223f969..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/route.ts +++ /dev/null @@ -1,160 +0,0 @@ -/* - * 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 * as t from 'io-ts'; -import { Logger } from '@kbn/core/server'; -import { setupRequest, Setup } from '../../lib/helpers/setup_request'; -import { getPageLoadDistribution } from './get_page_load_distribution'; -import { getPageLoadDistBreakdown } from './get_pl_dist_breakdown'; -import { createApmServerRoute } from '../apm_routes/create_apm_server_route'; -import { rangeRt } from '../default_api_types'; -import { APMRouteHandlerResources } from '../typings'; -import { UxUIFilters } from '../../../common/ux_ui_filter'; - -export type SetupUX = Setup & { - uiFilters: UxUIFilters; -}; - -interface SetupRequestParams { - query: { - _inspect?: boolean; - - /** - * Timestamp in ms since epoch - */ - start?: number; - - /** - * Timestamp in ms since epoch - */ - end?: number; - }; -} - -type SetupUXRequestParams = Omit & { - query: SetupRequestParams['query'] & { - uiFilters?: string; - }; -}; - -export const percentileRangeRt = t.partial({ - minPercentile: t.string, - maxPercentile: t.string, -}); - -const uiFiltersRt = t.type({ uiFilters: t.string }); - -const uxQueryRt = t.intersection([ - uiFiltersRt, - rangeRt, - t.partial({ urlQuery: t.string, percentile: t.string }), -]); - -const rumPageLoadDistributionRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/ux/page-load-distribution', - params: t.type({ - query: t.intersection([uxQueryRt, percentileRangeRt]), - }), - options: { tags: ['access:apm'] }, - handler: async ( - resources - ): Promise<{ - pageLoadDistribution: { - pageLoadDistribution: Array<{ x: number; y: number }>; - percentiles: Record | undefined; - minDuration: number; - maxDuration: number; - } | null; - }> => { - const setup = await setupUXRequest(resources); - - const { - query: { minPercentile, maxPercentile, urlQuery, start, end }, - } = resources.params; - - const pageLoadDistribution = await getPageLoadDistribution({ - setup, - minPercentile, - maxPercentile, - urlQuery, - start, - end, - }); - - return { pageLoadDistribution }; - }, -}); - -const rumPageLoadDistBreakdownRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/ux/page-load-distribution/breakdown', - params: t.type({ - query: t.intersection([ - uxQueryRt, - percentileRangeRt, - t.type({ breakdown: t.string }), - ]), - }), - options: { tags: ['access:apm'] }, - handler: async ( - resources - ): Promise<{ - pageLoadDistBreakdown: - | Array<{ name: string; data: Array<{ x: number; y: number }> }> - | undefined; - }> => { - const setup = await setupUXRequest(resources); - - const { - query: { minPercentile, maxPercentile, breakdown, urlQuery, start, end }, - } = resources.params; - - const pageLoadDistBreakdown = await getPageLoadDistBreakdown({ - setup, - minPercentile: Number(minPercentile), - maxPercentile: Number(maxPercentile), - breakdown, - urlQuery, - start, - end, - }); - - return { pageLoadDistBreakdown }; - }, -}); - -function decodeUiFilters( - logger: Logger, - uiFiltersEncoded?: string -): UxUIFilters { - if (!uiFiltersEncoded) { - return {}; - } - try { - return JSON.parse(uiFiltersEncoded); - } catch (error) { - logger.error(error); - return {}; - } -} - -// eslint-disable-next-line @typescript-eslint/explicit-function-return-type -async function setupUXRequest( - resources: APMRouteHandlerResources & { params: TParams } -) { - const setup = await setupRequest(resources); - return { - ...setup, - uiFilters: decodeUiFilters( - resources.logger, - resources.params.query.uiFilters - ), - }; -} - -export const rumRouteRepository = { - ...rumPageLoadDistributionRoute, - ...rumPageLoadDistBreakdownRoute, -}; diff --git a/x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.test.ts b/x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.test.ts deleted file mode 100644 index ba5e318a1901b..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.test.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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 { getEsFilter } from './get_es_filter'; - -describe('getEfFilters', function () { - it('should return environment in include filters', function () { - const result = getEsFilter({ - browser: ['Chrome'], - environment: 'production', - }); - - expect(result).toEqual([ - { terms: { 'user_agent.name': ['Chrome'] } }, - { term: { 'service.environment': 'production' } }, - ]); - }); - - it('should not return environment in exclude filters', function () { - const result = getEsFilter( - { browserExcluded: ['Chrome'], environment: 'production' }, - true - ); - - expect(result).toEqual([{ terms: { 'user_agent.name': ['Chrome'] } }]); - }); -}); diff --git a/x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.ts b/x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.ts deleted file mode 100644 index 8d759140fc659..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* - * 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 { ESFilter } from '@kbn/core/types/elasticsearch'; -import { environmentQuery } from '../../../../common/utils/environment_query'; -import { ENVIRONMENT_ALL } from '../../../../common/environment_filter_values'; -import { - uxLocalUIFilterNames, - uxLocalUIFilters, - UxUIFilters, -} from '../../../../common/ux_ui_filter'; - -export function getEsFilter(uiFilters: UxUIFilters, exclude?: boolean) { - const localFilterValues = uiFilters; - const mappedFilters = uxLocalUIFilterNames - .filter((name) => { - const validFilter = name in localFilterValues; - if (exclude) { - return name.includes('Excluded') && validFilter; - } - return !name.includes('Excluded') && validFilter; - }) - .map((filterName) => { - const field = uxLocalUIFilters[filterName]; - const value = localFilterValues[filterName]; - - return { - terms: { - [field.fieldName]: value, - }, - }; - }) as ESFilter[]; - - return [ - ...mappedFilters, - ...(exclude - ? [] - : environmentQuery(uiFilters.environment || ENVIRONMENT_ALL.value)), - ]; -} diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 91b083ebab12e..84a15a0c22922 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -31707,7 +31707,6 @@ "xpack.ux.overview.beatsCard.title": "Ajouter les données RUM", "xpack.ux.overview.heading": "Tableau de bord", "xpack.ux.overview.solutionName": "Observabilité", - "xpack.ux.pageViews.analyze": "Analyser", "xpack.ux.percentile.50thMedian": "50e (médiane)", "xpack.ux.percentile.75th": "75e", "xpack.ux.percentile.90th": "90e", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 3343db31a26d0..16494e7381264 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -31689,7 +31689,6 @@ "xpack.ux.overview.beatsCard.title": "RUMデータを追加", "xpack.ux.overview.heading": "ダッシュボード", "xpack.ux.overview.solutionName": "Observability", - "xpack.ux.pageViews.analyze": "分析", "xpack.ux.percentile.50thMedian": "50 番目（中央値）", "xpack.ux.percentile.75th": "75番目", "xpack.ux.percentile.90th": "90番目", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 2b3f762227154..4bfbf4a2b2453 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -31719,7 +31719,6 @@ "xpack.ux.overview.beatsCard.title": "添加 RUM 数据", "xpack.ux.overview.heading": "仪表板", "xpack.ux.overview.solutionName": "Observability", - "xpack.ux.pageViews.analyze": "分析", "xpack.ux.percentile.50thMedian": "第 50 个（中值）", "xpack.ux.percentile.75th": "第 75 个", "xpack.ux.percentile.90th": "第 90 个", diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_load_dist_chart.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_load_dist_chart.tsx index 7d96b8f7e2fc1..d0d66c28ee9c2 100644 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_load_dist_chart.tsx +++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_load_dist_chart.tsx @@ -5,148 +5,55 @@ * 2.0. */ -import React, { useState } from 'react'; -import numeral from '@elastic/numeral'; -import { - Axis, - BrushEndListener, - XYBrushEvent, - Chart, - CurveType, - LineSeries, - ScaleType, - Settings, - TooltipValue, - TooltipValueFormatter, - DARK_THEME, - LIGHT_THEME, - Fit, - Position, -} from '@elastic/charts'; -import { - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, -} from '@elastic/eui/dist/eui_charts_theme'; -import styled from 'styled-components'; -import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; -import { PercentileAnnotations } from '../page_load_distribution/percentile_annotations'; -import { I18LABELS } from '../translations'; -import { ChartWrapper } from '../chart_wrapper'; -import { BreakdownSeries } from '../page_load_distribution/breakdown_series'; +import React from 'react'; +import { AllSeries } from '@kbn/observability-plugin/public'; +import { useExpViewAttributes } from './use_exp_view_attrs'; import { BreakdownItem } from '../../../../../typings/ui_filters'; -import { PercentileRange } from '../page_load_distribution/types'; - -interface PageLoadData { - pageLoadDistribution: Array<{ x: number; y: number }>; - percentiles: Record | undefined; - minDuration: number; - maxDuration: number; -} +import { useDataView } from '../local_uifilters/use_data_view'; +import { useKibanaServices } from '../../../../hooks/use_kibana_services'; +import { TRANSACTION_DURATION } from '../../../../../common/elasticsearch_fieldnames'; interface Props { - onPercentileChange: (min: number, max: number) => void; - data?: PageLoadData | null; breakdown: BreakdownItem | null; - percentileRange: PercentileRange; - loading: boolean; + onPercentileChange: (min: number, max: number) => void; } -const PageLoadChart = styled(Chart)` - .echAnnotation { - pointer-events: initial; - } -`; +export function PageLoadDistChart({ onPercentileChange, breakdown }: Props) { + const { dataViewTitle } = useDataView(); + + const kibana = useKibanaServices(); + const { ExploratoryViewEmbeddable } = kibana.observability!; -export function PageLoadDistChart({ - onPercentileChange, - data, - breakdown, - loading, - percentileRange, -}: Props) { - const [breakdownLoading, setBreakdownLoading] = useState(false); - const onBrushEnd = ({ x }: XYBrushEvent) => { - if (!x) { + const onBrushEnd = ({ range }: { range: number[] }) => { + if (!range) { return; } - const [minX, maxX] = x; + const [minX, maxX] = range; onPercentileChange(minX, maxX); }; - const headerFormatter: TooltipValueFormatter = (tooltip: TooltipValue) => { - return ( -
-

- {tooltip.value} {I18LABELS.seconds} -

-
- ); - }; - - const tooltipProps = { - headerFormatter, - }; - - const [darkMode] = useUiSetting$('theme:darkMode'); + const { reportDefinitions, time } = useExpViewAttributes(); - const euiChartTheme = darkMode - ? EUI_CHARTS_THEME_DARK - : EUI_CHARTS_THEME_LIGHT; + const allSeries: AllSeries = [ + { + time, + reportDefinitions, + dataType: 'ux', + name: 'page-load-distribution', + selectedMetricField: TRANSACTION_DURATION, + breakdown: breakdown?.fieldName, + }, + ]; return ( - - {(!loading || data) && ( - - - - - d + ' %'} - /> - numeral(d).format('0.0') + ' %'} - /> - {breakdown && ( - { - setBreakdownLoading(bLoading); - }} - /> - )} - - )} - + ); } diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_views_chart.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_views_chart.tsx index 2d763013157fb..4f8d0d4d2a06c 100644 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_views_chart.tsx +++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/page_views_chart.tsx @@ -9,7 +9,6 @@ import moment from 'moment'; import React from 'react'; import { AllSeries, - ALL_VALUES_SELECTED, fromQuery, RECORDS_FIELD, toQuery, @@ -17,50 +16,32 @@ import { } from '@kbn/observability-plugin/public'; import { useHistory } from 'react-router-dom'; -import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values'; -import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters'; -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'; -import { - SERVICE_ENVIRONMENT, - SERVICE_NAME, -} from '../../../../../common/elasticsearch_fieldnames'; +import { useExpViewAttributes } from './use_exp_view_attrs'; interface Props { breakdown: BreakdownItem | null; - uiFilters: UxUIFilters; } -export function PageViewsChart({ breakdown, uiFilters }: Props) { +export function PageViewsChart({ breakdown }: Props) { const { dataViewTitle } = useDataView(); const history = useHistory(); - const { urlParams } = useLegacyUrlParams(); const kibana = useKibanaServices(); const { ExploratoryViewEmbeddable } = kibana.observability; - const { start, end } = urlParams; const theme = useTheme(); + const { reportDefinitions, time } = useExpViewAttributes(); + const allSeries: AllSeries = [ { + time, + reportDefinitions, dataType: 'ux', - time: { - from: start ?? '', - to: end ?? '', - }, name: 'ux-series-1', selectedMetricField: RECORDS_FIELD, - reportDefinitions: { - [SERVICE_ENVIRONMENT]: - !uiFilters?.environment || - uiFilters.environment === ENVIRONMENT_ALL.value - ? [ALL_VALUES_SELECTED] - : [uiFilters.environment], - [SERVICE_NAME]: urlParams.serviceName - ? [urlParams.serviceName] - : [ALL_VALUES_SELECTED], - }, breakdown: breakdown?.fieldName, color: theme.eui.euiColorVis1, }, @@ -93,6 +74,7 @@ export function PageViewsChart({ breakdown, uiFilters }: Props) { dataTypesIndexPatterns={{ ux: dataViewTitle }} isSingleMetric={true} axisTitlesVisibility={{ x: false, yRight: true, yLeft: true }} + legendIsVisible={Boolean(breakdown)} /> ); } diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/use_exp_view_attrs.ts b/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/use_exp_view_attrs.ts new file mode 100644 index 0000000000000..fb8eb5a0564e1 --- /dev/null +++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/charts/use_exp_view_attrs.ts @@ -0,0 +1,37 @@ +/* + * 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 { ALL_VALUES_SELECTED } from '@kbn/observability-plugin/public'; +import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; +import { + SERVICE_ENVIRONMENT, + SERVICE_NAME, +} from '../../../../../common/elasticsearch_fieldnames'; +import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values'; + +export const useExpViewAttributes = () => { + const { urlParams, uxUiFilters } = useLegacyUrlParams(); + + const { start, end } = urlParams; + + const reportDefinitions = { + [SERVICE_ENVIRONMENT]: + !uxUiFilters?.environment || + uxUiFilters.environment === ENVIRONMENT_ALL.value + ? [ALL_VALUES_SELECTED] + : [uxUiFilters.environment], + [SERVICE_NAME]: uxUiFilters?.serviceName ?? [ALL_VALUES_SELECTED], + }; + + return { + reportDefinitions, + time: { + from: start ?? '', + to: end ?? '', + }, + }; +}; diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/breakdown_series.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/breakdown_series.tsx deleted file mode 100644 index 0bd86a52c6e49..0000000000000 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/breakdown_series.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - * 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 { CurveType, Fit, LineSeries, ScaleType } from '@elastic/charts'; -import React, { useEffect } from 'react'; -import numeral from '@elastic/numeral'; -import { - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, -} from '@elastic/eui/dist/eui_charts_theme'; -import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; -import { PercentileRange } from './types'; -import { useBreakdowns } from './use_breakdowns'; - -interface Props { - field: string; - value: string; - percentileRange: PercentileRange; - onLoadingChange: (loading: boolean) => void; -} - -export function BreakdownSeries({ - field, - value, - percentileRange, - onLoadingChange, -}: Props) { - const [darkMode] = useUiSetting$('theme:darkMode'); - - const euiChartTheme = darkMode - ? EUI_CHARTS_THEME_DARK - : EUI_CHARTS_THEME_LIGHT; - - const { breakdowns, status } = useBreakdowns({ - field, - value, - percentileRange, - }); - - useEffect(() => { - onLoadingChange(status !== 'success'); - }, [status, onLoadingChange]); - - // sort index 1 color vizColors1 is already used for overall, - // so don't user that here - return ( - <> - {breakdowns.map(({ data: seriesData, name }, sortIndex) => ( - numeral(d).format('0.0') + ' %'} - /> - ))} - - ); -} diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/index.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/index.tsx index 65487aaf66bf5..4ff4b47293cb3 100644 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/index.tsx +++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/index.tsx @@ -6,34 +6,15 @@ */ import React, { useState } from 'react'; -import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiTitle, -} from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { createExploratoryViewUrl } from '@kbn/observability-plugin/public'; -import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; -import { useFetcher } from '../../../../hooks/use_fetcher'; +import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import { I18LABELS } from '../translations'; import { BreakdownFilter } from '../breakdowns/breakdown_filter'; import { PageLoadDistChart } from '../charts/page_load_dist_chart'; import { ResetPercentileZoom } from './reset_percentile_zoom'; -import { useKibanaServices } from '../../../../hooks/use_kibana_services'; import { BreakdownItem } from '../../../../../typings/ui_filters'; import { PercentileRange } from './types'; export function PageLoadDistribution() { - const { http } = useKibanaServices(); - - const { rangeId, urlParams, uxUiFilters } = useLegacyUrlParams(); - - const { start, end, rangeFrom, rangeTo, searchTerm } = urlParams; - - const { serviceName } = uxUiFilters; - const [percentileRange, setPercentileRange] = useState({ min: null, max: null, @@ -41,66 +22,10 @@ export function PageLoadDistribution() { const [breakdown, setBreakdown] = useState(null); - const { data, status } = useFetcher( - (callApmApi) => { - if (start && end && serviceName) { - return callApmApi('GET /internal/apm/ux/page-load-distribution', { - params: { - query: { - start, - end, - uiFilters: JSON.stringify(uxUiFilters), - urlQuery: searchTerm, - ...(percentileRange.min && percentileRange.max - ? { - minPercentile: String(percentileRange.min), - maxPercentile: String(percentileRange.max), - } - : {}), - }, - }, - }); - } - return Promise.resolve(null); - }, - // `rangeId` acts as a cache buster for stable ranges like "Today" - // eslint-disable-next-line react-hooks/exhaustive-deps - [ - end, - start, - uxUiFilters, - percentileRange.min, - percentileRange.max, - searchTerm, - serviceName, - rangeId, - ] - ); - const onPercentileChange = (min: number, max: number) => { setPercentileRange({ min, max }); }; - const exploratoryViewLink = createExploratoryViewUrl( - { - reportType: 'kpi-over-time', - allSeries: [ - { - name: `${serviceName}-page-views`, - dataType: 'ux', - time: { from: rangeFrom!, to: rangeTo! }, - reportDefinitions: { - 'service.name': serviceName as string[], - }, - ...(breakdown ? { breakdown: breakdown.fieldName } : {}), - }, - ], - }, - http.basePath.get() - ); - - const showAnalyzeButton = false; - return (
@@ -120,31 +45,10 @@ export function PageLoadDistribution() { dataTestSubj={'pldBreakdownFilter'} /> - {showAnalyzeButton && ( - - - - - - )} -
); diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/use_breakdowns.ts b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/use_breakdowns.ts deleted file mode 100644 index ffe794ddceaee..0000000000000 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/use_breakdowns.ts +++ /dev/null @@ -1,52 +0,0 @@ -/* - * 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 { useFetcher } from '../../../../hooks/use_fetcher'; -import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; -import { PercentileRange } from './types'; - -interface Props { - percentileRange?: PercentileRange; - field: string; - value: string; -} - -export const useBreakdowns = ({ percentileRange, field, value }: Props) => { - const { urlParams, uxUiFilters } = useLegacyUrlParams(); - const { start, end, searchTerm } = urlParams; - const { min: minP, max: maxP } = percentileRange ?? {}; - - const { data, status } = useFetcher( - (callApmApi) => { - if (start && end && field && value) { - return callApmApi( - 'GET /internal/apm/ux/page-load-distribution/breakdown', - { - params: { - query: { - start, - end, - breakdown: value, - uiFilters: JSON.stringify(uxUiFilters), - urlQuery: searchTerm, - ...(minP && maxP - ? { - minPercentile: String(minP), - maxPercentile: String(maxP), - } - : {}), - }, - }, - } - ); - } - }, - [end, start, uxUiFilters, field, value, minP, maxP, searchTerm] - ); - - return { breakdowns: data?.pageLoadDistBreakdown ?? [], status }; -}; diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_views_trend/index.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_views_trend/index.tsx index 733fbcf935c25..173865dc9ace0 100644 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/page_views_trend/index.tsx +++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_views_trend/index.tsx @@ -7,15 +7,12 @@ import React, { useState } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; -import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; import { I18LABELS } from '../translations'; import { BreakdownFilter } from '../breakdowns/breakdown_filter'; import { PageViewsChart } from '../charts/page_views_chart'; import { BreakdownItem } from '../../../../../typings/ui_filters'; export function PageViewsTrend() { - const { uxUiFilters } = useLegacyUrlParams(); - const [breakdown, setBreakdown] = useState(null); return ( @@ -34,7 +31,7 @@ export function PageViewsTrend() { /> - + ); } diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/panels/page_load_and_views.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/panels/page_load_and_views.tsx index 0a4deee67786b..ef834227efbe8 100644 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/panels/page_load_and_views.tsx +++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/panels/page_load_and_views.tsx @@ -14,7 +14,7 @@ export function PageLoadAndViews() { return ( - +