v5.23.0: New UI & Announcements

[TwiN]

This is a big one, and for the occasion, I'll highlight the two big ones:

• New UI: That's right, a brand new modern UI. This was long overdue. I hope you like it.
• Announcements: Want to update your users/customers about an outage? You can, now.

Thoughts on the UI & announcements? Just like any healthy relationship, communicate with me on TwiN/gatus#1206

What's Changed

• feat(ui): New status page UI by @TwiN in feat(ui): New status page UI #1198
• feat: Implement announcements by @TwiN in feat: Implement announcements #1204
• feat(alerting): Support extra labels in email alerts by @appleboy in feat(alerting): Support extra labels in email alerts #1191
• fix(ui): Replace filter value "nothing" by "none" by @TwiN in fix(ui): Replace filter value "nothing" by "none" #1202
• docs: tweak minimum-reminder-interval description by @salim-b in docs: tweak minimum-reminder-interval description #1194

Full Changelog: v5.22.0...v5.23.0

---

This discussion was created from the release v5.23.0.

[amanda-wee]

Okay, I admit: I do like the new UI.

[eleith]

the modern UI has brought some nice improvements to the usability of the dashboard, thank you for this release!

as requested, here are some small suggestions:

1. CSS customization: the search filter, "health of dashboard" and some other new UI could use id names or other identifiers to make it easier to apply my own css styles

2. keyboard navigation / accessibility: improving the accessibility of the drop down select elements and also the headers when sorting by group would allow for full keyboard accessibility of important elements on the dashboard

3. entry card clickability: when hovering over a site entry card, the cursor becomes a pointer, but the card is only clickable if you hover over the title of the site. if the entire card could become clickable OR the pointer not change unless hovering over the title, that would be more intuitive.

overall, i'm pretty happy with the update.

[TwiN]

3 is ACK'd and I already have a local branch with the fix.

1 will happen over time. I've already documented selectors on my side for user CSS customization, but given that this is a new UI and I may move/remove/modify elements in the coming weeks as I finalize the new UI, I didn't want to create selectors that I didn't have 100% confidence I would keep around.

I hadn't planned on releasing the list of selectors just yet, but since you brought it up, here's the "official" ones I have now:

As for 2, this is already partially implemented. Some work to be done on that front, but right now, this isn't at the top of my list (it's more of a nice to have, and I'm trying to focus on the big tasks while I have the time to)

[ghanjiboy]

This new UI looks awesome. A few suggestions:

1. Move the "Health dashboard and tag line" to where you have the Gatus logo - this takes up valuable space
2. In that free area, I would add some stats like Total Endpoints, Total Health and Total Unhealthy - the reason for this is the user gets a quick summary of what the overall health looks like from a #'s perspective
3. In the group view, on the far right side, I would add a set of metrics to like in the suggestion above above to show whats in that group - if you search or filter, it updates those metrics in the group

[tmeuze]

Is it possible to implement a tag/label function, or alternatively to see the custom-labels attribute from the UI? I would love to eventually be able to filter by a tag, but even showing a text badge on the grid would be a great addition.

Thank you!

[tostt]

Hello, and thank you for the update.

This change introduces some challenges in maintaining a single-column layout, especially in setups with limited screen space and many endpoints.

There are two main reasons for this:

• The addition of the new .mb-6 block (containing the "Health Dashboard" section and search bar).
• Each service block is now slightly taller than before.

In my setup, Gatus runs as a "read-only" big screen display for monitoring with no keyboard connected, so the search bar isn’t used. When I need to see details about a specific service I access each endpoint’s page from my personal computer. (I have 6 or 7 tall Gatus windows on the same screen, for different environments).

To optimize the layout and not show the .mb-6 block, I tested using custom CSS: .mb-6 { display: none; } which works great on the main page.
However, since the details page also uses the .mb-6 class, the useful information there is hidden too, making the page not useful.

Here are a few suggestions that could help make compact displays easier to configure (any of these would work for my use case):

• Use a different class name for the .mb-6 block on the details page, so the main and details views can be styled independently, maybe using more descriptive names.
• Add configuration variables to show/hide the "Health Dashboard" section and the search bar.

Thanks again for your work and for considering these suggestions—I hope they’re helpful!

[TwiN]

I believe there's already an issue/PR to make the new header and subheader configurable. Hiding them if they are explicitly set to "" could be a solution.

Easier than that though, isn't it possible for you to leverage the containers with an id/class alongside custom-css to fix that? If not, then what's missing?

Have a look at https://gatus.io/docs/appearance, more specifically, the Custom CSS Selectors section. I'm open to adding more of these if it will make customization easier.

---

As a side note, it's always interesting to see how different people use Gatus differently.

[jelmervdm]

Will you be updating the helm chart?

[TwiN]

Feel free to create a PR to update it if you want, but you do know that you can override the default tag, right? Have a look at the values.yaml

In other words, you don't need to wait for the helm chart's default tag to be updated

[jelmervdm]

Alright, I'm just getting my feet wet with git and have never submitted a PR before, but i'll try to figure it out.

I did see I could update the values.yaml, however changing something meant to be dynamic to static, didn't seem to be the right way to go.