Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data.ui] Fix flaky test & lazy loading rendering artifacts. #80612

Merged
merged 4 commits into from
Oct 15, 2020

Conversation

lukeelmers
Copy link
Member

@lukeelmers lukeelmers commented Oct 15, 2020

Closes #79910

In #78889 we split up the components provided by the data plugin to be lazy-loaded via React.lazy. As a result, some flakiness emerged in the <SearchBar /> unit tests as shown in #79910.

Additionally, the fallback UI that was used in that PR included a loader which caused some weird rendering as you waited for the component to be loaded asynchronously. This caused some "dancing" behavior as seen in this screen grab from the SIEM app:

dancing_kql

This PR addresses both of the above issues as follows:

  • For the flaky test, the unit test was reverted to its original state, and a few imports were adjusted so that SearchBar (which is lazy-loaded) didn't also lazy load the sub-components it relied on. Then in the unit test we import the non-lazy version of SearchBar directly, thus avoiding the async issues which I believe were contributing to the flakiness.
  • For the jumping UI, I simply removed the loading animation on all of the components which were touched in the previous PR. In hindsight I think this looks better anyway, since the delay in loading is rather quick, and the "dancing" is gone because we aren't rendering a loading bar in their place.

Merging this bugfix for 7.10 as it handles a regression which would otherwise be released.

@lukeelmers lukeelmers self-assigned this Oct 15, 2020
@lukeelmers lukeelmers added release_note:skip Skip the PR/issue when compiling release notes v7.10.0 v8.0.0 chore labels Oct 15, 2020
Comment on lines +44 to +45
jest.mock('../query_string_input/query_bar_top_row', () => {
return () => <div className="queryBar" />;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the only substantive change in this file; all other changes are pretty much reverting to the original state of the test before #78889 was merged.

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app-arch (Team:AppArch)

@spalger
Copy link
Contributor

spalger commented Oct 15, 2020

@elasticmachine merge upstream

Copy link
Contributor

@spalger spalger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM, though I'm not familiar with this part of the code. If you'd like to get more confidence that this fixes flakiness then I recommend running one of the previously flaky ciGroups a few hundred times in the flaky test runner

@lukeelmers
Copy link
Member Author

I recommend running one of the previously flaky ciGroups a few hundred times in the flaky test runner

I can't use flaky test runner since this is a jest test, but I did run the test in a loop a few hundred times and everything came back green. I'll also re-run CI another time before merging for good measure.

@lukeelmers
Copy link
Member Author

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

async chunk count

id before after diff
data 10 11 +1

async chunks size

id before after diff
data 274.4KB 289.2KB +14.8KB

distributable file count

id before after diff
default 48195 48198 +3
oss 28633 28636 +3

page load bundle size

id before after diff
data 1.1MB 1.1MB -2.4KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@lukeelmers lukeelmers merged commit 20edc75 into elastic:master Oct 15, 2020
@lukeelmers lukeelmers deleted the fix/lazy-ui branch October 15, 2020 18:59
lukeelmers added a commit to lukeelmers/kibana that referenced this pull request Oct 15, 2020
lukeelmers added a commit to lukeelmers/kibana that referenced this pull request Oct 15, 2020
…#80612)

# Conflicts:
#	src/plugins/data/public/ui/index_pattern_select/index.tsx
lukeelmers added a commit that referenced this pull request Oct 16, 2020
…#80731)

# Conflicts:
#	src/plugins/data/public/ui/index_pattern_select/index.tsx

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
lukeelmers added a commit that referenced this pull request Oct 16, 2020
…#80730)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
gmmorris added a commit to gmmorris/kibana that referenced this pull request Oct 16, 2020
* master: (115 commits)
  [ML] Transforms/DF Analytics: Fix data grid column sorting. (elastic#80618)
  added brace import to vis editor (elastic#80652)
  Fix error rate sorting in services list (elastic#80764)
  Emit info log when using custom registry URL (elastic#80768)
  [Reporting] Config Schema Validation for rules[N].protocol strings (elastic#80766)
  Add Storybook a11y addon (elastic#80069)
  Fix anomaly alert selection text (elastic#80746)
  [Security Solution] [Maps] Kibana index pattern, comma bug fix (elastic#80208)
  [kbn/optimizer] tweak split chunks options (elastic#80444)
  update template to use the new team label (elastic#80748)
  [Security Solution] Fix the Field dropdown in Timeline data providers resets when scrolled (elastic#80718)
  Adjusts observability alerting perms to require "all" (elastic#79896)
  [Security Solutions][Detection Engine] Fixes pre-packaged rules which contain exception lists to not overwrite user defined lists   (elastic#80592)
  [data.ui] Fix flaky test & lazy loading rendering artifacts. (elastic#80612)
  Licensed feature usage for connectors (elastic#77679)
  [Security Solution] Cypress template creation (elastic#80180)
  [APM] Hide service if only data is from ML (elastic#80145)
  Fix role mappings test for ESS (elastic#80604)
  [Maps] Add support for envelope (elastic#80614)
  [Security Solution] Update button text according to status (elastic#80389)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore release_note:skip Skip the PR/issue when compiling release notes review v7.10.0 v7.11.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Failing test: SearchBar Should render query bar when no options provided (in reality - timepicker)
5 participants