{% 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', 'Status across pixie, following the model: machines you manage, Catalog sources you can fetch, the Images those sources materialise (with on-disk footprint + how much is reclaimable), the alias-keyed overlay volumes, and events. Output-only - each tile links to its page for actions. Refreshes every 5 s.') }}
{# Tiles mirror the storage/lifecycle model + the nav: Machines,
   Catalog (sources you can fetch), Images (the materialised entities
   with footprint + reclaimable refcount), Overlays (alias-keyed
   single-writer volumes), Events. Output-only -- each tile reports and
   links to its pane; no actions live here. #}
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-5 g-3 mb-4">
    <div class="col">
        <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-7">Bound</dt>
                    <dd class="col-5 text-end" data-stat="machines_bound">{{ stats.machines_bound }}</dd>
                    <dt class="col-7">Inventoried</dt>
                    <dd class="col-5 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">
        <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-7">Sources</dt>
                    <dd class="col-5 text-end" data-stat="catalog_total_sub">{{ stats.catalog_total }}</dd>
                    <dt class="col-7">Not fetched</dt>
                    <dd class="col-5 text-end" data-stat="catalog_unfetched">{{ stats.catalog_unfetched }}</dd>
                </dl>
            </div>
            <div class="card-footer bg-light border-top-0 py-2">
                <a href="/ui/catalog" class="text-decoration-none small">Sources <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>
    </div>
    <div class="col">
        <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-fill fs-4 text-primary me-2"></i>
                    <h2 class="h6 mb-0">Images</h2>
                </div>
                <div class="display-6 fw-semibold" data-stat="images_count">{{ stats.images_count }}</div>
                <dl class="row small text-muted mb-0 mt-2">
                    <dt class="col-7">On disk</dt>
                    <dd class="col-5 text-end" data-stat="images_bytes_display">{{ stats.images_bytes_display }}</dd>
                    <dt class="col-7">Reclaimable</dt>
                    <dd class="col-5 text-end" data-stat="images_reclaimable">{{ stats.images_reclaimable }}</dd>
                </dl>
            </div>
            <div class="card-footer bg-light border-top-0 py-2">
                <a href="/ui/images" class="text-decoration-none small">Open <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card shadow-sm h-100">
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <i class="bi bi-layers fs-4 text-primary me-2"></i>
                    <h2 class="h6 mb-0">Overlays</h2>
                </div>
                <div class="display-6 fw-semibold" data-stat="overlays_count">{{ stats.overlays_count }}</div>
                <dl class="row small text-muted mb-0 mt-2">
                    <dt class="col-7">Disk used</dt>
                    <dd class="col-5 text-end" data-stat="overlays_bytes_display">{{ stats.overlays_bytes_display }}</dd>
                    <dt class="col-7"><span class="text-success">Serving</span></dt>
                    <dd class="col-5 text-end" data-stat="overlays_running">{{ stats.overlays_running }}</dd>
                </dl>
            </div>
            <div class="card-footer bg-light border-top-0 py-2">
                <a href="/ui/overlays" class="text-decoration-none small">Open <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>
    </div>
    <div class="col">
        <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-7"><span class="text-danger">Errors</span></dt>
                    <dd class="col-5 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-7">Last</dt>
                    <dd class="col-5 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("catalog_total_sub", s.catalog_total);
            setN("catalog_unfetched", s.catalog_unfetched);
            setN("images_count", s.images_count);
            setN("images_bytes_display", s.images_bytes_display);
            setN("images_reclaimable", s.images_reclaimable);
            setN("overlays_count", s.overlays_count);
            setN("overlays_bytes_display", s.overlays_bytes_display);
            setN("overlays_running", s.overlays_running);
            setN("events_total", s.events_total);
            // Errors: swap the whole cell so the badge appears / clears
            // in step with the count. Text-only ("0" green) at zero, red
            // pill when non-zero. (Acknowledge lives on the Events page --
            // the dashboard is output-only.)
            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 %}