From mboxrd@z Thu Jan 1 00:00:00 1970 From: Michael Tremer To: development@lists.ipfire.org Subject: Re: [PATCH] GUI: Periodically reload RRD graphs Date: Tue, 16 Mar 2021 15:35:00 +0000 Message-ID: In-Reply-To: <050e76a7-193d-e982-1869-fcbba6cd092f@ipfire.org> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============4658663251051353576==" List-Id: --===============4658663251051353576== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable So happy to see the teamwork here :) > On 16 Mar 2021, at 08:37, Adolf Belka wrote: >=20 > Hi all, >=20 > On 15/03/2021 22:47, Leo Hofmann wrote: >> Hi, >>=20 >> Am 14.03.2021 um 12:44 schrieb Jonatan Schlag: >>> Hi, >>>=20 >>>=20 >>>> Am 12.03.2021 um 14:41 schrieb Leo Hofmann : >>>>=20 >>>> =EF=BB=BFHi, >>>>=20 >>>>> Am 10.03.2021 um 14:49 schrieb Michael Tremer: >>>>> Hello, >>>>>=20 >>>>>>> On 10 Mar 2021, at 12:29, Jonatan Schlag wrote: >>>>>> Hi, >>>>>>=20 >>>>>>> Am 08.03.2021 um 20:21 schrieb Leo-Andres Hofmann : >>>>>>>=20 >>>>>>> =EF=BB=BFThe RRD graphs are embedded in an iframe tag. >>>>>> Do know why? Just wondering why we put an iFrame tag around the image.= Should it no be possible to reload the image without an iFrame? >>>>> Very good question. I think this is because we needed a way to change o= nly the image and JS wasn=E2=80=99t an option back then. The tag allowed = to specify a target which changed the content of the iframe. >>>>>=20 >>>>> I would absolutely prefer to get rid of it and just use one or multiple= img tags. Those would also make styling easier. >>>> I would also prefer the image tag. But as far as I know, there is no way= to change the image without javascript. >>> The only way I came up with is to send the values of all graphs with the = request and to change to content of the img tag at the server in the Perl scr= ipt. But this solution has so many culprits and couple things in a way a woul= d like to avoid. >> I could not think of a better solution either. But I think this would be e= ven worse than the existing iframes. >>>>>>> Therefore it is possible >>>>>>> to refresh them periodically without reloading or changing the pages. >>>>>>> This patch adds a graph reload javascript to the ipfire main theme. >>>>>>>=20 >>>>>>> Signed-off-by: Leo-Andres Hofmann >>>>>>> --- >>>>>>>=20 >>>>>> =E2=AC=87=EF=B8=8F This part which is not really part of the commit me= ssage, can be put before an patch using the =E2=80=94compose option :-). >>>>> Yes this is brilliant :) >>>> Thanks! This time I used -annotate to fit everything in one e-mail, I'll= try -compose next time. >>>>>>> Hi, >>>>>>>=20 >>>>>>> This is more of a nice-to-have, an idea I would like to present. >>>>>>> As I was working on the QoS graphs, I noticed that all RRD graphs are= embedded in an iframe. >>>>>>> I wrote a little javascript that periodically reloads these graphs. >>>>>> Would it not be sufficient to reload only the hourly graph? So all oth= ers have a range where I would not assume somebody to monitor them =E2=80=9Cl= ive=E2=80=9C. >>>> I think the daily graph might be interesting as well. But for the other = ranges I agree with you, they can be left out. >>>>>>> The refresh interval is based on the graph's time range, i.e. hourly = graphs are refreshed more often. >>>>>>> Reloading should stop in case of a network error, but I haven't fully= tested this yet. >>>>>>>=20 >>>>>>> This patch adds a checkbox to the GUI settings (default: disabled), t= ranslations, ... >>>>>>> If you just want to try the javascript, you can simply paste it to th= e html in >>>>>>> html/themes/ipfire/include/functions.pl. Be sure to escape the '$' th= en. >>>>>>>=20 >>>>>>> Best regards >>>>>>> Leo >>>>>>>=20 >>>>>>> doc/language_issues.en | 1 + >>>>>>> doc/language_issues.es | 1 + >>>>>>> doc/language_issues.fr | 1 + >>>>>>> doc/language_issues.it | 1 + >>>>>>> doc/language_issues.nl | 1 + >>>>>>> doc/language_issues.pl | 1 + >>>>>>> doc/language_issues.ru | 1 + >>>>>>> doc/language_issues.tr | 1 + >>>>>>> doc/language_missings | 7 ++ >>>>>>> html/cgi-bin/gui.cgi | 16 ++++ >>>>>>> html/html/themes/ipfire/include/functions.pl | 7 ++ >>>>>>> .../themes/ipfire/include/js/reloadGraphs.js | 81 +++++++++++++++++++ >>>>>>> langs/de/cgi-bin/de.pl | 1 + >>>>>>> langs/en/cgi-bin/en.pl | 1 + >>>>>>> 14 files changed, 121 insertions(+) >>>>>>> create mode 100644 html/html/themes/ipfire/include/js/reloadGraphs.js >>>>>>>=20 >>>>>>> diff --git a/doc/language_issues.en b/doc/language_issues.en >>>>>>> index 7819541c2..9edc57d19 100644 >>>>>>> --- a/doc/language_issues.en >>>>>>> +++ b/doc/language_issues.en >>>>>>> @@ -1446,6 +1446,7 @@ WARNING: untranslated string: password not set = =3D Password not set. >>>>>>> WARNING: untranslated string: password too short =3D Password is too = short. >>>>>>> WARNING: untranslated string: passwords do not match =3D Passwords do= not match. >>>>>>> WARNING: untranslated string: percentage =3D Percentage >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: persistent =3D Persistent >>>>>>> WARNING: untranslated string: pfs yes no =3D Perfect Forward Secrecy = (PFS) >>>>>>> WARNING: untranslated string: pkcs12 file password =3D PKCS12 File Pa= ssword >>>>>>> diff --git a/doc/language_issues.es b/doc/language_issues.es >>>>>>> index 952321fbe..3d623302c 100644 >>>>>>> --- a/doc/language_issues.es >>>>>>> +++ b/doc/language_issues.es >>>>>>> @@ -1318,6 +1318,7 @@ WARNING: untranslated string: pakfire tree =3D = Repository >>>>>>> WARNING: untranslated string: pakfire tree stable =3D Stable >>>>>>> WARNING: untranslated string: pakfire tree testing =3D Testing >>>>>>> WARNING: untranslated string: pakfire tree unstable =3D Unstable >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: please reboot to apply your changes =3D= Please reboot to apply your changes >>>>>>> WARNING: untranslated string: pptp netconfig =3D My Net Config >>>>>>> WARNING: untranslated string: pptp peer =3D Peer >>>>>>> diff --git a/doc/language_issues.fr b/doc/language_issues.fr >>>>>>> index 9fe5ca21c..e3a38df4e 100644 >>>>>>> --- a/doc/language_issues.fr >>>>>>> +++ b/doc/language_issues.fr >>>>>>> @@ -914,6 +914,7 @@ WARNING: untranslated string: guardian logtarget_= syslog =3D unknown string >>>>>>> WARNING: untranslated string: guardian no entries =3D unknown string >>>>>>> WARNING: untranslated string: guardian service =3D unknown string >>>>>>> WARNING: untranslated string: pakfire ago =3D ago. >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: route config changed =3D unknown string >>>>>>> WARNING: untranslated string: routing config added =3D unknown string >>>>>>> WARNING: untranslated string: routing config changed =3D unknown stri= ng >>>>>>> diff --git a/doc/language_issues.it b/doc/language_issues.it >>>>>>> index 29c9c7d58..a66c693b0 100644 >>>>>>> --- a/doc/language_issues.it >>>>>>> +++ b/doc/language_issues.it >>>>>>> @@ -1108,6 +1108,7 @@ WARNING: untranslated string: pakfire tree =3D = Repository >>>>>>> WARNING: untranslated string: pakfire tree stable =3D Stable >>>>>>> WARNING: untranslated string: pakfire tree testing =3D Testing >>>>>>> WARNING: untranslated string: pakfire tree unstable =3D Unstable >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: please reboot to apply your changes =3D= Please reboot to apply your changes >>>>>>> WARNING: untranslated string: pptp netconfig =3D My Net Config >>>>>>> WARNING: untranslated string: pptp peer =3D Peer >>>>>>> diff --git a/doc/language_issues.nl b/doc/language_issues.nl >>>>>>> index d6cad0dee..a2b978ccc 100644 >>>>>>> --- a/doc/language_issues.nl >>>>>>> +++ b/doc/language_issues.nl >>>>>>> @@ -1140,6 +1140,7 @@ WARNING: untranslated string: pakfire tree =3D = Repository >>>>>>> WARNING: untranslated string: pakfire tree stable =3D Stable >>>>>>> WARNING: untranslated string: pakfire tree testing =3D Testing >>>>>>> WARNING: untranslated string: pakfire tree unstable =3D Unstable >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: please reboot to apply your changes =3D= Please reboot to apply your changes >>>>>>> WARNING: untranslated string: pptp netconfig =3D My Net Config >>>>>>> WARNING: untranslated string: pptp peer =3D Peer >>>>>>> diff --git a/doc/language_issues.pl b/doc/language_issues.pl >>>>>>> index b8fba938f..7f2b72cc0 100644 >>>>>>> --- a/doc/language_issues.pl >>>>>>> +++ b/doc/language_issues.pl >>>>>>> @@ -1327,6 +1327,7 @@ WARNING: untranslated string: pakfire tree =3D = Repository >>>>>>> WARNING: untranslated string: pakfire tree stable =3D Stable >>>>>>> WARNING: untranslated string: pakfire tree testing =3D Testing >>>>>>> WARNING: untranslated string: pakfire tree unstable =3D Unstable >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: please reboot to apply your changes =3D= Please reboot to apply your changes >>>>>>> WARNING: untranslated string: pptp netconfig =3D My Net Config >>>>>>> WARNING: untranslated string: pptp peer =3D Peer >>>>>>> diff --git a/doc/language_issues.ru b/doc/language_issues.ru >>>>>>> index d507911f1..f988580cf 100644 >>>>>>> --- a/doc/language_issues.ru >>>>>>> +++ b/doc/language_issues.ru >>>>>>> @@ -1322,6 +1322,7 @@ WARNING: untranslated string: pakfire tree =3D = Repository >>>>>>> WARNING: untranslated string: pakfire tree stable =3D Stable >>>>>>> WARNING: untranslated string: pakfire tree testing =3D Testing >>>>>>> WARNING: untranslated string: pakfire tree unstable =3D Unstable >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: please reboot to apply your changes =3D= Please reboot to apply your changes >>>>>>> WARNING: untranslated string: pptp netconfig =3D My Net Config >>>>>>> WARNING: untranslated string: pptp peer =3D Peer >>>>>>> diff --git a/doc/language_issues.tr b/doc/language_issues.tr >>>>>>> index 04343d527..dc0fd98f0 100644 >>>>>>> --- a/doc/language_issues.tr >>>>>>> +++ b/doc/language_issues.tr >>>>>>> @@ -1021,6 +1021,7 @@ WARNING: untranslated string: pakfire tree =3D = Repository >>>>>>> WARNING: untranslated string: pakfire tree stable =3D Stable >>>>>>> WARNING: untranslated string: pakfire tree testing =3D Testing >>>>>>> WARNING: untranslated string: pakfire tree unstable =3D Unstable >>>>>>> +WARNING: untranslated string: periodically reload graphs =3D Periodi= cally refresh RRD graphs >>>>>>> WARNING: untranslated string: please reboot to apply your changes =3D= Please reboot to apply your changes >>>>>>> WARNING: untranslated string: processor vulnerability mitigations =3D= Processor Vulnerability Mitigations >>>>>>> WARNING: untranslated string: ptr =3D PTR >>>>>>> diff --git a/doc/language_missings b/doc/language_missings >>>>>>> index f10c4f242..89808f3b5 100644 >>>>>>> --- a/doc/language_missings >>>>>>> +++ b/doc/language_missings >>>>>>> @@ -669,6 +669,7 @@ >>>>>>> < pakfire tree stable >>>>>>> < pakfire tree testing >>>>>>> < pakfire tree unstable >>>>>>> +< periodically reload graphs >>>>>>> < please reboot to apply your changes >>>>>>> < pptp netconfig >>>>>>> < pptp peer >>>>>>> @@ -922,6 +923,7 @@ >>>>>>> < dhcp valid range required when deny known clients checked >>>>>>> < g.dtm >>>>>>> < g.lite >>>>>>> +< periodically reload graphs >>>>>>> < token >>>>>>> < token not set >>>>>>> < upload fcdsl.o >>>>>>> @@ -1198,6 +1200,7 @@ >>>>>>> < pakfire tree stable >>>>>>> < pakfire tree testing >>>>>>> < pakfire tree unstable >>>>>>> +< periodically reload graphs >>>>>>> < please reboot to apply your changes >>>>>>> < pptp netconfig >>>>>>> < pptp peer >>>>>>> @@ -1632,6 +1635,7 @@ >>>>>>> < pakfire tree stable >>>>>>> < pakfire tree testing >>>>>>> < pakfire tree unstable >>>>>>> +< periodically reload graphs >>>>>>> < please reboot to apply your changes >>>>>>> < pptp netconfig >>>>>>> < pptp peer >>>>>>> @@ -2407,6 +2411,7 @@ >>>>>>> < pakfire tree stable >>>>>>> < pakfire tree testing >>>>>>> < pakfire tree unstable >>>>>>> +< periodically reload graphs >>>>>>> < please reboot to apply your changes >>>>>>> < pptp netconfig >>>>>>> < pptp peer >>>>>>> @@ -3297,6 +3302,7 @@ >>>>>>> < pakfire tree stable >>>>>>> < pakfire tree testing >>>>>>> < pakfire tree unstable >>>>>>> +< periodically reload graphs >>>>>>> < please reboot to apply your changes >>>>>>> < pptp netconfig >>>>>>> < pptp peer >>>>>>> @@ -3660,6 +3666,7 @@ >>>>>>> < pakfire tree stable >>>>>>> < pakfire tree testing >>>>>>> < pakfire tree unstable >>>>>>> +< periodically reload graphs >>>>>>> < please reboot to apply your changes >>>>>>> < processor vulnerability mitigations >>>>>>> < ptr >>>>>>> diff --git a/html/cgi-bin/gui.cgi b/html/cgi-bin/gui.cgi >>>>>>> index f06b0f923..a5255dbce 100644 >>>>>>> --- a/html/cgi-bin/gui.cgi >>>>>>> +++ b/html/cgi-bin/gui.cgi >>>>>>> @@ -37,6 +37,7 @@ my $errormessage=3D''; >>>>>>>=20 >>>>>>>=20 >>>>>>> $cgiparams{'SPEED'} =3D 'off'; >>>>>>> +$cgiparams{'RELOADGRAPHS'} =3D 'off'; >>>>>>> $cgiparams{'WINDOWWITHHOSTNAME'} =3D 'off'; >>>>>>> $cgiparams{'REFRESHINDEX'} =3D 'off'; >>>>>>> $cgiparams{'ACTION'} =3D ''; >>>>>>> @@ -88,6 +89,7 @@ if ($cgiparams{'ACTION'} eq "$Lang::tr{'save'}") >>>>>>> $mainsettings{'WINDOWWITHHOSTNAME'} =3D $cgiparams{'WINDOWWITHHOST= NAME'}; >>>>>>> $mainsettings{'PPPUPDOWNBEEP'} =3D $cgiparams{'PPPUPDOWNBEEP'}; >>>>>>> $mainsettings{'SPEED'} =3D $cgiparams{'SPEED'}; >>>>>>> + $mainsettings{'RELOADGRAPHS'} =3D $cgiparams{'RELOADGRAPHS'}; >>>>>>> $mainsettings{'THEME'} =3D $cgiparams{'theme'}; >>>>>>> $mainsettings{'REFRESHINDEX'} =3D $cgiparams{'REFRESHINDEX'}; >>>>>>> &General::writehash("${General::swroot}/main/settings", \%mainsetting= s); >>>>>>> @@ -125,6 +127,11 @@ if ($cgiparams{'ACTION'} eq "$Lang::tr{'save'}") >>>>>>> # by manually setting the var to off >>>>>>> $cgiparams{'SPEED'} =3D 'on'; >>>>>>> } >>>>>>> + if($mainsettings{'RELOADGRAPHS'}) { >>>>>>> + $cgiparams{'RELOADGRAPHS'} =3D $mainsettings{'RELOADGRAPHS'}; >>>>>>> + } else { >>>>>>> + $cgiparams{'RELOADGRAPHS'} =3D 'off'; >>>>>>> + } >>>>>>> } >>>>>>>=20 >>>>>>> # Default settings >>>>>>> @@ -134,6 +141,7 @@ if ($cgiparams{'ACTION'} eq "$Lang::tr{'restore d= efaults'}") >>>>>>> $cgiparams{'PPPUPDOWNBEEP'} =3D 'on'; >>>>>>> $cgiparams{'REFRESHINDEX'} =3D 'off'; >>>>>>> $cgiparams{'SPEED'} =3D 'on'; >>>>>>> + $cgiparams{'RELOADGRAPHS'} =3D 'off'; >>>>>>> $cgiparams{'THEME'} =3D 'ipfire'; >>>>>>> } >>>>>>>=20 >>>>>>> @@ -153,6 +161,10 @@ $checked{'SPEED'}{'off'} =3D ''; >>>>>>> $checked{'SPEED'}{'on'} =3D ''; >>>>>>> $checked{'SPEED'}{$cgiparams{'SPEED'}} =3D "checked=3D'checked'"; >>>>>>>=20 >>>>>>> +$checked{'RELOADGRAPHS'}{'off'} =3D ''; >>>>>>> +$checked{'RELOADGRAPHS'}{'on'} =3D ''; >>>>>>> +$checked{'RELOADGRAPHS'}{$cgiparams{'RELOADGRAPHS'}} =3D "checked=3D= 'checked'"; >>>>>>> + >>>>>>> &Header::openpage($Lang::tr{'gui settings'}, 1, ''); >>>>>>> &Header::openbigbox('100%', 'left', '', $errormessage); >>>>>>>=20 >>>>>>> @@ -179,6 +191,10 @@ print <>>>>>> >>>>>>> >>>>>>> + >>>>>>> + >>>>>>> + $Lang::tr{'periodically reload graphs'} >>>>>>> + >>>>>>> >>>>>>> >>>>>>> $Lang::tr{'languagepurpose'} >>>>> Does this actually need configuration or can we not simply enable this = for everyone? >>>>>=20 >>>>> What is the downside? If the browser has JS disabled, simply nothing wo= uld happen. >>>> I don't see any disadvantages, I just thought that some users might not = like it. >>> Would a solution be to add a button to toogle instead? So a button next t= o each graph to enable something like a live mode? This would not change any = existing behaviour. >> I added a button to the top row. I think that looks good :) >>>>>>> diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html= /themes/ipfire/include/functions.pl >>>>>>> index 9aec77497..7f3401119 100644 >>>>>>> --- a/html/html/themes/ipfire/include/functions.pl >>>>>>> +++ b/html/html/themes/ipfire/include/functions.pl >>>>>>> @@ -147,6 +147,13 @@ END >>>>>>> ; >>>>>>> } >>>>>>>=20 >>>>>>> +if ($settings{'RELOADGRAPHS'} eq 'on') { >>>>>>> +print <>>>>>> +