web: Refactor graphs

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl
index 96c6c26ead21eb9c5f7958bae3418f7c080f0c4a..4bf1a577942975d9d42d48923e5e4011a40a0646 100644 (file)
--- a/config/cfgroot/graphs.pl
+++ b/config/cfgroot/graphs.pl
@@ -31,10 +31,10 @@ require "${General::swroot}/lang.pl";
 require "${General::swroot}/header.pl";
 
 # Approximate size of the final graph image including canvas and labeling (in pixels, mainly used for placeholders)
-our %image_size = ('width' => 900, 'height' => 300);
+our %image_size = ('width' => 900, 'height' => 400);
 
 # Size of the actual data area within the image, without labeling (in pixels)
-our %canvas_size = ('width' => 800, 'height' => 190);
+our %canvas_size = ('width' => 800, 'height' => 290);
 
 # List of all available time ranges
 our @time_ranges = ("hour", "day", "week", "month", "year");
@@ -111,21 +111,26 @@ sub makegraphbox {
        $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>
+               <div class="graph" id="rrdimg-$name" data-origin="$origin" data-graph="$name" data-default-range="$default_range">
+                       <img src="/cgi-bin/getrrdimage.cgi?origin=${origin}&graph=${name}&range=${default_range}" alt="$Lang::tr{'graph'} ($name)">
+
+                       <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>
+                               <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>
+                       </ul>
+               </div>
 END
 }
 
