Skip to content

Commit

Permalink
[ML] Add popover help in Single Metric Viewer (#101446)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lcawl
lcawl authored Jun 8, 2021
1 parent 664cc5f commit 59dae3d
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 51 deletions.
112 changes: 61 additions & 51 deletions x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
EuiBadge,
} from '@elastic/eui';
import { ResizeChecker } from '../../../../../../src/plugins/kibana_utils/public';
import { TimeSeriesExplorerHelpPopover } from './timeseriesexplorer_help_popover';

import { ANOMALIES_TABLE_DEFAULT_QUERY_SIZE } from '../../../common/constants/search';
import {
Expand Down Expand Up @@ -1083,58 +1084,67 @@ export class TimeSeriesExplorer extends React.Component {
hasResults === true && (
<div>
<div className="results-container">
<EuiTitle className="panel-title">
<h2 style={{ display: 'inline' }}>
<span>
{i18n.translate('xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle', {
defaultMessage: 'Single time series analysis of {functionLabel}',
values: { functionLabel: chartDetails.functionLabel },
})}
</span>
&nbsp;
{chartDetails.entityData.count === 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.length > 0 && '('}
{chartDetails.entityData.entities
.map((entity) => {
return `${entity.fieldName}: ${entity.fieldValue}`;
})
.join(', ')}
{chartDetails.entityData.entities.length > 0 && ')'}
</span>
)}
{chartDetails.entityData.count !== 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.map((countData, i) => {
return (
<Fragment key={countData.fieldName}>
{i18n.translate(
'xpack.ml.timeSeriesExplorer.countDataInChartDetailsDescription',
{
defaultMessage:
'{openBrace}{cardinalityValue} distinct {fieldName} {cardinality, plural, one {} other { values}}{closeBrace}',
values: {
openBrace: i === 0 ? '(' : '',
closeBrace:
i === chartDetails.entityData.entities.length - 1 ? ')' : '',
cardinalityValue:
countData.cardinality === 0
? allValuesLabel
: countData.cardinality,
cardinality: countData.cardinality,
fieldName: countData.fieldName,
},
}
)}
{i !== chartDetails.entityData.entities.length - 1 ? ', ' : ''}
</Fragment>
);
})}
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiTitle className="panel-title">
<h2 style={{ display: 'inline' }}>
<span>
{i18n.translate(
'xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle',
{
defaultMessage: 'Single time series analysis of {functionLabel}',
values: { functionLabel: chartDetails.functionLabel },
}
)}
</span>
)}
</h2>
</EuiTitle>

&nbsp;
{chartDetails.entityData.count === 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.length > 0 && '('}
{chartDetails.entityData.entities
.map((entity) => {
return `${entity.fieldName}: ${entity.fieldValue}`;
})
.join(', ')}
{chartDetails.entityData.entities.length > 0 && ')'}
</span>
)}
{chartDetails.entityData.count !== 1 && (
<span className="entity-count-text">
{chartDetails.entityData.entities.map((countData, i) => {
return (
<Fragment key={countData.fieldName}>
{i18n.translate(
'xpack.ml.timeSeriesExplorer.countDataInChartDetailsDescription',
{
defaultMessage:
'{openBrace}{cardinalityValue} distinct {fieldName} {cardinality, plural, one {} other { values}}{closeBrace}',
values: {
openBrace: i === 0 ? '(' : '',
closeBrace:
i === chartDetails.entityData.entities.length - 1
? ')'
: '',
cardinalityValue:
countData.cardinality === 0
? allValuesLabel
: countData.cardinality,
cardinality: countData.cardinality,
fieldName: countData.fieldName,
},
}
)}
{i !== chartDetails.entityData.entities.length - 1 ? ', ' : ''}
</Fragment>
);
})}
</span>
)}
</h2>
</EuiTitle>
<EuiFlexItem grow={false}>
<TimeSeriesExplorerHelpPopover />
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexGroup style={{ float: 'right' }}>
{showModelBoundsCheckbox && (
<EuiFlexItem grow={false}>
Expand Down
64 changes: 64 additions & 0 deletions x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer_help_popover.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/*
* 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 } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { HelpPopover, HelpPopoverButton } from '../components/help_popover/help_popover';

export const TimeSeriesExplorerHelpPopover = () => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);

return (
<HelpPopover
anchorPosition="upCenter"
button={
<HelpPopoverButton
onClick={() => {
setIsPopoverOpen(!isPopoverOpen);
}}
/>
}
closePopover={() => setIsPopoverOpen(false)}
isOpen={isPopoverOpen}
title={i18n.translate('xpack.ml.timeSeriesExplorer.popoverTitle', {
defaultMessage: 'Single time series analysis',
})}
>
<p>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.popoverBasicExplanation"
defaultMessage="This chart illustrates the actual data values over time for a specific detector. You can examine an event by sliding the time selector and changing its length. For the most accurate view, set the zoom size to auto."
/>
</p>
<p>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.popoverAnomalyExplanation"
defaultMessage="An anomaly score is calculated for each bucket time interval, with a value from 0 to 100. Anomalous events are highlighted in colors that indicate their severity. If an anomaly is depicted with a cross symbol instead of a dot, it has a medium or high multi-bucket impact. This extra analysis can catch anomalies even when they fall within the bounds of expected behavior."
/>
</p>
<p>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.popoverForecastExplanation"
defaultMessage="If you create a forecast, predicted data values are added to the chart. A shaded area around these values represents the confidence level; as you forecast further into the future, the confidence level generally decreases."
/>
</p>
<p>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.popoverAnnotationsExplanation"
defaultMessage="You can also optionally annotate your job results by drag-selecting a period of time in the chart and adding a description. Some annotations are generated automatically to indicate noteworthy occurrences."
/>
</p>
<p>
<FormattedMessage
id="xpack.ml.timeSeriesExplorer.popoverModelPlotExplanation"
defaultMessage="If model plot is enabled, you can optionally show model bounds, which are represented by a shaded area in the chart. As the job analyzes more data, it learns to more closely predict the expected patterns of behavior."
/>
</p>
</HelpPopover>
);
};

0 comments on commit 59dae3d

Please sign in to comment.