Skip to content

Commit

Permalink
feat(playground): Create built.rs with versions and expose versions t…
Browse files Browse the repository at this point in the history
…o the UI (vectordotdev#18424)

* wip

* wip

* read versions from built.rs

* create headers grid

* add link to github issue

* button tweaks

* tweak header height (shortened)
  • Loading branch information
pront committed Aug 30, 2023
1 parent f2cd59a commit ce7da4e
Show file tree
Hide file tree
Showing 8 changed files with 203 additions and 104 deletions.
11 changes: 11 additions & 0 deletions Cargo.lock

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
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
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
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
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

0 comments on commit ce7da4e

Please sign in to comment.