Skip to content

Commit

Permalink
[ML] APM Latency Correlations: Fix empty state (elastic#109813)
Browse files Browse the repository at this point in the history
- Correctly renders the empty chart state when no data is available.
- Hides the "Click drag to select" and trace samples message when the chart shows an empty state to avoid redundant info.
- Adds jest unit tests that would fail with the previously visible loading indicators.
- Fix a bug with cancelling search strategies.
  • Loading branch information
walterra authored and kibanamachine committed Aug 27, 2021
1 parent 62f1770 commit f4a83a0
Show file tree
Hide file tree
Showing 15 changed files with 621 additions and 300 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,12 @@ export interface AsyncSearchProviderProgress {
loadedFieldValuePairs: number;
loadedHistograms: number;
}

export interface SearchServiceRawResponse {
ccsWarning: boolean;
log: string[];
overallHistogram?: HistogramItem[];
percentileThresholdValue?: number;
took: number;
values: SearchServiceValue[];
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ export function CorrelationsEmptyStatePrompt() {
id="xpack.apm.correlations.noCorrelationsTextLine1"
defaultMessage="Correlations will only be identified if they have significant impact."
/>
</p>
<p>
<br />
<FormattedMessage
id="xpack.apm.correlations.noCorrelationsTextLine2"
defaultMessage="Try selecting another time range or remove any added filter."
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import { CorrelationsLog } from './correlations_log';
import { CorrelationsEmptyStatePrompt } from './empty_state_prompt';
import { CrossClusterSearchCompatibilityWarning } from './cross_cluster_search_warning';
import { CorrelationsProgressControls } from './progress_controls';
import type { SearchServiceParams } from '../../../../common/search_strategies/correlations/types';
import type { FailedTransactionsCorrelationValue } from '../../../../common/search_strategies/failure_correlations/types';
import { Summary } from '../../shared/Summary';
import { asPercent } from '../../../../common/utils/formatters';
Expand Down Expand Up @@ -70,16 +69,6 @@ export function FailedTransactionsCorrelations({

const inspectEnabled = uiSettings.get<boolean>(enableInspectEsQueries);

const searchServicePrams: SearchServiceParams = {
environment,
kuery,
serviceName,
transactionName,
transactionType,
start,
end,
};

const result = useFailedTransactionsCorrelationsFetcher();

const {
Expand All @@ -93,26 +82,30 @@ export function FailedTransactionsCorrelations({
} = result;

const startFetchHandler = useCallback(() => {
startFetch(searchServicePrams);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [environment, serviceName, kuery, start, end]);
startFetch({
environment,
kuery,
serviceName,
transactionName,
transactionType,
start,
end,
});
}, [
startFetch,
environment,
serviceName,
transactionName,
transactionType,
kuery,
start,
end,
]);

// start fetching on load
// we want this effect to execute exactly once after the component mounts
useEffect(() => {
if (isRunning) {
cancelFetch();
}

startFetchHandler();

return () => {
// cancel any running async partial request when unmounting the component
// we want this effect to execute exactly once after the component mounts
cancelFetch();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startFetchHandler]);
return cancelFetch;
}, [cancelFetch, startFetchHandler]);

const [
selectedSignificantTerm,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { render, screen, waitFor } from '@testing-library/react';
import { createMemoryHistory } from 'history';
import React, { ReactNode } from 'react';
import { of } from 'rxjs';

import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';

import { CoreStart } from 'kibana/public';
import { merge } from 'lodash';
import { dataPluginMock } from 'src/plugins/data/public/mocks';
import type { IKibanaSearchResponse } from 'src/plugins/data/public';
import { EuiThemeProvider } from 'src/plugins/kibana_react/common';
import { createKibanaReactContext } from 'src/plugins/kibana_react/public';
import type { SearchServiceRawResponse } from '../../../../common/search_strategies/correlations/types';
import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
import { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plugin_context';
import {
mockApmPluginContextValue,
MockApmPluginContextWrapper,
} from '../../../context/apm_plugin/mock_apm_plugin_context';
import { fromQuery } from '../../shared/Links/url_helpers';

import { LatencyCorrelations } from './latency_correlations';

function Wrapper({
children,
dataSearchResponse,
}: {
children?: ReactNode;
dataSearchResponse: IKibanaSearchResponse<SearchServiceRawResponse>;
}) {
const mockDataSearch = jest.fn(() => of(dataSearchResponse));

const dataPluginMockStart = dataPluginMock.createStartContract();
const KibanaReactContext = createKibanaReactContext({
data: {
...dataPluginMockStart,
search: {
...dataPluginMockStart.search,
search: mockDataSearch,
},
},
usageCollection: { reportUiCounter: () => {} },
} as Partial<CoreStart>);

const httpGet = jest.fn();

const history = createMemoryHistory();
jest.spyOn(history, 'push');
jest.spyOn(history, 'replace');

history.replace({
pathname: '/services/the-service-name/transactions/view',
search: fromQuery({ transactionName: 'the-transaction-name' }),
});

const mockPluginContext = (merge({}, mockApmPluginContextValue, {
core: { http: { get: httpGet } },
}) as unknown) as ApmPluginContextValue;

return (
<IntlProvider locale="en">
<EuiThemeProvider darkMode={false}>
<KibanaReactContext.Provider>
<MockApmPluginContextWrapper
history={history}
value={mockPluginContext}
>
<MockUrlParamsContextProvider
params={{
rangeFrom: 'now-15m',
rangeTo: 'now',
start: 'mystart',
end: 'myend',
}}
>
{children}
</MockUrlParamsContextProvider>
</MockApmPluginContextWrapper>
</KibanaReactContext.Provider>
</EuiThemeProvider>
</IntlProvider>
);
}

describe('correlations', () => {
describe('LatencyCorrelations', () => {
it('shows loading indicator when the service is running and returned no results yet', async () => {
render(
<Wrapper
dataSearchResponse={{
isRunning: true,
rawResponse: { ccsWarning: false, took: 1234, values: [], log: [] },
}}
>
<LatencyCorrelations onFilter={jest.fn()} />
</Wrapper>
);

await waitFor(() => {
expect(screen.getByTestId('apmCorrelationsChart')).toBeInTheDocument();
expect(screen.getByTestId('loading')).toBeInTheDocument();
});
});

it("doesn't show loading indicator when the service isn't running", async () => {
render(
<Wrapper
dataSearchResponse={{
isRunning: false,
rawResponse: { ccsWarning: false, took: 1234, values: [], log: [] },
}}
>
<LatencyCorrelations onFilter={jest.fn()} />
</Wrapper>
);

await waitFor(() => {
expect(screen.getByTestId('apmCorrelationsChart')).toBeInTheDocument();
expect(screen.queryByTestId('loading')).toBeNull(); // it doesn't exist
});
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {

const {
query: { kuery, environment, rangeFrom, rangeTo },
} = useApmParams('/services/:serviceName');
} = useApmParams('/services/:serviceName/transactions/view');

const { urlParams } = useUrlParams();

Expand Down Expand Up @@ -95,25 +95,21 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
end,
percentileThreshold: DEFAULT_PERCENTILE_THRESHOLD,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [environment, serviceName, kuery, start, end]);
}, [
startFetch,
environment,
serviceName,
transactionName,
transactionType,
kuery,
start,
end,
]);

// start fetching on load
// we want this effect to execute exactly once after the component mounts
useEffect(() => {
if (isRunning) {
cancelFetch();
}

startFetchHandler();

return () => {
// cancel any running async partial request when unmounting the component
// we want this effect to execute exactly once after the component mounts
cancelFetch();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [startFetchHandler]);
return cancelFetch;
}, [cancelFetch, startFetchHandler]);

useEffect(() => {
if (isErrorMessage(error)) {
Expand Down

This file was deleted.

Loading

0 comments on commit f4a83a0

Please sign in to comment.