[APM] Correlations Beta (#86477)

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -127,5 +127,4 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
   'securitySolution:rulesTableRefresh': { type: 'text' },
   'apm:enableSignificantTerms': { type: 'boolean' },
   'apm:enableServiceOverview': { type: 'boolean' },
-  'apm:enableCorrelations': { type: 'boolean' },
 };

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -30,7 +30,6 @@ export interface UsageStats {
   'securitySolution:rulesTableRefresh': string;
   'apm:enableSignificantTerms': boolean;
   'apm:enableServiceOverview': boolean;
-  'apm:enableCorrelations': boolean;
   'visualize:enableLabs': boolean;
   'visualization:heatmap:maxBuckets': number;
   'visualization:colorMapping': string;

src/plugins/telemetry/schema/oss_plugins.json

@@ -4384,9 +4384,6 @@
         },
         "apm:enableServiceOverview": {
           "type": "boolean"
-        },
-        "apm:enableCorrelations": {
-          "type": "boolean"
         }
       }
     },

x-pack/plugins/apm/common/ui_settings_keys.ts

@@ -5,5 +5,4 @@
  * 2.0.
  */
 
-export const enableCorrelations = 'apm:enableCorrelations';
 export const enableServiceOverview = 'apm:enableServiceOverview';

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

@@ -5,16 +5,23 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiIcon, EuiLink } from '@elastic/eui';
+import React, { useCallback } from 'react';
+import { debounce } from 'lodash';
+import {
+  EuiIcon,
+  EuiLink,
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiToolTip,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { useHistory } from 'react-router-dom';
-import { EuiBasicTable } from '@elastic/eui';
-import { EuiBasicTableColumn } from '@elastic/eui';
-import { EuiCode } from '@elastic/eui';
 import { asInteger, asPercent } from '../../../../common/utils/formatters';
 import { APIReturnType } from '../../../services/rest/createCallApmApi';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { createHref, push } from '../../shared/Links/url_helpers';
+import { ImpactBar } from '../../shared/ImpactBar';
+import { useUiTracker } from '../../../../../observability/public';
 
 type CorrelationsApiResponse =
   | APIReturnType<'GET /api/apm/correlations/failed_transactions'>
@@ -27,49 +34,83 @@ type SignificantTerm = NonNullable<
 interface Props<T> {
   significantTerms?: T[];
   status: FETCH_STATUS;
-  cardinalityColumnName: string;
+  percentageColumnName: string;
   setSelectedSignificantTerm: (term: T | null) => void;
+  onFilter: () => void;
 }
 
-export function SignificantTermsTable<T extends SignificantTerm>({
+export function CorrelationsTable<T extends SignificantTerm>({
   significantTerms,
   status,
-  cardinalityColumnName,
+  percentageColumnName,
   setSelectedSignificantTerm,
+  onFilter,
 }: Props<T>) {
+  const trackApmEvent = useUiTracker({ app: 'apm' });
+  const trackSelectSignificantTerm = useCallback(
+    () =>
+      debounce(
+        () => trackApmEvent({ metric: 'select_significant_term' }),
+        1000
+      ),
+    [trackApmEvent]
+  );
   const history = useHistory();
   const columns: Array<EuiBasicTableColumn<T>> = [
     {
       width: '100px',
-      field: 'score',
-      name: 'Score',
+      field: 'impact',
+      name: i18n.translate(
+        'xpack.apm.correlations.correlationsTable.impactLabel',
+        { defaultMessage: 'Impact' }
+      ),
       render: (_: any, term: T) => {
-        return <EuiCode>{Math.round(term.score)}</EuiCode>;
+        return <ImpactBar value={term.impact * 100} />;
       },
     },
     {
-      field: 'cardinality',
-      name: cardinalityColumnName,
+      field: 'percentage',
+      name: percentageColumnName,
       render: (_: any, term: T) => {
-        const matches = asPercent(term.fgCount, term.bgCount);
-        return `${asInteger(term.fgCount)} (${matches})`;
+        return (
+          <EuiToolTip
+            position="right"
+            content={`${asInteger(term.valueCount)} / ${asInteger(
+              term.fieldCount
+            )}`}
+          >
+            <>{asPercent(term.valueCount, term.fieldCount)}</>
+          </EuiToolTip>
+        );
       },
     },
     {
       field: 'fieldName',
-      name: 'Field name',
+      name: i18n.translate(
+        'xpack.apm.correlations.correlationsTable.fieldNameLabel',
+        { defaultMessage: 'Field name' }
+      ),
     },
     {
       field: 'fieldValue',
-      name: 'Field value',
+      name: i18n.translate(
+        'xpack.apm.correlations.correlationsTable.fieldValueLabel',
+        { defaultMessage: 'Field value' }
+      ),
       render: (_: any, term: T) => String(term.fieldValue).slice(0, 50),
     },
     {
       width: '100px',
       actions: [
         {
-          name: 'Focus',
-          description: 'Focus on this term',
+          name: i18n.translate(
+            'xpack.apm.correlations.correlationsTable.filterLabel',
+            { defaultMessage: 'Filter' }
+          ),
+          description: i18n.translate(
+            'xpack.apm.correlations.correlationsTable.filterDescription',
+            { defaultMessage: 'Filter by value' }
+          ),
           icon: 'magnifyWithPlus',
           type: 'icon',
           onClick: (term: T) => {
@@ -80,11 +121,19 @@ export function SignificantTermsTable<T extends SignificantTerm>({
                 )}"`,
               },
             });
+            onFilter();
+            trackApmEvent({ metric: 'correlations_term_include_filter' });
           },
         },
         {
-          name: 'Exclude',
-          description: 'Exclude this term',
+          name: i18n.translate(
+            'xpack.apm.correlations.correlationsTable.excludeLabel',
+            { defaultMessage: 'Exclude' }
+          ),
+          description: i18n.translate(
+            'xpack.apm.correlations.correlationsTable.excludeDescription',
+            { defaultMessage: 'Filter out value' }
+          ),
           icon: 'magnifyWithMinus',
           type: 'icon',
           onClick: (term: T) => {
@@ -95,10 +144,15 @@ export function SignificantTermsTable<T extends SignificantTerm>({
                 )}"`,
               },
             });
+            onFilter();
+            trackApmEvent({ metric: 'correlations_term_exclude_filter' });
           },
         },
       ],
