upaas/static/js/deployment.js

/**
 * upaas - Deployment Components
 *
 * Deployment card (individual deployment log viewer) and
 * deployments history page (list of all deployments).
 */

document.addEventListener("alpine:init", () => {
  // ============================================
  // Deployment Card Component (for individual deployment cards)
  // ============================================
  Alpine.data("deploymentCard", (config) => ({
    appId: config.appId,
    deploymentId: config.deploymentId,
    logs: "",
    status: config.status || "",
    pollInterval: null,
    _autoScroll: true,

    init() {
      // Read initial logs from script tag (avoids escaping issues)
      const initialLogsEl = this.$el.querySelector(".initial-logs");
      this.logs = initialLogsEl?.dataset.logs || "Loading...";

      // Set up scroll tracking
      this.$nextTick(() => {
        const wrapper = this.$refs.logsWrapper;
        if (wrapper) {
          wrapper.addEventListener('scroll', () => {
            this._autoScroll = Alpine.store("utils").isScrolledToBottom(wrapper);
          }, { passive: true });
        }
      });

      // Only poll if deployment is in progress
      if (Alpine.store("utils").isDeploying(this.status)) {
        this.fetchLogs();
        this.pollInterval = setInterval(() => this.fetchLogs(), 1000);
      }
    },

    destroy() {
      if (this.pollInterval) {
        clearInterval(this.pollInterval);
      }
    },

    async fetchLogs() {
      try {
        const res = await fetch(
          `/apps/${this.appId}/deployments/${this.deploymentId}/logs`,
        );
        const data = await res.json();
        const newLogs = data.logs || "No logs available";
        const logsChanged = newLogs !== this.logs;
        this.logs = newLogs;
        this.status = data.status;

        // Scroll to bottom only when content changes AND user hasn't scrolled up
        if (logsChanged && this._autoScroll) {
          this.$nextTick(() => {
            Alpine.store("utils").scrollToBottom(this.$refs.logsWrapper);
          });
        }

        // Stop polling if deployment is done
        if (!Alpine.store("utils").isDeploying(data.status)) {
          if (this.pollInterval) {
            clearInterval(this.pollInterval);
            this.pollInterval = null;
          }
          // Reload page to show final state with duration etc
          window.location.reload();
        }
      } catch (err) {
        console.error("Logs fetch error:", err);
      }
    },

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

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

  // ============================================
  // Deployments History Page Component
  // ============================================
  Alpine.data("deploymentsPage", (config) => ({
    appId: config.appId,
    currentDeploymentId: null,
    isDeploying: false,

    init() {
      // Check for in-progress deployments on page load
      const inProgressCard = document.querySelector(
        '[data-status="building"], [data-status="deploying"]',
      );
      if (inProgressCard) {
        this.currentDeploymentId = parseInt(
          inProgressCard.getAttribute("data-deployment-id"),
          10,
        );
        this.isDeploying = true;
      }

      this.fetchAppStatus();
      this._scheduleStatusPoll();
    },

    _statusPollTimer: null,

    _scheduleStatusPoll() {
      if (this._statusPollTimer) clearTimeout(this._statusPollTimer);
      const interval = this.isDeploying ? 1000 : 10000;
      this._statusPollTimer = setTimeout(() => {
        this.fetchAppStatus();
        this._scheduleStatusPoll();
      }, interval);
    },

    async fetchAppStatus() {
      try {
        const res = await fetch(`/apps/${this.appId}/status`);
        const data = await res.json();
        // Use deployment status, not app status - it's more reliable during transitions
        const deploying = Alpine.store("utils").isDeploying(
          data.latestDeploymentStatus,
        );

        // Detect new deployment
        if (
          data.latestDeploymentID &&
          data.latestDeploymentID !== this.currentDeploymentId
        ) {
          // Check if we have a card for this deployment
          const hasCard = document.querySelector(
            `[data-deployment-id="${data.latestDeploymentID}"]`,
          );

          if (deploying && !hasCard) {
            // New deployment started but no card exists - reload to show it
            window.location.reload();

            return;
          }

          this.currentDeploymentId = data.latestDeploymentID;
        }

        // Update deploying state based on latest deployment status
        if (deploying && !this.isDeploying) {
          this.isDeploying = true;
          this._scheduleStatusPoll(); // Switch to fast polling
        } else if (!deploying && this.isDeploying) {
          // Deployment finished - reload to show final state
          this.isDeploying = false;
          window.location.reload();
        }
      } catch (err) {
        console.error("Status fetch error:", err);
      }
    },

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

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