From 3cd821c122e01ad9903aec6629d65b73158f7dd1 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Sat, 23 Mar 2024 20:56:58 +0100 Subject: [PATCH] web: Refactor graphs Signed-off-by: Michael Tremer --- config/cfgroot/graphs.pl | 43 ++++-------- config/cfgroot/header.pl | 14 ++++ html/cgi-bin/services.cgi | 2 +- html/cgi-bin/system.cgi | 22 ++----- html/html/themes/ipfire/include/css/style.css | 65 ++++++++++++++++--- 5 files changed, 92 insertions(+), 54 deletions(-) diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl index 96c6c26ea..4bf1a5779 100644 --- 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 < -
    +
    + $Lang::tr{'graph'} ($name) + +
      END # Print range select buttons foreach my $range (@time_ranges) { print < +
    • + +
      • END } print < - $Lang::tr{'graph'} ($name) -
    +
+ 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 fa11ca0fa..d173c1841 100644 --- 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 ""; } +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 0d06ab5fe..e1e901c4e 100644 --- a/html/cgi-bin/services.cgi +++ b/html/cgi-bin/services.cgi @@ -214,7 +214,7 @@ END print "\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 c1da5f536..a6f60409d 100644 --- 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 fac3703fc..8fb343263 100644 --- 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 { -- 2.39.5