feat: add sorting to status pages

[MarshuMax]

This PR implements group and global sorting and searching features with corresponding UI improvements. Resolves #1936.

Features

• Introduced global and group-level sorting with a status bar
• Implemented global search functionality with improved logic
• Added certificate expiration label and persistence of sorting state
• Enhanced UI layout: background styling, component positioning
• Performed language adaptation and canonical annotation cleanups

Additional Notes

• A sorting option (ascending/descending) and search bar are now available both globally and within individual groups
• Global sorting can be applied while also setting specific sorting rules for one or more selected groups

Closes #1936

[CommanderStorm]

Sorry, a +1.1k rewrite of one component implementing different features is not reviewable.
You will need to split this apart.

Looking at the screenshot:

• From the UI side, this does not really fit into our existing style. Look at how buttons are rounded for exampe.
• In terms of functionality, I think this is a bit too complex. This adds multiple search bars and multiple sorting options.

[Copilot]

Copilot reviewed 3 out of 5 changed files in this pull request and generated no comments.

Files not reviewed (2)

• src/lang/en.json: Language not supported
• src/lang/zh-CN.json: Language not supported

Comments suppressed due to low confidence (1)

src/pages/StatusPage.vue:778

• The new monitor reordering logic would benefit from unit test coverage to ensure that monitors are ordered correctly under various heartbeat conditions.

