Skip to content

Commit

Permalink
Merge pull request #12 from sqren/use-fetcher-service-details-view
Browse files Browse the repository at this point in the history
[APM] useFetcher (III):  Add useFetcher to serviceDetailsView
  • Loading branch information
sorenlouv authored Mar 21, 2019
2 parents 12571f5 + 350b2fc commit 70c0fb6
Show file tree
Hide file tree
Showing 5 changed files with 43 additions and 109 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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)
};
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ import { WatcherFlyout } from './WatcherFlyout';
export interface ServiceIntegrationProps {
mlAvailable: boolean;
location: Location;
serviceDetails: {
types: string[];
};
transactionTypes: string[];
urlParams: IUrlParams;
}
interface ServiceIntegrationState {
Expand Down
77 changes: 40 additions & 37 deletions x-pack/plugins/apm/public/components/app/ServiceDetails/view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

This file was deleted.

16 changes: 1 addition & 15 deletions x-pack/plugins/apm/public/store/urlParams.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 70c0fb6

Please sign in to comment.