Dashboard: added dynamic element creation in RAM usage graph

This commit is contained in:
bergware
2023-12-14 02:21:21 +01:00
parent 3e427d2802
commit 952f432058
2 changed files with 38 additions and 18 deletions

View File

@@ -169,11 +169,11 @@ $low = $memory_maximum < $memory_installed;
if ($low) $memory_maximum = pow(2,ceil(log($memory_installed)/log(2)));
switch ($theme) {
case 'white': $color = '#1c1b1b'; $grid = '#e3e3e3'; $c0 = '#dcdcdc'; $c1 = '#a8a8a8'; $c2 = '#d77e0d'; $c3 = '#d4ac0d'; break;
case 'black': $color = '#f2f2f2'; $grid = '#2b2b2b'; $c0 = '#444444'; $c1 = '#787878'; $c2 = '#d77e0d'; $c3 = '#d4ac0d'; break;
case 'azure': $color = '#606e7f'; $grid = '#f3f0f4'; $c0 = '#eceaec'; $c1 = '#606e7f'; $c2 = '#d77e0d'; $c3 = '#d4ac0d'; break;
case 'gray' : $color = '#606e7f'; $grid = '#0c0f0b'; $c0 = '#232523'; $c1 = '#606e7f'; $c2 = '#d77e0d'; $c3 = '#d4ac0d'; break;
default : $color = '#1c1b1b'; $grid = '#e3e3e3'; $c0 = '#dcdcdc'; $c1 = '#a8a8a8'; $c2 = '#d77e0d'; $c3 = '#d4ac0d'; break;
case 'white': $color = '#1c1b1b'; $grid = '#e3e3e3'; $c0 = '#a8a8a8'; $c1 = '#dcdcdc'; break;
case 'black': $color = '#f2f2f2'; $grid = '#2b2b2b'; $c0 = '#787878'; $c1 = '#444444'; break;
case 'azure': $color = '#606e7f'; $grid = '#f3f0f4'; $c0 = '#606e7f'; $c1 = '#eceaec'; break;
case 'gray' : $color = '#606e7f'; $grid = '#0c0f0b'; $c0 = '#606e7f'; $c1 = '#232523'; break;
default : $color = '#1c1b1b'; $grid = '#e3e3e3'; $c0 = '#a8a8a8'; $c1 = '#dcdcdc'; break;
}
?>
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
@@ -282,6 +282,7 @@ foreach ($cpus as $pair) {
<?if($zfs):?>
<i class='ups fa fa-circle zfs'></i>_(ZFS cache)_: <span id='zfs'></span><br>
<?endif;?>
<span id='dynamic'></span>
<i class='ups fa fa-circle free'></i>_(Free)_: <span id='free'></span><br>
</div></span>
<span class='w18 center'><span class='center'><a class='info hand none'>_(RAM usage)_<span>_(Percent of total used memory)_ (<?=$ramsize?>)</span></a></span><div class='pie' id='sys0'><span class='sys0'></span><span class='var0'></span></div></span>
@@ -789,7 +790,7 @@ function sanitizeMultiCookie(cookieName, delimiter, removeDuplicates = false) {
}
}
var colors = ['<?=$c0?>','<?=$c1?>','<?=$c2?>','<?=$c3?>'];
var colors = ['<?=$c0?>','<?=$c1?>','#d77e0d','#d4ac0d','#cd5c5c','#ffc0cb','#e6e6fa','#9370db','#7cfc00','#228b22','#00ffff','#4682b4'];
var ports = [<?=implode(',',array_map('escapestring',$ports))?>];
var cpu = [];
var rxd = [];
@@ -1510,22 +1511,30 @@ dashboard.on('message',function(msg,meta) {
<?if ($zfs):?>
$('#zfs').text(v[9]);
<?endif;?>
$('#free').text(v[3]);
var color = setColor(load,<?=$display['critical']?>,<?=$display['warning']?>);
$('.sys0_').text(v[0]);
$('#sys0_').finish().animate({width:v[0]},{step:function(){$('#sys0_').css('overflow','visible').removeClass().addClass(color);}});
var start = 0;
var end = parseInt(v[4]);
var ring = [colors[1]+' '+start+'% '+end+'%']
var ring = [colors[0]+' '+start+'% '+end+'%']
for (var i=6; i < v.length; i=i+2) {
start = end;
end += parseInt(v[i]);
ring.push(colors[(i-2)/2]+' '+start+'% '+end+'%');
}
ring.push(colors[0]+' '+v[0]+' 100%');
ring.push(colors[1]+' '+v[0]+' 100%');
$('#sys0').css({'background':'conic-gradient('+ring.join(',')+')'});
var dynamic = v[v.length-1].split('\n');
v[v.length-1] = dynamic[0];
var names = (dynamic[1]||'').split('\r');
// dynamic info from hook scripts
var html = [];
for (var i=0,name; name=names[i]; i++) if (name) html.push("<i class='ups fa fa-circle' style='color:"+colors[i+4]+"'></i>"+name+": "+v[i*2+11]+"<br>");
$('#dynamic').html(html.join(''));
$('#free').text(v[3]);
} else {
$('#sys'+k).css({'background':'conic-gradient('+colors[1]+' 0% '+v[0]+','+colors[0]+' '+v[0]+' 100%)'});
$('#sys'+k).css({'background':'conic-gradient('+colors[0]+' 0% '+v[0]+','+colors[1]+' '+v[0]+' 100%)'});
}
});
<?if ($fans):?>

