pixie-lab 0.1.0__py3-none-any.whl

pixie/web/_templates/catalog.html

@@ -0,0 +1,364 @@
+{% extends "layout.html" %}
+{% from "_partials/table_helpers.html" import search_input, sort_header, pagination_inline %}
+{% from "_partials/recent_events.html" import recent_events_card %}
+{% from "_partials/page_description.html" import page_description %}
+{% block title %}Catalog - pixie{% endblock %}
+{% block subnav %}
+<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
+    <div class="container">
+        {# LEFT: relative anchor links to in-page sections. #}
+        <span class="subnav-jumps d-flex align-items-center flex-wrap">
+            <a href="#entries">Entries</a>
+        </span>
+        {# RIGHT: inline action form. Import a catalog.toml URL and
+           upsert every entry. #}
+        <form method="post" action="/ui/catalog/import"
+              class="subnav-actions d-flex align-items-center gap-1 m-0 ms-auto">
+            <label for="catalog_url" class="text-white-50 small mb-0 flex-shrink-0"
+                   title="Import a catalog.toml URL">
+                <i class="bi bi-cloud-arrow-down"></i>
+            </label>
+            <input type="url" id="catalog_url" name="url"
+                   class="form-control form-control-sm"
+                   style="max-width: 22rem; min-width: 0;"
+                   placeholder="catalog.toml URL"
+                   required>
+            <button type="submit" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap">
+                Import
+            </button>
+        </form>
+    </div>
+</nav>
+{% endblock %}
+{% block content %}
+{{ page_description('journal-code', 'Images pixie can flash or netboot. Add an entry with a source URL, then fetch it to pull the bytes onto pixie. An entry is bindable once fetched; deletion is safe only after every machine pointing at it is rebound.') }}
+<div class="card" id="entries">
+    {# Card header: title/label on the left, filter form inline in
+       the middle, pagination + per-page on the right -- same
+       toolbar shape bty uses on /ui/events. #}
+    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
+        <span class="text-nowrap"><i class="bi bi-collection me-1"></i>Catalog</span>
+        <span class="vr"></span>
+        {{ search_input('/ui/catalog', q, preserved, 'name / src / arch / format / description') }}
+        {{ pagination_inline(page_state, preserved, label='entries') }}
+    </div>
+    {% if entries %}
+    <div class="table-responsive">
+        <table class="table table-hover align-middle mb-0">
+            <thead class="table-light">
+                <tr>
+                    {{ sort_header('Entry', 'name', sort, preserved) }}
+                    {{ sort_header('Type', 'format', sort, preserved) }}
+                    <th scope="col">Fetch state</th>
+                    <th scope="col">NBD</th>
+                    <th scope="col" class="text-end">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for e in entries %}
+                {% set st = fetch_states.get(e.name) or {} %}
+                {% set exp = exports_by_sha.get(e.content_sha256) if e.content_sha256 else none %}
+                <tr>
+                    <td>
+                        <div class="fw-semibold">
+                            <a href="/ui/catalog/{{ e.name }}" class="text-decoration-none">
+                                <code>{{ e.name }}</code>
+                            </a>
+                        </div>
+                        {% if e.description %}
+                        <div class="text-muted small">{{ e.description }}</div>
+                        {% endif %}
+                        <div class="text-muted small">
+                            <i class="bi bi-link-45deg"></i>
+                            <code>{{ e.src }}</code>
+                        </div>
+                        {% if e.netboot_src %}
+                        <div class="text-muted small">
+                            <i class="bi bi-box-seam"></i>
+                            netboot bundle: <code>{{ e.netboot_src }}</code>
+                        </div>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if e.bindable %}
+                        <span class="badge text-bg-primary">
+                            <i class="bi bi-hdd me-1"></i>Disk image
+                        </span>
+                        {% else %}
+                        <span class="badge text-bg-info">
+                            <i class="bi bi-box-seam me-1"></i>Netboot bundle
+                        </span>
+                        {% endif %}
+                        <div class="text-muted small mt-1">
+                            <span class="badge text-bg-secondary">{{ e.format }}</span>
+                            {% if e.arch %}<span class="ms-1">{{ e.arch }}</span>{% endif %}
+                        </div>
+                    </td>
+                    <td data-fetch-cell="{{ e.name }}">
+                        {% if st.state == "fetching" %}
+                        {# Live phase pill: server-rendered starting
+                           state; the poll script below rewrites this
+                           cell's inner HTML every 2s when there's an
+                           in-flight fetch. Phases in the sub-state
+                           dict: ``downloading`` (+bytes_downloaded /
+                           total_bytes), ``decompressing`` (+format),
+                           ``unpacking`` (netboot bundles). #}
+                        {% if st.phase == "downloading" %}
+                        <span class="badge text-bg-primary">
+                            <i class="bi bi-cloud-download me-1"></i>downloading
+                        </span>
+                        {% if st.total_bytes %}
+                        <div class="text-muted small font-monospace">
+                            {{ st.bytes_downloaded or 0 }} / {{ st.total_bytes }} bytes
+                        </div>
+                        {% elif st.bytes_downloaded %}
+                        <div class="text-muted small font-monospace">
+                            {{ st.bytes_downloaded }} bytes so far
+                        </div>
+                        {% endif %}
+                        {% elif st.phase == "decompressing" %}
+                        <span class="badge text-bg-primary">
+                            <i class="bi bi-box-arrow-in-down me-1"></i>decompressing
+                        </span>
+                        {% if st.format %}
+                        <div class="text-muted small">{{ st.format }}</div>
+                        {% endif %}
+                        {% elif st.phase == "unpacking" %}
+                        <span class="badge text-bg-primary">
+                            <i class="bi bi-box2 me-1"></i>unpacking
+                        </span>
+                        {% else %}
+                        <span class="badge text-bg-primary">
+                            <i class="bi bi-arrow-down-circle me-1"></i>fetching&hellip;
+                        </span>
+                        {% endif %}
+                        {% if st.started_at %}
+                        <div class="text-muted small">since {{ st.started_at | fmt_ts }}</div>
+                        {% endif %}
+                        {% elif st.state == "error" %}
+                        <span class="badge text-bg-danger" title="{{ st.error or '' }}">
+                            <i class="bi bi-exclamation-circle me-1"></i>error
+                        </span>
+                        {% if st.error %}
+                        <div class="text-muted small">{{ st.error }}</div>
+                        {% endif %}
+                        {% elif st.state == "unchanged" %}
+                        {# The operator clicked Update but the entry was
+                           already at the current sha and the on-disk
+                           bytes were intact. The pill lingers ~8 s (the
+                           handler auto-clears it) so the click has a
+                           visible acknowledgement, then the row falls
+                           back to the plain "fetched" badge. #}
+                        <span class="badge text-bg-info" title="the on-disk bytes match the currently-recorded sha; nothing to fetch">
+                            <i class="bi bi-check2-all me-1"></i>already at latest
+                        </span>
+                        {% if e.content_sha256 %}
+                        <div class="text-muted small font-monospace">
+                            {{ e.content_sha256[:12] }}
+                        </div>
+                        {% endif %}
+                        {% elif e.content_sha256 %}
+                        <span class="badge text-bg-success">
+                            <i class="bi bi-check-circle me-1"></i>fetched
+                        </span>
+                        <div class="text-muted small font-monospace">
+                            {{ e.content_sha256[:12] }}
+                        </div>
+                        {% if e.size_bytes %}
+                        <div class="text-muted small">{{ e.size_bytes }} bytes</div>
+                        {% endif %}
+                        {% else %}
+                        <span class="badge text-bg-secondary">
+                            <i class="bi bi-dash-circle me-1"></i>not fetched
+                        </span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if not e.bindable %}
+                        <span class="text-muted small">
+                            <i class="bi bi-dash"></i> (HTTP artifact)
+                        </span>
+                        {% elif exp is none %}
+                        <span class="text-muted small">
+                            <i class="bi bi-dash"></i> not serving
+                        </span>
+                        {% elif exp.status == 'running' %}
+                        <span class="badge text-bg-success">
+                            <i class="bi bi-broadcast me-1"></i>running
+                        </span>
+                        <div class="text-muted small font-monospace">port {{ exp.nbd_port }}</div>
+                        {% elif exp.status == 'error' %}
+                        <span class="badge text-bg-danger">
+                            <i class="bi bi-exclamation-circle me-1"></i>error
+                        </span>
+                        {% if exp.error %}
+                        <div class="text-danger small">{{ exp.error }}</div>
+                        {% endif %}
+                        {% else %}
+                        <span class="badge text-bg-secondary">{{ exp.status }}</span>
+                        {% endif %}
+                    </td>
+                    <td class="text-end text-nowrap">
+                        {# All three action buttons are ALWAYS rendered so an
+                           operator's eye finds them at the same X position in
+                           every row. Verb + enabled state track the row's
+                           current state: no bytes on disk -> Fetch; a prior
+                           fetch failed -> Retry; already have bytes -> Update
+                           (re-runs the fetch pipeline; picks up a moved
+                           oras:// tag's new manifest); in-flight fetch ->
+                           Fetching (disabled). Update is enabled because
+                           labelling a fetched entry as "Fetch" makes an
+                           operator instinctively hit it thinking bytes are
+                           missing. Stop is disabled when there is no NBD
+                           export to stop; Delete is always enabled. #}
+                        {% set fetching = st.state == 'fetching' %}
+                        {% set fetch_errored = st.state == 'error' %}
+                        {% set already_fetched = e.content_sha256 and not fetch_errored %}
+                        <form method="post" action="/ui/catalog/fetch" class="d-inline">
+                            <input type="hidden" name="name" value="{{ e.name }}">
+                            <button type="submit" class="btn btn-sm btn-outline-primary"
+                                    {% if fetching %}disabled{% endif %}
+                                    title="{% if fetching %}fetch already in flight{% elif already_fetched %}re-run the fetch pipeline; picks up a moved oras:// tag's new bytes{% elif fetch_errored %}retry the failed fetch{% else %}download the bytes for this entry{% endif %}">
+                                {% if fetching %}
+                                <i class="bi bi-hourglass-split me-1"></i>Fetching
+                                {% elif fetch_errored %}
+                                <i class="bi bi-arrow-clockwise me-1"></i>Retry
+                                {% elif already_fetched %}
+                                <i class="bi bi-arrow-repeat me-1"></i>Update
+                                {% else %}
+                                <i class="bi bi-arrow-down-circle me-1"></i>Fetch
+                                {% endif %}
+                            </button>
+                        </form>
+                        <form method="post" action="/ui/exports/delete" class="d-inline"
+                              title="{% if exp is none %}no NBD export to stop{% else %}stop the NBD export ({{ exp.name }}); the catalog entry stays{% endif %}">
+                            <input type="hidden" name="name" value="{{ exp.name if exp is not none else '' }}">
+                            <button type="submit"
+                                    class="btn btn-sm btn-outline-warning"
+                                    aria-label="{% if exp is none %}No NBD export for {{ e.name }}{% else %}Stop NBD export {{ exp.name }}{% endif %}"
+                                    {% if exp is none %}disabled{% endif %}>
+                                <i class="bi bi-stop-circle" aria-hidden="true"></i>
+                            </button>
+                        </form>
+                        <form method="post" action="/ui/catalog/delete" class="d-inline"
+                              title="Delete this catalog entry (does not delete the fetched blob)."
+                              onsubmit="return confirm('Delete catalog entry {{ e.name }}? The fetched blob stays on disk.');">
+                            <input type="hidden" name="name" value="{{ e.name }}">
+                            <button type="submit"
+                                    class="btn btn-sm btn-outline-danger"
+                                    aria-label="Delete catalog entry {{ e.name }}">
+                                <i class="bi bi-trash" aria-hidden="true"></i>
+                            </button>
+                        </form>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% else %}
+    <div class="card-body">
+        <p class="text-muted mb-0">
+            <i class="bi bi-inbox me-1"></i>
+            {% if q %}
+            No entries match <code>{{ q }}</code>.
+            {% else %}
+            No entries yet. Paste a catalog URL in the bar above and hit Import;
+            entries land here staged (not fetched) so you can pick the ones to
+            pull with Fetch.
+            {% endif %}
+        </p>
+    </div>
+    {% endif %}
+</div>
+
+<script>
+// Live fetch-state poller. As long as any row in the current view has
+// a data-fetch-cell whose innerHTML contains "fetching" / "downloading"
+// / "decompressing" / "unpacking", poll /ui/catalog/fetch-states.json
+// every 2 s and rewrite the cells in place. Stops polling when nothing
+// in the current view is in flight anymore -- an operator on a full
+// catalog page with 200 rows won't churn network for rows that are
+// already done. A completed row (state=='done' or 'error') triggers
+// one full-page reload so the fetched/error pill + Actions column
+// reflect the terminal state without hand-crafted templating here.
+(function () {
+    const POLL_MS = 2000;
+    const cells = document.querySelectorAll("[data-fetch-cell]");
+    if (!cells.length) return;
+
+    function fmtBytes(n) {
+        if (n == null) return "";
+        if (n < 1024) return n + " B";
+        if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " KiB";
+        if (n < 1024 * 1024 * 1024) return (n / (1024 * 1024)).toFixed(1) + " MiB";
+        return (n / (1024 * 1024 * 1024)).toFixed(2) + " GiB";
+    }
+
+    function renderCell(cell, state) {
+        if (!state || state.state !== "fetching") return false;
+        let icon = "bi-arrow-down-circle", label = "fetching…";
+        let sub = "";
+        if (state.phase === "downloading") {
+            icon = "bi-cloud-download"; label = "downloading";
+            const done = state.bytes_downloaded || 0;
+            if (state.total_bytes) {
+                const pct = Math.floor((done / state.total_bytes) * 100);
+                sub = `${fmtBytes(done)} / ${fmtBytes(state.total_bytes)} (${pct}%)`;
+            } else if (done) {
+                sub = `${fmtBytes(done)} so far`;
+            }
+        } else if (state.phase === "decompressing") {
+            icon = "bi-box-arrow-in-down"; label = "decompressing";
+            if (state.format) sub = state.format;
+        } else if (state.phase === "unpacking") {
+            icon = "bi-box2"; label = "unpacking";
+        }
+        let html = `<span class="badge text-bg-primary"><i class="bi ${icon} me-1"></i>${label}</span>`;
+        if (sub) html += `<div class="text-muted small font-monospace">${sub}</div>`;
+        cell.innerHTML = html;
+        return true;
+    }
+
+    let interval = null;
+    async function poll() {
+        try {
+            const r = await fetch("/ui/fetch-states.json", {credentials: "same-origin"});
+            if (!r.ok) return;
+            const states = await r.json();
+            let anyInFlight = false;
+            let anyJustFinished = false;
+            cells.forEach((cell) => {
+                const name = cell.getAttribute("data-fetch-cell");
+                const st = states[name];
+                if (st && st.state === "fetching") {
+                    renderCell(cell, st);
+                    anyInFlight = true;
+                } else if (cell.textContent.match(/fetching|downloading|decompressing|unpacking/i)) {
+                    // Was in-flight last render; the server-side state
+                    // moved on. Trigger one reload so the terminal
+                    // pill + Actions column show the correct state.
+                    anyJustFinished = true;
+                }
+            });
+            if (anyJustFinished) {
+                window.location.reload();
+            } else if (!anyInFlight && interval) {
+                clearInterval(interval);
+                interval = null;
+            }
+        } catch (e) { /* swallow; try again next tick */ }
+    }
+
+    // Only spin up polling when a row starts life "in flight".
+    const hasInFlightRow = Array.from(cells).some((c) =>
+        c.textContent.match(/fetching|downloading|decompressing|unpacking/i)
+    );
+    if (hasInFlightRow) {
+        poll();
+        interval = setInterval(poll, POLL_MS);
+    }
+})();
+</script>
+{{ recent_events_card(catalog_events, "catalog") }}
+{% endblock %}