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 3/3] rrdimage: Switch graphs.pl to the new graph scripts
Date: Mon, 12 Apr 2021 10:52:09 +0100
Message-ID: <B805D7E4-E851-4161-8D9A-F755F82E85FE@ipfire.org>
In-Reply-To: <e7fd5e5d-287b-770a-acc8-7ebeb60f7c36@leo-andres.de>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============1330550574377337593=="
List-Id: <development.lists.ipfire.org>

--===============1330550574377337593==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

Hello,

Sorry for my late response. This is probably a little bit more urgent=E2=80=A6

Our Apache configuration is here:

  https://git.ipfire.org/?p=3Dipfire-2.x.git;a=3Dtree;f=3Dconfig/httpd;hb=3DH=
EAD

And it does not have any aggressive caching enabled.

The ETag header is precisely there for validating content without transferrin=
g it again. We probably should overhaul the entire apache configuration and c=
ome up with something that guarantees that we are using modern features of th=
e browser and Apache. Currently the configuration is full of directives for M=
S Internet Explorer and Java-based browsers. We wouldn=E2=80=99t support any =
of them - not even sure if they exist any more.

@Peter: Would you be up for rewriting the apache configuration?

Best,
-Michael

> On 9 Apr 2021, at 18:45, Leo Hofmann <hofmann(a)leo-andres.de> wrote:
>=20
> Hi,
>=20
> I found that disabling the HTTP ETag header solved the problem for me. Are =
there any Cache-Control headers configured for these static files?
>=20
> I'll change the CSS and submit a patch soon!
>=20
> Leo
>=20
> Am 09.04.2021 um 12:57 schrieb Michael Tremer:
>> Hello,
>>=20
>> That was it. For some reason my browser did not validate the CSS file and =
used a cached version. This is probably something we should look into.
>>=20
>> Apart from that it works.
>>=20
>> Can we maybe change the background colour to something less yellow when a =
button is selected. Maybe just underlining the word is enough?
>>=20
>> -Michael
>>=20
>>> On 7 Apr 2021, at 23:18, Leo Hofmann <hofmann(a)leo-andres.de> wrote:
>>>=20
>>> Hello Michael,
>>>=20
>>> No, of course not, that looks terrible!
>>> Could you please check/CTRL+F5 the CSS file /themes/ipfire/include/css/st=
yle.css? Patch 2 of this series should have added ~30 lines at the end.
>>> Please have a look at the attached screenshot, there you can see how it i=
s supposed to be. I have tested this with Firefox and Chrome.
>>>=20
>>> Best regards,
>>> Leo
>>>=20
>>> Am 07.04.2021 um 23:31 schrieb Michael Tremer:
>>>> Hello,
>>>>=20
>>>> Is this meant to look like this?
>>>>=20
>>>>=20
>>>>=20
>>>>> On 1 Apr 2021, at 14:35, Leo-Andres Hofmann <hofmann(a)leo-andres.de <m=
ailto:hofmann(a)leo-andres.de>> wrote:
>>>>>=20
>>>>> "makegraphbox" is modified to remove the old iframe method and output
>>>>> a modern div container instead.
>>>>> Graph errors are now returned, to be displayed by getrrdimage.cgi.
>>>>>=20
>>>>> entropy.cgi and netovpnsrv.cgi are modified to ensure compatibility.
>>>>>=20
>>>>> Add cache control HTTP header to image output.
>>>>>=20
>>>>> Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de <mailto:hofm=
ann(a)leo-andres.de>>
>>>>> ---
>>>>> config/cfgroot/graphs.pl    | 86 +++++++++++++++++++++----------------
>>>>> html/cgi-bin/entropy.cgi    |  2 +-
>>>>> html/cgi-bin/netovpnsrv.cgi |  2 +-
>>>>> 3 files changed, 50 insertions(+), 40 deletions(-)
>>>>>=20
>>>>> diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl
>>>>> index beddff032..cf4a30de3 100644
>>>>> --- a/config/cfgroot/graphs.pl
>>>>> +++ b/config/cfgroot/graphs.pl
>>>>> @@ -24,6 +24,7 @@ package Graphs;
>>>>>=20
>>>>> use strict;
>>>>> use RRDs;
>>>>> +use experimental 'smartmatch';
>>>>>=20
>>>>> require '/var/ipfire/general-functions.pl';
>>>>> require "${General::swroot}/lang.pl";
>>>>> @@ -99,26 +100,35 @@ foreach (@sensorsdir){
>>>>> &General::readhash("${General::swroot}/sensors/settings", \%sensorsetti=
ngs);
>>>>>=20
>>>>> # Generate a nice box for selection of time range in graphs
>>>>> -# this will generate a nice iframe for the cgi every klick for
>>>>> -# the graph will be handled inside the iframe
>>>>> +# this will generate a nice div box for the cgi every klick for
>>>>> +# the graph will be handled by javascript
>>>>> # 0 is the cgi refering to
>>>>> # 1 is the graph name
>>>>> -# 2 is the time range for the graph
>>>>> -# 3 if given is the height of the iframe default if nothing is given
>>>>> +# 2 is the time range for the graph (optional)
>>>>>=20
>>>>> sub makegraphbox {
>>>>> -print "<center>";
>>>>> -print "<a href=3D'".$_[0]."?".$_[1]."?hour' target=3D'".$_[1]."box'><b=
>".$Lang::tr{'hour'}."</b></a>";
>>>>> -print " - ";
>>>>> -print "<a href=3D'".$_[0]."?".$_[1]."?day' target=3D'".$_[1]."box'><b>=
".$Lang::tr{'day'}."</b></a>";
>>>>> -print " - ";
>>>>> -print "<a href=3D'".$_[0]."?".$_[1]."?week' target=3D'".$_[1]."box'><b=
>".$Lang::tr{'week'}."</b></a>";
>>>>> -print " - ";
>>>>> -print "<a href=3D'".$_[0]."?".$_[1]."?month' target=3D'".$_[1]."box'><=
b>".$Lang::tr{'month'}."</b></a>";
>>>>> -print " - ";
>>>>> -print "<a href=3D'".$_[0]."?".$_[1]."?year' target=3D'".$_[1]."box'><b=
>".$Lang::tr{'year'}."</b></a>";
>>>>> -print "<br></center>";
>>>>> -print "<iframe class=3D'graph' src=3D'".$_[0]."?".$_[1]."?".$_[2]."' s=
crolling=3D'no' frameborder=3D'no' marginheight=3D'0' name=3D'".$_[1]."box'><=
/iframe>";
>>>>> +my ($origin, $name, $default_range) =3D @_;
>>>>> +
>>>>> +# Optional time range: Default to "day" unless otherwise specified
>>>>> +$default_range =3D "day" unless ($default_range ~~ @time_ranges);
>>>>> +
>>>>> +print <<END;
>>>>> +<div class=3D"rrdimage" id=3D"rrdimg-$name" data-origin=3D"$origin" da=
ta-graph=3D"$name" data-default-range=3D"$default_range">
>>>>> +<ul>
>>>>> +END
>>>>> +
>>>>> +# Print range select buttons
>>>>> +foreach my $range (@time_ranges) {
>>>>> +print <<END;
>>>>> +<li><button data-range=3D"$range" onclick=3D"rrdimage_selectRange(this=
)">$Lang::tr{$range}</button></li>
>>>>> +END
>>>>> +}
>>>>> +
>>>>> +print <<END;
>>>>> +</ul>
>>>>> +<img src=3D"/cgi-bin/getrrdimage.cgi?origin=3D${origin}&graph=3D${name=
}&range=3D${default_range}" alt=3D"$Lang::tr{'graph'} ($name)">
>>>>> +</div>
>>>>> +END
>>>>> }
>>>>>=20
>>>>> # Generate the CPU Graph for the current period of time for values give=
n by
>>>>> @@ -248,7 +258,7 @@ sub updatecpugraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for cpu: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for cpu: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Load Graph for the current period of time for values giv=
en by collecd
>>>>> @@ -280,7 +290,7 @@ sub updateloadgraph {
>>>>> "LINE1:load1".$color{"color18"},
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for load: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for load: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Memory Graph for the current period of time for values g=
iven by collecd
>>>>> @@ -336,7 +346,7 @@ sub updatememorygraph {
>>>>> "GPRINT:freepct:LAST:%3.2lf%%\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Swap Graph for the current period of time for values giv=
en by collecd
>>>>> @@ -385,7 +395,7 @@ sub updateswapgraph {
>>>>> "GPRINT:freepct:LAST:%3.2lf%%\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Process Cpu Graph for the current period of time for val=
ues given by collecd
>>>>> @@ -432,7 +442,7 @@ sub updateprocessescpugraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for processes: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for processes: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Process Memory Graph for the current period of time for =
values given by collecd
>>>>> @@ -478,7 +488,7 @@ sub updateprocessesmemorygraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for processesmemory: ".$ERROR."\n" if $ERRO=
R;
>>>>> +return "Error in RRD::graph for processesmemory: ".$ERROR."\n" if $ERR=
OR;
>>>>> }
>>>>>=20
>>>>> # Generate the Disk Graph for the current period of time for values giv=
en by collecd
>>>>> @@ -522,7 +532,7 @@ sub updatediskgraph {
>>>>> "GPRINT:write:LAST:%8.1lf %sBps\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for ".$disk.": ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for ".$disk.": ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Interface Graph for the current period of time for value=
s given by collecd
>>>>> @@ -561,7 +571,7 @@ sub updateifgraph {
>>>>> "GPRINT:outgoing:LAST:%8.1lf %sBps\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERRO=
R;
>>>>> }
>>>>>=20
>>>>> sub updatevpngraph {
>>>>> @@ -598,7 +608,7 @@ sub updatevpngraph {
>>>>> "GPRINT:outgoing:LAST:%8.1lf %sBps\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERRO=
R;
>>>>> }
>>>>>=20
>>>>> sub updatevpnn2ngraph {
>>>>> @@ -661,7 +671,7 @@ sub updatevpnn2ngraph {
>>>>> "GPRINT:compression_out:LAST:%8.1lf %sBps\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERRO=
R;
>>>>> }
>>>>>=20
>>>>> # Generate the Firewall Graph for the current period of time for values=
 given by collecd
>>>>> @@ -716,7 +726,7 @@ sub updatefwhitsgraph {
>>>>> "GPRINT:portscan:LAST:%8.1lf %sBps\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for firewallhits: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for firewallhits: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Line Quality Graph for the current period of time for va=
lues given by collecd
>>>>> @@ -758,7 +768,7 @@ sub updatepinggraph {
>>>>> "GPRINT:roundtrip:LAST:%3.2lf ms\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for link quality: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for link quality: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> sub updatewirelessgraph {
>>>>> @@ -793,7 +803,7 @@ sub updatewirelessgraph {
>>>>> "GPRINT:power:LAST:%5.1lf %sdBm\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for wireless: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for wireless: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the HDD Temp Graph for the current period of time for values=
 given by collecd and lm_sensors
>>>>> @@ -827,7 +837,7 @@ sub updatehddgraph {
>>>>> "GPRINT:temperature:LAST:%3.0lf =C2=B0C\\j",
>>>>> );
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for hdd-".$disk.": ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for hdd-".$disk.": ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Temp Graph for the current period of time for values giv=
en by collecd and lm_sensors
>>>>> @@ -875,7 +885,7 @@ sub updatehwtempgraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for HDD Temp: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for HDD Temp: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Fan Graph for the current period of time for values give=
n by collecd and lm_sensors
>>>>> @@ -922,7 +932,7 @@ sub updatehwfangraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for Fan Speed: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for Fan Speed: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Voltage Graph for the current period of time for values =
given by collecd and lm_sensors
>>>>> @@ -969,7 +979,7 @@ sub updatehwvoltgraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for Voltage: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for Voltage: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>>=20
>>>>> @@ -1051,7 +1061,7 @@ sub updateqosgraph {
>>>>> }
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for qos device ".$qossettings{'DEV'}.": ".$=
ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for qos device ".$qossettings{'DEV'}.": ".=
$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the CPU Frequency Graph for the current period of time for v=
alues given by collectd an lm_sensors
>>>>> @@ -1090,7 +1100,7 @@ sub updatecpufreqgraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for cpu freq: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for cpu freq: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> # Generate the Thermal Zone Temp CPU Graph
>>>>> @@ -1129,7 +1139,7 @@ sub updatethermaltempgraph {
>>>>>=20
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>> -print "Error in RRD::graph for thermal temp: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for thermal temp: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>>=20
>>>>> @@ -1174,7 +1184,7 @@ sub updateentropygraph {
>>>>> RRDs::graph (@command);
>>>>> $ERROR =3D RRDs::error;
>>>>>=20
>>>>> -print "Error in RRD::graph for entropy: ".$ERROR."\n" if $ERROR;
>>>>> +return "Error in RRD::graph for entropy: ".$ERROR."\n" if $ERROR;
>>>>> }
>>>>>=20
>>>>> sub updateconntrackgraph {
>>>>> @@ -1202,5 +1212,5 @@ sub updateconntrackgraph {
>>>>> RRDs::graph(@command);
>>>>> $ERROR =3D RRDs::error;
>>>>>=20
>>>>> -print STDERR "Error in RRD::Graph for conntrack: " . $ERROR . "\n" if =
$ERROR;
>>>>> +return "Error in RRD::Graph for conntrack: " . $ERROR . "\n" if $ERROR;
>>>>> }
>>>>> diff --git a/html/cgi-bin/entropy.cgi b/html/cgi-bin/entropy.cgi
>>>>> index d7a9ca5d8..f8045db5a 100644
>>>>> --- a/html/cgi-bin/entropy.cgi
>>>>> +++ b/html/cgi-bin/entropy.cgi
>>>>> @@ -45,7 +45,7 @@ if ( $querry[0] ne~ "") {
>>>>> &Header::openbigbox('100%', 'left');
>>>>>=20
>>>>> &Header::openbox('100%', 'center', $Lang::tr{'entropy'});
>>>>> -&Graphs::makegraphbox("entropy.cgi", "day");
>>>>> +&Graphs::makegraphbox("entropy.cgi", "entropy", "day");
>>>>> &Header::closebox();
>>>>>=20
>>>>> # Check for hardware support.
>>>>> diff --git a/html/cgi-bin/netovpnsrv.cgi b/html/cgi-bin/netovpnsrv.cgi
>>>>> index 77c69cddb..ab3548713 100755
>>>>> --- a/html/cgi-bin/netovpnsrv.cgi
>>>>> +++ b/html/cgi-bin/netovpnsrv.cgi
>>>>> @@ -75,7 +75,7 @@ if ( $querry[0] ne ""){
>>>>> if (@vpns || %ipsecgraphs) {
>>>>> foreach my $name (sort keys %ipsecgraphs) {
>>>>> &Header::openbox('100%', 'center', "$Lang::tr{'ipsec connection'}: $nam=
e");
>>>>> -&Graphs::makegraphbox("netovpnsrv.cgi", $ipsecgraphs{$name}, "day");
>>>>> +&Graphs::makegraphbox("netovpnsrv.cgi", "ipsec-$ipsecgraphs{$name}", "=
day");
>>>>> &Header::closebox();
>>>>> }
>>>>>=20
>>>>> --=20
>>>>> 2.27.0.windows.1
>>>>>=20
>>> <rrdimg-css.png>


--===============1330550574377337593==--