[ML] AIOps: Move Log Rate Analysis results callout to help popover.

x-pack/packages/ml/aiops_components/src/progress_controls/progress_controls.tsx

@@ -39,6 +39,7 @@ interface ProgressControlProps {
   isRunning: boolean;
   shouldRerunAnalysis: boolean;
   runAnalysisDisabled?: boolean;
+  analysisInfo?: React.ReactNode;
 }
 
 /**
@@ -61,6 +62,7 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
     isRunning,
     shouldRerunAnalysis,
     runAnalysisDisabled = false,
+    analysisInfo = null,
   } = props;
 
   const progressOutput = Math.round(progress * 100);
@@ -137,6 +139,9 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
                 })}
               </small>
             </EuiFlexItem>
+            <EuiFlexItem grow={false} data-test-subj="aiopsAnalysisInfo">
+              {analysisInfo}
+            </EuiFlexItem>
           </EuiFlexGroup>
         ) : null}
         <EuiFlexGroup

x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_info_popover.tsx

@@ -0,0 +1,123 @@
+/*
+ * 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, type FC } from 'react';
+
+import { EuiBadge, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
+
+import { LOG_RATE_ANALYSIS_TYPE } from '@kbn/aiops-log-rate-analysis';
+import { useAppSelector } from '@kbn/aiops-log-rate-analysis/state';
+import { i18n } from '@kbn/i18n';
+
+import { useEuiTheme } from '../../hooks/use_eui_theme';
+
+export const LogRateAnalysisInfoPopoverButton: FC<{
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  label: string;
+}> = ({ onClick, label }) => {
+  return (
+    <EuiBadge
+      color="success"
+      onClick={onClick}
+      onClickAriaLabel='Click to open "Log rate analysis info" popover'
+      data-test-subj="aiopsLogRateAnalysisInfoPopoverButton"
+    >
+      {label}
+    </EuiBadge>
+  );
+};
+
+export const LogRateAnalysisInfoPopover: FC = () => {
+  const euiTheme = useEuiTheme();
+
+  const showInfoPopover = useAppSelector(
+    (s) => s.logRateAnalysisResults.significantItems.length > 0
+  );
+  const zeroDocsFallback = useAppSelector((s) => s.logRateAnalysisResults.zeroDocsFallback);
+  const analysisType = useAppSelector((s) => s.logRateAnalysisResults.currentAnalysisType);
+  const fieldSelectionMessage = useAppSelector(
+    (s) => s.logRateAnalysisFieldCandidates.fieldSelectionMessage
+  );
+
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const infoTitlePrefix = i18n.translate('xpack.aiops.analysis.analysisTypeInfoTitlePrefix', {
+    defaultMessage: 'Analysis type: ',
+  });
+  let infoTitle: string;
+  let infoContent: string;
+
+  if (!showInfoPopover) {
+    return null;
+  }
+
+  if (!zeroDocsFallback && analysisType === LOG_RATE_ANALYSIS_TYPE.SPIKE) {
+    infoTitle = i18n.translate('xpack.aiops.analysis.analysisTypeSpikeInfoTitle', {
+      defaultMessage: 'Log rate spike',
+    });
+    infoContent = i18n.translate('xpack.aiops.analysis.analysisTypeSpikeInfoContent', {
+      defaultMessage:
+        'The median log rate in the selected deviation time range is higher than the baseline. Therefore, the analysis results table shows statistically significant items within the deviation time range that are contributors to the spike. The "doc count" column refers to the amount of documents in the deviation time range.',
+    });
+  } else if (!zeroDocsFallback && analysisType === LOG_RATE_ANALYSIS_TYPE.DIP) {
+    infoTitle = i18n.translate('xpack.aiops.analysis.analysisTypeDipInfoTitle', {
+      defaultMessage: 'Log rate dip',
+    });
+    infoContent = i18n.translate('xpack.aiops.analysis.analysisTypeDipInfoContent', {
+      defaultMessage:
+        'The median log rate in the selected deviation time range is lower than the baseline. Therefore, the analysis results table shows statistically significant items within the baseline time range that are less in number or missing within the deviation time range. The "doc count" column refers to the amount of documents in the baseline time range.',
+    });
+  } else if (zeroDocsFallback && analysisType === LOG_RATE_ANALYSIS_TYPE.SPIKE) {
+    infoTitle = i18n.translate('xpack.aiops.analysis.analysisTypeSpikeFallbackInfoTitle', {
+      defaultMessage: 'Top items for deviation time range',
+    });
+    infoContent = i18n.translate('xpack.aiops.analysis.analysisTypeSpikeInfoContentFallback', {
+      defaultMessage:
+        'The baseline time range does not contain any documents. Therefore the results show top log message categories and field values for the deviation time range.',
+    });
+  } else if (zeroDocsFallback && analysisType === LOG_RATE_ANALYSIS_TYPE.DIP) {
+    infoTitle = i18n.translate('xpack.aiops.analysis.analysisTypeDipFallbackInfoTitle', {
+      defaultMessage: 'Top items for baseline time range',
+    });
+    infoContent = i18n.translate('xpack.aiops.analysis.analysisTypeDipInfoContentFallback', {
+      defaultMessage:
+        'The deviation time range does not contain any documents. Therefore the results show top log message categories and field values for the baseline time range.',
+    });
+  } else {
+    return null;
+  }
+
+  return (
+    <EuiPopover
+      anchorPosition="upCenter"
+      button={
+        <LogRateAnalysisInfoPopoverButton
+          onClick={setIsPopoverOpen.bind(null, !isPopoverOpen)}
+          label={infoTitle}
+        />
+      }
+      closePopover={setIsPopoverOpen.bind(null, false)}
+      isOpen={isPopoverOpen}
+      ownFocus
+      panelPaddingSize="m"
+    >
+      {infoTitle && (
+        <EuiPopoverTitle>
+          {infoTitlePrefix}
+          {infoTitle}
+        </EuiPopoverTitle>
+      )}
+
+      <EuiText size="s" css={{ maxWidth: `calc(${euiTheme.euiSizeXL} * 15);` }}>
+        <p>
+          {infoContent}
+          {fieldSelectionMessage && ` ${fieldSelectionMessage}`}
+        </p>
+      </EuiText>
+    </EuiPopover>
+  );
+};

x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_results.tsx

@@ -62,7 +62,7 @@ import {
 
 import { ItemFilterPopover as FieldFilterPopover } from './item_filter_popover';
 import { ItemFilterPopover as ColumnFilterPopover } from './item_filter_popover';
-import { LogRateAnalysisTypeCallOut } from './log_rate_analysis_type_callout';
+import { LogRateAnalysisInfoPopover } from './log_rate_analysis_info_popover';
 import type { ColumnNames } from '../log_rate_analysis_results_table';
 
 const groupResultsMessage = i18n.translate(
@@ -425,6 +425,7 @@ export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
         onCancel={cancelHandler}
         onReset={onReset}
         shouldRerunAnalysis={shouldRerunAnalysis}
+        analysisInfo={<LogRateAnalysisInfoPopover />}
       >
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="s" alignItems="center">
@@ -480,8 +481,6 @@ export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
         </EuiFlexItem>
       </ProgressControls>
 
-      <LogRateAnalysisTypeCallOut />
-
       {errors.length > 0 ? (
         <>
           <EuiSpacer size="xs" />
@@ -530,7 +529,7 @@ export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
           <EuiText size="xs">{groupResults ? groupResultsHelpMessage : undefined}</EuiText>
         </>
       )}
-      <EuiSpacer size="xs" />
+      <EuiSpacer size="s" />
       {!isRunning && !showLogRateAnalysisResultsTable && (
         <EuiEmptyPrompt
           data-test-subj="aiopsNoResultsFoundEmptyPrompt"

x-pack/plugins/translations/translations/fr-FR.json

@@ -764,8 +764,8 @@
     "core.euiDataGridCell.focusTrapEnterPrompt": "Appuyez sur Entrée pour interagir avec le contenu de cette cellule.",
     "core.euiDataGridCell.position": "{columnId}, colonne {col}, ligne {row}",
     "core.euiDataGridCellActions.expandButtonTitle": "Cliquez ou appuyez sur Entrée pour interagir avec le contenu de la cellule.",
-    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "Pour naviguer dans la liste des actions de la colonne, appuyez sur la touche Tab ou sur les flèches vers le haut et vers le bas.",
     "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}. Cliquez pour afficher les actions d'en-tête de colonne",
+    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "Pour naviguer dans la liste des actions de la colonne, appuyez sur la touche Tab ou sur les flèches vers le haut et vers le bas.",
     "core.euiDataGridHeaderCell.sortedByAscendingFirst": "Trié par {columnId}, ordre croissant",
     "core.euiDataGridHeaderCell.sortedByAscendingMultiple": ", puis par {columnId}, ordre croissant",
     "core.euiDataGridHeaderCell.sortedByAscendingSingle": "Trié par ordre croissant",
@@ -9496,14 +9496,6 @@
     "xpack.actions.subActionsFramework.urlValidationError": "Erreur lors de la validation de l'URL : {message}",
     "xpack.actions.urlAllowedHostsConfigurationError": "Le {field} cible \"{value}\" n'est pas ajouté à la configuration Kibana xpack.actions.allowedHosts",
     "xpack.aiops.actions.openChangePointInMlAppName": "Ouvrir dans AIOps Labs",
-    "xpack.aiops.analysis.analysisTypeDipCallOutContent": "Le taux de log médian pour la plage temporelle d'écart-type sélectionnée est inférieur à la référence de base. Le tableau des résultats de l'analyse présente donc des éléments statistiquement significatifs inclus dans la plage temporelle de base qui sont moins nombreux ou manquant dans la plage temporelle d'écart-type. La colonne \"doc count\" (décompte de documents) renvoie à la quantité de documents dans la plage temporelle de base.",
-    "xpack.aiops.analysis.analysisTypeDipCallOutContentFallback": "La plage temporelle de déviation ne contient aucun document. Les résultats montrent donc les catégories de message des meilleurs logs et les valeurs des champs pour la période de référence.",
-    "xpack.aiops.analysis.analysisTypeDipCallOutTitle": "Type d'analyse : Baisse du taux de log",
-    "xpack.aiops.analysis.analysisTypeDipFallbackCallOutTitle": "Type d'analyse : Meilleurs éléments pour la plage temporelle de référence de base",
-    "xpack.aiops.analysis.analysisTypeSpikeCallOutContent": "Le taux de log médian pour la plage temporelle d'écart-type sélectionnée est inférieur à la référence de base. Le tableau des résultats de l'analyse présente donc des éléments statistiquement significatifs inclus dans la plage temporelle d'écart-type, qui contribuent au pic. La colonne \"doc count\" (décompte de documents) renvoie à la quantité de documents dans la plage temporelle d'écart-type.",
-    "xpack.aiops.analysis.analysisTypeSpikeCallOutContentFallback": "La plage temporelle de référence de base ne contient aucun document. Les résultats montrent donc les catégories de message des meilleurs logs et les valeurs des champs pour la plage temporelle de déviation.",
-    "xpack.aiops.analysis.analysisTypeSpikeCallOutTitle": "Type d'analyse : Pic du taux de log",
-    "xpack.aiops.analysis.analysisTypeSpikeFallbackCallOutTitle": "Type d'analyse : Meilleurs éléments pour la plage temporelle de déviation",
     "xpack.aiops.analysis.columnSelectorAriaLabel": "Filtrer les colonnes",
     "xpack.aiops.analysis.columnSelectorNotEnoughColumnsSelected": "Au moins une colonne doit être sélectionnée.",
     "xpack.aiops.analysis.errorCallOutTitle": "Génération {errorCount, plural, one {de l'erreur suivante} other {des erreurs suivantes}} au cours de l'analyse.",
@@ -47897,4 +47889,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "Ce champ est requis.",
     "xpack.watcher.watcherDescription": "Détectez les modifications survenant dans vos données en créant, gérant et monitorant des alertes."
   }
-}
+}

x-pack/plugins/translations/translations/ja-JP.json

@@ -766,8 +766,8 @@
     "core.euiDataGridCell.focusTrapEnterPrompt": "このセルの内容を操作するには、Enterキーを押してください。",
     "core.euiDataGridCell.position": "{columnId}, 列{col}, 行{row}",
     "core.euiDataGridCellActions.expandButtonTitle": "クリックするか enter を押すと、セルのコンテンツとインタラクトできます。",
-    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "列アクションのリストを移動するには、Tabまたは上下矢印キーを押します。",
     "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。クリックすると、列ヘッダーアクションが表示されます",
+    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "列アクションのリストを移動するには、Tabまたは上下矢印キーを押します。",
     "core.euiDataGridHeaderCell.sortedByAscendingFirst": "{columnId}の昇順で並べ替え",
     "core.euiDataGridHeaderCell.sortedByAscendingMultiple": "、{columnId}の昇順で並べ替え",
     "core.euiDataGridHeaderCell.sortedByAscendingSingle": "昇順で並べ替えます",
@@ -9491,14 +9491,6 @@
     "xpack.actions.subActionsFramework.urlValidationError": "URLの検証エラー：{message}",
     "xpack.actions.urlAllowedHostsConfigurationError": "ターゲット{field}「{value}」はKibana構成xpack.actions.allowedHostsに追加されていません",
     "xpack.aiops.actions.openChangePointInMlAppName": "AIOps Labsで開く",
-    "xpack.aiops.analysis.analysisTypeDipCallOutContent": "選択された偏差時間範囲におけるログレートの中央値は、ベースラインよりも低くなります。そのため、分析結果テーブルでは、ベースライン時間範囲内では統計的に有意な項目が、偏差値時間範囲内では数が少ないか欠落していることが示されています。\"ドキュメントカウント\"列は、基準時間範囲のドキュメント量です。",
-    "xpack.aiops.analysis.analysisTypeDipCallOutContentFallback": "偏差時間範囲にはドキュメントが含まれていません。したがって、この結果は、ベースライン時間範囲の上位のログメッセージカテゴリーとフィールド値を示しています。",
-    "xpack.aiops.analysis.analysisTypeDipCallOutTitle": "分析タイプ：ログレートディップ",
-    "xpack.aiops.analysis.analysisTypeDipFallbackCallOutTitle": "分析タイプ：ベースライン時間範囲の上位のアイテム",
-    "xpack.aiops.analysis.analysisTypeSpikeCallOutContent": "選択された偏差時間範囲におけるログレートの中央値は、ベースラインよりも高くなります。したがって、分析結果テーブルでは、スパイクの要因となる偏差時間範囲内の統計的に有意な項目が示されています。\"ドキュメントカウント\"列は、偏差時間範囲のドキュメント量です。",
-    "xpack.aiops.analysis.analysisTypeSpikeCallOutContentFallback": "ベースライン時間範囲にはドキュメントが含まれていません。したがって、結果は、偏差時間範囲の上位のログメッセージカテゴリーとフィールド値を示しています。",
-    "xpack.aiops.analysis.analysisTypeSpikeCallOutTitle": "分析タイプ：ログレートスパイク",
-    "xpack.aiops.analysis.analysisTypeSpikeFallbackCallOutTitle": "分析タイプ：偏差時間範囲の上位のアイテム",
     "xpack.aiops.analysis.columnSelectorAriaLabel": "列のフィルタリング",
     "xpack.aiops.analysis.columnSelectorNotEnoughColumnsSelected": "1つ以上の列を選択する必要があります。",
     "xpack.aiops.analysis.errorCallOutTitle": "次の{errorCount, plural, other {エラー}}が分析の実行中に発生しました。",
@@ -47880,4 +47872,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
+}