webadmin/bpfire
1
0
Fork 0
mirror of https://github.com/vincentmli/bpfire.git synced 2026-04-09 18:45:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

web: Refactor graphs

Browse Source 
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
This commit is contained in:
Michael Tremer
2024-03-23 20:56:58 +01:00
parent 2dd6bc7225
commit 3cd821c122
5 changed files with 92 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
config/cfgroot/graphs.pl
View File

@@ -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'}),

14
config/cfgroot/header.pl
View File

@@ -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;

2
html/cgi-bin/services.cgi
View File

@@ -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();

22
html/cgi-bin/system.cgi
View File

@@ -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();

65
html/html/themes/ipfire/include/css/style.css
View File

@@ -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 {