HTML templates for initial page and graphs page

[lorenzos]

What about using HTML templates to generate the Monitorix initial page (the one with the host/graph/time form) and the graphs page?

I wanted to customize the styling a bit (table thick borders, big fonts, etc), but I noticed all HTML generation is hard-coded in Perl scripts. Unfortunately I'm a PHP developer, and I know nothing about Perl. If I was, not only I had modified my pages, but also helped developing a template system here.

[mikaku]

Hi Lorenzo,

This is indeed something that I always wanted to include in Monitorix, my problem though is the complete lack of knowledge of modern web site techniques, Bootstrap, CSS, HTML5, etc.

Currently Monitorix has a lot of different graphs stacked all they on a single page which makes, on every new graph, more and more difficult to watch them in a comfortable way. I mean, the vertical scroll is every time longer and longer, and there is no advantage of with current wider monitors.

I thought that it would be good to define some kind of base template which would make easy to watch all graphs while at the same time, let users to create their own templates and designs.

So, Lorenzo, I'm completely open to your suggestions and I look forward to make together something interesting in this way.

Thanks!

[lorenzos]

I've never wrote or read a single Perl line, but HTML/CSS/JS is quite my everyday work. I can start working on a basic page (in two versions, black and white) capable of take advantage of bigger screens. I will use a static snapshot for graphs, so I will not have to deal with your Perl scripts.

Then you can take that static page and use it filling your Perl script. Depending on the time you can put in, this can be a simple replacement for the current theme, or you can start working separating Perl code from HTML (i.e. templating).

Deal? 😎

[mikaku]

Yeah, sounds good!, my only problem is that I'm not sure how to make a template from your static page. I mean, which parts most be fixed and which others can be dynamic.

Perhaps you could introduce commentaries in the HTML code in order to help me localize the dynamic parts.

Makes sense?

[lorenzos]

Yes, I will. My idea however is that I will leave graphs size and layout as they are, just introducing a more modern graphic style and two column layout when it fits (currently graph blocks are about 860px wide, so you will have two columns for resolutions wider than 1720, i.e FullHD).

[mikaku]

Yes, the size of graphs are fixed and they need to be because the legend and data plotted are also fixed. So don't worry much on this.

I agree, the two column layout (where possible) will indeed offer a more comfortable view.
Just let me know if you need any help from my part.

Thanks.

[eds123]

Hi. I came here for the same reasons as lorenzos. I'll play around and see what I can come up with. Ideally you'd want a well commented base theme that can be easily customised by users. Using JavaScript to drag and drop graphs around would also be nice bonus. Anyway I'll get back to you.

[lorenzos]

@eds123 Thanks. I had very little time lately to work on the template, and I feel sad about it... 😭

[mikaku]

@eds123: you're very welcome to share your ideas, any feedback is greatly appreciated. As you correctly said, a well commented base theme is the idea indeed.
Thanks!

@lorenzos: yeah, coming to work after vacation is a bit stressing, a lot of new work that looks like never will be finished. Just take it easy, same here ;)

[ameiji]

As a side addition for this feature request: please do consider some navigation elements, basic menus at least (ajax reloading would seem appropriate).

[mikaku]

@ameiji, thanks for your suggestion, I guess lorenzos will take it into account.
Regards.

@lorenzos btw, how are you doing? there is something new to see?

[JaimeObregon]

+1. This reminded me of a HTML5 Bootstrap based theme I made for a different charting script. It has nothing to do with Monitorix, but at the end it's basically the same: an eye-candy wrapper for RRD charts: https://mailstats.iteisa.com

HTH. As @lorenzos, I'm fluent on frontend dev, but illiterate on Perl...

[JaimeObregon]

I've made some progress on this and came up with a modern HTML5 template based on Bootstrap, jQuery and some JavaScript. This template is easy to extend, customize and translate (it's written in English), but it will require some work in Monitorix to decouple the current embedded HTML markup from the Perl files, as @lorenzos initially suggested.

(The screenshot is from a larger add-on I've built, see https://github.com/JaimeObregon/monitorix-board

[mikaku]

@JaimeObregon,

Thanks for your ideas, they are very valuable and welcome.

I think that we should keep the current Monitorix view since it's pretty lightweight and it's perfect for people that don't want full bloated web interfaces. Instead, we should let the user choose the Monitorix web interface by setting a new option in the configuration file. Something like user_interface = classic or user_interface = modern.

The screen shot you posted looks like a more Multihost related substitute than a substitute for the main Monitorix interface. Well, I guess this is something you have in a very early stage.

Just let me know your progress on this.
Thanks

[gonace]

So how is this going? I've seen no template functionallity added to Monitorix, and it's been years since this matter where discussed?

I'm interested in building the template system for Monitorix but if my work never is merged into Monitorix then well...it's just a waste of time?

[ameiji]

@gonace Until then you may look onto collectd + grafana combo ;)

[mikaku]

@gonace, it looks like people come here with a lot of energy and ideas, ... but then such energy vanishes for any reason (jobs, family, time, no interest, etc.)

I'm interested to include a template to be able to choose between the current classic and something different created by someone. So far, no one has showed me nothing that can be accomplished in this manner.

[mikaku]

CSS has been introduced in the main page in #298
More to come ...