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

Upgrade elastic charts v43.1.1 #121593

Merged
merged 38 commits into from
Jan 27, 2022

Conversation

nickofthyme
Copy link
Contributor

@nickofthyme nickofthyme commented Dec 18, 2021

Summary

This PR updates @elastic/charts to v43.0.0 which included some breaking changes listed below per version.

v41.0.0

Removal of config from Partition, Heatmap, Goal and Wordcloud specs. The config props were moved to either the respective spec or theme section. See details breaking changes from v41.0.0.

v42.0.0

  • types: The xAccessor and yAccessor are now required on all xy chart specs. Stronger typing on data prop that may cause type errors when using untyped array (i.e. const arr: never[] = []). Other minor type changes related to spec types.
  • heatmap: The heatmap yAxisLabel.padding style type is changed from Pixel | Partial to Pixels | Padding. The heatmap axis labels are now correctly subjected to padding calculations and it will result in a slightly different position of labels.

v43.0.0

  • xy: The time axis labels of a time-series chart configured without the timeZone prop are now rendering the labels with the local browser timezone instead of UTC.

Followup needed to deprecate EuiChartTheme.partition in elastic/eui#5492. Workaround used for now.

Checklist

@nickofthyme nickofthyme added Feature:ElasticCharts Issues related to the elastic-charts library Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Vis Editor Visualization editor issues Feature:Lens labels Dec 18, 2021
@nickofthyme nickofthyme changed the title Upgrade elastic charts v41.0.0 - breaking Upgrade elastic charts v41.0.1 - breaking Jan 5, 2022
@nickofthyme nickofthyme marked this pull request as ready for review January 5, 2022 21:07
@nickofthyme nickofthyme requested review from a team as code owners January 5, 2022 21:07
@elasticmachine
Copy link
Contributor

Pinging @elastic/datavis (Feature:ElasticCharts)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

@nickofthyme nickofthyme added v7.17.0 v8.1.0 backport:skip This commit does not require backporting and removed blocked backport:skip This commit does not require backporting labels Jan 5, 2022
@nickofthyme
Copy link
Contributor Author

@stratoula Ok sorry for the delay. I just updated the branch with the two bug fixes that you mentioned. Ready for your review when you have time. Thanks!

Screen Recording 2022-01-20 at 03 06 47 PM

@nickofthyme nickofthyme requested a review from a team as a code owner January 21, 2022 16:24
@nickofthyme
Copy link
Contributor Author

@elasticmachine merge upstream

@nickofthyme
Copy link
Contributor Author

nickofthyme commented Jan 21, 2022

@elastic/kibana-operations could you review 81d7707?

We removed the need for the ResizeObserver pollyfill in charts and noticed all the jest tests failed. Are you ok adding this pollyfill to the jest preset setup?

Example error ⬇️ Link

