dash.html

[tnyeanderson]

Summary

Multi-Host custom dashboard: dash.html is a single-file solution to show graphs, charts, and alarms from all streamed hosts on one page. It takes one defined set of graphs and charts and replicates it for each host. It is quite simple, but quite effective.

Component Name

Custom Dashboards

Additional Information

I am open to ideas for improvement, but I want other people to have this because it fills a perfect void in Netdata's usability. Navigating between pages for each streamed host is very inconvenient.

I am not interested in Netdata Cloud. This is self-hosted.

[CLAassistant]

All committers have signed the CLA.

[ilyam8]

Multi-Host custom dashboard: dash.html is a single-file solution to show graphs, charts, and alarms from all streamed hosts on one page

could you provide some screenshots? 🤔

[tnyeanderson]

Some info censored.

This uses https://github.com/vishalok12/jquery-dragarrange (for now, but this will probably be removed for a more bespoke solution). It is MIT licensed. Is that compatible?

[tnyeanderson]

To be clear, this is NOT supposed to be a solution that is heavily maintained by the devs, this is just an "example" custom dashboard that folks can use/modify to fit their needs. I made it for my purposes, but I realize this is probably a feature (all hosts on one dashboard) that others will want, and I figure this is the best place for it as it will get the most visibility.

[cakrit]

This is interesting, I think a lot of people will like it, until we offer the proper custom dashboards via netdata.cloud. There are a few things that I believe need to be improved before we can merge:

• White backgrounds in the chart buttons and legends need to be fixed.
• The default setting for both URLs should be http://localhost:19999, so that it can work out of the box
• We should have an entry in Makefile.am that results in the file getting copied to the web directory upon installation (same as tv.html). Also not sure if we should have the file under custom directory, it does make sense, but tv.html isn't there.
• The instructions should be to copy dash.html to a different filename, so that the file doesn't get overwritten.
• The instructions should mention how to change the sizes (it's trivial, I know, but it's good to put it there)
• The top right balloon with the alarm is a bit too large. I also see a single red-like color, which is a bit misleading, when we only have alarms in warning. The ideal solution for this is two smaller balloons, one for critical and one for warnings, as we have in the nodes view.
• I don't get that strange netdata logo in the page, it's not something we have. Better use one of our existing logos under web/gui, if you need it at all.

[ilyam8]

The whole alarm/host menu is to big imo. Huge font size, huge rectangles.

[tnyeanderson]

@cakrit great suggestions. I've been making some incremental improvements since this PR was submitted, so I will work on all of those things and get back with another commit.

Not sure what you mean by the netdata logo? I didn't put any images at all in there, it just loads graphs/charts/alarm badges from each host.... I don't see what you're talking about in the screenshots... could you point it out? Happy to throw a netdata logo in there for branding (maybe at the bottom of the alarms sidebar?)

To clarify, you want a both a yellow balloon and a red balloon for the alarm indicator? So if there are both warnings and alarms, both will show? Hm.... my thought was the indicator "light" would be binary, to tell you whether there is something to check or not. Green is good, red means you got something to look at, gray means not loaded yet.... but I can see how having the yellow for warnings could be useful.

@ilyam8 happy to make the fonts in the alarms section smaller. Do you have a design recommendation? Each rectangle is a host, so I'm not sure how to use less rectangles...

[tnyeanderson]

Also if someone could send a screenshot of the Nodes view alarm balloons, that would be great. I don't have access to netdata cloud so I cannot see them. Thanks all!

[cakrit]

Not sure what you mean by the netdata logo?

It's this thing, below, I think it may appear on error or something. I killed netdata to make it appear this time:

Green is good, red means you got something to look at, gray means not loaded yet

You can make it red if there's at least one alarm in a critical state and orange if all the raised alarms are warnings, then you can stick with a single balloon.

[tnyeanderson]

I see. I will likely keep it as one indicator balloon, with it showing orange if all alarms are warnings, as you described.

