[Feature Req.] Add ping graph on the status page

RisedSky commented 2 years ago

Is it a duplicate question? No

Is your feature request related to a problem? Please describe. I'm confused about the Ping graph, it is shown in the dashboard, but not in the status page next to the probe, this can be very useful

It can be in a checkbox, if the user want that feature, it checks it, and it's shown in the status page like this

hypervtechnics commented 2 years ago

I'd want to click on a monitor to see additional options. Then having all collapsed by default. I like the slim design where you can see quickly which sites are down.

chakflying commented 2 years ago

@louislam let me know if you want to go ahead with this, I can take a look 🙆🏻‍♂️

louislam commented 2 years ago

@louislam let me know if you want to go ahead with this, I can take a look 🙆🏻‍♂️

It's ok, but I would suggest to check the performance of Chart.js first. Something like would it be slow if there are 50 instances of Chart.js.

markdesilva commented 2 years ago

On this subject, I would suggest an all-monitors-heartbeat graph on the dashboard where the average of all the heartbeats (100%, 97%, 99.2%, etc) vs time is shown. Gives a clear indication of all outages over the moving time period.

I would also +1 for the suggestion on having the option of showing heartbeat or ping graph on the status page.

And also a +1 for grouping by tags.

Could we also have a user icon at the top right where user can choose light/dark/auto mode and log out. Can the dark/light mode be saved so its the same across machines and browsers? Everytime I log in from a new browser or machine, the mode goes back to light even after setting dark.

Thank you.

By the way, this hands down the best work I've seen all year! Beautiful UI and so easy to implement and use. Thank you!

RisedSky commented 2 years ago

I would suggest an all-monitors-heartbeat graph on the dashboard where the average of all the heartbeats (100%, 97%, 99.2%, etc) vs time is shown. Gives a clear indication of all outages over the moving time period.

I'm TOTALLY for THIS, this would be very cool ! Maybe an option to set it to be "30 days" history OR "all time" history ? 😄

Could we also have a user icon at the top right where user can choose light/dark/auto mode and log out. Can the dark/light mode be saved so its the same across machines and browsers? Everytime I log in from a new browser or machine, the mode goes back to light even after setting dark.

Not normal, you can set it in the settings in the dashboard for a default theme

markdesilva commented 2 years ago

Not normal, you can set it in the settings in the dashboard for a default theme

Just checked again. It doesn't stick once I close the browser and open it again and log in. And across different browsers on different machines too, it always defaults to light mode.

RisedSky commented 2 years ago

Not normal, you can set it in the settings in the dashboard for a default theme

Just checked again. It doesn't stick once I close the browser and open it again and log in. And across different browsers on different machines too, it always defaults to light mode.

It's on the status page (go to the dashboard first):

markdesilva commented 2 years ago

Hi,

Thanks.

For the status page its always dark theme, but the dashboard always reverts to light theme on different browsers and different machines and if I close the browser and reopen and log in again.

RisedSky commented 2 years ago

Hi,

Thanks.

For the status page its always dark theme, but the dashboard always reverts to light theme on different browsers and different machines and if I close the browser and reopen and log in again.

This is due to the automatic option, set to dark in the dashboard on the settings tab

grand-lotus-iroh commented 2 years ago

Maybe, when you get a chance you can add this feature request to Project Plan 20 TODO or Ideas 💡 column?

https://github.com/louislam/uptime-kuma/projects/1

si458 commented 2 years ago

wondered if we got anywhere with this request? showing the graphs would be amazing! maybe let the admin choose which graphs to show on the home page? an option in each entry 'show graph on status page' but have it disabled by default 👍 then if you have say 50 checks it would only show maybe 10 graphs of the ones you have ticked

UnclearGhostGT commented 2 years ago

I'd want to click on a monitor to see additional options. Then having all collapsed by default. I like the slim design where you can see quickly which sites are down.

I agree, having maybe a drop down button like an arrow down or something, and on click it opens the chart - or additional details - for that monitor would be great.

@louislam let me know if you want to go ahead with this, I can take a look 🙆🏻‍♂️

It's ok, but I would suggest to check the performance of Chart.js first. Something like would it be slow if there are 50 instances of Chart.js.

Would you be able to do like a load chart.js whenever the button is clicked to view the chart?

I'm thinking people wouldnt mind an extra few seconds to load the chart on the button click vs having all charts load making the entire page slow.

RisedSky commented 2 years ago

Will you work on this ? @louislam this is a good idea who gets a lot of thumbs up ☺️

InsaneSplash commented 2 years ago

I'm really excited to see the ping graphs on the customer public status page.

bitsky6 commented 1 year ago

Any update on this?

LoudSoftware commented 1 year ago

Bump

CommanderStorm commented 1 year ago

@LoudSoftware @bitsky6 @RisedSky @InsaneSplash

Please refrain from posting +1 / requests for updates things on issues, as this makes issue-management harder. Issues are for discussing what needs to be done how by whom. We use 👍🏻 on issues to prioritise work.

