webgui/plugins/dynamix/DashStats.page

Menu="Dashboard"
Nchan="wg_poller,update_1,update_2,update_3,ups_status:stop"
---
<?PHP
/* Copyright 2005-2023, Lime Technology
 * Copyright 2012-2023, Bergware International.
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License version 2,
 * as published by the Free Software Foundation.
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
*/
?>
<?
function dmidecode($key,$n,$all=true) {
  $entries = array_filter(explode($key,shell_exec("dmidecode -qt$n")));
  $properties = [];
  foreach ($entries as $entry) {
    $property = [];
    foreach (explode("\n",$entry) as $line) if (strpos($line,': ')!==false) {
      [$key,$value] = my_explode(': ',trim($line));
      $property[$key] = $value;
    }
    $properties[] = $property;
  }
  return $all ? $properties : $properties[0];
}
function export_settings($protocol,$share) {
  if ($protocol!='yes' || $share['export']=='-') return "-";
  if ($share['export']=='e') return _(ucfirst($share['security']));
  return '<em>'._(ucfirst($share['security'])).'</em>';
}
function vpn_peers($file) {
  $peers = [];
  $entries = array_filter(array_map('trim',preg_split('/\[(Interface|Peer)\]/',file_get_contents($file))));
  foreach($entries as $key => $entry) {
    $noname = true;
    foreach (explode("\n",$entry) as $row) {
      if ($key>1 && $row[0]=='#') {$peers[$key-1] = substr($row,1); $noname = false;}
    }
    if ($key>1 && $noname) $peers[$key-1] = "Peer ".($key-1);
  }
  return $peers;
}
function customTiles($column) {
  global $mytiles;
  if (isset($mytiles)) foreach ($mytiles as $tile) if (!empty($tile[$column])) echo $tile[$column];
}

// adjust the text color in log window
$fgcolor = in_array($theme,['white','azure']) ? '#1c1c1c' : '#f2f2f2';
exec("sed -ri 's/^\.logLine\{color:#......;/.logLine{color:$fgcolor;/' $docroot/plugins/dynamix.docker.manager/log.htm >/dev/null &");

$dockerd = pgrep('dockerd');
$libvirtd = pgrep('libvirtd');
$apcupsd = file_exists('/var/run/apcupsd.pid');
$conf  = glob('/etc/wireguard/wg*.conf');
$wireguard = is_executable('/usr/bin/wg') && count($conf);
$started = $var['fsState']=='Started';
$sleep = isset($display['sleep']);
$array_size = $array_used = 0;
$extra_size = $extra_used = 0;
$cache_size = $cache_used = [];
$cache_type = $cache_rate = [];

$parity = $var['mdResync'];
$mover = file_exists('/var/run/mover.pid');
$btrfs = exec('pgrep -cf /sbin/btrfs');
$dot = $display['number'][0];

foreach ($disks as $disk) {
  switch ($disk['type']) {
  case 'Data':
    if (isset($disk['fsFree'])) {
      $array_size += $disk['fsSize'];
      $array_used += $disk['fsSize']-$disk['fsFree'];
    }
    break;
  case 'Cache':
    $name = $disk['name'];
    if (in_array($name,$pools)) {
      $cache_size[$name] = $disk['fsSize'];
      $cache_used[$name] = $disk['fsSize']-$disk['fsFree'];
      $cache_type[$name] = $disk['rotational'] ? ($disk['luksState'] ? 'disk-encrypted' : 'disk') : 'nvme';
      $cache_rate[$name] = number_format(100*$cache_used[$name]/($cache_size[$name] ?: 1),1,$dot,'');
      if (!$disks[$name]['devices']) unset($pools[array_search($name,$pools)]);
    }
    break;
  }
}
foreach ($devs as $disk) {
  $extra_size += $disk['sectors']*$disk['sector_size'];
}
$array_percent = number_format(100*$array_used/($array_size ?: 1),1,$dot,'');
exec('cat /sys/devices/system/cpu/*/topology/thread_siblings_list|sort -nu', $cpus);
$wg_up = $wireguard ? exec("wg show interfaces") : '';
$wg_up = $wg_up ? explode(' ',$wg_up) : [];
$up    = count($wg_up);
$down  = max(count($conf)-$up,0);
$fans  = exec("sensors -uA 2>/dev/null|grep -c 'fan[0-9]_input'");
$autofan = is_executable("$docroot/plugins/dynamix.system.autofan/scripts/rc.autofan");
$group = $var['shareSMBEnabled']=='yes' | $var['shareNFSEnabled']=='yes';
$names = [];
$cache_only = $encrypted = 0;
foreach ($shares as $share) {
  if ($share['useCache']=='only') $cache_only++;
  if ($share['luksStatus']>0) $encrypted++;
}
$passwd = $nopass = 0;
foreach ($users as $user) if ($user['passwd']=='yes') $passwd++; else $nopass++;

$boot   = "/boot/config/plugins/dynamix";
$myfile = "case-model.cfg";
$mycase = file_exists("$boot/$myfile") ? file_get_contents("$boot/$myfile") : false;

$board  = dmidecode('Base Board Information','2',0);
$serial = _("s/n").": ".($board['Serial Number'] ?? "--");
$board  = ($board['Manufacturer'] ?? "").' '.($board['Product Name'] ?? "").' '.(isset($board['Version']) ? ", "._("Version")." ".$board['Version'] : "");

$bios = dmidecode('BIOS Information','0',0);
$biosdate = _("BIOS dated").": "._(my_time(strtotime($bios['Release Date'] ?? ""),$display['date']),0);
$bios = $bios['Vendor'].(isset($bios['Version']) ? ", "._("Version")." ".$bios['Version'] : "");

$cpu = dmidecode('Processor Information','4',0);
$cpumodel = str_ireplace(["Processor","(C)","(R)","(TM)"],["","&#169;","&#174;","&#8482;"],$cpu['Version'] ?? exec("grep -Pom1 'model name\s+:\s*\K.+' /proc/cpuinfo"));
$cpumodel .= (strpos($cpumodel,'@')===false && !empty($cpu['Current Speed']) ? " @ {$cpu['Current Speed']}" : "");

$total = exec("awk '/^MemTotal/{print $2*1024}' /proc/meminfo");
unset($ports); exec("ls /sys/class/net|grep -Po '^(lo|(bond|eth)\d+)$'",$ports);

$sizes = ['MB','GB','TB'];
$memory_type = $ecc = '';
$memory_installed = $memory_maximum = 0;
$memory_devices = dmidecode('Memory Device','17');
foreach ($memory_devices as $device) {
  if (!is_numeric($device['Size'][0])) continue;
  [$size, $unit] = my_explode(' ',$device['Size']);
  $base = array_search($unit,$sizes);
  if ($base!==false) $memory_installed += $size*pow(1024,$base);
  if (!$memory_type && $device['Type']!='Unknown') $memory_type = $device['Type'];
}
$memory_array = dmidecode('Physical Memory Array','16');
foreach ($memory_array as $device) {
  [$size, $unit] = my_explode(' ',$device['Maximum Capacity']);
  $base = array_search($unit,$sizes);
  if ($base>=1) $memory_maximum += $size*pow(1024,$base);
  if (!$ecc && $device['Error Correction Type']!='None') $ecc = "{$device['Error Correction Type']} ";
}
if ($memory_installed >= 1024) {
  $memory_installed = round($memory_installed/1024);
  $memory_maximum = round($memory_maximum/1024);
  $unit = 'GiB';
} else $unit = 'MiB';

