From 1dd9e9e2a1cbd032295df67b4ea7a95784dffc12 Mon Sep 17 00:00:00 2001 From: Pavlos Rontidis Date: Wed, 5 Jul 2023 15:07:16 -0400 Subject: [PATCH 1/2] chore: separate hanwritten and generated files in web-playground --- lib/vector-vrl/web-playground/README.md | 3 +- lib/vector-vrl/web-playground/netlify.toml | 2 +- .../web-playground/public/.gitignore | 1 - .../web-playground/public/README.md | 147 ------------------ lib/vector-vrl/web-playground/public/index.js | 2 +- 5 files changed, 4 insertions(+), 151 deletions(-) delete mode 100644 lib/vector-vrl/web-playground/public/.gitignore delete mode 100644 lib/vector-vrl/web-playground/public/README.md diff --git a/lib/vector-vrl/web-playground/README.md b/lib/vector-vrl/web-playground/README.md index ecf9064e5d0bd..11faa7a1c172a 100644 --- a/lib/vector-vrl/web-playground/README.md +++ b/lib/vector-vrl/web-playground/README.md @@ -19,7 +19,7 @@ cargo install --locked --version 0.10.3 wasm-pack After installing `wasm-pack` we must compile our project by running: ```shell -wasm-pack build --target web --out-dir public +wasm-pack build --target web --out-dir public/pkg ``` Notice the `public` directory was populated with `.wasm`, and `.js`, @@ -41,6 +41,7 @@ the web browser console. To see this in action we host `index.html` locally, for example by running: ```shell +cd public python3 -m http.server ``` diff --git a/lib/vector-vrl/web-playground/netlify.toml b/lib/vector-vrl/web-playground/netlify.toml index 3c9447d330e58..95ed48c6aea04 100644 --- a/lib/vector-vrl/web-playground/netlify.toml +++ b/lib/vector-vrl/web-playground/netlify.toml @@ -11,7 +11,7 @@ publish = "public/" # Default build command. - command = "bash ../../../scripts/ensure-wasm-pack-installed.sh && wasm-pack build --target web --out-dir public" + command = "bash ../../../scripts/ensure-wasm-pack-installed.sh && cd public && wasm-pack build --target web public/pkg" # Ignore everything except the base directory and changes to vector/lib/ ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF . ../../../lib" diff --git a/lib/vector-vrl/web-playground/public/.gitignore b/lib/vector-vrl/web-playground/public/.gitignore deleted file mode 100644 index de695ce7d35fc..0000000000000 --- a/lib/vector-vrl/web-playground/public/.gitignore +++ /dev/null @@ -1 +0,0 @@ -vector_vrl_web_playground** diff --git a/lib/vector-vrl/web-playground/public/README.md b/lib/vector-vrl/web-playground/public/README.md deleted file mode 100644 index 9354b77321205..0000000000000 --- a/lib/vector-vrl/web-playground/public/README.md +++ /dev/null @@ -1,147 +0,0 @@ -# VRL WASM Web Playground - -This directory houses the exposed VRL function to WASM `run_vrl()` used to -power [Vector Remap Language Playground][vrl-playground], or **VRL Playground** -for short. Although there is already a [local REPL][vrl-repl] supported for -use within the terminal, this playground will support running VRL in the web -browser and test input via uploading event files, or specifying an event via -a text input field. - -## Setup - -To build the project we need to use `wasm-pack`. This compiles our Rust code -to WebAssembly which can then be used within the browser. Install it by running: - -```shell -cargo install --version 0.10.3 wasm-pack -``` - -After installing `wasm-pack` we must compile our project by running: - -```shell -wasm-pack build --target web --out-dir public -``` - -Notice the `public` directory was populated with `.wasm`, and `.js`, -files these will be used by our `index.html` to run the `run_vrl()` -function originally written in Rust. - -For more information on Rust and WebAssembly please visit -[the mozilla docs][mozilla-wasm-rust-docs] or -[the Rust book wasm chapter][rust-book-wasm] - -The `src/lib.rs` file is the entry point of the `web-playground` crate. -This file is necessary so we can use the `run_vrl()` function in the browser. -Notice our `index.html` imports the VRL wasm module from `./vrl_web_playground.js` -and sets the `window.run_vrl` function so that we can test VRL within -the web browser console. - -To see this in action we host `index.html` locally, for example by running: - -```shell -python3 -m http.server -``` - -Remember to be in the `public` directory where index.html is located for the -relative paths specified in `index.html` to work. -We should also be able to open the `index.html` file in chrome, or use Live Server -in VSCode to see `index.html` working. - -## Support - -Some functions of VRL are not supported or don't work as expected at the -moment due to WASM limitations with some Rust crates, in -the future we will modify the functions so that they are supported. - -List of functions that aren't supported at the moment. All of them exist, -but they will either error (enrichment functions) or abort (all the others) at runtime. - -- `log` -- `get_hostname` -- `parse_grok` -- `parse_groks` -- `reverse_dns` -- `find_enrichment_table_records` -- `get_enrichment_table_record` - -Functions from VRL stdlib that are currently not supported can be found -with this [issue filter][vrl-wasm-unsupported-filter] - -## Examples - -### React - -For now, you can use an old npm-published version of vrl-web-playground, -please note that this was done for testing purposes and in the future we -will likely release this automatically upon each version release of Vector, -probably under a different package name. - -Use this dependency in `package.json` - -```json -"dependencies": { - "vrl-web-playground": "0.1.0" -} -``` - -Example import and usage in a React component - -```javascript -import init, { run_vrl } from 'vrl-web-playground'; - -export function VectorExecuteButton() { - let vrlInput = {}; - try { - vrlInput = { - program: '.something = "added by vrl!"\n.message = "modified by vrl!"', - event: JSON.parse('{message: "log message here"}'), - }; - } catch (error) { - console.log('error parsing the event contents as JSON object'); - } - - return ( -