[APM] Correlations Beta (#86477)

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

@@ -6,11 +6,15 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiLink } from '@elastic/eui';
+import {
+  EuiIcon,
+  EuiLink,
+  EuiBasicTable,
+  EuiBasicTableColumn,
+  EuiBadge,
+} 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';
@@ -29,22 +33,27 @@ interface Props<T> {
   status: FETCH_STATUS;
   cardinalityColumnName: string;
   setSelectedSignificantTerm: (term: T | null) => void;
+  onFilter: () => void;
 }
 
-export function SignificantTermsTable<T extends SignificantTerm>({
+export function CorrelationsTable<T extends SignificantTerm>({
   significantTerms,
   status,
   cardinalityColumnName,
   setSelectedSignificantTerm,
+  onFilter,
 }: Props<T>) {
   const history = useHistory();
   const columns: Array<EuiBasicTableColumn<T>> = [
     {
       width: '100px',
       field: 'score',
-      name: 'Score',
+      name: i18n.translate(
+        'xpack.apm.correlations.correlationsTable.scoreLabel',
+        { defaultMessage: 'Score' }
+      ),
       render: (_: any, term: T) => {
-        return <EuiCode>{Math.round(term.score)}</EuiCode>;
+        return <EuiBadge>{Math.round(term.score)}</EuiBadge>;
       },
     },
     {
@@ -57,19 +66,31 @@ export function SignificantTermsTable<T extends SignificantTerm>({
     },
     {
       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 +101,18 @@ export function SignificantTermsTable<T extends SignificantTerm>({
                 )}"`,
               },
             });
+            onFilter();
           },
         },
         {
-          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 +123,14 @@ export function SignificantTermsTable<T extends SignificantTerm>({
                 )}"`,
               },
             });
+            onFilter();
           },
         },
       ],
-      name: 'Actions',
+      name: i18n.translate(
+        'xpack.apm.correlations.correlationsTable.actionsLabel',
+        { defaultMessage: 'Actions' }
+      ),
       render: (_: any, term: T) => {
         return (
           <>
@@ -134,7 +166,9 @@ 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) => {
@@ -146,3 +180,13 @@ export function SignificantTermsTable<T extends SignificantTerm>({
     />
   );
 }
+
+const loadingText = i18n.translate(
+  'xpack.apm.correlations.correlationsTable.loadingText',
+  { defaultMessage: 'Loading' }
+);
+
+const noDataText = i18n.translate(
+  'xpack.apm.correlations.correlationsTable.noDataText',
+  { defaultMessage: 'No data' }
+);

x-pack/plugins/apm/public/components/app/Correlations/custom_fields.tsx

@@ -0,0 +1,155 @@
+/*
+ * 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 {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiAccordion,
+  EuiComboBox,
+  EuiFormRow,
+  EuiLink,
+  EuiFieldNumber,
+  EuiSpacer,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import React, { useEffect, useState } from 'react';
+import { useFieldNames } from './useFieldNames';
+import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
+
+interface Props {
+  fieldNames: string[];
+  setFieldNames: (fieldNames: string[]) => void;
+  setDurationPercentile?: (value: number) => void;
+  showThreshold?: boolean;
+  durationPercentile?: number;
+}
+
+export function CustomFields({
+  fieldNames,
+  setFieldNames,
+  setDurationPercentile = () => {},
+  showThreshold = false,
+  durationPercentile = 50,
+}: Props) {
+  const { defaultFieldNames, getSuggestions } = useFieldNames();
+  const [suggestedFieldNames, setSuggestedFieldNames] = useState(
+    getSuggestions('')
+  );
+
+  useEffect(() => {
+    if (suggestedFieldNames.length) {
+      return;
+    }
+    setSuggestedFieldNames(getSuggestions(''));
+  }, [getSuggestions, suggestedFieldNames]);
+
+  return (
+    <EuiAccordion
+      id="accordion"
+      buttonContent={i18n.translate(
+        'xpack.apm.correlations.customize.buttonLabel',
+        { defaultMessage: 'Customize fields' }
+      )}
+    >
+      <EuiSpacer />
+      <EuiFlexGroup direction="column">
+        {showThreshold && (
+          <EuiFlexItem grow={false}>
+            <EuiFormRow
+              label={i18n.translate(
+                'xpack.apm.correlations.customize.thresholdLabel',
+                { defaultMessage: 'Threshold' }
+              )}
+              helpText="Default threshold is 50th percentile."
+            >
+              <EuiFieldNumber
+                value={durationPercentile.toString(10)}
+                onChange={(e) => {
+                  const value = parseInt(e.currentTarget.value, 10);
+                  if (isValidPercentile(value)) {
+                    setDurationPercentile(value);
+                  }
+                }}
+                prepend="Percentile"
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem grow={false}>
+          <EuiFormRow
+            fullWidth={true}
+            label={i18n.translate(
+              'xpack.apm.correlations.customize.fieldLabel',
+              { defaultMessage: 'Field' }
+            )}
+            helpText={
+              <FormattedMessage
+                id="xpack.apm.correlations.customize.fieldHelpText"
+                defaultMessage="Customize or {reset} fields to analyze for correlations. {docsLink}"
+                values={{
+                  reset: (
+                    <EuiLink
+                      type="reset"
+                      onClick={() => {
+                        setFieldNames(defaultFieldNames);
+                      }}
+                    >
+                      {i18n.translate(
+                        'xpack.apm.correlations.customize.fieldHelpTextReset',
+                        { defaultMessage: 'reset' }
+                      )}
+                    </EuiLink>
+                  ),
+                  docsLink: (
+                    <ElasticDocsLink
+                      section="/kibana"
+                      path="/advanced-queries.html"
+                    >
+                      {i18n.translate(
+                        'xpack.apm.correlations.customize.fieldHelpTextDocsLink',
+                        {
+                          defaultMessage:
+                            'Learn more about the default fields.',
+                        }
+                      )}
+                    </ElasticDocsLink>
+                  ),
+                }}
+              />
+            }
+          >
+            <EuiComboBox
+              fullWidth={true}
+              placeholder={i18n.translate(
+                'xpack.apm.correlations.customize.fieldPlaceholder',
+                { defaultMessage: 'Select or create options' }
+              )}
+              selectedOptions={fieldNames.map((label) => ({ label }))}
+              onChange={(options) => {
+                const nextFieldNames = options.map((option) => option.label);
+                setFieldNames(nextFieldNames);
+              }}
+              onCreateOption={(term) => {
+                const nextFieldNames = [...fieldNames, term];
+                setFieldNames(nextFieldNames);
+              }}
+              onSearchChange={(searchValue) => {
+                setSuggestedFieldNames(getSuggestions(searchValue));
+              }}
+              options={suggestedFieldNames.map((label) => ({ label }))}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiAccordion>
+  );
+}
+
+function isValidPercentile(value: number) {
+  return !isNaN(value) && value >= 0 && value <= 100;
+}