github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix: [Obs AI Ops > Anomaly Detection][KEYBOARD]: Anomalies table has a number of tooltips that cannot receive keyboard focus (#184198)

Browse source 
Closes: https://github.com/elastic/observability-dev/issues/3397

## Description

The Obs Anomaly Detection Single Metric Viewer has an Anomalies table
with at least three tooltips that cannot be reached by keyboard focus.
Screenshot attached below.

### Steps to recreate
1. Open the [Obs Anomaly
Detection](https://issue-serverless-alpbx-pr180406-c06b1b.kb.eu-west-1.aws.qa.elastic.cloud/app/ml/jobs)
view
2. Create a new anomaly detection job
3. From the Anomaly Detection Jobs table, click the Single Metric Viewer
icon
4. Tab through the page, to the Anomalies table underneath the chart
5. Keep tabbing through the table
6. Verify the tooltips in the Severity, Actual, and Typical columns do
not become visible
This commit is contained in:
Alexey Antonov 2024-05-29 12:19:49 +03:00 • committed by GitHub
parent 81191c9548
commit d5842d766a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 41 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

73
x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly, EuiToolTip, EuiIcon } from '@elastic/eui';
import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly, EuiIconTip } from '@elastic/eui';
import React from 'react';
import { get } from 'lodash';
@ -116,19 +116,22 @@ export function getColumns(
field: 'severity',
'data-test-subj': 'mlAnomaliesListColumnSeverity',
name: (
<EuiToolTip
content={i18n.translate('xpack.ml.overview.anomalyDetection.tableSeverityTooltip', {
defaultMessage:
'A normalized score between 0-100, which indicates the relative significance of the anomaly record results.',
<span>
{i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
defaultMessage: 'Severity',
})}
>
<span>
{i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
defaultMessage: 'Severity',
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate('xpack.ml.overview.anomalyDetection.tableSeverityTooltip', {
defaultMessage:
'A normalized score between 0-100, which indicates the relative significance of the anomaly record results.',
})}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
/>
</span>
),
render: (score, item) => (
<SeverityCell score={score} isMultiBucketAnomaly={isMultiBucketAnomaly(item.source)} />
@ -196,18 +199,21 @@ export function getColumns(
field: 'actualSort',
'data-test-subj': 'mlAnomaliesListColumnActual',
name: (
<EuiToolTip
content={i18n.translate('xpack.ml.overview.anomalyDetection.tableActualTooltip', {
defaultMessage: 'The actual values in the anomaly record results.',
<span>
{i18n.translate('xpack.ml.anomaliesTable.actualSortColumnName', {
defaultMessage: 'Actual',
})}
>
<span>
{i18n.translate('xpack.ml.anomaliesTable.actualSortColumnName', {
defaultMessage: 'Actual',
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate('xpack.ml.overview.anomalyDetection.tableActualTooltip', {
defaultMessage: 'The actual values in the anomaly record results.',
})}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
/>
</span>
),
render: (actual, item) => {
const fieldFormat = mlFieldFormatService.getFieldFormat(
@ -226,18 +232,21 @@ export function getColumns(
field: 'typicalSort',
'data-test-subj': 'mlAnomaliesListColumnTypical',
name: (
<EuiToolTip
content={i18n.translate('xpack.ml.overview.anomalyDetection.tableTypicalTooltip', {
defaultMessage: 'The typical values in the anomaly record results.',
<span>
{i18n.translate('xpack.ml.anomaliesTable.typicalSortColumnName', {
defaultMessage: 'Typical',
})}
>
<span>
{i18n.translate('xpack.ml.anomaliesTable.typicalSortColumnName', {
defaultMessage: 'Typical',
&nbsp;
<EuiIconTip
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignTop"
content={i18n.translate('xpack.ml.overview.anomalyDetection.tableTypicalTooltip', {
defaultMessage: 'The typical values in the anomaly record results.',
})}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
/>
</span>
),
render: (typical, item) => {
const fieldFormat = mlFieldFormatService.getFieldFormat(