llm-monitor/app/web/static/js/models-running.js

class RunningModelsPage {
    constructor() {
        this.activeServer = getActiveServer();
        this.init();
    }

    init() {
        this.updateServerContextUI();

        if (!this.activeServer) {
            this.renderNoServerState();
            return;
        }

        document.getElementById("refresh-btn")?.addEventListener("click", () => {
            this.loadRunningModels();
        });

        this.loadRunningModels();
    }

    async loadRunningModels() {
        const container = document.getElementById("running-models");
        if (!container) {
            return;
        }

        container.innerHTML = `
            <div class="text-center py-8">
                <div class="inline-block w-8 h-8 border-4 border-gray-600 border-t-purple-500 rounded-full animate-spin"></div>
                <p class="text-gray-400 mt-4">Refreshing data...</p>
            </div>
        `;

        try {
            const response = await fetch(this.buildApiUrl("/api/v1/models/running"));
            if (!response.ok) {
                throw new Error("Failed to load running models");
            }

            const data = await response.json();
            const models = data.models || [];

            this.renderStats(models);
            this.renderRunningModels(models);
        } catch (error) {
            container.innerHTML = `
                <div class="text-center py-8 text-red-400">
                    <p>Failed to load ollama ps output</p>
                </div>
            `;
            this.renderStats([]);
            console.error(error);
        }
    }

    buildApiUrl(path) {
        const url = new URL(path, window.location.origin);
        url.searchParams.set("host", this.activeServer.host);
        return `${url.pathname}${url.search}`;
    }

    updateServerContextUI() {
        if (!this.activeServer) {
            return;
        }

        const serverLabel = document.getElementById("active-server-label");
        if (serverLabel) {
            serverLabel.textContent = `Server: ${this.activeServer.name}`;
            serverLabel.classList.remove("hidden");
        }

        const availableLink = document.getElementById("available-link");
        if (availableLink) {
            availableLink.href = buildServerUrl("/models-available", this.activeServer.id);
        }

        const serversLink = document.getElementById("servers-link");
        if (serversLink) {
            serversLink.href = "/servers";
        }
    }

    renderNoServerState() {
        const container = document.getElementById("running-models");
        const runningCountEl = document.getElementById("running-count");
        const vramTotalEl = document.getElementById("vram-total");
        const lastRefreshEl = document.getElementById("last-refresh");

        if (runningCountEl) runningCountEl.textContent = "0";
        if (vramTotalEl) vramTotalEl.textContent = "0 B";
        if (lastRefreshEl) lastRefreshEl.textContent = "-";

        if (container) {
            container.innerHTML = `
                <div class="text-center py-10 text-gray-300">
                    <p class="text-lg font-semibold">No server selected</p>
                    <p class="text-sm text-gray-400 mt-2">Select a server in the control panel to load ollama ps data.</p>
                    <a href="/servers" class="inline-block mt-4 bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded">Open Servers Control Panel</a>
                </div>
            `;
        }
    }

    renderStats(models) {
        const runningCountEl = document.getElementById("running-count");
        const vramTotalEl = document.getElementById("vram-total");
        const lastRefreshEl = document.getElementById("last-refresh");

        const totalVram = models.reduce((sum, model) => sum + (model.size_vram || 0), 0);

        if (runningCountEl) {
            runningCountEl.textContent = String(models.length);
        }
        if (vramTotalEl) {
            vramTotalEl.textContent = this.formatBytes(totalVram);
        }
        if (lastRefreshEl) {
            lastRefreshEl.textContent = new Date().toLocaleString("en-US");
        }
    }

    renderRunningModels(models) {
        const container = document.getElementById("running-models");
        if (!container) {
            return;
        }

        if (models.length === 0) {
            container.innerHTML = `
                <div class="text-center py-8 text-gray-400">
                    <p>No models are currently loaded in memory.</p>
                </div>
            `;
            return;
        }

        container.innerHTML = models
            .map((model) => this.renderModelCard(model))
            .join("");
    }

    renderModelCard(model) {
        const name = this.escapeHtml(model.name || "unknown");
        const modelId = this.escapeHtml(model.model || "-");
        const size = this.formatBytes(model.size || 0);
        const sizeVram = this.formatBytes(model.size_vram || 0);
        const processor = this.escapeHtml(model.details?.processor || "-");
        const expiresAt = model.expires_at ? this.formatDateTime(model.expires_at) : "-";

        return `
            <div class="bg-gray-700 rounded-lg p-4 border border-gray-600">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h3 class="text-lg font-semibold">${name}</h3>
                        <p class="text-xs text-gray-400 mt-1">${modelId}</p>
                    </div>
                    <span class="bg-green-700 text-green-100 text-xs px-2 py-1 rounded">Ready</span>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4 text-sm">
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">Model Size</p>
                        <p class="font-semibold mt-1">${size}</p>
                    </div>
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">VRAM Used</p>
                        <p class="font-semibold mt-1">${sizeVram}</p>
                    </div>
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">Processor</p>
                        <p class="font-semibold mt-1">${processor}</p>
                    </div>
                    <div class="bg-gray-800 rounded p-3">
                        <p class="text-gray-400 text-xs">Unload Time</p>
                        <p class="font-semibold mt-1">${expiresAt}</p>
                    </div>
                </div>
            </div>
        `;
    }

    formatBytes(bytes) {
        if (!bytes || bytes <= 0) {
            return "0 B";
        }
        const units = ["B", "KB", "MB", "GB", "TB"];
        const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
        const value = bytes / Math.pow(1024, index);
        return `${value.toFixed(2)} ${units[index]}`;
    }

    formatDateTime(isoDate) {
        const date = new Date(isoDate);
        if (Number.isNaN(date.getTime())) {
            return "-";
        }

        return date.toLocaleString("en-US", {
            year: "numeric",
            month: "short",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit"
        });
    }

    escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = String(text);
        return div.innerHTML;
    }
}

document.addEventListener("DOMContentLoaded", () => {
    window.runningModelsPage = new RunningModelsPage();
});