From 4c85052a82aef3904facd3378830355d340b638b Mon Sep 17 00:00:00 2001
From: John Starks <jostarks@microsoft.com>
Date: Sat, 24 May 2025 07:23:14 +0000
Subject: [PATCH 1/3] petri: add and publish log viewer web code

Create a simple client-side HTML+JS solution for parsing and viewing
petri logs. Point it to the OpenVMM test results storage account,
which will soon be populated automatically.
---
 .github/workflows/openvmm-docs-ci.yaml        |  26 +-
 .../_jobs/consolidate_and_publish_gh_pages.rs |  11 +
 petri/logview/index.html                      | 158 ++++++
 petri/logview/test.html                       | 479 ++++++++++++++++++
 4 files changed, 672 insertions(+), 2 deletions(-)
 create mode 100644 petri/logview/index.html
 create mode 100644 petri/logview/test.html

diff --git a/.github/workflows/openvmm-docs-ci.yaml b/.github/workflows/openvmm-docs-ci.yaml
index 1a1e9bfd17..db955d1892 100644
--- a/.github/workflows/openvmm-docs-ci.yaml
+++ b/.github/workflows/openvmm-docs-ci.yaml
@@ -556,14 +556,36 @@ jobs:
         echo "$AgentTempDirNormal/used_artifacts/x64-linux-rustdoc" | flowey v 3 'artifact_use_from_x64-linux-rustdoc' --is-raw-string update
         echo "$AgentTempDirNormal/used_artifacts/x64-windows-rustdoc" | flowey v 3 'artifact_use_from_x64-windows-rustdoc' --is-raw-string update
       shell: bash
-    - name: generate consolidated gh pages html
+    - name: check if openvmm needs to be cloned
       run: |-
         flowey e 3 flowey_core::pipeline::artifact::resolve 1
         flowey e 3 flowey_core::pipeline::artifact::resolve 2
         flowey e 3 flowey_core::pipeline::artifact::resolve 0
+        flowey e 3 flowey_lib_common::git_checkout 0
+        flowey v 3 'flowey_lib_common::git_checkout:0:flowey_lib_common/src/git_checkout.rs:469:80' --is-raw-string --condvar flowey_lib_common::git_checkout:1:flowey_lib_common/src/git_checkout.rs:470:46 write-to-env github floweyvar2
+        flowey v 3 'flowey_lib_common::git_checkout:1:flowey_lib_common/src/git_checkout.rs:470:46' write-to-env github FLOWEY_CONDITION
+      shell: bash
+    - id: flowey_lib_common__git_checkout__1
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: '1'
+        path: repo0
+        persist-credentials: ${{ env.floweyvar2 }}
+      name: checkout repo openvmm
+      if: ${{ fromJSON(env.FLOWEY_CONDITION) }}
+    - name: report cloned repo directories
+      run: |-
+        flowey v 3 'flowey_lib_common::git_checkout:4:flowey_core/src/node/github_context.rs:55:41' --is-raw-string update --env-source github.workspace <<EOF
+        ${{ github.workspace }}
+        EOF
+        flowey e 3 flowey_lib_common::git_checkout 3
+        flowey e 3 flowey_lib_hvlite::git_checkout_openvmm_repo 0
+      shell: bash
+    - name: generate consolidated gh pages html
+      run: |-
         flowey e 3 flowey_lib_hvlite::_jobs::consolidate_and_publish_gh_pages 0
         flowey e 3 flowey_lib_hvlite::_jobs::consolidate_and_publish_gh_pages 1
-        flowey v 3 'flowey_lib_hvlite::_jobs::consolidate_and_publish_gh_pages:1:flowey_lib_hvlite/src/_jobs/consolidate_and_publish_gh_pages.rs:94:39' --is-raw-string write-to-env github floweyvar1
+        flowey v 3 'flowey_lib_hvlite::_jobs::consolidate_and_publish_gh_pages:2:flowey_lib_hvlite/src/_jobs/consolidate_and_publish_gh_pages.rs:105:39' --is-raw-string write-to-env github floweyvar1
       shell: bash
     - id: flowey_lib_hvlite___jobs__consolidate_and_publish_gh_pages__2
       uses: actions/upload-pages-artifact@v3
