[ML] Fix UI inconsistencies in APM Failed transaction correlations (#…

…109187) (#109626)

- Show the same empty state in the correlations table
- Add "Correlations" title above the table
- Add EuiSpacer between the sections before and after progress
- Update the copy within the beta badge title=Failed transaction correlations description=Failed transaction correlations is not GA...
- Remove s size from the beta badge
- Move the help popover to the top of the panel (similar to the Latency correlations tab)
- Move the Cancel/Refresh option to the right of the progress bar (similar to the Latency correlations tab)
- When the correlation job is running the correlations tab should show a loading state similar to the latency correlations table
- Indicate in the table headers Score is sorted by default
- Add sortability to both Latency and failed transactions correlations table
- Refactor to prevent duplicate code/components like Log, progress bar
- Fix alignments of the tab content header (previously navigating from one Trace samples tab to Latency correlation tabs will cause a minor jump in the header, or the titles within the same tab were not the same size )
- Remove the event.outcome as a field candidate (because event.outcome: failure would always be significant in this case)
- Shrink the column width for impact (previously it was at 116px)
- Added badge for High, medium, low [APM] Correlations: Show impact levels (high, medium, low) as colored badges indicating their severity
- Fix license prompt text
- Functional tests for the new tab
- Make the p value & error rate columns visible only when esInspect mode is enabled

Co-authored-by: Quynh Nguyen <43350163+qn895@users.noreply.github.com>

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

@@ -15,6 +15,9 @@ export interface FailedTransactionsCorrelationValue {
   pValue: number | null;
   fieldName: string;
   fieldValue: string;
+  normalizedScore: number;
+  failurePercentage: number;
+  successPercentage: number;
 }
 
 export type FailureCorrelationImpactThreshold = typeof FAILED_TRANSACTIONS_IMPACT_THRESHOLD[keyof typeof FAILED_TRANSACTIONS_IMPACT_THRESHOLD];

x-pack/plugins/apm/common/utils/formatters/datetime.test.ts

@@ -165,6 +165,34 @@ describe('date time formatters', () => {
         'Dec 1, 2019, 13:00:00.000 (UTC+1)'
       );
     });
