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.

Sign up for GitHub

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

feat(playground): Create built.rs with versions and expose versions to the UI #18424

Merged
merged 7 commits into from
Aug 30, 2023
Merged

feat(playground): Create built.rs with versions and expose versions to the UI #18424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ae93fad
wip
pront Aug 29, 2023
b125221
wip
pront Aug 29, 2023
115ce86
read versions from built.rs
pront Aug 29, 2023
7d27537
create headers grid
pront Aug 30, 2023
dc69ffd
add link to github issue
pront Aug 30, 2023
bcf3396
button tweaks
pront Aug 30, 2023
b421763
tweak header height (shortened)
pront Aug 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion lib/vector-vrl/web-playground/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ getrandom = { version = "0.2", features = ["js"] }
vector-vrl-functions = { path = "../functions" }
enrichment = { path = "../../enrichment" }


[build-dependencies]
cargo_toml = "0.15.3"
57 changes: 57 additions & 0 deletions lib/vector-vrl/web-playground/build.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
use cargo_toml::Manifest;
use std::fs::File;
use std::io::Write;
use std::path::{Path, PathBuf};
use std::{env, fs, io};

fn get_vector_toml_path() -> PathBuf {
let path = fs::canonicalize(env::var("CARGO_MANIFEST_DIR").unwrap()).unwrap();

// Remove the "lib/vector-vrl/web-playground" suffix
let parent_path = path
.parent()
.and_then(|p| p.parent())
.and_then(|p| p.parent());
parent_path
.expect("Failed to find vector repo root")
.join("Cargo.toml")
.to_path_buf()
}

fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()> {
let mut output_file = File::create(dest_path)?;
output_file.write_all(
"// AUTOGENERATED CONSTANTS. SEE BUILD.RS AT REPOSITORY ROOT. DO NOT MODIFY.\n".as_ref(),
)?;

let create_const_statement =
|name, value| format!("pub const {}: &str = \"{}\";\n", name, value);
// TODO: For releases, we should use the manifest.package().version().
// https://github.com/vectordotdev/vector/issues/18425
let vector_version_const = create_const_statement("VECTOR_VERSION", "master");
output_file
.write_all(vector_version_const.as_bytes())
.expect("Failed to write Vector version constant");

let vrl_version = &manifest
.dependencies
.get("vrl")
.unwrap()
.detail()
.unwrap()
.version
.clone()
.unwrap();
let vrl_version_const = create_const_statement("VRL_VERSION", vrl_version);
output_file
.write_all(vrl_version_const.as_bytes())
.expect("Failed to write Vector version constant");
Ok(())
}

fn main() {
let manifest =
Manifest::from_path(get_vector_toml_path()).expect("Failed to load Vector Cargo.toml");
let dst = Path::new(&env::var("OUT_DIR").unwrap()).join("built.rs");
write_build_constants(&manifest, &dst).expect("Failed to write constants");
}
174 changes: 94 additions & 80 deletions lib/vector-vrl/web-playground/public/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,62 +3,84 @@ body {
margin-left: 2vw;
}

div#App {
display: grid;
width: 100%;
height: 100%;
/* the app will have two columns, one for input
one for output, left and right */
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 15vh 1vh 75vh;
grid-gap: 1rem;
}
.headers-grid {
display: grid;
grid-template-columns: 3fr 2fr 7fr;
grid-template-rows: 90px;
gap: 10px;
font-family: "Helvetica Neue", serif;
width: 100%;
height: 100%;
margin: auto;
}

div#summary-section {
display: grid;
grid-row: 1;
grid-template-rows: 35% 65%;
width: 100%;
font-size: 1vw;
grid-gap: 1vw;
}
.headers-grid-item {
background-color: #dfd8ec;
padding: 5px 10px;
border-radius: 4px;
border: none;
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}

div#summary-section p{
font-size: .9vw;
}
#description-cell {
grid-column: 3;
display: grid;
}

div#toolbar-section {
display: grid;
grid-row: 2;
grid-column: 1 / span 2;
grid-template-columns: repeat(8, 1fr);
}
div#App {
padding-top: 5px;
display: grid;
width: 100%;
height: 100%;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 18fr;
grid-gap: 1rem;
resize: both;
overflow: hidden;
}

div#toolbar-section {
padding-top: 30px;
display: grid;
grid-row: 1;
grid-column: 1 / span 2;
grid-template-columns: 2fr 2fr 6fr;
grid-gap: 1rem;
align-items: center;
}

#toolbar-section #run-code-btn {
grid-column: 1;
height: 40px;
}

#toolbar-section #share-code-btn {
grid-column: 3;
grid-column: 2;
height: 40px;
}

