{% extends "layout.html" %}
{% from "_partials/page_description.html" import page_description %}
{% block title %}Dashboard - pixie{% endblock %}
{% block subnav %}
<div class="subnav-strip">
    <div class="container">
        <span class="text-white-50">Overview</span>
    </div>
</div>
{% endblock %}
{% block content %}
{{ page_description('speedometer2', 'Live counts across pixie: machines the operator manages, catalog images pixie can serve, NBD exports pixie is running right now. All tiles refresh every 5 s from the same endpoints the pages below use.') }}
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <i class="bi bi-pc-display fs-4 text-primary me-2"></i>
                    <h2 class="h6 mb-0">Machines</h2>
                </div>
                <div class="display-6 fw-semibold" data-stat="machines_total">{{ stats.machines_total }}</div>
                <dl class="row small text-muted mb-0 mt-2">
                    <dt class="col-6">Bound</dt>
                    <dd class="col-6 text-end" data-stat="machines_bound">{{ stats.machines_bound }}</dd>
                    <dt class="col-6">Inventoried</dt>
                    <dd class="col-6 text-end" data-stat="machines_with_inventory">{{ stats.machines_with_inventory }}</dd>
                </dl>
            </div>
            <div class="card-footer bg-light border-top-0 py-2">
                <a href="/ui/machines" class="text-decoration-none small">
                    Open <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <i class="bi bi-collection fs-4 text-primary me-2"></i>
                    <h2 class="h6 mb-0">Catalog</h2>
                </div>
                <div class="display-6 fw-semibold" data-stat="catalog_total">{{ stats.catalog_total }}</div>
                <dl class="row small text-muted mb-0 mt-2">
                    <dt class="col-6">Disk images</dt>
                    <dd class="col-6 text-end font-monospace" data-stat="catalog_images">
                        {{ stats.catalog_images_fetched }} / {{ stats.catalog_images_total }}
                    </dd>
                    <dt class="col-6">Netboot bundles</dt>
                    <dd class="col-6 text-end font-monospace" data-stat="catalog_bundles">
                        {{ stats.catalog_bundles_fetched }} / {{ stats.catalog_bundles_total }}
                    </dd>
                </dl>
            </div>
            <div class="card-footer bg-light border-top-0 py-2">
                <a href="/ui/catalog" class="text-decoration-none small">
                    Open <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <i class="bi bi-hdd-network fs-4 text-primary me-2"></i>
                    <h2 class="h6 mb-0">NBD serving</h2>
                </div>
                <div class="display-6 fw-semibold" data-stat="exports_total">{{ stats.exports_total }}</div>
                <dl class="row small text-muted mb-0 mt-2">
                    <dt class="col-6"><span class="text-success">Running</span></dt>
                    <dd class="col-6 text-end" data-stat="exports_running">{{ stats.exports_running }}</dd>
                    <dt class="col-6"><span class="text-danger">Error</span></dt>
                    <dd class="col-6 text-end" data-stat="exports_error">{{ stats.exports_error }}</dd>
                </dl>
            </div>
            <div class="card-footer bg-light border-top-0 py-2">
                <a href="/ui/catalog" class="text-decoration-none small">
                    Open <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
    {# Events card: total row count + errors-since-ack (red pill on
       non-zero) + newest ts. Ack POSTs /ui/events/ack which advances
       the settings.events_ack_ts cursor so error_count zeros until
       the next error-shaped event fires. #}
    <div class="col-md-3">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <i class="bi bi-clock-history fs-4 text-primary me-2"></i>
                    <h2 class="h6 mb-0">Events</h2>
                </div>
                <div class="display-6 fw-semibold" data-stat="events_total">{{ stats.events_total }}</div>
                <dl class="row small text-muted mb-0 mt-2">
                    <dt class="col-6">
                        <span class="text-danger">Errors</span>
                        {% if stats.events_error_count > 0 %}
                        <form method="post" action="/ui/events/ack" style="display:inline;">
                            <button type="submit"
                                    class="btn btn-link btn-sm p-0 ms-1 small"
                                    title="Advance the ack cursor to now">
                                Ack
                            </button>
                        </form>
                        {% endif %}
                    </dt>
                    <dd class="col-6 text-end" data-stat="events_error_count">
                        {% if stats.events_error_count > 0 %}
                        <span class="badge text-bg-danger">{{ stats.events_error_count }}</span>
                        {% else %}
                        <span class="text-success">0</span>
                        {% endif %}
                    </dd>
                    <dt class="col-6">Last</dt>
                    <dd class="col-6 text-end small" data-stat="events_last_ts">
                        {% if stats.events_last_ts %}
                        {{ stats.events_last_ts | fmt_ts }}
                        {% else %}
                        -
                        {% endif %}
                    </dd>
                </dl>
            </div>
            <div class="card-footer bg-light border-top-0 py-2">
                <a href="/ui/events" class="text-decoration-none small">
                    Open <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</div>

