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

Add real-time deployment updates and refactor JavaScript

Browse Source 
- Add deploy stats (last deploy time, total count) to dashboard
- Add recent-deployments API endpoint for real-time updates
- Add live build logs to deployments history page
- Fix git clone regression (preserve entrypoint for simple clones)
- Refactor JavaScript into shared app.js with page init functions
- Deploy button disables immediately on click
- Auto-refresh deployment list and logs during builds
- Format JavaScript with Prettier (4-space indent)
This commit is contained in:
Jeffrey Paul
2026-01-01 05:22:56 +07:00
parent 307955dae1
commit ab7e917b03
9 changed files with 837 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
templates/app_detail.html
View File

@@ -290,7 +290,7 @@
<th>Commit</th>
</tr>
</thead>
<tbody class="table-body">
<tbody id="deployments-tbody" class="table-body">
{{range .Deployments}}
<tr>
<td class="text-gray-500">
@@ -343,157 +343,9 @@
</main>
<script>
(function() {
// Relative time formatting
function formatRelativeTime(dateStr) {
const date = new Date(dateStr);
const now = new Date();
const diffMs = now - date;
const diffSec = Math.floor(diffMs / 1000);
const diffMin = Math.floor(diffSec / 60);
const diffHour = Math.floor(diffMin / 60);
const diffDay = Math.floor(diffHour / 24);
if (diffSec < 60) return 'just now';
if (diffMin < 60) return diffMin + (diffMin === 1 ? ' minute ago' : ' minutes ago');
if (diffHour < 24) return diffHour + (diffHour === 1 ? ' hour ago' : ' hours ago');
if (diffDay < 7) return diffDay + (diffDay === 1 ? ' day ago' : ' days ago');
return date.toLocaleDateString();
}
function updateRelativeTimes() {
document.querySelectorAll('.relative-time').forEach(el => {
const time = el.getAttribute('data-time');
if (time) {
el.textContent = formatRelativeTime(time);
}
});
}
// Update relative times on load and every minute
updateRelativeTimes();
setInterval(updateRelativeTimes, 60000);
const appId = "{{.App.ID}}";
const containerLogsEl = document.getElementById('container-logs');
const containerLogsWrapper = document.getElementById('container-logs-wrapper');
const containerStatusEl = document.getElementById('container-status');
const buildLogsEl = document.getElementById('build-logs');
const buildLogsWrapper = document.getElementById('build-logs-wrapper');
const buildStatusEl = document.getElementById('build-status');
const buildLogsSection = document.getElementById('build-logs-section');
const appStatusEl = document.getElementById('app-status');
const deployBtn = document.getElementById('deploy-btn');
const deployBtnText = document.getElementById('deploy-btn-text');
let currentDeploymentId = {{if .LatestDeployment}}{{.LatestDeployment.ID}}{{else}}null{{end}};
function updateAppStatusBadge(status) {
appStatusEl.className = '';
if (status === 'running') {
appStatusEl.className = 'badge-success';
} else if (status === 'building' || status === 'deploying') {
appStatusEl.className = 'badge-warning';
} else if (status === 'error') {
appStatusEl.className = 'badge-error';
} else {
appStatusEl.className = 'badge-neutral';
}
appStatusEl.textContent = status.charAt(0).toUpperCase() + status.slice(1);
}
function updateDeployButton(status) {
const isDeploying = (status === 'building' || status === 'deploying');
deployBtn.disabled = isDeploying;
deployBtnText.textContent = isDeploying ? 'Deploying...' : 'Deploy Now';
if (isDeploying) {
deployBtn.classList.add('opacity-50', 'cursor-not-allowed');
} else {
deployBtn.classList.remove('opacity-50', 'cursor-not-allowed');
}
}
function updateStatusBadge(el, status) {
if (!el) return;
el.className = '';
if (status === 'running' || status === 'success') {
el.className = 'badge-success text-xs';
} else if (status === 'building' || status === 'deploying') {
el.className = 'badge-warning text-xs';
} else if (status === 'failed' || status === 'error') {
el.className = 'badge-error text-xs';
} else {
el.className = 'badge-neutral text-xs';
}
el.textContent = status.charAt(0).toUpperCase() + status.slice(1);
}
function scrollToBottom(el) {
if (el) {
el.scrollTop = el.scrollHeight;
}
}
function fetchAppStatus() {
fetch('/apps/' + appId + '/status')
.then(response => response.json())
.then(data => {
updateAppStatusBadge(data.status);
updateDeployButton(data.status);
// Check if there's a new deployment
if (data.latestDeploymentID && data.latestDeploymentID !== currentDeploymentId) {
currentDeploymentId = data.latestDeploymentID;
// Show build logs section if hidden
if (buildLogsSection) {
buildLogsSection.style.display = '';
}
// Immediately fetch new build logs
fetchBuildLogs();
}
})
.catch(err => {
console.error('Failed to fetch app status:', err);
});
}
function fetchContainerLogs() {
fetch('/apps/' + appId + '/container-logs')
.then(response => response.json())
.then(data => {
containerLogsEl.textContent = data.logs || 'No logs available';
updateStatusBadge(containerStatusEl, data.status);
scrollToBottom(containerLogsWrapper);
})
.catch(err => {
containerLogsEl.textContent = 'Failed to fetch logs: ' + err.message;
});
}
function fetchBuildLogs() {
if (!currentDeploymentId || !buildLogsEl) return;
fetch('/apps/' + appId + '/deployments/' + currentDeploymentId + '/logs')
.then(response => response.json())
.then(data => {
buildLogsEl.textContent = data.logs || 'No build logs available';
updateStatusBadge(buildStatusEl, data.status);
scrollToBottom(buildLogsWrapper);
})
.catch(err => {
buildLogsEl.textContent = 'Failed to fetch logs: ' + err.message;
});
}
// Initial fetch
fetchAppStatus();
fetchContainerLogs();
fetchBuildLogs();
// Refresh every second
setInterval(fetchAppStatus, 1000);
setInterval(fetchContainerLogs, 1000);
setInterval(fetchBuildLogs, 1000);
})();
upaas.initAppDetailPage({
appId: "{{.App.ID}}",
initialDeploymentId: {{if .LatestDeployment}}{{.LatestDeployment.ID}}{{else}}null{{end}}
});
</script>
{{end}}