In contrast to Bootstrap, Mantine's Accordion component didn't remove its
panel contents from the DOM when collapsed, so rendering pages with lots of
collapsed Accordion items was way slower and more resource-intensive in the
new Mantine UI. While I talked to Vitaly from Mantine and he managed to add
unmounting of collapsed panel contents in Mantine 9, this will only be
available next year. So for now, I'm forking over the Accordion component
from Mantine and adding a hacky modification to it that removes contents
for collapsed panels. This fork can be removed after upgrading to Mantine 9
sometime in 2026. I removed all the unnecessary test files and so on and
just kept the core Accordion code files.
This should really help with the following issues:
https://github.com/prometheus/prometheus/issues/17254https://github.com/prometheus/prometheus/issues/16830
The /alerts and /rules pages should be the most affected since the panels
on those are collapsed by default. The /targets and /service-discovery
pages have expanded panels by default, but I still swapped out the
Accordion implementation for consistency and in case someone collapses a
bunch of panels.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Implement simpler custom badges for label displays
Should help a little bit with https://github.com/prometheus/prometheus/issues/16308
Signed-off-by: Julius Volz <julius.volz@gmail.com>
* Don't wrap text inside custom labels
Signed-off-by: Julius Volz <julius.volz@gmail.com>
---------
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This should help a bit with the header icon overflow on narrow screens and
also overall make things look less cluttered.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This addresses extreme slowness when you have thousands of rules in
potentially hundreds of rule groups. It can still be a bit slow even with
pagination and infinite scroll for very large use cases, but it's much
better already than before.
Fixes https://github.com/prometheus/prometheus/issues/15551
Signed-off-by: Julius Volz <julius.volz@gmail.com>
Fixes most of https://github.com/prometheus/prometheus/issues/15202
This should address all areas of the UI except for the autocompletion in the
codemirror-promql text editor. The strategy here is that any time we print or
internally serialize (like for the PromLens tree view) either a metric name or
a label name as part of a selector or in other relevant parts of PromQL, we
check whether it contains characters beyond what was previously supported, and
if so, quote and escape it. In the case of metric names, we also have to move
them from the beginning of the selector into the curly braces.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
Some of the changes are a bit unreadable because the previous files were not
saved with the project's linter / auto-formatter settings applied. But it's
basically:
* For icons that are not Mantine-native components, use the rem() function
for computing their size, so they scale correctly with the root font size.
See https://mantine.dev/styles/rem/.
* Try a different icon for the notifications tray, since the bell icon was
already used for Prometheus alerts. Other candidates from
https://tabler.io/icons would be IconExclamationCircle or
IconDeviceDesktopExclamation or IconMessageCircleExclamation.
* The server startup alert looked a bit cramped, introduced a Stack to add
spacing between the text and the progress bar.
* Added a bit of spacing between notification text and date. Things looked
cramped. To make things look ok with that, I also top-aligned the
notification text and icon.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This switches from the prehistoric EventSource API to the more modern
fetch-event-source package. That packages gives us full control over the
retries.
It also gives us the opportunity to close the event source when the
browser tab is hidden, saving resources.
Signed-off-by: Julien <roidelapluie@o11y.eu>
This commit introduces a new `/api/v1/notifications/live` endpoint that
utilizes Server-Sent Events (SSE) to stream notifications to the web UI.
This is used to display alerts such as when a configuration reload
has failed.
I opted for SSE over WebSockets because SSE is simpler to implement and
more robust for our use case. Since we only need one-way communication
from the server to the client, SSE fits perfectly without the overhead
of establishing and maintaining a two-way WebSocket connection.
When the SSE connection fails, we go back to a classic
/api/v1/notifications API endpoint.
This commit also contains the required UI changes for the new Mantine UI.
Signed-off-by: Julien <roidelapluie@o11y.eu>
