Auto-update the system status in admin dashboard #29163
Conversation
- Refactored the system status list into its own template
- Changed the backend to return only the system status if the request was initiated by htmx
- `hx-get="{{$.Link}}"`: 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
Signed-off-by: Yarden Shoham <[email protected]>
GiteaBot
added
the
lgtm/need 2
pull-request-size
bot
added
the
size/L
GiteaBot
added
lgtm/need 1
|
I noticed that the mouse selection state doesn't persist. Is it a problem? |
|
Hmm… Sounds acceptable for me. |
delvh
added
type/enhancement
Not a big problem. Can htmx diff the DOM and only update the changed nodes? That would be the ideal solution. |
|
I tried |
|
I checked htmx docks, does not seems it can do DOM diffing. Such a feature is usually something that requrires a library like React or Vue. |
|
|
|
Save it for a future PR? |
|
I think https://htmx.org/extensions/morphdom-swap/ is the better solution that does not require backend changes and it might prove useful for other cases as well. Yes, does not have to be here. |
|
I'd even argue that morphdom swap should be the default swapping behaviour. With it, it will preserve selection, caret, CSS transition state, etc in swapped content. Plain htmx swap is fast but too destructive. |
|
Fixed with idiomorph |
|
Such a refresh won't work properly in case of distributed Gitea with multiple servers, because stats would flip around confusingly when they come from different servers. Not a blocker, but I thought to mention it at least. |
|
@silverwind good enough to get your approval? |
|
Not super happy that it won't work in distributed deployment, though I guess it's barely acceptable as a minor broken thing. |
|
The previous way also won't work no? |
|
I can accept it with this TODO added. |
Co-authored-by: silverwind <[email protected]>
Co-authored-by: silverwind <[email protected]>
GiteaBot
added
lgtm/done
techknowlogick
added
the
reviewed/wait-merge
GiteaBot
removed
the
reviewed/wait-merge
|
cc @anbraten if you do implement websockets, maybe you can rewrite this PR with it |
* giteaofficial/main: (23 commits) Remove jQuery from SSH key form parser (go-gitea#29193) Refactor request function (go-gitea#29187) Docker Tag Information in Docs (go-gitea#29047) Fix gitea-action user avatar broken on edited menu (go-gitea#29190) Disable parallel Make execution (go-gitea#29186) Auto-update the system status in admin dashboard (go-gitea#29163) Avoid vue warning in dev mode (go-gitea#29188) Update JS and PY dependencies (go-gitea#29184) [skip ci] Updated translations via Crowdin Implement contributors graph (go-gitea#27882) Add support for action artifact serve direct (go-gitea#29120) Advertise WebAuthn support (go-gitea#29176) Tweak repo header (go-gitea#29134) Change webhook-type in create-view (go-gitea#29114) Remove jQuery from the comment task list (go-gitea#29170) Fix can not select team reviewers when reviewers is empty (go-gitea#29174) move sign in labels to be above inputs (go-gitea#28753) Refactor locale&string&template related code (go-gitea#29165) Extract linguist code to method (go-gitea#29168) bump to use go 1.22 (go-gitea#29119) ...
- 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
---------
Signed-off-by: Yarden Shoham <[email protected]>
Co-authored-by: silverwind <[email protected]>
- 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
---------
Signed-off-by: Yarden Shoham <[email protected]>
Co-authored-by: silverwind <[email protected]>
(cherry picked from commit c70f65e)
|
Automatically locked because of our CONTRIBUTING guidelines |
hx-get="{{$.Link}}/system_status: reuse the backend handlerhx-swap="innerHTML": replace the<div>'s innerHTML (essentially the new template)hx-trigger="every 5s": call every 5 secondshx-indicator=".divider": theis-loadingclass shouldn't be added to the div during the request, so set it on an element it has no effect on<relative-time>, so we send a timestampAuto-update in action GIF