[ML] Fix APM latency order of sticky header properties, add help popover

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

@@ -104,16 +104,7 @@ export function Correlations() {
         width: '20%',
       });
     }
-    if (urlParams.transactionName) {
-      properties.push({
-        label: i18n.translate('xpack.apm.correlations.transactionLabel', {
-          defaultMessage: 'Transaction',
-        }),
-        fieldName: TRANSACTION_NAME,
-        val: urlParams.transactionName,
-        width: '20%',
-      });
-    }
+
     if (urlParams.environment) {
       properties.push({
         label: i18n.translate('xpack.apm.correlations.environmentLabel', {
@@ -125,6 +116,17 @@ export function Correlations() {
       });
     }
 
+    if (urlParams.transactionName) {
+      properties.push({
+        label: i18n.translate('xpack.apm.correlations.transactionLabel', {
+          defaultMessage: 'Transaction',
+        }),
+        fieldName: TRANSACTION_NAME,
+        val: urlParams.transactionName,
+        width: '20%',
+      });
+    }
+
     return properties;
   }, [serviceName, urlParams.environment, urlParams.transactionName]);
 

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

@@ -36,6 +36,7 @@ import { useCorrelations } from './use_correlations';
 import { push } from '../../shared/Links/url_helpers';
 import { useUiTracker } from '../../../../../observability/public';
 import { asPreciseDecimal } from '../../../../common/utils/formatters';
+import { LatencyCorrelationsHelpPopover } from './ml_latency_correlations_help_popover';
 
 const DEFAULT_PERCENTILE_THRESHOLD = 95;
 const isErrorMessage = (arg: unknown): arg is Error => {
@@ -151,7 +152,7 @@ export function MlLatencyCorrelations({ onClose }: Props) {
               'xpack.apm.correlations.latencyCorrelations.correlationsTable.correlationColumnDescription',
               {
                 defaultMessage:
-                  'The impact of a field on the latency of the service, ranging from 0 to 1.',
+                  'The impact [0-1] of an attribute; the greater the impact, the more an attribute increases latency.',
               }
             )}
           >
@@ -263,20 +264,6 @@ export function MlLatencyCorrelations({ onClose }: Props) {
 
   return (
     <>
-      <EuiText size="s" color="subdued">
-        <p>
-          {i18n.translate(
-            'xpack.apm.correlations.latencyCorrelations.description',
-            {
-              defaultMessage:
-                'What is slowing down my service? Correlations will help discover a slower performance in a particular cohort of your data.',
-            }
-          )}
-        </p>
-      </EuiText>
-
-      <EuiSpacer size="m" />
-
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           {!isRunning && (
@@ -320,6 +307,9 @@ export function MlLatencyCorrelations({ onClose }: Props) {
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <LatencyCorrelationsHelpPopover />
+        </EuiFlexItem>
       </EuiFlexGroup>
 
       <EuiSpacer size="m" />

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

@@ -0,0 +1,58 @@
+/*
+ * 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 React, { useState } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { HelpPopover, HelpPopoverButton } from '../help_popover/help_popover';
+
+export function LatencyCorrelationsHelpPopover() {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <HelpPopover
+      anchorPosition="leftUp"
+      button={
+        <HelpPopoverButton
+          onClick={() => {
+            setIsPopoverOpen(!isPopoverOpen);
+          }}
+        />
+      }
+      closePopover={() => setIsPopoverOpen(false)}
+      isOpen={isPopoverOpen}
+      title={i18n.translate('xpack.apm.correlations.latencyPopoverTitle', {
+        defaultMessage: 'Latency correlations',
+      })}
+    >
+      <p>
+        <FormattedMessage
+          id="xpack.apm.correlations.latencyPopoverBasicExplanation"
+          defaultMessage="Correlations help you discover which attributes are contributing to increased service response times or latency."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.apm.correlations.latencyPopoverChartExplanation"
+          defaultMessage="The latency distribution chart visualizes the overall latency of the service. When you hover over attributes in the table, their latency distribution is added to the chart."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.apm.correlations.latencyPopoverTableExplanation"
+          defaultMessage="The table is sorted by correlation values ranging from 0 to 1. Attributes with higher correlation values are more likely to contribute to high latency transactions."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="xpack.apm.correlations.latencyPopoverFilterExplanation"
+          defaultMessage="You can also add or remove filters to affect the queries in the APM app."
+        />
+      </p>
+    </HelpPopover>
+  );
+}

x-pack/plugins/apm/public/components/app/help_popover/help_popover.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 React, { ReactNode } from 'react';
+import {
+  EuiButtonIcon,
+  EuiLinkButtonProps,
+  EuiPopover,
+  EuiPopoverProps,
+  EuiPopoverTitle,
+  EuiText,
+} from '@elastic/eui';
+import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
+
+const PopoverContent = euiStyled(EuiText)`
+  max-width: 480px;
+  max-height: 40vh;
+`;
+
+export function HelpPopoverButton({
+  onClick,
+}: {
+  onClick: EuiLinkButtonProps['onClick'];
+}) {
+  return (
+    <EuiButtonIcon
+      className="apmHelpPopover__buttonIcon"
+      size="s"
+      iconType="help"
+      aria-label="Help"
+      onClick={onClick}
+    />
+  );
+}
+
+export function HelpPopover({
+  anchorPosition,
+  button,
+  children,
+  closePopover,
+  isOpen,
+  title,
+}: {
+  anchorPosition?: EuiPopoverProps['anchorPosition'];
+  button: EuiPopoverProps['button'];
+  children: ReactNode;
+  closePopover: EuiPopoverProps['closePopover'];
+  isOpen: EuiPopoverProps['isOpen'];
+  title?: string;
+}) {
+  return (
+    <EuiPopover
+      anchorPosition={anchorPosition}
+      button={button}
+      closePopover={closePopover}
+      isOpen={isOpen}
+      panelPaddingSize="s"
+      ownFocus
+    >
+      {title && <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>}
+
+      <PopoverContent size="s">{children}</PopoverContent>
+    </EuiPopover>
+  );
+}

x-pack/plugins/apm/public/components/app/help_popover/index.tsx

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { HelpPopoverButton, HelpPopover } from './help_popover';