Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ interface ProgressControlProps {
isRunning: boolean;
shouldRerunAnalysis: boolean;
runAnalysisDisabled?: boolean;
analysisInfo?: React.ReactNode;
}

/**
Expand All @@ -61,6 +62,7 @@ export const ProgressControls: FC<PropsWithChildren<ProgressControlProps>> = (pr
isRunning,
shouldRerunAnalysis,
runAnalysisDisabled = false,
analysisInfo = null,
} = props;

const progressOutput = Math.round(progress * 100);
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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
peteharverson marked this conversation as resolved.
Show resolved Hide resolved
iconType="help"
rbrtj marked this conversation as resolved.
Show resolved Hide resolved
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);` }}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit weird but it's a mix of what the EUI docs say to do with their sizes and what I copied over from the ml help popover while getting rid of the SCSS there.

<p>
{infoContent}
{fieldSelectionMessage && ` ${fieldSelectionMessage}`}
</p>
</EuiText>
</EuiPopover>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -480,8 +481,6 @@ export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
</EuiFlexItem>
</ProgressControls>

<LogRateAnalysisTypeCallOut />

{errors.length > 0 ? (
<>
<EuiSpacer size="xs" />
Expand Down Expand Up @@ -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"
Expand Down

This file was deleted.

8 changes: 0 additions & 8 deletions x-pack/plugins/translations/translations/fr-FR.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
8 changes: 0 additions & 8 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 {エラー}}が分析の実行中に発生しました。",
Expand Down
8 changes: 0 additions & 8 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 {错误}}。",
Expand Down
Loading