Dashboard: add hover feature to system resources

This commit is contained in:
bergware
2023-12-04 13:28:00 +01:00
parent 1dc3c6e30d
commit 7b06f10193
4 changed files with 51 additions and 34 deletions

View File

@@ -266,10 +266,10 @@ foreach ($cpus as $pair) {
<tr><td><span class='w36'><i class='ups fa fa-compress'></i>_(Usable size)_: <?=my_scale($total,$unit,1,null,1024)." $unit"?></span><i class='ups fa fa-expand'></i>_(Maximum size)_: <?="$memory_maximum $unit"?><?=$low?'*':''?></td></tr>
<tr><td>
<span class='w26'><?if($zfs):?><div class='zfs'><i class='ups fa fa-fw fa-shield'></i>_(ZFS)_: <span id='zfs'></span></div><?else:?>&nbsp;<?endif;?></span>
<span class='w18 center'><span class='center'>_(RAM)_</span><div class='pie' id='sys0'><span class='sys0'></span></div></span>
<span class='w18 center'><span class='center'>_(Flash)_</span><div class='pie' id='sys1'><span class='sys1'></span></div></span>
<span class='w18 center'><span class='center'>_(Log)_</span><div class='pie' id='sys2'><span class='sys2'></span></div></span>
<span class='w18 center'><span class='center'>_(Docker)_</span><div class='pie' id='sys3'><span class='sys3'></span></div></span>
<span class='w18 center'><span class='center'>_(RAM)_</span><div class='pie' id='sys0'><span class='sys0'></span><span class='var0'></span></div></span>
<span class='w18 center'><span class='center'>_(Flash)_</span><div class='pie' id='sys1'><span class='sys1'></span><span class='var1'></span></div></span>
<span class='w18 center'><span class='center'>_(Log)_</span><div class='pie' id='sys2'><span class='sys2'></span><span class='var2'></span></div></span>
<span class='w18 center'><span class='center'>_(Docker)_</span><div class='pie' id='sys3'><span class='sys3'></span><span class='var3'></span></div></span>
</td></tr>
</tbody>
@@ -1185,6 +1185,10 @@ function addProperties() {
$(this).find('td:first').prepend("<i class='fa fa-fw fa-close control tile' onclick='dismiss($(this))' title=\"_(Close Tile)_\"></i>");
});
$('div.frame tr').attr('title','');
$('div#sys0').hover(function(){$('.sys0').hide();$('.var0').show();},function(){$('.sys0').show();$('.var0').hide();});
$('div#sys1').hover(function(){$('.sys1').hide();$('.var1').show();},function(){$('.sys1').show();$('.var1').hide();});
$('div#sys2').hover(function(){$('.sys2').hide();$('.var2').show();},function(){$('.sys2').show();$('.var2').hide();});
$('div#sys3').hover(function(){$('.sys3').hide();$('.var3').show();},function(){$('.sys3').show();$('.var3').hide();});
}
function showContent() {
var count = {'db-box1':$('table#db-box1 tbody').length, 'db-box2':$('table#db-box2 tbody').length, 'db-box3':$('table#db-box3 tbody').length}
@@ -1480,17 +1484,16 @@ dashboard.on('message',function(msg,meta) {
$('.sys'+k).text(v[0]).css({color:fontColor(v[0].slice(0,-1),<?=$display['critical']?>,<?=$display['warning']?>)});
if (k == 0) {
<?if ($zfs):?>
$('#zfs').text(v[2]);
$('#zfs').text(v[3]);
<?endif;?>
var color = setColor(v[0].slice(0,-1),<?=$display['critical']?>,<?=$display['warning']?>);
// header
$('._sys0_').text(v[0]);
$('#_sys0_').finish().animate({width:v[0]},{step:function(){$('#_sys0_').css('overflow','visible').removeClass().addClass(color);}});
// body
$('#sys0').css({background:'conic-gradient(<?=$c1?> 0% '+v[1]+',<?=$c2?> '+v[1]+' '+v[0]+',<?=$c0?> '+v[0]+' 100%'});
$('#sys0').css({background:'conic-gradient(<?=$c1?> 0% '+v[2]+',<?=$c2?> '+v[2]+' '+v[0]+',<?=$c0?> '+v[0]+' 100%'});
} else {
$('#sys'+k).css({background:'conic-gradient(<?=$c1?> 0% '+v[0]+',<?=$c0?> '+v[0]+' 100%'});
}
$('.var'+k).text(v[1]);
});
<?if ($fans):?>
// fans rpm

View File

@@ -21,19 +21,6 @@ require_once "$docroot/plugins/dynamix.vm.manager/include/libvirt_helpers.php";
$_SERVER['REQUEST_URI'] = 'dashboard';
require_once "$docroot/webGui/include/Translations.php";
if (isset($_POST['sys'])) {
switch ($_POST['sys']) {
case 0: $size = exec("awk '/^MemTotal/{t=$2}/^MemAvailable/{a=$2}END{print (t-a)*1024}' /proc/meminfo 2>/dev/null"); break;
case 1: $size = exec("awk '/^size/{print \$3;exit}' /proc/spl/kstat/zfs/arcstats 2>/dev/null"); break;
case 2: $size = exec("df --output=used /boot 2>/dev/null|awk '$1!=\"Used\" {print $1*1024}'"); break;
case 3: $size = exec("df --output=used /var/log 2>/dev/null|awk '$1!=\"Used\" {print $1*1024}'"); break;
case 4: $size = exec("df --output=used /var/lib/docker 2>/dev/null|awk '$1!=\"Used\" {print $1*1024}'"); break;
default: $size = 0;
}
extract(parse_plugin_cfg('dynamix',true));
die(my_scale($size,$unit,null,-1,1024)." $unit");
}
if ($_POST['docker']) {
$user_prefs = $dockerManPaths['user-prefs'];
$DockerClient = new DockerClient();

View File

@@ -14,25 +14,37 @@
<?
$docroot = '/usr/local/emhttp';
$varroot = '/var/local/emhttp';
require_once "$docroot/webGui/include/Helpers.php";
require_once "$docroot/webGui/include/publish.php";
extract(parse_plugin_cfg('dynamix',true));
// add translations
$_SERVER['REQUEST_URI'] = 'main';
require_once "$docroot/webGui/include/Translations.php";
$md5_old = -1;
while (true) {
unset($memory,$sys,$zfs,$rpms,$lsof);
exec("grep -Po '^Mem(Total|Available):\s+\K\d+' /proc/meminfo",$memory);
exec("df /boot /var/log /var/lib/docker|grep -Po '\d+%'",$sys);
exec("sensors -uA 2>/dev/null|grep -Po 'fan\d_input: \K\d+'",$rpms);
$zfs = (exec("awk '/^size/{print \$3;exit}' /proc/spl/kstat/zfs/arcstats 2>/dev/null")?:0)/1024;
unset($memory,$df,$zfs,$fans,$lsof,$meminfo,$sysinfo);
exec("awk '/^Mem(Total|Available)/{print $2*1024}' /proc/meminfo",$memory);
exec("df --output=pcent,used /boot /var/log /var/lib/docker|awk '(NR>1){print $1,$2*1024}'",$df);
exec("sensors -uA 2>/dev/null|grep -Po 'fan\d_input: \K\d+'",$fans);
$zfs = exec("awk '/^size/{print \$3;exit}' /proc/spl/kstat/zfs/arcstats 2>/dev/null")?:0;
[$total,$free] = $memory;
$info = max(round(100*(1-$free/$total)),0)."%;".max(round(100*($total-$free-$zfs)/$total),0)."%;".min(round(100*$zfs/$total),100)."%\0".implode("\0",$sys);
$rpms = count($rpms) ? implode(" RPM\0",$rpms).' RPM' : '';
$meminfo[] = max(round(100*(1-$free/$total)),0)."%";
$meminfo[] = my_scale($total-$free,$unit,null,-1,1024)." $unit";
$meminfo[] = max(round(100*($total-$free-$zfs)/$total),0)."%";
$meminfo[] = min(round(100*$zfs/$total),100)."%\0";
foreach ($df as $data) {
[$pcent,$used] = explode(' ',$data);
$sysinfo[] = $pcent.';'.my_scale($used,$unit,null,-1,1024)." $unit";
}
$fans = count($fans) ? implode(" RPM\0",$fans).' RPM' : '';
$name = array_keys((array)parse_ini_file("$varroot/shares.ini"));
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;
$count = implode("\0",$count);
$echo = "$info\1$rpms\1$count";
$echo = implode(";",$meminfo).implode("\0",$sysinfo)."\1$fans\1".implode("\0",$count);
$md5_new = md5($echo,true);
if ($md5_new !== $md5_old) {
publish('update1', $echo);
@@ -41,3 +53,17 @@ while (true) {
sleep(5);
}
?>
if (isset($_POST['sys'])) {
switch ($_POST['sys']) {
case 0: $size = exec("awk '/^MemTotal/{t=$2}/^MemAvailable/{a=$2}END{print (t-a)*1024}' /proc/meminfo 2>/dev/null"); break;
case 1: $size = exec("awk '/^size/{print \$3;exit}' /proc/spl/kstat/zfs/arcstats 2>/dev/null"); break;
case 2: $size = exec("df --output=used /boot 2>/dev/null|awk '$1!=\"Used\" {print $1*1024}'"); break;
case 3: $size = exec("df --output=used /var/log 2>/dev/null|awk '$1!=\"Used\" {print $1*1024}'"); break;
case 4: $size = exec("df --output=used /var/lib/docker 2>/dev/null|awk '$1!=\"Used\" {print $1*1024}'"); break;
default: $size = 0;
}
extract(parse_plugin_cfg('dynamix',true));
die(my_scale($size,$unit,null,-1,1024)." $unit");
}

View File

@@ -67,7 +67,8 @@ input[value=Edit]{margin:12px 0 0 0;padding:5px 10px}
#current_date{font-size:1.3rem;margin-left:18px}
table.snapshot{margin-top:0}
.switch-button-background{margin-top:4px!important}
div.pie{height:90px;width:90px;border-radius:50%;display:flex;justify-content:center;align-items:center}
div.pie::after{content:'';position:absolute;height:66px;width:66px;border-radius:50%}
div.pie{height:96px;width:96px;border-radius:50%;display:flex;justify-content:center;align-items:center}
div.pie::after{content:'';position:absolute;height:72px;width:72px;border-radius:50%}
div.pie span{z-index:2;font-size:1.6rem;font-weight:bold}
div.zfs{margin-top:70px;color:#d4ac0d;text-align:right;padding-right:30px}
div.zfs{margin-top:74px;color:#d4ac0d;text-align:right;padding-right:30px}
.var0,.var1,.var2,.var3{display:none;font-size:1.3rem!important}