mirror of
https://github.com/unraid/webgui.git
synced 2026-01-05 09:10:07 -06:00
Dashboard: add hover feature to system resources
This commit is contained in:
@@ -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:?> <?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
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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");
|
||||
}
|
||||
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user