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

Fix build logs overflow by using Alpine.js reactive bindings

Browse Source 
Replaced manual DOM manipulation with a deploymentCard Alpine component
that uses x-text bindings and x-ref for proper scrolling, matching the
working container logs implementation.
This commit is contained in:
Jeffrey Paul
2026-01-08 10:21:16 -08:00
parent aaa55fd153
commit ee4afbde80
2 changed files with 77 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
templates/deployments.html
View File

@@ -27,7 +27,12 @@
<div id="deployments-list" class="space-y-4">
{{if .Deployments}}
{{range .Deployments}}
<div class="card p-6 deployment-card" data-deployment-id="{{.ID}}" data-status="{{.Status}}">
<div class="card p-6 deployment-card" data-deployment-id="{{.ID}}" data-status="{{.Status}}"
x-data="deploymentCard({
appId: '{{$.App.ID}}',
deploymentId: {{.ID}},
status: '{{.Status}}'
})">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-4">
<div class="flex items-center gap-2 text-sm text-gray-500">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -40,7 +45,7 @@
{{end}}
</div>
<div>
<span class="deployment-status {{if eq .Status "success"}}badge-success{{else if eq .Status "failed"}}badge-error{{else if eq .Status "building"}}badge-warning{{else if eq .Status "deploying"}}badge-info{{else}}badge-neutral{{end}}">{{if eq .Status "success"}}Success{{else if eq .Status "failed"}}Failed{{else if eq .Status "building"}}Building{{else if eq .Status "deploying"}}Deploying{{else}}{{.Status}}{{end}}</span>
<span class="deployment-status" x-bind:class="statusBadgeClass" x-text="statusLabel"></span>
</div>
</div>
@@ -70,7 +75,7 @@
{{if or .Logs.Valid (eq .Status "building") (eq .Status "deploying")}}
<div class="mt-4">
<div class="flex items-start gap-4 mb-2">
<span class="cursor-pointer text-sm text-primary-600 hover:text-primary-800 font-medium">Build Logs</span>
<span class="text-sm text-primary-600 font-medium">Build Logs</span>
{{if or (eq .Status "success") (eq .Status "failed")}}
<a href="/apps/{{$.App.ID}}/deployments/{{.ID}}/download" class="text-sm text-primary-600 hover:text-primary-800 inline-flex items-center ml-auto" title="Download logs">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -80,9 +85,10 @@
</a>
{{end}}
</div>
<div class="logs-wrapper bg-gray-900 rounded-lg p-4 overflow-y-scroll" style="max-height: 400px;">
<pre class="logs-content text-gray-100 text-xs font-mono leading-relaxed whitespace-pre-wrap break-all">{{if .Logs.Valid}}{{.Logs.String}}{{else}}Loading...{{end}}</pre>
<div x-ref="logsWrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
<pre class="text-gray-100 text-xs font-mono whitespace-pre-wrap" x-text="logs"></pre>
</div>
{{if .Logs.Valid}}<script type="text/plain" class="initial-logs">{{.Logs.String}}</script>{{end}}
</div>
{{end}}
</div>