{% extends "layout.html" %}
{% from "_partials/recent_events.html" import recent_events_card %}
{% from "_partials/page_description.html" import page_description %}
{% block title %}Overlays - pixie{% endblock %}

{# State -> badge. Kept as a macro so the server render + the live-
   refresh JS below agree on colour + label for every state. #}
{% macro state_badge(state) %}
{% if state == 'serving' %}<span class="badge text-bg-success"><i class="bi bi-broadcast me-1"></i>Serving</span>
{% elif state == 'held' %}<span class="badge text-bg-primary"><i class="bi bi-lock me-1"></i>Held</span>
{% elif state == 'free' %}<span class="badge text-bg-secondary"><i class="bi bi-unlock me-1"></i>Free</span>
{% elif state == 'orphaned' %}<span class="badge text-bg-warning"><i class="bi bi-question-circle me-1"></i>Orphaned</span>
{% elif state == 'pending' %}<span class="badge text-bg-info" title="The qcow2 is not on disk yet (removed before first boot); the next nbdboot re-creates it from the base image"><i class="bi bi-hourglass-split me-1"></i>Pending</span>
{% else %}<span class="badge text-bg-danger" title="The qcow2 existed after a prior boot but is now gone from disk"><i class="bi bi-exclamation-triangle me-1"></i>File missing</span>{% endif %}
{% endmacro %}

{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#create">Create</a>
            <a href="#overlays">Overlays</a>
            <a href="#events">Events</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block content %}
{{ page_description('layers', 'Persistent named qcow2 overlays for the nbdboot-overlay mode. Each overlay is a globally-unique writable volume over one catalog base image, single-writer: at most one machine holds it at a time. This is where overlays are created: a machine only ever SELECTS an existing overlay, it never creates one. The disk-used + last-modified columns refresh every 5 s while the page is open. Create provisions the overlay at a chosen size (bigger than the small base image, thin until written) so the target has room to install into. Per overlay, Manage grows the disk and takes/reverts/deletes qcow2 snapshots; both act on the qcow2 offline, so unbind the overlay first. Delete removes an overlay entirely; Prune reclaims overlays whose file is gone or whose holder pixie no longer tracks.') }}

{# ---- Summary strip -------------------------------------------------
   Fleet-wide roll-up. The numbers poll live alongside the table so an
   operator watching an overlay grow sees the total tick without a
   reload. Prune sits with the reclaimable tile it acts on. #}
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body py-3">
            <div class="text-muted small text-uppercase">Overlays</div>
            <div class="fs-4 fw-semibold" data-total="count">{{ totals.count }}</div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body py-3">
            <div class="text-muted small text-uppercase">Disk used</div>
            <div class="fs-4 fw-semibold" data-total="used">{{ totals.used_bytes | humanize_bytes }}</div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body py-3">
            <div class="text-muted small text-uppercase">Serving now</div>
            <div class="fs-4 fw-semibold" data-total="running">{{ totals.running }}</div>
            <div class="text-muted small"><span data-total="active">{{ totals.active }}</span> back a current binding</div>
        </div></div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card h-100"><div class="card-body py-3 d-flex flex-column">
            <div class="text-muted small text-uppercase">Reclaimable</div>
            <div class="fs-4 fw-semibold">
                <span data-total="reclaimable">{{ totals.reclaimable }}</span>
                <span class="fs-6 text-muted">(<span data-total="reclaimable-used">{{ totals.reclaimable_bytes | humanize_bytes }}</span>)</span>
            </div>
            <form method="post" action="/ui/overlays/prune" class="mt-auto"
                  onsubmit="return confirm('Prune all reclaimable overlays? This deletes the qcow2 for every overlay whose file is already gone or whose holder is no longer registered. Free overlays kept for a future bind are left alone.');">
                <button type="submit" class="btn btn-sm btn-outline-danger mt-2"
                        {% if not totals.reclaimable %}disabled{% endif %}
                        data-prune-btn
                        title="Delete every file-missing or orphaned overlay.">
                    <i class="bi bi-trash3 me-1"></i>Prune reclaimable
                </button>
            </form>
        </div></div>
    </div>
</div>

{# ---- Create ---------------------------------------------------------
   The one place an overlay comes into being. Materializes the qcow2 over
   a fetched base image up front, so the machine bind form only ever
   selects an existing overlay (never conjures one). #}
<div class="card mb-4" id="create">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-plus-square me-1"></i>Create overlay
    </div>
    <div class="card-body">
        {% if base_images %}
        <form method="post" action="/ui/overlays/create" class="row g-3 align-items-end">
            <div class="col-12 col-md-3">
                <label for="alias" class="form-label">Alias</label>
                <input type="text" id="alias" name="alias" class="form-control font-monospace"
                       required maxlength="64" placeholder="e.g. matx-lab"
                       pattern="[A-Za-z0-9][A-Za-z0-9._-]*"
                       title="Alphanumeric-leading; a-z / A-Z / 0-9 / . _ - (max 64 chars)">
            </div>
            <div class="col-12 col-md-4">
                <label for="image_content_sha256" class="form-label">Base image</label>
                <select id="image_content_sha256" name="image_content_sha256"
                        class="form-select" required>
                    <option value="" disabled selected>Pick a fetched image...</option>
                    {% for e in base_images %}
                    <option value="{{ e.content_sha256 }}">{{ e.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label for="size_gib" class="form-label">Size (GiB)</label>
                <input type="number" id="size_gib" name="size_gib" class="form-control"
                       min="0" step="1" value="64" placeholder="inherit"
                       title="Provisioned virtual disk size. Must be at least the base image size; leave 0 to inherit it. The extra space is thin (COW) until written.">
            </div>
            <div class="col-6 col-md-3">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-plus-lg me-1"></i>Create
                </button>
            </div>
            <div class="col-12">
                <div class="form-text">
                    The overlay is a writable qcow2 layered over the base image; writes
                    survive reboots. <strong>Size</strong> provisions a bigger root than the
                    (small) base image so the target has room to install into -- the space is
                    thin until written, and the target claims it via <code>resize2fs</code> on
                    its next nbdboot. Once created it shows as <em>Free</em> below and can be
                    attached to a machine via the <code>nbdboot-overlay</code> boot mode.
                </div>
            </div>
        </form>
        {% else %}
        <p class="text-muted mb-0">
            <i class="bi bi-inbox me-1"></i>
            No fetched images to layer over. Fetch a disk image on the
            <a href="/ui/catalog">Catalog</a> first, then create an overlay here.
        </p>
        {% endif %}
    </div>
</div>

<div class="card mb-4" id="overlays">
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-2 py-2">
        <span class="text-nowrap"><i class="bi bi-layers me-1"></i>Overlays</span>
    </div>
    {% if overlays %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th scope="col">State</th>
                    <th scope="col">Alias</th>
                    <th scope="col">Base image</th>
                    <th scope="col">Attached to</th>
                    <th scope="col" class="text-end">Used / size</th>
                    <th scope="col">Last modified</th>
                    <th scope="col">Created</th>
                    <th scope="col">Last boot</th>
                    <th scope="col">NBD</th>
                    <th scope="col" class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for ov in overlays %}
                <tr data-ov-row="{{ ov.key }}">
                    <td data-cell="state">{{ state_badge(ov.state) }}</td>
                    <td><code>{{ ov.alias }}</code></td>
                    <td>
                        {% if ov.image_name %}
                        <a href="/ui/catalog/{{ ov.image_name }}" class="text-decoration-none">{{ ov.image_name }}</a>
                        {% else %}
                        <code class="small" title="{{ ov.image_sha }}">{{ ov.image_sha[:12] }}</code>
                        {% endif %}
                        {% if ov.base_bytes %}
                        <div class="text-muted small">over {{ ov.base_bytes | humanize_bytes }} base</div>
                        {% endif %}
                    </td>
                    <td>
                        {% if ov.attached_mac %}
                        <a href="/ui/machines/{{ ov.attached_mac }}" class="text-decoration-none">
                            <code>{{ ov.attached_mac }}</code>
                        </a>
                        {% if not ov.machine_exists %}
                        <span class="badge text-bg-light border text-muted ms-1" title="pixie no longer has a row for this MAC">unregistered</span>
                        {% endif %}
                        {% if ov.machine_labels %}
                        <div class="mt-1">
                            {% for lbl in ov.machine_labels %}
                            <span class="badge text-bg-light border">{{ lbl }}</span>
                            {% endfor %}
                        </div>
                        {% endif %}
                        {% else %}
                        <span class="text-muted small">free</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap" data-cell="used">
                        {% if ov.file_exists %}
                        <span class="fw-semibold">{{ ov.used_bytes | humanize_bytes }}</span>
                        {% else %}
                        <span class="text-muted">-</span>
                        {% endif %}
                        {% if ov.size_bytes %}<span class="text-muted small">/ {{ ov.size_bytes | humanize_bytes }}</span>{% endif %}
                    </td>
                    <td class="small text-nowrap" data-cell="mtime">
                        {{ ov.mtime | fmt_ts if ov.mtime else '-' }}
                    </td>
                    <td class="small text-muted text-nowrap">{{ ov.created_at | fmt_ts }}</td>
                    <td class="small text-muted text-nowrap">{{ ov.last_boot_at | fmt_ts if ov.last_boot_at else '-' }}</td>
                    <td data-cell="nbd">
                        {% if ov.running %}
                        <span class="badge text-bg-success">:{{ ov.nbd_port }}</span>
                        {% else %}
                        <span class="text-muted small">idle</span>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        <button type="button" class="btn btn-sm btn-outline-secondary"
                                data-manage-toggle="manage-{{ loop.index }}"
                                aria-expanded="false" aria-controls="manage-{{ loop.index }}"
                                title="Grow or snapshot this overlay">
                            <i class="bi bi-sliders me-1"></i>Manage
                        </button>
                        <form method="post" action="/ui/overlays/delete" class="d-inline"
                              onsubmit="return confirm('Delete overlay {{ ov.alias }}? The qcow2 and its row are removed for good. Any machine bound to it via nbdboot-overlay will need rebinding. To wipe an overlay clean, delete it and create a fresh one.');">
                            <input type="hidden" name="alias" value="{{ ov.alias }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger"
                                    title="Remove this overlay entirely (qcow2 + row).">
                                <i class="bi bi-trash3 me-1"></i>Delete
                            </button>
                        </form>
                    </td>
                </tr>
                {# ---- Manage panel (grow + snapshots) --------------------
                   Collapsed by default. Both operate on the qcow2 with
                   qemu-img offline, so they are only offered for an
                   unbound overlay -- a bound one shows how to release it.
                   id keys on loop.index (aliases may contain '.', which
                   would break the collapse target's CSS selector). #}
                <tr class="d-none" id="manage-{{ loop.index }}">
                    <td colspan="10" class="bg-body-tertiary">
                        {% if ov.attached_mac %}
                        <div class="alert alert-secondary small mb-0 d-flex align-items-center">
                            <i class="bi bi-lock me-2"></i>
                            <div>Bound to <code>{{ ov.attached_mac }}</code>. Grow and snapshot
                            operate on the qcow2 offline, so set that machine to another boot
                            mode (unbind) first, then reopen this panel.</div>
                        </div>
                        {% else %}
                        <div class="row g-4">
                            {# Grow #}
                            <div class="col-12 col-lg-4">
                                <div class="fw-semibold mb-2"><i class="bi bi-arrows-angle-expand me-1"></i>Grow</div>
                                <form method="post" action="/ui/overlays/grow" class="row g-2 align-items-end"
                                      onsubmit="return confirm('Grow overlay {{ ov.alias }}? The virtual disk is enlarged now; the target claims the space with resize2fs on its next nbdboot.');">
                                    <input type="hidden" name="alias" value="{{ ov.alias }}">
                                    <div class="col-7">
                                        <label class="form-label small mb-1">New size (GiB)</label>
                                        <input type="number" name="size_gib" class="form-control form-control-sm"
                                               min="1" step="1" required
                                               placeholder="{{ ov.size_bytes // 1073741824 if ov.size_bytes else '' }}">
                                    </div>
                                    <div class="col-5">
                                        <button type="submit" class="btn btn-sm btn-outline-primary w-100">Grow</button>
                                    </div>
                                </form>
                                <div class="form-text">
                                    Currently {{ ov.size_bytes | humanize_bytes }}. Grow-only; takes
                                    effect on the target's next nbdboot.
                                </div>
                            </div>
                            {# Snapshots #}
                            <div class="col-12 col-lg-8">
                                <div class="fw-semibold mb-2"><i class="bi bi-camera me-1"></i>Snapshots</div>
                                {% if ov.snapshots %}
                                <div class="table-responsive">
                                <table class="table table-sm align-middle mb-2">
                                    <thead><tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Taken</th>
                                        <th scope="col" class="text-end">Actions</th>
                                    </tr></thead>
                                    <tbody>
                                    {% for s in ov.snapshots %}
                                        <tr>
                                            <td><code>{{ s.name }}</code></td>
                                            <td class="small text-muted text-nowrap">{{ s.when | fmt_ts if s.when else '-' }}</td>
                                            <td class="text-end text-nowrap">
                                                <form method="post" action="/ui/overlays/snapshot/revert" class="d-inline"
                                                      onsubmit="return confirm('Revert {{ ov.alias }} to snapshot {{ s.name }}? Every write since that snapshot is discarded.');">
                                                    <input type="hidden" name="alias" value="{{ ov.alias }}">
                                                    <input type="hidden" name="snapshot" value="{{ s.name }}">
                                                    <button type="submit" class="btn btn-sm btn-outline-warning"
                                                            title="Roll the overlay back to this snapshot">
                                                        <i class="bi bi-arrow-counterclockwise"></i> Revert
                                                    </button>
                                                </form>
                                                <form method="post" action="/ui/overlays/snapshot/delete" class="d-inline"
                                                      onsubmit="return confirm('Delete snapshot {{ s.name }} of {{ ov.alias }}? The overlay state is untouched.');">
                                                    <input type="hidden" name="alias" value="{{ ov.alias }}">
                                                    <input type="hidden" name="snapshot" value="{{ s.name }}">
                                                    <button type="submit" class="btn btn-sm btn-outline-danger"
                                                            title="Delete this snapshot">
                                                        <i class="bi bi-trash3"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                </div>
                                {% else %}
                                <p class="text-muted small mb-2">No snapshots yet.</p>
                                {% endif %}
                                <form method="post" action="/ui/overlays/snapshot/create" class="row g-2 align-items-end">
                                    <input type="hidden" name="alias" value="{{ ov.alias }}">
                                    <div class="col-8 col-sm-6">
                                        <label class="form-label small mb-1">New snapshot name</label>
                                        <input type="text" name="snapshot" class="form-control form-control-sm font-monospace"
                                               required maxlength="64" placeholder="e.g. pre-cuda"
                                               pattern="[A-Za-z0-9][A-Za-z0-9._-]*"
                                               title="Alphanumeric-leading; a-z / A-Z / 0-9 / . _ - (max 64 chars)">
                                    </div>
                                    <div class="col-4 col-sm-3">
                                        <button type="submit" class="btn btn-sm btn-outline-success w-100">
                                            <i class="bi bi-camera me-1"></i>Snapshot
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        {% endif %}
                    </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>
            No overlays yet. Use the <a href="#create">Create overlay</a> form
            above to make one, then attach it to a machine via the
            <code>nbdboot-overlay</code> boot mode.
        </p>
    </div>
    {% endif %}
</div>

<div id="events">
{{ recent_events_card(overlay_events, 'overlay', empty_message='No overlay events yet.') }}
</div>

<script>
// Live refresh: every 5 s hit /ui/overlays-live.json and update each
// row's disk-used / last-modified / NBD cells + the summary tiles.
// Rows that vanish server-side (reset out of band) are dimmed rather
// than removed, so the operator's scroll position is stable; the next
// full load drops them. New overlays aren't injected (sort order would
// be wrong without a re-render) -- they appear on the next page load.
(function () {
    const POLL_MS = 5000;

    function humanizeBytes(n) {
        if (n === null || n === undefined || n < 0) return "-";
        const units = ["B", "KiB", "MiB", "GiB", "TiB", "PiB"];
        let size = n, i = 0;
        while (size >= 1024 && i < units.length - 1) { size /= 1024; i++; }
        return i === 0 ? `${Math.round(size)} B` : `${size.toFixed(1)} ${units[i]}`;
    }

    function stateBadge(state) {
        switch (state) {
            case "serving": return `<span class="badge text-bg-success"><i class="bi bi-broadcast me-1"></i>Serving</span>`;
            case "held":    return `<span class="badge text-bg-primary"><i class="bi bi-lock me-1"></i>Held</span>`;
            case "free":    return `<span class="badge text-bg-secondary"><i class="bi bi-unlock me-1"></i>Free</span>`;
            case "orphaned":return `<span class="badge text-bg-warning"><i class="bi bi-question-circle me-1"></i>Orphaned</span>`;
            case "pending": return `<span class="badge text-bg-info" title="The qcow2 is not on disk yet (removed before first boot); the next nbdboot re-creates it from the base image"><i class="bi bi-hourglass-split me-1"></i>Pending</span>`;
            default:        return `<span class="badge text-bg-danger" title="The qcow2 existed after a prior boot but is now gone from disk"><i class="bi bi-exclamation-triangle me-1"></i>File missing</span>`;
        }
    }

    const rows = document.querySelectorAll("[data-ov-row]");

    async function poll() {
        try {
            const r = await fetch("/ui/overlays-live.json", {credentials: "same-origin"});
            if (!r.ok) return;
            const data = await r.json();
            const rowsData = data.rows || {};
            rows.forEach((tr) => {
                const key = tr.getAttribute("data-ov-row");
                const d = rowsData[key];
                const setCell = (name, html) => {
                    const cell = tr.querySelector(`[data-cell="${name}"]`);
                    if (cell && cell.innerHTML !== html) cell.innerHTML = html;
                };
                if (!d) { tr.classList.add("opacity-50"); return; }
                tr.classList.remove("opacity-50");
                setCell("state", stateBadge(d.state));
                const sizeSuffix = d.size_bytes
                    ? ` <span class="text-muted small">/ ${humanizeBytes(d.size_bytes)}</span>` : ``;
                setCell("used", (d.file_exists
                    ? `<span class="fw-semibold">${humanizeBytes(d.used_bytes)}</span>`
                    : `<span class="text-muted">-</span>`) + sizeSuffix);
                setCell("mtime", d.mtime_display || "-");
                setCell("nbd", d.running
                    ? `<span class="badge text-bg-success">:${d.nbd_port}</span>`
                    : `<span class="text-muted small">idle</span>`);
            });
            const t = data.totals || {};
            const setTotal = (name, txt) => {
                const el = document.querySelector(`[data-total="${name}"]`);
                if (el && el.textContent !== String(txt)) el.textContent = txt;
            };
            setTotal("count", t.count);
            setTotal("used", humanizeBytes(t.used_bytes));
            setTotal("running", t.running);
            setTotal("active", t.active);
            setTotal("reclaimable", t.reclaimable);
            setTotal("reclaimable-used", humanizeBytes(t.reclaimable_bytes));
            const pruneBtn = document.querySelector("[data-prune-btn]");
            if (pruneBtn) pruneBtn.disabled = !t.reclaimable;
        } catch (e) { /* swallow; retry next tick */ }
    }

    setInterval(poll, POLL_MS);
})();

// Manage-panel toggle. Bootstrap's collapse JS isn't loaded (pixie ships
// only the CSS), so wire the per-row show/hide by hand: toggle ``d-none``
// on the target manage row, matching the vanilla-JS pattern the rest of
// the UI uses instead of ``data-bs-toggle``.
(function () {
    document.querySelectorAll("[data-manage-toggle]").forEach(function (btn) {
        btn.addEventListener("click", function () {
            var row = document.getElementById(btn.getAttribute("data-manage-toggle"));
            if (!row) return;
            var nowHidden = row.classList.toggle("d-none");
            btn.setAttribute("aria-expanded", nowHidden ? "false" : "true");
        });
    });
})();
</script>
{% endblock %}