[ML] Functional tests for Anomaly swim lane (#94723) (#95313)

* [ML] update @elastic/charts

* [ML] swim lane service, axes tests

* [ML] check single cell selection and current URL

* [ML] clear selection

* [ML] assert anomaly explorer charts

* [ML] fix unit test

* [ML] assert anomalies table and top influencers list

* [ML] update apiDoc version

* [ML] exclude host from the URL assertion

* [ML] clicks view by swim lane

* [ML] fix method for cell selection

* [ML] brush action tests

* [ML] use debug state flag

* [ML] declare window interface

* [ML] pagination tests

* [ML] enable test

* [ML] scroll into view for swim lane actions

* [ML] rename URL assertion method

* [ML] fix assertion for charts count

* [ML] extend assertion

* [ML] refactor test subjects selection

* [ML] fix assertSelection

* [ML] reduce timeout for charts assertion

Co-authored-by: Dima Arnautov <dmitrii.arnautov@elastic.co>

test/functional/services/visualizations/elastic_chart.ts

@@ -29,7 +29,11 @@ export function ElasticChartProvider({ getService }: FtrProviderContext) {
   const browser = getService('browser');
 
   class ElasticChart {
-    public async getCanvas() {
+    public async getCanvas(dataTestSubj?: string) {
+      if (dataTestSubj) {
+        const chart = await this.getChart(dataTestSubj);
+        return await chart.findByClassName('echCanvasRenderer');
+      }
       return await find.byCssSelector('.echChart canvas:last-of-type');
     }
 

x-pack/plugins/ml/public/application/explorer/anomaly_timeline.tsx

@@ -160,7 +160,11 @@ export const AnomalyTimeline: FC<AnomalyTimelineProps> = React.memo(
                 </EuiFlexItem>
                 {selectedCells ? (
                   <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty size="xs" onClick={setSelectedCells.bind(null, undefined)}>
+                    <EuiButtonEmpty
+                      size="xs"
+                      onClick={setSelectedCells.bind(null, undefined)}
+                      data-test-subj="mlAnomalyTimelineClearSelection"
+                    >
                       <FormattedMessage
                         id="xpack.ml.explorer.clearSelectionLabel"
                         defaultMessage="Clear selection"

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

@@ -255,7 +255,7 @@ export const ExplorerChartsContainerUI = ({
   return (
     <>
       <ExplorerChartsErrorCallOuts errorMessagesByType={errorMessages} />
-      <EuiFlexGrid columns={chartsColumns}>
+      <EuiFlexGrid columns={chartsColumns} data-test-subj="mlExplorerChartsContainer">
         {seriesToUse.length > 0 &&
           seriesToUse.map((series) => (
             <EuiFlexItem

x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container.test.js

@@ -79,7 +79,7 @@ describe('ExplorerChartsContainer', () => {
     );
 
     expect(wrapper.html()).toBe(
-      '<div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--wrap euiFlexGrid--responsive"></div>'
+      '<div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--wrap euiFlexGrid--responsive" data-test-subj="mlExplorerChartsContainer"></div>'
     );
   });
 

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -26,6 +26,8 @@ import {
   HeatmapSpec,
   TooltipSettings,
   HeatmapBrushEvent,
+  Position,
+  ScaleType,
 } from '@elastic/charts';
 import moment from 'moment';
 
@@ -44,6 +46,15 @@ import './_explorer.scss';
 import { EMPTY_FIELD_VALUE_LABEL } from '../timeseriesexplorer/components/entity_control/entity_control';
 import { useUiSettings } from '../contexts/kibana';
 
+declare global {
+  interface Window {
+    /**
+     * Flag used to enable debugState on elastic charts
+     */
+    _echDebugStateFlag?: boolean;
+  }
+}
+
 /**
  * Ignore insignificant resize, e.g. browser scrollbar appearance.
  */
@@ -352,7 +363,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
           direction={'column'}
           style={{ width: '100%', height: '100%', overflow: 'hidden' }}
           ref={resizeRef}
-          data-test-subj="mlSwimLaneContainer"
+          data-test-subj={dataTestSubj}
         >
           <EuiFlexItem
             style={{
@@ -361,26 +372,24 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
             }}
             grow={false}
           >
-            <div
-              style={{ height: `${containerHeight}px`, position: 'relative' }}
-              data-test-subj={dataTestSubj}
-            >
+            <div style={{ height: `${containerHeight}px`, position: 'relative' }}>
               {showSwimlane && !isLoading && (
                 <Chart className={'mlSwimLaneContainer'}>
                   <Settings
                     onElementClick={onElementClick}
                     showLegend
-                    legendPosition="top"
+                    legendPosition={Position.Top}
                     xDomain={{
                       min: swimlaneData.earliest * 1000,
                       max: swimlaneData.latest * 1000,
                       minInterval: swimlaneData.interval * 1000,
                     }}
                     tooltip={tooltipOptions}
+                    debugState={window._echDebugStateFlag ?? false}
                   />
                   <Heatmap
                     id={id}
-                    colorScale="threshold"
+                    colorScale={ScaleType.Threshold}
                     ranges={[
                       ANOMALY_THRESHOLD.LOW,
                       ANOMALY_THRESHOLD.WARNING,
@@ -402,7 +411,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
                     valueAccessor="value"
                     highlightedData={highlightedData}
                     valueFormatter={getFormattedSeverityScore}
-                    xScaleType="time"
+                    xScaleType={ScaleType.Time}
                     ySortPredicate="dataIndex"
                     config={swimLaneConfig}
                   />

x-pack/plugins/ml/public/application/explorer/swimlane_pagination.tsx

@@ -57,6 +57,7 @@ export const SwimLanePagination: FC<SwimLanePaginationProps> = ({
           closePopover();
           setPerPage(v);
         }}
+        data-test-subj={`${v} rows`}
       >
         <FormattedMessage
           id="xpack.ml.explorer.swimLaneSelectRowsPerPage"
@@ -78,19 +79,22 @@ export const SwimLanePagination: FC<SwimLanePaginationProps> = ({
               iconType="arrowDown"
               iconSide="right"
               onClick={onButtonClick}
+              data-test-subj="mlSwimLanePageSizeControl"
             >
-              <FormattedMessage
-                id="xpack.ml.explorer.swimLaneRowsPerPage"
-                defaultMessage="Rows per page: {rowsCount}"
-                values={{ rowsCount: perPage }}
-              />
+              <span data-test-subj={perPage}>
+                <FormattedMessage
+                  id="xpack.ml.explorer.swimLaneRowsPerPage"
+                  defaultMessage="Rows per page: {rowsCount}"
+                  values={{ rowsCount: perPage }}
+                />
+              </span>
             </EuiButtonEmpty>
           }
           isOpen={isPopoverOpen}
           closePopover={closePopover}
           panelPaddingSize="none"
         >
-          <EuiContextMenuPanel items={items} />
+          <EuiContextMenuPanel items={items} data-test-subj="mlSwimLanePageSizePanel" />
         </EuiPopover>
       </EuiFlexItem>
 
@@ -102,6 +106,7 @@ export const SwimLanePagination: FC<SwimLanePaginationProps> = ({
           pageCount={pageCount}
           activePage={componentFromPage}
           onPageClick={goToPage}
+          data-test-subj="mlSwimLanePagination"
         />
       </EuiFlexItem>
     </EuiFlexGroup>

x-pack/plugins/ml/server/routes/apidoc.json

@@ -1,6 +1,6 @@
 {
   "name": "ml_kibana_api",
-  "version": "7.11.0",
+  "version": "7.13.0",
   "description": "This is the documentation of the REST API provided by the Machine Learning Kibana plugin. Each API is experimental and can include breaking changes in any version.",
   "title": "ML Kibana API",
   "order": [
@@ -159,6 +159,9 @@
     "GetTrainedModel",
     "GetTrainedModelStats",
     "GetTrainedModelPipelines",
-    "DeleteTrainedModel"
+    "DeleteTrainedModel",
+
+    "Alerting",
+    "PreviewAlert"
   ]
 }

x-pack/plugins/ml/server/routes/apidoc_scripts/version_filter.ts

@@ -7,7 +7,7 @@
 
 import { Block } from './types';
 
-const API_VERSION = '7.8.0';
+const API_VERSION = '7.13.0';
 
 /**
  * Post Filter parsed results.