From mboxrd@z Thu Jan 1 00:00:00 1970
From: Michael Tremer <michael.tremer@ipfire.org>
To: development@lists.ipfire.org
Subject: Re: [PATCH] GUI: Periodically reload RRD graphs
Date: Tue, 16 Mar 2021 15:35:00 +0000
Message-ID: <C8CFCC37-CE80-43C8-A9CE-3CEA59523A53@ipfire.org>
In-Reply-To: <050e76a7-193d-e982-1869-fcbba6cd092f@ipfire.org>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============4658663251051353576=="
List-Id: <development.lists.ipfire.org>
--===============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 <adolf.belka(a)ipfire.org> 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 <hofmann(a)leo-andres.de>:
>>>>=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 <jonatan.schlag(a)ipfire.org=
> wrote:
>>>>>> Hi,
>>>>>>=20
>>>>>>> Am 08.03.2021 um 20:21 schrieb Leo-Andres Hofmann <hofmann(a)leo-andr=
es.de>:
>>>>>>>=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 <a> 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 <hofmann(a)leo-andres.de>
>>>>>>> ---
>>>>>>>=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 <head> 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 <<END
>>>>>>> <td><input type=3D'checkbox' name=3D'SPEED' $checked{'SPEED'}{'on=
'} /></td>
>>>>>>> <td>$Lang::tr{'show ajax speedmeter in footer'}</td>
>>>>>>> </tr>
>>>>>>> +<tr>
>>>>>>> + <td><input type=3D'checkbox' name=3D'RELOADGRAPHS' $checked{'REL=
OADGRAPHS'}{'on'} /></td>
>>>>>>> + <td>$Lang::tr{'periodically reload graphs'}</td>
>>>>>>> +</tr>
>>>>>>> <tr>
>>>>>>> <td> </td>
>>>>>>> <td>$Lang::tr{'languagepurpose'}</td>
>>>>> 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 <<END
>>>>>>> + <script src=3D"/themes/ipfire/include/js/reloadGraphs.js"></scri=
pt>
>>>>>>> +END
>>>>>>> +;
>>>>>>> +}
>>>>>>> +
>>>>>>> print <<END
>>>>>>> </head>
>>>>>>> <body>
>>>>>>> diff --git a/html/html/themes/ipfire/include/js/reloadGraphs.js b/htm=
l/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 firewall =
#
>>>>>>> +# Copyright (C) 2007-2021 IPFire Team <info(a)ipfire.org> =
#
>>>>>>> +# #
>>>>>>> +# This program is free software: you can redistribute it and/or modi=
fy #
>>>>>>> +# it under the terms of the GNU General Public License as published =
by #
>>>>>>> +# the Free Software Foundation, either version 3 of the License, or =
#
>>>>>>> +# (at your option) any later version. =
#
>>>>>>> +# #
>>>>>>> +# This program is distributed in the hope that it will be useful, =
#
>>>>>>> +# but WITHOUT ANY WARRANTY; without even the implied warranty of =
#
>>>>>>> +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the =
#
>>>>>>> +# GNU General Public License for more details. =
#
>>>>>>> +# #
>>>>>>> +# You should have received a copy of the GNU General Public License =
#
>>>>>>> +# along with this program. If not, see <http://www.gnu.org/licenses=
/>. #
>>>>>>> +# #
>>>>>>> +####################################################################=
#########*/=20
>>>>>>> +
>>>>>>> +var graphs_reloadTimers =3D new Map();
>>>>>>> +
>>>>>>> +//graph onload event: graph is now loaded, start reload timer
>>>>>>> +function graphs_onloadEvent(graphObj, startTimer =3D true) {
>>>>>>> + if(! graphObj) {
>>>>>>> + return; //graph iframe object is missing
>>>>>>> + }
>>>>>>> +
>>>>>>> + //get graph parameters from iframe url: [url]?[graph name]?[time=
range]
>>>>>>> + let url =3D graphObj.contentWindow.location.href;
>>>>>>> + if((! url) || (url =3D=3D=3D 'about:blank')) {
>>>>>>> + url =3D graphObj.src;
>>>>>>> + }
>>>>>>> + url =3D url.split('?', 3);
>>>>>>> + let graphRange =3D url.pop();
>>>>>>> + let graphName =3D url.pop();
>>>>>>> +
>>>>>>> + if((! graphName) || (! graphRange)) {
>>>>>>> + return; //url parameters are missing
>>>>>>> + }
>>>>>>> +
>>>>>>> + //clear pending reload timeout to prevent multiple timer starts
>>>>>>> + if(graphs_reloadTimers.has(graphName)) {
>>>>>>> + clearTimeout(graphs_reloadTimers.get(graphName));
>>>>>>> + graphs_reloadTimers.delete(graphName);
>>>>>>> + }
>>>>>>> +
>>>>>>> + if(startTimer) {
>>>>>>> + //determine reload interval
>>>>>>> + let interval =3D 60; //default: 60s
>>>>>>> + if(graphRange =3D=3D=3D 'hour') {
>>>>>>> + interval =3D 10;
>>>>>>> + } else if(graphRange =3D=3D=3D 'month' || graphRange =3D=3D=
=3D 'year') {
>>>>>> Do not think that=E2=80=99s this makes any sense here. Should not chan=
ge a pixel in this graphs :-). Why is day not listed here ?
>>>> Daily graphs would use the default (60s). I made that up on a sunday eve=
ning, there is certainly room for improvement here :)
>>> No need to apologise here :-). Thanks for clarification.
>>>>>>> + interval =3D 180;
>>>>>>> + }
>>>>>>> +
>>>>>>> + //start timeout and store timer id
>>>>>>> + let timer =3D setTimeout(function(graphFrame, timerRef) {
>>>>>>> + graphs_reloadTimers.delete(timerRef); //clear expired ti=
mer
>>>>>>> +
>>>>>>> + //reload graph iframe, ignore cache
>>>>>>> + graphFrame.contentWindow.location.reload(true);
>>>>>>> + }, interval * 1000, graphObj, graphName);
>>>>>>> + graphs_reloadTimers.set(graphName, timer);
>>>>>>> + }
>>>>>>> +}
>>>>>>> +
>>>>>> Would it no be easier to attach this directly to a graph so inside the=
function which creates the graph, should be makegraphs() or something like t=
hat?
>>>> Yes, but I think this was the easiest way to do it without changing the =
existing iframe.
>>>> If we remove the iframe, I would do it as you suggested.
>>>>>>> +//document.ready, must fire before iframes load
>>>>>>> +$(function() {
>>>>>>> + //attach onload event to graphs
>>>>>>> + $('iframe.graph').each(function() {
>>>>>>> + $(this).on({
>>>>>>> + load: function() {
>>>>>>> + graphs_onloadEvent(this);
>>>>>>> + },
>>>>>>> + error: function() { //stop reload on error
>>>>>>> + graphs_onloadEvent(this, false);
>>>>>>> + }
>>>>>>> + });
>>>>>>> + });
>>>>>>> +});
>>>>>>> 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
>>>>>>>=20
>>>>>> Some generic thoughts. Would it not be better to remove the iFrame and=
make the links for hour/day/month/year firing some JavaScripts which reloads=
/changes the graphs? And then when we click hour start this script to reload =
the graphs periodically?
>>>>> Agreed.
>>>>>=20
>>>>> I very much like the idea and I think this is an opportunity to clean u=
p a little bit more. I will let you two sort out the technical things and how=
often is best to reload :)
>>>> As I mentioned above, I would also prefer to revise that. But I think us=
ers withouth JS enabled will then no longer be able to change the graph range.
>>>>=20
>>>> What is you attitude towards JS in general? I think for such "bonus" fea=
tures like interactive graphs we can require JS and break compatibility, woul=
d you agree?
>>>>=20
>>> So the actual content of this mail in one big block:
>>>=20
>>> First thanks for all input, things seem to be a little bit more complicat=
ed right now, but at least we can create a stable solution when we find a lot=
of problems before =F0=9F=99=82.
>>>=20
>>> Regarding JavaScript in general, I first thought that this is a good ques=
tion which needs an answer but after some thinking I came up with the fact th=
at the web interface is already not working without JavaScript enabled. The z=
one configuration page needs JavaScript enabled, otherwise the change to VLAN=
does not work, as we cannot enable the field without JavaScript (tested toda=
y )
>> As far as I know, however, this is the only page which requires javascript=
. So if we should vote against JS, not much work has been done yet.
>>>=20
>>> So I do not really have a problem here when we add JavaScript for Feature=
s, as this is somehow the only way to change the DOM. I do not know If it is=
a good idea to use JavaScript only for =E2=80=9Cbonus=E2=80=9D features, bec=
ause also validation of input fields is when it comes to more complex values,=
only possible with JavaScript. I would not call this a =E2=80=9Cbonus=E2=80=
=9D feature. In the end we will maybe end up with two web interface which inc=
reases maintain work.
>>>=20
>>> But I would like to have a general decision here to avoid talking about t=
his over and over again. @all maybe something for the next telephone conferen=
ce? Or should we made a decision right here?
>> I agree!
>>>=20
>>> Another fact which came to my mind is that our jquery version is heavily =
outdated and I think it makes sense to update this lib before we add further =
JavaScript. Otherwise an update might break scripts and causes more trouble a=
s when we develop the scripts with a current version.
>> Would you be willing to do the update? I don't know how to do that, but of=
course would like to use the new features.
>=20
> I am willing to pick up the update of jquery.
>=20
> That is the sort of thing that I can support well on and let you guys get o=
n with the stuff that I can't easily do.
>=20
> Regards,
>=20
> Adolf
>=20
>>>=20
>>>=20
>>> So I suggest the following plan:
>>>=20
>>> 1. Decision making concerning JavaScript (next steps only with positive d=
ecision)
>>> 2. Updating jquery
>>> 3. Removing the iFrame and using JS to change the images when somebody cl=
icks on hour, day, etc
>>> 4. Adding a button for live mode
>>=20
>> I'm not sure if I should ask, but I feel like I've already opened Pandora'=
s (graph) box here.
>> Is there a reason why every CGI also creates it's own graphs and has addit=
ional parameter handling for that?
>> Wouldn't it make more sense if the graphs were generated by an independent=
script?
>> For instance: "getrrdimg.pl?category=3Dqos&graph=3Dred0&range=3Dhour"
>>=20
>>>=20
>>> I suggest an Update every 15 sec for =E2=80=9Chour=E2=80=9D graphs and ev=
ery 360 sec for daily.
>>> Could we add this as constants to make a change easy? And another idea: =
would it not be useful to have a basic value so 15 sec update interval for on=
e hour and then just multiple this value when it comes to day, month etc? Wou=
ld make introducing other time frames easier.
>>>=20
>>> Thanks for your thoughts and for your time (especially Leo)
>>>=20
>>> Greetings Jonatan
>>>=20
>>>=20
>>>>>> Thanks for the nice patch. It is easy to review :-)
>>>>>>=20
>>>>>> Greetings Jonatan
>>>>> -Michael
>>>> Greetings,
>>>> Leo
>=20
> --=20
> Sent from my laptop
--===============4658663251051353576==--