+
+    it('milliseconds', () => {
+      moment.tz.setDefault('Europe/Copenhagen');
+      expect(asAbsoluteDateTime(1559390400000, 'milliseconds')).toBe(
+        'Jun 1, 2019, 14:00:00.000 (UTC+2)'
+      );
+    });
+
+    it('seconds', () => {
+      moment.tz.setDefault('Europe/Copenhagen');
+      expect(asAbsoluteDateTime(1559390400000, 'seconds')).toBe(
+        'Jun 1, 2019, 14:00:00 (UTC+2)'
+      );
+    });
+
+    it('minutes', () => {
+      moment.tz.setDefault('Europe/Copenhagen');
+      expect(asAbsoluteDateTime(1559390400000, 'minutes')).toBe(
+        'Jun 1, 2019, 14:00 (UTC+2)'
+      );
+    });
+
+    it('hours', () => {
+      moment.tz.setDefault('Europe/Copenhagen');
+      expect(asAbsoluteDateTime(1559390400000, 'hours')).toBe(
+        'Jun 1, 2019, 14 (UTC+2)'
+      );
+    });
   });
   describe('getDateDifference', () => {
     it('milliseconds', () => {

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

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiAccordion, EuiCode, EuiPanel } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { asAbsoluteDateTime } from '../../../../common/utils/formatters';
+
+interface Props {
+  logMessages: string[];
+}
+export function CorrelationsLog({ logMessages }: Props) {
+  return (
+    <EuiAccordion
+      id="apmCorrelationsLogAccordion"
+      buttonContent={i18n.translate('xpack.apm.correlations.logButtonContent', {
+        defaultMessage: 'Log',
+      })}
+    >
+      <EuiPanel color="subdued">
+        {logMessages.map((logMessage, i) => {
+          const [timestamp, message] = logMessage.split(': ');
+          return (
+            <p key={i}>
+              <small>
+                <EuiCode>{asAbsoluteDateTime(timestamp)}</EuiCode> {message}
+              </small>
+            </p>
+          );
+        })}
+      </EuiPanel>
+    </EuiAccordion>
+  );
+}

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

@@ -9,10 +9,12 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { debounce } from 'lodash';
 import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';
+import type { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { useUiTracker } from '../../../../../observability/public';
 import { useTheme } from '../../../hooks/use_theme';
-import { CorrelationsTerm } from '../../../../common/search_strategies/failure_correlations/types';
+import type { CorrelationsTerm } from '../../../../common/search_strategies/failure_correlations/types';
 
 const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
 
@@ -29,6 +31,8 @@ interface Props<T> {
   selectedTerm?: { fieldName: string; fieldValue: string };
   onFilter?: () => void;
   columns: Array<EuiBasicTableColumn<T>>;
+  onTableChange: (c: Criteria<T>) => void;
+  sorting?: EuiTableSortingType<T>;
 }
 
 export function CorrelationsTable<T extends CorrelationsTerm>({
@@ -37,6 +41,8 @@ export function CorrelationsTable<T extends CorrelationsTerm>({
   setSelectedSignificantTerm,
   columns,
   selectedTerm,
+  onTableChange,
+  sorting,
 }: Props<T>) {
   const euiTheme = useTheme();
   const trackApmEvent = useUiTracker({ app: 'apm' });
@@ -67,12 +73,17 @@ export function CorrelationsTable<T extends CorrelationsTerm>({
     };
   }, [pageIndex, pageSize, significantTerms]);
 
-  const onTableChange = useCallback(({ page }) => {
-    const { index, size } = page;
+  const onChange = useCallback(
+    (tableSettings) => {
+      const { index, size } = tableSettings.page;
 
-    setPageIndex(index);
-    setPageSize(size);
-  }, []);
+      setPageIndex(index);
+      setPageSize(size);
+
+      onTableChange(tableSettings);
+    },
+    [onTableChange]
+  );
 
   return (
     <EuiBasicTable
@@ -100,7 +111,8 @@ export function CorrelationsTable<T extends CorrelationsTerm>({
         };
       }}
       pagination={pagination}
-      onChange={onTableChange}
+      onChange={onChange}
+      sorting={sorting}
     />
   );
 }

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

@@ -0,0 +1,33 @@
+/*
+ * 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 { EuiCallOut } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+
+export function CrossClusterSearchCompatibilityWarning({
+  version,
+}: {
+  version: string;
+}) {
+  return (
+    <EuiCallOut
+      title={i18n.translate('xpack.apm.correlations.ccsWarningCalloutTitle', {
+        defaultMessage: 'Cross-cluster search compatibility',
+      })}
+      color="warning"
+    >
+      <p>
+        {i18n.translate('xpack.apm.correlations.ccsWarningCalloutBody', {
+          defaultMessage:
+            'Data for the correlation analysis could not be fully retrieved. This feature is supported only for {version} and later versions.',
+          values: { version },
+        })}
+      </p>
+    </EuiCallOut>
+  );
+}

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

@@ -0,0 +1,49 @@
+/*
+ * 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 { EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export function CorrelationsEmptyStatePrompt() {
+  return (
+    <>
+      <EuiSpacer size="m" />
+      <EuiEmptyPrompt
+        iconType="minusInCircle"
+        title={
+          <EuiText size="s">
+            <h2>
+              {i18n.translate('xpack.apm.correlations.noCorrelationsTitle', {
+                defaultMessage: 'No significant correlations',
+              })}
+            </h2>
+          </EuiText>
+        }
+        body={
+          <>
+            <EuiText size="s">
+              <p>
+                <FormattedMessage
+                  id="xpack.apm.correlations.noCorrelationsTextLine1"
+                  defaultMessage="Correlations will only be identified if they have significant impact."
+                />
+              </p>
+              <p>
+                <FormattedMessage
+                  id="xpack.apm.correlations.noCorrelationsTextLine2"
+                  defaultMessage="Try selecting another time range or remove any added filter."
+                />
+              </p>
+            </EuiText>
+          </>
+        }
+      />
+    </>
+  );
+}