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)

Author: pront

Cargo.lock

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

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

@@ -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");
+}

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

@@ -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 {
@@ -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 */
@@ -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 {
@@ -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 {
@@ -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
@@ -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);

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

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