diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss b/x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss index 5eef427226a7c..55ebfe8ab3edb 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/_explorer_chart.scss @@ -12,10 +12,17 @@ opacity: 1; } + rect.selected-interval { + fill: rgba(200, 200, 200, .1); + stroke: $euiColorDarkShade; + stroke-width: $euiSizeXS / 2; + stroke-opacity: .8; + } + rect.scheduled-event-marker { stroke-width: 1px; - stroke: $euiColorLightShade; - fill: $euiColorLightestShade; + stroke: $euiColorDarkShade; + fill: $euiColorLightShade; pointer-events: none; } } diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx index d1e22ef21de25..0fe4d260ffced 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx @@ -31,6 +31,7 @@ interface ExplorerAnomaliesContainerProps { timeBuckets: TimeBuckets; timefilter: TimefilterContract; onSelectEntity: (fieldName: string, fieldValue: string, operation: EntityFieldOperation) => void; + showSelectedInterval?: boolean; } const tooManyBucketsCalloutMsg = i18n.translate( @@ -51,6 +52,7 @@ export const ExplorerAnomaliesContainer: FC = ( timeBuckets, timefilter, onSelectEntity, + showSelectedInterval, }) => { return ( <> @@ -96,6 +98,7 @@ export const ExplorerAnomaliesContainer: FC = ( timefilter, onSelectEntity, tooManyBucketsCalloutMsg, + showSelectedInterval, }} /> )} diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js index fa6d8acfb0e00..7efd36bbe57c6 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js @@ -62,7 +62,7 @@ export class ExplorerChartDistribution extends React.Component { } renderChart() { - const { tooManyBuckets, tooltipService, timeBuckets } = this.props; + const { tooManyBuckets, tooltipService, timeBuckets, showSelectedInterval } = this.props; const element = this.rootNode; const config = this.props.seriesConfig; @@ -357,6 +357,7 @@ export class ExplorerChartDistribution extends React.Component { } function drawRareChartHighlightedSpan() { + if (showSelectedInterval === false) return; // Draws a rectangle which highlights the time span that has been selected for view. // Note depending on the overall time range and the bucket span, the selected time // span may be longer than the range actually being plotted. diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js index 39a3f83961d3a..dd07a7d6cbdee 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js @@ -61,7 +61,7 @@ export class ExplorerChartSingleMetric extends React.Component { } renderChart() { - const { tooManyBuckets, tooltipService, timeBuckets } = this.props; + const { tooManyBuckets, tooltipService, timeBuckets, showSelectedInterval } = this.props; const element = this.rootNode; const config = this.props.seriesConfig; @@ -249,6 +249,8 @@ export class ExplorerChartSingleMetric extends React.Component { } function drawLineChartHighlightedSpan() { + if (showSelectedInterval === false) return; + // Draws a rectangle which highlights the time span that has been selected for view. // Note depending on the overall time range and the bucket span, the selected time // span may be longer than the range actually being plotted. diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js index 2432c6671827e..c37d8b6d51c72 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.js @@ -72,6 +72,7 @@ function ExplorerChartContainer({ onSelectEntity, recentlyAccessed, tooManyBucketsCalloutMsg, + showSelectedInterval, }) { const [explorerSeriesLink, setExplorerSeriesLink] = useState(''); @@ -199,6 +200,7 @@ function ExplorerChartContainer({ seriesConfig={series} severity={severity} tooltipService={tooltipService} + showSelectedInterval={showSelectedInterval} /> )} @@ -214,6 +216,7 @@ function ExplorerChartContainer({ seriesConfig={series} severity={severity} tooltipService={tooltipService} + showSelectedInterval={showSelectedInterval} /> )} @@ -237,6 +240,7 @@ export const ExplorerChartsContainerUI = ({ timefilter, onSelectEntity, tooManyBucketsCalloutMsg, + showSelectedInterval, }) => { const { services: { @@ -296,6 +300,7 @@ export const ExplorerChartsContainerUI = ({ onSelectEntity={onSelectEntity} recentlyAccessed={recentlyAccessed} tooManyBucketsCalloutMsg={tooManyBucketsCalloutMsg} + showSelectedInterval={showSelectedInterval} /> ))} diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss index 8a56a8f0188b8..33f6c65e03e77 100644 --- a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss +++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer.scss @@ -133,7 +133,7 @@ rect.scheduled-event-marker { stroke-width: 1px; - stroke: $euiColorMediumShade; + stroke: $euiColorDarkShade; fill: $euiColorLightShade; pointer-events: none; } diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap b/x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap index 375b041c4db73..e0246439abe57 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap @@ -19,6 +19,7 @@ Object { "val": 75, }, "showCharts": true, + "showSelectedInterval": false, "timeBuckets": TimeBuckets { "_timeBucketsConfig": Object { "dateFormat": undefined, diff --git a/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx index e1748bd21855b..7731d9e822e3a 100644 --- a/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx +++ b/x-pack/plugins/ml/public/embeddables/anomaly_charts/embeddable_anomaly_charts_container.tsx @@ -181,6 +181,7 @@ export const EmbeddableAnomalyChartsContainer: FC )}