feat(vrl playground): add runnable examples and returned values (#26708)

Author: pront

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

@@ -206,6 +206,11 @@ div#toolbar-section {
   overflow: hidden;
 }
 
+/* Reveal the panels once Split.js and Monaco agree on their initial dimensions. */
+#main-split[aria-busy="true"] {
+  visibility: hidden;
+}
+
 div#input-section,
 div#output-section {
   border: 1px solid var(--datadog-gray-lighter);
@@ -214,6 +219,8 @@ div#output-section {
   min-height: 0;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  width: calc(50% - 3px);
 }
 
 #input-section #cell {
@@ -226,16 +233,27 @@ div#output-section {
 
 /* Split.js writes inline flex-basis for vertical sizing — don't collapse to 0 */
 #output-section #event-cell,
-#output-section #output-cell {
+#output-section #output-cell,
+#output-section #returned-value-cell {
   display: flex;
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
 }
 
+#event-cell,
+#output-cell {
+  height: calc(40% - 4px);
+}
+
+#returned-value-cell {
+  height: calc(20% - 4px);
+}
+
 #container-program,
 #container-event,
-#container-output {
+#container-output,
+#container-returned-value {
   flex: 1 1 0;
   min-height: 0;
   width: 100%;
@@ -417,7 +435,8 @@ div#output-section {
   }
 
   #output-section #event-cell,
-  #output-section #output-cell {
+  #output-section #output-cell,
+  #output-section #returned-value-cell {
     min-height: 30vh;
   }
 }

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

@@ -88,6 +88,9 @@ <h2>VRL Playground</h2>
             </datalist>
           </div>
           <div class="toolbar-group">
+            <select id="examples-select" title="Load an example program and input" aria-label="Examples">
+              <option value="" disabled selected>Examples</option>
+            </select>
             <select id="history-select" title="Run history (stored locally in your browser)">
               <option value="" disabled selected>History</option>
             </select>
@@ -97,7 +100,7 @@ <h2>VRL Playground</h2>
           </div>
         </div>
         </div>
-      <div id="main-split">
+      <div id="main-split" aria-busy="true">
         <div id="input-section">
           <div id="cell">
             <div id="input-cell-title">
@@ -124,6 +127,13 @@ <h2>VRL Playground</h2>
             </div>
             <div id="container-output"></div>
           </div>
+
+          <div id="returned-value-cell">
+            <div id="returned-value-cell-title">
+              <p class="cell-title" title="The value of the program's last expression">Returned value</p>
+            </div>
+            <div id="container-returned-value"></div>
+          </div>
         </div>
       </div>
     </div>

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

@@ -7,31 +7,9 @@ import init, {
   vrl_version
 } from "./pkg/vector_vrl_web_playground.js";
 import { registerVrlCompletion } from "./vrl-completion.js";
+import { DEFAULT_EXAMPLE, VRL_EXAMPLES } from "./vrl-examples.js";
 import { vrlLanguageDefinition, vrlThemeDefinition } from "./vrl-highlighter.js";
 
-const PROGRAM_EDITOR_DEFAULT_VALUE = `# Remove some fields
-del(.foo)
-
-# Add a timestamp
-.timestamp = now()
-
-# Parse HTTP status code into local variable
-http_status_code = parse_int!(.http_status)
-del(.http_status)
-
-# Add status
-if http_status_code >= 200 && http_status_code <= 299 {
-    .status = "success"
-} else {
-    .status = "error"
-}`;
-
-const EVENT_EDITOR_DEFAULT_VALUE = `{
-    "message": "Hello VRL",
-    "foo": "delete me",
-    "http_status": "200"
-}`;
-
 const OUTPUT_EDITOR_DEFAULT_VALUE = `{}`;
 
 const HISTORY_STORAGE_KEY = "vrl_playground_history";
@@ -114,25 +92,33 @@ export class VrlWebPlayground {
       getSampleEvent: () => this._sampleEvent()
     });
 
+    // Size the panels before Monaco measures its containers.
+    this.addVersions();
+    this._initSplitPanels();
+
     // Editors
