add hyperlinks for versions and address nits

vectordotdev · Sep 7, 2023 · d3bc824 · d3bc824
1 parent 2e875b8
commit d3bc824
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 23 deletions.
diff --git a/lib/vector-vrl/web-playground/build.rs b/lib/vector-vrl/web-playground/build.rs
@@ -21,9 +21,9 @@ fn get_vector_toml_path() -> PathBuf {
 
 fn get_git_hash() -> String {
     let output = Command::new("git")
-        .args(&["rev-parse", "HEAD"])
+        .args(["rev-parse", "HEAD"])
         .output()
-        .unwrap();
+        .expect("Failed to get git HEAD sha");
     let mut git_hash = String::from_utf8(output.stdout).unwrap();
     git_hash.truncate(8);
     git_hash

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,