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>
