feat(status-page): add search functionality to filter monitors

[MarshuMax]

⬆ Type of changes

• New feature (a non-breaking change that adds new functionality)
• User Interface (UI) updates

---

📝 Description

This PR adds a search feature to the status page that allows users to filter monitors by name and tags.
It is especially useful when a status page shows many services/monitors and you need to quickly locate a specific one.

Features

• Search box placed in the "Overall Status" block alongside the status message.
• Real-time filtering as users type.
• Case-insensitive search matching on:
  • Monitor name
  • Tag name
  • Tag value
• When a search is active, groups with no matching monitors are automatically hidden.
• Subtle vertical divider between the status text and the search box for visual separation.
• Dark theme support for the divider.
• Search box is only visible in public view (hidden in edit mode).

---

📷 Screenshots

search

---

🔧 Files Changed

• src/pages/StatusPage.vue
  • Added search input.
  • Added searchText data property.
  • Added clearSearchText() method.
  • Added related CSS styles (including divider and dark theme support).
• src/components/PublicGroupList.vue
  • Added searchText prop.
  • Added shouldShowMonitor() and shouldShowGroup() filtering methods.

---

✅ Checklist

• My code adheres to the style guidelines of this project.
• I ran ESLint and other code linters for modified files.
• I have reviewed and tested my code.
• I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• My changes generate no new warnings.
• My code needed automated testing. I have added them (this is an optional task).
• I have considered potential security impacts and mitigated risks.
• I have read and understood the Pull Request guidelines.

[CommanderStorm]

Not sure if this is the way to add this. At least the place you chose to add it seems a bit odd, but then I don't have a better alternative.

Lets talk the basic need: Is a search bar on the status page something that you need/want or just something that you thought could be nice to add?

[MarshuMax]

Not sure if this is the way to add this. At least the place you chose to add it seems a bit odd, but then I don't have a better alternative.

Lets talk the basic need: Is a search bar on the status page something that you need/want or just something that you thought could be nice to add?

This feature allows filtering not only by name but also by tags. Furthermore, the filtering is dynamic—it updates in real-time as keywords are entered to instantly show the services we want to see.

To be honest, this feature is exactly what we need for our current scenarios, and it is a very useful feature for future usage. In fact, the community has long reported similar pain points (e.g., issue #12 ), which confirms the need for this functionality.

Here is why:

Efficiency for Large Lists: When an admin configures multiple services on a status page, the screen often cannot display them all at once, requiring the user to scroll extensively to see everything. If a user wants to check the status of specific services at a particular moment, they can simply use this filter function to locate them immediately, rather than scrolling through the list one by one to find them.

A Flexible Solution for Users: For users who do not have permission to create or plan new status pages, this offers a highly flexible solution. Even if they only care about a small subset of services on a large page, they can simply associate a tag with those services. By using the filter, they can find exactly what they need without having to create a brand new status page.

This makes the system much more adaptable for different user needs.

[MarshuMax]

Hi @CommanderStorm , just a quick follow-up on this PR.
Let me know if you have any further thoughts or concerns, I’m happy to adjust the implementation if needed.
Thanks again for taking the time to review it!

[CommanderStorm]

@louislam what do you think (as a tie breaker)?
Does the feature make sense to add and if yes, where should this be put?

[CommanderStorm]

@MarshuMax how about a compromise?
We add the search bar as is, but only when there are a lot (30?) items on the page?

[MarshuMax]

@MarshuMax how about a compromise? We add the search bar as is, but only when there are a lot (30?) items on the page?

Thanks, that sounds like a good compromise.

I’m currently dealing with a few things over the next few days, so I may not be able to get to this right away. Once I have some time freed up, I’ll implement it as soon as possible.

Also, thanks for keeping this moving forward!

[MarshuMax]

Hi @CommanderStorm,

I’ve added a limit so the search bar is only shown when the number of monitors is >= 30.

I tested this locally by creating two status pages:

• On the demo page (with 30+ services), the search bar is shown and works as expected.

• On the balance page (with only 3 services), the search bar is not shown.

Please take a look and review when you have time. Thank you!