Skip to content

[7.x] [ML] Add tooltips in Anomalies table (#97350) #97750

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.

Sign up for GitHub

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

Merged
lcawl merged 2 commits into from
Apr 21, 2021
Merged

[7.x] [ML] Add tooltips in Anomalies table (#97350) #97750

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8d052c
[ML] Add tooltips in Anomalies table (#97350)
lcawl Apr 20, 2021
435e5c2
Merge branch '7.x' into backport/7.x/pr-97350
kibanamachine Apr 20, 2021
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
24 changes: 12 additions & 12 deletions x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,20 +65,20 @@ describe('AnomaliesTable', () => {
expect(columns).toEqual(
expect.arrayContaining([
expect.objectContaining({
name: 'time',
name: 'Time',
}),
expect.objectContaining({
name: 'severity',
field: 'severity',
}),
expect.objectContaining({
name: 'detector',
name: 'Detector',
}),
expect.objectContaining({
field: 'entityValue',
name: 'found for',
name: 'Found for',
}),
expect.objectContaining({
name: 'influenced by',
name: 'Influenced by',
}),
expect.objectContaining({
field: 'actualSort',
Expand All @@ -87,10 +87,10 @@ describe('AnomaliesTable', () => {
field: 'typicalSort',
}),
expect.objectContaining({
name: 'description',
name: 'Description',
}),
expect.objectContaining({
name: 'category examples',
name: 'Category examples',
}),
])
);
Expand Down Expand Up @@ -120,7 +120,7 @@ describe('AnomaliesTable', () => {
expect(columns).toEqual(
expect.not.arrayContaining([
expect.objectContaining({
name: 'found for',
name: 'Found for',
}),
])
);
Expand Down Expand Up @@ -150,7 +150,7 @@ describe('AnomaliesTable', () => {
expect(columns).toEqual(
expect.not.arrayContaining([
expect.objectContaining({
name: 'influenced by',
name: 'Influenced by',
}),
])
);
Expand Down Expand Up @@ -180,7 +180,7 @@ describe('AnomaliesTable', () => {
expect(columns).toEqual(
expect.not.arrayContaining([
expect.objectContaining({
name: 'actual',
name: 'Actual',
}),
])
);
Expand Down Expand Up @@ -210,7 +210,7 @@ describe('AnomaliesTable', () => {
expect(columns).toEqual(
expect.not.arrayContaining([
expect.objectContaining({
name: 'typical',
name: 'Typical',
}),
])
);
Expand Down Expand Up @@ -240,7 +240,7 @@ describe('AnomaliesTable', () => {
expect(columns).toEqual(
expect.arrayContaining([
expect.objectContaining({
name: 'job ID',
name: 'Job ID',
}),
])
);
Expand Down
34 changes: 23 additions & 11 deletions x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function getColumns(
field: 'time',
'data-test-subj': 'mlAnomaliesListColumnTime',
name: i18n.translate('xpack.ml.anomaliesTable.timeColumnName', {
defaultMessage: 'time',
defaultMessage: 'Time',
}),
dataType: 'date',
scope: 'row',
Expand All @@ -110,9 +110,21 @@ export function getColumns(
{
field: 'severity',
'data-test-subj': 'mlAnomaliesListColumnSeverity',
name: i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
defaultMessage: 'severity',
}),
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',
})}
<EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
</span>
</EuiToolTip>
),
render: (score, item) => (
<SeverityCell score={score} multiBucketImpact={item.source.multi_bucket_impact} />
),
Expand All @@ -122,7 +134,7 @@ export function getColumns(
field: 'detector',
'data-test-subj': 'mlAnomaliesListColumnDetector',
name: i18n.translate('xpack.ml.anomaliesTable.detectorColumnName', {
defaultMessage: 'detector',
defaultMessage: 'Detector',
}),
render: (detectorDescription, item) => (
<DetectorCell detectorDescription={detectorDescription} numberOfRules={item.rulesLength} />
Expand All @@ -137,7 +149,7 @@ export function getColumns(
field: 'entityValue',
'data-test-subj': 'mlAnomaliesListColumnFoundFor',
name: i18n.translate('xpack.ml.anomaliesTable.entityValueColumnName', {
defaultMessage: 'found for',
defaultMessage: 'Found for',
}),
render: (entityValue, item) => (
<EntityCell
Expand All @@ -157,7 +169,7 @@ export function getColumns(
field: 'influencers',
'data-test-subj': 'mlAnomaliesListColumnInfluencers',
name: i18n.translate('xpack.ml.anomaliesTable.influencersColumnName', {
defaultMessage: 'influenced by',
defaultMessage: 'Influenced by',
}),
render: (influencers) => (
<InfluencersCell
Expand Down Expand Up @@ -242,7 +254,7 @@ export function getColumns(
field: 'metricDescriptionSort',
'data-test-subj': 'mlAnomaliesListColumnDescription',
name: i18n.translate('xpack.ml.anomaliesTable.metricDescriptionSortColumnName', {
defaultMessage: 'description',
defaultMessage: 'Description',
}),
render: (metricDescriptionSort, item) => (
<DescriptionCell actual={item.actual} typical={item.typical} />
Expand All @@ -258,7 +270,7 @@ export function getColumns(
field: 'jobId',
'data-test-subj': 'mlAnomaliesListColumnJobID',
name: i18n.translate('xpack.ml.anomaliesTable.jobIdColumnName', {
defaultMessage: 'job ID',
defaultMessage: 'Job ID',
}),
sortable: true,
});
Expand All @@ -269,7 +281,7 @@ export function getColumns(
columns.push({
'data-test-subj': 'mlAnomaliesListColumnCategoryExamples',
name: i18n.translate('xpack.ml.anomaliesTable.categoryExamplesColumnName', {
defaultMessage: 'category examples',
defaultMessage: 'Category examples',
}),
truncateText: true,
render: (item) => {
Expand Down Expand Up @@ -299,7 +311,7 @@ export function getColumns(
columns.push({
'data-test-subj': 'mlAnomaliesListColumnAction',
name: i18n.translate('xpack.ml.anomaliesTable.actionsColumnName', {
defaultMessage: 'actions',
defaultMessage: 'Actions',
}),
render: (item) => {
if (showLinksMenuForItem(item, showViewSeriesLink) === true) {
Expand Down
18 changes: 9 additions & 9 deletions x-pack/plugins/ml/public/application/components/anomalies_table/anomaly_details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,14 @@ function getDetailsItems(anomaly, examples, filter) {
}
items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.timeTitle', {
defaultMessage: 'time',
defaultMessage: 'Time',
}),
description: timeDesc,
});

items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.functionTitle', {
defaultMessage: 'function',
defaultMessage: 'Function',
}),
description:
source.function !== ML_JOB_AGGREGATION.METRIC ? source.function : source.function_description,
Expand All @@ -139,7 +139,7 @@ function getDetailsItems(anomaly, examples, filter) {
if (source.field_name !== undefined) {
items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.fieldNameTitle', {
defaultMessage: 'fieldName',
defaultMessage: 'Field name',
}),
description: source.field_name,
});
Expand All @@ -149,7 +149,7 @@ function getDetailsItems(anomaly, examples, filter) {
if (anomaly.actual !== undefined && showActualForFunction(functionDescription) === true) {
items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.actualTitle', {
defaultMessage: 'actual',
defaultMessage: 'Actual',
}),
description: formatValue(anomaly.actual, source.function, undefined, source),
});
Expand All @@ -158,15 +158,15 @@ function getDetailsItems(anomaly, examples, filter) {
if (anomaly.typical !== undefined && showTypicalForFunction(functionDescription) === true) {
items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.typicalTitle', {
defaultMessage: 'typical',
defaultMessage: 'Typical',
}),
description: formatValue(anomaly.typical, source.function, undefined, source),
});
}

items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.jobIdTitle', {
defaultMessage: 'job ID',
defaultMessage: 'Job ID',
}),
description: anomaly.jobId,
});
Expand All @@ -177,15 +177,15 @@ function getDetailsItems(anomaly, examples, filter) {
) {
items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.multiBucketImpactTitle', {
defaultMessage: 'multi-bucket impact',
defaultMessage: 'Multi-bucket impact',
}),
description: getMultiBucketImpactLabel(source.multi_bucket_impact),
});
}

items.push({
title: i18n.translate('xpack.ml.anomaliesTable.anomalyDetails.probabilityTitle', {
defaultMessage: 'probability',
defaultMessage: 'Probability',
}),
description: source.probability,
});
Expand Down Expand Up @@ -565,7 +565,7 @@ export class AnomalyDetails extends Component {
<EuiLink onClick={() => this.toggleAllInfluencers()}>
<FormattedMessage
id="xpack.ml.anomaliesTable.anomalyDetails.anomalyDescriptionShowLessLinkText"
defaultMessage="show less"
defaultMessage="Show less"
/>
</EuiLink>
)}
Expand Down