[ML] Correctly pass on severity value to anomaly explorer charts. (#55207) (#55328)

- Fixes passing on the severity value correctly to anomaly explorer charts. The wrong value of undefined being passed down caused anomaly markers not showing up.
- This bug surfaced that the severity value was never applied to filter multi-bucket anomalies which is now also fixed by this PR.
- Adds a check if topInfluencers is an array.

x-pack/legacy/plugins/ml/public/application/explorer/explorer.d.ts

@@ -15,6 +15,7 @@ import { AppStateSelectedCells } from '../explorer/explorer_utils';
 
 declare interface ExplorerProps {
   explorerState: ExplorerState;
+  severity: number;
   showCharts: boolean;
   setSelectedCells: (swimlaneSelectedCells: AppStateSelectedCells) => void;
 }

x-pack/legacy/plugins/ml/public/application/explorer/explorer.js

@@ -96,6 +96,7 @@ export class Explorer extends React.Component {
   static propTypes = {
     explorerState: PropTypes.object.isRequired,
     setSelectedCells: PropTypes.func.isRequired,
+    severity: PropTypes.number.isRequired,
     showCharts: PropTypes.bool.isRequired,
   };
 
@@ -260,7 +261,7 @@ export class Explorer extends React.Component {
   };
 
   render() {
-    const { showCharts } = this.props;
+    const { showCharts, severity } = this.props;
 
     const {
       annotationsData,
@@ -276,7 +277,6 @@ export class Explorer extends React.Component {
       queryString,
       selectedCells,
       selectedJobs,
-      severity,
       swimlaneContainerWidth,
       tableData,
       tableQueryString,

x-pack/legacy/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js

@@ -53,7 +53,7 @@ export const ExplorerChartSingleMetric = injectI18n(
     static propTypes = {
       tooManyBuckets: PropTypes.bool,
       seriesConfig: PropTypes.object,
-      severity: PropTypes.number,
+      severity: PropTypes.number.isRequired,
     };
 
     componentDidMount() {
@@ -312,13 +312,16 @@ export const ExplorerChartSingleMetric = injectI18n(
           })
           .on('mouseout', () => mlChartTooltipService.hide());
 
+        const isAnomalyVisible = d =>
+          _.has(d, 'anomalyScore') && Number(d.anomalyScore) >= severity;
+
         // Update all dots to new positions.
         dots
           .attr('cx', d => lineChartXScale(d.date))
           .attr('cy', d => lineChartYScale(d.value))
           .attr('class', d => {
             let markerClass = 'metric-value';
-            if (_.has(d, 'anomalyScore') && Number(d.anomalyScore) >= severity) {
+            if (isAnomalyVisible(d)) {
               markerClass += ` anomaly-marker ${getSeverityWithLow(d.anomalyScore).id}`;
             }
             return markerClass;
@@ -328,9 +331,7 @@ export const ExplorerChartSingleMetric = injectI18n(
         const multiBucketMarkers = lineChartGroup
           .select('.chart-markers')
           .selectAll('.multi-bucket')
-          .data(
+          .data(data.filter(d => isAnomalyVisible(d) && showMultiBucketAnomalyMarker(d) === true));
-            data.filter(d => d.anomalyScore !== null && showMultiBucketAnomalyMarker(d) === true)
-          );
 
         // Remove multi-bucket markers that are no longer needed
         multiBucketMarkers.exit().remove();

x-pack/legacy/plugins/ml/public/application/explorer/explorer_utils.js

@@ -280,11 +280,13 @@ export function loadViewByTopFieldValuesForSelectedTime(
 
           const topFieldValues = [];
           const topInfluencers = resp.influencers[viewBySwimlaneFieldName];
-          topInfluencers.forEach(influencerData => {
+          if (Array.isArray(topInfluencers)) {
-            if (influencerData.maxAnomalyScore > 0) {
+            topInfluencers.forEach(influencerData => {
-              topFieldValues.push(influencerData.influencerFieldValue);
+              if (influencerData.maxAnomalyScore > 0) {
-            }
+                topFieldValues.push(influencerData.influencerFieldValue);
-          });
+              }
+            });
+          }
           resolve(topFieldValues);
         });
     } else {

x-pack/legacy/plugins/ml/public/application/routing/routes/explorer.tsx

@@ -184,6 +184,7 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
           explorerState,
           setSelectedCells,
           showCharts,
+          severity: tableSeverity.val,
         }}
       />
     </div>