Skip to content

Commit ce7da4e

Browse files
prontpront
authored
feat(playground): Create built.rs with versions and expose versions to 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)
1 parent f2cd59a commit ce7da4e

File tree

8 files changed

+203
-104
lines changed

8 files changed

+203
-104
lines changed

‎Cargo.lock

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/vector-vrl/web-playground/Cargo.toml

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@ getrandom = { version = "0.2", features = ["js"] }
1818
vector-vrl-functions = { path = "../functions" }
1919
enrichment = { path = "../../enrichment" }
2020

21-
21+
[build-dependencies]
22+
cargo_toml = "0.15.3"

‎lib/vector-vrl/web-playground/build.rs

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
use cargo_toml::Manifest;
2+
use std::fs::File;
3+
use std::io::Write;
4+
use std::path::{Path, PathBuf};
5+
use std::{env, fs, io};
6+
7+
fn get_vector_toml_path() -> PathBuf {
8+
let path = fs::canonicalize(env::var("CARGO_MANIFEST_DIR").unwrap()).unwrap();
9+
10+
// Remove the "lib/vector-vrl/web-playground" suffix
11+
let parent_path = path
12+
.parent()
13+
.and_then(|p| p.parent())
14+
.and_then(|p| p.parent());
15+
parent_path
16+
.expect("Failed to find vector repo root")
17+
.join("Cargo.toml")
18+
.to_path_buf()
19+
}
20+
21+
fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()> {
22+
let mut output_file = File::create(dest_path)?;
23+
output_file.write_all(
24+
"// AUTOGENERATED CONSTANTS. SEE BUILD.RS AT REPOSITORY ROOT. DO NOT MODIFY.\n".as_ref(),
25+
)?;
26+
27+
let create_const_statement =
28+
|name, value| format!("pub const {}: &str = \"{}\";\n", name, value);
29+
// TODO: For releases, we should use the manifest.package().version().
30+
// https://github.com/vectordotdev/vector/issues/18425
31+
let vector_version_const = create_const_statement("VECTOR_VERSION", "master");
32+
output_file
33+
.write_all(vector_version_const.as_bytes())
34+
.expect("Failed to write Vector version constant");
35+
36+
let vrl_version = &manifest
37+
.dependencies
38+
.get("vrl")
39+
.unwrap()
40+
.detail()
41+
.unwrap()
42+
.version
43+
.clone()
44+
.unwrap();
45+
let vrl_version_const = create_const_statement("VRL_VERSION", vrl_version);
46+
output_file
47+
.write_all(vrl_version_const.as_bytes())
48+
.expect("Failed to write Vector version constant");
49+
Ok(())
50+
}
51+
52+
fn main() {
53+
let manifest =
54+
Manifest::from_path(get_vector_toml_path()).expect("Failed to load Vector Cargo.toml");
55+
let dst = Path::new(&env::var("OUT_DIR").unwrap()).join("built.rs");
56+
write_build_constants(&manifest, &dst).expect("Failed to write constants");
57+
}

‎lib/vector-vrl/web-playground/public/index.css

+94-80
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,84 @@ body {
33
margin-left: 2vw;
44
}
55

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

17-
div#summary-section {
18-
display: grid;
19-
grid-row: 1;
20-
grid-template-rows: 35% 65%;
21-
width: 100%;
22-
font-size: 1vw;
23-
grid-gap: 1vw;
24-
}
17+
.headers-grid-item {
18+
background-color: #dfd8ec;
19+
padding: 5px 10px;
20+
border-radius: 4px;
21+
border: none;
22+
display: grid;
23+
align-items: center;
24+
justify-content: center;
25+
height: 100%;
26+
}
2527

26-
div#summary-section p{
27-
font-size: .9vw;
28-
}
28+
#description-cell {
29+
grid-column: 3;
30+
display: grid;
31+
}
2932

30-
div#toolbar-section {
31-
display: grid;
32-
grid-row: 2;
33-
grid-column: 1 / span 2;
34-
grid-template-columns: repeat(8, 1fr);
35-
}
33+
div#App {
34+
padding-top: 5px;
35+
display: grid;
36+
width: 100%;
37+
height: 100%;
38+
grid-template-columns: repeat(2, 1fr);
39+
grid-template-rows: 1fr 18fr;
40+
grid-gap: 1rem;
41+
resize: both;
42+
overflow: hidden;
43+
}
44+
45+
div#toolbar-section {
46+
padding-top: 30px;
47+
display: grid;
48+
grid-row: 1;
49+
grid-column: 1 / span 2;
50+
grid-template-columns: 2fr 2fr 6fr;
51+
grid-gap: 1rem;
52+
align-items: center;
53+
}
3654

3755
#toolbar-section #run-code-btn {
3856
grid-column: 1;
57+
height: 40px;
3958
}
4059

4160
#toolbar-section #share-code-btn {
42-
grid-column: 3;
61+
grid-column: 2;
62+
height: 40px;
4363
}
4464

4565
/* input pane */
4666
div#input-section {
4767
display: grid;
4868
grid-column: 1;
49-
grid-row: 3;
69+
grid-row: 2;
5070
overflow: hidden;
5171
}
5272

5373
#input-section #cell {
5474
display: grid;
55-
grid-template-rows: 6% 94%;
75+
grid-template-rows: 4% 96%;
5676
overflow: hidden;
5777
}
5878

5979
#input-section #cell #input-cell-title {
6080
height: 100%;
6181
grid-row: 1;
82+
font-weight: bold;
83+
font-family: "Helvetica Neue", serif;
6284
}
6385

