[ML] Replaces jQuery's $el.width() with element.clientWidth. (#18…

…0523) ## Summary Gets rid of leftover usage of jQuery. Replaces jQuery `$el.width()` with `element.clientWidth` that was used in the Anomaly Explorer chart for rare detectors. I updated the jest test for the component to return timestamps that result in a reasonable amount of ticks. A jest `spy` was added to mock `clientWidth` which is not available via `jsdom` because it lacks a layout engine. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
elastic · Apr 23, 2024 · 9ce171c · 9ce171c
1 parent 207094d
commit 9ce171c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 31 deletions.
diff --git a/.../plugins/ml/public/application/explorer/explorer_charts/__mocks__/mock_chart_data_rare.js b/.../plugins/ml/public/application/explorer/explorer_charts/__mocks__/mock_chart_data_rare.js
@@ -7,27 +7,27 @@
 
 export const chartData = [
   {
-    date: 1487899800000,
+    date: 1709262000000,
     entity: '200',
     value: 1741.5652200000002,
   },
   {
-    date: 1487899800000,
+    date: 1709262000000,
     entity: '404',
     value: 494.30564000000004,
   },
   {
-    date: 1487899800000,
+    date: 1709262000000,
     entity: '304',
     value: 160.93672,
   },
   {
-    date: 1487899800000,
+    date: 1709262000000,
     entity: '301',
     value: 57.4774,
   },
   {
-    date: 1487837700000,
+    date: 1708668000000,
     value: 42,
     entity: '303',
     anomalyScore: 84.08759,

diff --git a/...ins/ml/public/application/explorer/explorer_charts/__mocks__/mock_series_config_rare.json b/...ins/ml/public/application/explorer/explorer_charts/__mocks__/mock_series_config_rare.json
@@ -44,10 +44,10 @@
     ]
   },
   "loading": false,
