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>
Without this, the page that is shown first renders once with an empty path
prefix value, since the settings update takes a render cycle to complete.
However, we only fetch certain data from the API exactly once for a given
page, and not for every re-render with changed path prefix value (and we
also wouldn't want to fetch it from the wrong location initially).
This duplicates the served endpoint list once more, but exporting them from
App.tsx would also have been dirty (hot reload only works when a file only
exports one component and nothing else, thus there'd be a linter warning).
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>
Previously, scrapes durations that are very short (e.g., connection refused)
could show as empty (durations under 1 millisecond).
This commit ensures that sub-millisecond durations are correctly
displayed as "0ms" or "1ms" when necessary.
- Adjusted `humanizeDuration` to round sub-millisecond durations to the
nearest millisecond.
- Updated unit tests to verify the correct handling of sub-millisecond
values.
Signed-off-by: Julien <roidelapluie@o11y.eu>
In a non-dev build (no initial double-renders), the tree lines would not be
rendered correctly from the parent of a binop to its first child, because the
first child would be rendered before the parent, and the parent's ref hadn't
been set yet at that time. Switched from a normal ref to a callback-based ref
with explicit React state update to make sure that the child gets to know about
the parent's (later) rendered div element.
Signed-off-by: Julius Volz <julius.volz@gmail.com>
Julius Volz