[APM] use react-redux-request

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts

@@ -113,6 +113,10 @@ export function getWaterfall(
   entryTransaction: Transaction
 ): IWaterfall {
   const items = hits
+    .filter(hit => {
+      const docType = hit.processor.event;
+      return ['span', 'transaction'].includes(docType);
+    })
     .map(addVersion)
     .map(hit => {
       const docType = hit.processor.event;
@@ -122,10 +126,9 @@ export function getWaterfall(
         case 'transaction':
           return getTransactionItem(hit as Transaction);
         default:
-          return null;
+          throw new Error(`Unknown type ${docType}`);
       }
-    })
-    .filter(removeEmpty);
+    });
 
   const entryTransactionItem = getTransactionItem(addVersion(entryTransaction));
   const root = getWaterfallRoot(items, entryTransactionItem);
@@ -137,10 +140,6 @@ export function getWaterfall(
   };
 }
 
-function removeEmpty<T>(value: T | null): value is T {
-  return value !== null;
-}
-
 function addVersion<T extends Transaction | Span>(hit: T): T {
   hit.version = hit.hasOwnProperty('trace') ? 'v2' : 'v1';
   return hit;

x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/index.tsx

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { get } from 'lodash';
-import React, { PureComponent } from 'react';
+import React from 'react';
 // @ts-ignore
 import {
   SERVICE_NAME,
@@ -14,8 +13,11 @@ import {
 } from '../../../../../../common/constants';
 import { Transaction } from '../../../../../../typings/Transaction';
 
+import { RRRRender } from 'react-redux-request';
+import { WaterfallV1Request } from 'x-pack/plugins/apm/public/store/reactReduxRequest/waterfallV1';
+import { WaterfallV2Request } from 'x-pack/plugins/apm/public/store/reactReduxRequest/waterfallV2';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
-import { Span } from '../../../../../../typings/Span';
+import { WaterfallResponse } from 'x-pack/plugins/apm/typings/waterfall';
 // @ts-ignore
 import { loadSpans, loadTrace } from '../../../../../services/rest/apm';
 import { getServiceColors } from './getServiceColors';
@@ -29,107 +31,65 @@ interface Props {
   location: any;
 }
 
-interface State {
-  services: string[];
-  hits: Array<Span | Transaction>;
+interface WaterfallRequestProps {
+  urlParams: IUrlParams;
+  transaction: Transaction;
+  render: RRRRender<WaterfallResponse>;
 }
 
-export class WaterfallContainer extends PureComponent<Props, State> {
-  public state: Readonly<State> = {
-    services: [],
-    hits: []
-  };
-
-  public maybeFetchWaterfall = async (prevProps?: Props) => {
-    const hasTrace = this.props.transaction.hasOwnProperty('trace');
-    if (hasTrace) {
-      this.maybeFetchTrace(prevProps);
-    } else {
-      this.maybeFetchSpans(prevProps);
-    }
-  };
-
-  public maybeFetchSpans = async (prevProps = {} as Partial<Props>) => {
-    const { start, end } = this.props.urlParams;
-    const { start: prevStart, end: prevEnd } =
-      prevProps.urlParams || ({} as IUrlParams);
-
-    const serviceName: string = get(this.props.transaction, SERVICE_NAME);
-    const prevServiceName: string = get(prevProps.transaction, SERVICE_NAME);
-
-    const transactionId: string = get(this.props.transaction, TRANSACTION_ID);
-    const prevTransactionId: string = get(
-      prevProps.transaction,
-      TRANSACTION_ID
+function WaterfallRequest({
+  urlParams,
+  transaction,
+  render
+}: WaterfallRequestProps) {
+  const hasTrace = transaction.hasOwnProperty('trace');
+  if (hasTrace) {
+    return (
+      <WaterfallV2Request
+        urlParams={urlParams}
+        transaction={transaction}
+        render={render}
+      />
     );
-
-    if (
-      serviceName !== prevServiceName ||
-      transactionId !== prevTransactionId ||
-      start !== prevStart ||
-      end !== prevEnd
-    ) {
-      const spans = await loadSpans({
-        serviceName,
-        transactionId,
-        start,
-        end
-      });
-
-      this.setState({
-        hits: [this.props.transaction, ...spans],
-        services: [serviceName]
-      });
-    }
-  };
-
-  public maybeFetchTrace = async (prevProps = {} as Partial<Props>) => {
-    const { start, end } = this.props.urlParams;
-    const { start: prevStart, end: prevEnd } =
-      prevProps.urlParams || ({} as IUrlParams);
-
-    const traceId = get(this.props, `transaction.${TRACE_ID}`);
-    const prevTraceId: string = get(prevProps, `transaction.${TRACE_ID}`);
-
-    if (
-      traceId &&
-      start &&
-      end &&
-      (traceId !== prevTraceId || start !== prevStart || end !== prevEnd)
-    ) {
-      const { hits, services } = await loadTrace({ traceId, start, end });
-      this.setState({ hits, services });
-    }
-  };
-
-  public componentDidMount() {
-    this.maybeFetchWaterfall();
-  }
-
-  public async componentDidUpdate(prevProps: Props) {
-    this.maybeFetchWaterfall(prevProps);
-  }
-
-  public render() {
-    const { location, urlParams, transaction } = this.props;
-    const { hits, services } = this.state;
-    const waterfall = getWaterfall(hits, services, transaction);
-
-    if (!waterfall) {
-      return null;
-    }
-    const serviceColors = getServiceColors(waterfall.services);
-
+  } else {
     return (
-      <div>
-        <ServiceLegends serviceColors={serviceColors} />
-        <Waterfall
-          location={location}
-          serviceColors={serviceColors}
-          urlParams={urlParams}
-          waterfall={waterfall}
-        />
-      </div>
+      <WaterfallV1Request
+        urlParams={urlParams}
+        transaction={transaction}
+        render={render}
+      />
     );
   }
 }
+
+export function WaterfallContainer({
+  location,
+  urlParams,
+  transaction
+}: Props) {
+  return (
+    <WaterfallRequest
+      urlParams={urlParams}
+      transaction={transaction}
+      render={({ data }) => {
+        const waterfall = getWaterfall(data.hits, data.services, transaction);
+        if (!waterfall) {
+          return null;
+        }
+        const serviceColors = getServiceColors(waterfall.services);
+
+        return (
+          <div>
+            <ServiceLegends serviceColors={serviceColors} />
+            <Waterfall
+              location={location}
+              serviceColors={serviceColors}
+              urlParams={urlParams}
+              waterfall={waterfall}
+            />
+          </div>
+        );
+      }}
+    />
+  );
+}

x-pack/plugins/apm/public/store/reactReduxRequest/errorDistribution.js

@@ -20,7 +20,7 @@ export function getErrorDistribution(state) {
 export function ErrorDistributionRequest({ urlParams, render }) {
   const { serviceName, start, end, errorGroupId, kuery } = urlParams;
 
-  if (!(serviceName, start, end, errorGroupId)) {
+  if (!(serviceName && start && end && errorGroupId)) {
     return null;
   }
 

x-pack/plugins/apm/public/store/reactReduxRequest/transactionDistribution.tsx

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-// @ts-ignore
 import { Request } from 'react-redux-request';
 import { IDistributionResponse } from '../../../server/lib/transactions/distribution/get_distribution';
 // @ts-ignore

x-pack/plugins/apm/public/store/reactReduxRequest/waterfallV1.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { get } from 'lodash';
+import React from 'react';
+import { Request, RRRRender } from 'react-redux-request';
+import {
+  SERVICE_NAME,
+  TRANSACTION_ID
+} from 'x-pack/plugins/apm/common/constants';
+import { Span } from 'x-pack/plugins/apm/typings/Span';
+import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
+import { WaterfallResponse } from 'x-pack/plugins/apm/typings/waterfall';
+// @ts-ignore
+import { loadSpans, loadTrace } from '../../services/rest/apm';
+import { IUrlParams } from '../urlParams';
+// @ts-ignore
+import { createInitialDataSelector } from './helpers';
+
+const ID = 'waterfallV1';
+
+interface Props {
+  urlParams: IUrlParams;
+  transaction: Transaction;
+  render: RRRRender<WaterfallResponse>;
+}
+
+export function WaterfallV1Request({ urlParams, transaction, render }: Props) {
+  const { start, end } = urlParams;
+  const transactionId: string = get(transaction, TRANSACTION_ID);
+  const serviceName: string = get(transaction, SERVICE_NAME);
+
+  if (!(serviceName && transactionId && start && end)) {
+    return null;
+  }
+
+  return (
+    <Request<Span[]>
+      id={ID}
+      fn={loadSpans}
+      args={[{ serviceName, start, end, transactionId }]}
+      render={({ status, data, args }) => {
+        const res = {
+          hits: [transaction, ...data],
+          services: [serviceName]
+        };
+
+        return render({ status, data: res, args });
+      }}
+    />
+  );
+}

x-pack/plugins/apm/public/store/reactReduxRequest/waterfallV2.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { get } from 'lodash';
+import React from 'react';
+import { Request, RRRRender } from 'react-redux-request';
+import { TRACE_ID } from 'x-pack/plugins/apm/common/constants';
+import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
+import { WaterfallResponse } from 'x-pack/plugins/apm/typings/waterfall';
+
+// @ts-ignore
+import { loadSpans, loadTrace } from '../../services/rest/apm';
+import { IUrlParams } from '../urlParams';
+// @ts-ignore
+import { createInitialDataSelector } from './helpers';
+
+const ID = 'waterfallV2';
+
+interface Props {
+  urlParams: IUrlParams;
+  transaction: Transaction;
+  render: RRRRender<WaterfallResponse>;
+}
+
+const defaultData = { hits: [], services: [] };
+export function WaterfallV2Request({ urlParams, transaction, render }: Props) {
+  const { start, end } = urlParams;
+  const traceId: string = get(transaction, TRACE_ID);
+
+  if (!(traceId && start && end)) {
+    return null;
+  }
+
+  return (
+    <Request<WaterfallResponse>
+      id={ID}
+      fn={loadTrace}
+      args={[{ traceId, start, end }]}
+      render={({ args, data = defaultData, status }) =>
+        render({ args, data, status })
+      }
+    />
+  );
+}

x-pack/plugins/apm/public/store/rootReducer.ts

@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
 import { reducer } from 'react-redux-request';
 import { combineReducers } from 'redux';
 import { StringMap } from '../../typings/common';

x-pack/plugins/apm/server/lib/helpers/transaction_group_query.ts

@@ -31,11 +31,9 @@ interface ITransactionGroupBucket {
   };
   sample: {
     hits: {
-      hits: [
-        {
-          _source: ITransactionGroupSample;
-        }
-      ];
+      hits: Array<{
+        _source: ITransactionGroupSample;
+      }>;
     };
   };
 }

x-pack/plugins/apm/server/lib/traces/get_trace.ts

@@ -5,21 +5,17 @@
  */
 
 import { SearchParams, SearchResponse } from 'elasticsearch';
+import { WaterfallResponse } from 'x-pack/plugins/apm/typings/waterfall';
 import { SERVICE_NAME, TRACE_ID } from '../../../common/constants';
 import { TermsAggsBucket } from '../../../typings/elasticsearch';
 import { Span } from '../../../typings/Span';
 import { Transaction } from '../../../typings/Transaction';
 import { Setup } from '../helpers/setup_request';
 
-export interface TraceResponse {
-  services: string[];
-  hits: Array<Transaction | Span>;
-}
-
 export async function getTrace(
   traceId: string,
   setup: Setup
-): Promise<TraceResponse> {
+): Promise<WaterfallResponse> {
   const { start, end, client, config } = setup;
 
   const params: SearchParams = {