As always: Pull requests are welcome; This is a community-driven project

ehaughee commented 1 year ago

I've got a really rough (simple) implementation of this feature and I'm curious if I should continue down my current path.

Here's what I've got so far

I've added a <PingChart ... /> to PublicGroupList and then just added a size parameter, to the Pingchart, similar to the HeartbeatBar. Based on the string value of this.size (basically just does it === "small" right now) I adjust or disable various chart elements/properties. The number of ternary statements I've added is getting awfully close to needing another chart element/component, whether it's a subclass or a totally different component, to display this information in this context. If even a couple more modifications or features are added based on the value of this.size I think a refactor is valuable.

It seems like labeling, or some other indicator like an icon, of what the two UI elements (heartbeat and ping chart) are displaying would be useful/necessary now that there's two and not just one. Maybe some simple "Health" and "Response Time" labels or something but I'm not sure and interested in feedback.

I think I'd like to add some min, avg, max stats to the chart. Maybe 3 stacked values or AVG full height and then min/max stacked or something. There's a lot of options with hover, or dropdowns/expansions, etc. but I actually really like the simplicity of this visual and would want any additional data to be minimal and increase the visual complexity as little as possible. I think the PublicGroupList should continue to be easily scanable and not have visual density/complexity making it difficult to see, at a glance, if something is amiss.

