Merge pull request #61 from bergware/master

Add collapsable CPU load details in Dashboard
This commit is contained in:
Eric Schultz
2016-08-27 11:47:51 -05:00
committed by GitHub
5 changed files with 37 additions and 7 deletions

View File

@@ -175,7 +175,9 @@ echo "<td>Array Status</td>".implode('',$row0);
</td></tr><tr><td colspan='4'><center>Load Statistics</center></td></tr></thead>
<tbody>
<tr class='wide'><td>Avg. CPU load</td><td colspan='3'><div class='usage-disk sys'><span id='cpu' style='width:0'></span></div></td></tr>
<?if (count($cpus)>1):?><tr><td rowspan='<?=count($cpus)?>'><?else:?><tr class='wide'><td><?endif;?>Per CPU load</td>
</tbody>
<tbody class='cpu_open' style='display:none'>
<?if (count($cpus)>1):?><tr><td rowspan='<?=count($cpus)?>'><?else:?><tr class='wide'><td><?endif;?><a href='#' onclick='toggle_CPU()' title='Click to hide details' class='none'>Per CPU load</a><span class='red-text'> *</span></td>
<?
$tr = false;
foreach ($cpus as $pair):
@@ -188,6 +190,21 @@ foreach ($cpus as $pair):
echo "</tr>";
$tr = true;
endforeach;
?>
</tbody>
<tbody class='cpu_closed' style='display:none'>
<?
$text = '';
foreach ($cpus as $pair):
list($cpu1, $cpu2) = preg_split('/[,-]/',$pair);
if ($text) $text .= ", ";
$text .= isset($cpu2) ? "[$cpu1/$cpu2]" : $cpu1;
endforeach;
?>
<tr class='wide'><td><a href='#' onclick='toggle_CPU()' title='Click to show details' class='none'>Per CPU load</a><span class='red-text'> *</span></td><td colspan='3' style='text-align:center'><?=$text?></td></tr>
</tbody>
<tbody>
<?
if ($fans>0):
echo $fans>2 ? "<tr><td rowspan='".ceil($fans/2)."'>" : "<tr class='wide'><td>";
echo "FAN speed</td>";
@@ -485,9 +502,22 @@ function dropdown(menu) {
$(select+' option')[$.cookie(menu)].selected = true;
$(select).change();
}
function toggle_CPU(init) {
if (!init) {
if ($.cookie('cpu')===undefined) $.cookie('cpu','close',{path:'/',expires:3650}); else $.removeCookie('cpu',{path:'/'});
}
if ($.cookie('cpu')===undefined) {
$('.cpu_open').show();
$('.cpu_closed').hide();
} else {
$('.cpu_open').hide();
$('.cpu_closed').show();
}
}
$(function() {
dropdown('enter_share');
dropdown('enter_view');
toggle_CPU(true);
update3();
update60();
update30();

View File

@@ -290,7 +290,7 @@ foreach ($pages as $page) {
if (!file_exists($icon)) { $icon = "{$pg['root']}/{$pg['Icon']}"; if (!file_exists($icon)) $icon = false; }
}
if (!$icon) $icon = "/webGui/images/default.png";
echo "<div class=\"Panel\"><a href=\"$link\" onclick=\"$.cookie('one','tab1',{path:'/'})\"><img class=\"PanelImg\" src=\"$icon\" title=\"$title\"><br><div class=\"PanelText\">$title</div></a></div>";
echo "<div class=\"Panel\"><a href=\"$link\" onclick=\"$.cookie('one','tab1',{path:'/'})\"><img class=\"PanelImg\" src=\"$icon\"><br><div class=\"PanelText\">$title</div></a></div>";
}
}
$text = $page['text'];

View File

