[ML] Fix missing selected-interval styling for Explorer anomaly chart…

…s and mismatched scheduled markers styling (#100272) * [ML] Fix missing selected-interval sass * [ML] Only show interval box in explorer page and not in dashboard * [ML] Remove console * [ML] Move showSelectedInterval up * [ML] Update snapshot * [ML] Update styling of scheduled events to match and to be visible Co-authored-by: Kibana Machine <[email protected]>
elastic · May 24, 2021 · 9793a8f · 9793a8f
1 parent bb6c2ef
commit 9793a8f
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 5 deletions.
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
@@ -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/...k/plugins/ml/public/application/explorer/explorer_charts/explorer_anomalies_container.tsx b/...k/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<ExplorerAnomaliesContainerProps> = (
   timeBuckets,
   timefilter,
   onSelectEntity,
+  showSelectedInterval,
 }) => {
   return (
     <>
@@ -96,6 +98,7 @@ export const ExplorerAnomaliesContainer: FC<ExplorerAnomaliesContainerProps> = (
               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
@@ -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/...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/...ck/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
@@ -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}
                 />
               )}
             </MlTooltipComponent>
@@ -214,6 +216,7 @@ function ExplorerChartContainer({
                   seriesConfig={series}
                   severity={severity}
                   tooltipService={tooltipService}
+                  showSelectedInterval={showSelectedInterval}
                 />
               )}
             </MlTooltipComponent>
@@ -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}
               />
             </EuiFlexItem>
           ))}

diff --git 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/...mbeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap b/...mbeddables/anomaly_charts/__snapshots__/embeddable_anomaly_charts_container.test.tsx.snap
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
@@ -181,6 +181,7 @@ export const EmbeddableAnomalyChartsContainer: FC<EmbeddableAnomalyChartsContain
               timeBuckets={timeBuckets}
               timefilter={timefilter}
               onSelectEntity={addEntityFieldFilter}
+              showSelectedInterval={false}
             />
           )}
         </div>