Customizable range for HP bar and graph

[RixzZ]

Is it a duplicate question?
No.

Is your feature request related to a problem? Please describe.
No.

Describe the solution you'd like
Currently the HP bar and graph (recently added) shows a predetermined range of time. I'm missing a great feature of Grafana, that allows you to specify the range of the data considered to generate that graphs.

Grafana also allows panning and zooming on the graph, which are great controls for changing the ranges without having to input datetime strings manually.

Describe alternatives you've considered
I saw that support for Prometheus is ready or on the way, so you could use that data on Grafana or similar apps. Anyway, since the app provides the HP bar and graph, I could be a good addition.

Additional context
N/A

[chakflying]

Without making the UI too complicated, I think it would be easy enough to add a dropdown for selecting some preset time ranges for the graph. Allowing for panning and zooming would have a much bigger performance impact since we would need arbitrary range query from the database.

Also, I don't quite see the feasibility of scaling the bar, since each block represents a heartbeat, the time range already depends on the Heartbeat Interval that you set.

[RixzZ]

Maybe panning and zooming is a bit too much then, but simply the ability to select a few ranges makes it a lot better.-

In the HP bar case, maybe I mixed two things that doesn't serve the same purpose. I get that the HP bar should always show the last X checks, unlike the graph that could use the ability to view the history.

The HP bar could use a setting for selecting how many blocks it shows. There are two options that occurs to me as a possibility:

• Making the blocks thinner or thicker depending on the number of them and the available space (on the screen).
• Allowing the user to select between 1 or more lines of heartbeats, which can be combined with the previous point of by itself.

Both of this options may need considerable tinkering with CSS to make it fit in most screens.

[proffalken]

@RixzZ - the best way to achieve this IMO is probably to use the data exported via the /metrics URI for Prometheus.

There's a risk that as features like this are added to Uptime Kuma it becomes another unwieldy monitoring solution, whereas at the moment it's very much a "do one thing and do it well".

I've already created a sample grafana dashboard that you can install and it will pull the metrics from Prometheus, and as Prometheus happily runs on [a Raspberry Pi](https://pimylifeup.com/raspberry-pi-prometheus/ or in a docker container then it should be pretty straight forward to get up and running.

In short, I'd personally rather see Uptime Kuma focus on monitoring uptime and leaving the "heavy lifting" when it comes to long-term data storage and analysis to existing tools that are designed to do exactly that.

[RixzZ]

@proffalken Yeah, I see your point.

In any case, if the app is self-sufficient for tracking a short time-frame of history, it could avoid the usage of a full stack of analytics services for most users that don't use the app in a professional environment.

The HP bar thingy, on the second approach (the first one misinterpreted what that bar is intended for) is simply a customization option, nothing essential for usage.

[proffalken]

I'd definitely support an addition to the UI where hovering over the HP bar on the home-page highlights the entry on the list of events on the right-hand side, that sounds really useful...