From 113bd97e6c8ea51fee538cf736c3ce2aef23e132 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Wed, 25 May 2022 17:07:08 -0400 Subject: [PATCH 01/15] Delete page load distribution route from APM. --- .../rum_client/get_page_load_distribution.ts | 233 ------------------ .../rum_client/get_pl_dist_breakdown.ts | 128 ---------- .../apm/server/routes/rum_client/route.ts | 76 ------ .../breakdown_series.tsx | 75 ------ .../page_load_distribution/index.tsx | 195 ++++++++++++--- .../page_load_distribution/use_breakdowns.ts | 52 ---- 6 files changed, 155 insertions(+), 604 deletions(-) delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/get_page_load_distribution.ts delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/get_pl_dist_breakdown.ts delete mode 100644 x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/breakdown_series.tsx delete mode 100644 x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/use_breakdowns.ts 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/route.ts b/x-pack/plugins/apm/server/routes/rum_client/route.ts index 612b00b932e24..32132b612e1fc 100644 --- a/x-pack/plugins/apm/server/routes/rum_client/route.ts +++ b/x-pack/plugins/apm/server/routes/rum_client/route.ts @@ -10,9 +10,7 @@ import { isoToEpochRt } from '@kbn/io-ts-utils'; import { setupRequest, Setup } from '../../lib/helpers/setup_request'; import { getClientMetrics } from './get_client_metrics'; import { getLongTaskMetrics } from './get_long_task_metrics'; -import { getPageLoadDistribution } from './get_page_load_distribution'; import { getPageViewTrends } from './get_page_view_trends'; -import { getPageLoadDistBreakdown } from './get_pl_dist_breakdown'; import { getVisitorBreakdown } from './get_visitor_breakdown'; import { hasRumData } from './has_rum_data'; import { createApmServerRoute } from '../apm_routes/create_apm_server_route'; @@ -89,78 +87,6 @@ const rumClientMetricsRoute = createApmServerRoute({ }, }); -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 }; - }, -}); - const rumPageViewsTrendRoute = createApmServerRoute({ endpoint: 'GET /internal/apm/ux/page-view-trends', params: t.type({ @@ -298,8 +224,6 @@ async function setupUXRequest( export const rumRouteRepository = { ...rumClientMetricsRoute, - ...rumPageLoadDistributionRoute, - ...rumPageLoadDistBreakdownRoute, ...rumPageViewsTrendRoute, ...rumVisitorsBreakdownRoute, ...rumLongTaskMetrics, 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 264c72758a9e3..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 '.'; -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 865148af62a7e..8b894cae02749 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 @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { EuiButton, EuiFlexGroup, @@ -13,22 +13,75 @@ import { EuiSpacer, EuiTitle, } from '@elastic/eui'; +import { callDateMath } from '../../../../services/data/call_date_math'; import { FormattedMessage } from '@kbn/i18n-react'; -import { createExploratoryViewUrl } from '@kbn/observability-plugin/public'; +import { + createExploratoryViewUrl, + useEsSearch, +} from '@kbn/observability-plugin/public'; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; -import { useFetcher } from '../../../../hooks/use_fetcher'; 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 { + getPageLoadDistribution, + getPercentilesDistribution, +} from '@kbn/ux-plugin/public/services/data/page_load_distribution'; +import { useDataView } from '../local_uifilters/use_data_view'; export interface PercentileRange { min?: number | null; max?: number | null; } +export const MICRO_TO_SEC = 1000000; + +export function microToSec(val: number) { + return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100; +} + +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; +}; +function removeZeroesFromTail(distData: Array<{ x: number; y: number }>) { + if (distData.length > 0) { + while (distData[distData.length - 1].y === 0) { + distData.pop(); + } + } + return distData; +} + export function PageLoadDistribution() { const { http } = useKibanaServices(); @@ -43,44 +96,106 @@ export function PageLoadDistribution() { max: null, }); + const { dataViewTitle } = useDataView(); + 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); + const { params, maxDuration, minDuration } = useMemo(() => { + return getPageLoadDistribution({ + start: callDateMath(start), + end: callDateMath(end), + setup: { uiFilters: uxUiFilters }, + urlQuery: searchTerm, + ...(percentileRange.min && percentileRange.max + ? { + minPercentile: String(percentileRange.min), + maxPercentile: String(percentileRange.max), + } + : {}), + }); + }, [ + start, + end, + uxUiFilters, + searchTerm, + percentileRange.min, + percentileRange.max, + ]); + + const { data: d, loading: l } = useEsSearch( + { + index: dataViewTitle, + ...params, }, - // `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, - ] + [dataViewTitle, params], + { name: 'UxPageLoadDistribution' } ); + const dd = useMemo(() => { + if (l || !d) return null; + + const { + aggregations, + hits: { total }, + } = d; + + if (total.value === 0) { + return null; + } + + const { durPercentiles, loadDistribution } = aggregations ?? {}; + + let pageDistVals = loadDistribution?.values ?? []; + + const maxPercQuery = durPercentiles?.values['99.0'] ?? 0; + + let durationMax = maxDuration; + // 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 && !percentileRange.max) { + const additionalStepsPageVals = getPercentilesDistribution({ + setup: { uiFilters: uxUiFilters }, + maxDuration: maxPercQuery, + // we pass 50sec as min to get next steps + minDuration: maxDuration, + start: callDateMath(start), + end: callDateMath(end), + }); + + pageDistVals = (pageDistVals ?? []).concat(additionalStepsPageVals); + durationMax = 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: { + pageLoadDistribution: pageDist, + percentiles: durPercentiles?.values, + minDuration: microToSec(minDuration), + maxDuration: microToSec(durationMax), + }, + }; + }, [percentileRange.max, minDuration, maxDuration, d, l]); + const onPercentileChange = (min: number, max: number) => { setPercentileRange({ min, max }); }; @@ -141,13 +256,13 @@ export function PageLoadDistribution() { 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 40748c571cb9c..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 '.'; - -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 }; -}; From 880bee9fbb7514bca947c066b8da138a6d7c4241 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Fri, 3 Jun 2022 16:29:07 -0400 Subject: [PATCH 02/15] Finish conversion to exploratory view embeddable. --- .../breakdowns/breakdown_filter.tsx | 1 - .../charts/page_load_dist_chart.tsx | 171 +++++------------- .../page_load_distribution/index.tsx | 141 +-------------- 3 files changed, 52 insertions(+), 261 deletions(-) diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/breakdowns/breakdown_filter.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/breakdowns/breakdown_filter.tsx index dd2718db6cfff..0f8c662be9169 100644 --- a/x-pack/plugins/ux/public/components/app/rum_dashboard/breakdowns/breakdown_filter.tsx +++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/breakdowns/breakdown_filter.tsx @@ -84,7 +84,6 @@ export function BreakdownFilter({ return ( ; - percentiles: Record | undefined; - minDuration: number; - maxDuration: number; -} +import React from 'react'; +import { AllSeries } from '@kbn/observability-plugin/public'; +import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters'; +import { useDataView } from '../local_uifilters/use_data_view'; +import { useKibanaServices } from '../../../../hooks/use_kibana_services'; interface Props { - onPercentileChange: (min: number, max: number) => void; - data?: PageLoadData | null; breakdown: BreakdownItem | null; - percentileRange: PercentileRange; - loading: boolean; + onPercentileChange: (min: number, max: number) => void; + start: string; + end: string; + uiFilters: UxUIFilters; } -const PageLoadChart = styled(Chart)` - .echAnnotation { - pointer-events: initial; - } -`; - export function PageLoadDistChart({ onPercentileChange, - data, breakdown, - loading, - percentileRange, + uiFilters, + start, + end, }: Props) { - const [breakdownLoading, setBreakdownLoading] = useState(false); - const onBrushEnd = ({ x }: XYBrushEvent) => { - if (!x) { + const { dataViewTitle } = useDataView(); + + const kibana = useKibanaServices(); + const { ExploratoryViewEmbeddable } = kibana.observability!; + + const onBrushEnd = ({ range }: any) => { + 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 euiChartTheme = darkMode - ? EUI_CHARTS_THEME_DARK - : EUI_CHARTS_THEME_LIGHT; + const allSeries: AllSeries = [ + { + dataType: 'ux', + name: 'page-load-distribution', + selectedMetricField: 'transaction.duration.us', + reportDefinitions: { + 'service.environment': ['ALL_VALUES'], + 'service.name': uiFilters?.serviceName ?? [], + }, + time: { + to: end, + from: start, + }, + 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/page_load_distribution/index.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/index.tsx index 8b894cae02749..a333a8aeb2d25 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 @@ -5,20 +5,10 @@ * 2.0. */ -import React, { useMemo, useState } from 'react'; -import { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiTitle, -} from '@elastic/eui'; -import { callDateMath } from '../../../../services/data/call_date_math'; +import React, { useState } from 'react'; +import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; -import { - createExploratoryViewUrl, - useEsSearch, -} from '@kbn/observability-plugin/public'; +import { createExploratoryViewUrl } from '@kbn/observability-plugin/public'; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; import { I18LABELS } from '../translations'; import { BreakdownFilter } from '../breakdowns/breakdown_filter'; @@ -26,11 +16,6 @@ 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 { - getPageLoadDistribution, - getPercentilesDistribution, -} from '@kbn/ux-plugin/public/services/data/page_load_distribution'; -import { useDataView } from '../local_uifilters/use_data_view'; export interface PercentileRange { min?: number | null; @@ -73,21 +58,13 @@ export const getPLDChartSteps = ({ return stepValues; }; -function removeZeroesFromTail(distData: Array<{ x: number; y: number }>) { - if (distData.length > 0) { - while (distData[distData.length - 1].y === 0) { - distData.pop(); - } - } - return distData; -} export function PageLoadDistribution() { const { http } = useKibanaServices(); - const { rangeId, urlParams, uxUiFilters } = useLegacyUrlParams(); + const { urlParams, uxUiFilters } = useLegacyUrlParams(); - const { start, end, rangeFrom, rangeTo, searchTerm } = urlParams; + const { start, end, rangeFrom, rangeTo } = urlParams; const { serviceName } = uxUiFilters; @@ -96,106 +73,8 @@ export function PageLoadDistribution() { max: null, }); - const { dataViewTitle } = useDataView(); - const [breakdown, setBreakdown] = useState(null); - const { params, maxDuration, minDuration } = useMemo(() => { - return getPageLoadDistribution({ - start: callDateMath(start), - end: callDateMath(end), - setup: { uiFilters: uxUiFilters }, - urlQuery: searchTerm, - ...(percentileRange.min && percentileRange.max - ? { - minPercentile: String(percentileRange.min), - maxPercentile: String(percentileRange.max), - } - : {}), - }); - }, [ - start, - end, - uxUiFilters, - searchTerm, - percentileRange.min, - percentileRange.max, - ]); - - const { data: d, loading: l } = useEsSearch( - { - index: dataViewTitle, - ...params, - }, - [dataViewTitle, params], - { name: 'UxPageLoadDistribution' } - ); - - const dd = useMemo(() => { - if (l || !d) return null; - - const { - aggregations, - hits: { total }, - } = d; - - if (total.value === 0) { - return null; - } - - const { durPercentiles, loadDistribution } = aggregations ?? {}; - - let pageDistVals = loadDistribution?.values ?? []; - - const maxPercQuery = durPercentiles?.values['99.0'] ?? 0; - - let durationMax = maxDuration; - // 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 && !percentileRange.max) { - const additionalStepsPageVals = getPercentilesDistribution({ - setup: { uiFilters: uxUiFilters }, - maxDuration: maxPercQuery, - // we pass 50sec as min to get next steps - minDuration: maxDuration, - start: callDateMath(start), - end: callDateMath(end), - }); - - pageDistVals = (pageDistVals ?? []).concat(additionalStepsPageVals); - durationMax = 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: { - pageLoadDistribution: pageDist, - percentiles: durPercentiles?.values, - minDuration: microToSec(minDuration), - maxDuration: microToSec(durationMax), - }, - }; - }, [percentileRange.max, minDuration, maxDuration, d, l]); - const onPercentileChange = (min: number, max: number) => { setPercentileRange({ min, max }); }; @@ -254,16 +133,12 @@ export function PageLoadDistribution() { )} - ); From 1626a3ef644113fa99ea99c625a10c72dc24636d Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 6 Jun 2022 10:07:43 -0400 Subject: [PATCH 03/15] Delete obsolete unit test. --- .../apm/server/routes/rum_client/queries.test.ts | 16 ---------------- 1 file changed, 16 deletions(-) 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 index 43c115c75567c..0d620e2b5eea5 100644 --- a/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts +++ b/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts @@ -11,7 +11,6 @@ import { } from '../../utils/test_helpers'; import { getClientMetrics } from './get_client_metrics'; import { getPageViewTrends } from './get_page_view_trends'; -import { getPageLoadDistribution } from './get_page_load_distribution'; import { getLongTaskMetrics } from './get_long_task_metrics'; describe('rum client dashboard queries', () => { @@ -49,21 +48,6 @@ describe('rum client dashboard queries', () => { expect(mock.params).toMatchSnapshot(); }); - 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(); - }); - it('fetches long task metrics', async () => { mock = await inspectSearchParams((setup) => getLongTaskMetrics({ From 2cde512cd95e37ab0f04f1151061788547fc2b1d Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 13 Jun 2022 12:48:33 -0400 Subject: [PATCH 04/15] Delete obsolete test snapshot. --- .../__snapshots__/queries.test.ts.snap | 271 ------------------ 1 file changed, 271 deletions(-) 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 index 5931582340943..19f4a571d6d8a 100644 --- 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 @@ -147,277 +147,6 @@ Object { } `; -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, - }, -} -`; - exports[`rum client dashboard queries fetches page view trends 1`] = ` Object { "apm": Object { From a4e1d87877de024ef9e838d93c74116e7ca18611 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Mon, 13 Jun 2022 16:52:01 -0400 Subject: [PATCH 05/15] Convert page views chart to exploratory view embeddable. --- .../routes/rum_client/get_page_view_trends.ts | 126 --------------- .../server/routes/rum_client/queries.test.ts | 15 -- .../apm/server/routes/rum_client/route.ts | 27 ---- .../charts/page_load_dist_chart.tsx | 10 +- .../rum_dashboard/charts/page_views_chart.tsx | 147 ++++++------------ .../rum_dashboard/page_views_trend/index.tsx | 36 +---- 6 files changed, 62 insertions(+), 299 deletions(-) delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/get_page_view_trends.ts diff --git a/x-pack/plugins/apm/server/routes/rum_client/get_page_view_trends.ts b/x-pack/plugins/apm/server/routes/rum_client/get_page_view_trends.ts deleted file mode 100644 index 243349c4b4425..0000000000000 --- a/x-pack/plugins/apm/server/routes/rum_client/get_page_view_trends.ts +++ /dev/null @@ -1,126 +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 { mergeProjection } from '../../projections/util/merge_projection'; -import { SetupUX } from './route'; - -export interface BreakdownItem { - name: string; - type: string; - fieldName: string; - selected?: boolean; -} - -export async function getPageViewTrends({ - setup, - breakdowns, - urlQuery, - start, - end, -}: { - setup: SetupUX; - breakdowns?: string; - urlQuery?: string; - start: number; - end: number; -}) { - const projection = getRumPageLoadTransactionsProjection({ - setup, - urlQuery, - checkFetchStartFieldExists: false, - start, - end, - }); - let breakdownItem: BreakdownItem | null = null; - if (breakdowns) { - breakdownItem = JSON.parse(breakdowns); - } - - const params = mergeProjection(projection, { - body: { - size: 0, - query: { - bool: projection.body.query.bool, - }, - aggs: { - pageViews: { - auto_date_histogram: { - field: '@timestamp', - buckets: 50, - }, - aggs: breakdownItem - ? { - breakdown: { - terms: { - field: breakdownItem.fieldName, - size: 9, - missing: 'Others', - }, - }, - } - : undefined, - }, - ...(breakdownItem - ? { - topBreakdowns: { - terms: { - field: breakdownItem.fieldName, - size: 9, - }, - }, - } - : {}), - }, - }, - }); - - const { apmEventClient } = setup; - - const response = await apmEventClient.search('get_page_view_trends', params); - - const { topBreakdowns } = response.aggregations ?? {}; - - // we are only displaying top 9 - const topItems: string[] = (topBreakdowns?.buckets ?? []).map( - ({ key }) => key as string - ); - - const result = response.aggregations?.pageViews.buckets ?? []; - - return { - topItems, - items: result.map((bucket) => { - const { key: xVal, doc_count: bCount } = bucket; - const res: Record = { - x: xVal, - y: bCount, - }; - if ('breakdown' in bucket) { - let top9Count = 0; - const categoryBuckets = bucket.breakdown.buckets; - categoryBuckets.forEach(({ key, doc_count: docCount }) => { - if (topItems.includes(key as string)) { - if (res[key]) { - // if term is already in object, just add it to it - res[key] += docCount; - } else { - res[key] = docCount; - } - top9Count += docCount; - } - }); - // Top 9 plus others, get a diff from parent bucket total - if (bCount > top9Count) { - res.Others = bCount - top9Count; - } - } - - return res; - }), - }; -} 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 index 0d620e2b5eea5..9e738bfeaeaee 100644 --- a/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts +++ b/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts @@ -10,7 +10,6 @@ import { inspectSearchParams, } from '../../utils/test_helpers'; import { getClientMetrics } from './get_client_metrics'; -import { getPageViewTrends } from './get_page_view_trends'; import { getLongTaskMetrics } from './get_long_task_metrics'; describe('rum client dashboard queries', () => { @@ -34,20 +33,6 @@ describe('rum client dashboard queries', () => { expect(mock.params).toMatchSnapshot(); }); - it('fetches page view trends', async () => { - mock = await inspectSearchParams( - (setup) => - getPageViewTrends({ - setup, - start: 0, - end: 50000, - }), - { uiFilters: { environment: 'staging' } } - ); - - expect(mock.params).toMatchSnapshot(); - }); - it('fetches long task metrics', async () => { mock = await inspectSearchParams((setup) => getLongTaskMetrics({ diff --git a/x-pack/plugins/apm/server/routes/rum_client/route.ts b/x-pack/plugins/apm/server/routes/rum_client/route.ts index 32132b612e1fc..37af96795fc46 100644 --- a/x-pack/plugins/apm/server/routes/rum_client/route.ts +++ b/x-pack/plugins/apm/server/routes/rum_client/route.ts @@ -10,7 +10,6 @@ import { isoToEpochRt } from '@kbn/io-ts-utils'; import { setupRequest, Setup } from '../../lib/helpers/setup_request'; import { getClientMetrics } from './get_client_metrics'; import { getLongTaskMetrics } from './get_long_task_metrics'; -import { getPageViewTrends } from './get_page_view_trends'; import { getVisitorBreakdown } from './get_visitor_breakdown'; import { hasRumData } from './has_rum_data'; import { createApmServerRoute } from '../apm_routes/create_apm_server_route'; @@ -87,31 +86,6 @@ const rumClientMetricsRoute = createApmServerRoute({ }, }); -const rumPageViewsTrendRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/ux/page-view-trends', - params: t.type({ - query: t.intersection([uxQueryRt, t.partial({ breakdowns: t.string })]), - }), - options: { tags: ['access:apm'] }, - handler: async ( - resources - ): Promise<{ topItems: string[]; items: Array> }> => { - const setup = await setupUXRequest(resources); - - const { - query: { breakdowns, urlQuery, start, end }, - } = resources.params; - - return getPageViewTrends({ - setup, - breakdowns, - urlQuery, - start, - end, - }); - }, -}); - const rumVisitorsBreakdownRoute = createApmServerRoute({ endpoint: 'GET /internal/apm/ux/visitor-breakdown', params: t.type({ @@ -224,7 +198,6 @@ async function setupUXRequest( export const rumRouteRepository = { ...rumClientMetricsRoute, - ...rumPageViewsTrendRoute, ...rumVisitorsBreakdownRoute, ...rumLongTaskMetrics, ...rumHasDataRoute, 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 a6900ed0b3a47..953b93c1b735a 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 @@ -10,6 +10,10 @@ import { AllSeries } from '@kbn/observability-plugin/public'; import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters'; import { useDataView } from '../local_uifilters/use_data_view'; import { useKibanaServices } from '../../../../hooks/use_kibana_services'; +import { + SERVICE_ENVIRONMENT, + SERVICE_NAME, +} from '../../../../../common/elasticsearch_fieldnames'; interface Props { breakdown: BreakdownItem | null; @@ -45,8 +49,10 @@ export function PageLoadDistChart({ name: 'page-load-distribution', selectedMetricField: 'transaction.duration.us', reportDefinitions: { - 'service.environment': ['ALL_VALUES'], - 'service.name': uiFilters?.serviceName ?? [], + [SERVICE_ENVIRONMENT]: uiFilters?.environment + ? [uiFilters.environment] + : ['ALL_VALUES'], + [SERVICE_NAME]: uiFilters?.serviceName ?? [], }, time: { to: end, 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 3e39d8c4faeb8..8e09ba192df1e 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 @@ -5,59 +5,63 @@ * 2.0. */ -import { - Axis, - BarSeries, - BrushEndListener, - Chart, - DARK_THEME, - LIGHT_THEME, - niceTimeFormatByDay, - ScaleType, - SeriesNameFn, - Settings, - timeFormatter, - Position, -} from '@elastic/charts'; -import { - EUI_CHARTS_THEME_DARK, - EUI_CHARTS_THEME_LIGHT, -} from '@elastic/eui/dist/eui_charts_theme'; -import numeral from '@elastic/numeral'; import moment from 'moment'; import React from 'react'; import { useHistory } from 'react-router-dom'; -import { useUiSetting$ } from '@kbn/kibana-react-plugin/public'; -import { fromQuery, toQuery } from '@kbn/observability-plugin/public'; +import { + AllSeries, + fromQuery, + toQuery, +} from '@kbn/observability-plugin/public'; +import { BreakdownItem } from '../../../../../typings/ui_filters'; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; -import { ChartWrapper } from '../chart_wrapper'; -import { I18LABELS } from '../translations'; +import { useKibanaServices } from '../../../../hooks/use_kibana_services'; +import { useDataView } from '../local_uifilters/use_data_view'; +import { + SERVICE_ENVIRONMENT, + SERVICE_NAME, +} from '../../../../../common/elasticsearch_fieldnames'; interface Props { - data?: { - topItems: string[]; - items: Array>; - }; - loading: boolean; + breakdown: BreakdownItem | null; } -export function PageViewsChart({ data, loading }: 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 diffInDays = moment(new Date(end as string)).diff( - moment(new Date(start as string)), - 'day' - ); - const formatter = timeFormatter(niceTimeFormatByDay(diffInDays > 1 ? 2 : 1)); + const allSeries: AllSeries = [ + { + dataType: 'ux', + time: { + from: start ?? '', + to: end ?? '', + }, + name: 'ux-series-1', + selectedMetricField: '___records___', + reportDefinitions: { + [SERVICE_ENVIRONMENT]: urlParams?.environment + ? [urlParams.environment] + : ['ALL_VALUES'], + [SERVICE_NAME]: urlParams.serviceName + ? [urlParams.serviceName] + : ['ALL_VALUES'], + }, + breakdown: breakdown?.fieldName, + }, + ]; - const onBrushEnd: BrushEndListener = ({ x }) => { - if (!x) { + const onBrushEnd = ({ range }: any) => { + if (!range) { return; } - const [minX, maxX] = x; + const [minX, maxX] = range; const rangeFrom = moment(minX).toISOString(); const rangeTo = moment(maxX).toISOString(); @@ -72,67 +76,14 @@ export function PageViewsChart({ data, loading }: Props) { }); }; - const hasBreakdowns = !!data?.topItems?.length; - - const breakdownAccessors = data?.topItems?.length ? data?.topItems : ['y']; - - const [darkMode] = useUiSetting$('theme:darkMode'); - - const customSeriesNaming: SeriesNameFn = ({ yAccessor }) => { - if (yAccessor === 'y') { - return I18LABELS.overall; - } - - return yAccessor; - }; - - const euiChartTheme = darkMode - ? EUI_CHARTS_THEME_DARK - : EUI_CHARTS_THEME_LIGHT; - return ( - - {(!loading || data) && ( - - - - numeral(d).format('0')} - labelFormat={(d) => numeral(d).format('0a')} - /> - - - )} - + ); } 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 87d6562d869b6..7870d47e4a2b4 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 @@ -16,49 +16,23 @@ import { 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 { I18LABELS } from '../translations'; import { BreakdownFilter } from '../breakdowns/breakdown_filter'; import { PageViewsChart } from '../charts/page_views_chart'; import { useKibanaServices } from '../../../../hooks/use_kibana_services'; import { BreakdownItem } from '../../../../../typings/ui_filters'; +import { SERVICE_NAME } from '../../../../../common/elasticsearch_fieldnames'; export function PageViewsTrend() { const { http } = useKibanaServices(); - const { rangeId, urlParams, uxUiFilters } = useLegacyUrlParams(); + const { urlParams, uxUiFilters } = useLegacyUrlParams(); const { serviceName } = uxUiFilters; - const { start, end, searchTerm, rangeTo, rangeFrom } = urlParams; + const { rangeTo, rangeFrom } = urlParams; const [breakdown, setBreakdown] = useState(null); - const { data, status } = useFetcher( - (callApmApi) => { - if (start && end && serviceName) { - return callApmApi('GET /internal/apm/ux/page-view-trends', { - params: { - query: { - start, - end, - uiFilters: JSON.stringify(uxUiFilters), - urlQuery: searchTerm, - ...(breakdown - ? { - breakdowns: JSON.stringify(breakdown), - } - : {}), - }, - }, - }); - } - return Promise.resolve(undefined); - }, - // `rangeId` acts as a cache buster for stable ranges like "Today" - // eslint-disable-next-line react-hooks/exhaustive-deps - [start, end, serviceName, uxUiFilters, searchTerm, breakdown, rangeId] - ); - const exploratoryViewLink = createExploratoryViewUrl( { reportType: 'kpi-over-time', @@ -68,7 +42,7 @@ export function PageViewsTrend() { dataType: 'ux', time: { from: rangeFrom!, to: rangeTo! }, reportDefinitions: { - 'service.name': serviceName as string[], + [SERVICE_NAME]: serviceName as string[], }, ...(breakdown ? { breakdown: breakdown.fieldName } : {}), }, @@ -110,7 +84,7 @@ export function PageViewsTrend() { )} - + ); } From ea6c5e8ad8092193dc982f005e1000f365e36083 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 14 Jun 2022 08:54:37 -0400 Subject: [PATCH 06/15] Clean up `any` usage, prefer constants for field names, delete dead code. --- .../charts/page_load_dist_chart.tsx | 5 ++- .../rum_dashboard/charts/page_views_chart.tsx | 5 ++- .../page_load_distribution/index.tsx | 37 ------------------- 3 files changed, 6 insertions(+), 41 deletions(-) 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 953b93c1b735a..a4ec041912564 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 @@ -13,6 +13,7 @@ import { useKibanaServices } from '../../../../hooks/use_kibana_services'; import { SERVICE_ENVIRONMENT, SERVICE_NAME, + TRANSACTION_DURATION, } from '../../../../../common/elasticsearch_fieldnames'; interface Props { @@ -35,7 +36,7 @@ export function PageLoadDistChart({ const kibana = useKibanaServices(); const { ExploratoryViewEmbeddable } = kibana.observability!; - const onBrushEnd = ({ range }: any) => { + const onBrushEnd = ({ range }: { range: number[] }) => { if (!range) { return; } @@ -47,7 +48,7 @@ export function PageLoadDistChart({ { dataType: 'ux', name: 'page-load-distribution', - selectedMetricField: 'transaction.duration.us', + selectedMetricField: TRANSACTION_DURATION, reportDefinitions: { [SERVICE_ENVIRONMENT]: uiFilters?.environment ? [uiFilters.environment] 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 8e09ba192df1e..cbb42a643ea21 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 @@ -11,6 +11,7 @@ import { useHistory } from 'react-router-dom'; import { AllSeries, fromQuery, + RECORDS_FIELD, toQuery, } from '@kbn/observability-plugin/public'; import { BreakdownItem } from '../../../../../typings/ui_filters'; @@ -44,7 +45,7 @@ export function PageViewsChart({ breakdown }: Props) { to: end ?? '', }, name: 'ux-series-1', - selectedMetricField: '___records___', + selectedMetricField: RECORDS_FIELD, reportDefinitions: { [SERVICE_ENVIRONMENT]: urlParams?.environment ? [urlParams.environment] @@ -57,7 +58,7 @@ export function PageViewsChart({ breakdown }: Props) { }, ]; - const onBrushEnd = ({ range }: any) => { + const onBrushEnd = ({ range }: { range: number[] }) => { if (!range) { return; } 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 a333a8aeb2d25..ddc4272b761c4 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 @@ -22,43 +22,6 @@ export interface PercentileRange { max?: number | null; } -export const MICRO_TO_SEC = 1000000; - -export function microToSec(val: number) { - return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100; -} - -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 function PageLoadDistribution() { const { http } = useKibanaServices(); From 5aba64768d1515011ca22ae00df2a22105a2e4a8 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 14 Jun 2022 08:59:59 -0400 Subject: [PATCH 07/15] Delete obsolete API tests. --- .../tests/csm/page_views.spec.ts | 89 ------------------- 1 file changed, 89 deletions(-) delete mode 100644 x-pack/test/apm_api_integration/tests/csm/page_views.spec.ts diff --git a/x-pack/test/apm_api_integration/tests/csm/page_views.spec.ts b/x-pack/test/apm_api_integration/tests/csm/page_views.spec.ts deleted file mode 100644 index 31f7def2f9884..0000000000000 --- a/x-pack/test/apm_api_integration/tests/csm/page_views.spec.ts +++ /dev/null @@ -1,89 +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 expect from '@kbn/expect'; -import { FtrProviderContext } from '../../common/ftr_provider_context'; - -export default function rumServicesApiTests({ getService }: FtrProviderContext) { - const registry = getService('registry'); - const apmApiClient = getService('apmApiClient'); - - registry.when('CSM page views without data', { config: 'trial', archives: [] }, () => { - it('returns empty list', async () => { - const response = await apmApiClient.readUser({ - endpoint: 'GET /internal/apm/ux/page-view-trends', - params: { - query: { - start: '2020-09-07T20:35:54.654Z', - end: '2020-09-14T20:35:54.654Z', - uiFilters: '{"serviceName":["elastic-co-rum-test"]}', - }, - }, - }); - - expect(response.status).to.be(200); - expectSnapshot(response.body).toMatch(); - }); - - it('returns empty list with breakdowns', async () => { - const response = await apmApiClient.readUser({ - endpoint: 'GET /internal/apm/ux/page-view-trends', - params: { - query: { - start: '2020-09-07T20:35:54.654Z', - end: '2020-09-14T20:35:54.654Z', - uiFilters: '{"serviceName":["elastic-co-rum-test"]}', - breakdowns: '{"name":"Browser","fieldName":"user_agent.name","type":"category"}', - }, - }, - }); - - expect(response.status).to.be(200); - expectSnapshot(response.body).toMatch(); - }); - }); - - registry.when( - 'CSM page views with data', - { config: 'trial', archives: ['8.0.0', 'rum_8.0.0'] }, - () => { - it('returns page views', async () => { - const response = await apmApiClient.readUser({ - endpoint: 'GET /internal/apm/ux/page-view-trends', - params: { - query: { - start: '2020-09-07T20:35:54.654Z', - end: '2020-09-16T20:35:54.654Z', - uiFilters: '{"serviceName":["kibana-frontend-8_0_0"]}', - }, - }, - }); - - expect(response.status).to.be(200); - - expectSnapshot(response.body).toMatch(); - }); - it('returns page views with breakdown', async () => { - const response = await apmApiClient.readUser({ - endpoint: 'GET /internal/apm/ux/page-view-trends', - params: { - query: { - start: '2020-09-07T20:35:54.654Z', - end: '2020-09-16T20:35:54.654Z', - uiFilters: '{"serviceName":["kibana-frontend-8_0_0"]}', - breakdowns: '{"name":"Browser","fieldName":"user_agent.name","type":"category"}', - }, - }, - }); - - expect(response.status).to.be(200); - - expectSnapshot(response.body).toMatch(); - }); - } - ); -} From 04cb046983f341f6b6b37d631d95d85bc55759f3 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 14 Jun 2022 09:13:01 -0400 Subject: [PATCH 08/15] Delete obsolete test snapshot. --- .../csm/__snapshots__/page_views.spec.snap | 280 ------------------ 1 file changed, 280 deletions(-) delete mode 100644 x-pack/test/apm_api_integration/tests/csm/__snapshots__/page_views.spec.snap diff --git a/x-pack/test/apm_api_integration/tests/csm/__snapshots__/page_views.spec.snap b/x-pack/test/apm_api_integration/tests/csm/__snapshots__/page_views.spec.snap deleted file mode 100644 index 01d0d7fb6139c..0000000000000 --- a/x-pack/test/apm_api_integration/tests/csm/__snapshots__/page_views.spec.snap +++ /dev/null @@ -1,280 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`APM API tests trial 8.0.0,rum_8.0.0 CSM page views with data returns page views 1`] = ` -Object { - "items": Array [ - Object { - "x": 1600149947000, - "y": 1, - }, - Object { - "x": 1600149957000, - "y": 0, - }, - Object { - "x": 1600149967000, - "y": 0, - }, - Object { - "x": 1600149977000, - "y": 0, - }, - Object { - "x": 1600149987000, - "y": 0, - }, - Object { - "x": 1600149997000, - "y": 0, - }, - Object { - "x": 1600150007000, - "y": 0, - }, - Object { - "x": 1600150017000, - "y": 0, - }, - Object { - "x": 1600150027000, - "y": 1, - }, - Object { - "x": 1600150037000, - "y": 0, - }, - Object { - "x": 1600150047000, - "y": 0, - }, - Object { - "x": 1600150057000, - "y": 0, - }, - Object { - "x": 1600150067000, - "y": 0, - }, - Object { - "x": 1600150077000, - "y": 1, - }, - Object { - "x": 1600150087000, - "y": 0, - }, - Object { - "x": 1600150097000, - "y": 0, - }, - Object { - "x": 1600150107000, - "y": 0, - }, - Object { - "x": 1600150117000, - "y": 0, - }, - Object { - "x": 1600150127000, - "y": 0, - }, - Object { - "x": 1600150137000, - "y": 0, - }, - Object { - "x": 1600150147000, - "y": 0, - }, - Object { - "x": 1600150157000, - "y": 0, - }, - Object { - "x": 1600150167000, - "y": 0, - }, - Object { - "x": 1600150177000, - "y": 1, - }, - Object { - "x": 1600150187000, - "y": 0, - }, - Object { - "x": 1600150197000, - "y": 0, - }, - Object { - "x": 1600150207000, - "y": 1, - }, - Object { - "x": 1600150217000, - "y": 0, - }, - Object { - "x": 1600150227000, - "y": 0, - }, - Object { - "x": 1600150237000, - "y": 1, - }, - ], - "topItems": Array [], -} -`; - -exports[`APM API tests trial 8.0.0,rum_8.0.0 CSM page views with data returns page views with breakdown 1`] = ` -Object { - "items": Array [ - Object { - "Chrome": 1, - "x": 1600149947000, - "y": 1, - }, - Object { - "x": 1600149957000, - "y": 0, - }, - Object { - "x": 1600149967000, - "y": 0, - }, - Object { - "x": 1600149977000, - "y": 0, - }, - Object { - "x": 1600149987000, - "y": 0, - }, - Object { - "x": 1600149997000, - "y": 0, - }, - Object { - "x": 1600150007000, - "y": 0, - }, - Object { - "x": 1600150017000, - "y": 0, - }, - Object { - "Chrome": 1, - "x": 1600150027000, - "y": 1, - }, - Object { - "x": 1600150037000, - "y": 0, - }, - Object { - "x": 1600150047000, - "y": 0, - }, - Object { - "x": 1600150057000, - "y": 0, - }, - Object { - "x": 1600150067000, - "y": 0, - }, - Object { - "Chrome": 1, - "x": 1600150077000, - "y": 1, - }, - Object { - "x": 1600150087000, - "y": 0, - }, - Object { - "x": 1600150097000, - "y": 0, - }, - Object { - "x": 1600150107000, - "y": 0, - }, - Object { - "x": 1600150117000, - "y": 0, - }, - Object { - "x": 1600150127000, - "y": 0, - }, - Object { - "x": 1600150137000, - "y": 0, - }, - Object { - "x": 1600150147000, - "y": 0, - }, - Object { - "x": 1600150157000, - "y": 0, - }, - Object { - "x": 1600150167000, - "y": 0, - }, - Object { - "Chrome": 1, - "x": 1600150177000, - "y": 1, - }, - Object { - "x": 1600150187000, - "y": 0, - }, - Object { - "x": 1600150197000, - "y": 0, - }, - Object { - "Chrome Mobile": 1, - "x": 1600150207000, - "y": 1, - }, - Object { - "x": 1600150217000, - "y": 0, - }, - Object { - "x": 1600150227000, - "y": 0, - }, - Object { - "Chrome Mobile": 1, - "x": 1600150237000, - "y": 1, - }, - ], - "topItems": Array [ - "Chrome", - "Chrome Mobile", - ], -} -`; - -exports[`APM API tests trial no data CSM page views without data returns empty list 1`] = ` -Object { - "items": Array [], - "topItems": Array [], -} -`; - -exports[`APM API tests trial no data CSM page views without data returns empty list with breakdowns 1`] = ` -Object { - "items": Array [], - "topItems": Array [], -} -`; From 09f2be486885c7632d96386e90cedc6e65b21bba Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 14 Jun 2022 12:21:36 -0400 Subject: [PATCH 09/15] Remove obsolete test snapshot. --- .../__snapshots__/queries.test.ts.snap | 48 ------------------- 1 file changed, 48 deletions(-) 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 index 19f4a571d6d8a..f8ae6a1cde0a1 100644 --- 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 @@ -146,51 +146,3 @@ Object { }, } `; - -exports[`rum client dashboard queries fetches page view trends 1`] = ` -Object { - "apm": Object { - "events": Array [ - "transaction", - ], - }, - "body": Object { - "aggs": Object { - "pageViews": Object { - "aggs": undefined, - "auto_date_histogram": Object { - "buckets": 50, - "field": "@timestamp", - }, - }, - }, - "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 { - "term": Object { - "service.environment": "staging", - }, - }, - ], - "must_not": Array [], - }, - }, - "size": 0, - }, -} -`; From b1517b965afc7980eec2abac30741f636f01ab99 Mon Sep 17 00:00:00 2001 From: Justin Kambic Date: Tue, 14 Jun 2022 14:26:44 -0400 Subject: [PATCH 10/15] Clean up field names, fix bug on page distribution chart. --- .../configurations/constants/constants.ts | 2 ++ x-pack/plugins/observability/public/index.ts | 1 + .../charts/page_load_dist_chart.tsx | 15 ++++++++++----- .../rum_dashboard/charts/page_views_chart.tsx | 16 ++++++++++------ .../app/rum_dashboard/page_views_trend/index.tsx | 2 +- 5 files changed, 24 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts index ad88d481af490..960a0c34178c3 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/configurations/constants/constants.ts @@ -168,3 +168,5 @@ export const PERCENTILE_RANKS = [ ]; export const LABEL_FIELDS_FILTER = 'LABEL_FIELDS_FILTER'; export const LABEL_FIELDS_BREAKDOWN = 'LABEL_FIELDS_BREAKDOWN'; + +export const ENVIRONMENT_ALL = 'ENVIRONMENT_ALL'; diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index 66325b1510790..376371ed27b95 100644 --- a/x-pack/plugins/observability/public/index.ts +++ b/x-pack/plugins/observability/public/index.ts @@ -110,6 +110,7 @@ export { useInspectorContext } from './context/inspector/use_inspector_context'; export type { SeriesConfig, ConfigProps } from './components/shared/exploratory_view/types'; export { ReportTypes, + ENVIRONMENT_ALL, FILTER_RECORDS, REPORT_METRIC_FIELD, USE_BREAK_DOWN_COLUMN, 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 a4ec041912564..24620067696e7 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 @@ -6,7 +6,11 @@ */ import React from 'react'; -import { AllSeries } from '@kbn/observability-plugin/public'; +import { + AllSeries, + ALL_VALUES_SELECTED, + ENVIRONMENT_ALL, +} from '@kbn/observability-plugin/public'; import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters'; import { useDataView } from '../local_uifilters/use_data_view'; import { useKibanaServices } from '../../../../hooks/use_kibana_services'; @@ -50,10 +54,11 @@ export function PageLoadDistChart({ name: 'page-load-distribution', selectedMetricField: TRANSACTION_DURATION, reportDefinitions: { - [SERVICE_ENVIRONMENT]: uiFilters?.environment - ? [uiFilters.environment] - : ['ALL_VALUES'], - [SERVICE_NAME]: uiFilters?.serviceName ?? [], + [SERVICE_ENVIRONMENT]: + !uiFilters?.environment || uiFilters.environment === ENVIRONMENT_ALL + ? [ALL_VALUES_SELECTED] + : [uiFilters.environment], + [SERVICE_NAME]: uiFilters?.serviceName ?? [ALL_VALUES_SELECTED], }, time: { to: end, 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 cbb42a643ea21..1c172b8303c08 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 @@ -10,11 +10,13 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import { AllSeries, + ALL_VALUES_SELECTED, + ENVIRONMENT_ALL, fromQuery, RECORDS_FIELD, toQuery, } from '@kbn/observability-plugin/public'; -import { BreakdownItem } from '../../../../../typings/ui_filters'; +import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters'; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; import { useKibanaServices } from '../../../../hooks/use_kibana_services'; import { useDataView } from '../local_uifilters/use_data_view'; @@ -25,9 +27,10 @@ import { interface Props { breakdown: BreakdownItem | null; + uiFilters: UxUIFilters; } -export function PageViewsChart({ breakdown }: Props) { +export function PageViewsChart({ breakdown, uiFilters }: Props) { const { dataViewTitle } = useDataView(); const history = useHistory(); const { urlParams } = useLegacyUrlParams(); @@ -47,12 +50,13 @@ export function PageViewsChart({ breakdown }: Props) { name: 'ux-series-1', selectedMetricField: RECORDS_FIELD, reportDefinitions: { - [SERVICE_ENVIRONMENT]: urlParams?.environment - ? [urlParams.environment] - : ['ALL_VALUES'], + [SERVICE_ENVIRONMENT]: + !uiFilters?.environment || uiFilters.environment === ENVIRONMENT_ALL + ? [ALL_VALUES_SELECTED] + : [uiFilters.environment], [SERVICE_NAME]: urlParams.serviceName ? [urlParams.serviceName] - : ['ALL_VALUES'], + : [ALL_VALUES_SELECTED], }, breakdown: breakdown?.fieldName, }, 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 7870d47e4a2b4..7b294441f9f85 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 @@ -84,7 +84,7 @@ export function PageViewsTrend() { )} - + ); } From 4a2b8459a115a14100f4fe3bd53c3ab560c97819 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Thu, 16 Jun 2022 17:48:47 +0200 Subject: [PATCH 11/15] fix env filter --- .../app/rum_dashboard/charts/page_load_dist_chart.tsx | 5 +++-- .../components/app/rum_dashboard/charts/page_views_chart.tsx | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) 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 24620067696e7..f03587941ec85 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 @@ -9,8 +9,8 @@ import React from 'react'; import { AllSeries, ALL_VALUES_SELECTED, - ENVIRONMENT_ALL, } from '@kbn/observability-plugin/public'; +import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values'; import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters'; import { useDataView } from '../local_uifilters/use_data_view'; import { useKibanaServices } from '../../../../hooks/use_kibana_services'; @@ -55,7 +55,8 @@ export function PageLoadDistChart({ selectedMetricField: TRANSACTION_DURATION, reportDefinitions: { [SERVICE_ENVIRONMENT]: - !uiFilters?.environment || uiFilters.environment === ENVIRONMENT_ALL + !uiFilters?.environment || + uiFilters.environment === ENVIRONMENT_ALL.value ? [ALL_VALUES_SELECTED] : [uiFilters.environment], [SERVICE_NAME]: uiFilters?.serviceName ?? [ALL_VALUES_SELECTED], 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 1c172b8303c08..20ba8d75ce4a4 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 @@ -11,11 +11,11 @@ import { useHistory } from 'react-router-dom'; import { AllSeries, ALL_VALUES_SELECTED, - ENVIRONMENT_ALL, fromQuery, RECORDS_FIELD, toQuery, } from '@kbn/observability-plugin/public'; +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 { useKibanaServices } from '../../../../hooks/use_kibana_services'; @@ -51,7 +51,8 @@ export function PageViewsChart({ breakdown, uiFilters }: Props) { selectedMetricField: RECORDS_FIELD, reportDefinitions: { [SERVICE_ENVIRONMENT]: - !uiFilters?.environment || uiFilters.environment === ENVIRONMENT_ALL + !uiFilters?.environment || + uiFilters.environment === ENVIRONMENT_ALL.value ? [ALL_VALUES_SELECTED] : [uiFilters.environment], [SERVICE_NAME]: urlParams.serviceName From 80bffa4d1577532ef4a59e7be6d9e4dcca30665f Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Tue, 12 Jul 2022 22:46:43 +0200 Subject: [PATCH 12/15] cleanup --- .github/CODEOWNERS | 3 - .github/paths-labeller.yml | 4 - .../projections/rum_page_load_transactions.ts | 121 -------- .../plugins/apm/server/projections/typings.ts | 24 -- .../util/merge_projection/index.test.ts | 80 ------ .../util/merge_projection/index.ts | 37 --- .../get_global_apm_server_route_repository.ts | 2 - .../__snapshots__/queries.test.ts.snap | 272 ------------------ .../server/routes/rum_client/queries.test.ts | 35 --- .../apm/server/routes/rum_client/route.ts | 160 ----------- .../ui_filters/get_es_filter.test.ts | 31 -- .../rum_client/ui_filters/get_es_filter.ts | 44 --- x-pack/plugins/observability/public/index.ts | 1 - .../charts/page_load_dist_chart.tsx | 47 +-- .../rum_dashboard/charts/page_views_chart.tsx | 34 +-- .../charts/use_exp_view_attrs.ts | 37 +++ .../page_load_distribution/index.tsx | 45 +-- .../panels/page_load_and_views.tsx | 2 +- 18 files changed, 60 insertions(+), 919 deletions(-) delete mode 100644 x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts delete mode 100644 x-pack/plugins/apm/server/projections/typings.ts delete mode 100644 x-pack/plugins/apm/server/projections/util/merge_projection/index.test.ts delete mode 100644 x-pack/plugins/apm/server/projections/util/merge_projection/index.ts delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/__snapshots__/queries.test.ts.snap delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/queries.test.ts delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/route.ts delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.test.ts delete mode 100644 x-pack/plugins/apm/server/routes/rum_client/ui_filters/get_es_filter.ts create mode 100644 x-pack/plugins/ux/public/components/app/rum_dashboard/charts/use_exp_view_attrs.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 2c39e3171b754..03a5140c0d9c2 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/queries.test.ts b/x-pack/plugins/apm/server/routes/rum_client/queries.test.ts deleted file mode 100644 index 28623933e0b32..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 { getClientMetrics } from './get_client_metrics'; -import { getLongTaskMetrics } from './get_long_task_metrics'; - -describe('rum client dashboard queries', () => { - let mock: SearchParamsMock; - - afterEach(() => { - mock.teardown(); - }); - - it('fetches client metrics', async () => { - mock = await inspectSearchParams( - (setup) => - getClientMetrics({ - setup, - 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/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index 0837f76008b57..be47f8043283f 100644 --- a/x-pack/plugins/observability/public/index.ts +++ b/x-pack/plugins/observability/public/index.ts @@ -103,7 +103,6 @@ export { useInspectorContext } from './context/inspector/use_inspector_context'; export type { SeriesConfig, ConfigProps } from './components/shared/exploratory_view/types'; export { ReportTypes, - ENVIRONMENT_ALL, FILTER_RECORDS, ENVIRONMENT_ALL, REPORT_METRIC_FIELD, 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 f03587941ec85..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 @@ -6,35 +6,19 @@ */ import React from 'react'; -import { - AllSeries, - ALL_VALUES_SELECTED, -} from '@kbn/observability-plugin/public'; -import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values'; -import { BreakdownItem, UxUIFilters } from '../../../../../typings/ui_filters'; +import { AllSeries } from '@kbn/observability-plugin/public'; +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 { - SERVICE_ENVIRONMENT, - SERVICE_NAME, - TRANSACTION_DURATION, -} from '../../../../../common/elasticsearch_fieldnames'; +import { TRANSACTION_DURATION } from '../../../../../common/elasticsearch_fieldnames'; interface Props { breakdown: BreakdownItem | null; onPercentileChange: (min: number, max: number) => void; - start: string; - end: string; - uiFilters: UxUIFilters; } -export function PageLoadDistChart({ - onPercentileChange, - breakdown, - uiFilters, - start, - end, -}: Props) { +export function PageLoadDistChart({ onPercentileChange, breakdown }: Props) { const { dataViewTitle } = useDataView(); const kibana = useKibanaServices(); @@ -48,35 +32,28 @@ export function PageLoadDistChart({ onPercentileChange(minX, maxX); }; + const { reportDefinitions, time } = useExpViewAttributes(); + const allSeries: AllSeries = [ { + time, + reportDefinitions, dataType: 'ux', name: 'page-load-distribution', selectedMetricField: TRANSACTION_DURATION, - reportDefinitions: { - [SERVICE_ENVIRONMENT]: - !uiFilters?.environment || - uiFilters.environment === ENVIRONMENT_ALL.value - ? [ALL_VALUES_SELECTED] - : [uiFilters.environment], - [SERVICE_NAME]: uiFilters?.serviceName ?? [ALL_VALUES_SELECTED], - }, - time: { - to: end, - from: start, - }, breakdown: breakdown?.fieldName, }, ]; return ( ); } 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/index.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_load_distribution/index.tsx index 3fe54f1b335b9..c3bbee95f025b 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,26 +6,19 @@ */ import React, { useState } from 'react'; -import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; -import { createExploratoryViewUrl } from '@kbn/observability-plugin/public'; +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 { 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 { urlParams, uxUiFilters } = useLegacyUrlParams(); - const { start, end, rangeFrom, rangeTo } = urlParams; - - const { serviceName } = uxUiFilters; + const { start, end } = urlParams; const [percentileRange, setPercentileRange] = useState({ min: null, @@ -38,26 +31,6 @@ export function PageLoadDistribution() { 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 (
@@ -77,20 +50,6 @@ export function PageLoadDistribution() { dataTestSubj={'pldBreakdownFilter'} /> - {showAnalyzeButton && ( - - - - - - )} - + From c31f076c6fe6a8eaa75f32a357c21a6e5a8282eb Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Wed, 13 Jul 2022 12:11:11 +0200 Subject: [PATCH 13/15] fix --- .../app/rum_dashboard/page_load_distribution/index.tsx | 3 --- .../components/app/rum_dashboard/page_views_trend/index.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) 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 c3bbee95f025b..7c5e679dd9959 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 @@ -54,9 +54,6 @@ export function PageLoadDistribution() {
); 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..d4bb338ff4cc6 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 @@ -34,7 +34,7 @@ export function PageViewsTrend() { /> - + ); } From e9aa96ace2771fc72447254ffe9b1f14d06535e5 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Wed, 13 Jul 2022 12:19:41 +0200 Subject: [PATCH 14/15] pr feedback --- x-pack/plugins/translations/translations/fr-FR.json | 1 - x-pack/plugins/translations/translations/ja-JP.json | 1 - x-pack/plugins/translations/translations/zh-CN.json | 1 - .../components/app/rum_dashboard/page_views_trend/index.tsx | 3 --- 4 files changed, 6 deletions(-) diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 750bc121875b4..7b296b696e5b0 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -31712,7 +31712,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 0ca4cbaa696b7..5f85508fc7241 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -31694,7 +31694,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 9d3b92f48be3e..ac596cb739a6e 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -31723,7 +31723,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/page_views_trend/index.tsx b/x-pack/plugins/ux/public/components/app/rum_dashboard/page_views_trend/index.tsx index d4bb338ff4cc6..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 ( From ffeaafd96e569b944a27a924f2f1765f09f5b489 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Wed, 13 Jul 2022 16:04:44 +0200 Subject: [PATCH 15/15] update types --- .../app/rum_dashboard/page_load_distribution/index.tsx | 5 ----- 1 file changed, 5 deletions(-) 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 7c5e679dd9959..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 @@ -7,7 +7,6 @@ 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 { PageLoadDistChart } from '../charts/page_load_dist_chart'; @@ -16,10 +15,6 @@ import { BreakdownItem } from '../../../../../typings/ui_filters'; import { PercentileRange } from './types'; export function PageLoadDistribution() { - const { urlParams, uxUiFilters } = useLegacyUrlParams(); - - const { start, end } = urlParams; - const [percentileRange, setPercentileRange] = useState({ min: null, max: null,