[APM] Don't redirect to default sample before data has been loaded (#39069) (#39119)

Fixes an issue w/ the transaction sample redirect being too aggressive & redirecting to the default sample before the data has been fully loaded. This makes deeplinking to samples unreliable.
This commit is contained in:
Dario Gieselaar 2019-06-17 22:44:47 +02:00 committed by GitHub
parent eb5c780e77
commit 5163868786
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 4 deletions

View file

@ -90,6 +90,7 @@ const getFormatYLong = (transactionType: string | undefined) => (t: number) => {
interface Props {
distribution?: ITransactionDistributionAPIResponse;
urlParams: IUrlParams;
loading: boolean;
}
export const TransactionDistribution: FunctionComponent<Props> = (
@ -97,7 +98,8 @@ export const TransactionDistribution: FunctionComponent<Props> = (
) => {
const {
distribution,
urlParams: { transactionId, traceId, transactionType }
urlParams: { transactionId, traceId, transactionType },
loading
} = props;
const formatYShort = useCallback(getFormatYShort(transactionType), [
@ -125,11 +127,14 @@ export const TransactionDistribution: FunctionComponent<Props> = (
})
});
},
[distribution]
[distribution, loading]
);
useEffect(
() => {
if (loading) {
return;
}
const selectedSampleIsAvailable = distribution
? !!distribution.buckets.find(
bucket =>
@ -145,7 +150,7 @@ export const TransactionDistribution: FunctionComponent<Props> = (
redirectToDefaultSample();
}
},
[distribution, transactionId, traceId, redirectToDefaultSample]
[distribution, transactionId, traceId, redirectToDefaultSample, loading]
);
if (!distribution || !distribution.totalHits || !traceId || !transactionId) {

View file

@ -16,11 +16,15 @@ import { TransactionDistribution } from './Distribution';
import { Transaction } from './Transaction';
import { useLocation } from '../../../hooks/useLocation';
import { useUrlParams } from '../../../hooks/useUrlParams';
import { FETCH_STATUS } from '../../../hooks/useFetcher';
export function TransactionDetails() {
const location = useLocation();
const { urlParams } = useUrlParams();
const { data: distributionData } = useTransactionDistribution(urlParams);
const {
data: distributionData,
status: distributionStatus
} = useTransactionDistribution(urlParams);
const { data: transactionDetailsChartsData } = useTransactionDetailsCharts(
urlParams
);
@ -49,6 +53,10 @@ export function TransactionDetails() {
<EuiPanel>
<TransactionDistribution
distribution={distributionData}
loading={
distributionStatus === FETCH_STATUS.LOADING ||
distributionStatus === undefined
}
urlParams={urlParams}
/>
</EuiPanel>