[APM] Add useFetcher to serviceDetailsView

sorenlouv · Mar 21, 2019 · 350b2fc · 350b2fc
1 parent 12571f5
commit 350b2fc
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 109 deletions.
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
@@ -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
@@ -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
@@ -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
diff --git 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 {