diff --git a/flowey/flowey_lib_hvlite/src/_jobs/consolidate_and_publish_gh_pages.rs b/flowey/flowey_lib_hvlite/src/_jobs/consolidate_and_publish_gh_pages.rs
index 72d79382a9..70bc076db5 100644
--- a/flowey/flowey_lib_hvlite/src/_jobs/consolidate_and_publish_gh_pages.rs
+++ b/flowey/flowey_lib_hvlite/src/_jobs/consolidate_and_publish_gh_pages.rs
@@ -32,6 +32,7 @@ impl SimpleFlowNode for Node {
 
     fn imports(ctx: &mut ImportCtx<'_>) {
         ctx.import::<flowey_lib_common::copy_to_artifact_dir::Node>();
+        ctx.import::<crate::git_checkout_openvmm_repo::Node>();
     }
 
     fn process_request(request: Self::Request, ctx: &mut NodeCtx<'_>) -> anyhow::Result<()> {
@@ -42,14 +43,18 @@ impl SimpleFlowNode for Node {
             output,
         } = request;
 
+        let repo = ctx.reqv(crate::git_checkout_openvmm_repo::req::GetRepoDir);
+
         let consolidated_html = ctx.emit_rust_stepv("generate consolidated gh pages html", |ctx| {
             let rendered_guide = rendered_guide.claim(ctx);
             let rustdoc_windows = rustdoc_windows.claim(ctx);
             let rustdoc_linux = rustdoc_linux.claim(ctx);
+            let repo = repo.claim(ctx);
             |rt| {
                 let rendered_guide = rt.read(rendered_guide);
                 let rustdoc_windows = rt.read(rustdoc_windows);
                 let rustdoc_linux = rt.read(rustdoc_linux);
+                let repo = rt.read(repo);
 
                 let consolidated_html = std::env::current_dir()?.join("out").absolute()?;
                 fs_err::create_dir(&consolidated_html)?;
@@ -78,6 +83,12 @@ impl SimpleFlowNode for Node {
                     consolidated_html.join("rustdoc/linux"),
                 )?;
 
+                // Make petri logview available under `openvmm.dev/test-results/`
+                flowey_lib_common::_util::copy_dir_all(
+                    repo.join("petri/logview"),
+                    consolidated_html.join("test-results"),
+                )?;
+
                 // as we do not currently have any form of "landing page",
                 // redirect `openvmm.dev` to `openvmm.dev/guide`
                 fs_err::write(consolidated_html.join("index.html"), REDIRECT)?;
diff --git a/petri/logview/index.html b/petri/logview/index.html
new file mode 100644
index 0000000000..4b3a5d3b6e
--- /dev/null
+++ b/petri/logview/index.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Petri test results</title>
+    <style type="text/css">
+        body {
+            font-family: monospace;
+            font-size: 14px;
+        }
+    </style>
+    <script>
+        const baseUrl = "https://openvmmghtestresults.blob.core.windows.net/results";
+
+        function parseBlobs(xmlText) {
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(xmlText, "text/xml");
+            const blobs = xmlDoc.getElementsByTagName("Blob");
+            let blobNames = [];
+            for (let i = 0; i < blobs.length; i++) {
+                const name = blobs[i].getElementsByTagName("Name")[0].textContent;
+                const date = new Date(blobs[i].getElementsByTagName("Creation-Time")[0].textContent);
+                blobNames.push({
+                    name: name,
+                    creationTime: date,
+                });
+            }
+            return blobNames;
+        }
+
+        // Get the blob list, which is in XML via a GET request.
+        function getTestList(runName) {
+            const url = `${baseUrl}?restype=container&comp=list&showonly=files&prefix=${encodeURIComponent(runName)}`;
+            fetch(url)
+                .then(response => response.text())
+                .then(data => {
+                    let blobs = parseBlobs(data);
+                    let run = {};
+                    for (const blob of blobs) {
+                        const nameParts = blob.name.split("/");
+                        let fileName = nameParts[nameParts.length - 1];
+                        if (fileName !== "petri.jsonl") {
+                            continue;
+                        }
+                        const testName = nameParts[nameParts.length - 2];
+                        const jobName = nameParts[nameParts.length - 3];
+                        const path = nameParts.slice(0, -3).join("/");
+                        const url = `test.html?run=${path}&job=${jobName}&test=${testName}`;
+                        if (!run[jobName]) {
+                            run[jobName] = {
+                                failed: false,
+                                tests: [],
+                            };
+                        }
+                        let job = run[jobName];
+                        const failed = Math.random() < 0.1; // TODO
+                        job.failed |= failed;
+                        job.tests.push({
+                            name: testName,
+                            url: url,
+                            failed: failed,
+                        });
+                    }
+
+                    let failedHtml = "";
+                    let passingHtml = "";
+
+                    for (const job in run) {
+                        run[job].tests.sort((a, b) => {
+                            if (a.failed !== b.failed) {
+                                return a.failed ? -1 : 1; // Failed tests first.
+                            }
+                            return a.name.localeCompare(b.name); // Then by name.
+                        });
+                        let thisHtml = `<li>${job}<ul>`;
+                        for (const test of run[job].tests) {
+                            let icon = test.failed ? "&#10060;" : "&#9989;"; // Cross for failed, check for passed.
+                            thisHtml += `<li><a href="${test.url}">${icon} ${test.name}</a></li>`;
+                        }
+                        thisHtml += "</ul></li>";
+                        if (run[job].failed) {
+                            failedHtml += thisHtml;
+                        } else {
+                            passingHtml += thisHtml;
+                        }
+                    }
+
+                    let html = `<h2>Failed jobs</h2>
+                        <ul>${failedHtml}</ul>
+                        <h2>Passing jobs</h2>
+                        <ul>${passingHtml}</ul>`;
+
+                    document.getElementById("runList").innerHTML = html;
+                })
+                .catch(error => console.error('Error fetching blob list:', error));
+        }
+
+        function getRunList() {
+            const url = `${baseUrl}?restype=container&comp=list&showonly=files&prefix=runs/`;
+            fetch(url)
+                .then(response => response.text())
+                .then(data => {
+                    const blobs = parseBlobs(data);
+                    const runs = blobs.map(blob => {
+                        // Remove runs/ prefix.
+                        return {
+                            name: blob.name.replace(/^runs\//, ''),
+                            creationTime: blob.creationTime
+                        };
+                    });
+                    runs.sort((a, b) => b.creationTime - a.creationTime); // Sort by creation time, newest first.
+                    let html = `<table>
+                        <thead>
+                            <tr>
+                                <th>Time</th>
+                                <th>Run</th>
+                            </tr>
+                        </thead>
+                        <tbody>`;
+                    for (const run of runs) {
+                        html += `<tr>
+                            <td>${run.creationTime.toLocaleString()}</td>
+                            <td><a href="?run=${encodeURIComponent(run.name)}">${run.name}</a></td>
+                        </tr>`;
+                    }
+                    html += "</table>";
+                    if (runs.length === 0) {
+                        html = "No runs found.";
+                    }
+                    document.getElementById("runList").innerHTML = html;
+                })
+                .catch(error => console.error('Error fetching run list:', error));
+        }
+
+        window.onload = function () {
+            const urlParams = new URLSearchParams(window.location.search);
+            const run = urlParams.get('run');
+            document.getElementById("runList").innerText = "Loading...";
+            if (run) {
+                document.getElementById("runName").innerText = run;
+                document.getElementById("backToRuns").innerHTML = `<a href="?">All runs</a>`;
+                getTestList(run);
+            } else {
+                document.getElementById("runName").innerText = "Runs";
+                getRunList();
+            }
+        };
+    </script>
+</head>
+
+<body>
+    <h1 id="runName">Loading</h1>
+    <div id="backToRuns"></div>
+    <div id="runList"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/petri/logview/test.html b/petri/logview/test.html
new file mode 100644
index 0000000000..4b7688e1eb
--- /dev/null
+++ b/petri/logview/test.html
@@ -0,0 +1,479 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Petri test results</title>
+    <style type="text/css">
+        body {
+            font-family: monospace;
+            font-size: 14px;
+        }
+
+        #logContainer table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        #logContainer th,
+        #logContainer td {
+            border: 1px solid #ddd;
+            padding: 6px 10px;
+            text-align: left;
+        }
+
+        #logContainer thead {
+            background-color: #f0f0f0;
+            font-weight: bold;
+        }
+
+        #logContainer tr.selected {
+            outline: 2px solid #007acc;
+            outline-offset: -2px;
+        }
+
+        /* Zebra striping for rows */
+        #logContainer tbody tr:nth-child(even) {
+            background-color: #fafafa;
+        }
+
+        #logContainer tbody tr:nth-child(odd) {
+            background-color: #ffffff;
+        }
+
+        /* Severity-based highlighting */
+        #logContainer tr.severity-ERROR td {
+            border-left: 4px solid #d00;
+            color: #900;
+        }
+
+        #logContainer tr.severity-WARN td {
+            border-left: 4px solid #d98e00;
+            color: #a65f00;
+        }
+
+        #logContainer tr.severity-INFO td {
+            border-left: 4px solid #007acc;
+            color: #004e7a;
+        }
+
+        #logContainer tr.severity-DEBUG td {
+            border-left: 4px solid #888;
+            color: #555;
+        }
+
+        #logContainer td.timestamp {
+            white-space: nowrap;
+        }
+
+        #filterBar {
+            position: sticky;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: white;
+            display: flex;
+            justify-content: space-between;
+            /* left + right */
+            align-items: center;
+            padding: 8px 16px;
+            border-bottom: 1px solid #ccc;
+            z-index: 10;
+            box-sizing: border-box;
+        }
+
+        #testName {
+            font-weight: bold;
+            font-size: 16px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 50%;
+        }
+
+        #filterWrapper {
+            position: relative;
+            display: inline-block;
+        }
+
+        #search {
+            font-size: 14px;
+            padding: 6px 28px 6px 10px;
+            /* leave space for the X */
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-family: monospace;
+            min-width: 200px;
+        }
+
+        #clearFilter {
+            position: absolute;
+            right: 6px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            font-size: 16px;
+            color: #888;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+        }
+
+        #clearFilter:hover {
+            color: #000;
+        }
+    </style>
+    <script>
+        function removeTimestamp(orig, entryTimestamp) {
+            const message = orig.trim();
+            const i = message.indexOf(" ");
+            if (i === -1) {
+                return orig;
+            }
+            let ts = message.slice(0, i);
+            if (ts.endsWith("s")) {
+                const secs = parseFloat(ts.slice(0, -1));
+                if (!isNaN(secs)) {
+                    return message.slice(i + 1);
+                }
+            }
+
+            if (ts.startsWith("[")) {
+                ts = ts.slice(1, -1);
+            }
+            const parsedTs = new Date(ts);
+            if (isNaN(parsedTs.getTime())) {
+                return orig;
+            }
+            parsedTs.setMilliseconds(0);
+            const truncatedTs = new Date(entryTimestamp.getTime());
+            truncatedTs.setMilliseconds(0);
+            if (parsedTs.getTime() !== truncatedTs.getTime()) {
+                return orig;
+            }
+            return message.slice(i + 1);
+        }
+
+        function replaceSeverity(orig, severity) {
+            // If the message starts with a severity level, remove it and also return it.
+            const severityLevels = ["ERROR", "WARN", "INFO", "DEBUG"];
+            const message = orig.trim();
+            for (const level of severityLevels) {
+                if (message.startsWith(level)) {
+                    return {
+                        message: message.slice(level.length + 1),
+                        severity: level
+                    };
+                }
+            }
+            // If no severity level is found, return the original message.
+            return {
+                message: orig,
+                severity: severity,
+            };
+        }
+
+        function formatRelative(from, to) {
+            const deltaMs = new Date(to) - new Date(from);
+            const sec = (deltaMs % 1000000) / 1000;
+            const min = Math.floor((deltaMs / 60000) % 60);
+            const hr = Math.floor(deltaMs / 3600000);
+
+            return `${hr > 0 ? hr + 'h ' : ''}${min}m ${sec}s`;
+        }
+
+        function ansiToHtml(str) {
+            const ANSI_STYLE_MAP = {
+                // Text styles
+                '1': 'font-weight: bold',
+                '3': 'font-style: italic',
+                '4': 'text-decoration: underline',
+
+                // Foreground colors
+                '30': 'color: black', '31': 'color: red', '32': 'color: green',
+                '33': 'color: #b58900', '34': 'color: blue', '35': 'color: magenta',
+                '36': 'color: cyan', '37': 'color: white',
+
+                '90': 'color: gray', '91': 'color: lightcoral', '92': 'color: lightgreen',
+                '93': 'color: gold', '94': 'color: lightskyblue', '95': 'color: plum',
+                '96': 'color: lightcyan', '97': 'color: white',
+
+                // Reset foreground
+                '39': 'color: inherit'
+            };
+
+            const ESC = '\u001b';
+            const ESC_REGEX = /\u001b\[([0-9;]*)m/g;
+
+            let result = '';
+            let lastIndex = 0;
+            let currentStyles = [];
+
+            const flush = (text) => {
+                if (!text) return;
+                if (currentStyles.length > 0) {
+                    result += `<span style="${currentStyles.join('; ')}">${escapeHtml(text)}</span>`;
+                } else {
+                    result += escapeHtml(text);
+                }
+            };
+
+            const escapeHtml = (text) => text
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+
+            for (const match of str.matchAll(ESC_REGEX)) {
+                const [fullMatch, codeStr] = match;
+                const index = match.index;
+
+                // Flush plain text before this escape sequence
+                flush(str.slice(lastIndex, index));
+
+                // Update styles
+                const codes = codeStr.split(';');
+                for (const code of codes) {
+                    if (code === '0') {
+                        currentStyles = [];
+                        continue;
+                    }
+                    const style = ANSI_STYLE_MAP[code];
+                    if (style) {
+                        // Replace style of the same type
+                        const type = style.split(':')[0];
+                        currentStyles = currentStyles.filter(s => !s.startsWith(type));
+                        currentStyles.push(style);
+                    }
+                }
+
+                lastIndex = index + fullMatch.length;
+            }
+
+            // Flush any trailing text
+            flush(str.slice(lastIndex));
+            return result;
+        }
+
+        let logEntries = [];
+
+        function getTestResults(run, job, test) {
+            const url = `https://openvmmghtestresults.blob.core.windows.net/results/${run}/${job}/${test}/petri.jsonl`;
+            console.log(url);
+            fetch(url)
+                .then(response => response.text())
+                .then(data => {
+                    let lines = data.split("\n").filter(line => line.trim() !== "").map(line => JSON.parse(line));
+                    lines.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+                    let start;
+                    for (let i = 0; i < lines.length; i++) {
+                        const line = lines[i];
+
+                        const timestamp = line.timestamp;
+                        let message = line.message || "";
+                        let severity = line.severity || "INFO";
+                        const source = line.source || "unknown";
+
+                        if (!line.message) {
+                            console.log(line);
+                            continue;
+                        }
+
+                        if (!start) {
+                            start = line.timestamp;
+                        }
+                        const relative = formatRelative(start, timestamp);
+
+                        message = removeTimestamp(message, new Date(line.timestamp));
+
+                        const r = replaceSeverity(message, severity);
+                        message = r.message;
+                        severity = r.severity;
+
+                        message = ansiToHtml(message);
+
+                        logEntries.push({
+                            timestamp: timestamp,
+                            relative: relative,
+                            severity: severity,
+                            source: source,
+                            message: message
+                        });
+                    }
+
+                    prepTestResults();
+
+                })
+                .catch(error => console.error('Error fetching test results:', error));
+        }
+
+        function prepTestResults() {
+            const container = document.getElementById("logContainer");
+            container.innerHTML = `<table>
+                        <thead>
+                            <tr>
+                                <th>Timestamp</th>
+                                <th>Severity</th>
+                                <th>Source</th>
+                                <th>Message</th>
+                            </tr>
+                        </thead>
+                        <tbody id="logBody">
+                        </tbody>
+                        </table>
+                        `;
+
+            // Clear on X click
+            document.getElementById("clearFilter").addEventListener('click', () => {
+                input.value = '';
+                renderLogTable(logEntries);
+                input.focus();
+            });
+
+            document.addEventListener('keydown', (e) => {
+                const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+                const isF = e.key === 'f' || e.key === 'F';
+
+                if ((isMac && e.metaKey && isF) || (!isMac && e.ctrlKey && isF)) {
+                    e.preventDefault();
+                    searchInput.focus();
+                    searchInput.select();
+                    return;
+                }
+
+                if (e.key === 'Escape') {
+                    if (searchInput.value) {
+                        searchInput.value = '';
+                        renderLogs(logEntries);
+                    } else {
+                        searchInput.blur();
+                    }
+                }
+            });
+
+            renderLogs(logEntries);
+            const searchInput = document.getElementById("search");
+            searchInput.addEventListener("input", function () {
+                const tokens = tokenizeSearchQuery(this.value);
+                const filteredLogs = logEntries.filter(log => rowMatchesQuery(log, tokens));
+                renderLogs(filteredLogs);
+            });
+
+            enableRowSelectionAndCopy(container);
+
+        }
+
+        function renderLogs(filteredLogs) {
+            let html = "";
+            for (const log of filteredLogs) {
+                html += `<tr class="severity-${log.severity}">
+                        <td class="timestamp" title="${log.timestamp}">${log.relative}</td>
+                        <td>${log.severity}</td>
+                        <td>${log.source}</td>
+                        <td>${log.message}</td>
+                    </tr>`;
+
+            }
+            const logBody = document.getElementById("logBody");
+            logBody.innerHTML = html;
+        }
+
+        function tokenizeSearchQuery(query) {
+            // If there's an unmatched quote, pretend it's closed at the end
+            const quoteCount = (query.match(/"/g) || []).length;
+            if (quoteCount % 2 !== 0) {
+                query += '"';
+            }
+            const regex = /"([^"]+)"|(\S+)/g;
+            const tokens = [];
+            let match;
+            while ((match = regex.exec(query))) {
+                tokens.push(match[1] || match[2]);
+            }
+            return tokens;
+        }
+
+        function rowMatchesQuery(log, tokens) {
+            return tokens.every(token => {
+                const [prefix, ...rest] = token.split(':');
+                const term = rest.join(':').toLowerCase();
+
+                if (prefix === 'source') {
+                    return log.source.toLowerCase().includes(term);
+                } else if (prefix === 'severity') {
+                    return log.severity.toLowerCase().includes(term);
+                } else if (prefix === 'message') {
+                    return log.message.toLowerCase().includes(term);
+                } else {
+                    // general match
+                    return (
+                        log.source.toLowerCase().includes(token.toLowerCase()) ||
+                        log.severity.toLowerCase().includes(token.toLowerCase()) ||
+                        log.message.toLowerCase().includes(token.toLowerCase())
+                    );
+                }
+            });
+        }
+
+        function enableRowSelectionAndCopy(container) {
+            let selectedRow = null;
+
+            container.addEventListener('click', (e) => {
+                const row = e.target.closest('tr');
+                if (!row || !row.parentElement.matches('tbody')) return;
+
+                // Remove previous selection
+                if (selectedRow) selectedRow.classList.remove('selected');
+
+                // Select new row
+                selectedRow = row;
+                selectedRow.classList.add('selected');
+            });
+
+            document.addEventListener('copy', (e) => {
+                if (!selectedRow) return;
+                const selection = window.getSelection();
+                if (selection && selection.toString().trim()) return; // user selected text, let it be
+
+                // Copy text content of row, tab-separated
+                const cells = Array.from(selectedRow.querySelectorAll('td'));
+                const text = cells.map(td => td.textContent.trim()).join('\t');
+
+                e.clipboardData.setData('text/plain', text);
+                e.preventDefault();
+            });
+        }
+
+        window.onload = function () {
+            const urlParams = new URLSearchParams(window.location.search);
+            const run = urlParams.get('run');
+            const test = urlParams.get('test');
+            const job = urlParams.get('job');
+            if (!run || !test || !job) {
+                document.getElementById("runName").innerText = "No test specified";
+                return;
+            }
+            document.getElementById("runName").innerHTML = `<a href="index.html?run=${encodeURIComponent(run)}">${run}</a>`;
+            document.getElementById("jobName").innerText = job;
+            document.getElementById("testName").innerText = test;
+            document.getElementById("logContainer").innerText = "Loading...";
+            getTestResults(run, job, test);
+        };
+    </script>
+
+</head>
+
+<body>
+    <h1 id="runName">Loading</h1>
+    <h2 id="jobName"></h2>
+    <div id="filterBar">
+        <div id="testName"></div>
+        <div id="filterWrapper">
+            <input type="text" id="search" placeholder="Filter logs…" />
+            <button id="clearFilter" title="Clear filter">&times;</button>
+        </div>
+    </div>
+    <div id="logContainer"></div>
+</body>
+
+</html>
\ No newline at end of file

From 56a3c8f99edd1294a8dffe53f4e71c25b79e2420 Mon Sep 17 00:00:00 2001
From: John Starks <jostarks@microsoft.com>
Date: Tue, 27 May 2025 16:23:26 +0000
Subject: [PATCH 2/3] tweaks

---
 petri/logview/index.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/petri/logview/index.html b/petri/logview/index.html
index 4b3a5d3b6e..be5c6a0cfd 100644
--- a/petri/logview/index.html
+++ b/petri/logview/index.html
@@ -18,12 +18,14 @@
             const xmlDoc = parser.parseFromString(xmlText, "text/xml");
             const blobs = xmlDoc.getElementsByTagName("Blob");
             let blobNames = [];
-            for (let i = 0; i < blobs.length; i++) {
-                const name = blobs[i].getElementsByTagName("Name")[0].textContent;
-                const date = new Date(blobs[i].getElementsByTagName("Creation-Time")[0].textContent);
+            for (const blob of blobs) {
+                const name = blob.getElementsByTagName("Name")[0].textContent;
+                const date = new Date(blob.getElementsByTagName("Creation-Time")[0].textContent);
+                const metadata = blob.getElementsByTagName("Metadata").map(m => m.textContent);
                 blobNames.push({
                     name: name,
                     creationTime: date,
+                    metadata: metadata,
                 });
             }
             return blobNames;
@@ -40,8 +42,13 @@
                     for (const blob of blobs) {
                         const nameParts = blob.name.split("/");
                         let fileName = nameParts[nameParts.length - 1];
-                        if (fileName !== "petri.jsonl") {
-                            continue;
+                        let failed;
+                        if (fileName === "petri.passed") {
+                            failed = false;
+                        } else if (fileName === "petri.failed") {
+                            failed = true;
+                        } else {
+                            continue; // Not a test result file.
                         }
                         const testName = nameParts[nameParts.length - 2];
                         const jobName = nameParts[nameParts.length - 3];
@@ -54,7 +61,6 @@
                             };
                         }
                         let job = run[jobName];
-                        const failed = Math.random() < 0.1; // TODO
                         job.failed |= failed;
                         job.tests.push({
                             name: testName,
@@ -97,7 +103,7 @@ <h2>Passing jobs</h2>
         }
 
         function getRunList() {
-            const url = `${baseUrl}?restype=container&comp=list&showonly=files&prefix=runs/`;
+            const url = `${baseUrl}?restype=container&comp=list&showonly=files&include=metadata&prefix=runs/`;
             fetch(url)
                 .then(response => response.text())
                 .then(data => {
@@ -119,9 +125,10 @@ <h2>Passing jobs</h2>
                         </thead>
                         <tbody>`;
                     for (const run of runs) {
+                        const marker = run.metadata["petrifailed"] > 0 ? "&#10060;" : "&#9989;"; // Cross for failed runs, check for passing runs.
                         html += `<tr>
                             <td>${run.creationTime.toLocaleString()}</td>
-                            <td><a href="?run=${encodeURIComponent(run.name)}">${run.name}</a></td>
+                            <td><a href="?run=${encodeURIComponent(run.name)}">${run.name} ${marker}</a></td>
                         </tr>`;
                     }
                     html += "</table>";

From fa39f6ee4c28afd01a5a00bd037029b0cd873775 Mon Sep 17 00:00:00 2001
From: John Starks <jostarks@microsoft.com>
Date: Tue, 27 May 2025 16:46:50 +0000
Subject: [PATCH 3/3] tweaks

---
 petri/logview/index.html | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/petri/logview/index.html b/petri/logview/index.html
index be5c6a0cfd..c6dd79352c 100644
--- a/petri/logview/index.html
+++ b/petri/logview/index.html
@@ -13,6 +13,9 @@
     <script>
         const baseUrl = "https://openvmmghtestresults.blob.core.windows.net/results";
 
+        const cross = "&#10060;"; // Cross for failed tests
+        const check = "&#9989;"; // Check for passed tests
+
         function parseBlobs(xmlText) {
             const parser = new DOMParser();
             const xmlDoc = parser.parseFromString(xmlText, "text/xml");
@@ -21,7 +24,11 @@
             for (const blob of blobs) {
                 const name = blob.getElementsByTagName("Name")[0].textContent;
                 const date = new Date(blob.getElementsByTagName("Creation-Time")[0].textContent);
-                const metadata = blob.getElementsByTagName("Metadata").map(m => m.textContent);
+                let metadata = {};
+                for (const meta of blob.getElementsByTagName("Metadata")) {
+                    const child = meta.children[0];
+                    metadata[child.tagName] = child.textContent;
+                }
                 blobNames.push({
                     name: name,
                     creationTime: date,
@@ -81,7 +88,7 @@
                         });
                         let thisHtml = `<li>${job}<ul>`;
                         for (const test of run[job].tests) {
-                            let icon = test.failed ? "&#10060;" : "&#9989;"; // Cross for failed, check for passed.
+                            let icon = test.failed ? cross : check;
                             thisHtml += `<li><a href="${test.url}">${icon} ${test.name}</a></li>`;
                         }
                         thisHtml += "</ul></li>";
@@ -112,7 +119,8 @@ <h2>Passing jobs</h2>
                         // Remove runs/ prefix.
                         return {
                             name: blob.name.replace(/^runs\//, ''),
-                            creationTime: blob.creationTime
+                            creationTime: blob.creationTime,
+                            failed: blob.metadata["petrifailed"],
                         };
                     });
                     runs.sort((a, b) => b.creationTime - a.creationTime); // Sort by creation time, newest first.
@@ -121,14 +129,16 @@ <h2>Passing jobs</h2>
                             <tr>
                                 <th>Time</th>
                                 <th>Run</th>
+                                <th>Failed</th>
                             </tr>
                         </thead>
                         <tbody>`;
                     for (const run of runs) {
-                        const marker = run.metadata["petrifailed"] > 0 ? "&#10060;" : "&#9989;"; // Cross for failed runs, check for passing runs.
+                        const marker = run.failed > 0 ? cross : check;
                         html += `<tr>
                             <td>${run.creationTime.toLocaleString()}</td>
                             <td><a href="?run=${encodeURIComponent(run.name)}">${run.name} ${marker}</a></td>
+                            <td>${run.failed}</td>
                         </tr>`;
                     }
                     html += "</table>";