logs.html → {js,html} split + cleanup + lit + tsc + biome

HACKING.md

@@ -69,20 +69,32 @@ pushing PRs that will fail on trivial errors:
 
     ln -s ../../test/run .git/hooks/pre-push
 
-### Updating pixel tests code
+### Hacking on the logs page
 
-> [!NOTE]
-> This will only update the `log.html` page and redirect all links there to the log URL set in `<head>`. For `pixeldiff.html` there is currently no written dev guide.
+The logs viewer page lives in `lib/html/s3streamer`, as `log.html` and
+`log.js`.  It's no-bundle, based on Web Components using Lit, and covered by
+TypeScript (on JSDoc comments) and Biome.  It's uploaded by the s3streamer
+server code (`lib/aio/s3streamer.py`) at the start of each new test job.
 
+You can also test it locally by downloading an existing raw log file into
+`lib/html/s3streamer/log` and starting a local webserver to view the result:
 
-* Easiest way to develop is to go to `./lib/s3-html/log.html` and within `<head>` add a test URL for what you want to improve layout for.
-```html
-<base href="https://log-url/log.html" />
-<meta http-equiv="refresh" content="5" >
 ```
-* Start a server for the `lib/` directory with `python -m http.server -d ./lib/s3-html`
-* Open up the URL echoed in terminal and go to `/log.html`
-* Make changes in `log.html` and see changes refresh live in the browser
+python -m http.server -d ./lib/html/s3streamer
+```
+
+If you need to test the streaming code itself, it's also possible to run CI
+jobs locally using `job-runner run cockpit-project/starter-kit` or something
+similar.  In the default configuration, `job-runner` will write to the local
+disk instead of uploading to S3, but the s3streamer algorithm is still used and
+live updates should work in the same way.  In that case you should run the
+webserver like this:
+
+```
+python -m http.server -b 127.0.0.1 -d ~/.cache/cockpit-dev/job-runner-logs
+```
+
+See `job-runner.toml` for more information.
 
 ## Debugging tips
 

lib/aio/s3streamer.py

@@ -216,7 +216,7 @@ def start(self, data: str) -> None:
         # Send the initial data immediately, to get the chunks file written out.
         self.pending = data.encode(errors='replace')
         self.send_pending()
-        AttachmentsDirectory(self.index, f'{LIB_DIR}/s3-html').scan()
+        AttachmentsDirectory(self.index, f'{LIB_DIR}/html/s3streamer').scan()
 
     def write(self, data: str) -> None:
         self.pending += data.encode(errors='replace')

lib/html/.gitignore

@@ -0,0 +1 @@
+/tsconfig.tsbuildinfo

lib/html/dashboard/dashboard.html

@@ -41,6 +41,16 @@
             color: var(--blue);
         }
         </style>
+        <script type="importmap">
+        {
+            "imports": {
+                "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3.3.3/all/lit-all.min.js"
+            },
+            "integrity": {
+                "https://cdn.jsdelivr.net/gh/lit/dist@3.3.3/all/lit-all.min.js": "sha384-qSoE0anPDAzsBuoT95C270Wd5oKtOOlLdEvSXEk9bRYTg+5ygjyt20ZuhzH0oNbt"
+            }
+        }
+        </script>
     </head>
     <body>
         <ci-dashboard></ci-dashboard>

lib/html/dashboard/dashboard.js

@@ -20,7 +20,7 @@
  * }} DashboardData
  */
 
-import { css, html, LitElement } from "https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js";
+import { css, html, LitElement } from "lit";
 
 class CiDashboard extends LitElement {
     /** @override */

lib/html/s3streamer/log.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>Cockpit Integration Tests</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link
+            href="https://cdn.jsdelivr.net/npm/@patternfly/patternfly@6.6.1/patternfly.css"
+            rel="stylesheet"
+            integrity="sha384-g5M+EcibNLBAxBtzXCtuIXjifI9I6483ybcC7TsDXBYa46ZI0P0d5r1/pKefIAJ7"
+            crossorigin="anonymous"
+        >
+        <style>
+        * {
+            font-family: "Open Sans", sans-serif;
+        }
+        body {
+            margin: 1rem;
+        }
+
+        body a {
+            text-decoration: none;
+        }
+
+        body > div {
+            margin-block-end: var(--pf-t--global--spacer--sm);
+        }
+
+        .test-entry.failed .test-entry-toggle {
+            background-color: var(--pf-t--global--icon--color--status--danger--default);
+        }
+        .test-entry.retried .test-entry-toggle {
+            background-color: var(--pf-t--global--color--nonstatus--purple--default);
+        }
+        .test-entry.skipped .test-entry-toggle {
+            background-color: var(--pf-t--global--color--nonstatus--orange--default);
+        }
+        .pf-v6-c-data-list.pf-m-compact {
+            --pf-v6-c-data-list--m-compact--FontSize: var(--pf-t--global--font--size--body--md);
+        }
+        </style>
+        <script type="text/javascript">
+        // Automatic dark mode based on system preference
+        const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+        function applyTheme(e) {
+            const cl = document.documentElement.classList;
+            if (e.matches) {
+                cl.add("pf-v6-theme-dark");
+            } else {
+                cl.remove("pf-v6-theme-dark");
+            }
+        }
+
+        // Apply theme on page load
+        applyTheme(darkModeMediaQuery);
+        // Listen for changes to the color scheme preference
+        darkModeMediaQuery.addEventListener("change", applyTheme);
+        </script>
+        <script type="importmap">
+        {
+            "imports": {
+                "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3.3.3/all/lit-all.min.js"
+            },
+            "integrity": {
+                "https://cdn.jsdelivr.net/gh/lit/dist@3.3.3/all/lit-all.min.js": "sha384-qSoE0anPDAzsBuoT95C270Wd5oKtOOlLdEvSXEk9bRYTg+5ygjyt20ZuhzH0oNbt"
+            }
+        }
+        </script>
+        <script type="module" src="log.js"></script>
+    </head>
+    <body>
+        <log-viewer href="log"></log-viewer>
+    </body>
+</html>