if (!this.enableEditMode) {

[MarshuMax]

Hi @CommanderStorm ,

Thanks for the feedback!

Sorry, a +1.1k rewrite of one component implementing different features is not reviewable. You will need to split this apart.

I'll split the PR into smaller, more focused changes. I'll also add some necessary comments to make the logic clearer.

Looking at the screenshot:

• From the UI side, this does not really fit into our existing style. Look at how buttons are rounded for exampe.

I'll update the UI to better match the existing style—thanks for pointing that out.

• In terms of functionality, I think this is a bit too complex. This adds multiple search bars and multiple sorting options.

Do you have any suggestions regarding the sorting feature?
Also, would it still make sense to include a search function here, or do you think it's unnecessary?

I’ll revise the implementation based on your suggestions and follow up with updated PRs soon. Thanks again!

BR,
Marshu

[CommanderStorm]

I'd like to simplify this to one button on the top right (at the group level) with just sorting.
No search bar required

We could add it here (nicely out of the way) via a dropdown-button type interaction

Also note that the state for this should be an url query parameter
=> make it possible to share the exact sorting with others.

[MarshuMax]

I'd like to simplify this to one button on the top right (at the group level) with just sorting. No search bar required

We could add it here (nicely out of the way) via a dropdown-button type interaction

Ok, will remove the search functionality, and I believe what you're describing would work like this:

Also note that the state for this should be an url query parameter => make it possible to share the exact sorting with others.

I’d like to clarify a few points:

1. Based on your description, it seems the sorting is group-level rather than global.
   Should we remove the global sorting then?

2. Also, is it currently possible to share links with group-level sorting defined?
   If we want to show different sorting for each group, would the URL look something like this:
   group1_sort=name&group1_order=asc&group2_sort=uptime&group2_order=desc?

[CommanderStorm]

Based on your description, it seems the sorting is group-level rather than global.
Should we remove the global sorting then?

Yes, please do that. That has the addtional advantage of simplifies the PR ^^

Also, is it currently possible to share links with group-level sorting defined?
If we want to show different sorting for each group, would the URL look something like this:
group1_sort=name&group1_order=asc?

That sounds reasonable. Maybe sort_group1=name_asc since these are trigged by the same thing?
If simpler to implement the other way around, lets use your version, otherwise my.
That is hard bikeshedding theretorium.

[CommanderStorm]

you're describing would work like this

Yes, that is approximately what I was thinking about.
Maybe with an icon instead of text (more out of the way), but that is for you to decide what you like better.

[MarshuMax]

Hi @CommanderStorm ,

Thank you for your suggestions. Based on your advice, I have made the following adjustments.

For the adjustments to the sorting

Removed the search functionality and global sorting. The group sorting options are now displayed through a dropdown button, as shown in the image below.

I replaced the "Sort by" text on the button with an upward arrow and a downward arrow. When no sorting option is selected, both arrows are gray. When the sorting is in ascending order, the upward arrow turns green; otherwise, the downward arrow turns green. Allow switching between ascending and descending order by clicking the already selected sorting attribute again.

Support for link-sharing of personal sorting

Implemented the link-sharing feature.
For example, I have two groups named group1 and group2. I defined the sorting rule for group1 as uptime in ascending order, and group2 as status in descending order. The link would be:
http://localhost:3000/status/guess?sort_group1=uptime_asc&sort_group2=status_desc.

When others visit this link, they will see the same sorting effects.

The current pull request is half the size of the original pull request, please check it when you have time. Thanks!

[CommanderStorm]

Looks quite nicely.
I think this needs another round of polishing though.

The main bug is that the query part does not reflect the state..

I have commented in a few other places below too, but those should be minor

[MarshuMax]

Thanks for the review and detailed feedback! Just saw this I’ll go through the comments and update accordingly soon.

[MarshuMax]

Hi @CommanderStorm,

Sorry for the long delay in responding to your review. I had to switch to my corporate email for this contribution due to company policy requirements, which took some time to get approved through our internal processes.

I’ve now addressed all your review comments.

Thanks for your patience and the detailed reviews, they really helped improve the code quality. Looking forward to your feedback.

Best regards,
Marshu

[MarshuMax]

Looks quite nicely. I think this needs another round of polishing though.

The main bug is that the query part does not reflect the state..

I have commented in a few other places below too, but those should be minor

Thanks for testing. I can’t reproduce the issue on my side, the url query parameters update correctly when I change the sorting. I suspect it might be a caching problem, but I don’t have many leads yet.

[MarshuMax]

Hi @CommanderStorm, do you have any review comments or suggestions for the next steps? Thanks!

[CommanderStorm]

sorry, I have been super buisy with non-uptime-kuma things.
I won't be able to give a review given the stress that I am currently under from other things.

I would appreciated if other people could test-drive this PR.

[MarshuMax]

Hi @CommanderStorm,

Sorry for the late reply, and thanks again for your previous message.
I completely understand you’ve been busy — hope things have been going well for you.

I just wanted to gently check in on this PR and see if there’s anything I can do to help move it forward.
If you’re still busy, no worries at all — perhaps you could suggest someone else who might be able to review it, or I can reach out to other active contributors to help test-drive it.

I’m happy to update the code or run any additional tests if needed.

Thanks again!

[CommanderStorm]

Sorry for dragging the review out for so long and thanks for the ping.

So the main bug that I would like to see adressed is the bug I noted in the previous review:

That should be resonably simple to fix by either using an already existing ID for this or by passing the ID through.

[CommanderStorm]

The feature works really nicely and I would love to have it

[MarshuMax]

Sorry for dragging the review out for so long and thanks for the ping.

So the main bug that I would like to see adressed is the bug I noted in the previous review:

That should be resonably simple to fix by either using an already existing ID for this or by passing the ID through.

Thanks for the comment! I've fixed this issue.

The current fix uses the group’s backend ID (or the index if no ID is available) as the unique key, which resolves the issue on the status page where groups with the same name were incorrectly coupled in sorting.
The change is in src/components/GroupSortDropdown.vue

This is the current display:

Please bother to help review it again if you have time, and let me know if there are any comments, Thanks!

[CommanderStorm]

Nice work!

Thank you for impelementing this improvement 🎉

[MarshuMax]

Thanks again for reviewing and merging this PR!

Building on the status page improvements here, I’ve opened a separate PR (#6452) that adds a simple search/filter for monitors. This makes it easier to quickly find a specific monitor on large status pages. The PR description has more details.

If you have some time, I’d really appreciate it if you could take a look when convenient. Thanks!