It would be a nice addition to change the color of the graph if it exceeds a certain threshold (turns yellow if above x, red if above y) or even if it was some magnitude above the rolling average of some prior time window (example: if current window max is greater than 70% of prior x/unit-of-time window's average).

Maybe the row could just be clickable, if you're in admin mode, and that would take you to the monitor detail page for more info. All these options kind of pose the question around who is this for: the service(s) owner or the service(s) user? There's a lot of potential overlap between the two use-cases so more thought is certainly warranted.

BUT even where it's at right now, I think it provides value as an at-a-glance look at if a monitor's response time is out of the usual range. Put another way, I would be happy with this (albeit definitely interested in improvements).

Anyway, my code needs to be cleaned up, made configurable, and tested; but I wanted to check on the design/direction before doing any refinements.

CommanderStorm commented 1 year ago

Reviewing walls of texts is always difficult. If I missed something, feel free to ping.

In general, I have a preference for more, shorter pull requests, as this way changes are more focused and thus easier to follow. This approach also allows the reviewer a better view into the contributing engeneers mind => hopefully reduces defects ^^

Conceptually, I like this addition, but have a few concerns:

just adding this diagram next to the other one seems kind of counterintuitive. I think that adding this as an alternate (i.e. only displaying one diagram) might reduce visual clutter. Maybe showing the downtimes in this diagram could also be an option
adding min, avg, max stats might be tricky to do without looking cluttered. I am curious about your implementation. (An option: lets split this into another PR => making this improvement eazier to review)
different colour for threshold exceeding:
- Given that we don't support his in the other views, I would definitely push this into another PR (keeping this one reviewable).
making the row linkable should be another PR (getting merged quicker, easier to review), given that this is another issue
- related issues: https://github.com/louislam/uptime-kuma/issues/2507 https://github.com/louislam/uptime-kuma/issues/2505 https://github.com/louislam/uptime-kuma/issues/1273

ehaughee commented 1 year ago

I'm definitely on board with multiple smaller PRs. Been out of town for a bit but once I'm back I'll take a stab at adding a configuration value to swap to a ping graph here first. I am interested in your thoughts on how to show downtime in the chart. Might be representable by just a lack of datapoints but I'd need to see how visually obvious that is.

dumbasPL commented 1 year ago

Looking at some other status pages out there, almost all the ones I've seen that had ping graphs had them in a separate section. This way they are way bigger, more readable, and also allow for adding extra features like the ability to select the time frame.

Maybe we shouldn't try to cram an entire graph for every service but allow the user to pick a few services that will have their ping graphs visible in a separate section of the status page.

bitsky6 commented 1 year ago

Why not just add it as a button/switch which will expand the current service with larger graph and more info if needed instead adding to all of them.

Best Regards / Mit freundlichen Grüßen / Cordiali Saluti,

László Pető System Administrator / Network Engineer Broadcasting Specialist IT & AV Specialist

Xcontrol - Digital Experience Innovators Mönckebergstraße 13, 20095 Hamburg Web: www.xcontrol.de

From: nezu @.> Sent: Thursday, July 13, 2023 6:24:10 PM To: louislam/uptime-kuma @.> Cc: bitsky6 @.>; Mention @.> Subject: Re: [louislam/uptime-kuma] [Feature Req.] Add ping graph on the status page (#637)

Looking at some other status pages out there, almost all the ones I've seen that had ping graphs had them in a separate section. This way they are way bigger, more readable, and also allow for adding extra features like the ability to select the time frame.

Maybe we shouldn't try to cram an entire graph for every service but allow the user to pick a few services that will have their ping graphs visible in a separate section of the status page.

— Reply to this email directly, view it on GitHubhttps://github.com/louislam/uptime-kuma/issues/637#issuecomment-1634536806, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANWX344BUIX4JVSRWOOVD6LXQAOKVANCNFSM5FWU4KIQ. You are receiving this because you were mentioned.Message ID: @.***>

ehaughee commented 1 year ago

The more I think about this issue, the more I think the status page should just have service rows be links to their dashboard pages. Any other option adds visual complexity (in the case of having the chart on each service) or just duplicates a portion of the dashboard (in the case of having an accordion/dropdown).

Not only is that implementation the simplest, but it's the same amount of clicks as a dropdown, has no performance implications for the page (don't have to worry about lazy-loading chartjs), and adds no visual complexity.

There does seem to be appetite for some sort of visibility into response time on the status page but I'm becoming more sure a chart on the status page is not the right way to provide that.

tanglu1323123 commented 1 year ago

I've got a really rough (simple) implementation of this feature and I'm curious if I should continue down my current path.

Here's what I've got so far

I've added a to and then just added a parameter, to the , similar to the . Based on the string value of (basically just does it right now) I adjust or disable various chart elements/properties. The number of ternary statements I've added is getting awfully close to needing another chart element/component, whether it's a subclass or a totally different component, to display this information in this context. If even a couple more modifications or features are added based on the value of I think a refactor is valuable.<PingChart ... />``PublicGroupList``size``Pingchart``HeartbeatBar``this.size``=== "small"``this.size

It seems like labeling, or some other indicator like an icon, of what the two UI elements (heartbeat and ping chart) are displaying would be useful/necessary now that there's two and not just one. Maybe some simple "Health" and "Response Time" labels or something but I'm not sure and interested in feedback.

I think I'd like to add some min, avg, max stats to the chart. Maybe 3 stacked values or AVG full height and then min/max stacked or something. There's a lot of options with hover, or dropdowns/expansions, etc. but I actually really like the simplicity of this visual and would want any additional data to be minimal and increase the visual complexity as little as possible. I think the should continue to be easily scanable and not have visual density/complexity making it difficult to see, at a glance, if something is amiss.PublicGroupList

It would be a nice addition to change the color of the graph if it exceeds a certain threshold (turns yellow if above x, red if above y) or even if it was some magnitude above the rolling average of some prior time window (example: if current window max is greater than 70% of prior x/unit-of-time window's average).

Maybe the row could just be clickable, if you're in admin mode, and that would take you to the monitor detail page for more info. All these options kind of pose the question around who is this for: the service(s) owner or the service(s) user? There's a lot of potential overlap between the two use-cases so more thought is certainly warranted.

BUT even where it's at right now, I think it provides value as an at-a-glance look at if a monitor's response time is out of the usual range. Put another way, I would be happy with this (albeit definitely interested in improvements).

Anyway, my code needs to be cleaned up, made configurable, and tested; but I wanted to check on the design/direction before doing any refinements.

Hi, how can I set like yours ? I really like and need that :)

vincejv commented 11 months ago

@tanglu1323123 if anyone's still interested in this, just get telegraf + ping input or http input then visualize it with grafana, then you get your graph. Use this grafana dashboard as a start https://grafana.com/grafana/dashboards/15225-ping-network-uptime/

Given this request has gone unimplemented for 2yrs+ might as well move to another platform that suites your needs

RisedSky commented 11 months ago

@tanglu1323123 if anyone's still interested in this, just get telegraf + ping input or http input then visualize it with grafana, then you get your graph. Use this grafana dashboard as a start https://grafana.com/grafana/dashboards/15225-ping-network-uptime/

Given this request has gone unimplemented for 2yrs+ might as well move to another platform that suites your needs

We shouldn't have this type of other program on the go. We should instead have this directly in the product

RyderCragie commented 8 months ago

Why not just add it as a button/switch which will expand the current service with larger graph and more info if needed instead adding to all of them.

I agree. Less to render = quicker load times. Only show it if the user requests it.

kobayashi90 commented 8 months ago

Welp, how is this Feature req. sitting on the backseat, its basically what this statuspage system needs. Please make it happen already.

CommanderStorm commented 8 months ago

how is this Feature req. sitting on the backseat.

As with all other open-source projects, we rely on contributions. Our contribution guide can be found here. If that is not possible, you could consider supporting us at https://opencollective.com/uptime-kuma

Please make it happen already

This issue contains multiple smaller sub-issues. Some of them require a lot more changes than others.

What improvements are currently either planned or already in the next releases can be found here. Examples of shipping sub-features are the improvements to min, max, avg on charts in v2.0. Note that a lot of maintainer effort is currently going into performance fixes ⇒ v2.0 will include a lot of effort on this front.

dponzone commented 7 months ago

+1 on that

Exploring Kuma, the first thing I noticed about status pages was this limitation. If I want to use them to give access to a customer or a partner, they will be informed about the status of a service, but not the specific values.

louislam / uptime-kuma