-    this.eventEditor = this.createDefaultEditor("container-event", EVENT_EDITOR_DEFAULT_VALUE, "json", "vs-light");
-    this.outputEditor = this.createDefaultEditor("container-output", OUTPUT_EDITOR_DEFAULT_VALUE, "json", "vs-light");
-    this.programEditor = this.createDefaultEditor(
-      "container-program",
-      PROGRAM_EDITOR_DEFAULT_VALUE,
-      "vrl",
-      "vrl-theme"
+    this.eventEditor = this.createDefaultEditor(
+      "container-event",
+      JSON.stringify(DEFAULT_EXAMPLE.event, null, 2),
+      "json",
+      "vs-light"
     );
-
-    // Resizable panels
-    this._initSplitPanels();
+    this.outputEditor = this.createDefaultEditor("container-output", OUTPUT_EDITOR_DEFAULT_VALUE, "json", "vs-light");
+    this.returnedValueEditor = this.createDefaultEditor("container-returned-value", "", "json", "vs-light");
+    this.returnedValueEditor.updateOptions({ readOnly: true });
+    this.programEditor = this.createDefaultEditor("container-program", DEFAULT_EXAMPLE.program, "vrl", "vrl-theme");
+    this.programEditor.addAction({
+      id: "vrl.find",
+      label: "Find",
+      contextMenuGroupId: "navigation",
+      contextMenuOrder: 0,
+      run: (editor) => editor.getAction("actions.find").run()
+    });
+    this._initChangeAllAction();
 
     // Theme
     this._initTheme();
 
-    // Versions
-    this.addVersions();
-
     // Keyboard shortcut: Shift+Enter runs the program
     window.addEventListener("keydown", (e) => {
       if (e.shiftKey && e.key === "Enter") {
@@ -141,6 +127,8 @@ export class VrlWebPlayground {
       }
     });
 
+    this._initExamples();
+
     // Populate history dropdown from localStorage
     this._populateHistoryDropdown();
 
@@ -155,6 +143,64 @@ export class VrlWebPlayground {
 
     // Handle shared state from URL (if present)
     this._maybeLoadFromUrl();
+
+    for (const editor of [this.programEditor, this.eventEditor, this.outputEditor, this.returnedValueEditor]) {
+      editor.layout();
+    }
+    document.getElementById("main-split").setAttribute("aria-busy", "false");
+  }
+
+  _initExamples() {
+    const select = document.getElementById("examples-select");
+    if (!select) return;
+
+    for (const example of VRL_EXAMPLES) {
+      const option = document.createElement("option");
+      option.value = example.id;
+      option.textContent = example.name;
+      select.appendChild(option);
+    }
+
+    select.addEventListener("change", () => {
+      const example = VRL_EXAMPLES.find((entry) => entry.id === select.value);
+      if (!example) return;
+
+      this.programEditor.setValue(example.program);
+      this.eventEditor.setValue(JSON.stringify(example.event, null, 2));
+      this.enableJsonLinting();
+      this.handleRunCode();
+    });
+
+    const updateSelection = () => {
+      const example = VRL_EXAMPLES.find(
+        (entry) =>
+          entry.program === this._safeGet(this.programEditor) &&
+          JSON.stringify(entry.event, null, 2) === this._safeGet(this.eventEditor)
+      );
+      select.value = example?.id ?? "";
+    };
+    this.programEditor.onDidChangeModelContent(updateSelection);
+    this.eventEditor.onDidChangeModelContent(updateSelection);
+  }
+
+  _initChangeAllAction() {
+    // The context menu takes focus, so remember which editor opened it.
+    let focusedEditor = this.programEditor;
+    for (const editor of [this.programEditor, this.eventEditor, this.outputEditor, this.returnedValueEditor]) {
+      editor.onDidFocusEditorText(() => {
+        focusedEditor = editor;
+      });
+    }
+
+    this.monaco.editor.registerCommand("editor.action.changeAll", async () => {
+      const editor = focusedEditor;
+      if (editor !== this.programEditor) {
+        return editor.getAction("editor.action.changeAll").run();
+      }
+      // Find seeds the query from the selection or the word under the cursor.
+      await editor.getAction("actions.find").run();
+      return editor.getAction("editor.action.startFindReplaceAction").run();
+    });
   }
 
   _maybeLoadFromUrl() {
@@ -256,10 +302,10 @@ export class VrlWebPlayground {
       cursor: "col-resize"
     });
 
-    window.Split(["#event-cell", "#output-cell"], {
+    window.Split(["#event-cell", "#output-cell", "#returned-value-cell"], {
       direction: "vertical",
-      sizes: [50, 50],
-      minSize: 100,
+      sizes: [40, 40, 20],
+      minSize: [80, 80, 60],
       gutterSize: 6,
       cursor: "row-resize"
     });
@@ -304,6 +350,7 @@ export class VrlWebPlayground {
   }
 
   _clearOutput() {
+    this.returnedValueEditor?.setValue("");
     if (this.outputEditor) {
       // wipe the buffer so stale values never linger
       this.outputEditor.setValue("");
@@ -341,6 +388,15 @@ export class VrlWebPlayground {
     }
   }
 
+  _formatReturnedValue(runResult) {
+    if (typeof runResult?.runtime_output === "string") return runResult.runtime_output;
+    // Also support older runtimes, where only the deserialized value is available.
+    if (runResult && Object.prototype.hasOwnProperty.call(runResult, "runtime_result")) {
+      return JSON.stringify(runResult.runtime_result, null, "\t");
+    }
+    return "";
+  }
+
   _safeGet(editor, fallback = "") {
     return editor?.getValue?.() ?? fallback;
   }
@@ -496,6 +552,7 @@ export class VrlWebPlayground {
     if (entry.outputIsJson) this.enableJsonLinting();
     else this.disableJsonLinting();
     this.outputEditor?.setValue(entry.output ?? "");
+    this.returnedValueEditor?.setValue(entry.returnedValue ?? "");
     this._setElapsed(entry.elapsedTime);
   }
 
@@ -527,13 +584,16 @@ export class VrlWebPlayground {
     if (isJson) this.enableJsonLinting();
     else this.disableJsonLinting();
     this.outputEditor.setValue(text);
+    const returnedValue = this._formatReturnedValue(runResult);
+    this.returnedValueEditor.setValue(returnedValue);
 
     this._setElapsed(runResult?.elapsed_time);
     this._saveToHistory({
       program: this._safeGet(this.programEditor),
       event: this._safeGet(this.eventEditor),
       output: text,
       outputIsJson: isJson,
+      returnedValue,
       elapsedTime: runResult?.elapsed_time,
       timezone
     });
@@ -566,6 +626,8 @@ export class VrlWebPlayground {
     // Output is not pure JSON (multiple objects / possible errors)
     this.disableJsonLinting();
     this.outputEditor.setValue(outputText);
+    const returnedValue = results.map((r) => this._formatReturnedValue(r)).join("\n");
+    this.returnedValueEditor.setValue(returnedValue);
 
     // Aggregate elapsed time, rounded
     const total = results.reduce((sum, r) => sum + (typeof r?.elapsed_time === "number" ? r.elapsed_time : 0), 0);
@@ -575,6 +637,7 @@ export class VrlWebPlayground {
       event: this._safeGet(this.eventEditor),
       output: outputText,
       outputIsJson: false,
+      returnedValue,
       elapsedTime: total,
       timezone
     });