View File

@@ -33,18 +33,29 @@ while (true) {
$vmsize = file_exists($pidfile) ? exec("virsh domstats --list-active --balloon | awk -F= '/^ *balloon.rss=/{t+=\$2}END{print t*1024}'") : 0;
$zfs = exec("awk '/^size/{print \$3;exit}' /proc/spl/kstat/zfs/arcstats 2>/dev/null") ?: 0;
[$total,$free] = $memory;
$used = $total-$free;
$services = $used-$vmsize-$zfs;
$meminfo[] = round(100*$used/$total).'%';
$used = $total-$free;
$names = $bytes = [];
$hooks = array_slice(array_filter(glob("/usr/local/emhttp/plugins/*/system/*",GLOB_NOSORT),function($file){return is_executable($file);}),0,8);
foreach ($hooks as $hook) {
$names[] = basename($hook); // name of element
$bytes[] = @intval(exec(escapeshellarg($hook))); // value in bytes of element
}
$services = $used-$vmsize-$zfs-array_sum($bytes);
$meminfo[] = round(100*$used/$total)."%";
$meminfo[] = my_scale($used,$unit,null,-1,1024)." $unit";
$meminfo[] = round(100*($free)/$total);
$meminfo[] = round(100*$free/$total);
$meminfo[] = my_scale($free,$unit,null,-1,1024)." $unit";
$meminfo[] = round(100*$services/$total);
$meminfo[] = my_scale($services,$unit,null,-1,1024)." $unit";
$meminfo[] = round(100*($vmsize)/$total);
$meminfo[] = round(100*$vmsize/$total);
$meminfo[] = my_scale($vmsize,$unit,null,-1,1024)." $unit";
$meminfo[] = round(100*($zfs)/$total);
$meminfo[] = my_scale($zfs,$unit,null,-1,1024)." $unit\0";
$meminfo[] = round(100*$zfs/$total);
$meminfo[] = my_scale($zfs,$unit,null,-1,1024)." $unit";
foreach ($bytes as $byte) {
// parse hook information
$meminfo[] = round(100*$byte/$total);
$meminfo[] = my_scale($byte,$unit,null,-1,1024)." $unit";
}
foreach ($df as $data) {
[$pcent,$used] = explode(' ',$data);
$sysinfo[] = $pcent.';'.my_scale($used,$unit,null,-1,1024)." $unit";
@@ -53,7 +64,7 @@ while (true) {
exec("LANG='en_US.UTF8' lsof -Owl /mnt/disk[0-9]* 2>/dev/null|awk '/^shfs/ && \$0!~/\.AppleD(B|ouble)/ && \$5==\"REG\"'|awk -F/ '{print \$4}'",$lsof);
$counts = array_count_values($lsof); $count = [];
foreach ($name as $share) $count[] = $counts[$share] ?? 0;
$echo = implode(";",$meminfo).implode("\0",$sysinfo)."\1".(count($fans)?implode(" RPM\0",$fans).' RPM':'')."\1".implode("\0",$count);
$echo = implode(";",$meminfo)."\n".implode("\r",$names)."\0".implode("\0",$sysinfo)."\1".(count($fans)?implode(" RPM\0",$fans).' RPM':'')."\1".implode("\0",$count);
$md5_new = md5($echo,true);
if ($md5_new !== $md5_old) {
publish('update1', $echo);