@@ -55,7 +55,7 @@ function device_info(&$disk) {
case 'grey-off': $help = 'Device not present'; break;
}
$status = "$ctrl<a class='info nohand' onclick='return false'><img src='/webGui/images/{$disk['color']}.png' class='icon'><span>$help</span></a>";
$link = strpos($disk['status'], 'DISK_NP')===false ? "<a href='$path/$type?name=$name' title='".$fancyname." Settings'>".$fancyname."</a>" : $fancyname;
$link = strpos($disk['status'], 'DISK_NP')===false ? "<a href='$path/$type?name=$name'>".$fancyname."</a>" : $fancyname;
return $status.$link;
}
function device_browse(&$disk) {

View File

@@ -3,11 +3,11 @@ html,body{font-family:arimo;font-size:12px;color:#808080;background-color:#00000
img{border:0;text-decoration:none;vertical-align:middle;}
p{text-align:justify;}
p.centered{text-align:left;}
a:hover{text-decoration:underline;}
a{color:#486DBA;text-decoration:none;}
a.none{color:#808080;}
a.img{text-decoration:none;border:none;}
a.info{position:relative;z-index:1;}
a.info:hover{}
a.info span{display:none;}
a.info:hover span{display:block;white-space:nowrap;font-variant:small-caps;position:absolute;left:8px;font-size:11px;line-height:20px;color:#FFFFFF;padding:5px 8px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;background-color:rgba(25,25,25,0.95);box-shadow:0 0 3px #505050;}
a.info:hover span.left{left:-182px;}
@@ -58,7 +58,7 @@ input.trim{width:50px;}
#nav-block #nav-item:hover{border-bottom:thick solid #478406;border-radius:5px;background:-webkit-radial-gradient(#3B3F40,#28292D);background:linear-gradient(#3B3F40,#28292D);}
#nav-block #nav-item.active{color:#FFFFFF;border-right:thin solid #606060;border-bottom:thick solid #478406;border-radius:5px;background:-webkit-radial-gradient(#303030,#000000);background:linear-gradient(#303030,#000000);}
#nav-block #nav-item a{color:#F0F0F0;font-style:normal;display:block;padding-left:10px;padding-right:10px;min-width:46px;}
#nav-block #nav-item a:hover{color:#9CD670;}
#nav-block #nav-item a:hover{color:#9CD670;text-decoration:none;}
#nav-block #nav-item.active a{color:#FFFFFF;}
#nav-block #nav-item.active:hover a{color:#FFFFFF;}
.nav-button-active{color:#FFFFFF;border-right:thin solid #606060;background:-webkit-radial-gradient(#303030,#000000);background:linear-gradient(#303030,#000000);}

View File

@@ -3,11 +3,11 @@ html,body{font-family:arimo;font-size:12px;color:#303030;background-color:#FFFFF
img{border:0;text-decoration:none;vertical-align:middle;}
p{text-align:justify;}
p.centered{text-align:left;}
a:hover{text-decoration:underline;}
a{color:#00529B;text-decoration:none;}
a.none{color:#303030;}
a.img{text-decoration:none;border:none;}
a.info{position:relative;z-index:1;}
a.info:hover{}
a.info span{display:none;}
a.info:hover span{display:block;white-space:nowrap;font-variant:small-caps;position:absolute;left:8px;font-size:11px;line-height:20px;color:#FFFFFF;padding:5px 8px;border:1px solid rgba(255,255,255,0.25);border-radius:3px;background-color:rgba(25,25,25,0.95);box-shadow:0 0 3px #303030;}
a.info:hover span.left{left:-182px;}
@@ -57,7 +57,7 @@ input.trim{width:50px;}
#nav-block #nav-item:hover{border-bottom:thick solid #478406;border-radius:5px;background:-webkit-radial-gradient(#3B3F40,#28292D);background:linear-gradient(#3B3F40,#28292D);}
#nav-block #nav-item.active{color:#FFFFFF;border-right:thin solid #585858;border-bottom:thick solid #478406;border-radius:5px;background:-webkit-radial-gradient(#303030,#000000);background:linear-gradient(#303030,#000000);}
#nav-block #nav-item a{color:#F0F0F0;font-style:normal;display:block;padding-left:10px;padding-right:10px;min-width:46px;}
#nav-block #nav-item a:hover{color:#9CD670;}
#nav-block #nav-item a:hover{color:#9CD670;text-decoration:none;}
#nav-block #nav-item.active a{color:#FFFFFF;}
#nav-block #nav-item.active:hover a{color:#FFFFFF;}
.nav-button-active{color:#FFFFFF;border-right:thin solid #585858;background:-webkit-radial-gradient(#303030,#000000);background:linear-gradient(#303030,#000000);}