sneak/upaas
1
0
Fork 0
Code Issues 21 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Always scroll logs to bottom on every update

Browse Source
This commit is contained in:
Jeffrey Paul 2025-12-31 14:56:56 -08:00
parent 83986626a4
commit 58687e77f5
1 changed files with 16 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/js/app.js
View File

@ -59,14 +59,6 @@ document.addEventListener("alpine:init", () => {
return status === "building" || status === "deploying";
},
/**
* Check if element is scrolled near the bottom (within threshold)
*/
isNearBottom(el, threshold = 100) {
if (!el) return true;
return el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
},
/**
* Scroll an element to the bottom
*/
@ -221,18 +213,15 @@ document.addEventListener("alpine:init", () => {
async fetchContainerLogs() {
try {
const wrapper = this.$refs.containerLogsWrapper;
const wasNearBottom =
Alpine.store("utils").isNearBottom(wrapper);
const res = await fetch(`/apps/${this.appId}/container-logs`);
const data = await res.json();
this.containerLogs = data.logs || "No logs available";
this.containerStatus = data.status;
if (wasNearBottom) {
this.$nextTick(() => {
Alpine.store("utils").scrollToBottom(wrapper);
});
}
this.$nextTick(() => {
Alpine.store("utils").scrollToBottom(
this.$refs.containerLogsWrapper,
);
});
} catch (err) {
this.containerLogs = "Failed to fetch logs";
}
@ -241,20 +230,17 @@ document.addEventListener("alpine:init", () => {
async fetchBuildLogs() {
if (!this.currentDeploymentId) return;
try {
const wrapper = this.$refs.buildLogsWrapper;
const wasNearBottom =
Alpine.store("utils").isNearBottom(wrapper);
const res = await fetch(
`/apps/${this.appId}/deployments/${this.currentDeploymentId}/logs`,
);
const data = await res.json();
this.buildLogs = data.logs || "No build logs available";
this.buildStatus = data.status;
if (wasNearBottom) {
this.$nextTick(() => {
Alpine.store("utils").scrollToBottom(wrapper);
});
}
this.$nextTick(() => {
Alpine.store("utils").scrollToBottom(
this.$refs.buildLogsWrapper,
);
});
} catch (err) {
this.buildLogs = "Failed to fetch logs";
}
@ -383,10 +369,6 @@ document.addEventListener("alpine:init", () => {
async fetchLiveLogs() {
if (!this.currentDeploymentId || !this.isDeploying) return;
try {
const wrapper = this.$refs.liveLogsWrapper;
const wasNearBottom =
Alpine.store("utils").isNearBottom(wrapper);
const res = await fetch(
`/apps/${this.appId}/deployments/${this.currentDeploymentId}/logs`,
);
@ -394,11 +376,11 @@ document.addEventListener("alpine:init", () => {
this.liveLogs = data.logs || "Waiting for logs...";
this.liveStatus = data.status;
if (wasNearBottom) {
this.$nextTick(() => {
Alpine.store("utils").scrollToBottom(wrapper);
});
}
this.$nextTick(() => {
Alpine.store("utils").scrollToBottom(
this.$refs.liveLogsWrapper,
);
});
// Update matching deployment card if present
const card = document.querySelector(
@ -407,13 +389,11 @@ document.addEventListener("alpine:init", () => {
if (card) {
const logsContent = card.querySelector(".logs-content");
const logsWrapper = card.querySelector(".logs-wrapper");
const cardWasNearBottom =
Alpine.store("utils").isNearBottom(logsWrapper);
const statusBadge =
card.querySelector(".deployment-status");
if (logsContent)
logsContent.textContent = data.logs || "Loading...";
if (logsWrapper && cardWasNearBottom)
if (logsWrapper)
Alpine.store("utils").scrollToBottom(logsWrapper);
if (statusBadge) {
statusBadge.className =