From dc77c89e842f84f4db843a4d93a0f86fcd8dd7ee Mon Sep 17 00:00:00 2001 From: Giorgos Bamparopoulos Date: Tue, 26 Oct 2021 16:35:08 +0100 Subject: [PATCH 1/4] Update dependencies overview route to use backendName as a query param (#115226) * Update dependencies overview route to use backendName as a query param * Remove backendName from context * Move backendMetadataFetch call to the place that is used and remove ApmBackendContext * Update API routes and tests * Add redirect from the old route --- .../backend_detail_dependencies_table.tsx | 18 +-- .../backend_error_rate_chart.tsx | 13 +- .../backend_latency_chart.tsx | 13 +- .../backend_throughput_chart.tsx | 13 +- .../app/backend_detail_overview/index.tsx | 120 +++++++++--------- .../index.tsx | 2 +- .../service_map/Popover/backend_contents.tsx | 15 +-- .../index.tsx | 2 +- .../span_flyout/sticky_span_properties.tsx | 6 +- .../public/components/routing/home/index.tsx | 12 +- ...edirect_to_backend_overview_route_view.tsx | 22 ++++ .../templates/backend_detail_template.tsx | 33 ++++- .../shared/backend_link.stories.tsx | 4 +- .../public/components/shared/backend_link.tsx | 9 +- .../apm_backend/apm_backend_context.tsx | 74 ----------- .../apm_backend/use_apm_backend_context.tsx | 20 --- x-pack/plugins/apm/server/routes/backends.ts | 83 +++++++----- .../plugins/apm/server/routes/service_map.ts | 14 +- .../tests/service_maps/service_maps.ts | 10 +- .../tests/throughput/dependencies_apis.ts | 8 +- 20 files changed, 223 insertions(+), 268 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/routing/home/redirect_to_backend_overview_route_view.tsx delete mode 100644 x-pack/plugins/apm/public/context/apm_backend/apm_backend_context.tsx delete mode 100644 x-pack/plugins/apm/public/context/apm_backend/use_apm_backend_context.tsx diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx index 57efea4ffdcac..72273bf8c9e19 100644 --- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx +++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx @@ -13,7 +13,6 @@ import { useUrlParams } from '../../../context/url_params_context/use_url_params import { useFetcher } from '../../../hooks/use_fetcher'; import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_range_comparison'; import { DependenciesTable } from '../../shared/dependencies_table'; -import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context'; import { ServiceLink } from '../../shared/service_link'; import { useTimeRange } from '../../../hooks/use_time_range'; @@ -23,8 +22,8 @@ export function BackendDetailDependenciesTable() { } = useUrlParams(); const { - query: { rangeFrom, rangeTo, kuery, environment }, - } = useApmParams('/backends/{backendName}/overview'); + query: { backendName, rangeFrom, rangeTo, kuery, environment }, + } = useApmParams('/backends/overview'); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); @@ -35,8 +34,6 @@ export function BackendDetailDependenciesTable() { comparisonType, }); - const { backendName } = useApmBackendContext(); - const { data, status } = useFetcher( (callApmApi) => { if (!start || !end) { @@ -44,12 +41,17 @@ export function BackendDetailDependenciesTable() { } return callApmApi({ - endpoint: 'GET /internal/apm/backends/{backendName}/upstream_services', + endpoint: 'GET /internal/apm/backends/upstream_services', params: { - path: { + query: { backendName, + start, + end, + environment, + numBuckets: 20, + offset, + kuery, }, - query: { start, end, environment, numBuckets: 20, offset, kuery }, }, }); }, diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx index cf14145dba82a..3b19e8b6dd920 100644 --- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx +++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_error_rate_chart.tsx @@ -7,7 +7,6 @@ import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { asPercent } from '../../../../common/utils/formatters'; -import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context'; import { useComparison } from '../../../hooks/use_comparison'; import { useFetcher } from '../../../hooks/use_fetcher'; import { useTimeRange } from '../../../hooks/use_time_range'; @@ -25,13 +24,11 @@ export function BackendFailedTransactionRateChart({ }: { height: number; }) { - const { backendName } = useApmBackendContext(); - const theme = useTheme(); const { - query: { kuery, environment, rangeFrom, rangeTo }, - } = useApmParams('/backends/{backendName}/overview'); + query: { backendName, kuery, environment, rangeFrom, rangeTo }, + } = useApmParams('/backends/overview'); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); @@ -44,12 +41,10 @@ export function BackendFailedTransactionRateChart({ } return callApmApi({ - endpoint: 'GET /internal/apm/backends/{backendName}/charts/error_rate', + endpoint: 'GET /internal/apm/backends/charts/error_rate', params: { - path: { - backendName, - }, query: { + backendName, start, end, offset, diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx index 3f5a56d55d823..2e750141257a5 100644 --- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx +++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_latency_chart.tsx @@ -7,7 +7,6 @@ import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { getDurationFormatter } from '../../../../common/utils/formatters'; -import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context'; import { useComparison } from '../../../hooks/use_comparison'; import { useFetcher } from '../../../hooks/use_fetcher'; import { useTimeRange } from '../../../hooks/use_time_range'; @@ -21,13 +20,11 @@ import { import { useApmParams } from '../../../hooks/use_apm_params'; export function BackendLatencyChart({ height }: { height: number }) { - const { backendName } = useApmBackendContext(); - const theme = useTheme(); const { - query: { rangeFrom, rangeTo, kuery, environment }, - } = useApmParams('/backends/{backendName}/overview'); + query: { backendName, rangeFrom, rangeTo, kuery, environment }, + } = useApmParams('/backends/overview'); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); @@ -40,12 +37,10 @@ export function BackendLatencyChart({ height }: { height: number }) { } return callApmApi({ - endpoint: 'GET /internal/apm/backends/{backendName}/charts/latency', + endpoint: 'GET /internal/apm/backends/charts/latency', params: { - path: { - backendName, - }, query: { + backendName, start, end, offset, diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx index f5d9cb7a7a55e..6f201f468a9e3 100644 --- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx +++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_throughput_chart.tsx @@ -7,7 +7,6 @@ import React, { useMemo } from 'react'; import { i18n } from '@kbn/i18n'; import { asTransactionRate } from '../../../../common/utils/formatters'; -import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context'; import { useComparison } from '../../../hooks/use_comparison'; import { useFetcher } from '../../../hooks/use_fetcher'; import { useTimeRange } from '../../../hooks/use_time_range'; @@ -17,13 +16,11 @@ import { useTheme } from '../../../hooks/use_theme'; import { useApmParams } from '../../../hooks/use_apm_params'; export function BackendThroughputChart({ height }: { height: number }) { - const { backendName } = useApmBackendContext(); - const theme = useTheme(); const { - query: { rangeFrom, rangeTo, kuery, environment }, - } = useApmParams('/backends/{backendName}/overview'); + query: { backendName, rangeFrom, rangeTo, kuery, environment }, + } = useApmParams('/backends/overview'); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); @@ -36,12 +33,10 @@ export function BackendThroughputChart({ height }: { height: number }) { } return callApmApi({ - endpoint: 'GET /internal/apm/backends/{backendName}/charts/throughput', + endpoint: 'GET /internal/apm/backends/charts/throughput', params: { - path: { - backendName, - }, query: { + backendName, start, end, offset, diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/index.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/index.tsx index 3b4deac794df0..6823b571e9597 100644 --- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/index.tsx @@ -11,7 +11,6 @@ import React from 'react'; import { EuiSpacer } from '@elastic/eui'; import { EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { ApmBackendContextProvider } from '../../../context/apm_backend/apm_backend_context'; import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb'; import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context'; import { useApmParams } from '../../../hooks/use_apm_params'; @@ -31,8 +30,8 @@ import { useBreakpoints } from '../../../hooks/use_breakpoints'; export function BackendDetailOverview() { const { - path: { backendName }, query: { + backendName, rangeFrom, rangeTo, refreshInterval, @@ -40,7 +39,7 @@ export function BackendDetailOverview() { environment, kuery, }, - } = useApmParams('/backends/{backendName}/overview'); + } = useApmParams('/backends/overview'); const apmRouter = useApmRouter(); @@ -60,9 +59,9 @@ export function BackendDetailOverview() { }, { title: backendName, - href: apmRouter.link('/backends/{backendName}/overview', { - path: { backendName }, + href: apmRouter.link('/backends/overview', { query: { + backendName, rangeFrom, rangeTo, refreshInterval, @@ -82,62 +81,59 @@ export function BackendDetailOverview() { const largeScreenOrSmaller = useBreakpoints().isLarge; return ( - - - - - - - - -

- {i18n.translate( - 'xpack.apm.backendDetailLatencyChartTitle', - { defaultMessage: 'Latency' } - )} -

- - - - - - - -

- {i18n.translate( - 'xpack.apm.backendDetailThroughputChartTitle', - { defaultMessage: 'Throughput' } - )} -

- - - - - - - -

- {i18n.translate( - 'xpack.apm.backendDetailFailedTransactionRateChartTitle', - { defaultMessage: 'Failed transaction rate' } - )} -

- - - - - - - - - - + + + + + + + +

+ {i18n.translate('xpack.apm.backendDetailLatencyChartTitle', { + defaultMessage: 'Latency', + })} +

+ + + + + + + +

+ {i18n.translate( + 'xpack.apm.backendDetailThroughputChartTitle', + { defaultMessage: 'Throughput' } + )} +

+ + + + + + + +

+ {i18n.translate( + 'xpack.apm.backendDetailFailedTransactionRateChartTitle', + { defaultMessage: 'Failed transaction rate' } + )} +

+ + + + + + + + + ); } diff --git a/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx index c214c4348bbe7..b84e8830aae5f 100644 --- a/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx @@ -64,10 +64,10 @@ export function BackendInventoryDependenciesTable() { } const link = ( { if (backendName) { return callApmApi({ - endpoint: 'GET /internal/apm/service-map/backend/{backendName}', + endpoint: 'GET /internal/apm/service-map/backend', params: { - path: { backendName }, query: { + backendName, environment, start, end, @@ -57,12 +57,11 @@ export function BackendContents({ ); const isLoading = status === FETCH_STATUS.LOADING; - const detailsUrl = apmRouter.link('/backends/{backendName}/overview', { - path: { backendName }, - query: query as TypeOf< - ApmRoutes, - '/backends/{backendName}/overview' - >['query'], + const detailsUrl = apmRouter.link('/backends/overview', { + query: { + ...query, + backendName, + } as TypeOf['query'], }); const trackEvent = useUiTracker(); diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx index eea15c0e915f0..208d1a30a46d1 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx @@ -76,10 +76,10 @@ export function ServiceOverviewDependenciesTable({ const itemLink = location.type === NodeType.backend ? ( { diff --git a/x-pack/plugins/apm/public/components/routing/home/index.tsx b/x-pack/plugins/apm/public/components/routing/home/index.tsx index 7372a40a59bbe..025fa8ddcc8a0 100644 --- a/x-pack/plugins/apm/public/components/routing/home/index.tsx +++ b/x-pack/plugins/apm/public/components/routing/home/index.tsx @@ -20,6 +20,7 @@ import { ServiceInventory } from '../../app/service_inventory'; import { ServiceMapHome } from '../../app/service_map'; import { TraceOverview } from '../../app/trace_overview'; import { ApmMainTemplate } from '../templates/apm_main_template'; +import { RedirectToBackendOverviewRouteView } from './redirect_to_backend_overview_route_view'; function page({ path, @@ -109,13 +110,22 @@ export const home = { children: [ { path: '/backends/{backendName}/overview', - element: , + element: , params: t.type({ path: t.type({ backendName: t.string, }), }), }, + { + path: '/backends/overview', + element: , + params: t.type({ + query: t.type({ + backendName: t.string, + }), + }), + }, page({ path: '/backends', title: DependenciesInventoryTitle, diff --git a/x-pack/plugins/apm/public/components/routing/home/redirect_to_backend_overview_route_view.tsx b/x-pack/plugins/apm/public/components/routing/home/redirect_to_backend_overview_route_view.tsx new file mode 100644 index 0000000000000..ef6d04828c19d --- /dev/null +++ b/x-pack/plugins/apm/public/components/routing/home/redirect_to_backend_overview_route_view.tsx @@ -0,0 +1,22 @@ +/* + * 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 qs from 'query-string'; +import React from 'react'; +import { Redirect } from 'react-router-dom'; +import { useApmParams } from '../../../hooks/use_apm_params'; + +export function RedirectToBackendOverviewRouteView() { + const { + path: { backendName }, + query, + } = useApmParams('/backends/{backendName}/overview'); + + const search = qs.stringify({ ...query, backendName }); + + return ; +} diff --git a/x-pack/plugins/apm/public/components/routing/templates/backend_detail_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/backend_detail_template.tsx index 27eb16a0221b7..f87e9a46df584 100644 --- a/x-pack/plugins/apm/public/components/routing/templates/backend_detail_template.tsx +++ b/x-pack/plugins/apm/public/components/routing/templates/backend_detail_template.tsx @@ -7,9 +7,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import React from 'react'; -import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context'; import { ApmMainTemplate } from './apm_main_template'; import { SpanIcon } from '../../shared/span_icon'; +import { useApmParams } from '../../../hooks/use_apm_params'; +import { useTimeRange } from '../../../hooks/use_time_range'; +import { useFetcher } from '../../../hooks/use_fetcher'; interface Props { title: string; @@ -18,11 +20,32 @@ interface Props { export function BackendDetailTemplate({ title, children }: Props) { const { - backendName, - metadata: { data }, - } = useApmBackendContext(); + query: { backendName, rangeFrom, rangeTo }, + } = useApmParams('/backends/overview'); - const metadata = data?.metadata; + const { start, end } = useTimeRange({ rangeFrom, rangeTo }); + + const backendMetadataFetch = useFetcher( + (callApmApi) => { + if (!start || !end) { + return; + } + + return callApmApi({ + endpoint: 'GET /internal/apm/backends/metadata', + params: { + query: { + backendName, + start, + end, + }, + }, + }); + }, + [backendName, start, end] + ); + + const { data: { metadata } = {} } = backendMetadataFetch; return ( = (args) => { return ; }; Example.args = { - backendName: 'postgres', query: { + backendName: 'postgres', environment: 'ENVIRONMENT_ALL', kuery: '', rangeFrom: 'now-15m', rangeTo: 'now', }, - type: 'db', - subtype: 'postgresql', }; diff --git a/x-pack/plugins/apm/public/components/shared/backend_link.tsx b/x-pack/plugins/apm/public/components/shared/backend_link.tsx index 342c668d2efdb..92cad37273b02 100644 --- a/x-pack/plugins/apm/public/components/shared/backend_link.tsx +++ b/x-pack/plugins/apm/public/components/shared/backend_link.tsx @@ -17,15 +17,13 @@ import { SpanIcon } from './span_icon'; const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`; interface BackendLinkProps { - backendName: string; - query: TypeOf['query']; + query: TypeOf['query']; subtype?: string; type?: string; onClick?: React.ComponentProps['onClick']; } export function BackendLink({ - backendName, query, subtype, type, @@ -35,8 +33,7 @@ export function BackendLink({ return ( - {backendName} + {query.backendName} ); diff --git a/x-pack/plugins/apm/public/context/apm_backend/apm_backend_context.tsx b/x-pack/plugins/apm/public/context/apm_backend/apm_backend_context.tsx deleted file mode 100644 index 6093f05c2cb02..0000000000000 --- a/x-pack/plugins/apm/public/context/apm_backend/apm_backend_context.tsx +++ /dev/null @@ -1,74 +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 React, { createContext, useMemo } from 'react'; -import { FETCH_STATUS, useFetcher } from '../../hooks/use_fetcher'; -import { useApmParams } from '../../hooks/use_apm_params'; -import { APIReturnType } from '../../services/rest/createCallApmApi'; -import { useTimeRange } from '../../hooks/use_time_range'; - -export const ApmBackendContext = createContext< - | { - backendName: string; - metadata: { - data?: APIReturnType<'GET /internal/apm/backends/{backendName}/metadata'>; - status?: FETCH_STATUS; - }; - } - | undefined ->(undefined); - -export function ApmBackendContextProvider({ - children, -}: { - children: React.ReactNode; -}) { - const { - path: { backendName }, - query: { rangeFrom, rangeTo }, - } = useApmParams('/backends/{backendName}/overview'); - - const { start, end } = useTimeRange({ rangeFrom, rangeTo }); - - const backendMetadataFetch = useFetcher( - (callApmApi) => { - if (!start || !end) { - return; - } - - return callApmApi({ - endpoint: 'GET /internal/apm/backends/{backendName}/metadata', - params: { - path: { - backendName, - }, - query: { - start, - end, - }, - }, - }); - }, - [backendName, start, end] - ); - - const value = useMemo(() => { - return { - backendName, - metadata: { - data: backendMetadataFetch.data, - status: backendMetadataFetch.status, - }, - }; - }, [backendName, backendMetadataFetch.data, backendMetadataFetch.status]); - - return ( - - {children} - - ); -} diff --git a/x-pack/plugins/apm/public/context/apm_backend/use_apm_backend_context.tsx b/x-pack/plugins/apm/public/context/apm_backend/use_apm_backend_context.tsx deleted file mode 100644 index 5a48014c75662..0000000000000 --- a/x-pack/plugins/apm/public/context/apm_backend/use_apm_backend_context.tsx +++ /dev/null @@ -1,20 +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 { useContext } from 'react'; -import { ApmBackendContext } from './apm_backend_context'; - -export function useApmBackendContext() { - const context = useContext(ApmBackendContext); - - if (!context) { - throw new Error( - 'ApmBackendContext has no set value, did you forget rendering ApmBackendContextProvider?' - ); - } - - return context; -} diff --git a/x-pack/plugins/apm/server/routes/backends.ts b/x-pack/plugins/apm/server/routes/backends.ts index feb4ca8bb978c..03466c7443665 100644 --- a/x-pack/plugins/apm/server/routes/backends.ts +++ b/x-pack/plugins/apm/server/routes/backends.ts @@ -65,13 +65,14 @@ const topBackendsRoute = createApmServerRoute({ }); const upstreamServicesForBackendRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/backends/{backendName}/upstream_services', + endpoint: 'GET /internal/apm/backends/upstream_services', params: t.intersection([ t.type({ - path: t.type({ - backendName: t.string, - }), - query: t.intersection([rangeRt, t.type({ numBuckets: toNumberRt })]), + query: t.intersection([ + t.type({ backendName: t.string }), + rangeRt, + t.type({ numBuckets: toNumberRt }), + ]), }), t.partial({ query: t.intersection([environmentRt, offsetRt, kueryRt]), @@ -83,8 +84,15 @@ const upstreamServicesForBackendRoute = createApmServerRoute({ handler: async (resources) => { const setup = await setupRequest(resources); const { - path: { backendName }, - query: { environment, offset, numBuckets, kuery, start, end }, + query: { + backendName, + environment, + offset, + numBuckets, + kuery, + start, + end, + }, } = resources.params; const opts = { @@ -121,12 +129,9 @@ const upstreamServicesForBackendRoute = createApmServerRoute({ }); const backendMetadataRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/backends/{backendName}/metadata', + endpoint: 'GET /internal/apm/backends/metadata', params: t.type({ - path: t.type({ - backendName: t.string, - }), - query: rangeRt, + query: t.intersection([t.type({ backendName: t.string }), rangeRt]), }), options: { tags: ['access:apm'], @@ -134,9 +139,8 @@ const backendMetadataRoute = createApmServerRoute({ handler: async (resources) => { const setup = await setupRequest(resources); const { params } = resources; - const { backendName } = params.path; - const { start, end } = params.query; + const { backendName, start, end } = params.query; const metadata = await getMetadataForBackend({ backendName, @@ -150,12 +154,15 @@ const backendMetadataRoute = createApmServerRoute({ }); const backendLatencyChartsRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/backends/{backendName}/charts/latency', + endpoint: 'GET /internal/apm/backends/charts/latency', params: t.type({ - path: t.type({ - backendName: t.string, - }), - query: t.intersection([rangeRt, kueryRt, environmentRt, offsetRt]), + query: t.intersection([ + t.type({ backendName: t.string }), + rangeRt, + kueryRt, + environmentRt, + offsetRt, + ]), }), options: { tags: ['access:apm'], @@ -163,8 +170,8 @@ const backendLatencyChartsRoute = createApmServerRoute({ handler: async (resources) => { const setup = await setupRequest(resources); const { params } = resources; - const { backendName } = params.path; - const { kuery, environment, offset, start, end } = params.query; + const { backendName, kuery, environment, offset, start, end } = + params.query; const [currentTimeseries, comparisonTimeseries] = await Promise.all([ getLatencyChartsForBackend({ @@ -193,12 +200,15 @@ const backendLatencyChartsRoute = createApmServerRoute({ }); const backendThroughputChartsRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/backends/{backendName}/charts/throughput', + endpoint: 'GET /internal/apm/backends/charts/throughput', params: t.type({ - path: t.type({ - backendName: t.string, - }), - query: t.intersection([rangeRt, kueryRt, environmentRt, offsetRt]), + query: t.intersection([ + t.type({ backendName: t.string }), + rangeRt, + kueryRt, + environmentRt, + offsetRt, + ]), }), options: { tags: ['access:apm'], @@ -206,8 +216,8 @@ const backendThroughputChartsRoute = createApmServerRoute({ handler: async (resources) => { const setup = await setupRequest(resources); const { params } = resources; - const { backendName } = params.path; - const { kuery, environment, offset, start, end } = params.query; + const { backendName, kuery, environment, offset, start, end } = + params.query; const [currentTimeseries, comparisonTimeseries] = await Promise.all([ getThroughputChartsForBackend({ @@ -236,12 +246,15 @@ const backendThroughputChartsRoute = createApmServerRoute({ }); const backendFailedTransactionRateChartsRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/backends/{backendName}/charts/error_rate', + endpoint: 'GET /internal/apm/backends/charts/error_rate', params: t.type({ - path: t.type({ - backendName: t.string, - }), - query: t.intersection([rangeRt, kueryRt, environmentRt, offsetRt]), + query: t.intersection([ + t.type({ backendName: t.string }), + rangeRt, + kueryRt, + environmentRt, + offsetRt, + ]), }), options: { tags: ['access:apm'], @@ -249,8 +262,8 @@ const backendFailedTransactionRateChartsRoute = createApmServerRoute({ handler: async (resources) => { const setup = await setupRequest(resources); const { params } = resources; - const { backendName } = params.path; - const { kuery, environment, offset, start, end } = params.query; + const { backendName, kuery, environment, offset, start, end } = + params.query; const [currentTimeseries, comparisonTimeseries] = await Promise.all([ getErrorRateChartsForBackend({ diff --git a/x-pack/plugins/apm/server/routes/service_map.ts b/x-pack/plugins/apm/server/routes/service_map.ts index 038f909d7b334..3711ee20d814b 100644 --- a/x-pack/plugins/apm/server/routes/service_map.ts +++ b/x-pack/plugins/apm/server/routes/service_map.ts @@ -114,12 +114,13 @@ const serviceMapServiceNodeRoute = createApmServerRoute({ }); const serviceMapBackendNodeRoute = createApmServerRoute({ - endpoint: 'GET /internal/apm/service-map/backend/{backendName}', + endpoint: 'GET /internal/apm/service-map/backend', params: t.type({ - path: t.type({ - backendName: t.string, - }), - query: t.intersection([environmentRt, rangeRt]), + query: t.intersection([ + t.type({ backendName: t.string }), + environmentRt, + rangeRt, + ]), }), options: { tags: ['access:apm'] }, handler: async (resources) => { @@ -134,8 +135,7 @@ const serviceMapBackendNodeRoute = createApmServerRoute({ const setup = await setupRequest(resources); const { - path: { backendName }, - query: { environment, start, end }, + query: { backendName, environment, start, end }, } = params; return getServiceMapBackendNodeInfo({ diff --git a/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts b/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts index 167b6e1ff6dea..2da57c0a25779 100644 --- a/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts +++ b/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts @@ -76,14 +76,15 @@ export default function serviceMapsApiTests({ getService }: FtrProviderContext) }); }); - describe('/internal/apm/service-map/backend/{backendName}', () => { + describe('/internal/apm/service-map/backend', () => { it('returns an object with nulls', async () => { const q = querystring.stringify({ + backendName: 'postgres', start: metadata.start, end: metadata.end, environment: 'ENVIRONMENT_ALL', }); - const response = await supertest.get(`/internal/apm/service-map/backend/postgres?${q}`); + const response = await supertest.get(`/internal/apm/service-map/backend?${q}`); expect(response.status).to.be(200); @@ -305,14 +306,15 @@ export default function serviceMapsApiTests({ getService }: FtrProviderContext) }); }); - describe('/internal/apm/service-map/backend/{backendName}', () => { + describe('/internal/apm/service-map/backend', () => { it('returns an object with data', async () => { const q = querystring.stringify({ + backendName: 'postgresql', start: metadata.start, end: metadata.end, environment: 'ENVIRONMENT_ALL', }); - const response = await supertest.get(`/internal/apm/service-map/backend/postgresql?${q}`); + const response = await supertest.get(`/internal/apm/service-map/backend?${q}`); expect(response.status).to.be(200); diff --git a/x-pack/test/apm_api_integration/tests/throughput/dependencies_apis.ts b/x-pack/test/apm_api_integration/tests/throughput/dependencies_apis.ts index 22b4486181e62..1aa3ebb7b985b 100644 --- a/x-pack/test/apm_api_integration/tests/throughput/dependencies_apis.ts +++ b/x-pack/test/apm_api_integration/tests/throughput/dependencies_apis.ts @@ -39,21 +39,21 @@ export default function ApiTest({ getService }: FtrProviderContext) { }, }), apmApiClient.readUser({ - endpoint: `GET /internal/apm/backends/{backendName}/charts/throughput`, + endpoint: `GET /internal/apm/backends/charts/throughput`, params: { - path: { backendName: overrides?.backendName || 'elasticsearch' }, query: { ...commonQuery, + backendName: overrides?.backendName || 'elasticsearch', kuery: '', }, }, }), apmApiClient.readUser({ - endpoint: `GET /internal/apm/backends/{backendName}/upstream_services`, + endpoint: `GET /internal/apm/backends/upstream_services`, params: { - path: { backendName: overrides?.backendName || 'elasticsearch' }, query: { ...commonQuery, + backendName: overrides?.backendName || 'elasticsearch', numBuckets: 20, offset: '1d', kuery: '', From 6f779c6d1785ef54c49189409e2e5255b804d4b0 Mon Sep 17 00:00:00 2001 From: Gil Raphaelli Date: Tue, 26 Oct 2021 11:35:26 -0400 Subject: [PATCH 2/4] use separate token for APM (#116315) --- .github/workflows/add-to-apm-project.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/add-to-apm-project.yml b/.github/workflows/add-to-apm-project.yml index a47425ce8eda5..26ff71fbdca8c 100644 --- a/.github/workflows/add-to-apm-project.yml +++ b/.github/workflows/add-to-apm-project.yml @@ -25,4 +25,4 @@ jobs: contentid: ${{ github.event.issue.node_id }} env: PROJECT_ID: "PN_kwDOAGc3Zs0VSg" - GITHUB_TOKEN: ${{ secrets.KIBANAMACHINE_TOKEN }} + GITHUB_TOKEN: ${{ secrets.APM_TECH_KIBANA_USER_TOKEN }} From b17e01dd9a8e77aa45438d89bad60ca2bd4b12b6 Mon Sep 17 00:00:00 2001 From: Giorgos Bamparopoulos Date: Tue, 26 Oct 2021 16:42:32 +0100 Subject: [PATCH 3/4] [APM] Set level for all registered deprecations (#116272) --- x-pack/plugins/apm/server/index.ts | 37 +++++++++++++++++++++--------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/apm/server/index.ts b/x-pack/plugins/apm/server/index.ts index 1ed54be0271dd..6bf3b2cb493f1 100644 --- a/x-pack/plugins/apm/server/index.ts +++ b/x-pack/plugins/apm/server/index.ts @@ -62,23 +62,38 @@ export const config: PluginConfigDescriptor = { deprecations: ({ renameFromRoot, deprecateFromRoot, unusedFromRoot }) => [ renameFromRoot( 'apm_oss.transactionIndices', - 'xpack.apm.indices.transaction' + 'xpack.apm.indices.transaction', + { level: 'warning' } ), - renameFromRoot('apm_oss.spanIndices', 'xpack.apm.indices.span'), - renameFromRoot('apm_oss.errorIndices', 'xpack.apm.indices.error'), - renameFromRoot('apm_oss.metricsIndices', 'xpack.apm.indices.metric'), - renameFromRoot('apm_oss.sourcemapIndices', 'xpack.apm.indices.sourcemap'), - renameFromRoot('apm_oss.onboardingIndices', 'xpack.apm.indices.onboarding'), - deprecateFromRoot('apm_oss.enabled', '8.0.0'), - unusedFromRoot('apm_oss.fleetMode'), - unusedFromRoot('apm_oss.indexPattern'), + renameFromRoot('apm_oss.spanIndices', 'xpack.apm.indices.span', { + level: 'warning', + }), + renameFromRoot('apm_oss.errorIndices', 'xpack.apm.indices.error', { + level: 'warning', + }), + renameFromRoot('apm_oss.metricsIndices', 'xpack.apm.indices.metric', { + level: 'warning', + }), + renameFromRoot('apm_oss.sourcemapIndices', 'xpack.apm.indices.sourcemap', { + level: 'warning', + }), + renameFromRoot( + 'apm_oss.onboardingIndices', + 'xpack.apm.indices.onboarding', + { level: 'warning' } + ), + deprecateFromRoot('apm_oss.enabled', '8.0.0', { level: 'warning' }), + unusedFromRoot('apm_oss.fleetMode', { level: 'warning' }), + unusedFromRoot('apm_oss.indexPattern', { level: 'warning' }), renameFromRoot( 'xpack.apm.maxServiceEnvironments', - `uiSettings.overrides[${maxSuggestions}]` + `uiSettings.overrides[${maxSuggestions}]`, + { level: 'warning' } ), renameFromRoot( 'xpack.apm.maxServiceSelections', - `uiSettings.overrides[${maxSuggestions}]` + `uiSettings.overrides[${maxSuggestions}]`, + { level: 'warning' } ), ], exposeToBrowser: { From 9911883ba4af3a109700a74f6096192c6ed6336e Mon Sep 17 00:00:00 2001 From: Andrew Goldstein Date: Tue, 26 Oct 2021 09:46:01 -0600 Subject: [PATCH 4/4] [Security Solution] Prevents the `Status` badge from stretching in the Alert Details flyout (#116237) ## [Security Solution] Prevents the `Status` badge from stretching in the Alert Details flyout This PR fixes to prevent the `Status` badge from stretching in the Alert Details flyout. ### Screenshots **Before:** ![before](https://user-images.githubusercontent.com/4459398/138806049-895317b6-2990-43f6-b978-dab1711494a5.png) After Chrome `95.0.4638.54`: ![after-chrome](https://user-images.githubusercontent.com/4459398/138806164-ce802982-5c5a-4a30-a906-1583e2ba9939.png) After Firefox `93.0`: ![after-firefox](https://user-images.githubusercontent.com/4459398/138806249-152a6b33-f1b9-4a5b-8607-8da29689d599.png) After Safari `15.0`: ![after-safari](https://user-images.githubusercontent.com/4459398/138806320-45202b3a-1f84-4a4f-8fd0-107523597a22.png) ### Details The fix overrides the default value of `EuiFlexGroup`'s `alignItems` prop, which has a default value of `stretch`, per the image below: ![EuiFlexGroup_alignItems](https://user-images.githubusercontent.com/4459398/138805941-96e06533-8df7-447c-bb74-9278a06d39db.png) --- .../alert_summary_view.test.tsx.snap | 32 +++++++++---------- .../table/field_value_cell.test.tsx | 6 ++++ .../event_details/table/field_value_cell.tsx | 1 + 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap index 772badd80ce53..d97208a500714 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/event_details/__snapshots__/alert_summary_view.test.tsx.snap @@ -136,7 +136,7 @@ exports[`AlertSummaryView Behavior event code renders additional summary rows 1` class="euiTableCellContent flyoutOverviewDescription euiTableCellContent--overflowingContent" >
{ ); }); + test('it aligns items at the start of the group to prevent content from stretching (by default)', () => { + expect(screen.getByTestId(`event-field-${hostIpData.field}`)).toHaveClass( + 'euiFlexGroup--alignItemsFlexStart' + ); + }); + test('it renders link buttons for each of the host ip addresses', () => { expect(screen.getAllByRole('button').length).toBe(hostIpValues.length); }); diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx index dc6c84b8138fe..0685582b33882 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx @@ -37,6 +37,7 @@ export const FieldValueCell = React.memo( }: FieldValueCellProps) => { return (