"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.

entropy.cgi and netovpnsrv.cgi are modified to ensure compatibility.

Add cache control HTTP header to image output.

Signed-off-by: Leo-Andres Hofmann <hofmann(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(-)

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;
 
 use strict;
 use RRDs;
+use experimental 'smartmatch';
 
 require '/var/ipfire/general-functions.pl';
 require "${General::swroot}/lang.pl";
@@ -99,26 +100,35 @@ foreach (@sensorsdir){
 &General::readhash("${General::swroot}/sensors/settings", \%sensorsettings);
 
 # 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)
 
 sub makegraphbox {
-	print "<center>";
-	print "<a href='".$_[0]."?".$_[1]."?hour' target='".$_[1]."box'><b>".$Lang::tr{'hour'}."</b></a>";
-	print " - ";
-	print "<a href='".$_[0]."?".$_[1]."?day' target='".$_[1]."box'><b>".$Lang::tr{'day'}."</b></a>";
-	print " - ";
-	print "<a href='".$_[0]."?".$_[1]."?week' target='".$_[1]."box'><b>".$Lang::tr{'week'}."</b></a>";
-	print " - ";
-	print "<a href='".$_[0]."?".$_[1]."?month' target='".$_[1]."box'><b>".$Lang::tr{'month'}."</b></a>";
-	print " - ";
-	print "<a href='".$_[0]."?".$_[1]."?year' target='".$_[1]."box'><b>".$Lang::tr{'year'}."</b></a>";
-	print "<br></center>";
-	print "<iframe class='graph' src='".$_[0]."?".$_[1]."?".$_[2]."' scrolling='no' frameborder='no' marginheight='0' name='".$_[1]."box'></iframe>";
+	my ($origin, $name, $default_range) = @_;
+	
+	# Optional time range: Default to "day" unless otherwise specified
+	$default_range = "day" unless ($default_range ~~ @time_ranges);
+
+	print <<END;
+<div class="rrdimage" id="rrdimg-$name" data-origin="$origin" data-graph="$name" data-default-range="$default_range">
+	<ul>
+END
+
+	# Print range select buttons
+	foreach my $range (@time_ranges) {
+		print <<END;
+		<li><button data-range="$range" onclick="rrdimage_selectRange(this)">$Lang::tr{$range}</button></li>
+END
+	}
+
+	print <<END;
+	</ul>
+	<img src="/cgi-bin/getrrdimage.cgi?origin=${origin}&graph=${name}&range=${default_range}" alt="$Lang::tr{'graph'} ($name)">
+</div>
+END
 }
 
 # Generate the CPU Graph for the current period of time for values given by
@@ -248,7 +258,7 @@ sub updatecpugraph {
 
 	RRDs::graph (@command);
 	$ERROR = RRDs::error;
-	print "Error in RRD::graph for cpu: ".$ERROR."\n" if $ERROR;
+	return "Error in RRD::graph for cpu: ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Load Graph for the current period of time for values given by collecd
@@ -280,7 +290,7 @@ sub updateloadgraph {
 		"LINE1:load1".$color{"color18"},
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for load: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for load: ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Memory Graph for the current period of time for values given by collecd
@@ -336,7 +346,7 @@ sub updatememorygraph {
 		"GPRINT:freepct:LAST:%3.2lf%%\\j",
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Swap Graph for the current period of time for values given by collecd
@@ -385,7 +395,7 @@ sub updateswapgraph {
 		"GPRINT:freepct:LAST:%3.2lf%%\\j",
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for memory: ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Process Cpu Graph for the current period of time for values given by collecd
@@ -432,7 +442,7 @@ sub updateprocessescpugraph {
 
 		RRDs::graph (@command);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for processes: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for processes: ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Process Memory Graph for the current period of time for values given by collecd
@@ -478,7 +488,7 @@ sub updateprocessesmemorygraph {
 
 		RRDs::graph (@command);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for processesmemory: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for processesmemory: ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Disk Graph for the current period of time for values given by collecd
@@ -522,7 +532,7 @@ sub updatediskgraph {
 		"GPRINT:write:LAST:%8.1lf %sBps\\j",
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for ".$disk.": ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for ".$disk.": ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Interface Graph for the current period of time for values given by collecd
@@ -561,7 +571,7 @@ sub updateifgraph {
 		"GPRINT:outgoing:LAST:%8.1lf %sBps\\j",
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
 }
 
 sub updatevpngraph {
@@ -598,7 +608,7 @@ sub updatevpngraph {
 		"GPRINT:outgoing:LAST:%8.1lf %sBps\\j",
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
 }
 
 sub updatevpnn2ngraph {
@@ -661,7 +671,7 @@ sub updatevpnn2ngraph {
 		"GPRINT:compression_out:LAST:%8.1lf %sBps\\j",
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for ".$interface.": ".$ERROR."\n" if $ERROR;
 }
 
 # 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 = RRDs::error;
-		print "Error in RRD::graph for firewallhits: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for firewallhits: ".$ERROR."\n" if $ERROR;
 }
 
 # Generate the Line Quality Graph for the current period of time for values given by collecd
@@ -758,7 +768,7 @@ sub updatepinggraph {
 		"GPRINT:roundtrip:LAST:%3.2lf ms\\j",
 		);
 		$ERROR = 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;
 }
 
 sub updatewirelessgraph {
@@ -793,7 +803,7 @@ sub updatewirelessgraph {
 		"GPRINT:power:LAST:%5.1lf %sdBm\\j",
 		);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for wireless: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for wireless: ".$ERROR."\n" if $ERROR;
 }
 
 # 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 °C\\j",
 		);
 		$ERROR = 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;
 }
 
 # Generate the Temp Graph for the current period of time for values given by collecd and lm_sensors
@@ -875,7 +885,7 @@ sub updatehwtempgraph {
 
 		RRDs::graph (@command);
 		$ERROR = 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;
 }
 
 # Generate the Fan Graph for the current period of time for values given by collecd and lm_sensors
@@ -922,7 +932,7 @@ sub updatehwfangraph {
 
 		RRDs::graph (@command);
 		$ERROR = 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;
 }
 
 # Generate the Voltage Graph for the current period of time for values given by collecd and lm_sensors
@@ -969,7 +979,7 @@ sub updatehwvoltgraph {
 
 		RRDs::graph (@command);
 		$ERROR = RRDs::error;
-		print "Error in RRD::graph for Voltage: ".$ERROR."\n" if $ERROR;
+		return "Error in RRD::graph for Voltage: ".$ERROR."\n" if $ERROR;
 }
 
 
@@ -1051,7 +1061,7 @@ sub updateqosgraph {
 		}
 		RRDs::graph (@command);
 		$ERROR = 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;
 }
 
 # Generate the CPU Frequency Graph for the current period of time for values given by collectd an lm_sensors
@@ -1090,7 +1100,7 @@ sub updatecpufreqgraph {
 
 	RRDs::graph (@command);
 	$ERROR = 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;
 }
 
 # Generate the Thermal Zone Temp CPU Graph
@@ -1129,7 +1139,7 @@ sub updatethermaltempgraph {
 
 	RRDs::graph (@command);
 	$ERROR = 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;
 }
 
 
@@ -1174,7 +1184,7 @@ sub updateentropygraph {
 	RRDs::graph (@command);
 	$ERROR = RRDs::error;
 
-	print "Error in RRD::graph for entropy: ".$ERROR."\n" if $ERROR;
+	return "Error in RRD::graph for entropy: ".$ERROR."\n" if $ERROR;
 }
 
 sub updateconntrackgraph {
@@ -1202,5 +1212,5 @@ sub updateconntrackgraph {
 	RRDs::graph(@command);
 	$ERROR = RRDs::error;
 
-	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');
 
 	&Header::openbox('100%', 'center', $Lang::tr{'entropy'});
-	&Graphs::makegraphbox("entropy.cgi", "day");
+	&Graphs::makegraphbox("entropy.cgi", "entropy", "day");
 	&Header::closebox();
 
 	# 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'}: $name");
-			&Graphs::makegraphbox("netovpnsrv.cgi", $ipsecgraphs{$name}, "day");
+			&Graphs::makegraphbox("netovpnsrv.cgi", "ipsec-$ipsecgraphs{$name}", "day");
 			&Header::closebox();
 		}
 
-- 
2.27.0.windows.1