Migration to Babel7 and @babel/preset-typescript #33093
Merged
Conversation
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
…abel 7. chore(NA): build for kbn-pm with babel 7.
… x-pack to use babel-jest with the new pattern.
…n with babel-jest and the new test mock pattern.
This comment has been minimized.
This comment has been minimized.
💚 Build Succeeded |
Resolves elastic#27513. _This PR is a combination of elastic#31293 (the code changes) + elastic#33570 (test updates). These two PRs were individually reviewed and merged into a feature branch. This combo PR here simply sets up the merge from the feature branch to `master`._ Summary of changes, taken from elastic#31293: ## Before this PR The Logstash Pipeline Viewer UI would make a single Kibana API call to fetch all the information necessary to render the Logstash pipeline. This included information necessary to render the detail drawer that opens up when a user clicks on an individual vertex in the pipeline. Naturally, this single API call fetched _a lot_ of data, not just from the Kibana server but also, in turn, from Elasticsearch as well. The "pro" of this approach was that the user would see instantaneous results if they clicked on a vertex in a pipeline and opened the detail drawer for that vertex. The "cons" were the amount of computation Elasticsearch had to perform and the amount of data being transferred over the wire between Elasticsearch and the Kibana server as well as between the Kibana server and the browser. ## With this PR This PR makes the Kibana API call to fetch data necessary for **initially** rendering the pipeline — that is, with the detail drawer closed — much lighter. When the user clicks on a vertex in a pipeline, a second API call is then made to fetch data necessary for the detail drawer. ## Gains, by the numbers Based on a simple, 1-input, 1-filter, and 1-output pipeline. * Before this PR, the Elasticsearch `logstash_stats` API responses (multiple calls were made using the `composite` aggregation over the `date_histogram` aggregation) generated a total of 1228 aggregation buckets (before any `filter_path`s were applied but across all `composite` "pages"). With this PR, the single `logstash_stats` API response (note that this is just for the initial rendering of the pipeline, with the detail drawer closed) generated 12 buckets (also before any `filter_path`s were applied). That's a **99.02% reduction** in number of buckets. * Before this PR, the Elasticsearch `logstash_stats` API responses added up to 70319 bytes. With this PR, the single `logstash_stats` API response for the same pipeline is 746 bytes. That's a **98.93% reduction** in size. * Before this PR, the Elasticsearch `logstash_state` API response was 7718 bytes. With this PR, the API response for the same pipeline is 2328 bytes. That's a **69.83% reduction** in size. * Before this PR the Kibana API response was 51777 bytes. With this PR, the API response for the same pipeline is 2567 bytes (again, note that this is just for the initial rendering of the pipeline, with the detail drawer closed). That's a **95.04% reduction** in size.
* [Maps] split settings into layer and source panels * fix SCSS import
* [env] exit if starting as root * fix windows * s/--allow-root
* Typescript sample panel action * Update EUI version to match main cabana version * update yarn.lock * add back typings include * use correct relative path
…#21896 (elastic#33694) * adds object type for screen order * adds object type for pointer hovering * Update src/legacy/ui/public/chrome/directives/header_global_nav/components/header.tsx Co-Authored-By: rockfield <[email protected]>
💚 Build Succeeded |
snide
approved these changes
Mar 26, 2019
|
7.x: 4213441 |
mistic
added a commit
that referenced
this pull request
Mar 27, 2019
weltenwort
added a commit
to weltenwort/kibana
that referenced
this pull request
Mar 27, 2019
This restores the functionality of the graphql type generation scripts after elastic#33093. In particular, it properly sets up the babel import hook so schemata can once more be imported from `.ts/.tsx` files.
weltenwort
added a commit
that referenced
this pull request
Mar 27, 2019
This restores the functionality of the graphql type generation scripts after #33093. In particular, it properly sets up the babel import hook so schemata can once more be imported from `.ts/.tsx` files.
joelgriffith
pushed a commit
that referenced
this pull request
Mar 27, 2019
* chore(NA): first changes on every package.json order to support new babel 7. chore(NA): build for kbn-pm with babel 7. * chore(NA): patch babel register to load typescrit * chore(NA): first working version with babel 7 replacing typescript compiler. * fix(NA): common preset declaration in order to make it work with babel-loader. * chore(na): organizing babel preset env package json. * chore(NA): mocha tests enabled. * fix(NA): typo on importing * test(NA): majority of x-pack tests ported to use babel-jest * fix(NA): report info button test with babel-jest. * fix(NA): polling service tests. * test(na): fix server plugins plugin tests. * test(NA): batch of test fixs for jest tests under babel-jest hoisting. * chore(NA): add babel plugin to hoist mock prefixed vars on jest tests. * chore(NA): update yarn.lock file. * chore(NA): tests passing. * chore(NA): remove wrong dep * chore(NA): fix tsconfig * chore(NA): skip babel for ts-jest. * chore(NA): selectively apply the plugin to strip off namespace from ts files. * chore(NA): remove not needed changes from ts tests * chore(NA): removed ts-jest dependency. chore(NA): migrate ts tests on x-pack to use babel-jest with the new pattern. * chore(NA): migrate kibana default distribution typescript tests to run with babel-jest and the new test mock pattern. * chore(NA): merge and solve conflicts with master. * chore(NA): fix problems reported by eslint * chore(NA): fix license ovveride for babel-plugin-mock-imports * chore(NA): update jest integration tests for kbn pm * chore(NA): update babel jest integration tests for kbn pm. * test(NA): update jest integration snapshot for kbn pm. * chore(NA): apply changes according to the pull request reviews. * chore(NA): apply changes according to the pull request reviews. * refact(NA): migrate jest tests to the new pattern. * fix(NA): babel 7 polyfill in the tests bundle. * chore(NA): restore needed step in order to compile x-pack with typescript. * chore(NA): change build to compile typescript with babel for the oss code. chore(NA): change transpile typescript task to only transpile types for x-pack. refact(NA): common preset for babel 7 * Revert "chore(NA): change build to compile typescript with babel for the oss code. chore(NA): change transpile typescript task to only transpile types for x-pack. refact(NA): common preset for babel 7" This reverts commit 2707d53. * fix(NA): import paths for tabConfigConst * chore(NA): fix transpiling error on browser tests * chore(NA): simplify kbn babel preset package. * chore(NA): migrate build to use babel transpiler for typescript excluding xpack. * fix(NA): introduced error on test quick task. * fix(NA): fix preset for client side code on build. * fix(NA): build with babel * fix(NA): negated patterns in the end. * fix(NA): kbn_tp_sample_panel_action creation. * fix(NA): babel typescript transform plugin workaround when exporting interface name. * refact(NA): remove not needed type cast to any on jest test. * docs(NA): add developement documentation about jest mocks test pattern. * chore(NA): missing unmerged path. * chore(NA): fix jest tests for template. * [CCR] Client integration tests (table lists) (#33525) * Force user to re-authenticate if token refresh fails with `400` status code. (#33774) * Improve performance of the Logstash Pipeline Viewer (#33793) Resolves #27513. _This PR is a combination of #31293 (the code changes) + #33570 (test updates). These two PRs were individually reviewed and merged into a feature branch. This combo PR here simply sets up the merge from the feature branch to `master`._ Summary of changes, taken from #31293: ## Before this PR The Logstash Pipeline Viewer UI would make a single Kibana API call to fetch all the information necessary to render the Logstash pipeline. This included information necessary to render the detail drawer that opens up when a user clicks on an individual vertex in the pipeline. Naturally, this single API call fetched _a lot_ of data, not just from the Kibana server but also, in turn, from Elasticsearch as well. The "pro" of this approach was that the user would see instantaneous results if they clicked on a vertex in a pipeline and opened the detail drawer for that vertex. The "cons" were the amount of computation Elasticsearch had to perform and the amount of data being transferred over the wire between Elasticsearch and the Kibana server as well as between the Kibana server and the browser. ## With this PR This PR makes the Kibana API call to fetch data necessary for **initially** rendering the pipeline — that is, with the detail drawer closed — much lighter. When the user clicks on a vertex in a pipeline, a second API call is then made to fetch data necessary for the detail drawer. ## Gains, by the numbers Based on a simple, 1-input, 1-filter, and 1-output pipeline. * Before this PR, the Elasticsearch `logstash_stats` API responses (multiple calls were made using the `composite` aggregation over the `date_histogram` aggregation) generated a total of 1228 aggregation buckets (before any `filter_path`s were applied but across all `composite` "pages"). With this PR, the single `logstash_stats` API response (note that this is just for the initial rendering of the pipeline, with the detail drawer closed) generated 12 buckets (also before any `filter_path`s were applied). That's a **99.02% reduction** in number of buckets. * Before this PR, the Elasticsearch `logstash_stats` API responses added up to 70319 bytes. With this PR, the single `logstash_stats` API response for the same pipeline is 746 bytes. That's a **98.93% reduction** in size. * Before this PR, the Elasticsearch `logstash_state` API response was 7718 bytes. With this PR, the API response for the same pipeline is 2328 bytes. That's a **69.83% reduction** in size. * Before this PR the Kibana API response was 51777 bytes. With this PR, the API response for the same pipeline is 2567 bytes (again, note that this is just for the initial rendering of the pipeline, with the detail drawer closed). That's a **95.04% reduction** in size. * [Maps] split settings into layer and source panels (#33788) * [Maps] split settings into layer and source panels * fix SCSS import * [env] exit if starting as root (#21563) * [env] exit if starting as root * fix windows * s/--allow-root * Typescript sample panel action (#33602) * Typescript sample panel action * Update EUI version to match main cabana version * update yarn.lock * add back typings include * use correct relative path * Home page "recent links" should communicate saved object type #21896 (#33694) * adds object type for screen order * adds object type for pointer hovering * Update src/legacy/ui/public/chrome/directives/header_global_nav/components/header.tsx Co-Authored-By: rockfield <[email protected]>
joelgriffith
pushed a commit
that referenced
this pull request
Mar 27, 2019
This restores the functionality of the graphql type generation scripts after #33093. In particular, it properly sets up the babel import hook so schemata can once more be imported from `.ts/.tsx` files.
mistic
added
the
non-issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
It solves #33027
That PR migrates the entire Kibana to the new babel7 along with the replace of the typescript compiler with the
@babel/preset-typescriptin order to generate the javascript code from the typescript files. It will allow us to simplify our current build configuration and our development environment while it will also improve the optimizer performance.Main Changes
babel-jestts-jest, ts-node and ts-loaderbabel-plugin-typescript-strip-namespacesto strip off the namespaces from/x-pack[\/\\]plugins[\/\\]infra[\/\\].*[\/\\]graphql/as it is not supported by the babel preset typescript and we are only using it for type definition.Caveats with @babel/preset-typescript
Does not support [
namespace][namespace]s.Workaround: Move to using [file exports][fm], or migrate to using the
module { }syntax instead.Does not support [
const enum][const_enum]s because those require type information to compile.Workaround: Remove the
const, which makes it available at runtime.Does not support [
export =][exin] and [import =][exin], because those cannot be compiled to ES.next.Workaround: Convert to using
export defaultandexport const, andimport x, {y} from "z".This caveats info was copied from https://babeljs.io/docs/en/babel-plugin-transform-typescript, you can found the complete info and examples there.
There is also a lot of good information here https://devblogs.microsoft.com/typescript/typescript-and-babel-7/
New jest test mocks pattern
As mentioned above a new pattern to declare the
jest mocksfor the Typescript tests was introduced. The main reason for that decision we made is due to the different hoisting applied bybabelandtypescript. As a result from this, in order to keep benefiting from theauto type inferencewhen testing, and still be able to usejest.mockandjest.doMock, every jest mocks that needs to reference something from an import or an external variable, should be declared in a file in the same directory as the original jest test and with the following name{JEST_TEST_FILE_BASE_NAME}.test.mocks.tsand then should be imported (with or without any important constants) at the top of the test file. A lot of examples could be found into the current PR. In a more structured explanation, the new pattern could be described as follow:Each module could provide a standard mock in
mymodule.mock.tsin case there are other tests that could benefit from using definitions here. This file would not have any jest.mock calls, just dummy objects.Each test defines its mocks in
mymodule.test.mocks.ts. This file could import relevant mocks from the generalised module's mocks file (*.mock.ts) and call jest.mock for each of them. If there is any relevant dummy mock objects to generalise (and to be used by other tests), the dummy objects could be defined directly on this file.Each test would import its mocks from the test mocks file
mymodule.test.mocks.ts.mymodule.test.tshas an import like:import * as Mocks from './mymodule.test.mocks',import { mockX } from './mymodule.test.mocks'or justimport './mymodule.test.mocks'if there isn't anything exported to be used.Future Needed Follow Ups
tscbuild steps to use the@babel/preset-typescriptkbn-pmbabelkbn-plugin-helpers