Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Auto-update the system status in admin dashboard #29163

Merged
merged 15 commits into from
Feb 16, 2024

Conversation

yardenshoham
Copy link
Member

@yardenshoham yardenshoham commented Feb 13, 2024

  • 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

- 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 <git@yardenshoham.com>
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 13, 2024
@pull-request-size pull-request-size bot added the size/L Denotes a PR that changes 100-499 lines, ignoring generated files. label Feb 13, 2024
@yardenshoham yardenshoham marked this pull request as ready for review February 13, 2024 21:30
routers/web/admin/admin.go Outdated Show resolved Hide resolved
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 14, 2024
@yardenshoham
Copy link
Member Author

I noticed that the mouse selection state doesn't persist. Is it a problem?
action

@delvh
Copy link
Member

delvh commented Feb 14, 2024

Hmm… Sounds acceptable for me.
If you know a quick fix, apply it, but otherwise also fine for me.

@delvh delvh added type/enhancement An improvement of existing functionality topic/ui Change the appearance of the Gitea UI labels Feb 14, 2024
@silverwind
Copy link
Member

I noticed that the mouse selection state doesn't persist. Is it a problem?

Not a big problem. Can htmx diff the DOM and only update the changed nodes? That would be the ideal solution.

@yardenshoham
Copy link
Member Author

I tried hx-preserve but it didn't have an effect

@silverwind
Copy link
Member

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.

@silverwind
Copy link
Member

silverwind commented Feb 14, 2024

hx-preserve sounds like it would work, but you would need to compute a content hash all elements on the backend and set the hash as id on each node.

@yardenshoham
Copy link
Member Author

Save it for a future PR?

@silverwind
Copy link
Member

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.

@silverwind
Copy link
Member

silverwind commented Feb 14, 2024

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.

@yardenshoham
Copy link
Member Author

Fixed with idiomorph
action

@silverwind
Copy link
Member

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.

@yardenshoham
Copy link
Member Author

@silverwind good enough to get your approval?

@silverwind
Copy link
Member

Not super happy that it won't work in distributed deployment, though I guess it's barely acceptable as a minor broken thing.

@yardenshoham
Copy link
Member Author

The previous way also won't work no?

@silverwind
Copy link
Member

I can accept it with this TODO added.

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: silverwind <me@silverwind.io>
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Feb 15, 2024
@techknowlogick techknowlogick enabled auto-merge (squash) February 16, 2024 02:17
@techknowlogick techknowlogick added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 16, 2024
@techknowlogick techknowlogick merged commit c70f65e into go-gitea:main Feb 16, 2024
26 checks passed
@GiteaBot GiteaBot added this to the 1.22.0 milestone Feb 16, 2024
@GiteaBot GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Feb 16, 2024
@yardenshoham yardenshoham deleted the system-status-htmx branch February 16, 2024 07:20
@yardenshoham
Copy link
Member Author

cc @anbraten if you do implement websockets, maybe you can rewrite this PR with it

zjjhot added a commit to zjjhot/gitea that referenced this pull request Feb 16, 2024
* 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)
  ...
silverwind added a commit to silverwind/gitea that referenced this pull request Feb 20, 2024
- 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>
6543 pushed a commit to 6543-forks/gitea that referenced this pull request Feb 26, 2024
- 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>
(cherry picked from commit c70f65e)
Copy link

Automatically locked because of our CONTRIBUTING guidelines

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 29, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. modifies/internal size/L Denotes a PR that changes 100-499 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants