From 350b2fc3e771e993e67a4ddcf09ca127cd5cc4d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Louv-Jansen?= <sorenlouv@gmail.com>
Date: Tue, 19 Mar 2019 10:13:30 +0100
Subject: [PATCH] [APM] Add useFetcher to serviceDetailsView

---
 .../ServiceIntegrations/index.tsx             |  4 +-
 .../ServiceIntegrations/view.tsx              |  4 +-
 .../components/app/ServiceDetails/view.tsx    | 77 ++++++++++---------
 .../reactReduxRequest/serviceDetails.tsx      | 51 ------------
 x-pack/plugins/apm/public/store/urlParams.ts  | 16 +---
 5 files changed, 43 insertions(+), 109 deletions(-)
 delete mode 100644 x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails.tsx

diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
index 7d51ba9b1184..3e6b8a6f2bac 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/index.tsx
@@ -5,15 +5,13 @@
  */
 
 import { connect } from 'react-redux';
-import { getServiceDetails } from 'x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails';
 import { IReduxState } from 'x-pack/plugins/apm/public/store/rootReducer';
 import { selectIsMLAvailable } from 'x-pack/plugins/apm/public/store/selectors/license';
 import { ServiceIntegrationsView } from './view';
 
 function mapStateToProps(state = {} as IReduxState) {
   return {
-    mlAvailable: selectIsMLAvailable(state),
-    serviceDetails: getServiceDetails(state).data
+    mlAvailable: selectIsMLAvailable(state)
   };
 }
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/view.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/view.tsx
index 8e701679fc71..336f1b1065ba 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/view.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/view.tsx
@@ -22,9 +22,7 @@ import { WatcherFlyout } from './WatcherFlyout';
 export interface ServiceIntegrationProps {
   mlAvailable: boolean;
   location: Location;
-  serviceDetails: {
-    types: string[];
-  };
+  transactionTypes: string[];
   urlParams: IUrlParams;
 }
 interface ServiceIntegrationState {
diff --git a/x-pack/plugins/apm/public/components/app/ServiceDetails/view.tsx b/x-pack/plugins/apm/public/components/app/ServiceDetails/view.tsx
index 799fa4cdb7e4..5b543f6b0222 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/view.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceDetails/view.tsx
@@ -7,52 +7,55 @@
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
 import { Location } from 'history';
 import React from 'react';
-import { ServiceDetailsRequest } from 'x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
+import { useFetcher } from '../../../hooks/useFetcher';
+import { loadServiceDetails } from '../../../services/rest/apm/services';
 // @ts-ignore
 import { FilterBar } from '../../shared/FilterBar';
 import { ServiceDetailTabs } from './ServiceDetailTabs';
 import { ServiceIntegrations } from './ServiceIntegrations';
 
-interface ServiceDetailsProps {
+interface Props {
   urlParams: IUrlParams;
   location: Location;
 }
 
-export class ServiceDetailsView extends React.Component<ServiceDetailsProps> {
-  public render() {
-    const { urlParams, location } = this.props;
-    return (
-      <React.Fragment>
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>{urlParams.serviceName}</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ServiceIntegrations
-              location={this.props.location}
-              urlParams={urlParams}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiSpacer />
-
-        <FilterBar />
-
-        <ServiceDetailsRequest
-          urlParams={urlParams}
-          render={({ data }) => (
-            <ServiceDetailTabs
-              location={location}
-              urlParams={urlParams}
-              transactionTypes={data.types}
-            />
-          )}
-        />
-      </React.Fragment>
-    );
+export function ServiceDetailsView({ urlParams, location }: Props) {
+  const { serviceName, start, end, kuery } = urlParams;
+  const { data: serviceDetailsData } = useFetcher(loadServiceDetails, [
+    { serviceName, start, end, kuery }
+  ]);
+
+  if (!serviceDetailsData) {
+    return null;
   }
+
+  return (
+    <React.Fragment>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem>
+          <EuiTitle size="l">
+            <h1>{urlParams.serviceName}</h1>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <ServiceIntegrations
+            transactionTypes={serviceDetailsData.types}
+            location={location}
+            urlParams={urlParams}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+
+      <FilterBar />
+
+      <ServiceDetailTabs
+        location={location}
+        urlParams={urlParams}
+        transactionTypes={serviceDetailsData.types}
+      />
+    </React.Fragment>
+  );
 }
diff --git a/x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails.tsx b/x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails.tsx
deleted file mode 100644
index 274f620c7f93..000000000000
--- a/x-pack/plugins/apm/public/store/reactReduxRequest/serviceDetails.tsx
+++ /dev/null
@@ -1,51 +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 { first, get } from 'lodash';
-import React from 'react';
-import { Request, RRRRender } from 'react-redux-request';
-import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
-import { ServiceAPIResponse } from 'x-pack/plugins/apm/server/lib/services/get_service';
-import { loadServiceDetails } from '../../services/rest/apm/services';
-import { IReduxState } from '../rootReducer';
-import { createInitialDataSelector } from './helpers';
-
-const ID = 'serviceDetails';
-const INITIAL_DATA = { types: [] };
-const withInitialData = createInitialDataSelector(INITIAL_DATA);
-
-export function getServiceDetails(state: IReduxState) {
-  return withInitialData(state.reactReduxRequest[ID]);
-}
-
-export function getDefaultTransactionType(state: IReduxState) {
-  const types: string[] = get(state.reactReduxRequest[ID], 'data.types');
-  return first(types);
-}
-
-export function ServiceDetailsRequest({
-  urlParams,
-  render
-}: {
-  urlParams: IUrlParams;
-  render: RRRRender<ServiceAPIResponse>;
-}) {
-  const { serviceName, start, end, kuery } = urlParams;
-
-  if (!(serviceName && start && end)) {
-    return null;
-  }
-
-  return (
-    <Request
-      id={ID}
-      fn={loadServiceDetails}
-      args={[{ serviceName, start, end, kuery }]}
-      selector={getServiceDetails}
-      render={render}
-    />
-  );
-}
diff --git a/x-pack/plugins/apm/public/store/urlParams.ts b/x-pack/plugins/apm/public/store/urlParams.ts
index 9b15c994e283..27cb3ea61691 100644
--- a/x-pack/plugins/apm/public/store/urlParams.ts
+++ b/x-pack/plugins/apm/public/store/urlParams.ts
@@ -13,7 +13,6 @@ import {
   toQuery
 } from '../components/shared/Links/url_helpers';
 import { LOCATION_UPDATE } from './location';
-import { getDefaultTransactionType } from './reactReduxRequest/serviceDetails';
 import { getDefaultDistributionSample } from './reactReduxRequest/transactionDistribution';
 import { IReduxState } from './rootReducer';
 
@@ -189,20 +188,7 @@ export function updateTimePicker(time: TimeUpdate) {
 // Selectors
 export const getUrlParams = createSelector(
   (state: IReduxState) => state.urlParams,
-  getDefaultTransactionType,
-  getDefaultDistributionSample,
-  (
-    urlParams,
-    transactionType: string,
-    { traceId, transactionId }
-  ): IUrlParams => {
-    return {
-      transactionType,
-      transactionId,
-      traceId,
-      ...urlParams
-    };
-  }
+  urlParams => urlParams
 );
 
 export interface IUrlParams {