6486
#input-section #cell #container-program {
@@ -69,9 +91,8 @@ div#App {
6991
div#output-section {
7092
display: grid;
7193
grid-column: 2;
72-
grid-row: 3;
73-
grid-template-rows: 50% 50%;
74-
overflow: hidden;
94+
grid-row: 2;
95+
grid-template-rows: 30% 60%;
7596
}
7697

7798
/* event pane */
@@ -87,6 +108,8 @@ div#App {
87108
#output-section #event-cell #event-cell-title {
88109
display: grid;
89110
grid-row: 1;
111+
font-weight: bold;
112+
font-family: "Helvetica Neue", serif;
90113
}
91114

92115
#output-section #event-cell #container-event {
@@ -98,14 +121,17 @@ div#App {
98121
/* output pane */
99122
#output-section #output-cell {
100123
display: grid;
101-
grid-template-rows: 12% 88%;
124+
grid-template-rows: 6% 94%;
102125
grid-row: 2;
103126
height: 100%;
104127
}
105128

106129
#output-section #output-cell #output-cell-title {
107130
display: grid;
108131
grid-row: 1;
132+
font-weight: bold;
133+
font-family: "Helvetica Neue", serif;
134+
height: 50px;
109135
}
110136

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

123-
.btn-primary {
124-
display: inline-block;
125-
outline: 0;
126-
border: none;
127-
cursor: pointer;
128-
border-radius: 4px;
129-
font-size: 13px;
130-
height: 30px;
131-
background-color: #9147ff;
132-
color: white;
133-
padding: 0 20px;
134-
}
149+
/* BUTTONS */
150+
.btn {
151+
display: inline-block;
152+
outline: 0;
153+
border: none;
154+
cursor: pointer;
155+
border-radius: 8px;
156+
font-size: 13px;
157+
height: 30px;
158+
padding: 0 20px;
159+
}
135160

136-
.btn-primary:hover {
137-
background-color: #772ce8;
138-
}
161+
.btn:active {
162+
box-shadow: 0 4px #666;
163+
transform: translateY(2px);
164+
}
139165

140-
.btn-secondary {
141-
display: inline-block;
142-
outline: 0;
143-
border: none;
144-
cursor: pointer;
145-
border-radius: 4px;
146-
font-size: 13px;
147-
height: 30px;
148-
background-color: #0000001a;
149-
color: #000000;
150-
padding: 0 20px;
151-
}
166+
.btn-primary {
167+
background-color: #9147ff;
168+
color: white;
169+
}
152170

153-
.btn-secondary:hover {
154-
background-color: #dcdcdc;
155-
}
171+
.btn-primary:hover {
172+
background-color: #6a1ae1;
173+
}
174+
175+
.btn-secondary {
176+
background-color: #0000001a;
177+
color: #000000;
178+
}
179+
180+
.btn-secondary:hover {
181+
background-color: #c0bdbd;
182+
}
183+
/* END OF BUTTONS */
156184

157185
/* Portrait and Landscape */
158186
@media only screen
@@ -164,27 +192,13 @@ div#App {
164192
height: 100%;
165193
/* the app will have multiple rows
166194
stacking each section on top of each other */
167-
grid-template-rows: 20vh 25vh 10vh 50vh;
195+
grid-template-rows: 20vh 10vh 50vh;
168196
grid-template-columns: 100%;
169197
}
170198

171-
div#summary-section {
172-
display: grid;
173-
grid-row: 1;
174-
grid-template-rows: 20% 80%;
175-
width: 100%;
176-
font-size: 1.5vh;
177-
grid-gap: 2vw;
178-
}
179-
180-
div#summary-section p {
181-
grid-row: 2;
182-
font-size: 2vh;
183-
}
184-
185199
div#toolbar-section {
186200
display: grid;
187-
grid-row: 3;
201+
grid-row: 1;
188202
grid-column: 1;
189203
grid-template-columns: 100%;
190204
grid-template-rows: repeat(2, 1fr);

‎lib/vector-vrl/web-playground/public/index.html

+18-10
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,27 @@
2222
</head>
2323

2424
<body>
25-
<div id="App">
26-
<div id="summary-section">
27-
<h1>VRL Playground</h1>
28-
<p>
29-
<a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
30-
observability data. This playground lets you write a program, run it against an event or
31-
events, share it, and see how the events are transformed.
32-
</p>
25+
<div class="headers-grid">
26+
<div class="headers-grid-item">
27+
<h2>VRL Playground</h2>
28+
</div>
29+
<div class="headers-grid-item">
30+
<h4 id="versions-header"></h4>
31+
</div>
32+
<div class="headers-grid-item" id="description-cell">
33+
<p id="description-paragraph" >
34+
<a href="https://vector.dev/docs/reference/vrl/functions/">Vector Remap Language (VRL)</a> is an expression-oriented language designed for transforming
35+
observability data. This playground lets you write a program, run it against an event or
36+
events, share it, and see how the events are transformed.
37+
</p>
3338
</div>
39+
</div>
40+
<div id="App">
41+
3442

3543
<div id="toolbar-section">
36-
<button id="run-code-btn" class="btn-primary" onClick="vrlPlayground.handleRunCode()">run code</button>
37-
<button id="share-code-btn" class="btn-secondary" onClick="vrlPlayground.handleShareCode()">share code</button>
44+
<button id="run-code-btn" class="btn btn-primary" onClick="vrlPlayground.handleRunCode()">Run program</button>
45+
<button id="share-code-btn" class="btn btn-secondary" onClick="vrlPlayground.handleShareCode()">Share program</button>
3846
</div>
3947

4048
<div id="input-section">

0 commit comments

Comments
 (0)