# Backport This will backport the following commits from `main` to `8.16`: - [chore(NA): upgrade to webpack 5 (#191106)](https://github.com/elastic/kibana/pull/191106) <!--- Backport version: 9.6.4 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Tiago Costa","email":"tiago.costa@elastic.co"},"sourceCommit":{"committedDate":"2025-02-14T03:01:36Z","message":"chore(NA): upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes #89741\r\n\r\nThis PR contains the resulting work of a massive effort that ports our\r\non top bundler abstraction (called @kbn/optimizer) from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term maintenance since v4\r\nwas not receiving updates any longer but will also unblock some new\r\nfeatures that could be beneficial for our future DevEx endeavours.\r\n\r\nNext you can find a small list of all the accomplished tasks on this\r\njourney.\r\n\r\n### Completed Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n- [x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix `@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt previous webpack v4 polyfill-all strategy with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on @kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest resolver for file-loader cases\r\n- [x] Migrate public-path loader on UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x] Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work (--profile flag)\r\n- [x] Recover if possible the previous webpack v4 cacheGroup chunks\r\nrename to something like `data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our first green CI, otherwise work\r\non the errors until we do\r\n- [x] Profile and solve bottlenecks until we get a cold build\r\nperformance similar to the one we had on webpack v4 (`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x] OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n` flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing `NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin)) and\r\nadd each polyfill needed individually per each webpack config to check\r\nif we get smaller bundles. If we do it's better to go with the case by\r\ncase need approach instead of deploying a bunch of polyfills with\r\nNodePolyfillPlugin. As another alternative, create a custom smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x] Evaluate if we want to touch the resolutions on mainFields and\r\nconditionNames\r\n- [x] Understand why `@import 'src/core/public/mixins'` does not work\r\nanymore (not a problem, we should use relative paths anyway but we want\r\nto track why it changed from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden and/or changed from\r\nerror to warning\r\n- [x] Fix license check for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is the\r\nlicense for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis package is a dependency of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic 2.0 license is [classified as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand should only be used for dev dependencies.\r\n- [x] Make sure `resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack configs like storybook one\r\n- [x] Find what is being wrongly removed by usedExports optimization;\r\nhint: I believe it is identifying a lot of exports inside the sync entry\r\nof plugins as unused exports and removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x] Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue to fix sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345) or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console override is needed\r\n- [x] Confirm react prod builds on ui shared deps for distributable\r\n- [x] Remove customization for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics from stats are still aligned with what\r\nwe were collecting before; also verify if the modules used for optimizer\r\ncaches etc are well generated (@kbn/node-libs-browser)\r\n- [x] Fix watch performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Brad White <brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["chore","Team:Operations","release_note:skip","Team:Fleet","v9.0.0","backport:all-open","ci:build-webpack-bundle-analyzer","Team:obs-ux-infra_services","v9.1.0"],"title":"chore(NA): upgrade to webpack 5","number":191106,"url":"https://github.com/elastic/kibana/pull/191106","mergeCommit":{"message":"chore(NA): upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes #89741\r\n\r\nThis PR contains the resulting work of a massive effort that ports our\r\non top bundler abstraction (called @kbn/optimizer) from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term maintenance since v4\r\nwas not receiving updates any longer but will also unblock some new\r\nfeatures that could be beneficial for our future DevEx endeavours.\r\n\r\nNext you can find a small list of all the accomplished tasks on this\r\njourney.\r\n\r\n### Completed Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n- [x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix `@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt previous webpack v4 polyfill-all strategy with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on @kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest resolver for file-loader cases\r\n- [x] Migrate public-path loader on UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x] Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work (--profile flag)\r\n- [x] Recover if possible the previous webpack v4 cacheGroup chunks\r\nrename to something like `data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our first green CI, otherwise work\r\non the errors until we do\r\n- [x] Profile and solve bottlenecks until we get a cold build\r\nperformance similar to the one we had on webpack v4 (`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x] OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n` flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing `NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin)) and\r\nadd each polyfill needed individually per each webpack config to check\r\nif we get smaller bundles. If we do it's better to go with the case by\r\ncase need approach instead of deploying a bunch of polyfills with\r\nNodePolyfillPlugin. As another alternative, create a custom smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x] Evaluate if we want to touch the resolutions on mainFields and\r\nconditionNames\r\n- [x] Understand why `@import 'src/core/public/mixins'` does not work\r\nanymore (not a problem, we should use relative paths anyway but we want\r\nto track why it changed from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden and/or changed from\r\nerror to warning\r\n- [x] Fix license check for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is the\r\nlicense for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis package is a dependency of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic 2.0 license is [classified as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand should only be used for dev dependencies.\r\n- [x] Make sure `resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack configs like storybook one\r\n- [x] Find what is being wrongly removed by usedExports optimization;\r\nhint: I believe it is identifying a lot of exports inside the sync entry\r\nof plugins as unused exports and removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x] Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue to fix sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345) or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console override is needed\r\n- [x] Confirm react prod builds on ui shared deps for distributable\r\n- [x] Remove customization for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics from stats are still aligned with what\r\nwe were collecting before; also verify if the modules used for optimizer\r\ncaches etc are well generated (@kbn/node-libs-browser)\r\n- [x] Fix watch performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Brad White <brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/211145","number":211145,"state":"OPEN"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/191106","number":191106,"mergeCommit":{"message":"chore(NA): upgrade to webpack 5 (#191106)\n\n### Summary\r\n\r\n- Closes #89741\r\n\r\nThis PR contains the resulting work of a massive effort that ports our\r\non top bundler abstraction (called @kbn/optimizer) from Webpack v4 into\r\nWebpack v5. It's essential in terms of long term maintenance since v4\r\nwas not receiving updates any longer but will also unblock some new\r\nfeatures that could be beneficial for our future DevEx endeavours.\r\n\r\nNext you can find a small list of all the accomplished tasks on this\r\njourney.\r\n\r\n### Completed Tasks\r\n- [x] Upgrade dependencies to match the ones on webpack v5\r\n- [x] Fix null-loader usages\r\n- [x] Fix raw-loader usages\r\n- [x] Fix file-loader usages\r\n- [x] Fix url-loader usages\r\n- [x] Fix `@kbn/optimizer-webpack-helpers` to support webpack v5 \r\n- [x] Adopt previous webpack v4 polyfill-all strategy with\r\nnode-polyfill-webpack-plugin\r\n- [x] Fix theme-loader on @kbn/optimizer\r\n- [x] Migrate configurations and ad-hoc loader options on all webpack\r\nconfigs from v4 to v5\r\n- [x] Fix @kbn/test jest resolver for file-loader cases\r\n- [x] Migrate public-path loader on UiSharedDeps\r\n- [x] Fix all usages of webpack-merge\r\n- [x] Migrate BundleRemoteModule\r\n- [x] Migrate BundleRemotesPlugin\r\n- [x] Correctly migrate PopulateBundleCachePlugin\r\n- [x] Correctly migrate BundleMetricsPlugin\r\n- [x] Check if the profiling plugins still work (--profile flag)\r\n- [x] Recover if possible the previous webpack v4 cacheGroup chunks\r\nrename to something like `data.plugin.chunk.0.js`\r\n- [x] Run `/ci` and make sure we get our first green CI, otherwise work\r\non the errors until we do\r\n- [x] Profile and solve bottlenecks until we get a cold build\r\nperformance similar to the one we had on webpack v4 (`node\r\nscripts/build_kibana_platform_plugins --no-cache`).\r\n- [x] OpenSSL Legacy Warnings: try to remove `--openssl-legacy-provider\r\n` flags\r\n- [x] Add Webpack to Renovate config\r\n- [x] Explore removing `NodePolyfillPlugin`\r\n([here](https://www.npmjs.com/package/node-polyfill-webpack-plugin)) and\r\nadd each polyfill needed individually per each webpack config to check\r\nif we get smaller bundles. If we do it's better to go with the case by\r\ncase need approach instead of deploying a bunch of polyfills with\r\nNodePolyfillPlugin. As another alternative, create a custom smaller\r\nplugin with only the union of all needed polyfills.\r\n- [x] Evaluate if we want to touch the resolutions on mainFields and\r\nconditionNames\r\n- [x] Understand why `@import 'src/core/public/mixins'` does not work\r\nanymore (not a problem, we should use relative paths anyway but we want\r\nto track why it changed from v4 to v5)\r\n- [x] BUG: Child compilers are having errors hidden and/or changed from\r\nerror to warning\r\n- [x] Fix license check for\r\n[Artistic-2.0](https://spdx.org/licenses/Artistic-2.0.html) is the\r\nlicense for\r\n[domain-browser](https://github.com/bevry/domain-browser?tab=License-1-ov-file).\r\nThis package is a dependency of\r\n[NodePolyfillPlugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin).\r\nArtistic 2.0 license is [classified as\r\nyellow](https://github.com/elastic/open-source/blob/main/elastic-product-policy.md#yellow-list)\r\nand should only be used for dev dependencies.\r\n- [x] Make sure `resourceQuery: { not: /raw/ }` is not necessary on\r\nother webpack configs like storybook one\r\n- [x] Find what is being wrongly removed by usedExports optimization;\r\nhint: I believe it is identifying a lot of exports inside the sync entry\r\nof plugins as unused exports and removing them. Then `__kbnBootstrap__`\r\ncan't be found\r\n- [x] Rebalance @kbn/optimizer pickMaxWorkerCount\r\n- [x] Re-open the issue to fix sass-warnings\r\n[#190345](https://github.com/elastic/kibana/issues/190345) or downgrade\r\nsass-loader to v10\r\n- [x] Remove previous esm no parse rules\r\n- [x] Confirm esm support is working\r\n- [x] Confirm console override is needed\r\n- [x] Confirm react prod builds on ui shared deps for distributable\r\n- [x] Remove customization for\r\n[xyflow](https://github.com/xyflow/xyflow) from webpack configs\r\n- [x] Clean all the code\r\n- [x] Make sure collected metrics from stats are still aligned with what\r\nwe were collecting before; also verify if the modules used for optimizer\r\ncaches etc are well generated (@kbn/node-libs-browser)\r\n- [x] Fix watch performance\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Brad White <brad.white@elastic.co>","sha":"203bc284781cc830049b3f7948c8fcafa8b7d9a1"}},{"url":"https://github.com/elastic/kibana/pull/211146","number":211146,"branch":"8.x","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/211147","number":211147,"branch":"8.18","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/211148","number":211148,"branch":"8.17","state":"OPEN"}]}] BACKPORT--> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> |
||
---|---|---|
.. | ||
__fixtures__ | ||
canvas_plugin_src | ||
common | ||
i18n | ||
images | ||
public | ||
scripts | ||
server | ||
shareable_runtime | ||
storybook | ||
tasks/mocks | ||
types | ||
.eslintrc.json | ||
.gitignore | ||
CONTRIBUTING.md | ||
jest.config.js | ||
jest_setup.ts | ||
kibana.jsonc | ||
PLUGINS.mdx | ||
README.md | ||
tsconfig.json |
Canvas
"Never look back. The past is done. The future is a blank canvas." ― Suzy Kassem, Rise Up and Salute the Sun
Getting Started
Canvas is included with X-Pack and requires a Basic license or better to use.
Feature Questions
Why are there no tooltips
We've opted for always available data labels instead, for now. While there exists much functionality that can be used for analytical purposes in Canvas our core concern in presentational. In a hands-off presentation format, such as a report or a slideshow, there is no facility for user to mouseover a chart to see a tooltip; data labels are a better fit for us.
Background
What is Canvas?
Canvas is a new visualization application on top of Elasticsearch data. Canvas is extremely versatile, but particularly differentiating example use cases include live infographics, presentations with live-updating charts, and highly customized reports.
Why did we build it? How does this align with the larger Kibana vision?
We realized early on that we are not trying to build one UI “to rule them all” in Kibana. Elasticsearch caters to a wide variety of use cases, users, and audiences and Kibana provides different experiences for these users to explore and interact with their data. Canvas is one of such applications, in particular catering to users looking for desktop-publishing level of control for the presentation of their data summaries.
Does Canvas replace any part of Kibana?
No, it is an alternative experience that does not conflict with other parts of Kibana.
Isn’t there overlap between Canvas and Dashboard?
While both can be used as a way to build up reports, Canvas and Dashboard have different goals. Canvas focuses on highly customizable layout more suited to highly curated presentations, while Dashboard provides a fast and efficient way to build up and manage business analytics and operational dashboards that don’t require a high degree of layout control and customizability.
Where can I see a demo of Canvas?
Elasticon 2017 keynote (starts at 01:27:00): https://www.elastic.co/elasticon/conf/2017/sf/opening-keynote
Shane Connelly's SQL webinar: https://www.elastic.co/webinars/introduction-to-elasticsearch-sql