{urlParams.transactionName}
@@ -44,7 +39,7 @@ export function TransactionDetailsView({
) => (
+ render={({ data }: RRRRenderResponse) => (
) => (
+ render={({ data }) => (
) => {
+ render={({ data: transaction }) => {
return (
- {
+ return (
+
+ );
+ }}
/>
);
}}
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionLink.tsx b/x-pack/plugins/apm/public/components/shared/TransactionLink.tsx
index a78131a4c352b..eab7735b5073e 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionLink.tsx
+++ b/x-pack/plugins/apm/public/components/shared/TransactionLink.tsx
@@ -9,7 +9,7 @@ import { Transaction } from '../../../typings/Transaction';
import { KibanaLink, legacyEncodeURIComponent } from '../../utils/url';
interface TransactionLinkProps {
- transaction: Transaction;
+ transaction?: Transaction;
}
/**
diff --git a/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetails.js b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetails.tsx
similarity index 68%
rename from x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetails.js
rename to x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetails.tsx
index 887bb2a16dcbe..1bf8dc5e29c77 100644
--- a/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetails.js
+++ b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDetails.tsx
@@ -5,19 +5,29 @@
*/
import React from 'react';
-import { createInitialDataSelector } from './helpers';
-import { Request } from 'react-redux-request';
+import { Request, RRRRender } from 'react-redux-request';
+import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
import { loadTransaction } from '../../services/rest/apm';
+import { IReduxState } from '../rootReducer';
+import { IUrlParams } from '../urlParams';
+// @ts-ignore
+import { createInitialDataSelector } from './helpers';
const ID = 'transactionDetails';
const INITIAL_DATA = {};
const withInitialData = createInitialDataSelector(INITIAL_DATA);
-export function getTransactionDetails(state) {
+export function getTransactionDetails(state: IReduxState) {
return withInitialData(state.reactReduxRequest[ID]);
}
-export function TransactionDetailsRequest({ urlParams, render }) {
+export function TransactionDetailsRequest({
+ urlParams,
+ render
+}: {
+ urlParams: IUrlParams;
+ render: RRRRender;
+}) {
const { serviceName, start, end, transactionId, traceId, kuery } = urlParams;
if (!(serviceName && start && end && transactionId)) {
diff --git a/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDistribution.tsx b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDistribution.tsx
index 26f2d46add30c..b52644d6881d5 100644
--- a/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDistribution.tsx
+++ b/x-pack/plugins/apm/public/store/reactReduxRequest/transactionDistribution.tsx
@@ -5,7 +5,7 @@
*/
import React from 'react';
-import { Request, RRRRenderArgs } from 'react-redux-request';
+import { Request, RRRRender, RRRRenderResponse } from 'react-redux-request';
import { IDistributionResponse } from '../../../server/lib/transactions/distribution/get_distribution';
import { loadTransactionDistribution } from '../../services/rest/apm';
import { IReduxState } from '../rootReducer';
@@ -17,13 +17,9 @@ const ID = 'transactionDistribution';
const INITIAL_DATA = { buckets: [], totalHits: 0 };
const withInitialData = createInitialDataSelector(INITIAL_DATA);
-interface RrrResponse {
- data: T;
-}
-
export function getTransactionDistribution(
state: IReduxState
-): RrrResponse {
+): RRRRenderResponse {
return withInitialData(state.reactReduxRequest[ID]);
}
@@ -41,7 +37,7 @@ export function TransactionDistributionRequest({
render
}: {
urlParams: IUrlParams;
- render: (args: RRRRenderArgs) => any;
+ render: RRRRender;
}) {
const { serviceName, start, end, transactionName, kuery } = urlParams;
diff --git a/x-pack/plugins/apm/public/store/reactReduxRequest/waterfall.tsx b/x-pack/plugins/apm/public/store/reactReduxRequest/waterfall.tsx
new file mode 100644
index 0000000000000..d291986e3bce3
--- /dev/null
+++ b/x-pack/plugins/apm/public/store/reactReduxRequest/waterfall.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { RRRRender } from 'react-redux-request';
+import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
+import { WaterfallResponse } from 'x-pack/plugins/apm/typings/waterfall';
+import {
+ getWaterfall,
+ IWaterfall
+} from '../../components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+import { IUrlParams } from '../urlParams';
+import { WaterfallV1Request } from './waterfallV1';
+import { WaterfallV2Request } from './waterfallV2';
+
+interface WaterfallV1OrV2Props {
+ urlParams: IUrlParams;
+ transaction: Transaction;
+ render: RRRRender;
+}
+
+function WaterfallV1OrV2({
+ urlParams,
+ transaction,
+ render
+}: WaterfallV1OrV2Props) {
+ const hasTrace = transaction.hasOwnProperty('trace');
+ if (hasTrace) {
+ return (
+
+ );
+ } else {
+ return (
+
+ );
+ }
+}
+
+interface WaterfallRequestProps {
+ urlParams: IUrlParams;
+ transaction: Transaction;
+ render: RRRRender;
+}
+
+export function WaterfallRequest({
+ urlParams,
+ transaction,
+ render
+}: WaterfallRequestProps) {
+ return (
+ {
+ const waterfall = getWaterfall(data.hits, data.services, transaction);
+ return render({ status, args, data: waterfall });
+ }}
+ />
+ );
+}
diff --git a/x-pack/plugins/apm/public/store/selectors/waterfall.ts b/x-pack/plugins/apm/public/store/selectors/waterfall.ts
deleted file mode 100644
index 632a3c001b387..0000000000000
--- a/x-pack/plugins/apm/public/store/selectors/waterfall.ts
+++ /dev/null
@@ -1,47 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { RRRRenderArgs } from 'react-redux-request';
-import { createSelector, ParametricSelector } from 'reselect';
-import { TransactionV2 } from '../../../typings/Transaction';
-import { WaterfallResponse } from '../../../typings/waterfall';
-import { ID as v1ID } from '../reactReduxRequest/waterfallV1';
-import { ID as v2ID } from '../reactReduxRequest/waterfallV2';
-
-interface ReduxState {
- reactReduxRequest: {
- [v1ID]?: RRRRenderArgs;
- [v2ID]?: RRRRenderArgs;
- };
-}
-
-export const selectWaterfall: ParametricSelector<
- ReduxState,
- any,
- WaterfallResponse | null
-> = state => {
- const waterfall =
- state.reactReduxRequest[v1ID] || state.reactReduxRequest[v2ID];
-
- if (!waterfall || !waterfall.data) {
- return null;
- }
-
- return waterfall.data;
-};
-
-export const selectWaterfallRoot = createSelector(
- [selectWaterfall],
- waterfall => {
- if (!waterfall || !waterfall.hits) {
- return;
- }
-
- return waterfall.hits.find(
- hit => hit.version === 'v2' && !hit.parent
- ) as TransactionV2;
- }
-);
diff --git a/x-pack/plugins/apm/typings/react-redux-request.d.ts b/x-pack/plugins/apm/typings/react-redux-request.d.ts
index abee82e2f6754..23a3b7578772c 100644
--- a/x-pack/plugins/apm/typings/react-redux-request.d.ts
+++ b/x-pack/plugins/apm/typings/react-redux-request.d.ts
@@ -9,14 +9,14 @@
declare module 'react-redux-request' {
import React from 'react';
- export interface RRRRenderArgs {
+ export interface RRRRenderResponse {
status: 'SUCCESS' | 'LOADING' | 'FAILURE';
data: T;
args: P;
}
export type RRRRender = (
- args: RRRRenderArgs
+ res: RRRRenderResponse
) => JSX.Element | null;
export interface RequestProps {