From mboxrd@z Thu Jan 1 00:00:00 1970 From: Adolf Belka To: development@lists.ipfire.org Subject: Re: [PATCH] GUI: Periodically reload RRD graphs Date: Tue, 16 Mar 2021 09:37:16 +0100 Message-ID: <050e76a7-193d-e982-1869-fcbba6cd092f@ipfire.org> In-Reply-To: <513a2083-77a3-bd4c-f1cc-d461625c0554@leo-andres.de> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============3859560406961448217==" List-Id: --===============3859560406961448217== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Hi all, On 15/03/2021 22:47, Leo Hofmann wrote: > Hi, > > Am 14.03.2021 um 12:44 schrieb Jonatan Schlag: >> Hi, >> >> >>> Am 12.03.2021 um 14:41 schrieb Leo Hofmann : >>> >>> =EF=BB=BFHi, >>> >>>> Am 10.03.2021 um 14:49 schrieb Michael Tremer: >>>> Hello, >>>> >>>>>> On 10 Mar 2021, at 12:29, Jonatan Schlag=20 >>>>>> wrote: >>>>> Hi, >>>>> >>>>>> 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=20 >>>>> image. Should it no be possible to reload the image without an=20 >>>>> iFrame? >>>> Very good question. I think this is because we needed a way to=20 >>>> change only the image and JS wasn=E2=80=99t an option back then. The = =20 >>>> tag allowed to specify a target which changed the content of the=20 >>>> iframe. >>>> >>>> I would absolutely prefer to get rid of it and just use one or=20 >>>> 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=20 >>> way to change the image without javascript. >> The only way I came up with is to send the values of all graphs with=20 >> the request and to change to content of the img tag at the server in=20 >> the Perl script. But this solution has so many culprits and couple=20 >> things in a way a would like to avoid. > I could not think of a better solution either. But I think this would=20 > be even worse than the existing iframes. >>>>>> Therefore it is possible >>>>>> to refresh them periodically without reloading or changing the=20 >>>>>> pages. >>>>>> This patch adds a graph reload javascript to the ipfire main theme. >>>>>> >>>>>> Signed-off-by: Leo-Andres Hofmann >>>>>> --- >>>>>> >>>>> =E2=AC=87=EF=B8=8F This part which is not really part of the commit mes= sage, can=20 >>>>> 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,=20 >>> I'll try -compose next time. >>>>>> Hi, >>>>>> >>>>>> 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=20 >>>>>> 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=20 >>>>> others have a range where I would not assume somebody to monitor=20 >>>>> them =E2=80=9Clive=E2=80=9C. >>> I think the daily graph might be interesting as well. But for the=20 >>> other ranges I agree with you, they can be left out. >>>>>> The refresh interval is based on the graph's time range, i.e.=20 >>>>>> hourly graphs are refreshed more often. >>>>>> Reloading should stop in case of a network error, but I haven't=20 >>>>>> fully tested this yet. >>>>>> >>>>>> This patch adds a checkbox to the GUI settings (default:=20 >>>>>> disabled), translations, ... >>>>>> If you just want to try the javascript, you can simply paste it=20 >>>>>> to the html in >>>>>> html/themes/ipfire/include/functions.pl. Be sure to escape the=20 >>>>>> '$' then. >>>>>> >>>>>> Best regards >>>>>> Leo >>>>>> >>>>>> doc/language_issues.en=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_issues.es=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_issues.fr=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_issues.it=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_issues.nl=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_issues.pl=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_issues.ru=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_issues.tr=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> doc/language_missings=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0 |=C2=A0 7 ++ >>>>>> html/cgi-bin/gui.cgi=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0=C2=A0 | 16 ++++ >>>>>> html/html/themes/ipfire/include/functions.pl=C2=A0 |=C2=A0 7 ++ >>>>>> .../themes/ipfire/include/js/reloadGraphs.js=C2=A0 | 81=20 >>>>>> +++++++++++++++++++ >>>>>> langs/de/cgi-bin/de.pl=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> langs/en/cgi-bin/en.pl=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0 |=C2=A0 1 + >>>>>> 14 files changed, 121 insertions(+) >>>>>> create mode 100644=20 >>>>>> html/html/themes/ipfire/include/js/reloadGraphs.js >>>>>> >>>>>> 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=20 >>>>>> set =3D Password not set. >>>>>> WARNING: untranslated string: password too short =3D Password is=20 >>>>>> too short. >>>>>> WARNING: untranslated string: passwords do not match =3D Passwords=20 >>>>>> do not match. >>>>>> WARNING: untranslated string: percentage =3D Percentage >>>>>> +WARNING: untranslated string: periodically reload graphs =3D=20 >>>>>> Periodically refresh RRD graphs >>>>>> WARNING: untranslated string: persistent =3D Persistent >>>>>> WARNING: untranslated string: pfs yes no =3D Perfect Forward=20 >>>>>> Secrecy (PFS) >>>>>> WARNING: untranslated string: pkcs12 file password =3D PKCS12 File=20 >>>>>> Password >>>>>> 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=20 >>>>>> =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=20 >>>>>> Periodically refresh RRD graphs >>>>>> WARNING: untranslated string: please reboot to apply your changes=20 >>>>>> =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=20 >>>>>> 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=20 >>>>>> Periodically 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=20 >>>>>> string >>>>>> 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=20 >>>>>> =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=20 >>>>>> Periodically refresh RRD graphs >>>>>> WARNING: untranslated string: please reboot to apply your changes=20 >>>>>> =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=20 >>>>>> =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=20 >>>>>> Periodically refresh RRD graphs >>>>>> WARNING: untranslated string: please reboot to apply your changes=20 >>>>>> =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=20 >>>>>> =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=20 >>>>>> Periodically refresh RRD graphs >>>>>> WARNING: untranslated string: please reboot to apply your changes=20 >>>>>> =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=20 >>>>>> =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=20 >>>>>> Periodically refresh RRD graphs >>>>>> WARNING: untranslated string: please reboot to apply your changes=20 >>>>>> =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=20 >>>>>> =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=20 >>>>>> Periodically refresh RRD graphs >>>>>> WARNING: untranslated string: please reboot to apply your changes=20 >>>>>> =3D Please reboot to apply your changes >>>>>> WARNING: untranslated string: processor vulnerability mitigations=20 >>>>>> =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''; >>>>>> >>>>>> >>>>>> $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'}") >>>>>> =C2=A0=C2=A0 $mainsettings{'WINDOWWITHHOSTNAME'} =3D=20 >>>>>> $cgiparams{'WINDOWWITHHOSTNAME'}; >>>>>> =C2=A0=C2=A0 $mainsettings{'PPPUPDOWNBEEP'} =3D $cgiparams{'PPPUPDOWNB= EEP'}; >>>>>> =C2=A0=C2=A0 $mainsettings{'SPEED'} =3D $cgiparams{'SPEED'}; >>>>>> +=C2=A0=C2=A0=C2=A0 $mainsettings{'RELOADGRAPHS'} =3D $cgiparams{'RELO= ADGRAPHS'}; >>>>>> =C2=A0=C2=A0 $mainsettings{'THEME'} =3D $cgiparams{'theme'}; >>>>>> =C2=A0=C2=A0 $mainsettings{'REFRESHINDEX'} =3D $cgiparams{'REFRESHINDE= X'}; >>>>>> &General::writehash("${General::swroot}/main/settings",=20 >>>>>> \%mainsettings); >>>>>> @@ -125,6 +127,11 @@ if ($cgiparams{'ACTION'} eq=20 >>>>>> "$Lang::tr{'save'}") >>>>>> =C2=A0=C2=A0 # by manually setting the var to off >>>>>> =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 $cgiparams{'SPEED'} =3D 'on'; >>>>>> =C2=A0=C2=A0 } >>>>>> +=C2=A0=C2=A0=C2=A0 if($mainsettings{'RELOADGRAPHS'}) { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 $cgiparams{'RELOADGRAPHS'}= =3D $mainsettings{'RELOADGRAPHS'}; >>>>>> +=C2=A0=C2=A0=C2=A0 } else { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 $cgiparams{'RELOADGRAPHS'}= =3D 'off'; >>>>>> +=C2=A0=C2=A0=C2=A0 } >>>>>> } >>>>>> >>>>>> # Default settings >>>>>> @@ -134,6 +141,7 @@ if ($cgiparams{'ACTION'} eq=20 >>>>>> "$Lang::tr{'restore defaults'}") >>>>>> =C2=A0=C2=A0 $cgiparams{'PPPUPDOWNBEEP'} =3D 'on'; >>>>>> =C2=A0=C2=A0 $cgiparams{'REFRESHINDEX'} =3D 'off'; >>>>>> =C2=A0=C2=A0 $cgiparams{'SPEED'} =3D 'on'; >>>>>> +=C2=A0=C2=A0=C2=A0 $cgiparams{'RELOADGRAPHS'} =3D 'off'; >>>>>> =C2=A0=C2=A0 $cgiparams{'THEME'} =3D 'ipfire'; >>>>>> } >>>>>> >>>>>> @@ -153,6 +161,10 @@ $checked{'SPEED'}{'off'} =3D ''; >>>>>> $checked{'SPEED'}{'on'} =3D ''; >>>>>> $checked{'SPEED'}{$cgiparams{'SPEED'}} =3D "checked=3D'checked'"; >>>>>> >>>>>> +$checked{'RELOADGRAPHS'}{'off'} =3D ''; >>>>>> +$checked{'RELOADGRAPHS'}{'on'} =3D ''; >>>>>> +$checked{'RELOADGRAPHS'}{$cgiparams{'RELOADGRAPHS'}} =3D=20 >>>>>> "checked=3D'checked'"; >>>>>> + >>>>>> &Header::openpage($Lang::tr{'gui settings'}, 1, ''); >>>>>> &Header::openbigbox('100%', 'left', '', $errormessage); >>>>>> >>>>>> @@ -179,6 +191,10 @@ print <>>>>> =C2=A0=C2=A0=C2=A0 >>>>> $checked{'SPEED'}{'on'} /> >>>>>> =C2=A0=C2=A0=C2=A0 $Lang::tr{'show ajax speedmeter in footer'} >>>>>> >>>>>> + >>>>>> +=C2=A0=C2=A0=C2=A0 >>>>> $checked{'RELOADGRAPHS'}{'on'} /> >>>>>> +=C2=A0=C2=A0=C2=A0 $Lang::tr{'periodically reload graphs'} >>>>>> + >>>>>> >>>>>> =C2=A0=C2=A0=C2=A0 >>>>>> =C2=A0=C2=A0=C2=A0 $Lang::tr{'languagepurpose'} >>>> Does this actually need configuration or can we not simply enable=20 >>>> this for everyone? >>>> >>>> What is the downside? If the browser has JS disabled, simply=20 >>>> nothing would happen. >>> I don't see any disadvantages, I just thought that some users might=20 >>> not like it. >> Would a solution be to add a button to toogle instead? So a button=20 >> next to each graph to enable something like a live mode? This would=20 >> 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=20 >>>>>> 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 >>>>>> ; >>>>>> } >>>>>> >>>>>> +if ($settings{'RELOADGRAPHS'} eq 'on') { >>>>>> +print <>>>>> +=C2=A0=C2=A0=C2=A0 >>>>> src=3D"/themes/ipfire/include/js/reloadGraphs.js"> >>>>>> +END >>>>>> +; >>>>>> +} >>>>>> + >>>>>> print <>>>>> =C2=A0=C2=A0 >>>>>> =C2=A0=C2=A0 >>>>>> diff --git a/html/html/themes/ipfire/include/js/reloadGraphs.js=20 >>>>>> b/html/html/themes/ipfire/include/js/reloadGraphs.js >>>>>> new file mode 100644 >>>>>> index 000000000..c0c8bec9e >>>>>> --- /dev/null >>>>>> +++ b/html/html/themes/ipfire/include/js/reloadGraphs.js >>>>>> @@ -0,0 +1,81 @@ >>>>>> +/*###################################################################= ##########=20 >>>>>> >>>>>> +# # >>>>>> +# IPFire.org - A linux based=20 >>>>>> firewall=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# Copyright (C) 2007-2021=C2=A0 IPFire Team=20 >>>>>> =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# # >>>>>> +# This program is free software: you can redistribute it and/or=20 >>>>>> modify=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# it under the terms of the GNU General Public License as=20 >>>>>> published by=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# the Free Software Foundation, either version 3 of the License,=20 >>>>>> or=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# (at your option) any later=20 >>>>>> version.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# # >>>>>> +# This program is distributed in the hope that it will be=20 >>>>>> useful,=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0 # >>>>>> +# but WITHOUT ANY WARRANTY; without even the implied warranty=20 >>>>>> of=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0 # >>>>>> +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See=20 >>>>>> the=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0 # >>>>>> +# GNU General Public License for more=20 >>>>>> details.=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0= =C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# # >>>>>> +# You should have received a copy of the GNU General Public=20 >>>>>> License=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# along with this program.=C2=A0 If not, see=20 >>>>>> .=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 # >>>>>> +# # >>>>>> +#####################################################################= ########*/=20 >>>>>> >>>>>> + >>>>>> +var graphs_reloadTimers =3D new Map(); >>>>>> + >>>>>> +//graph onload event: graph is now loaded, start reload timer >>>>>> +function graphs_onloadEvent(graphObj, startTimer =3D true) { >>>>>> +=C2=A0=C2=A0=C2=A0 if(! graphObj) { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 return; //graph iframe obj= ect is missing >>>>>> +=C2=A0=C2=A0=C2=A0 } >>>>>> + >>>>>> +=C2=A0=C2=A0=C2=A0 //get graph parameters from iframe url: [url]?[gra= ph=20 >>>>>> name]?[time range] >>>>>> +=C2=A0=C2=A0=C2=A0 let url =3D graphObj.contentWindow.location.href; >>>>>> +=C2=A0=C2=A0=C2=A0 if((! url) || (url =3D=3D=3D 'about:blank')) { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 url =3D graphObj.src; >>>>>> +=C2=A0=C2=A0=C2=A0 } >>>>>> +=C2=A0=C2=A0=C2=A0 url =3D url.split('?', 3); >>>>>> +=C2=A0=C2=A0=C2=A0 let graphRange =3D url.pop(); >>>>>> +=C2=A0=C2=A0=C2=A0 let graphName =3D url.pop(); >>>>>> + >>>>>> +=C2=A0=C2=A0=C2=A0 if((! graphName) || (! graphRange)) { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 return; //url parameters a= re missing >>>>>> +=C2=A0=C2=A0=C2=A0 } >>>>>> + >>>>>> +=C2=A0=C2=A0=C2=A0 //clear pending reload timeout to prevent multiple= timer starts >>>>>> +=C2=A0=C2=A0=C2=A0 if(graphs_reloadTimers.has(graphName)) { >>>>>> + clearTimeout(graphs_reloadTimers.get(graphName)); >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 graphs_reloadTimers.delete= (graphName); >>>>>> +=C2=A0=C2=A0=C2=A0 } >>>>>> + >>>>>> +=C2=A0=C2=A0=C2=A0 if(startTimer) { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 //determine reload interval >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 let interval =3D 60; //def= ault: 60s >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 if(graphRange =3D=3D=3D 'h= our') { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 in= terval =3D 10; >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 } else if(graphRange =3D= =3D=3D 'month' || graphRange =3D=3D=3D=20 >>>>>> 'year') { >>>>> Do not think that=E2=80=99s this makes any sense here. Should not chang= e a=20 >>>>> pixel in this graphs :-). Why is day not listed here ? >>> Daily graphs would use the default (60s). I made that up on a sunday=20 >>> evening, there is certainly room for improvement here :) >> No need to apologise here :-). Thanks for clarification. >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 in= terval =3D 180; >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 } >>>>>> + >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 //start timeout and store = timer id >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 let timer =3D setTimeout(f= unction(graphFrame, timerRef) { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 gr= aphs_reloadTimers.delete(timerRef); //clear=20 >>>>>> expired timer >>>>>> + >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 //= reload graph iframe, ignore cache >>>>>> + graphFrame.contentWindow.location.reload(true); >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 }, interval * 1000, graphO= bj, graphName); >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 graphs_reloadTimers.set(gr= aphName, timer); >>>>>> +=C2=A0=C2=A0=C2=A0 } >>>>>> +} >>>>>> + >>>>> Would it no be easier to attach this directly to a graph so inside=20 >>>>> the function which creates the graph, should be makegraphs() or=20 >>>>> something like that? >>> Yes, but I think this was the easiest way to do it without changing=20 >>> the existing iframe. >>> If we remove the iframe, I would do it as you suggested. >>>>>> +//document.ready, must fire before iframes load >>>>>> +$(function() { >>>>>> +=C2=A0=C2=A0=C2=A0 //attach onload event to graphs >>>>>> +=C2=A0=C2=A0=C2=A0 $('iframe.graph').each(function() { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 $(this).on({ >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 lo= ad: function() { >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0 graphs_onloadEvent(this); >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 }, >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 er= ror: function() { //stop reload on error >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2= =A0=C2=A0=C2=A0=C2=A0 graphs_onloadEvent(this, false); >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 } >>>>>> +=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0=C2=A0 }); >>>>>> +=C2=A0=C2=A0=C2=A0 }); >>>>>> +}); >>>>>> diff --git a/langs/de/cgi-bin/de.pl b/langs/de/cgi-bin/de.pl >>>>>> index b3c2a69da..00e6b9853 100644 >>>>>> --- a/langs/de/cgi-bin/de.pl >>>>>> +++ b/langs/de/cgi-bin/de.pl >>>>>> @@ -2007,6 +2007,7 @@ >>>>>> 'pc add' =3D> 'PC hinzuf=C3=BCgen', >>>>>> 'pdc options' =3D> 'PDC Optionen', >>>>>> 'percentage' =3D> 'Prozent', >>>>>> +'periodically reload graphs' =3D> 'RRD Graphen periodisch neu laden', >>>>>> 'persistent' =3D> 'Dauerhaft', >>>>>> 'pfs yes no' =3D> 'Perfect Forward Secrecy (PFS)', >>>>>> 'phase1 group' =3D> 'Phase1 Gruppe', >>>>>> diff --git a/langs/en/cgi-bin/en.pl b/langs/en/cgi-bin/en.pl >>>>>> index 9767be178..ed9e4996a 100644 >>>>>> --- a/langs/en/cgi-bin/en.pl >>>>>> +++ b/langs/en/cgi-bin/en.pl >>>>>> @@ -2037,6 +2037,7 @@ >>>>>> 'pc add' =3D> 'Add workstation', >>>>>> 'pdc options' =3D> 'PDC options', >>>>>> 'percentage' =3D> 'Percentage', >>>>>> +'periodically reload graphs' =3D> 'Periodically refresh RRD graphs', >>>>>> 'persistent' =3D> 'Persistent', >>>>>> 'pfs yes no' =3D> 'Perfect Forward Secrecy (PFS)', >>>>>> 'phase1 group' =3D> 'Phase1 Group', >>>>>> --=20 >>>>>> 2.27.0.windows.1 >>>>>> >>>>> Some generic thoughts. Would it not be better to remove the iFrame=20 >>>>> and make the links for hour/day/month/year firing some JavaScripts=20 >>>>> which reloads/changes the graphs? And then when we click hour=20 >>>>> start this script to reload the graphs periodically? >>>> Agreed. >>>> >>>> I very much like the idea and I think this is an opportunity to=20 >>>> clean up a little bit more. I will let you two sort out the=20 >>>> technical things and how often is best to reload :) >>> As I mentioned above, I would also prefer to revise that. But I=20 >>> think users withouth JS enabled will then no longer be able to=20 >>> change the graph range. >>> >>> What is you attitude towards JS in general? I think for such "bonus"=20 >>> features like interactive graphs we can require JS and break=20 >>> compatibility, would you agree? >>> >> So the actual content of this mail in one big block: >> >> First thanks for all input, things seem to be a little bit more=20 >> complicated right now, but at least we can create a stable solution=20 >> when we find a lot of problems before =F0=9F=99=82. >> >> Regarding JavaScript in general, I first thought that this is a good=20 >> question which needs an answer but after some thinking I came up with=20 >> the fact that the web interface is already not working without=20 >> JavaScript enabled. The zone configuration page needs JavaScript=20 >> enabled, otherwise the change to VLAN does not work, as we cannot=20 >> enable the field without JavaScript (tested today ) > As far as I know, however, this is the only page which requires=20 > javascript. So if we should vote against JS, not much work has been=20 > done yet. >> >> So I do not really have a problem here when we add JavaScript for=20 >> Features, as this is somehow the only way to change the DOM. I=C2=A0 do=20 >> not know If it is a good idea to use JavaScript only for =E2=80=9Cbonus=E2= =80=9D=20 >> features, because also validation of input fields is when it comes to=20 >> more complex values, only possible with JavaScript. I would not call=20 >> this a =E2=80=9Cbonus=E2=80=9D feature. In the end we will maybe end up wi= th two web=20 >> interface which increases maintain work. >> >> But I would like to have a general decision here to avoid talking=20 >> about this over and over again. @all maybe something for the next=20 >> telephone conference? Or should we made a decision right here? > I agree! >> >> Another fact which came to my mind is that our jquery version is=20 >> heavily outdated and I think it makes sense to update this lib before=20 >> we add further JavaScript. Otherwise an update might break scripts=20 >> and causes more trouble as when we develop the scripts with a current=20 >> version. > Would you be willing to do the update? I don't know how to do that,=20 > but of course would like to use the new features. I am willing to pick up the update of jquery. That is the sort of thing that I can support well on and let you guys=20 get on with the stuff that I can't easily do. Regards, Adolf >> >> >> So I suggest the following plan: >> >> 1. Decision making concerning JavaScript (next steps only with=20 >> positive decision) >> 2. Updating jquery >> 3. Removing the iFrame and using JS to change the images when=20 >> somebody clicks on hour, day, etc >> 4. Adding a button for live mode > > I'm not sure if I should ask, but I feel like I've already opened=20 > Pandora's (graph) box here. > Is there a reason why every CGI also creates it's own graphs and has=20 > additional parameter handling for that? > Wouldn't it make more sense if the graphs were generated by an=20 > independent script? > For instance: "getrrdimg.pl?category=3Dqos&graph=3Dred0&range=3Dhour" > >> >> I suggest an Update every 15 sec for =E2=80=9Chour=E2=80=9D graphs and eve= ry 360 sec=20 >> for daily. >> Could we add this as constants to make a change easy?=C2=A0 And another=20 >> idea: would it not be useful to have a basic value so 15 sec update=20 >> interval for one hour and then just multiple this value when it comes=20 >> to day, month etc? Would make introducing other time frames easier. >> >> Thanks for your thoughts and for your time (especially Leo) >> >> Greetings Jonatan >> >> >>>>> Thanks for the nice patch. It is easy to review :-) >>>>> >>>>> Greetings Jonatan >>>> -Michael >>> Greetings, >>> Leo --=20 Sent from my laptop --===============3859560406961448217==--