I see what you are talking about now. I didn't add that image in there, it appears to be a byproduct of loading the graphs.... Most I could do is hide it until the graphs load, but that would probably be better solved at the API level, rather than here (if that's something we want).

I'll get started on all that tonight, hopefully will have a new commit by the end of the week that gets this right! Thanks to everyone for the guidance.

[tnyeanderson]

Still don't know how we want to go about getting rid of the netdata logo. I haven't investigated to see where it comes from in the API.

This should fix everything @cakrit suggested except for the logo. Hope the alarms look prettier, let me know if you see anything you want improved!

[tnyeanderson]

These new commits remove https://github.com/vishalok12/jquery-dragarrange as a dependency, instead using a solution created by be, minified and inline, to reorder/hide hosts. Anyone may of course use or modify this code for any purpose at all, and its unminified source code will be released on my github in the coming days. It was placed inline to keep it as a single-file solution. Minified to save space for what is essentially a plugin.

There are also a few bug fixes here. Hope the team likes it!

[tnyeanderson]

[cakrit]

So @tnyeanderson it's ready for another set of reviews, or are you working on more changes?

[tnyeanderson]

Should be good to review, those are all the changes I wanted to see. Still haven't fixed the logo issue, but it should be fixed elsewhere in my view. Not sure why Travis failed?

[cakrit]

I only see a few minor issues now:

• We can't really resize the charts with the up/down arrows at the bottom right, when we increase the height, it just covers the next chart (this will probably be tricky for you to change though, perhaps it's not worth the trouble, not sure if there's a way to disable/hide that button).
• The internal background of those dials at the bottom is still white. I can't blame you, I spent 10min trying to find what gives them their grey color and couldn't. It would still be nice if you could find the way to fix it.
• I'm not sure about just having the minified embedded JS to tell you the truth. It's a bit cryptic like this. Perhaps include the source and a minified version of it in a js file or just leave the source inline?
• Collapsing the right side by clicking on the grey vertical bar is a bit counter-intuitive, I tried clicking in various places until I got that that's you do it.

I do like it overall though, I just haven't tested with many slaves yet, to see it in all it's glory! :)

[cakrit]

As for Travis failure, it's unrelated to this PR. @paulkatsoulakis is trying to sort it out.

[tnyeanderson]

Thank you very much for the feedback:

• The reason for this is that the height is set by the config variable. The reason it is set that way is so that if a graph fails to load, the vertical space is still occupied to ensure that other graphs will maintain horizontal alignment between hosts. I think I will simply hide those buttons rather than try to make that work. I didn't even think of this issue so thank you!
• I will try my best to figure out the white background on the dials
• I also hate having it minified and inline, so in my mind we have two options:
  • Unminify it, but keep it in the same file (less cryptic, but it will take up an additional ~300 lines. My preferred option)
  • Keep it in a separate, unminified file that is sourced on the page. This makes it NOT a single file solution anymore :(
• Yes the gray line is a little unintuitive. I tried to make it more obvious by having it change color on hover, but it appears that isn't clear enough. I could make the line a little wider and add a > icon to it to imply that it collapses the sidebar. Perhaps @ilyam8 has a suggestion for this design?

I'm glad you like it so far!

[tnyeanderson]

• Hid the button for resizing graphs
• Fixed chart backgrounds
• Placed unminified source inline
• Changed as shown:

Ready for review!

[tnyeanderson]

Sorry for the muddy waters, and many thanks to @ilyam8 for being so patient with me. Should be ready for an actual review now!

[netdatabot]

This pull request introduces 2 alerts when merging b06f53f into 1a4e81c - view on LGTM.com

new alerts:

• 2 for Expression has no effect

---

Warning - Automated code review for netdata/netdata will be disabled on October 1, 2019. You can avoid this by installing the LGTM.com GitHub App. Read about the benefits of migrating to GitHub Apps in the blog.

---

Comment posted by LGTM.com

[tnyeanderson]

Any word here? Should be ready for review! 😃

[cakrit]

I'm merging. Thanks @tnyeanderson !