From 84e1af4ab816ef8120a3bf0897f1954b613bbdad Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 9 Jun 2021 11:50:58 -0400 Subject: [PATCH] [APM] Add link-to/transaction route (#101731) (#101754) Co-authored-by: Dario Gieselaar --- .../components/app/transaction_link/index.tsx | 67 +++++++++++++++++++ .../components/routing/apm_route_config.tsx | 7 ++ .../lib/transactions/get_transaction/index.ts | 10 +-- x-pack/plugins/apm/server/routes/traces.ts | 20 +++++- 4 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/transaction_link/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/transaction_link/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_link/index.tsx new file mode 100644 index 00000000000000..c6394f09b0d3cf --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/transaction_link/index.tsx @@ -0,0 +1,67 @@ +/* + * 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 { EuiEmptyPrompt } from '@elastic/eui'; +import React from 'react'; +import { Redirect, RouteComponentProps } from 'react-router-dom'; +import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common'; +import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; +import { useUrlParams } from '../../../context/url_params_context/use_url_params'; +import { getRedirectToTransactionDetailPageUrl } from '../TraceLink/get_redirect_to_transaction_detail_page_url'; + +const CentralizedContainer = euiStyled.div` + height: 100%; + display: flex; +`; + +export function TransactionLink({ + match, +}: RouteComponentProps<{ transactionId: string }>) { + const { transactionId } = match.params; + const { urlParams } = useUrlParams(); + const { rangeFrom, rangeTo } = urlParams; + + const { data = { transaction: null }, status } = useFetcher( + (callApmApi) => { + if (transactionId) { + return callApmApi({ + endpoint: 'GET /api/apm/transactions/{transactionId}', + params: { + path: { + transactionId, + }, + }, + }); + } + }, + [transactionId] + ); + if (transactionId && status === FETCH_STATUS.SUCCESS) { + if (data.transaction) { + return ( + + ); + } + + return ; + } + + return ( + + Fetching transaction...} + /> + + ); +} diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx index 09c25ee4557c56..40d8b707b82920 100644 --- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx +++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx @@ -20,6 +20,7 @@ import { AnomalyDetection } from '../app/Settings/anomaly_detection'; import { ApmIndices } from '../app/Settings/ApmIndices'; import { CustomizeUI } from '../app/Settings/CustomizeUI'; import { TraceLink } from '../app/TraceLink'; +import { TransactionLink } from '../app/transaction_link'; import { TransactionDetails } from '../app/transaction_details'; import { enableServiceOverview } from '../../../common/ui_settings_keys'; import { redirectTo } from './redirect_to'; @@ -510,6 +511,12 @@ export const apmRouteConfig: APMRouteDefinition[] = [ component: TraceLink, breadcrumb: null, }, + { + exact: true, + path: '/link-to/transaction/:transactionId', + component: TransactionLink, + breadcrumb: null, + }, ]; function RedirectToDefaultServiceRouteView( diff --git a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts index b4323ae7f51e28..6987ef07577348 100644 --- a/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts +++ b/x-pack/plugins/apm/server/lib/transactions/get_transaction/index.ts @@ -21,11 +21,11 @@ export function getTransaction({ setup, }: { transactionId: string; - traceId: string; - setup: Setup & SetupTimeRange; + traceId?: string; + setup: Setup | (Setup & SetupTimeRange); }) { return withApmSpan('get_transaction', async () => { - const { start, end, apmEventClient } = setup; + const { apmEventClient } = setup; const resp = await apmEventClient.search({ apm: { @@ -37,8 +37,8 @@ export function getTransaction({ bool: { filter: asMutableArray([ { term: { [TRANSACTION_ID]: transactionId } }, - { term: { [TRACE_ID]: traceId } }, - ...rangeQuery(start, end), + ...(traceId ? [{ term: { [TRACE_ID]: traceId } }] : []), + ...('start' in setup ? rangeQuery(setup.start, setup.end) : []), ]), }, }, diff --git a/x-pack/plugins/apm/server/routes/traces.ts b/x-pack/plugins/apm/server/routes/traces.ts index dd392982b02fd2..7fce04644f2205 100644 --- a/x-pack/plugins/apm/server/routes/traces.ts +++ b/x-pack/plugins/apm/server/routes/traces.ts @@ -14,6 +14,7 @@ import { environmentRt, kueryRt, rangeRt } from './default_api_types'; import { getSearchAggregatedTransactions } from '../lib/helpers/aggregated_transactions'; import { getRootTransactionByTraceId } from '../lib/transactions/get_transaction_by_trace'; import { createApmServerRouteRepository } from './create_apm_server_route_repository'; +import { getTransaction } from '../lib/transactions/get_transaction'; const tracesRoute = createApmServerRoute({ endpoint: 'GET /api/apm/traces', @@ -70,7 +71,24 @@ const rootTransactionByTraceIdRoute = createApmServerRoute({ }, }); +const transactionByIdRoute = createApmServerRoute({ + endpoint: 'GET /api/apm/transactions/{transactionId}', + params: t.type({ + path: t.type({ + transactionId: t.string, + }), + }), + options: { tags: ['access:apm'] }, + handler: async (resources) => { + const { params } = resources; + const { transactionId } = params.path; + const setup = await setupRequest(resources); + return { transaction: await getTransaction({ transactionId, setup }) }; + }, +}); + export const traceRouteRepository = createApmServerRouteRepository() .add(tracesByIdRoute) .add(tracesRoute) - .add(rootTransactionByTraceIdRoute); + .add(rootTransactionByTraceIdRoute) + .add(transactionByIdRoute);