@@ -143,7 +148,6 @@ sub updatecpugraph {
                "-l 0",
                "-u 100",
                "-r",
-               "-t ".$Lang::tr{'cpu usage per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'percentage'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -270,7 +274,6 @@ sub updateloadgraph {
                "-1".$period,
                "-l 0",
                "-r",
-               "-t ".$Lang::tr{'uptime load average'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'processes'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -303,7 +306,6 @@ sub updatememorygraph {
                "-l 0",
                "-u 100",
                "-r",
-               "-t ".$Lang::tr{'memory usage per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'percentage'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -359,7 +361,6 @@ sub updateswapgraph {
                "-l 0",
                "-u 100",
                "-r",
-               "-t ".$Lang::tr{'swap usage per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'percentage'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -410,7 +411,6 @@ sub updateprocessescpugraph {
                "-1".$period,
                "-l 0",
                "-r",
-               "-t ".$Lang::tr{'processes'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
                "--color=BACK".$color{"color21"}
@@ -457,7 +457,6 @@ sub updateprocessesmemorygraph {
                "-1".$period,
                "-l 0",
                "-r",
-               "-t ".$Lang::tr{'processes'}." ".$Lang::tr{'memory'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -500,7 +499,6 @@ sub updatediskgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$disk." ".$Lang::tr{'disk access'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -544,7 +542,6 @@ sub updateifgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'traffic on'}." ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -581,7 +578,6 @@ sub updatevpngraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'traffic on'}." ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -618,7 +614,6 @@ sub updatevpnn2ngraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'traffic on'}." ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -683,7 +678,6 @@ sub updatefwhitsgraph {
                        "--start",
                        "-1".$period,
                        "-r",
-                       "-t ".$Lang::tr{'firewall hits per'}." ".$Lang::tr{$period."-graph"},
                        "-v ".$Lang::tr{'bytes per second'},
                        "--color=SHADEA".$color{"color19"},
                        "--color=SHADEB".$color{"color19"},
@@ -762,7 +756,6 @@ sub updatefwhitsgraph {
                        "--start",
                        "-1".$period,
                        "-r",
-                       "-t ".$Lang::tr{'firewall hits per'}." ".$Lang::tr{$period."-graph"},
                        "-v ".$Lang::tr{'bytes per second'},
                        "--color=SHADEA".$color{"color19"},
                        "--color=SHADEB".$color{"color19"},
@@ -849,7 +842,6 @@ sub updatepinggraph {
                "-1".$period,
                "-l 0",
                "-r",
-               "-t ".$Lang::tr{'linkq'}." ".$host." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ms",
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -887,7 +879,6 @@ sub updatewirelessgraph {
                "-",
                "--start",
                "-1".$period,
-               "-t Wireless ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v dBm",
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -925,7 +916,6 @@ sub updatehddgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$disk." ".$Lang::tr{'harddisk temperature'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v Celsius",
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -959,7 +949,6 @@ sub updatehwtempgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'mbmon temp'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v Celsius",
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -1007,7 +996,6 @@ sub updatehwfangraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'mbmon fan'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
                "--color=BACK".$color{"color21"},
@@ -1054,7 +1042,6 @@ sub updatehwvoltgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'mbmon volt'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
                "--color=BACK".$color{"color21"},
@@ -1121,7 +1108,6 @@ sub updateqosgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'Utilization on'}." (".$qossettings{'DEV'}.") ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -1183,7 +1169,6 @@ sub updatecpufreqgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'cpu frequency per'}." ".$Lang::tr{$period."-graph"},
                "-v MHz",
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -1223,7 +1208,6 @@ sub updatethermaltempgraph {
                "--start",
                "-1".$period,
                "-r",
-               "-t ".$Lang::tr{'acpitemp'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v Celsius",
                "--color=SHADEA".$color{"color19"},
                "--color=SHADEB".$color{"color19"},
@@ -1277,7 +1261,6 @@ sub updateconntrackgraph {
                "-1" . $period,
                "-r",
                "--lower-limit","0",
-               "-t $Lang::tr{'connection tracking'}",
                "-v $Lang::tr{'open connections'}",
                "DEF:conntrack=$mainsettings{'RRDLOG'}/collectd/localhost/conntrack/conntrack.rrd:entropy:AVERAGE",
                "LINE3:conntrack#ff0000:" . sprintf("%-15s", $Lang::tr{'open connections'}),

diff --git a/config/cfgroot/header.pl b/config/cfgroot/header.pl
index fa11ca0fabb48e2ace884efba17176180dded8c2..d173c1841cd11e5b736884a93f53ecdbf69518c4 100644 (file)
--- a/config/cfgroot/header.pl
+++ b/config/cfgroot/header.pl
@@ -17,6 +17,8 @@ use HTML::Entities();
 use Socket;
 use Time::Local;
 
+require "${General::swroot}/graphs.pl";
+
 our %color = ();
 &General::readhash("/srv/web/ipfire/html/themes/ipfire/include/colors.txt", \%color);
 
@@ -379,6 +381,18 @@ sub closebox {
        print "</section>";
 }
 
+sub graph($) {
+       my $title = shift;
+
+       # Open a new section with a title
+       &opensection($title);
+
+       &Graphs::makegraphbox(@_);
+
+       # Close the section
+       &closesection();
+}
+
 sub green_used() {
     if ($Network::ethernet{'GREEN_DEV'} && $Network::ethernet{'GREEN_DEV'} ne "") {
         return 1;

diff --git a/html/cgi-bin/services.cgi b/html/cgi-bin/services.cgi
index 0d06ab5fecba97e9d00128e9d5da37ae7e3d5882..e1e901c4eed70d02e665163f172a143a63303303 100644 (file)
--- a/html/cgi-bin/services.cgi
+++ b/html/cgi-bin/services.cgi
@@ -214,7 +214,7 @@ END
        print "</table></div>\n";
        &Header::closebox();
 
-       &Header::openbox('100%', 'center', "$Lang::tr{'processes'} $Lang::tr{'graph'}");
+       &Header::opensection('100%', 'center', "$Lang::tr{'processes'} $Lang::tr{'graph'}");
        &Graphs::makegraphbox("services.cgi","processescpu","day");
        &Header::closebox();
 

diff --git a/html/cgi-bin/system.cgi b/html/cgi-bin/system.cgi
index c1da5f53621f924247c10dabeb2057b7ada6c251..a6f60409d643a7d3fe04fd54bce55dc3b7490e16 100644 (file)
--- a/html/cgi-bin/system.cgi
+++ b/html/cgi-bin/system.cgi
@@ -26,32 +26,24 @@ use strict;
 #use CGI::Carp 'fatalsToBrowser';
 
 require '/var/ipfire/general-functions.pl';
-require "${General::swroot}/lang.pl";
 require "${General::swroot}/header.pl";
-require "${General::swroot}/graphs.pl";
 
-my %color = ();
 my %mainsettings = ();
 &General::readhash("${General::swroot}/main/settings", \%mainsettings);
-&General::readhash("/srv/web/ipfire/html/themes/ipfire/include/colors.txt", \%color);
 
 &Header::showhttpheaders();
+
 &Header::openpage($Lang::tr{'status information'}, 1, '');
-&Header::openbigbox('100%', 'left');
 
-&Header::openbox('100%', 'center', "CPU $Lang::tr{'graph'}");
-&Graphs::makegraphbox("system.cgi","cpu","day");
-&Header::closebox();
+# Processor Graph
+&Header::graph("$Lang::tr{'processors'}", "system.cgi", "cpu", "day");
 
+# CPU Frequency
 if ( -e "$mainsettings{'RRDLOG'}/collectd/localhost/cpufreq/cpufreq-0.rrd"){
-       &Header::openbox('100%', 'center', "$Lang::tr{'cpu frequency'} $Lang::tr{'graph'}");
-       &Graphs::makegraphbox("system.cgi","cpufreq","day");
-       &Header::closebox();
+       &Header::graph("$Lang::tr{'cpu frequency'}", "system.cgi", "cpufreq", "day");
 }
 
-&Header::openbox('100%', 'center', "$Lang::tr{'uptime load average'} $Lang::tr{'graph'}");
-&Graphs::makegraphbox("system.cgi","load","day");
-&Header::closebox();
+# Load Average
+&Header::graph("$Lang::tr{'load average'}", "system.cgi", "load", "day");
 
-&Header::closebigbox();
 &Header::closepage();

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index fac3703fc733c4c830ea4dea1314eb046d166559..8fb34326396ad68b65724c4e40da1794d4858c95 100644 (file)
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -1,12 +1,16 @@
 :root {
-       --color-green        : #339933;
-       --color-green-invert : #ffffff;
-       --color-red          : #993333;
-       --color-red-invert   : #ffffff;
-       --color-blue         : #333399;
-       --color-blue-invert  : #ffffff;
-       --color-grey         : #d6d6d6;
-       --color-light-grey   : #f0f0f0;
+       --color-green          : #339933;
+       --color-green-invert   : #ffffff;
+       --color-red            : #993333;
+       --color-red-invert     : #ffffff;
+       --color-blue           : #333399;
+       --color-blue-invert    : #ffffff;
+       --color-grey           : #d6d6d6;
+       --color-light-grey     : #f0f0f0;
+
+       --color-primary        : #ff2e52;
+       --color-primary-invert : #ffffff;
+       --color-text           : #363636;
 }
 
 /* This controls the width of the fixed width layouts */
@@ -397,6 +401,51 @@ table.fw-nat tbody tr td {
        height: 2.25em;
 }
 
+/*
+       Graphs
+*/
+
+.graph {
+       padding: 0.125rem;
+}
+
+.graph img {
+       width: 100%;
+       min-height: 360px;
+
+       margin-bottom: 0.5rem;
+       padding: 0;
+
+       border: 1px solid var(--color-grey);
+}
+
+.graph ul {
+       list-style-type: none;
+
+       display: flex;
+       justify-content: center;
+}
+
+.graph ul li {
+       margin: 0 0.125rem;
+}
+
+.graph ul li button {
+       background: none;
+       border: none;
+       cursor: pointer;
+
+       background-color: var(--color-grey);
+       color: var(--color-text);
+
+       padding: 0.5rem 1rem;
+}
+
+.graph ul li button.selected {
+       background-color: var(--color-primary);
+       color: var(--color-primary-invert);
+}
+
 /* RRD graph images */
 
 div.rrdimage > ul {