feat: Add git sha to the VRL playground header (vectordotdev#18500)

* feat: Add git sha to the VRL playground header * add hyperlinks for versions and address nits
aholmberg · Sep 8, 2023 · 567de50 · 567de50
1 parent f7c3c96
commit 567de50
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 23 deletions.
diff --git a/lib/vector-vrl/web-playground/build.rs b/lib/vector-vrl/web-playground/build.rs
@@ -2,6 +2,7 @@ use cargo_toml::Manifest;
 use std::fs::File;
 use std::io::Write;
 use std::path::{Path, PathBuf};
+use std::process::Command;
 use std::{env, fs, io};
 
 fn get_vector_toml_path() -> PathBuf {
@@ -18,6 +19,16 @@ fn get_vector_toml_path() -> PathBuf {
         .to_path_buf()
 }
 
+fn get_git_hash() -> String {
+    let output = Command::new("git")
+        .args(["rev-parse", "HEAD"])
+        .output()
+        .expect("Failed to get git HEAD sha");
+    let mut git_hash = String::from_utf8(output.stdout).unwrap();
+    git_hash.truncate(8);
+    git_hash
+}
+
 fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()> {
     let mut output_file = File::create(dest_path)?;
     output_file.write_all(
@@ -26,14 +37,15 @@ fn write_build_constants(manifest: &Manifest, dest_path: &Path) -> io::Result<()
 
     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");
+    let vector_version_const = create_const_statement("VECTOR_VERSION", get_git_hash());
     output_file
         .write_all(vector_version_const.as_bytes())
         .expect("Failed to write Vector version constant");
 
-    let vrl_version = &manifest
+    let vrl_version = manifest
         .dependencies
         .get("vrl")
         .unwrap()

diff --git a/lib/vector-vrl/web-playground/public/index.css b/lib/vector-vrl/web-playground/public/index.css
@@ -1,14 +1,27 @@
 body {
-    margin-right: 2vw;
-    margin-left: 2vw;
+  margin-right: 2vw;
+  margin-left: 2vw;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+  Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+  Segoe UI Symbol, Noto Color Emoji;
 }
 
+table {
+  width: 100%;
+  border-spacing: 10px;
+}
+
+td {
+  text-align: left;
+  font-weight: bold;
+}
+
+
 .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;
@@ -80,7 +93,6 @@ div#toolbar-section {
     height: 100%;
     grid-row: 1;
     font-weight: bold;
-    font-family: "Helvetica Neue", serif;
   }
 
   #input-section #cell #container-program {
@@ -109,7 +121,6 @@ div#toolbar-section {
     display: grid;
     grid-row: 1;
     font-weight: bold;
-    font-family: "Helvetica Neue", serif;
   }
 
   #output-section #event-cell #container-event {
@@ -130,7 +141,6 @@ div#toolbar-section {
     display: grid;
     grid-row: 1;
     font-weight: bold;
-    font-family: "Helvetica Neue", serif;
     height: 50px;
   }
 
@@ -140,12 +150,6 @@ div#toolbar-section {
     height: 100%;
   }
 
-  body {
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-      Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-      Segoe UI Symbol, Noto Color Emoji;
-  }
-
 /*  BUTTONS */
 .btn {
   display: inline-block;
@@ -287,12 +291,6 @@ div#toolbar-section {
         height: 100%;
       }
 
-      body {
-        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-          Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
-          Segoe UI Symbol, Noto Color Emoji;
-      }
-
       .btn-primary {
         display: inline-block;
         outline: 0;

diff --git a/lib/vector-vrl/web-playground/public/index.html b/lib/vector-vrl/web-playground/public/index.html
@@ -27,7 +27,16 @@
         <h2>VRL Playground</h2>
       </div>
       <div class="headers-grid-item">
-        <h4 id="versions-header"></h4>
+        <table>
+          <tr>
+            <td>Vector Version: </td>
+            <td><a id="vector-version-link"></a></td>
+          </tr>
+          <tr>
+            <td>VRL Version: </td>
+            <td><a id="vrl-version-link"></a></td>
+          </tr>
+        </table>
       </div>
       <div class="headers-grid-item" id="description-cell">
           <p id="description-paragraph" >

diff --git a/lib/vector-vrl/web-playground/public/index.js b/lib/vector-vrl/web-playground/public/index.js
@@ -35,6 +35,7 @@ String: {{str}}
 You can try validating your JSON here: https://jsonlint.com/ \n`;
 
 export class VrlWebPlayground {
+
     constructor() {
         let temp = init().then(() => {
             this.run_vrl = run_vrl;
@@ -84,12 +85,23 @@ export class VrlWebPlayground {
                     }
                 }
 
-                document.getElementById('versions-header').innerText =
-                        "Vector Version: " + vector_version() + "\nVRL Version: " + vrl_version();
+                this.addVersions();
             });
         });
     }
 
+    addVersions() {
+        let vectorLinkElement = document.getElementById('vector-version-link');
+        let vectorVersion = vector_version();
+        vectorLinkElement.text = vectorVersion;
+        vectorLinkElement.href = `https://github.com/vectordotdev/vector/tree/${vectorVersion}`;
+
+        let vrlLinkElement = document.getElementById('vrl-version-link');
+        let vrlVersion = vrl_version();
+        vrlLinkElement.text = vrlVersion;
+        vrlLinkElement.href = `https://crates.io/crates/vrl/${vrlVersion}`;
+    }
+
     createDefaultEditor(elementId, value, language, theme) {
         return this.monaco.editor.create(document.getElementById(elementId), {
             value: value,