Improves the display of the Explorer Chart labels to fix the following issues:
- Long chart labels could be cut off, so it's not possible to tell what entity fields a chart is referring to. A workaround is to hover the info icon tooltip but that's really slow and cumbersome if you have to do it for every chart.
- The list of entity fields and its values is an unformatted text blob which makes it hard to read and tell which values refer to which field.
Changes:
- If any of the chart labels is longer than 60 chars, the entity fields will wrap to a new line (for all charts to a achieve a consistent look).
- Entity fields use EuiBadge and some custom formatting to make it easier to see field/value pairs.
- If the detector description is too long, it still uses ellipsis for text-overflow:
- If the entity badges are too long, they will be just cut off to the right. There's no simple CSS fix for that, we cannot use ellipsis and we don't want to wrap those badges again because then multiple charts could have different heights. I experimented with gradients but that turned out to be somewhat unreliable. I still consider this a good enough improvement compare to the previous version and would like to leave a tweak for that to a follow up PR.
- If there are mixed detectors with and without entity fields and the existing one wrap, multiple charts are aligned considered the height of the entity fields on display:
- Additionally, this changes the link to the single series viewer from custom code using a Font Awesome icon to use EuiButtonEmpty with the same EUI based icon and a tooltip.
Fixes two issues in IE11 for Anomaly Explorer:
- The format of the string returned from element.attr('transform') is different in IE11 so the regex based on it would fail. This fixes the issue and adds tests for the different formats. The code was also changed to gracefully return NaN in case the regex wouldn't return results, the previous version triggered a JS error.
- The migration of the swimlanes to React caused the cell selection to malfunction in IE11. This fixes it by updating the dragSelect library to use the new method setSelectables. The previous method we used (addSelectables) didn't play well with how React rerenders the swimlanes. Note this lib update using the new method will require to run yarn kbn bootstrap.
- This fixes the limit dropdown behavior. The fix for that is actually just the $scope.appState.fetch(); statements in explorer_controller.js, they avoid to run the information stored in appState across modules out of sync.
- Additionally, the aim of this PR is to simplify the state management of Anomaly Explorer in the context of selecting cells in the swimlanes and updating the influencers list, charts and table accordingly.
This was previously defined in uiExports.app, which limited plugins which are not an app of providing a stylesheet. This allows any plugin to define a stylesheet which will be available on page load.
- Even with the check if fadeTimeout was set in show(), I could reproduce race conditions where a new tooltip would disappear again, because a previous fadeTimeout would trigger and set the new tooltips display to none.
- This PR fixes it by adding a non-asynchronous visible flag to mlChartTooltipService to check if the tooltip should stay visible if fadeTimeout triggers.
- This refactor gets rid of jQuery as a requirement for the Anomaly Explorer Swimlanes. All the DOM manipulation previously done by jQuery is now done by d3.
- The primary aim here is to replace jQuery with d3. To avoid refactoring regressions, this PR sticks as much as possible to the original structure. Overall, this could be done in a more "d3"-way, but it's a good start.
- The resulting DOM is a bit different: The structure is exactly the same, just how we use certain data-attributes changed.
- Instead of using jQuery's data-feature for storing click event data, that data is now directly stored on DOM nodes. Again, this could be done in a more "d3"-way but would require quite some further refactoring.
* chore: merge canavs into x-pack
squashed, since 6.x history isn't important and i want to be able to rebase...
* chore: eslint fixes in canvas
adds license headers and includes project linting overrides
* Chore: Reorg the x-pack gulp tasks (#22785)
- Removes deprecated, non-functional lint scripts
- Removes some unused (and barely used) dependencies
- Replaces deprecated `gulp-util` dependency
- Adds eslint rule to prevent future use of deprecated `gulp-util` dependency
- Moves all gulp tasks into `tasks` path
- Moves `gulp_helpers` into `tasks/helpers`
- All tasks in `gulpfile.js` were moved into `tasks` and broken up by domain
This is basically a no-op moving files around PR. All the existing tasks appear to work the same with these changes.
<img width="334" alt="screenshot 2018-09-06 15 42 45" src="https://user-images.githubusercontent.com/404731/45188971-8618c000-b1eb-11e8-9b26-b072ccc7ddb7.png">
* chore: rename files to match rules
* chore: copy canvas dependencies
* chore: reduce package.json to essentials
* chore: make canvas work in xpack
* chore: make browser tests work
* chore: fix include paths
node_modules is in a different relative path
* chore: fix ml tests with canvas code in x-pack
explicitely enable state management so the mlStateFactory tests pass
* chore: fix RBAC tests with canvas
* chore: split up the xpack prepare scripts
* chore: canvas tasks - dev, peg, and plugins
get dev, peg, and plugin building tasks working
* chore: canvas tasks - local tests
* chore: additional file cleanup
* chore: yarn lockfiles and eslint fixes
license headers and some small formatting stuff
- Fixes a regression introduced in #22814. Because of the stricter checking for scope/props updates, resizing the browser window would miss updating the Anomaly Explorer Charts widths. This fixes it by adding a check to trigger anomalyDataChange in redrawOnResize().
- Additionally, if only one chart is up for display, this update makes sure a single chart always spans across the full available width.
- This fixes a regression introduced in #22814. The influencer list wouldn't update if no cell in the swimlanes was selected.
- Renames getTopInfluencers to loadTopInfluencers to be in line with the other functions loadDataForCharts and loadAnomaliesTableData
- Changes the order of arguments for loadDataForCharts so they are the same like in loadTopInfluencers.
- The aim of this is to more clearly visualize how the timerange of the cell selected in the swimlane relates to the time span shown in the charts.
- The most important change is that the vertical date axis ticks no longer are randomly positioned by d3. Instead they are aligned with the cell interval of the swimlane. This way, the date information shown in the swimlane tooltip will always align with the date tick shown left of the emphasized area in the chart.
- The highlighted area now features a gray rounded border to resemble the styling of the selected cell in the swimlane.
- The chart also fixes where to long chart headers would wrap the "View" link to a new line.
- The x/y axis labels blackness has been reduced to reduce emphasis on the labels.
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.
I'd really like to upgrade to Typescript 3 for its `unknown` type, but we need to upgrade to `jest@23` to support a recent version of `ts-jest@23`.
The [jest changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md) breaks down the breaking changes in 23.x, but I found it to be slightly incomplete so I've broken down the changes that actually caused breaks for us here, and addressed each in individual commits to make review a little easier:
- the `testURL` config default was changed from `about:blank` to `http://localhost`
- this cause some XHR requests powered by JSdom to start failing. It seems these requests just do nothing in master but start to fail when JSdom is initialized with an actual URL... I think we would ideally stop sending meaningless XHR requests in the tests, but it was a lot easier to just set the config to `about:blank` for now, and we can worry about cleanup later if necessary
- `expect(...).toThrow()` only passes if an actual error was thrown.
- In two places in the index pattern code we were throwing strings, which broke the assertions. Fortunately/Unfortunately the errors are not being consumed by anything, so I was able to wrap them in `new Error()` without causing any issues.
- snapshots of mock functions now include a `results` array, detailing the return values of the function
- React fragments are now serialized as `<React.Fragment>` instead of `<UNDEFINED>`
- undefined props in React components are now stripped from snapshots
- minor changes to the ordering of mocks, imports resolution, and before hooks caused the uiSettings API tests to start breaking, but I'm replacing them with totally new tests in #22694 so I just deleted them here
- mocks created with `jest.spyOn()` that are restored now have their `mock.calls` reset, so some of the kbn-pm tests stated failing. This was fixed by restoring them with `jest.restoreAllMocks()` rather than trying to do it before the assertions
After the migration to React in #22622, this PR adds more test coverage based on jest to the Anomaly Explorer charts. This is done as preparation for some further refactoring (#22626) and the integration of the support for charts for the rare detector (#21163). The tests use mock data based on a standard multi-metric job using the farequote dataset.
Besided the tests this PR includes the following changes:
- In explore_series.js the path is no longer a concatenanted string but now using a template literal
- The exploreSeries() function is no longer calling window.open by itself, it just returns the link
because of the above, renamed exploreSeries() to getExploreSeriesLink() and moved it to chart_utils.js
- explorer_charts_container_service.js is no longer requiring jQuery itself, it now receiving the required element as a factory argument. Further work on this is planned to get rid of jQuery.
* [ML] Fixing issue with incorrect timezones in jobs list
* refactoring min and max calculation
* changes based on review
* changing TimeStamp to Timestamp
* Move timezone settings into autoload file
* Remove applying setting from timelion
* Remove manual set from ML
* Remove manual set from monitoring
* Remove now obsolete code from embedding test plugin
- This PR migrates the Anomaly Explorer Swimlanes from angularjs to React.
- The approach is similar to the one from #22622: Try to refactor as little of the actual logic as possible, just make sure everything works inside the React component lifecycle. So as a guide for the review: No actual code within all the functions/methods changed, only the bits and pieces which needed to be tied into the React component lifecycle.
- The remaining wrapping angular directive is now only listening for data changes and passes its scope and other necessary data on as props to the React component.
This fixes bucket span estimation for the machine learning admin user when security is enabled. The original issue was that the machine learning admin by default doesn't have the necessary permissions to call cluster.getSettings to get the settings search.max_buckets. This is now fixed by using callWithInternalUser() and additional permissions checks.
* [ML] [WIP] Adding group selector to jobs management
* adding group name validation
* removing comment
* adding keyboard events
* moving new group input to its own component
* changes based on review
* adding tooltip
* adding better error reporting
