Add real-time deployment updates and refactor JavaScript
- 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:
@@ -17,38 +17,39 @@
|
||||
|
||||
<div class="section-header">
|
||||
<h1 class="text-2xl font-medium text-gray-900">Deployment History</h1>
|
||||
<form method="POST" action="/apps/{{.App.ID}}/deploy">
|
||||
<button type="submit" class="btn-success">Deploy Now</button>
|
||||
<form id="deploy-form" method="POST" action="/apps/{{.App.ID}}/deploy">
|
||||
<button id="deploy-btn" type="submit" class="btn-success">Deploy Now</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{if .Deployments}}
|
||||
<div class="space-y-4">
|
||||
<!-- Live Build Logs (shown during active deployment) -->
|
||||
<div id="live-logs-section" class="card p-6 mb-4" style="display: none;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="section-title">Live Build Logs</h2>
|
||||
<span id="live-status" class="badge-neutral text-xs">Building</span>
|
||||
</div>
|
||||
<div id="live-logs-wrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
|
||||
<pre id="live-logs" class="text-gray-100 text-xs font-mono whitespace-pre-wrap">Waiting for logs...</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="deployments-list" class="space-y-4">
|
||||
{{if .Deployments}}
|
||||
{{range .Deployments}}
|
||||
<div class="card p-6">
|
||||
<div class="card p-6 deployment-card" data-deployment-id="{{.ID}}" data-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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>{{.StartedAt.Format "2006-01-02 15:04:05"}}</span>
|
||||
<span class="relative-time" data-time="{{.StartedAt.Format "2006-01-02T15:04:05Z07:00"}}" title="{{.StartedAt.Format "2006-01-02 15:04:05"}}">{{.StartedAt.Format "2006-01-02 15:04:05"}}</span>
|
||||
{{if .FinishedAt.Valid}}
|
||||
<span class="text-gray-400">-</span>
|
||||
<span>{{.FinishedAt.Time.Format "15:04:05"}}</span>
|
||||
<span class="text-gray-400">•</span>
|
||||
<span>{{.Duration}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div>
|
||||
{{if eq .Status "success"}}
|
||||
<span class="badge-success">Success</span>
|
||||
{{else if eq .Status "failed"}}
|
||||
<span class="badge-error">Failed</span>
|
||||
{{else if eq .Status "building"}}
|
||||
<span class="badge-warning">Building</span>
|
||||
{{else if eq .Status "deploying"}}
|
||||
<span class="badge-info">Deploying</span>
|
||||
{{else}}
|
||||
<span class="badge-neutral">{{.Status}}</span>
|
||||
{{end}}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -56,7 +57,7 @@
|
||||
{{if .CommitSHA.Valid}}
|
||||
<div>
|
||||
<span class="font-medium text-gray-700">Commit:</span>
|
||||
<span class="font-mono text-gray-500 ml-1">{{.CommitSHA.String}}</span>
|
||||
<span class="font-mono text-gray-500 ml-1">{{.ShortCommit}}</span>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
@@ -75,35 +76,43 @@
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if .Logs.Valid}}
|
||||
<details class="mt-4">
|
||||
{{if or .Logs.Valid (eq .Status "building") (eq .Status "deploying")}}
|
||||
<details class="mt-4 deployment-logs" {{if or (eq .Status "building") (eq .Status "deploying")}}open{{end}}>
|
||||
<summary class="cursor-pointer text-sm text-primary-600 hover:text-primary-800 font-medium inline-flex items-center">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-4 h-4 mr-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
View Logs
|
||||
</summary>
|
||||
<pre class="mt-3 p-4 bg-gray-900 text-gray-100 rounded-lg text-xs overflow-x-auto font-mono leading-relaxed">{{.Logs.String}}</pre>
|
||||
<div class="logs-wrapper mt-3 overflow-auto" style="max-height: 400px;">
|
||||
<pre class="logs-content p-4 bg-gray-900 text-gray-100 rounded-lg text-xs font-mono leading-relaxed whitespace-pre-wrap">{{if .Logs.Valid}}{{.Logs.String}}{{else}}Loading...{{end}}</pre>
|
||||
</div>
|
||||
</details>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="card">
|
||||
<div class="empty-state">
|
||||
<svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
||||
</svg>
|
||||
<h3 class="empty-state-title">No deployments yet</h3>
|
||||
<p class="empty-state-description">Deploy your application to see the deployment history here.</p>
|
||||
<div class="mt-6">
|
||||
<form method="POST" action="/apps/{{.App.ID}}/deploy">
|
||||
<button type="submit" class="btn-success">Deploy Now</button>
|
||||
</form>
|
||||
{{else}}
|
||||
<div class="card">
|
||||
<div class="empty-state">
|
||||
<svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
||||
</svg>
|
||||
<h3 class="empty-state-title">No deployments yet</h3>
|
||||
<p class="empty-state-description">Deploy your application to see the deployment history here.</p>
|
||||
<div class="mt-6">
|
||||
<form id="deploy-form-empty" method="POST" action="/apps/{{.App.ID}}/deploy">
|
||||
<button id="deploy-btn-empty" type="submit" class="btn-success">Deploy Now</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</main>
|
||||
|
||||
<script>
|
||||
upaas.initDeploymentsPage({
|
||||
appId: "{{.App.ID}}"
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user