upaas/static/js/app-detail.js

/**
 * upaas - App Detail Page Component
 *
 * Handles the single-app view: status polling, container logs,
 * build logs, and recent deployments list.
 */

document.addEventListener("alpine:init", () => {
    // ============================================
    // Environment Variable Editor Component
    // ============================================
    Alpine.data("envVarEditor", (appId) => ({
        vars: [],
        editIdx: -1,
        editKey: "",
        editVal: "",
        appId: appId,

        init() {
            this.vars = Array.from(this.$el.querySelectorAll(".env-init")).map(
                (span) => ({
                    key: span.dataset.key,
                    value: span.dataset.value,
                }),
            );
        },

        startEdit(i) {
            this.editIdx = i;
            this.editKey = this.vars[i].key;
            this.editVal = this.vars[i].value;
        },

        saveEdit(i) {
            this.vars[i] = { key: this.editKey, value: this.editVal };
            this.editIdx = -1;
            this.submitAll();
        },

        removeVar(i) {
            if (!window.confirm("Delete this environment variable?")) {
                return;
            }

            this.vars.splice(i, 1);
            this.submitAll();
        },

        addVar(keyEl, valEl) {
            const k = keyEl.value.trim();
            const v = valEl.value.trim();

            if (!k) {
                return;
            }

            this.vars.push({ key: k, value: v });
            this.submitAll();
        },

        submitAll() {
            const csrfInput = this.$el.querySelector(
                'input[name="gorilla.csrf.Token"]',
            );
            const csrfToken = csrfInput ? csrfInput.value : "";

            fetch("/apps/" + this.appId + "/env", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-Token": csrfToken,
                },
                body: JSON.stringify(
                    this.vars.map((e) => ({ key: e.key, value: e.value })),
                ),
            }).then((res) => {
                if (res.ok) {
                    window.location.reload();
                }
            });
        },
    }));

    // ============================================
    // App Detail Page Component
    // ============================================
    Alpine.data("appDetail", (config) => ({
        appId: config.appId,
        currentDeploymentId: config.initialDeploymentId,
        appStatus: config.initialStatus || "unknown",
        containerLogs: "Loading container logs...",
        containerStatus: "unknown",
        buildLogs: config.initialDeploymentId
            ? "Loading build logs..."
            : "No deployments yet",
        buildStatus: config.initialBuildStatus || "unknown",
        showBuildLogs: !!config.initialDeploymentId,
        deploying: false,
        deployments: [],
        // Track whether user wants auto-scroll (per log pane)
        _containerAutoScroll: true,
        _buildAutoScroll: true,
        _pollTimer: null,

        init() {
            this.deploying = Alpine.store("utils").isDeploying(this.appStatus);
            this.fetchAll();
            this._schedulePoll();

            // Set up scroll listeners after DOM is ready
            this.$nextTick(() => {
                this._initScrollTracking(
                    this.$refs.containerLogsWrapper,
                    "_containerAutoScroll",
                );
                this._initScrollTracking(
                    this.$refs.buildLogsWrapper,
                    "_buildAutoScroll",
                );
            });
        },

        _schedulePoll() {
            if (this._pollTimer) clearTimeout(this._pollTimer);
            const interval = Alpine.store("utils").isDeploying(this.appStatus)
                ? 1000
                : 10000;
            this._pollTimer = setTimeout(() => {
                this.fetchAll();
                this._schedulePoll();
            }, interval);
        },

        _initScrollTracking(el, flag) {
            if (!el) return;
            el.addEventListener(
                "scroll",
                () => {
                    this[flag] = Alpine.store("utils").isScrolledToBottom(el);
                },
                { passive: true },
            );
        },

        fetchAll() {
            this.fetchAppStatus();
            // Only fetch logs when the respective pane is visible
            if (
                this.$refs.containerLogsWrapper &&
                this._isElementVisible(this.$refs.containerLogsWrapper)
            ) {
                this.fetchContainerLogs();
            }
            if (
                this.showBuildLogs &&
                this.$refs.buildLogsWrapper &&
                this._isElementVisible(this.$refs.buildLogsWrapper)
            ) {
                this.fetchBuildLogs();
            }
            this.fetchRecentDeployments();
        },

        _isElementVisible(el) {
            if (!el) return false;
            // Check if element is in viewport (roughly)
            const rect = el.getBoundingClientRect();
            return rect.bottom > 0 && rect.top < window.innerHeight;
        },

        async fetchAppStatus() {
            try {
                const res = await fetch(`/apps/${this.appId}/status`);
                const data = await res.json();
                const wasDeploying = this.deploying;
                this.appStatus = data.status;
                this.deploying = Alpine.store("utils").isDeploying(data.status);

                // Re-schedule polling when deployment state changes
                if (this.deploying !== wasDeploying) {
                    this._schedulePoll();
                }

                if (
                    data.latestDeploymentID &&
                    data.latestDeploymentID !== this.currentDeploymentId
                ) {
                    this.currentDeploymentId = data.latestDeploymentID;
                    this.showBuildLogs = true;
                    this.fetchBuildLogs();
                }
            } catch (err) {
                console.error("Status fetch error:", err);
            }
        },

        async fetchContainerLogs() {
            try {
                const res = await fetch(`/apps/${this.appId}/container-logs`);
                const data = await res.json();
                const newLogs = data.logs || "No logs available";
                const changed = newLogs !== this.containerLogs;
                this.containerLogs = newLogs;
                this.containerStatus = data.status;
                if (changed && this._containerAutoScroll) {
                    this.$nextTick(() => {
                        Alpine.store("utils").scrollToBottom(
                            this.$refs.containerLogsWrapper,
                        );
                    });
                }
            } catch (err) {
                this.containerLogs = "Failed to fetch logs";
            }
        },

        async fetchBuildLogs() {
            if (!this.currentDeploymentId) return;
            try {
                const res = await fetch(
                    `/apps/${this.appId}/deployments/${this.currentDeploymentId}/logs`,
                );
                const data = await res.json();
                const newLogs = data.logs || "No build logs available";
                const changed = newLogs !== this.buildLogs;
                this.buildLogs = newLogs;
                this.buildStatus = data.status;
                if (changed && this._buildAutoScroll) {
                    this.$nextTick(() => {
                        Alpine.store("utils").scrollToBottom(
                            this.$refs.buildLogsWrapper,
                        );
                    });
                }
            } catch (err) {
                this.buildLogs = "Failed to fetch logs";
            }
        },

        async fetchRecentDeployments() {
            try {
                const res = await fetch(
                    `/apps/${this.appId}/recent-deployments`,
                );
                const data = await res.json();
                this.deployments = data.deployments || [];
            } catch (err) {
                console.error("Deployments fetch error:", err);
            }
        },

        submitDeploy() {
            this.deploying = true;
        },

        get statusBadgeClass() {
            return Alpine.store("utils").statusBadgeClass(this.appStatus);
        },

        get statusLabel() {
            return Alpine.store("utils").statusLabel(this.appStatus);
        },

        get containerStatusBadgeClass() {
            return (
                Alpine.store("utils").statusBadgeClass(this.containerStatus) +
                " text-xs"
            );
        },

        get containerStatusLabel() {
            return Alpine.store("utils").statusLabel(this.containerStatus);
        },

        get buildStatusBadgeClass() {
            return (
                Alpine.store("utils").statusBadgeClass(this.buildStatus) +
                " text-xs"
            );
        },

        get buildStatusLabel() {
            return Alpine.store("utils").statusLabel(this.buildStatus);
        },

        deploymentStatusClass(status) {
            return Alpine.store("utils").statusBadgeClass(status);
        },

        deploymentStatusLabel(status) {
            return Alpine.store("utils").statusLabel(status);
        },

        formatTime(isoTime) {
            return Alpine.store("utils").formatRelativeTime(isoTime);
        },
    }));
});