[ML] APM Latency Correlations: Fix empty state

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

@@ -95,7 +95,7 @@ export function FailedTransactionsCorrelations({
   const startFetchHandler = useCallback(() => {
     startFetch(searchServicePrams);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [environment, serviceName, kuery, start, end]);
+  }, [environment, serviceName, transactionType, kuery, start, end]);
 
   // start fetching on load
   // we want this effect to execute exactly once after the component mounts
@@ -146,7 +146,7 @@ export function FailedTransactionsCorrelations({
                   'xpack.apm.correlations.failedTransactions.correlationsTable.failurePercentageDescription',
                   {
                     defaultMessage:
-                      'Percentage of time the term appear in failed transactions.',
+                      'Percentage of time the term appears in failed transactions.',
                   }
                 )}
               >
@@ -179,7 +179,7 @@ export function FailedTransactionsCorrelations({
                   'xpack.apm.correlations.failedTransactions.correlationsTable.successPercentageDescription',
                   {
                     defaultMessage:
-                      'Percentage of time the term appear in successful transactions.',
+                      'Percentage of time the term appears in successful transactions.',
                   }
                 )}
               >

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();
 
@@ -96,7 +96,7 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => void }) {
       percentileThreshold: DEFAULT_PERCENTILE_THRESHOLD,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [environment, serviceName, kuery, start, end]);
+  }, [environment, serviceName, transactionType, kuery, start, end]);
 
   // start fetching on load
   // we want this effect to execute exactly once after the component mounts

x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.tsx

@@ -0,0 +1,151 @@
+/*
+ * 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 { 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 { getFormattedSelection, TransactionDistribution } from './index';
+
+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 (
+    <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>
+  );
+}
+
+describe('transaction_details/distribution', () => {
+  describe('getFormattedSelection', () => {
+    it('displays only one unit if from and to share the same unit', () => {
+      expect(getFormattedSelection([10000, 100000])).toEqual('10 - 100 ms');
+    });
+
+    it('displays two units when from and to have different units', () => {
+      expect(getFormattedSelection([100000, 1000000000])).toEqual(
+        '100 ms - 17 min'
+      );
+    });
+  });
+
+  describe('TransactionDistribution', () => {
+    it('shows loading indicator when the service is running and returned no results yet', async () => {
+      const onHasData = jest.fn();
+      render(
+        <Wrapper
+          dataSearchResponse={{
+            isRunning: true,
+            rawResponse: { ccsWarning: false, took: 1234, values: [], log: [] },
+          }}
+        >
+          <TransactionDistribution
+            onChartSelection={jest.fn()}
+            onClearSelection={jest.fn()}
+            onHasData={onHasData}
+          />
+        </Wrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('apmCorrelationsChart')).toBeInTheDocument();
+        expect(screen.getByTestId('loading')).toBeInTheDocument();
+        expect(onHasData).toHaveBeenLastCalledWith(false);
+      });
+    });
+
+    it("doesn't show loading indicator when the service isn't running", async () => {
+      const onHasData = jest.fn();
+      render(
+        <Wrapper
+          dataSearchResponse={{
+            isRunning: false,
+            rawResponse: { ccsWarning: false, took: 1234, values: [], log: [] },
+          }}
+        >
+          <TransactionDistribution
+            onChartSelection={jest.fn()}
+            onClearSelection={jest.fn()}
+            onHasData={onHasData}
+          />
+        </Wrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('apmCorrelationsChart')).toBeInTheDocument();
+        expect(screen.queryByTestId('loading')).toBeNull(); // it doesn't exist
+        expect(onHasData).toHaveBeenLastCalledWith(false);
+      });
+    });
+  });
+});