-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ML] Fixes Anomaly Explorer Swimlane race condition, adds tests. (#22814
) (#22923) This PR addresses parts of #22642: - It gets rid of the use of var that = this;. - dragSelect's action strings are moved to a constants file. - Adds jest tests for the ExplorerSwimlane component. This also fixes the following bugs: - The way we subscribe listeners to the events of the dragSelect library could result in the same event being triggered multiple times. This in turn could cause race conditions when on each event new data gets fetched but in between angular's scope gets updated and could end up in a non-intended way. The result of this were view-by swimlanes not updating correctly or anomaly charts showing non-related charts. This PR fixes it by filtering out consecutive swimlane click events. - When the angular based chart container wrapper directive gets destroyed/re-esetup when using the job pick, it missed unmounting the react component, it didn't trigger componentWillUnmount()and didn't unsubscribe from dragSelectListener.
- Loading branch information
Showing
8 changed files
with
486 additions
and
186 deletions.
There are no files selected for viewing
35 changes: 35 additions & 0 deletions
35
x-pack/plugins/ml/public/explorer/__mocks__/mock_overall_swimlane.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
{ | ||
"laneLabels": [ | ||
"Overall" | ||
], | ||
"points": [ | ||
{ | ||
"laneLabel": "Overall", | ||
"time": 1486425600, | ||
"value": 0 | ||
}, | ||
{ | ||
"laneLabel": "Overall", | ||
"time": 1486440000, | ||
"value": 0.01107053 | ||
}, | ||
{ | ||
"laneLabel": "Overall", | ||
"time": 1486454400, | ||
"value": 0.1870243 | ||
}, | ||
{ | ||
"laneLabel": "Overall", | ||
"time": 1486468800, | ||
"value": 0.5947769 | ||
}, | ||
{ | ||
"laneLabel": "Overall", | ||
"time": 1486483200, | ||
"value": 0 | ||
} | ||
], | ||
"interval": 14400, | ||
"earliest": 1486425600, | ||
"latest": 1486483200 | ||
} |
3 changes: 3 additions & 0 deletions
3
x-pack/plugins/ml/public/explorer/__snapshots__/explorer_swimlane.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`ExplorerSwimlane Overall swimlane 1`] = `"<div class=\\"ml-swimlanes\\"><div class=\\"lane\\"><div class=\\"lane-label\\" style=\\"width: 170px;\\">Overall</div><div class=\\"cells-container\\"><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486425600\\"><div class=\\"sl-cell-inner-dragselect\\"></div></div><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486440000\\" data-score=\\"0.01107053\\"><div class=\\"sl-cell-inner\\" style=\\"background-color: rgb(210, 233, 247);\\"></div></div><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486454400\\" data-score=\\"0.1870243\\"><div class=\\"sl-cell-inner\\" style=\\"background-color: rgb(210, 233, 247);\\"></div></div><div class=\\"sl-cell \\" style=\\"width: 200px;\\" data-lane-label=\\"Overall\\" data-time=\\"1486468800\\" data-score=\\"0.5947769\\"><div class=\\"sl-cell-inner\\" style=\\"background-color: rgb(210, 233, 247);\\"></div></div></div></div><div class=\\"time-tick-labels\\"><svg width=\\"800\\" height=\\"25\\"><g class=\\"x axis\\"><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(0,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T00:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(25,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T00:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(50,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T01:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(75,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T01:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(100,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T02:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(125,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T02:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(150,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T03:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(175,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T03:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(200,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T04:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(225,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T04:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(250,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T05:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(275,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T05:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(300,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T06:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(325,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T06:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(350,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T07:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(375,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T07:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(400,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T08:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(425,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T08:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(450,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T09:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(475,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T09:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(500,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T10:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(525,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T10:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(550,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T11:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(575,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T11:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(600,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T12:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(625,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T12:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(650,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T13:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(675,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T13:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(700,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T14:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(725,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T14:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(750,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T15:00:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(775,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T15:30:00Z</text></g><g class=\\"tick\\" style=\\"opacity: 1;\\" transform=\\"translate(800,0)\\"><line y2=\\"6\\" x2=\\"0\\"></line><text dy=\\".71em\\" style=\\"text-anchor: middle;\\" y=\\"9\\" x=\\"0\\">2017-02-07T16:00:00Z</text></g><path class=\\"domain\\" d=\\"M0,6V0H800V6\\"></path></g></svg></div></div>"`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License; | ||
* you may not use this file except in compliance with the Elastic License. | ||
*/ | ||
|
||
/* | ||
* Contains values for ML anomaly explorer. | ||
*/ | ||
|
||
export const DRAG_SELECT_ACTION = { | ||
NEW_SELECTION: 'newSelection', | ||
ELEMENT_SELECT: 'elementSelect', | ||
DRAG_START: 'dragStart' | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.