FAIL  src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx (33.765 s)
--
  | ● Console
  |  
  | console.error
  | Error: Uncaught [ReferenceError: ResizeObserver is not defined]
  | at reportException (/opt/local-ssd/buildkite/builds/kb-n2-4-311b2dfa96b59569/elastic/kibana-pull-request/kibana/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
  | at innerInvokeEventListeners (/opt/local-ssd/buildkite/builds/kb-n2-4-311b2dfa96b59569/elastic/kibana-pull-request/kibana/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
  | at invokeEventListeners (/opt/local-ssd/buildkite/builds/kb-n2-4-311b2dfa96b59569/elastic/kibana-pull-request/kibana/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
  | at HTMLUnknownElementImpl._dispatch (/opt/local-ssd/buildkite/builds/kb-n2-4-311b2dfa96b59569/elastic/kibana-pull-request/kibana/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
  | at HTMLUnknownElementImpl.dispatchEvent (/opt/local-ssd/buildkite/builds/kb-n2-4-311b2dfa96b59569/elastic/kibana-pull-request/kibana/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
  | at HTMLUnknownElement.dispatchEvent (/opt/local-ssd/buildkite/builds/kb-n2-4-311b2dfa96b59569/elastic/kibana-pull-request/kibana/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
  | at Object.invokeGuardedCallbackDev (/opt/local-ssd/buildkite/builds/kb-n2-4-311b2dfa96b59569/elastic/kibana-pull-request/kibana/node_modules/react-dom/cjs/react-dom.development.js:385:16)

@stratoula
Copy link
Contributor

@elasticmachine merge upstream

Copy link
Contributor

@stratoula stratoula left a comment

Choose a reason for hiding this comment

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

@nickofthyme thank you so much for fixing everything! I can't find any other regression! Code LGTM!

@@ -18,3 +18,5 @@ if (!global.URL.hasOwnProperty('createObjectURL')) {
// Will be replaced with a better solution in EUI
// https://github.com/elastic/eui/issues/3713
global._isJest = true;

global.ResizeObserver = require('resize-observer-polyfill');
Copy link
Contributor

@spalger spalger Jan 24, 2022

Choose a reason for hiding this comment

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

It looks like we typically use ResizeObserver via import { ResizeObserver } from 'resize-observer-polyfill' and not via the global. We don't currently do something like this in the browser, and if this polyfill is necessary for @elastic/charts we should probably include the polyfill in packages/kbn-ui-shared-deps-src/src/polyfills.js

Copy link
Member

Choose a reason for hiding this comment

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

Hey @spalger actually the ResizeObserver is supported by all major browsers we support and we don't need anymore the polyfill.
That's why I've removed the polyfill from the @elastic/charts package.

The problem is that the ResizeObserver object is not available in the window object of JSDOM when running the Jest test. Looks like it is not implemented in JSDOM@26.

I don't think we need to include it into packages/kbn-ui-shared-deps-src/src/polyfills.js and I don't think I need to revert our changes in charts to bring back that polyfill. The polyfill should just live in the test environment because is not supported, but we should not include it in our distribution. What do you think?

Copy link
Member

Choose a reason for hiding this comment

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

I think I've found the issue: in TS the ResizeObserver object is available as a global and it got compiled correctly.
Instead, in JSDOM it is not global but is only a window object.
I've changed the chart compiled code to use window.ResizeObserver instead and the tests are passing. I will push an update into charts soon to fix that

Copy link
Contributor

Choose a reason for hiding this comment

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

Nice, thanks!

Copy link
Member

Choose a reason for hiding this comment

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

Actually, this doesn't solve the problem, I can't figure it ATM so I'm reverting back our commit in the elastic-charts and to include back again the polyfill.
This is anyway an issue that needs to be solved: JSDOM doesn't mock/support the ResizeObserver API, Kibana is using 3 years old with no commits resize-observer-polyfill library.

@markov00 markov00 force-pushed the upgrade-charts-41-breaking branch from 1296e36 to 417c401 Compare January 25, 2022 18:40
@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 2.8MB 2.8MB +158.0B
dataVisualizer 539.4KB 539.4KB +30.0B
expressionHeatmap 15.0KB 15.0KB -42.0B
expressionPie 39.4KB 39.6KB +179.0B
lens 1.0MB 1.0MB +72.0B
ml 3.5MB 3.5MB +51.0B
uptime 704.1KB 704.2KB +70.0B
visTypeTimelion 121.3KB 121.3KB +38.0B
total +556.0B

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
kibana 944 929 -15

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
charts 58.3KB 58.3KB +23.0B
kbnUiSharedDeps-npmDll 6.1MB 6.1MB +5.8KB
observability 84.0KB 83.9KB -69.0B
total +5.8KB

History

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

@dominiqueclarke dominiqueclarke self-requested a review January 26, 2022 15:54
@markov00 markov00 requested a review from spalger January 26, 2022 16:00
Copy link
Contributor

@dominiqueclarke dominiqueclarke left a comment

Choose a reason for hiding this comment

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

RUM charts LGTM

Copy link
Member

@dgieselaar dgieselaar left a comment

Choose a reason for hiding this comment

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

Looked at the code changes and did a quick scan of APM app charts, LGTM!

@markov00 markov00 dismissed spalger’s stale review January 27, 2022 11:14

We bring back the polyfill removing the changes made to the jest polyfill global env #121593 (comment)

@markov00 markov00 changed the title Upgrade elastic charts v43.0.0 Upgrade elastic charts v43.1.1 Jan 27, 2022
@markov00 markov00 merged commit 71e9c60 into elastic:main Jan 27, 2022
@kibanamachine kibanamachine added the backport:skip This commit does not require backporting label Jan 27, 2022
@nickofthyme nickofthyme deleted the upgrade-charts-41-breaking branch January 27, 2022 16:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting Feature:ElasticCharts Issues related to the elastic-charts library Feature:Lens Feature:Vis Editor Visualization editor issues release_note:skip Skip the PR/issue when compiling release notes Team:APM All issues that need APM UI Team support Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.