[ML] APM Latency Correlations: Fix empty state (#109813) (#110398)

- 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.

Co-authored-by: Walter Rafelsberger <walter@elastic.co>

x-pack/plugins/apm/common/search_strategies/correlations/types.ts

@@ -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[];
+}

x-pack/plugins/apm/public/components/app/correlations/empty_state_prompt.tsx

@@ -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."

x-pack/plugins/apm/public/components/app/correlations/failed_transactions_correlations.tsx

@@ -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';
@@ -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 {
@@ -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,

x-pack/plugins/apm/public/components/app/correlations/latency_correlations.test.tsx

@@ -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
+      });
+    });
+  });
+});

x-pack/plugins/apm/public/components/app/correlations/latency_correlations.tsx

@@ -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();
 
@@ -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)) {