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

[CommanderStorm]

This looks a bit off in the darkmode..
Could you make sure that the font is more readable?

We use variables to do this as far as I rememember.

[CommanderStorm]

I like your atttention to detail 👍🏻
Most would have missed the monitorList.length > 1

[CommanderStorm]

consider using a <button instead. Some accessibility tooling does interact poorly with <a href="#" as far as was reported to us.

For extra credits:
Add an aria-label or title (also appears for regular users on hover) what clicking this button does.

[CommanderStorm]

I am a bit torn on this.
I think localStorage for this feature is not what I would like - I would like all state to be stored in the query exclusively.
Moving this to the query is also simpler from a code perspective..

Looking at the code below, you have a strong preference.
Is this something which you feel strongly about or would you be fine with using the query state instead?

[CommanderStorm]

nit: not used in the code

Suggested change

	/**
	* Get sort direction symbol
	* @param {object} group object
	* @returns {string} sort direction symbol
	*/
	getSortDirectionSymbol(group) {
	return (group.sortDirection === "asc") ? "↑" : "↓";
	},

[CommanderStorm]

lets inline this. Much readable what popstate does this way.

[CommanderStorm]

I think the vue router already gives access to this.

Handling this manually seems like a lot of unnessesary work, especially in the reactivity department above.

I think the code would be much simpler if instead of hooking up events in the right places, we were to use a computed to sort and let vue handle the reactivity.

[CommanderStorm]

thinking about it, could you (if not, I am fine with this) move the code related to the PublicGroupListSortDropdown (horrible name, feel free to choose a different one) to its own component?

[MarshuMax]

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