service.html
134 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
{{template "main.html" .}}
{{define "title"}}{{if services.Service}}{{services.Service.Name}} —{{end}} Congo Dev{{end}}
{{define "content"}}
{{with services.Service}}
<!-- Header -->
<div class="flex items-center gap-3 mb-4">
<a href="/" class="text-slate-300 hover:text-slate-500 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
</a>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2.5">
<h1 class="text-lg font-bold text-slate-800 truncate">{{.Name}}</h1>
{{if eq .Status "running"}}
<span class="inline-flex items-center gap-1 text-[10px] font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span> Running</span>
{{else if eq .Status "building"}}
<span class="inline-flex items-center gap-1 text-[10px] font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span> Building</span>
{{else if eq .Status "failed"}}
<span class="inline-flex items-center gap-1 text-[10px] font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Failed</span>
{{else}}
<span class="inline-flex items-center gap-1 text-[10px] font-medium text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full"><span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Stopped</span>
{{end}}
</div>
<p class="text-[11px] text-slate-400 font-mono mt-0.5">svc-{{.Slug}} · :{{.Port}}{{if .Domain}} · {{.Domain}}{{end}}</p>
</div>
<!-- Action buttons inline in header on desktop -->
<div class="hidden sm:flex items-center gap-1.5 shrink-0">
{{if eq .Status "running"}}
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-500 bg-white border border-slate-200 hover:border-slate-300 hover:text-slate-700 transition-colors" hx-post="/services/{{.ID}}/restart" hx-target="body">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
Restart
</button>
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-red-400 bg-white border border-slate-200 hover:border-red-200 hover:text-red-500 hover:bg-red-50 transition-colors" hx-post="/services/{{.ID}}/stop" hx-target="body">
Stop
</button>
{{else if eq .Status "stopped"}}
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors" hx-post="/services/{{.ID}}/start" hx-target="body">
Start
</button>
{{end}}
{{if .RepoID}}
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-500 bg-white border border-slate-200 hover:border-slate-300 hover:text-slate-700 transition-colors" hx-post="/services/{{.ID}}/redeploy" hx-target="body" hx-confirm="Rebuild and redeploy?">
Redeploy
</button>
{{end}}
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-300 bg-white border border-slate-200 hover:border-red-200 hover:text-red-400 hover:bg-red-50 transition-colors" hx-post="/services/{{.ID}}/delete" hx-target="body" hx-confirm="Delete service {{.Name}}?">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
</button>
</div>
</div>
<!-- Mobile action buttons -->
<div class="flex flex-wrap gap-1.5 mb-4 sm:hidden">
{{if eq .Status "running"}}
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-500 bg-white border border-slate-200 hover:border-slate-300 hover:text-slate-700 transition-colors" hx-post="/services/{{.ID}}/restart" hx-target="body">Restart</button>
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-red-400 bg-white border border-slate-200 hover:border-red-200 hover:text-red-500 hover:bg-red-50 transition-colors" hx-post="/services/{{.ID}}/stop" hx-target="body">Stop</button>
{{else if eq .Status "stopped"}}
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors" hx-post="/services/{{.ID}}/start" hx-target="body">Start</button>
{{end}}
{{if .RepoID}}
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-500 bg-white border border-slate-200 hover:border-slate-300 hover:text-slate-700 transition-colors" hx-post="/services/{{.ID}}/redeploy" hx-target="body" hx-confirm="Rebuild and redeploy?">Redeploy</button>
{{end}}
<div class="flex-1"></div>
<button class="inline-flex items-center gap-1.5 px-3 h-8 rounded-lg text-[11px] font-medium text-slate-300 bg-white border border-slate-200 hover:border-red-200 hover:text-red-400 hover:bg-red-50 transition-colors" hx-post="/services/{{.ID}}/delete" hx-target="body" hx-confirm="Delete service {{.Name}}?">Delete</button>
</div>
<!-- Content: Two-column on desktop -->
<div class="grid grid-cols-1 lg:grid-cols-5 gap-4">
<!-- Left: Logs -->
<div class="lg:col-span-3">
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="px-4 pt-3 pb-2">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Logs</h3>
</div>
<div class="px-4 pb-4">
<div id="service-logs" hx-get="/services/{{.ID}}/logs" hx-trigger="load, every 3s" hx-swap="innerHTML">
<div class="h-40 bg-slate-50 rounded-lg animate-pulse"></div>
</div>
</div>
</div>
</div>
<!-- Right: Config -->
<div class="lg:col-span-2 space-y-4">
<!-- Environment -->
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="px-4 pt-3 pb-2">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Environment</h3>
</div>
<div class="px-4 pb-4">
{{render "EnvEditor" (dict "env" .Env "actionUrl" (printf "/services/%s/env" .ID))}}
</div>
</div>
<!-- Domain -->
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="px-4 pt-3 pb-2">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Domain</h3>
</div>
<div class="px-4 pb-4">
<form hx-post="/services/{{.ID}}/domain" hx-target="body">
<input type="text" name="domain" value="{{.Domain}}" placeholder="app.example.com"
class="w-full font-mono text-[12px] text-slate-600 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 focus:outline-none focus:border-indigo-300 focus:ring-1 focus:ring-indigo-100 transition-colors" />
<div class="flex justify-end mt-2">
<button type="submit" class="inline-flex items-center px-3 py-1 rounded-lg text-[11px] font-medium text-white bg-indigo-600 hover:bg-indigo-700 transition-colors">Update</button>
</div>
</form>
</div>
</div>
<!-- Source -->
{{if .RepoID}}
<div class="bg-white rounded-xl border border-slate-200/60">
<div class="px-4 pt-3 pb-2">
<h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Source</h3>
</div>
<div class="px-4 pb-3">
<a href="/repos/{{.RepoID}}" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-slate-50 transition-colors text-[12px] text-indigo-600 font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
View project
</a>
</div>
</div>
{{end}}
</div>
</div>
{{else}}
<div class="text-center py-16">
<p class="text-slate-400 mb-3 text-sm">Service not found</p>
<a href="/" class="text-indigo-500 hover:text-indigo-600 text-sm">Back to Dashboard</a>
</div>
{{end}}
{{end}}