[8.x] [ML] AIOps: Move Log Rate Analysis results callout to help popo…

…ver. (#192243) (#193675)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] AIOps: Move Log Rate Analysis results callout to help popover.
(#192243)](#192243)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Walter
Rafelsberger","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-23T08:10:48Z","message":"[ML]
AIOps: Move Log Rate Analysis results callout to help popover.
(#192243)\n\n## Summary\r\n\r\nMoves the callout that describes some
analysis details to a help\r\npopover.\r\n\r\nBefore:\r\n\r\n<img
width=\"1064\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/cb2820f9-8cdc-4d31-98ac-df199509767a\">\r\n\r\nAfter:\r\n\r\n<img
width=\"1174\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dc795816-6da6-4e58-bc86-d490034140ce\">\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] This was
checked for breaking API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"dc9fb650412bd678b80dad52f66a413feff6035a","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","v9.0.0","backport:prev-minor","Feature:ML/AIOps","v8.16.0"],"title":"[ML]
AIOps: Move Log Rate Analysis results callout to help
popover.","number":192243,"url":"https://github.com/elastic/kibana/pull/192243","mergeCommit":{"message":"[ML]
AIOps: Move Log Rate Analysis results callout to help popover.
(#192243)\n\n## Summary\r\n\r\nMoves the callout that describes some
analysis details to a help\r\npopover.\r\n\r\nBefore:\r\n\r\n<img
width=\"1064\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/cb2820f9-8cdc-4d31-98ac-df199509767a\">\r\n\r\nAfter:\r\n\r\n<img
width=\"1174\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dc795816-6da6-4e58-bc86-d490034140ce\">\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] This was
checked for breaking API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"dc9fb650412bd678b80dad52f66a413feff6035a"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192243","number":192243,"mergeCommit":{"message":"[ML]
AIOps: Move Log Rate Analysis results callout to help popover.
(#192243)\n\n## Summary\r\n\r\nMoves the callout that describes some
analysis details to a help\r\npopover.\r\n\r\nBefore:\r\n\r\n<img
width=\"1064\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/cb2820f9-8cdc-4d31-98ac-df199509767a\">\r\n\r\nAfter:\r\n\r\n<img
width=\"1174\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dc795816-6da6-4e58-bc86-d490034140ce\">\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] This was
checked for breaking API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"dc9fb650412bd678b80dad52f66a413feff6035a"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Walter Rafelsberger <[email protected]>

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,128 @@
+/*
+ * 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
+      iconType="help"
+      iconSide="right"
+      color="success"
+      // Defining both iconOnClick and onClick so the mouse cursor changes for cases.
+      iconOnClick={onClick}
+      iconOnClickAriaLabel='Click to open "Log rate analysis info" popover'
+      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

@@ -9393,14 +9393,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.",

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

@@ -9387,14 +9387,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 {エラー}}が分析の実行中に発生しました。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -9401,14 +9401,6 @@
     "xpack.actions.subActionsFramework.urlValidationError": "验证 URL 时出错：{message}",
     "xpack.actions.urlAllowedHostsConfigurationError": "目标 {field} 的“{value}”未添加到 Kibana 配置 xpack.actions.allowedHosts",
     "xpack.aiops.actions.openChangePointInMlAppName": "在 Aiops 实验室中打开",
-    "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": "必须至少选择一列。",
     "xpack.aiops.analysis.errorCallOutTitle": "运行分析时发生以下{errorCount, plural, other {错误}}。",