Skip to content

Commit c70f65e

Browse files
yardenshohamsilverwind
yardenshoham
and
silverwind
authored
Auto-update the system status in admin dashboard (#29163)
- Refactor the system status list into its own template - Change the backend to return only the system status if htmx initiated the request - `hx-get="{{$.Link}}/system_status`: reuse the backend handler - `hx-swap="innerHTML"`: replace the `<div>`'s innerHTML (essentially the new template) - `hx-trigger="every 5s"`: call every 5 seconds - `hx-indicator=".divider"`: the `is-loading` class shouldn't be added to the div during the request, so set it on an element it has no effect on - Render "Since Last GC Time" with `<relative-time>`, so we send a timestamp # Auto-update in action GIF ![action](https://github.com/go-gitea/gitea/assets/20454870/c6e1f220-f0fb-4460-ac3b-59f315e30e29) --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: silverwind <me@silverwind.io>
1 parent e9a1ffb commit c70f65e

File tree

9 files changed

+97
-74
lines changed

9 files changed

+97
-74
lines changed

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"escape-goat": "4.0.0",
3131
"fast-glob": "3.3.2",
3232
"htmx.org": "1.9.10",
33+
"idiomorph": "0.3.0",
3334
"jquery": "3.7.1",
3435
"katex": "0.16.9",
3536
"license-checker-webpack-plugin": "0.2.1",

‎routers/web/admin/admin.go‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,14 @@ import (
2828
)
2929

3030
const (
31-
tplDashboard base.TplName = "admin/dashboard"
32-
tplSelfCheck base.TplName = "admin/self_check"
33-
tplCron base.TplName = "admin/cron"
34-
tplQueue base.TplName = "admin/queue"
35-
tplStacktrace base.TplName = "admin/stacktrace"
36-
tplQueueManage base.TplName = "admin/queue_manage"
37-
tplStats base.TplName = "admin/stats"
31+
tplDashboard base.TplName = "admin/dashboard"
32+
tplSystemStatus base.TplName = "admin/system_status"
33+
tplSelfCheck base.TplName = "admin/self_check"
34+
tplCron base.TplName = "admin/cron"
35+
tplQueue base.TplName = "admin/queue"
36+
tplStacktrace base.TplName = "admin/stacktrace"
37+
tplQueueManage base.TplName = "admin/queue_manage"
38+
tplStats base.TplName = "admin/stats"
3839
)
3940

4041
var sysStatus struct {
@@ -72,7 +73,7 @@ var sysStatus struct {
7273

7374
// Garbage collector statistics.
7475
NextGC string // next run in HeapAlloc time (bytes)
75-
LastGC string // last run in absolute time (ns)
76+
LastGCTime string // last run time
7677
PauseTotalNs string
7778
PauseNs string // circular buffer of recent GC pause times, most recent at [(NumGC+255)%256]
7879
NumGC uint32
@@ -110,7 +111,7 @@ func updateSystemStatus() {
110111
sysStatus.OtherSys = base.FileSize(int64(m.OtherSys))
111112

112113
sysStatus.NextGC = base.FileSize(int64(m.NextGC))
113-
sysStatus.LastGC = fmt.Sprintf("%.1fs", float64(time.Now().UnixNano()-int64(m.LastGC))/1000/1000/1000)
114+
sysStatus.LastGCTime = time.Unix(0, int64(m.LastGC)).Format(time.RFC3339)
114115
sysStatus.PauseTotalNs = fmt.Sprintf("%.1fs", float64(m.PauseTotalNs)/1000/1000/1000)
115116
sysStatus.PauseNs = fmt.Sprintf("%.3fs", float64(m.PauseNs[(m.NumGC+255)%256])/1000/1000/1000)
116117
sysStatus.NumGC = m.NumGC
@@ -132,14 +133,19 @@ func Dashboard(ctx *context.Context) {
132133
ctx.Data["PageIsAdminDashboard"] = true
133134
ctx.Data["NeedUpdate"] = updatechecker.GetNeedUpdate(ctx)
134135
ctx.Data["RemoteVersion"] = updatechecker.GetRemoteVersion(ctx)
135-
// FIXME: update periodically
136136
updateSystemStatus()
137137
ctx.Data["SysStatus"] = sysStatus
138138
ctx.Data["SSH"] = setting.SSH
139139
prepareDeprecatedWarningsAlert(ctx)
140140
ctx.HTML(http.StatusOK, tplDashboard)
141141
}
142142

143+
func SystemStatus(ctx *context.Context) {
144+
updateSystemStatus()
145+
ctx.Data["SysStatus"] = sysStatus
146+
ctx.HTML(http.StatusOK, tplSystemStatus)
147+
}
148+
143149
// DashboardPost run an admin operation
144150
func DashboardPost(ctx *context.Context) {
145151
form := web.GetForm(ctx).(*forms.AdminDashboardForm)

‎routers/web/web.go‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -677,6 +677,7 @@ func registerRoutes(m *web.Route) {
677677
// ***** START: Admin *****
678678
m.Group("/admin", func() {
679679
m.Get("", admin.Dashboard)
680+
m.Get("/system_status", admin.SystemStatus)
680681
m.Post("", web.Bind(forms.AdminDashboardForm{}), admin.DashboardPost)
681682

682683
m.Get("/self_check", admin.SelfCheck)

‎templates/admin/dashboard.tmpl‎

Lines changed: 3 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -75,69 +75,9 @@
7575
<h4 class="ui top attached header">
7676
{{ctx.Locale.Tr "admin.dashboard.system_status"}}
7777
</h4>
78-
<div class="ui attached table segment">
79-
<dl class="admin-dl-horizontal">
80-
<dt>{{ctx.Locale.Tr "admin.dashboard.server_uptime"}}</dt>
81-
<dd><relative-time format="duration" datetime="{{.SysStatus.StartTime}}">{{.SysStatus.StartTime}}</relative-time></dd>
82-
<dt>{{ctx.Locale.Tr "admin.dashboard.current_goroutine"}}</dt>
83-
<dd>{{.SysStatus.NumGoroutine}}</dd>
84-
<div class="divider"></div>
85-
<dt>{{ctx.Locale.Tr "admin.dashboard.current_memory_usage"}}</dt>
86-
<dd>{{.SysStatus.MemAllocated}}</dd>
87-
<dt>{{ctx.Locale.Tr "admin.dashboard.total_memory_allocated"}}</dt>
88-
<dd>{{.SysStatus.MemTotal}}</dd>
89-
<dt>{{ctx.Locale.Tr "admin.dashboard.memory_obtained"}}</dt>
90-
<dd>{{.SysStatus.MemSys}}</dd>
91-
<dt>{{ctx.Locale.Tr "admin.dashboard.pointer_lookup_times"}}</dt>
92-
<dd>{{.SysStatus.Lookups}}</dd>
93-
<dt>{{ctx.Locale.Tr "admin.dashboard.memory_allocate_times"}}</dt>
94-
<dd>{{.SysStatus.MemMallocs}}</dd>
95-
<dt>{{ctx.Locale.Tr "admin.dashboard.memory_free_times"}}</dt>
96-
<dd>{{.SysStatus.MemFrees}}</dd>
97-
<div class="divider"></div>
98-
<dt>{{ctx.Locale.Tr "admin.dashboard.current_heap_usage"}}</dt>
99-
<dd>{{.SysStatus.HeapAlloc}}</dd>
100-
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_obtained"}}</dt>
101-
<dd>{{.SysStatus.HeapSys}}</dd>
102-
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_idle"}}</dt>
103-
<dd>{{.SysStatus.HeapIdle}}</dd>
104-
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_in_use"}}</dt>
105-
<dd>{{.SysStatus.HeapInuse}}</dd>
106-
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_released"}}</dt>
107-
<dd>{{.SysStatus.HeapReleased}}</dd>
108-
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_objects"}}</dt>
109-
<dd>{{.SysStatus.HeapObjects}}</dd>
110-
<div class="divider"></div>
111-
<dt>{{ctx.Locale.Tr "admin.dashboard.bootstrap_stack_usage"}}</dt>
112-
<dd>{{.SysStatus.StackInuse}}</dd>
113-
<dt>{{ctx.Locale.Tr "admin.dashboard.stack_memory_obtained"}}</dt>
114-
<dd>{{.SysStatus.StackSys}}</dd>
115-
<dt>{{ctx.Locale.Tr "admin.dashboard.mspan_structures_usage"}}</dt>
116-
<dd>{{.SysStatus.MSpanInuse}}</dd>
117-
<dt>{{ctx.Locale.Tr "admin.dashboard.mspan_structures_obtained"}}</dt>
118-
<dd>{{.SysStatus.MSpanSys}}</dd>
119-
<dt>{{ctx.Locale.Tr "admin.dashboard.mcache_structures_usage"}}</dt>
120-
<dd>{{.SysStatus.MCacheInuse}}</dd>
121-
<dt>{{ctx.Locale.Tr "admin.dashboard.mcache_structures_obtained"}}</dt>
122-
<dd>{{.SysStatus.MCacheSys}}</dd>
123-
<dt>{{ctx.Locale.Tr "admin.dashboard.profiling_bucket_hash_table_obtained"}}</dt>
124-
<dd>{{.SysStatus.BuckHashSys}}</dd>
125-
<dt>{{ctx.Locale.Tr "admin.dashboard.gc_metadata_obtained"}}</dt>
126-
<dd>{{.SysStatus.GCSys}}</dd>
127-
<dt>{{ctx.Locale.Tr "admin.dashboard.other_system_allocation_obtained"}}</dt>
128-
<dd>{{.SysStatus.OtherSys}}</dd>
129-
<div class="divider"></div>
130-
<dt>{{ctx.Locale.Tr "admin.dashboard.next_gc_recycle"}}</dt>
131-
<dd>{{.SysStatus.NextGC}}</dd>
132-
<dt>{{ctx.Locale.Tr "admin.dashboard.last_gc_time"}}</dt>
133-
<dd>{{.SysStatus.LastGC}}</dd>
134-
<dt>{{ctx.Locale.Tr "admin.dashboard.total_gc_pause"}}</dt>
135-
<dd>{{.SysStatus.PauseTotalNs}}</dd>
136-
<dt>{{ctx.Locale.Tr "admin.dashboard.last_gc_pause"}}</dt>
137-
<dd>{{.SysStatus.PauseNs}}</dd>
138-
<dt>{{ctx.Locale.Tr "admin.dashboard.gc_times"}}</dt>
139-
<dd>{{.SysStatus.NumGC}}</dd>
140-
</dl>
78+
{{/* TODO: make these stats work in multi-server deployments, likely needs per-server stats in DB */}}
79+
<div hx-get="{{$.Link}}/system_status" hx-swap="morph:innerHTML" hx-trigger="every 5s" hx-indicator=".divider" class="ui attached table segment">
80+
{{template "admin/system_status" .}}
14181
</div>
14282
</div>
14383
{{template "admin/layout_footer" .}}

‎templates/admin/system_status.tmpl‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<dl class="admin-dl-horizontal">
2+
<dt>{{ctx.Locale.Tr "admin.dashboard.server_uptime"}}</dt>
3+
<dd><relative-time format="duration" datetime="{{.SysStatus.StartTime}}">{{.SysStatus.StartTime}}</relative-time></dd>
4+
<dt>{{ctx.Locale.Tr "admin.dashboard.current_goroutine"}}</dt>
5+
<dd>{{.SysStatus.NumGoroutine}}</dd>
6+
<div class="divider"></div>
7+
<dt>{{ctx.Locale.Tr "admin.dashboard.current_memory_usage"}}</dt>
8+
<dd>{{.SysStatus.MemAllocated}}</dd>
9+
<dt>{{ctx.Locale.Tr "admin.dashboard.total_memory_allocated"}}</dt>
10+
<dd>{{.SysStatus.MemTotal}}</dd>
11+
<dt>{{ctx.Locale.Tr "admin.dashboard.memory_obtained"}}</dt>
12+
<dd>{{.SysStatus.MemSys}}</dd>
13+
<dt>{{ctx.Locale.Tr "admin.dashboard.pointer_lookup_times"}}</dt>
14+
<dd>{{.SysStatus.Lookups}}</dd>
15+
<dt>{{ctx.Locale.Tr "admin.dashboard.memory_allocate_times"}}</dt>
16+
<dd>{{.SysStatus.MemMallocs}}</dd>
17+
<dt>{{ctx.Locale.Tr "admin.dashboard.memory_free_times"}}</dt>
18+
<dd>{{.SysStatus.MemFrees}}</dd>
19+
<div class="divider"></div>
20+
<dt>{{ctx.Locale.Tr "admin.dashboard.current_heap_usage"}}</dt>
21+
<dd>{{.SysStatus.HeapAlloc}}</dd>
22+
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_obtained"}}</dt>
23+
<dd>{{.SysStatus.HeapSys}}</dd>
24+
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_idle"}}</dt>
25+
<dd>{{.SysStatus.HeapIdle}}</dd>
26+
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_in_use"}}</dt>
27+
<dd>{{.SysStatus.HeapInuse}}</dd>
28+
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_memory_released"}}</dt>
29+
<dd>{{.SysStatus.HeapReleased}}</dd>
30+
<dt>{{ctx.Locale.Tr "admin.dashboard.heap_objects"}}</dt>
31+
<dd>{{.SysStatus.HeapObjects}}</dd>
32+
<div class="divider"></div>
33+
<dt>{{ctx.Locale.Tr "admin.dashboard.bootstrap_stack_usage"}}</dt>
34+
<dd>{{.SysStatus.StackInuse}}</dd>
35+
<dt>{{ctx.Locale.Tr "admin.dashboard.stack_memory_obtained"}}</dt>
36+
<dd>{{.SysStatus.StackSys}}</dd>
37+
<dt>{{ctx.Locale.Tr "admin.dashboard.mspan_structures_usage"}}</dt>
38+
<dd>{{.SysStatus.MSpanInuse}}</dd>
39+
<dt>{{ctx.Locale.Tr "admin.dashboard.mspan_structures_obtained"}}</dt>
40+
<dd>{{.SysStatus.MSpanSys}}</dd>
41+
<dt>{{ctx.Locale.Tr "admin.dashboard.mcache_structures_usage"}}</dt>
42+
<dd>{{.SysStatus.MCacheInuse}}</dd>
43+
<dt>{{ctx.Locale.Tr "admin.dashboard.mcache_structures_obtained"}}</dt>
44+
<dd>{{.SysStatus.MCacheSys}}</dd>
45+
<dt>{{ctx.Locale.Tr "admin.dashboard.profiling_bucket_hash_table_obtained"}}</dt>
46+
<dd>{{.SysStatus.BuckHashSys}}</dd>
47+
<dt>{{ctx.Locale.Tr "admin.dashboard.gc_metadata_obtained"}}</dt>
48+
<dd>{{.SysStatus.GCSys}}</dd>
49+
<dt>{{ctx.Locale.Tr "admin.dashboard.other_system_allocation_obtained"}}</dt>
50+
<dd>{{.SysStatus.OtherSys}}</dd>
51+
<div class="divider"></div>
52+
<dt>{{ctx.Locale.Tr "admin.dashboard.next_gc_recycle"}}</dt>
53+
<dd>{{.SysStatus.NextGC}}</dd>
54+
<dt>{{ctx.Locale.Tr "admin.dashboard.last_gc_time"}}</dt>
55+
<dd><relative-time format="duration" datetime="{{.SysStatus.LastGCTime}}">{{.SysStatus.LastGCTime}}</relative-time></dd>
56+
<dt>{{ctx.Locale.Tr "admin.dashboard.total_gc_pause"}}</dt>
57+
<dd>{{.SysStatus.PauseTotalNs}}</dd>
58+
<dt>{{ctx.Locale.Tr "admin.dashboard.last_gc_pause"}}</dt>
59+
<dd>{{.SysStatus.PauseNs}}</dd>
60+
<dt>{{ctx.Locale.Tr "admin.dashboard.gc_times"}}</dt>
61+
<dd>{{.SysStatus.NumGC}}</dd>
62+
</dl>

‎templates/base/head.tmpl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
{{template "base/head_style" .}}
3030
{{template "custom/header" .}}
3131
</head>
32-
<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-push-url="false">
32+
<body hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}' hx-swap="outerHTML" hx-ext="morph" hx-push-url="false">
3333
{{ctx.DataRaceCheck $.Context}}
3434
{{template "custom/body_outer_pre" .}}
3535

‎web_src/js/htmx.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import * as htmx from 'htmx.org';
22
import {showErrorToast} from './modules/toast.js';
33

4+
// https://github.com/bigskysoftware/idiomorph#htmx
5+
import 'idiomorph/dist/idiomorph-ext.js';
6+
47
// https://htmx.org/reference/#config
58
htmx.config.requestClass = 'is-loading';
69
htmx.config.scrollIntoViewOnBoost = false;

‎webpack.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,9 @@ export default {
169169
],
170170
},
171171
plugins: [
172+
new webpack.ProvidePlugin({ // for htmx extensions
173+
htmx: 'htmx.org',
174+
}),
172175
new DefinePlugin({
173176
__VUE_OPTIONS_API__: true, // at the moment, many Vue components still use the Vue Options API
174177
__VUE_PROD_DEVTOOLS__: false, // do not enable devtools support in production
@@ -207,6 +210,7 @@ export default {
207210
override: {
208211
'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
209212
'htmx.org@1.9.10': {licenseName: 'BSD-2-Clause'}, // "BSD 2-Clause" -> "BSD-2-Clause"
213+
'idiomorph@0.3.0': {licenseName: 'BSD-2-Clause'}, // "BSD 2-Clause" -> "BSD-2-Clause"
210214
},
211215
emitError: true,
212216
allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',

0 commit comments

Comments
 (0)