Dashboard: add disk utilization, cpu load & memory usage coloring

This commit is contained in:
bergware
2018-11-10 23:56:24 +01:00
parent 05f723f361
commit fb9175632e
2 changed files with 27 additions and 7 deletions
+16 -4
View File
@@ -402,6 +402,8 @@ if (!count($shares)) echo "<tr><td colspan='4' style='text-align:center;padding-
<script>
var timer2,timer30;
var orange = 70;
var red = 90;
function changeMode(item) {
if (item==0) $.removeCookie('enter_share',{path:'/'}); else $.cookie('enter_share',item,{path:'/',expires:3650});
@@ -444,7 +446,7 @@ function update30() {
$.post('<?=$url?>',{cmd:'port',view:tag,ports:'<?=implode(',',$ports)?>'},function(data) {
if (data) $.each(data.split('#'),function(k,v) {$('#'+tag+k).html(v);});
});
$.post('<?=$url?>',{cmd:'disk',hot:'<?=$display['hot']?>',max:'<?=$display['max']?>',unit:'<?=$display['unit']?>',slots:<?=$slots?>},function(data) {
$.post('<?=$url?>',{cmd:'disk',hot:'<?=$display['hot']?>',max:'<?=$display['max']?>',unit:'<?=$display['unit']?>',slots:<?=$slots?>,text:<?=$display['text']?>,critical:'<?=$display['critical']?>',warning:'<?=$display['warning']?>'},function(data) {
<?if ($slots <= 30):?>
if (data) $('#dash0').html(data);
<?else:?>
@@ -477,7 +479,13 @@ function update60() {
if (data) $('#parity').html(data);
});
$.post('<?=$url?>',{cmd:'sys'},function(data) {
if (data) $.each(data.split('#'),function(k,v) {$('#sys'+k).animate({width:v},{step:function(){$('#sys'+k).css('overflow','visible');}}).text(v);});
if (data) $.each(data.split('#'),function(k,v) {
var load = v.slice(0,-1);
if (load > red) var color = 'redbar';
else if (load > orange) var color = 'orangebar';
else var color = '';
$('#sys'+k).animate({width:v},{step:function(){$('#sys'+k).css('overflow','visible').removeClass().addClass(color);}}).text(v);
});
setTimeout(update60,60000);
});
}
@@ -530,8 +538,12 @@ $.each(json["cpuload"],function(k,v) {
//data is the cpuload.ini file contents
var ini = parseINI(data);
$.each(ini,function(k,v) {
var load = v['host']+'%';
$('#'+k).animate({width:load},{step:function(){$('#'+k).css('overflow','visible');}}).text(load);
var load = v['host'];
if (load > red) var color = 'redbar`';
else if (load > orange) var color = 'orangebar';
else var color = '';
load += '%';
$('#'+k).animate({width:load},{step:function(){$('#'+k).css('overflow','visible').removeClass().addClass(color);}}).text(load);
});
});
$(function() {
+11 -3
View File
@@ -49,8 +49,16 @@ function my_smart(&$source,$name,$page) {
$title .= "Click for context menu";
my_insert($source, "<span id='smart-$name' name='$page' class='$thumb'><img src=\"$path/$thumb.png\" onmouseover=\"this.style.cursor='pointer'\" title=\"$title\"></span>");
}
function my_usage(&$source,$used) {
my_insert($source, $used ? "<div class='usage-disk all'><span style='width:$used'>$used</span></div>" : "-");
function my_usage(&$source,$used,&$disk) {
if ($_POST['text']==2 || $_POST['text']==21) {
$load = substr($used,0,-1);
$critical = $disk['critical'] ?? $_POST['critical'];
$warning = $disk['warning'] ?? $_POST['warning'];
if ($load >= $critical) $class = 'redbar';
elseif ($load >= $warning) $class = 'orangebar';
else $class = 'greenbar';
} else $class = false;
my_insert($source, $used ? "<div class='usage-disk all'><span style='width:$used'".($class?" class='$class'":"").">$used</span></div>" : "-");
}
function my_temp($value,$unit) {
return ($unit=='F' ? round(9/5*$value+32) : $value)." $unit";
@@ -207,7 +215,7 @@ case 'disk':
else
if (!strpos($state,'blink') && $temp>0) my_insert($row6[$n],"<span class='temp-text'>".my_temp($temp,$_POST['unit'])."</span>");
if ($disk['device'] && !strpos($state,'blink')) my_smart($row7[$n],$disk['name'],'Device');
my_usage($row8[$n],($disk['type']!='Parity' && $disk['fsStatus']=='Mounted')?(($disk['fsSize'] ? round((1-$disk['fsFree']/$disk['fsSize'])*100):0).'%'):'');
my_usage($row8[$n],($disk['type']!='Parity' && $disk['fsStatus']=='Mounted')?(($disk['fsSize'] ? round((1-$disk['fsFree']/$disk['fsSize'])*100):0).'%'):'',$disk);
}
};
$devRow = function($n,$disk) use (&$row4,&$row6,&$row7,$path) {