/* input pane */
div#input-section {
display: grid;
grid-column: 1;
grid-row: 3;
grid-row: 2;
overflow: hidden;
}

#input-section #cell {
display: grid;
grid-template-rows: 6% 94%;
grid-template-rows: 4% 96%;
overflow: hidden;
}

#input-section #cell #input-cell-title {
height: 100%;
grid-row: 1;
font-weight: bold;
font-family: "Helvetica Neue", serif;
}

#input-section #cell #container-program {
Expand All @@ -69,9 +91,8 @@ div#App {
div#output-section {
display: grid;
grid-column: 2;
grid-row: 3;
grid-template-rows: 50% 50%;
overflow: hidden;
grid-row: 2;
grid-template-rows: 30% 60%;
}

/* event pane */
Expand All @@ -87,6 +108,8 @@ div#App {
#output-section #event-cell #event-cell-title {
display: grid;
grid-row: 1;
font-weight: bold;
font-family: "Helvetica Neue", serif;
}

#output-section #event-cell #container-event {
Expand All @@ -98,14 +121,17 @@ div#App {
/* output pane */
#output-section #output-cell {
display: grid;
grid-template-rows: 12% 88%;
grid-template-rows: 6% 94%;
grid-row: 2;
height: 100%;
}

#output-section #output-cell #output-cell-title {
display: grid;
grid-row: 1;
font-weight: bold;
font-family: "Helvetica Neue", serif;
height: 50px;
}

#output-section #output-cell #container-output {
Expand All @@ -120,39 +146,41 @@ div#App {
Segoe UI Symbol, Noto Color Emoji;
}

.btn-primary {
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
border-radius: 4px;
font-size: 13px;
height: 30px;
background-color: #9147ff;
color: white;
padding: 0 20px;
}
/* BUTTONS */
.btn {
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
border-radius: 8px;
font-size: 13px;
height: 30px;
padding: 0 20px;
}

.btn-primary:hover {
background-color: #772ce8;
}
.btn:active {
box-shadow: 0 4px #666;
transform: translateY(2px);
}

.btn-secondary {
display: inline-block;
outline: 0;
border: none;
cursor: pointer;
border-radius: 4px;
font-size: 13px;
height: 30px;
background-color: #0000001a;
color: #000000;
padding: 0 20px;
}
.btn-primary {
background-color: #9147ff;
color: white;
}

.btn-secondary:hover {
background-color: #dcdcdc;
}
.btn-primary:hover {
background-color: #6a1ae1;
}

.btn-secondary {
background-color: #0000001a;
color: #000000;
}

.btn-secondary:hover {
background-color: #c0bdbd;
}
/* END OF BUTTONS */

/* Portrait and Landscape */
@media only screen
Expand All @@ -164,27 +192,13 @@ div#App {
height: 100%;
/* the app will have multiple rows
stacking each section on top of each other */
grid-template-rows: 20vh 25vh 10vh 50vh;
grid-template-rows: 20vh 10vh 50vh;
grid-template-columns: 100%;
}

div#summary-section {
display: grid;
grid-row: 1;
grid-template-rows: 20% 80%;
width: 100%;
font-size: 1.5vh;
grid-gap: 2vw;
}

div#summary-section p {
grid-row: 2;
font-size: 2vh;
}

div#toolbar-section {
display: grid;
grid-row: 3;
grid-row: 1;
grid-column: 1;
grid-template-columns: 100%;
grid-template-rows: repeat(2, 1fr);
Expand Down
28 changes: 18 additions & 10 deletions lib/vector-vrl/web-playground/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,27 @@
</head>

<body>
<div id="App">
<div id="summary-section">
<h1>VRL Playground</h1>
<p>
<a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
observability data. This playground lets you write a program, run it against an event or
events, share it, and see how the events are transformed.
</p>
<div class="headers-grid">
<div class="headers-grid-item">
<h2>VRL Playground</h2>
</div>
<div class="headers-grid-item">
<h4 id="versions-header"></h4>
</div>
<div class="headers-grid-item" id="description-cell">
<p id="description-paragraph" >
<a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
observability data. This playground lets you write a program, run it against an event or
events, share it, and see how the events are transformed.
</p>
</div>
</div>
<div id="App">


<div id="toolbar-section">
<button id="run-code-btn" class="btn-primary" onClick="vrlPlayground.handleRunCode()">run code</button>
<button id="share-code-btn" class="btn-secondary" onClick="vrlPlayground.handleShareCode()">share code</button>
<button id="run-code-btn" class="btn btn-primary" onClick="vrlPlayground.handleRunCode()">Run program</button>
<button id="share-code-btn" class="btn btn-secondary" onClick="vrlPlayground.handleShareCode()">Share program</button>
</div>

<div id="input-section">
Expand Down
Loading