{# Live-env media readiness (OUTPUT ONLY). The dashboard reports
   whether the pixie-* boot modes have their media; the Fetch action +
   source / cmdline config live on the dedicated /ui/live-env pane. #}
{% set lfs = stats.live_env_fetch_state or {} %}
<div class="card shadow-sm mb-4">
    <div class="card-header bg-light d-flex align-items-center gap-2">
        <h2 class="h5 mb-0"><i class="bi bi-boombox me-2"></i>Live-env media</h2>
        <div class="ms-auto d-flex align-items-center gap-2">
            {% if lfs.state == 'fetching' %}
            <span class="badge text-bg-info"><span class="spinner-border spinner-border-sm me-1" role="status"></span>fetching</span>
            {% elif stats.live_env_ready %}
            <span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i>ready</span>
            {% else %}
            <span class="badge text-bg-warning"><i class="bi bi-exclamation-triangle me-1"></i>not staged</span>
            {% endif %}
            <a href="/ui/live-env" class="btn btn-sm btn-outline-primary text-nowrap"
               title="Fetch + configure the live env">
                <i class="bi bi-boombox me-1"></i>Manage
            </a>
        </div>
    </div>
    <div class="card-body">
        {% if stats.live_env_ready %}
        <p class="small mb-2">
            Staged at <code>{{ stats.live_env_dir }}</code>;
            <code>pixie-tui</code> / <code>pixie-inventory</code> /
            <code>pixie-flash-*</code> can serve the live env.
        </p>
        {% else %}
        <p class="small text-warning mb-2">
            Live-env media is missing under <code>{{ stats.live_env_dir or '(unset)' }}</code>.
            Every <code>pixie-*</code> boot_mode falls back to the "unavailable" iPXE
            plan until it is staged. <a href="/ui/live-env">Fetch it &rarr;</a>
        </p>
        {% endif %}
        {% if lfs.state == 'error' %}
        <p class="small text-danger mb-2">
            <i class="bi bi-exclamation-triangle me-1"></i>Last fetch failed &mdash; see
            <a href="/ui/live-env">Live env</a>.
        </p>
        {% endif %}
        <dl class="row small mb-0">
            {% for name, size in stats.live_env_files.items() %}
            <dt class="col-sm-3 font-monospace">{{ name }}</dt>
            <dd class="col-sm-9">
                {% if size is not none %}
                <span class="text-success"><i class="bi bi-check-circle me-1"></i>{{ (size / 1024 / 1024) | round(1) }} MiB</span>
                {% else %}
                <span class="text-warning"><i class="bi bi-x-circle me-1"></i>missing</span>
                {% endif %}
            </dd>
            {% endfor %}
        </dl>
    </div>
</div>
{% if lfs.state == 'fetching' %}
{# The fetch runs on the server's thread pool; poll the page so the
   spinner flips to "ready" (or an error) on its own. A big squashfs
   download takes a while, so 5 s is frequent enough without hammering. #}
<script>setTimeout(function () { location.reload(); }, 5000);</script>
{% endif %}

<div class="card shadow-sm">
    <div class="card-header bg-light d-flex align-items-center">
        <h2 class="h5 mb-0"><i class="bi bi-clock-history me-2"></i>Recent events</h2>
        <a href="/ui/events" class="ms-auto small">All events</a>
    </div>
    {% if events %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr>
                    <th scope="col">When</th>
                    <th scope="col">Kind</th>
                    <th scope="col">Related to</th>
                    <th scope="col">Summary</th>
                </tr>
            </thead>
            <tbody data-events-feed>
                {# ``Related to`` reads as ``<what>: <which>``: the
                   subject_kind badge is the category, subject_id the
                   specific name / MAC / export name. #}
                {% for e in events %}
                <tr>
                    <td class="small text-muted text-nowrap">{{ e.ts | fmt_ts }}</td>
                    <td><code>{{ e.kind }}</code></td>
                    <td>
                        {% if e.subject_kind %}
                        <span class="badge text-bg-light border me-1">{{ e.subject_kind }}</span>
                        <code class="small">{{ e.subject_id or '' }}</code>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                    </td>
                    <td>{{ e.summary or "" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="card-body">
        <p class="text-muted small mb-0">
            <i class="bi bi-inbox me-1"></i>No events yet.
        </p>
    </div>
    {% endif %}
</div>

<script>
// Dashboard cards + recent-events feed poll every 5 s so the
// operator sees counts + fresh events tick without a page reload.
// Same shape as the machines / fetch-states pollers: request the
// JSON, walk it, update matching [data-stat] / [data-event-row]
// cells in place. Silently skips a lost or 500'd poll (retries on
// the next tick) so a suspended laptop resumes cleanly on wake.
(function () {
    const POLL_MS = 5000;

    async function pollStats() {
        try {
            const r = await fetch("/ui/dashboard-live.json", {credentials: "same-origin"});
            if (!r.ok) return;
            const s = await r.json();
            const setN = (key, n) => {
                document.querySelectorAll(`[data-stat="${key}"]`).forEach((el) => {
                    if (el.textContent.trim() !== String(n)) el.textContent = n;
                });
            };
            setN("machines_total", s.machines_total);
            setN("machines_bound", s.machines_bound);
            setN("machines_with_inventory", s.machines_with_inventory);
            setN("catalog_total", s.catalog_total);
            setN("exports_total", s.exports_total);
            setN("exports_running", s.exports_running);
            setN("exports_error", s.exports_error);
            document.querySelectorAll('[data-stat="catalog_images"]').forEach((el) => {
                const t = `${s.catalog_images_fetched} / ${s.catalog_images_total}`;
                if (el.textContent.trim() !== t) el.textContent = t;
            });
            document.querySelectorAll('[data-stat="catalog_bundles"]').forEach((el) => {
                const t = `${s.catalog_bundles_fetched} / ${s.catalog_bundles_total}`;
                if (el.textContent.trim() !== t) el.textContent = t;
            });
            setN("events_total", s.events_total);
            // Errors: swap the whole cell so the badge appears / clears
            // in step with the count. Text-only mode ("0" green) when
            // zero; red pill when non-zero. Kept as an innerHTML swap so
            // the "Ack" form-button also (dis)appears at the right side
            // without a page reload; matches the Jinja template above.
            document.querySelectorAll('[data-stat="events_error_count"]').forEach((el) => {
                const n = s.events_error_count | 0;
                const html = n > 0
                    ? `<span class="badge text-bg-danger">${n}</span>`
                    : `<span class="text-success">0</span>`;
                if (el.innerHTML !== html) el.innerHTML = html;
            });
            document.querySelectorAll('[data-stat="events_last_ts"]').forEach((el) => {
                // Live JSON does not run fmt_ts (that's a Jinja filter);
                // pass the raw ts through and let the browser render it
                // as-is. Refreshing to the fmt_ts value happens on the
                // next full page load. Kept simple; a follow-up could
                // route this through a JS date formatter.
                const t = s.events_last_ts || "-";
                if (el.textContent.trim() !== t) el.textContent = t;
            });
        } catch (e) { /* swallow */ }
    }

    async function pollEvents() {
        try {
            const r = await fetch("/ui/events-live.json?limit=10", {credentials: "same-origin"});
            if (!r.ok) return;
            const body = await r.json();
            const feed = document.querySelector("[data-events-feed]");
            if (!feed || !body.events) return;
            const rows = body.events.map((e) => {
                // ``Related to`` cell -- see dashboard.html thead
                // note: badge (category) + code (specific id).
                const subject = e.subject_kind
                    ? `<span class="badge text-bg-light border me-1">${e.subject_kind}</span><code class="small">${e.subject_id || ""}</code>`
                    : `<span class="text-muted small">-</span>`;
                return `<tr>
                    <td class="small text-muted text-nowrap">${e.ts_display || e.ts}</td>
                    <td><code>${e.kind}</code></td>
                    <td>${subject}</td>
                    <td>${e.summary || ""}</td>
                </tr>`;
            }).join("");
            feed.innerHTML = rows;
        } catch (e) { /* swallow */ }
    }

    pollStats();
    pollEvents();
    setInterval(pollStats, POLL_MS);
    setInterval(pollEvents, POLL_MS);
})();
</script>
{% endblock %}