// If maximum < installed then roundup maximum to the next power of 2 size of installed. E.g. 6 -> 8 or 12 -> 16
$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;
}
?>
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.ui.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov("/plugins/dynamix.docker.manager/styles/style-$theme.css")?>">
<style>
div.frame{padding-top:14px;padding-bottom:160px}
div.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(<?=$themes1?'610px':'570px'?>,1fr));column-gap:30px}
div.tile{display:none}
div#iframe-popup{display:none;-webkit-overflow-scrolling:touch}
div.last{padding-bottom:12px}
div.leftside{float:left;width:66%}
div.rightside{float:right;margin:0;text-align:center}
div[id$=chart]{margin:-12px 8px -24px -18px}
span.ctrl{float:right;margin-top:0;margin-right:10px}
span.ctrl span{font-size:2rem!important}
span.outer{float:left}
span.inner{width:143px}
span.rx{width:80px;display:inline-block}
span.busy,i.inactive{opacity:0.5}
span.dense{width:170px;display:inline-block}
span#ups_model{margin-right:30px}
span#chart-toggle{float:right}
span.header,tr.header{font-size:1.1rem!important;text-transform:uppercase;letter-spacing:1px}
span.wg1{font-size:1.1rem;text-indent:24px}
span.wg2{font-size:1.1rem}
span[id^=cpu],span[id^=sys]{width:0}
span[class^="fa "]{font-size:1.6rem;margin-right:18px}
span.fan{width:36%;display:inline-block}
span.w18{width:18%;display:inline-block;float:left}
span.w26{width:26%;display:inline-block;float:left}
span.w36{width:36%;display:inline-block;float:left}
span.w44{width:44%;display:inline-block;float:left}
span.w72{width:72%;display:inline-block;float:left}
select#cpuline,select#netline{border:none;padding:0 12px 0 0}
select[name=enter_share]{margin-top:0}
img#mycase{width:auto;max-width:128px;height:auto;max-height:128px}
i.heat{margin-left:8px}
i.ups{margin-right:8px;font-size:1.4rem!important}
i.vpn{font-size:1.4rem!important;cursor:pointer}
i.f32{font-size:32px!important}
i.f14{font-size:1.4rem!important}
i[class^="icon-"]{font-size:1.6rem;margin-right:8px}
i[class^="icon-u-"]{font-size:inherit}
i#mycase[class^="case-"]{font-size:128px}
i#mycase[class^="fa "]{font-size:96px}
a.cpu_close,span.hand{cursor:pointer;z-index:1001}
tr#cpu_chart,.cpu_open{display:none}
td.none{text-align:center;padding-top:12px}
input[value=Edit]{margin:12px 0 0 0;padding:5px 10px}
.share1,.share3,.user1,.user3,.view1,.view2,.view3,.view4{display:none}
.port_view,.control,#apps,#vms{z-index:10000}
.flat{height:0;lineheight:0}
.wrap{white-space:normal}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button[disabled]{cursor:default;color:#808080;background:-webkit-gradient(linear,left top,right top,from(#404040),to(#808080)) 0 0 no-repeat,-webkit-gradient(linear,left top,right top,from(#404040),to(#808080)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#404040),to(#404040)) 0 100% no-repeat,-webkit-gradient(linear,left bottom,left top,from(#808080),to(#808080)) 100% 100% no-repeat;background:linear-gradient(90deg,#404040 0,#808080) 0 0 no-repeat,linear-gradient(90deg,#404040 0,#808080) 0 100% no-repeat,linear-gradient(0deg,#404040 0,#404040) 0 100% no-repeat,linear-gradient(0deg,#808080 0,#808080) 100% 100% no-repeat;background-size:100% 2px,100% 2px,2px 100%,2px 100%}
</style>
<script src="<?autov('/webGui/javascript/jquery.apexcharts.js')?>"></script>
<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
<script src="<?autov('/plugins/dynamix.docker.manager/javascript/docker.js')?>"></script>
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>

<div class='frame'>
<div class='grid'>
<div class='tile' id='tile1'>
<table id='db-box1' class='share_status dashboard'>
<tbody class='system'>
<tr><td><?=$var['NAME']?>
<i class='fa fa-fw fa-wrench control' onclick='contentMgmt()' title="_(Content Management)_"></i><a href='/Dashboard/Settings/Identification'><i class='fa fa-fw fa-cog control' title="_(Go to identification settings)_"></i></a>
<span class='ctrl'>
<?if ($parity||$mover||$btrfs):?>
<span class='fa fa-fw fa-<?=$started?'stop':'play'?>-circle busy' title="<?=$started?_("Stop the array"):_("Start the array")?>"></span>
<?else:?>
<span class='fa fa-fw fa-<?=$started?'stop':'play'?>-circle hand' title="<?=$started?_("Stop the array"):_("Start the array")?>" onclick='<?=$started?'Stop':'Start'?>Array()'></span>
<?endif;?>
<?if ($sleep):?><span class='fa fa-fw fa-moon-o hand' title="_(Put system to sleep)_" onclick='Sleep()'></span><?endif;?>
<span class='fa fa-fw fa-refresh hand' title="_(Reboot the system)_" onclick='Reboot()'></span>
<span class='fa fa-fw fa-power-off hand' title="_(Shutdown the system)_" onclick='Shutdown()'></span></span>
</td></tr>
<tr><td>
<div class='leftside'>
<span class='header'>_(Description)_</span><span class='text'><br>
<?=$var['COMMENT']?><br>
<?=$var['SYS_MODEL']?><br><br></span>
<span class='header'>_(Registration)_</span><br>Unraid OS <b><em><?=$var['regTy']?></em></b><br><br>
<span class='header'>_(Uptime)_</span><br><span class='uptime'></span>
</div>
<div class='rightside'>
<span id='casing'>
<?if ($mycase):?>
<?if (substr($mycase,-4)!='.png'):?>
<i id='mycase' class='case-<?=$mycase?>'></i><br>
<?else:?>
<img id='mycase' src='<?=autov("/webGui/images/$mycase")?>'><br>
<?endif;?>
<?else:?>
<i id='mycase' class='fa fa-hdd-o'></i><br>
<?endif;?>
</span>
<input type='button' value="_(Edit)_" style="margin-right:0" onclick='openChanges("select_case <?=$myfile?>", "_(Select Case Model)_", "selectcase")'>
</div>
</td></tr>
</tbody>

<tbody title="_(Motherboard Information)_">
<tr><td><i class='icon-motherboard f32'></i><div class='section'>_(Motherboard)_<br><span id='mb-temp'></span><br><br></div>
<a href='#' onclick='InfoButton();' title="_(Show Information)_"><i class='fa fa-fw fa-info-circle control'></i></a>
</td></tr>
<tr><td><?=$board?><br><?=$bios?><br><?=$biosdate?></td></tr>
</tbody>

<tbody title="_(Processor Information)_">
<tr><td><i class='icon-cpu f32'></i><div class='section'>_(Processor)_<br><span id='cpu-temp'></span><br><br></div>
<a href='/Dashboard/Settings/CPUset' title="_(Go to CPU pinning settings)_"><i class='fa fa-fw fa-cog control'></i></a>
</td></tr>
<tr><td><?=$cpumodel?></td></tr>
<tr><td><span class='w26'>_(Overall Load)_:</span><span class='w72'><span class='cpu load'>0%</span><div class='usage-disk sys'><span id='cpu'></span><span></span></div></span></td></tr>
<tr id='cpu_main'><td><a onclick='toggleCPU()' title="_(Click to toggle details)_" class='cpu_close'>_(Show details)_</a><span id='chart-toggle'>
<span><select id='cpuline' class='auto' title="_(Select time frame)_" onchange='changeCPUline(this.value)'>
<?=mk_option("","10", _("10 s"));?>
<?=mk_option("","30", _("30 s"));?>
<?=mk_option("","60", _("1 m"));?>
<?=mk_option("","120", _("2 m"));?>
<?=mk_option("","300", _("5 m"));?>
</select></span><a onclick='toggleChart()' title="_(Click to toggle CPU chart)_"><span class="fa fa-fw fa-bar-chart hand"></span></a></span></td></tr>
<?
foreach ($cpus as $pair) {
  [$cpu1, $cpu2] = my_preg_split('/[,-]/',$pair);
  echo "<tr class='cpu_open'>";
  if ($cpu2)
    echo "<td><span class='w26'>CPU $cpu1 - HT $cpu2</span><span class='dashboard w36'><span class='cpu$cpu1 load'>0%</span><div class='usage-disk sys'><span id='cpu$cpu1'></span><span></span></div></span><span class='dashboard w36'><span class='cpu$cpu2 load'>0%</span><div class='usage-disk sys'><span id='cpu$cpu2'></span><span></span></div></span></td>";
  else
    echo "<td><span class='w26'>CPU $cpu1</span><span class='w72'><span class='cpu$cpu1 load'>0%</span><div class='usage-disk sys'><span id='cpu$cpu1'></span><span></span></div></span></td>";
  echo "</tr>";
}
?>
<tr id='cpu_chart'><td><div id='cpuchart'></div></td></tr>
</tbody>

<tbody title="_(Memory Utilization)_">
<tr><td><i class='icon-ram f32'></i><div class='section'>_(Memory)_<br><span><?="$memory_installed $unit $memory_type $ecc"?></span><br><br></div>
<a href='/Dashboard/Tools/Processes' title="_(View Running Processes)_"><i class='fa fa-fw fa-info-circle control'></i></a>
</td></tr>
<tr><td>_(Usable size)_: <?=my_scale($total,$unit,1,null,1024)." $unit"?>&nbsp;&nbsp;---&nbsp;&nbsp;_(Maximum size)_: <?="$memory_maximum $unit"?><?=$low?'*':''?></td></tr>
<tr><td><span class='w26'>_(RAM)_</span><span class='w72'><span class='sys0 load'>0%</span><div class='usage-disk sys'><span id='sys0'></span><span></span></div></span></td></tr>
<tr><td><span class='w26'>_(Flash)_</span><span class='w72'><span class='sys1 load'>0%</span><div class='usage-disk sys'><span id='sys1'></span><span></span></div></span></td></tr>
<tr><td><span class='w26'>_(Log)_</span><span class='w72'><span class='sys2 load'>0%</span><div class='usage-disk sys'><span id='sys2'></span><span></span></div></span></td></tr>
<?if (exec("df /var/lib/docker|grep -om1 '^/'")):?>
<tr><td><span class='w26'>_(Docker)_</span><span class='w72'><span class='sys3 load'>0%</span><div class='usage-disk sys'><span id='sys3'></span><span></span></div></span></td></tr>
<?endif;?>
</tbody>

<tbody title="_(Interface Information)_">
<tr><td><i class='icon-ethernet f32'></i><div class='section'>_(Interface)_<br>
<span><span class='dense'>_(Inbound)_: <span id='inbound'>---</span></span><span class='dense'>_(Outbound)_: <span id='outbound'>---</span></span>
<select name="port_select" onchange="portSelect(this.value)">
<?foreach ($ports as $port):?>
<?=mk_option("",$port,_($port))?>
<?endforeach;?>
</select></span>
<br><br></div>
<a href='/Dashboard/Settings/NetworkSettings' title="_(Go to network settings)_"><i class='fa fa-fw fa-cog control'></i></a>
</td></tr>
<tr><td><span class='w26'><select name="enter_view" onchange="changeView(this.value)">
<?=mk_option("", "0", _("General info"))?>
<?=mk_option("", "1", _("Counters info"))?>
<?=mk_option("", "2", _("Errors info"))?>
<?=mk_option("", "3", _("Network traffic"))?>
</select></span>
<span class='w36'><i class='view1'>_(Mode of operation)_</i><i class='view2'>_(Received packets)_</i><i class='view3'>_(Receive counters)_</i><i class='fa fa-fw fa-arrow-down view4 red-text'></i>&nbsp;<i class='view4 red-text'>_(Inbound)_</i></span>
<span class='w36'><i class='view1'></i><i class='view2'>_(Transmitted packets)_</i><i class='view3'>_(Transmit counters)_</i><i class='fa fa-fw fa-arrow-up view4 orange-text'></i>&nbsp;<i class='view4 orange-text'>_(Outbound)_</i>
<span class='view4' style='float:right'><select id='netline' class='auto' title="_(Select time frame)_" onchange='changeNetline(this.value)'>
<?=mk_option("","10", _("10 s"))?>
<?=mk_option("","30", _("30 s"))?>
<?=mk_option("","60", _("1 m"))?>
<?=mk_option("","120", _("2 m"))?>
<?=mk_option("","300", _("5 m"))?>
</select></span></span></td></tr>
<?
$c = 0;
foreach ($ports as $port) {
  $last = $port=='lo' ? ' last' : '';
  echo "<tr class='view1{$last}'><td><span class='w26'>$port</span><span class='w72' id='main".($c++)."'></span></td></tr>";
}
$c = 0;
foreach ($ports as $port) {
  $last = $port=='lo' ? ' last' : '';
  echo "<tr class='view2{$last}'><td><span class='w26'>$port</span><span class='w36' id='port{$c}'></span><span class='w36' id='port".($c+1)."'></span></td></tr>";
  $c += 2;
}
$c = 0;
foreach ($ports as $port) {
  $last = $port=='lo' ? ' last' : '';
  echo "<tr class='view3{$last}'><td><span class='w26'>$port</span><span class='w36' id='link{$c}'></span><span class='w36' id='link".($c+1)."'></span></td></tr>";
  $c += 2;
}
?>
<tr class="view4"><td><div id="netchart"></div></td></tr>
</tbody>

<?if ($wireguard):?>
<tbody title="_(VPN Connections)_">
<tr><td><i class='icon-vpn f32'></i><div class='section'>_(VPN)_<br><span><span class='dense'>_(Active tunnels)_: <span id='vpn-active'><?=$up?></span></span>_(Inactive tunnels)_: <span id='vpn-inactive'><?=$down?></span></span><br><br></div>
<a href='/Settings/VPNmanager' title="_(Go to VPN settings)_"><i class='fa fa-fw fa-cog control'></i></a>
</td></tr>
<?foreach ($conf as $wg):?>
<?$vpn = basename($wg,'.conf'); $peers = vpn_peers($wg);?>
<tr><td class='vpn'><span class='w26'><i class='icon-vpn vpn<?=in_array($vpn,$wg_up)?'':' inactive'?>' onclick="toggleVPN($(this),'<?=$vpn?>')" title="Toggle tunnel state"></i><?="Tunnel $vpn"?></span>
<span class='w36 vpn right'>_(Activity)_</span><span class='w36 vpn right'>_(Handshake)_</span></td></tr>
<?foreach ($peers as $i => $peer):?>
<tr><td><span class='w26 wg1'><?=$peer?></span><span class='w36 wg2' id='<?="$vpn-rx-".($i-1)?>'>---</span><span class='w36 wg2' id='<?="$vpn-hs-".($i-1)?>'>_(inactive)_</span></td></tr>
<?endforeach;?>
<?endforeach;?>
</tbody>
<?endif;?>

<?if ($apcupsd):?>
<tbody title="_(Power Status)_">
<tr><td><i class='icon-ups f32'></i><div class='section'>_(Power)_<br>
<span><i class='ups fa fa-shield'></i>_(UPS Model)_: </span><span id='ups_model'></span><br><br></div>
<a href='/Dashboard/Settings/UPSsettings' title="_(Go to UPS settings)_"><i class='fa fa-fw fa-cog control'></i></a>
</td></tr>
<tr><td>
<span class='w36'><i class='ups fa fa-fw fa-plug'></i>_(UPS status)_:</span><span id='ups_status'></span><br>
<span class='w36'><i class='ups fa fa-fw fa-bars'></i>_(UPS Load)_: </span><span id='ups_loadpct'></span><br>
<span class='w36'><i class='ups fa fa-fw fa-battery'></i>_(Battery charge)_:</span><span id='ups_bcharge'></span><br>
<span class='w36'><i class='ups fa fa-fw fa-clock-o'></i>_(Runtime left)_:</span><span id='ups_timeleft'></span><br>
<span class='w36'><i class='ups fa fa-fw fa-bolt'></i>_(Nominal power)_:</span><span id='ups_nompower'></span><br>
<span class='w36'><i class='ups fa fa-fw fa-ellipsis-h'></i>_(Output voltage)_:</span><span id='ups_outputv'></span><br>
</td></tr>
</tbody>
<?endif;?>

<?if ($fans):?>
<tbody title="_(Fan Information)_">
<tr><td><i class='icon-fan f32'></i><div class='section'>_(Airflow)_<br><span>_(Fan count)_: <?=$fans?></span><br><br></div>

<?if ($autofan):?>
<a href='/Dashboard/Settings/FanSettings' title="_(Go to fan settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<?endif;?>
</td></tr>
<?
$label = $value = [];
$i = 0;
for ($fan=0; $fan<$fans; $fan++) {
  if ($fan > 0 && $fan % 3 == 0) $i++;
  $class = $fan % 3 == 2 ? "" : " class='fan'";
  $label[$i][] = "<span{$class}>"._('FAN')." ".($fan+1)."</span>";
}
$i = 0;
for ($fan=0; $fan<$fans; $fan++) {
  if ($fan > 0 && $fan % 3 == 0) $i++;
  $class = $fan % 3 == 2 ? "" : " class='fan'";
  $value[$i][] = "<span{$class} id='fan$fan'>--</span>";
}
echo "<tr><td>";
for ($i = 0; $i < count($label); $i++) {
  foreach ($label[$i] as $data) echo $data;
  echo "<br>";
  foreach ($value[$i] as $data) echo $data;
  echo "<br>";
  if ($i < count($value)-1) echo "<br>";
}
echo "</td></tr>";
?>
</tbody>
<?endif;?>
<?customTiles('column1');?>
</table>
</div>

<div class='tile' id='tile2'>
<table id='db-box2' class='share_status dashboard'>
<?if ($display['dashapps']!='none'):?>
<?if ($dockerd && ($display['dashapps']=='icons' || $display['dashapps']=='docker')):?>
<tbody id='docker_view' title="_(Docker Containers)_">
<tr><td>_(Docker Containers)_
<a href='/Dashboard/Settings/DockerSettings' title="_(Go to Docker settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<span class='info apps'><input type='checkbox' id='apps'></span>
</td></tr>
</tbody>
<?endif;?>
<?if ($libvirtd && ($display['dashapps']=='icons' || $display['dashapps']=='vms')):?>
<tbody id='vm_view' title="_(Virtual Machines)_">
<tr><td>_(Virtual Machines)_
<a href='/Dashboard/Settings/VMSettings' title="_(Go to VM settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<span class='info vms'><input type='checkbox' id='vms'></span>
</td></tr>
</tbody>
<?endif;?>
<?endif;?>

<tbody title="_(Shares Information)_">
<tr><td>_(Shares)_
<a href='/Shares' title="_(Go to Share settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<span class='info'><?=sprintf(_("Share count: %s with %s cache only and %s encrypted"),count($shares),$cache_only,$encrypted)?></span>
<?if ($group):?>
<select name="enter_share" onchange="changeMode(this.value)">
<?if ($var['shareSMBEnabled']=='yes'):?>
<?=mk_option("", "0", "SMB")?>
<?endif;?>
<?if ($var['shareNFSEnabled']=='yes'):?>
<?=mk_option("", "2", "NFS")?>
<?endif;?>
</select>
<?endif;?>
</td></tr>
<tr class='header'><td><span class='w26'>_(Name)_</span><span class='w44'>_(Description)_</span><span class='w18'>_(Security)_</span><span>_(Streams)_</span></td></tr>
<?
if ($var['shareSMBEnabled']=='yes') {
  $i = 0;
  foreach ($shares as $name => $share) {
    $i++;
    $list = "<a href=\"/Dashboard/Shares/Share?name=".urlencode($name)."\" class=\"blue-text\" title=\"$name settings\">".compress($name,20)."</a>";
    if ($share['luksStatus']>0) $list = str_replace('blue-text','green-text',$list);
    elseif ($share['useCache']=='only') $list = str_replace('blue-text','orange-text',$list);
    $comment = compress($share['comment'],40) ?: '&nbsp;';
    $security = export_settings($var['shareSMBEnabled'], $sec[$name]);
    $last = $name==array_key_last($shares) ? ' last' : '';
    echo "<tr class='smb share share1{$last}'><td><span class='w26'><i class='icon-folder f14'></i>$list</span><span class='w44'>$comment</span><span class='w18'>$security</span><span id='share{$i}'>0</span></td></tr>";
  }
  if (!count($shares)) echo "<tr class='smb share share1'><td class='none'>"._("No shares present")."</td></tr>";
}
if ($var['shareNFSEnabled']=='yes') {
  foreach ($shares as $name => $share) {
    $list = "<a href=\"/Dashboard/Shares/Share?name=".urlencode($name)."\" class=\"blue-text\" title=\"$name settings\">".compress($name,20)."</a>";
    if ($share['luksStatus']>0) $list = str_replace('blue-text','green-text',$list);
    elseif ($share['useCache']=='only') $list = str_replace('blue-text','orange-text',$list);
    $comment = compress($share['comment'],40) ?: '&nbsp;';
    $security = export_settings($var['shareNFSEnabled'], $sec_nfs[$name]);
    $last = $name==array_key_last($shares) ? ' last' : '';
    echo "<tr class='nfs share share3{$last}'><td><span class='w26'><i class='icon-folder f14'></i>$list</span><span class='w44'>$comment</span><span class='w18'>$security</span><span>-</span></td></tr>";
  }
  if (!count($shares)) echo "<tr class='nfs share share3'><td class='none'>"._("No shares present")."</td></tr>";
}
if (!$group) {
  foreach ($shares as $name => $share) {
    $list = "<a href=\"/Dashboard/Shares/Share?name=".urlencode($name)."\" class=\"blue-text\" title=\"$name settings\">".compress($name,20)."</a>";
    if ($share['luksStatus']>0) $list = str_replace('blue-text','green-text',$list);
    elseif ($share['useCache']=='only') $list = str_replace('blue-text','orange-text',$list);
    $comment = compress($share['comment'],40) ?: '&nbsp;';
    echo "<tr class='share'><td><span class='w26'><i class='icon-folder f14'></i>$list</span><span class='w44'>$comment</span><span class='w18'>-</span><span>-</span></td></tr>";
  }
  if (!count($shares)) echo "<tr class='share'><td class='none'>"._("No shares present")."</td></tr>";
}
?>
</tbody>

<tbody title="_(Users Information)_">
<tr><td>_(Users)_
<a href='/Users' title="_(Go to User settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<span class='info'><?=sprintf(_("User count: %s with %s unprotected"),count($users),$nopass)?></span>
</td></tr>
<tr class='header'><td><span class='w26'>_(Name)_</span><span class='w44'>_(Description)_</span><span class='w18'>_(Write)_</span><span>_(Read)_</span></td></tr>
<?
if ($var['shareSMBEnabled']=='yes') {
  foreach ($users as $user) {
    $name = $user['name'];
    $list = "<a href=\"/Dashboard/Users/UserEdit?name=".urlencode($name)."\" class=\"blue-text\" title=\"$name settings\">".compress($name,20)."</a>";
    $desc = compress($user['desc'],40) ?: '&nbsp;';
    if ($name=='root') {
      $write = '-'; $read = '-';
    } else {
      $write = 0; $read = 0;
      foreach ($shares as $share) {
        $access = $sec[$share['name']];
        if ($access['export']=='-') continue;
        switch ($access['security']) {
        case 'public':
          $write++;
          break;
        case 'secure':
          if (in_array($name,explode(',',$access['writeList']))) $write++; else $read++;
          break;
        case 'private':
          if (in_array($name,explode(',',$access['writeList']))) $write++;
          if (in_array($name,explode(',',$access['readList']))) $read++;
          break;
        }
      }
    }
    if ($user['passwd']!='yes') $list = str_replace('blue-text','orange-text',$list);
    $last = $name==array_key_last($users) ? ' last' : '';
    echo "<tr class='smb user user1{$last}'><td><span class='w26'><i class='icon-user f14'></i>$list</span><span class='w44'>$desc</span><span class='w18'>$write</span><span>$read</span></td></tr>";
  }
}
if ($var['shareNFSEnabled']=='yes') {
  foreach ($users as $user) {
    $name = $user['name'];
    $list = "<a href=\"/Dashboard/Users/UserEdit?name=".urlencode($name)."\" class=\"blue-text\" title=\"$name settings\">".compress($name,20)."</a>";
    $desc = compress($user['desc'],40) ?: '&nbsp;';
    $write = '-'; $read = '-';
    if ($user['passwd']!='yes') $list = str_replace('blue-text','orange-text',$list);
    $last = $name==array_key_last($users) ? ' last' : '';
    echo "<tr class='nfs user user3{$last}'><td><span class='w26'><i class='icon-user f14'></i>$list</span><span class='w44'>$desc</span><span class='w18'>$write</span><span>$read</span></td></tr>";
  }
}
if (!$group) {
  foreach ($users as $user) {
    $name = $user['name'];
    $list = "<a href=\"/Dashboard/Users/UserEdit?name=".urlencode($name)."\" class=\"blue-text\" title=\"$name settings\">".compress($name,20)."</a>";
    $desc = compress($user['desc'],40) ?: '&nbsp;';
    if ($user['passwd']!='yes') $list = str_replace('blue-text','orange-text',$list);
    echo "<tr class='user'><td><span class='w26'><i class='icon-user f14'></i>$list</span><span class='w44'>$desc</span><span class='w18'>-</span><span>-</span></td></tr>";
  }
}
?>
</tbody>
<?customTiles('column2');?>
</table>
</div>

<div class='tile' id='tile3'>
<table id='db-box3' class='share_status dashboard'>
<tbody title="_(Parity Information)_">
<tr><td>_(Parity)_<a href='/Dashboard/Settings/Scheduler' title="_(Go to scheduler settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<span class='info title'></span></td></tr>
<tr><td id='parity' class="wrap"></td></tr>
<tr><td id='program' class="wrap"></td></tr>
</tbody>

<tbody id='array_list' title="_(Array Information)_">
<tr><td>_(Array)_<?if (!$started):?> (_(stopped)_)<?endif;?><a href='/Dashboard/Settings/DiskSettings' title="_(Go to disk settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<?if ($started):?><span class='info'><?=sprintf(_("%s used of %s (%s %%)"),my_scale($array_used*1024,$unit)." $unit",my_scale($array_size*1024,$unit,-1,-1)." $unit",$array_percent)?></span><?endif;?>
</td></tr>
<tr><td id='array_info'></td></tr>
<tr class='header'><td><span class='w26'>_(Device)_</span><span class='w18'>_(Status)_</span><span class='w18'>_(Temp)_</span><span class='w18'>_(SMART)_</span><span class='w18'>_(Utilization)_</span></td></tr>
</tbody>

<?$i=0?>
<?foreach ($pools as $pool):?>
<tbody id='pool_list<?=$i++?>' title="_(<?=$pool?> Information)_">
<tr><td><?=ucfirst($pool)?><?if (!$started):?> (_(stopped)_)<?endif;?><a href='/Dashboard/Settings/Device?name=<?=$pool?>' title="_(Go to disk settings)_"><i class='fa fa-fw fa-cog control'></i></a>
<?if ($started):?><span class='info'><?=sprintf(_("%s used of %s (%s %%)"),my_scale($cache_used[$pool]*1024,$unit)." $unit",my_scale($cache_size[$pool]*1024,$unit,-1,-1)." $unit",$cache_rate[$pool])?></span><?endif;?>
</td></tr>
<tr><td id='pool_info<?=$i?>'></td></tr>
<tr class='header'><td><span class='w26'>_(Device)_</span><span class='w18'>_(Status)_</span><span class='w18'>_(Temp)_</span><span class='w18'>_(SMART)_</span><span class='w18'>_(Utilization)_</span></td></tr>
</tbody>
<?endforeach;?>

<?if ($devs):?>
<tbody id='devs_list' title="_(Unassigned Devices)_">
<tr><td>_(Unassigned)_<span class='info'></span></td></tr>
<tr><td id='devs_info'></td></tr>
<tr class='header'><td><span class='w26'>_(Device)_</span><span class='w18'>_(Status)_</span><span class='w18'>_(Temp)_</span><span class='w18'>_(SMART)_</span><span class='w18'>_(Utilization)_</span></td></tr>
</tbody>
<?endif;?>
<?customTiles('column3');?>
</table>
</div>
</div>
</div>

<form name='boot' method='POST' action='/webGui/include/Boot.php'>
<input type='hidden' name='csrf_token' value='<?=$var['csrf_token']?>'>
<input type='hidden' name='cmd' value=''>
</form>
<div id="iframe-popup"></div>

<div id="templateContentMgmt" class="template">
<!--!
<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=1600">
<meta name="robots" content="noindex, nofollow">
<meta name="referrer" content="same-origin">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-fonts.css")?>">
</head>
<style>
.item{display:inline-block;width:210px;float:left;height:4rem}
</style>
<script>
var table = $('table.dashboard');
var index = [], sort = [], checked = [];
table.find('tbody').not('.system').each(function(){
  index.push($(this).attr('title'));
  sort.push($(this).attr('sort'));
  checked.push($(this).is(':visible') ? 'checked' : '');
});
for (var n=0,x; x=index[n]; n++) {
  $('div#list').append("<span class='item'><input class='checker' type='checkbox' "+checked[n]+">"+x+"</span>");
}
function hideShow() {
  var n = 0, inactive = [];
  var count = {'db-box1':0, 'db-box2':0, 'db-box3':0};
  $('input.checker').each(function(){
    var tbody = $('table.dashboard').find('tbody[sort="'+sort[n]+'"]');
    var id = tbody.parent().prop('id');
    if ($(this).prop('checked')) {
      tbody.show();
      count[id]++;
    } else {
      tbody.hide();
      inactive.push(sort[n]);
    }
    n++;
  });
  count[table.find('tbody.system').parent().prop('id')]++;
  if (count['db-box1']>0) $('div#tile1').show(); else $('div#tile1').hide();
  if (count['db-box2']>0) $('div#tile2').show(); else $('div#tile2').hide();
  if (count['db-box3']>0) $('div#tile3').show(); else $('div#tile3').hide();
  if (inactive.length>0) {
    $.cookie('inactive_content',inactive.join(';'),{expires:3650});
  } else {
    $.removeCookie('inactive_content');
  }
}
</script>
<body>
<div id="list"></div>
</body>
</html>
!-->
</div>

<script>
Number.prototype.pad = function(size){var s=String(this);while(s.length<(size||2)){s='0'+s;}return s;}
Array.prototype.tail = function(t){return this.slice(-t).map(function(o){return o.y;}).join(';');}
String.prototype.build = function(){return this.replace(/\n(<!--!|!-->)\n/g,'');}

var ports    = [<?=implode(',',array_map('escapestring',$ports))?>];
var cpu      = [];
var rxd      = [];
var txd      = [];
var cputime  = 0;
var nettime  = 0;
var cpuline  = $.cookie('cpuline')||30;
var netline  = $.cookie('netline')||30;
var update2  = true;
var box      = null;

var options_cpu = {
  series:[{name:'load', data:cpu.slice()}],
  chart:{height:120, type:'line', fontFamily:'clear-sans', animations:{enabled:true, easing:'linear', dynamicAnimation:{speed:1000}}, toolbar:{show:false}, zoom:{enabled:false}},
  dataLabels:{enabled:false},
  tooltip:{enabled:false},
  stroke:{curve:'smooth', width:1},
  colors:['#ff8c2f'],
  markers:{size:0},
  xaxis:{type:'datetime', range:cpuline-1, labels:{show:false}, axisTicks:{show:false}, axisBorder:{show:false}},
  yaxis:{max:100, tickAmount:4, labels:{formatter:function(v,i){return v.toFixed(0)+' %';}, style:{colors:'<?=$color?>'}}, axisBorder:{show:false}, axisTicks:{show:false}},
  grid:{show:true, borderColor:'<?=$grid?>'},
  legend:{show:false}
};
var options_net = {
  series:[{name:'receive', data:rxd.slice()},{name:'transmit', data:txd.slice()}],
  chart:{height:120, type:'line', fontFamily:'clear-sans', animations:{enabled:true, easing:'linear', dynamicAnimation:{speed:1000}}, toolbar:{show:false}, zoom:{enabled:false}},
  dataLabels:{enabled:false},
  tooltip:{enabled:false},
  stroke:{curve:'smooth', width:1},
  colors:['#e22828','#ff8c2f'],
  markers:{size:0},
  xaxis:{type:'datetime', range:netline-1, labels:{show:false}, axisTicks:{show:false}, axisBorder:{show:false}},
  yaxis:{tickAmount:4, labels:{formatter:function(v,i){return autoscale(v,'bps',1);}, style:{colors:'<?=$color?>'}}, axisBorder:{show:false}, axisTicks:{show:false}},
  grid:{show:true, borderColor:'<?=$grid?>'},
  legend:{show:false}
};

var cpuchart = new ApexCharts(document.querySelector('#cpuchart'), options_cpu);
var netchart = new ApexCharts(document.querySelector('#netchart'), options_net);

if ($.cookie('port_select')!=null && !ports.includes($.cookie('port_select'))) $.removeCookie('port_select');
var port_select = $.cookie('port_select')||ports[0];

function initCharts(clear) {
  $.post('/webGui/include/InitCharts.php',{cmd:'get'},function(data) {
    data = JSON.parse(data);
    // initialize graphs entries
    var now = new Date().getTime();
    if (!clear) {
      var c = data.cpu.split(';');
      var r = data.rxd.split(';');
      var t = data.txd.split(';');
      for (var i=0; i < cpuline; i++) {
        var x = now + i;
        var y = c[i]||0; cpu.push({x,y});
      }
      cputime = x + 1;
    } else {
      // clear network graph
      var r = ''; var t = '';
      rxd = []; txd = [];
    }
    for (var i=0; i < netline; i++) {
      var x = now + i;
      var y = r[i]||0; rxd.push({x,y});
      var y = t[i]||0; txd.push({x,y});
    }
    nettime = x + 1;
  });
}
function resetCharts() {
  // prevent unlimited graph growing
  cpu = cpu.slice(-cpuline);
  rxd = rxd.slice(-netline);
  txd = txd.slice(-netline);
}
function addChartCpu(load) {
  cputime++;
  var i = cpu.length - cpuline;
  if (i > 0) { // clear value outside graph
    i = i - 1;
    cpu[i].x = cputime - cpuline;
    cpu[i].y = 0;
  }
  cpu.push({x:cputime, y:load});
}
function addChartNet(rx, tx) {
  nettime++;
  var i = rxd.length - netline;
  if (i > 0) { // clear value outside graph
    i = i - 1;
    rxd[i].x = nettime - netline;
    rxd[i].y = 0;
    txd[i].x = nettime - netline;
    txd[i].y = 0;
  }
  rxd.push({x:nettime, y:rx});
  txd.push({x:nettime, y:tx});
}
<?if ($wireguard):?>
function toggleVPN(id,vtun) {
  var up = $('#vpn-active');
  var down = $('#vpn-inactive');
  if (id.hasClass('inactive')) {
    $.post('/webGui/include/update.wireguard.php',{'#cmd':'toggle','#wg':'start','#vtun':vtun},function(on){if (on){
      id.removeClass('inactive');
      up.text(up.text()*1+1);
      if (down.text()>0) down.text(down.text()*1-1);
    }});
  } else {
    $.post('/webGui/include/update.wireguard.php',{'#cmd':'toggle','#wg':'stop','#vtun':vtun});
    id.addClass('inactive');
    down.text(down.text()*1+1);
    if (up.text()>0) up.text(up.text()*1-1);
    $('span[id^="'+vtun+'-hs"]').text('inactive');
    $('span[id^="'+vtun+'-rx"]').text('---');
  }
}
<?endif;?>
function noApps() {
  if ($('span.outer.apps:visible').length==0) $('#no_apps').show(); else $('#no_apps').hide();
}
function noVMs() {
  if ($('span.outer.vms:visible').length==0) $('#no_vms').show(); else $('#no_vms').hide();
}
function loadlist(init) {
  if (init) {
    $('#apps').switchButton({labels_placement:'left', off_label:"_(All Apps)_", on_label:"_(Started only)_", checked:$.cookie('my_apps')=='startedOnly'});
    $('#vms').switchButton({labels_placement:'left', off_label:"_(All VMs)_", on_label:"_(Started only)_", checked:$.cookie('my_vms')=='startedOnly'});
    $('#apps').change(function(){
      $('span.outer.apps.stopped').finish().toggle('fast',function(){noApps();})
      $('#apps').is(':checked') ? $.cookie('my_apps','startedOnly',{expires:3650}) : $.removeCookie('my_apps');
    });
    $('#vms').change(function(){
      $('span.outer.vms.stopped').finish().toggle('fast',function(){noVMs();});
      $('#vms').is(':checked') ? $.cookie('my_vms','startedOnly',{expires:3650}) : $.removeCookie('my_vms');
    });
    context.init({preventDoubleContext:false,left:true,above:false});
  }
  $.post('/webGui/include/DashboardApps.php',{display:'<?=$display['dashapps']?>',docker:'<?=$dockerd?>',vms:'<?=$libvirtd?>'},function(d) {
    var data = d.split('\0');
    $('#docker_view').find('tr.updated').remove();
    $('#docker_view').append(data[0]);
    $('#vm_view').find('tr.updated').remove();
    $('#vm_view').append(data[1]);
    if ($.cookie('my_apps')!=null) $('span.apps.stopped').hide(0,noApps());
    if ($.cookie('my_vms')!=null) $('span.vms.stopped').hide(0,noVMs());
    context.init({preventDoubleContext:false,left:true,above:false});
  });
}
function getCase() {
  $.post('/webGui/include/SelectCase.php',{mode:'get',file:'<?=$myfile?>'},function(model){
    if (!model) {
      $('#casing').html("<i id='mycase' class='fa fa-hdd-o'></i><br>");
    } else if (model.indexOf('.png')<0) {
      $('#casing').html("<i id='mycase' class='case-"+model+"'></i><br>");
    } else {
      var now = new Date();
      $('#casing').html("<img id='mycase' src='/webGui/images/"+model+"?v="+now.getTime()+"'><br>");
    }
  });
}
function changeMode(item) {
  if (item==0) $.removeCookie('enter_share'); else $.cookie('enter_share',item,{expires:3650});
<?if ($var['shareSMBEnabled']=='yes'):?>
  if (item==0) $('.smb.user1').show(); else $('.smb.user1').hide();
  if (item==0) $('.smb.share1').show(); else $('.smb.share1').hide();
<?endif;?>
<?if ($var['shareNFSEnabled']=='yes'):?>
  if (item==2) $('.nfs.user3').show(); else $('.nfs.user3').hide();
  if (item==2) $('.nfs.share3').show(); else $('.nfs.share3').hide();
<?endif;?>
}
function changeView(item) {
  if (item==0) $.removeCookie('enter_view'); else $.cookie('enter_view',item,{expires:3650});
  if (item==0) $('.view1').show(); else $('.view1').hide();
  if (item==1) $('.view2').show(); else $('.view2').hide();
  if (item==2) $('.view3').show(); else $('.view3').hide();
  if (item==3) $('.view4').show(); else $('.view4').hide();
}
function changeCPUline(val) {
  cpuline = val;
  if (val==30) $.removeCookie('cpuline'); else $.cookie('cpuline',val,{expires:3650});
  cpuchart.updateOptions({xaxis:{range:cpuline-1}});
}
function changeNetline(val) {
  netline = val;
  if (val==30) $.removeCookie('netline'); else $.cookie('netline',val,{expires:3650});
  netchart.updateOptions({xaxis:{range:netline-1}});
}
function smartMenu(table) {
  $(table).find('[id^="smart-"]').each(function() {
    var opts = [];
    var id = '#'+$(this).attr('id');
    var page = $(this).attr('name');
    var view = $(this).attr('class');
    var disk = id.substr(id.indexOf('-')+1);
    opts.push({text:"_(Attributes)_",icon:'fa-sitemap',action:function(e){e.preventDefault();attributes(page,disk);}});
    opts.push({divider:true});
    opts.push({text:"_(Capabilities)_",icon:'fa-user',action:function(e){e.preventDefault();capabilities(page,disk);}});
    opts.push({divider:true});
    opts.push({text:"_(Identity)_",icon:'fa-home',action:function(e){e.preventDefault();identity(page,disk);}});
    if (view.search('green-text') == -1) {
      opts.push({divider:true});
      opts.push({text:"_(Acknowledge)_",icon:'fa-check-square-o',action:function(e){e.preventDefault();acknowledge(id,disk);}});
    }
    $(id).bind('click',function(){update2=false;}).bind('mouseout',function(){setTimeout(function(){update2=true;},15000);});
    context.attach(id,opts);
  });
}
function portMenu() {
  var select = 'select[name="port_select"]';
  var option = $(select+' option');
  for (var i=0; i < option.length; i++) {
    if (option[i].value == port_select) {option[i].selected = true; break;}
  }
}
function portSelect(name) {
  $.cookie('port_select',name,{expires:3650});
  initCharts(true);
  port_select = name;
}
function moreInfo(data,table) {
  var info = [];
  if (data[1]>0) info.push(data[1]+" _(failed device)_"+(data[1]==1?'':'s'));
  if (data[2]>0) info.push(data[2]+" _(heat warning)_"+(data[2]==1?'':'s'));
  if (data[3]>0) info.push(data[3]+" _(SMART error)_"+(data[3]==1?'':'s'));
  if (data[4]>0) info.push(data[4]+" _(utilization warning)_"+(data[4]==1?'':'s'));
  return info.length ? "<div class='last'><i class='icon-u-triangle failed'></i><span class='failed'>"+table+" _(has)_ "+info.join('. ')+".</span></div>" : "";
}
function autoscale(value,text,size,kilo) {
  if (kilo==null) kilo = 1000;
  var unit = kilo==1024 ? ['','ki','Mi','Gi','Ti','Pi','Ei'] : ['','k','M','G','T','P','E'];
  var base = value>1?Math.floor(Math.log(value)/Math.log(kilo)):0;
  var data = base<unit.length?value/Math.pow(kilo, base):0;
  var scale = (data<100?100:10)/size;
  if (data==0) base=0;
  return ((Math.round(scale*data)/scale)+' '+unit[base]+text).replace(".","<?=$display['number'][0]?>");
}
function update900() {
  // prevent chart overflowing, reset every 15 minutes
  resetCharts();
  setTimeout(update900,900000);
}
function attributes(page,disk) {
  var tab = page=='New' ? 'tab2' : 'tab3';
  $.cookie('one',tab);
  location.replace('/Dashboard/'+page+'?name='+disk);
}
function capabilities(page,disk) {
  var tab = page=='New' ? 'tab3' : 'tab4';
  $.cookie('one',tab);
  location.replace('/Dashboard/'+page+'?name='+disk);
}
function identity(page,disk) {
  var tab = page=='New' ? 'tab4' : 'tab5';
  $.cookie('one',tab);
  location.replace('/Dashboard/'+page+'?name='+disk);
}
function acknowledge(id,disk) {
  $.post('/webGui/include/Acknowledge.php',{disk:disk},function(){$(id).removeClass('fa-thumbs-o-down orange-text').addClass('fa-thumbs-o-up green-text');$(id.replace('smart','text')).text("<?=_('healthy')?>");});
}
function dropdown(menu) {
  var select = 'select[name="'+menu+'"]';
  var size   = $(select+' option').length;
  var option = $.cookie(menu)||0;
  if (option >= size) option = size - 1;
  $(select+' option')[option].selected = true;
  $(select).change();
}
function toggleCPU(init) {
  if (!init) {if ($.cookie('cpu')==null) $.cookie('cpu','close',{expires:3650}); else $.removeCookie('cpu');}
  if ($.cookie('cpu')==null) {
    $('.cpu_open').show();
    $('.cpu_close').text("_(Hide details)_");
  } else {
    $('.cpu_open').hide();
    $('.cpu_close').text("_(Show details)_");
  }
  setTimeout(function(){toggleChart(true);});
}
function toggleChart(init) {
  if (!init) {if ($.cookie('cpu-chart')==null) $.cookie('cpu-chart','close',{expires:3650}); else $.removeCookie('cpu-chart');}
  $('#cpu_main').removeClass('last');
  $('.cpu_open:last').removeClass('last');
  if ($.cookie('cpu-chart')==null) {
    $('#cpu_chart').show();
    $('#cpuline').show();
  } else {
    $('#cpu_chart').hide();
    $('#cpuline').hide();
    if ($('.cpu_open').is(':visible')) $('.cpu_open:last').addClass('last'); else $('#cpu_main').addClass('last');
  }
}
function StopArray() {
<?if ($confirm['stop']):?>
  swal({title:"_(Proceed)_?",text:"_(This will stop the array)_",type:'warning',html:true,showCancelButton:true,confirmButtonText:"_(Proceed)_",cancelButtonText:"_(Cancel)_"},function(){StopArrayNow();});
<?else:?>
   StopArrayNow();
<?endif;?>
}
function StopArrayNow() {
  $('span.hand').prop('onclick',null).off('click').addClass('busy').css('cursor','default');
  $.post('/update.htm',{startState:'<?=$var['mdState']?>',cmdStop:'Stop',csrf_token:'<?=$var['csrf_token']?>'},function(){refresh();});
}
function StartArray() {
<?if ($confirm['stop']):?>
  swal({title:"_(Proceed)_?",text:"_(This will start the array)_",type:'warning',html:true,showCancelButton:true,confirmButtonText:"_(Proceed)_",cancelButtonText:"_(Cancel)_"},function(){StartArrayNow();});
<?else:?>
  StartArrayNow();
<?endif;?>
}
function StartArrayNow() {
  $('span.hand').prop('onclick',null).off('click').addClass('busy').css('cursor','default');
  $.post('/update.htm',{startState:'<?=$var['mdState']?>',cmdStart:'Start',csrf_token:'<?=$var['csrf_token']?>'},function(){refresh();});
}
function Reboot() {
<?if ($confirm['down']):?>
  swal({title:"_(Proceed)_?",text:"_(This will reboot the system)_",type:'warning',html:true,showCancelButton:true,confirmButtonText:"_(Proceed)_",cancelButtonText:"_(Cancel)_"},function(){RebootNow();});
<?else:?>
  RebootNow();
<?endif;?>
}
function RebootNow() {
  document.boot.cmd.value = 'reboot';
  document.boot.submit();
}
function Shutdown() {
<?if ($confirm['down']):?>
  swal({title:"_(Proceed)_?",text:"_(This will shutdown the system)_",type:'warning',html:true,showCancelButton:true,confirmButtonText:"_(Proceed)_",cancelButtonText:"_(Cancel)_"},function(){ShutdownNow();});
<?else:?>
  ShutdownNow();
<?endif;?>
}
function ShutdownNow() {
  document.boot.cmd.value = 'shutdown';
  document.boot.submit();
}
<?if ($sleep):?>
function Sleep() {
<?if ($confirm['sleep']):?>
  swal({title:"_(Proceed)_?",text:"_(This will put the system to sleep)_",type:'warning',html:true,showCancelButton:true,confirmButtonText:"_(Proceed)_",cancelButtonText:"_(Cancel)_"},function(){SleepNow();});
<?else:?>
  SleepNow();
<?endif;?>
}
function SleepNow() {
  $('#statusraid').append('&nbsp;&bullet;&nbsp;<span class="warning" style="font-weight:bold">System in sleep mode</span>');
  $.get('/plugins/dynamix.s3.sleep/include/SleepMode.php',function(){refresh();});
}
<?endif;?>
function sortTables() {
  $('table.dashboard').each(function(){
    var table = $(this);
    var index = $.cookie(table.prop('id'));
    // sorting list exists
    if (index != null) {
      index = index.split(';');
      for (var i=0,n; n=index[i]; i++) {
        var tbody = table.find('tbody[sort="'+n+'"]');
        // element not in this table?
        if (tbody.length==0) {
          // search the other tables to find the element
          $('table.dashboard').not(table).each(function(){
            var other = $(this).find('tbody[sort="'+n+'"]');
            if (other.length) tbody = other;
          });
        }
        tbody.appendTo(table);
      }
    }
  });
}
function addProperties() {
  var n = 0;
  $('tbody.system').addClass('sortable').attr('sort',n++);
  $('tbody').not('.system').each(function(){
    $(this).addClass('sortable').attr('sort',n++);
    $(this).find('td:first').prepend("<i class='fa fa-fw fa-close control' onclick='dismiss($(this))' title=\"_(Close Tile)_\"></i>");
  });
}
function showContent() {
  var count = {'db-box1':$('table#db-box1').find('tbody').length, 'db-box2':$('table#db-box2').find('tbody').length, 'db-box3':$('table#db-box3').find('tbody').length}
  var inactive = $.cookie('inactive_content');
  if (inactive) {
    inactive = inactive.split(';');
    for (var n=0,x; x=inactive[n]; n++) {
      var tbody = $('table.dashboard').find('tbody[sort="'+x+'"]');
      var id = tbody.parent().prop('id');
      count[id]--;
      tbody.hide();
    }
  }
  if (count['db-box1']>0) $('div#tile1').show();
  if (count['db-box2']>0) $('div#tile2').show();
  if (count['db-box3']>0) $('div#tile3').show();
}
function setColor(l, t1, t2) {
  switch (true) {
  case (t1 > 0 && l >= t1): return 'redbar';
  case (t2 > 0 && l >= t2): return 'orangebar';
  default: return '';}
}
function dismiss(close) {
  var tbody = close.closest('tbody');
  var table = tbody.parent();
  var tile = table.parent();
  var inactive = $.cookie('inactive_content');
  tbody.hide();
  if (table.find('tbody:visible').length>0) tile.show(); else tile.hide();
  inactive = inactive==null ? [] : inactive.split(';');
  inactive.push(tbody.attr('sort'));
  $.cookie('inactive_content',inactive.join(';'),{expires:3650});
}
function contentMgmt() {
  box = $("#iframe-popup");
  box.html($("#templateContentMgmt").html().build());
  box.dialog({
    title: "_(Content Management)_",
    height: 350,
    width: 900,
    resizable: false,
    modal: true,
    show: {effect:'fade', duration:250},
    hide: {effect:'fade', duration:250},
    buttons: {
      "_(Reset)_": function(){
        $.removeCookie('db-box1');
        $.removeCookie('db-box2');
        $.removeCookie('db-box3');
        $.removeCookie('inactive_content');
        box.dialog('close');
        refresh();
      },
      "_(All)_": function(){
        $('input.checker').each(function(){$(this).prop('checked',true);});
      },
      "_(None)_": function(){
        $('input.checker').each(function(){$(this).prop('checked',false);});
      },
      "_(Apply)_": function(){
        hideShow();
        box.dialog('close');
      },
      "_(Cancel)_": function(){
        box.dialog('close');
      }
    }
  });
  $('.ui-dialog-titlebar-close').css({'display':'none'});
  $('.ui-dialog-title').css({'text-align':'center','width':'100%','font-size':'1.8rem'});
  $('.ui-dialog-content').css({'padding-top':'15px','vertical-align':'bottom'});
  $('.ui-button-text').css({'padding':'0px 5px'});
}

var sortableHelper = function(e,ui){
  ui.find('tr:first').children().each(function(){$(this).width($(this).width());});
  return ui;
};

function LockButton() {
  if ($.cookie('lockbutton') == null) {
    $.cookie('lockbutton','lockbutton');
<?if ($themes1):?>
    $('div.nav-item.LockButton').find('a').prop('title',"_(Lock sortable items)_");
    $('div.nav-item.LockButton').find('b').removeClass('icon-u-lock red-text').addClass('icon-u-lock-open green-text');
<?endif;?>
    $('div.nav-item.LockButton').find('span').text("_(Lock sortable items)_");
    $('#db-box1,#db-box2,#db-box3').sortable({connectWith:'#db-box1,#db-box2,#db-box3'});
    $('table.dashboard').sortable({helper:sortableHelper,items:'.sortable',cursor:'grab',delay:100,opacity:0.5,zIndex:9999,forcePlaceholderSize:true,
    receive:function(e,ui){
      var table = ui.sender, index = [];
      var tile = table.parent();
      if (table.find('tbody:visible').length > 0) tile.show(); else tile.hide();
      table.find('tbody').each(function(){index.push($(this).attr('sort'));});
      $.cookie(table.prop('id'),index.join(';'),{expires:3650});
    },
    stop:function(e,ui){
      var table = ui.item.parent(), index = [];
      table.find('tbody').each(function(){index.push($(this).attr('sort'));});
      $.cookie(table.prop('id'),index.join(';'),{expires:3650});
    }});
  } else {
    $.removeCookie('lockbutton');
<?if ($themes1):?>
    $('div.nav-item.LockButton').find('a').prop('title',"_(Unlock sortable items)_");
    $('div.nav-item.LockButton').find('b').removeClass('icon-u-lock-open green-text').addClass('icon-u-lock red-text');
<?endif;?>
    $('div.nav-item.LockButton').find('span').text("_(Unlock sortable items)_");
    $('table.dashboard').sortable('destroy');
  }
}
var dashboard = new NchanSubscriber('/sub/cpuload,update1,update2,update3<?=$wireguard?",wireguard":""?>',{subscriber:'websocket'});
dashboard.on('message',function(msg,meta) {
  switch (meta.id.channel()) {
  case 0:
    var ini = parseINI(msg);
    // cpu load
    $.each(ini,function(k,v) {
      var load = v['host'];
      var color = setColor(load, 90, 70);
      if (k=='cpu') {
        addChartCpu(load);
        cpuchart.updateSeries([{data:cpu}]);
      }
      $('.'+k).text(load+'%');
      $('#'+k).finish().animate({width:load+'%'},{step:function(){$('#'+k).css('overflow','visible').removeClass().addClass(color);}});
    });
    break;
  case 1:
    var part = msg.split('\1');
    // memory & disk load
    $.each(part[0].split('\0'),function(k,v) {
      var load = v.slice(0,-1);
      var color = setColor(load, <?=$display['critical']?>, <?=$display['warning']?>);
      $('.sys'+k).text(v);
      $('#sys'+k).finish().animate({width:v},{step:function(){$('#sys'+k).css('overflow','visible').removeClass().addClass(color);}});
    });
<?if ($fans):?>
    // fans rpm
    $.each(part[1].split('\0'),function(k,v) {$('#fan'+k).html(v);});
<?endif;?>
<?if ($var['fsState']=='Started' && $group):?>
    // stream counters (smb only)
    var tag = $('.smb').is(':visible') ? 'smb' : $('.nfs').is(':visible') ? 'nfs' : '';
    if (tag == 'smb') $.each(part[2].split('\0'),function(k,v) {$('#share'+(k+1)).html(v);});
<?endif;?>
    break;
  case 2:
    if (!update2) break;
    var part = msg.split('\1');
    var data = part[0].split('\0');
    var info = moreInfo(data,"_(Array)_");
    // array devices
    $('#array_list').find('tr.updated').remove();
    $('#array_list').append(data[0]);
    $('#array_info').parent().css('display',info?'':'none');
    $('#array_info').html(info);
    smartMenu('#array_list');
    // pool devices
    var text = part[1].split('\r');
    for (var i=0,t; t=text[i]; i++) {
      var data = t.split('\0');
      var info = moreInfo(data,"_(Cache)_");
      $('#pool_list'+i).find('tr.updated').remove();
      $('#pool_list'+i).append(t);
      $('#pool_info'+i).parent().css('display',info?'':'none');
      $('#pool_info'+i).html(info);
      smartMenu('#pool_list'+i);
    }
<?if ($devs):?>
    // unassigned devices
    var data = part[2].split('\0');
    var info = moreInfo(data,"_(Unassigned)_");
    $('#devs_list').find('tr.updated').remove();
    $('#devs_list').append(data[0]);
    $('#devs_info').parent().css('display',info?'':'none');
    $('#devs_info').html(info);
    smartMenu('#devs_list');
<?endif;?>
    // parity status
    $('span.info.title').html(part[3]);
    // parity schedule
    var data = part[4].split('\0');
    $('#parity').html(data[0]);
    $('#program').html(data[1]);
    break;
  case 3:
    var part = msg.split('\1');
    var ports = part[0].split('\n');
    // rx & tx speeds
    for (var i=0,port; port=ports[i]; i++) {
      var data = port.split('\0');
      if (data[0] == port_select) {
        $('#inbound').text(data[1]);
        $('#outbound').text(data[2]);
        addChartNet(data[3], data[4]);
        netchart.updateSeries([{data:rxd},{data:txd}]);
        break;
      }
    }
    // port counters
    $.each(part[1].split('\0'),function(k,v) {$('#main'+k).html(v);});
    $.each(part[2].split('\0'),function(k,v) {$('#port'+k).html(v);});
    $.each(part[3].split('\0'),function(k,v) {$('#link'+k).html(v);});
    break;
  case 4:
    // wireguard tunnels
    var n = {};
    var rows = msg.split('\0');
    for (var i=0,row; row=rows[i]; i++) {
      var info = row.split(';');
      var vtun = info[0];
      if (typeof n[vtun]=='undefined') n[vtun] = 0; else n[vtun]++;
      if (info[1] == 0) {
        $('span#'+vtun+'-hs-'+n[vtun]).text("_(not received)_");
      } else if (info[1] > 86400) {
        var d = parseInt(info[1]/86400);
        var s = d==1 ? " _(day)_" : " _(days)_";
        $('span#'+vtun+'-hs-'+n[vtun]).text(sprintf("_(%s ago)_",d+s));
      } else {
        var h = parseInt(info[1]/3600).pad();
        var m = parseInt(info[1]/60%60).pad();
        var s = parseInt(info[1]%60).pad();
        $('span#'+vtun+'-hs-'+n[vtun]).text(sprintf("_(%s ago)_",h+':'+m+':'+s));
      }
      $('span#'+vtun+'-rx-'+n[vtun]).html('<span class="rx"><i class="fa fa-fw fa-arrow-down"></i>&nbsp;'+info[2]+'</span><span><i class="fa fa-fw fa-arrow-up"></i>&nbsp;'+info[3]+'</span>');
    }
    break;
  }
});
<?if ($apcupsd):?>
var apcups = new NchanSubscriber('/sub/apcups',{subscriber:'websocket'});
apcups.on('message',function(data) {
  data = data.split(';');
  $('#ups_model').html(data[0]);
  $('#ups_status').html(data[1]);
  $('#ups_bcharge').html(data[2]);
  $('#ups_timeleft').html(data[3]);
  $('#ups_nompower').html(data[4]);
  $('#ups_loadpct').html(data[5]);
  $('#ups_outputv').html(data[6]);
});
<?endif;?>

$(function() {
  initCharts();
  cpuchart.render();
  netchart.render();
  addProperties();
<?if ($group):?>
  dropdown('enter_share');
<?endif;?>
  dropdown('enter_view');
  dashboard.start();
<?if ($apcupsd):?>
  apcups.start();
<?endif;?>
  update900();
  toggleChart(true);
  toggleCPU(true);
  portMenu();
  loadlist(true);
  sortTables();
  showContent();
  $('#cpuline').val(cpuline);
  $('#netline').val(netline);
  $.removeCookie('lockbutton');
  // remember latest graph values
  $(window).on('beforeunload',function(e){
    var data = {};
    data.cpu = cpu.tail(cpuline);
    data.rxd = rxd.tail(netline);
    data.txd = txd.tail(netline);
    $.post('/webGui/include/InitCharts.php',{cmd:'set',data:JSON.stringify(data)});
  });
});
</script>