-  "plotEarliest": 1487774250000,
-  "plotLatest": 1487900250000,
-  "selectedEarliest": 1487836800000,
-  "selectedLatest": 1487837699999,
+  "plotEarliest": 1708171200000,
+  "plotLatest": 1709294400000,
+  "selectedEarliest": 1708646400000,
+  "selectedLatest": 1708819200000,
   "chartLimits": {
     "max": 9294.095580000001,
     "min": 5.74774

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
@@ -14,7 +14,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import d3 from 'd3';
-import $ from 'jquery';
 import moment from 'moment';
 
 import { i18n } from '@kbn/i18n';
@@ -117,14 +116,12 @@ export class ExplorerChartDistribution extends React.Component {
     drawRareChart(filteredChartData);
 
     function init({ chartData, functionDescription }) {
-      const $el = $('.ml-explorer-chart');
-
       // Clear any existing elements from the visualization,
       // then build the svg elements for the chart.
       const chartElement = d3.select(element).select('.content-wrapper');
       chartElement.select('svg').remove();
 
-      const svgWidth = $el.width();
+      const svgWidth = element.clientWidth;
       const svgHeight = chartHeight + margin.top + margin.bottom;
 
       const svg = chartElement

diff --git a/...lugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js b/...lugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.test.js
@@ -25,14 +25,6 @@ const utilityProps = {
   },
 };
 
-const servicesMock = {
-  mlServices: {
-    mlFieldFormatService: {
-      getFieldFormat: jest.fn(),
-    },
-  },
-};
-
 describe('ExplorerChart', () => {
   const mlSelectSeverityServiceMock = {
     state: {
@@ -54,10 +46,11 @@ describe('ExplorerChart', () => {
     };
 
     const wrapper = mountWithIntl(
-      <KibanaContextProvider services={servicesMock}>
+      <KibanaContextProvider services={kibanaContextMock.services}>
         <ExplorerChartDistribution
           mlSelectSeverityService={mlSelectSeverityServiceMock}
           tooltipService={mockTooltipService}
+          severity={0}
           {...utilityProps}
         />
       </KibanaContextProvider>
@@ -81,11 +74,12 @@ describe('ExplorerChart', () => {
     };
 
     const wrapper = mountWithIntl(
-      <KibanaContextProvider services={servicesMock}>
+      <KibanaContextProvider services={kibanaContextMock.services}>
         <ExplorerChartDistribution
           seriesConfig={config}
           mlSelectSeverityService={mlSelectSeverityServiceMock}
           tooltipService={mockTooltipService}
+          severity={0}
           {...utilityProps}
         />
       </KibanaContextProvider>
@@ -106,6 +100,7 @@ describe('ExplorerChart', () => {
     const config = {
       ...seriesConfig,
       chartData,
+      chartLimits: { min: 201039318, max: 625736376 },
     };
 
     const mockTooltipService = {
@@ -115,12 +110,13 @@ describe('ExplorerChart', () => {
 
     // We create the element including a wrapper which sets the width:
     return mountWithIntl(
-      <KibanaContextProvider services={servicesMock}>
+      <KibanaContextProvider services={kibanaContextMock.services}>
         <div style={{ width: '500px' }}>
           <ExplorerChartDistribution
             seriesConfig={config}
             mlSelectSeverityService={mlSelectSeverityServiceMock}
             tooltipService={mockTooltipService}
+            severity={0}
             {...utilityProps}
           />
         </div>
@@ -156,7 +152,7 @@ describe('ExplorerChart', () => {
     expect(+selectedInterval.getAttribute('height')).toBe(166);
 
     const xAxisTicks = wrapper.getDOMNode().querySelector('.x').querySelectorAll('.tick');
-    expect([...xAxisTicks]).toHaveLength(1);
+    expect([...xAxisTicks]).toHaveLength(6);
     const yAxisTicks = wrapper.getDOMNode().querySelector('.y').querySelectorAll('.tick');
     expect([...yAxisTicks]).toHaveLength(5);
     const emphasizedAxisLabel = wrapper

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
@@ -14,7 +14,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import d3 from 'd3';
-import $ from 'jquery';
 import moment from 'moment';
 
 import { i18n } from '@kbn/i18n';
@@ -107,14 +106,12 @@ export class ExplorerChartSingleMetric extends React.Component {
     drawLineChart(config.chartData);
 
     function init(chartLimits) {
-      const $el = $('.ml-explorer-chart');
-
       // Clear any existing elements from the visualization,
       // then build the svg elements for the chart.
       const chartElement = d3.select(element).select(`.${CONTENT_WRAPPER_CLASS}`);
       chartElement.select('svg').remove();
 
-      const svgWidth = $el.width();
+      const svgWidth = element.clientWidth;
       const svgHeight = chartHeight + margin.top + margin.bottom;
 
       const svg = chartElement

diff --git a/...ugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js b/...ugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.test.js
@@ -152,7 +152,7 @@ describe('ExplorerChart', () => {
     expect(+selectedInterval.getAttribute('height')).toBe(166);
 
     const xAxisTicks = wrapper.getDOMNode().querySelector('.x').querySelectorAll('.tick');
-    expect([...xAxisTicks]).toHaveLength(1);
+    expect([...xAxisTicks]).toHaveLength(8);
     const yAxisTicks = wrapper.getDOMNode().querySelector('.y').querySelectorAll('.tick');
     expect([...yAxisTicks]).toHaveLength(10);
 
@@ -161,7 +161,7 @@ describe('ExplorerChart', () => {
     expect(paths[1].getAttribute('class')).toBe('domain');
     expect(paths[2].getAttribute('class')).toBe('values-line');
     expect(paths[2].getAttribute('d')).toBe(
-      'MNaN,159.33024504444444ZMNaN,9.166257955555556LNaN,169.60736875555557'
+      'M-19.090909090909093,159.33024504444444ZM-20,9.166257955555556L-20.22727272727273,169.60736875555557'
     );
 
     const dots = wrapper.getDOMNode().querySelector('.values-dots').querySelectorAll('circle');