mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-01-07 01:59:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard: new system resources presentation

Browse Source 
Use circular bar to represent resources
Make ZFS usage part of RAM usage (with different color)
This commit is contained in:
bergware
2023-12-04 08:06:20 +01:00
parent a4082d0069
commit 0871a7cc5d
7 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
emhttp/plugins/dynamix/DashStats.page
View File

@@ -161,12 +161,12 @@ if ($memory_installed >= 1024) {
$low = $memory_maximum < $memory_installed;
if ($low) $memory_maximum = pow(2,ceil(log($memory_installed)/log(2)));
switch ($display['theme']) {
case 'white': $color = '#1c1b1b'; $grid = '#e3e3e3'; break;
case 'black': $color = '#f2f2f2'; $grid = '#2b2b2b'; break;
case 'azure': $color = '#606e7f'; $grid = '#f3f0f4'; break;
case 'gray' : $color = '#606e7f'; $grid = '#0c0f0b'; break;
default : $color = '#1c1b1b'; $grid = '#e3e3e3'; break;
switch ($theme) {
case 'white': $color = '#1c1b1b'; $grid = '#e3e3e3'; $c0 = '#dcdcdc'; $c1 = '#a8a8a8'; $c2 = '#d4ac0d'; break;
case 'black': $color = '#f2f2f2'; $grid = '#2b2b2b'; $c0 = '#444444'; $c1 = '#787878'; $c2 = '#d4ac0d'; break;
case 'azure': $color = '#606e7f'; $grid = '#f3f0f4'; $c0 = '#eceaec'; $c1 = '#606e7f'; $c2 = '#d4ac0d'; break;
case 'gray' : $color = '#606e7f'; $grid = '#0c0f0b'; $c0 = '#232523'; $c1 = '#606e7f'; $c2 = '#d4ac0d'; break;
default : $color = '#1c1b1b'; $grid = '#e3e3e3'; $c0 = '#dcdcdc'; $c1 = '#a8a8a8'; $c2 = '#d4ac0d'; break;
}
?>
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
@@ -264,11 +264,13 @@ foreach ($cpus as $pair) {
<a href='/Dashboard/Tools/Processes' title="_(View Running Processes)_"><i class='fa fa-fw fa-info-circle control'></i></a>
</td></tr>
<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 id='var0'><td><span class='w26'><i class='ups fa fa-fw fa-microchip'></i>_(RAM)_</span><span class='w72'><span class='sys0 load resize'>0%</span><span class="sys0_ load resize"></span><div class='usage-disk sys'><span id='sys0'></span><span></span></div></span></td></tr>
<tr id='var1'><td><span class='w26'><i class='ups fa fa-fw fa-shield'></i>_(ZFS)_</span><span class='w72'><span class='sys1 load resize'>0%</span><span class="sys1_ load resize"></span><div class='usage-disk sys'><span id='sys1'></span><span></span></div></span></td></tr>
<tr id='var2'><td><span class='w26'><i class='ups fa fa-fw fa-pencil-square'></i>_(Flash)_</span><span class='w72'><span class='sys2 load resize'>0%</span><span class="sys2_ load resize"></span><div class='usage-disk sys'><span id='sys2'></span><span></span></div></span></td></tr>
<tr id='var3'><td><span class='w26'><i class='ups fa fa-fw fa-file-text'></i>_(Log)_</span><span class='w72'><span class='sys3 load resize'>0%</span><span class="sys3_ load resize"></span><div class='usage-disk sys'><span id='sys3'></span><span></span></div></span></td></tr>
<tr id='var4'><td><span class='w26'><i class='ups fa fa-fw fa-docker'></i>_(Docker)_</span><span class='w72'><span class='sys4 load resize'>0%</span><span class="sys4_ load resize"></span><div class='usage-disk sys'><span id='sys4'></span><span></span></div></span></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>
</td></tr>
</tbody>
<tbody title="_(Interface Information)_" class="mixed">
@@ -1183,15 +1185,6 @@ 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','');
$('tr#var0').hover(function(){if(!timers.var0){timers.var0=setTimeout(function(){timers.var0=null;$('.sys0_').hide();$('.sys0').show();},5000);$.post('/webGui/include/DashboardApps.php',{sys:0},function(val){$('.sys0').hide();$('.sys0_').text(val).show();});}});
<?if ($zfs):?>
$('tr#var1').show().hover(function(){if(!timers.var1){timers.var1=setTimeout(function(){timers.var1=null;$('.sys1_').hide();$('.sys1').show();},5000);$.post('/webGui/include/DashboardApps.php',{sys:1},function(val){$('.sys1').hide();$('.sys1_').text(val).show();});}});
<?endif;?>
$('tr#var2').hover(function(){if(!timers.var2){timers.var2=setTimeout(function(){timers.var2=null;$('.sys2_').hide();$('.sys2').show();},5000);$.post('/webGui/include/DashboardApps.php',{sys:2},function(val){$('.sys2').hide();$('.sys2_').text(val).show();});}});
$('tr#var3').hover(function(){if(!timers.var3){timers.var3=setTimeout(function(){timers.var3=null;$('.sys3_').hide();$('.sys3').show();},5000);$.post('/webGui/include/DashboardApps.php',{sys:3},function(val){$('.sys3').hide();$('.sys3_').text(val).show();});}});
<?if ($dockerd):?>
$('tr#var4').show().hover(function(){if(!timers.var4){timers.var4=setTimeout(function(){timers.var4=null;$('.sys4_').hide();$('.sys4').show();},5000);$.post('/webGui/include/DashboardApps.php',{sys:4},function(val){$('.sys4').hide();$('.sys4_').text(val).show();});}});
<?endif;?>
}
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}
@@ -1230,6 +1223,12 @@ function setColor(l, t1, t2) {
case (t2 > 0 && l >= t2): return 'orangebar';
default: return '';}
}
function fontColor(l, t1, t2) {
switch (true) {
case (t1 > 0 && l >= t1): return '#f0000c';
case (t2 > 0 && l >= t2): return '#e68a00';
default: return '#4f8a10';}
}
function openClose(button) {
var hidden = $.cookie('hidden_content');
hidden = hidden==null ? [] : hidden.split(';');
@@ -1477,10 +1476,16 @@ dashboard.on('message',function(msg,meta) {
var part = msg.split('\1');
// memory & disk load
$.each(part[0].split('\0'),function(k,v) {
var load = v.slice(0,-1);
var color = k==1 ? '' : setColor(load,<?=_var($display,'critical',0)?>,<?=_var($display,'warning',0)?>);
$('.sys'+k).text(v);
$('#sys'+k).finish().animate({width:v},{step:function(){$('#sys'+k).css('overflow','visible').removeClass().addClass(color);}});
v = v.split(';');
$('.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]);
<?endif;?>
$('#sys'+k).css({background:'conic-gradient(<?=$c1?> 0% '+v[1]+',<?=$c2?> '+v[1]+' '+v[0]+',<?=$c0?> '+v[0]+' 100%'});
} else {
$('#sys'+k).css({background:'conic-gradient(<?=$c1?> 0% '+v[0]+',<?=$c0?> '+v[0]+' 100%'});
}
});
<?if ($fans):?>
// fans rpm

9
emhttp/plugins/dynamix/nchan/update_1
View File

@@ -22,15 +22,14 @@ while (true) {
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);
exec("awk '/^c_max|^size/{print \$3}' /proc/spl/kstat/zfs/arcstats 2>/dev/null",$zfs);
$zfs = (exec("awk '/^size/{print \$3;exit}' /proc/spl/kstat/zfs/arcstats 2>/dev/null")?:0)/1024;
[$total,$free] = $memory;
$used = $total-$free;
$info = max(round(100*(1-$free/$total)),0)."%\0".min(100,round(100*($zfs[1]??0)/($zfs[0]??1)))."%\0".implode("\0",$sys);
$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' : '';
$names = array_keys((array)parse_ini_file("$varroot/shares.ini"));
$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 ($names as $name) $count[] = $counts[$name] ?? 0;
foreach ($name as $share) $count[] = $counts[$share] ?? 0;
$count = implode("\0",$count);
$echo = "$info\1$rpms\1$count";

1
emhttp/plugins/dynamix/sheets/DashStats-azure.css
View File

@@ -1 +1,2 @@
div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(580px,1fr));column-gap:20px}
div.pie::after{background-color:#d7dbdd}

1
emhttp/plugins/dynamix/sheets/DashStats-black.css
View File

@@ -1 +1,2 @@
div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(610px,1fr));column-gap:20px}
div.pie::after{background-color:#262626}

1
emhttp/plugins/dynamix/sheets/DashStats-gray.css
View File

@@ -1 +1,2 @@
div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(580px,1fr));column-gap:20px}
div.pie::after{background-color:#1b1d1b}

1
emhttp/plugins/dynamix/sheets/DashStats-white.css
View File

@@ -1 +1,2 @@
div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(610px,1fr));column-gap:20px}
div.pie::after{background-color:#f7f9f9}

5
emhttp/plugins/dynamix/sheets/DashStats.css
View File

@@ -35,6 +35,7 @@ span.w26{min-width:26%;max-width:26%;display:inline-block;float:left;overflow:hi
span.w36{min-width:36%;max-width:36%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
span.w44{min-width:44%;max-width:44%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
span.w72{min-width:72%;max-width:72%;display:inline-block;float:left;overflow:hidden;text-overflow:ellipsis}
span.center{display:block;width:90px;text-align:center;margin:4px 0 8px 0}
select#cpuline,select#netline{border:none;padding:0 12px 0 0}
select[name=enter_share],select[name=enter_user]{margin-top:0;float:none}
img#mycase{width:auto;max-width:128px;height:auto;max-height:128px}
@@ -66,3 +67,7 @@ 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 span{z-index:2;font-size:1.6rem;font-weight:bold}
div.zfs{margin-top:70px;color:#d4ac0d;text-align:right;padding-right:30px}