-      name: 'Actions',
+      name: i18n.translate(
+        'xpack.apm.correlations.correlationsTable.actionsLabel',
+        { defaultMessage: 'Actions' }
+      ),
       render: (_: any, term: T) => {
         return (
           <>
@@ -134,15 +188,30 @@ export function SignificantTermsTable<T extends SignificantTerm>({
   return (
     <EuiBasicTable
       items={significantTerms ?? []}
-      noItemsMessage={status === FETCH_STATUS.LOADING ? 'Loading' : 'No data'}
+      noItemsMessage={
+        status === FETCH_STATUS.LOADING ? loadingText : noDataText
+      }
       loading={status === FETCH_STATUS.LOADING}
       columns={columns}
       rowProps={(term) => {
         return {
-          onMouseEnter: () => setSelectedSignificantTerm(term),
+          onMouseEnter: () => {
+            setSelectedSignificantTerm(term);
+            trackSelectSignificantTerm();
+          },
           onMouseLeave: () => setSelectedSignificantTerm(null),
         };
       }}
     />
   );
 }
+
+const loadingText = i18n.translate(
+  'xpack.apm.correlations.correlationsTable.loadingText',
+  { defaultMessage: 'Loading' }
+);
+
+const noDataText = i18n.translate(
+  'xpack.apm.correlations.correlationsTable.noDataText',
+  { defaultMessage: 'No data' }
+);