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

Add deployment improvements and UI enhancements

Browse Source 
- Clone specific commit SHA from webhook instead of just branch HEAD
- Log webhook payload in deployment logs
- Add build/deploy timing to ntfy and Slack notifications
- Implement container rollback on deploy failure
- Remove old container only after successful deployment
- Show relative times in deployment history (hover for full date)
- Update port mappings UI with labeled text inputs
- Add footer with version info, license, and repo link
- Format deploy key comment as upaas_DATE_appname
This commit is contained in:
Jeffrey Paul
2025-12-30 15:05:26 +07:00
parent bc275f7b9c
commit b3ac3c60c2
15 changed files with 1111 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
templates/app_detail.html
View File

@@ -23,24 +23,16 @@
<div>
<div class="flex items-center gap-3">
<h1 class="text-2xl font-medium text-gray-900">{{.App.Name}}</h1>
{{if eq .App.Status "running"}}
<span class="badge-success">Running</span>
{{else if eq .App.Status "building"}}
<span class="badge-warning">Building</span>
{{else if eq .App.Status "error"}}
<span class="badge-error">Error</span>
{{else if eq .App.Status "stopped"}}
<span class="badge-neutral">Stopped</span>
{{else}}
<span class="badge-neutral">{{.App.Status}}</span>
{{end}}
<span id="app-status" class="{{if eq .App.Status "running"}}badge-success{{else if eq .App.Status "building"}}badge-warning{{else if eq .App.Status "error"}}badge-error{{else}}badge-neutral{{end}}">{{.App.Status}}</span>
</div>
<p class="text-gray-500 font-mono text-sm mt-1">{{.App.RepoURL}} @ {{.App.Branch}}</p>
<p class="text-gray-500 font-mono text-sm mt-1">{{.App.RepoURL}}@{{.App.Branch}}</p>
</div>
<div class="flex gap-3">
<a href="/apps/{{.App.ID}}/edit" class="btn-secondary">Edit</a>
<form method="POST" action="/apps/{{.App.ID}}/deploy" class="inline">
<button type="submit" class="btn-success">Deploy Now</button>
<form id="deploy-form" method="POST" action="/apps/{{.App.ID}}/deploy" class="inline">
<button id="deploy-btn" type="submit" class="btn-success" {{if or (eq .App.Status "building") (eq .App.Status "deploying")}}disabled{{end}}>
<span id="deploy-btn-text">{{if or (eq .App.Status "building") (eq .App.Status "deploying")}}Deploying...{{else}}Deploy Now{{end}}</span>
</button>
</form>
</div>
</div>
@@ -252,19 +244,35 @@
{{end}}
<form method="POST" action="/apps/{{.App.ID}}/ports" class="flex flex-col sm:flex-row gap-2 items-end">
<div class="flex-1 w-full">
<input type="number" name="host_port" placeholder="Host port" required min="1" max="65535" class="input font-mono text-sm">
<label class="block text-xs text-gray-500 mb-1">Host (external)</label>
<input type="text" name="host_port" placeholder="8080" required pattern="[0-9]+" class="input font-mono text-sm">
</div>
<div class="flex-1 w-full">
<input type="number" name="container_port" placeholder="Container port" required min="1" max="65535" class="input font-mono text-sm">
<label class="block text-xs text-gray-500 mb-1">Container (internal)</label>
<input type="text" name="container_port" placeholder="80" required pattern="[0-9]+" class="input font-mono text-sm">
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">Protocol</label>
<select name="protocol" class="input text-sm">
<option value="tcp">TCP</option>
<option value="udp">UDP</option>
</select>
</div>
<select name="protocol" class="input text-sm">
<option value="tcp">TCP</option>
<option value="udp">UDP</option>
</select>
<button type="submit" class="btn-primary">Add</button>
</form>
</div>
<!-- Container Logs -->
<div class="card p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="section-title">Container Logs</h2>
<span id="container-status" class="badge-neutral text-xs">Loading...</span>
</div>
<div id="container-logs-wrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
<pre id="container-logs" class="text-gray-100 text-xs font-mono whitespace-pre-wrap">Loading container logs...</pre>
</div>
</div>
<!-- Recent Deployments -->
<div class="card p-6 mb-6">
<div class="flex items-center justify-between mb-4">
@@ -276,7 +284,8 @@
<table class="table">
<thead class="table-header">
<tr>
<th>Started</th>
<th>Finished</th>
<th>Duration</th>
<th>Status</th>
<th>Commit</th>
</tr>
@@ -284,7 +293,10 @@
<tbody class="table-body">
{{range .Deployments}}
<tr>
<td class="text-gray-500">{{.StartedAt.Format "2006-01-02 15:04:05"}}</td>
<td class="text-gray-500">
<span class="relative-time" data-time="{{.FinishedAtISO}}" title="{{.FinishedAtFormatted}}">{{.FinishedAtFormatted}}</span>
</td>
<td class="text-gray-500">{{if .Duration}}{{.Duration}}{{else}}-{{end}}</td>
<td>
{{if eq .Status "success"}}
<span class="badge-success">Success</span>
@@ -298,9 +310,7 @@
<span class="badge-neutral">{{.Status}}</span>
{{end}}
</td>
<td class="font-mono text-gray-500 text-xs">
{{if .CommitSHA.Valid}}{{slice .CommitSHA.String 0 12}}{{else}}-{{end}}
</td>
<td class="font-mono text-gray-500 text-xs">{{.ShortCommit}}</td>
</tr>
{{end}}
</tbody>
@@ -311,6 +321,17 @@
{{end}}
</div>
<!-- Last Deployment Build Logs -->
<div id="build-logs-section" class="card p-6 mb-6" {{if not .LatestDeployment}}style="display: none;"{{end}}>
<div class="flex items-center justify-between mb-4">
<h2 class="section-title">Last Deployment Build Logs</h2>
<span id="build-status" class="badge-neutral text-xs">{{if .LatestDeployment}}{{.LatestDeployment.Status}}{{end}}</span>
</div>
<div id="build-logs-wrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
<pre id="build-logs" class="text-gray-100 text-xs font-mono whitespace-pre-wrap">{{if .LatestDeployment}}Loading build logs...{{else}}No deployments yet{{end}}</pre>
</div>
</div>
<!-- Danger Zone -->
<div class="card border-2 border-error-500/20 bg-error-50/50 p-6">
<h2 class="text-lg font-medium text-error-700 mb-4">Danger Zone</h2>
@@ -320,4 +341,159 @@
</form>
</div>
</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);
})();
</script>
{{end}}