BitMaster/Proxmox-VE-for-WHMCS
1
0
Fork 0
mirror of https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS.git synced 2026-04-02 02:28:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

v1.3.0: RRD for Admins & Clients

Browse Source
This commit is contained in:
Luke S Thompson
2025-12-03 19:14:00 +11:00
parent ef7752ab89
commit 719735b81c
11 changed files with 624 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
modules/addons/pvewhmcs/pvewhmcs.php
View File

@@ -45,7 +45,7 @@ function pvewhmcs_config() {
// VERSION: also stored in repo/version (for update-available checker)
function pvewhmcs_version(){
return "1.2.19";
return "1.3.0";
}
// WHMCS MODULE: ACTIVATION of the ADDON MODULE
@@ -250,14 +250,57 @@ function pvewhmcs_output($vars) {
<ul class="nav nav-tabs admin-tabs">
<li class="'.($_GET['tab']=="nodes" ? "active" : "").'"><a id="tabLink1" data-toggle="tab" role="tab" href="#nodes">Nodes</a></li>
<li class="'.($_GET['tab']=="guests" ? "active" : "").'"><a id="tabLink2" data-toggle="tab" role="tab" href="#guests">Guests</a></li>
<li class="'.($_GET['tab']=="vmplans" ? "active" : "").'"><a id="tabLink3" data-toggle="tab" role="tab" href="#plans">Plans: VM & CT</a></li>
<li class="'.($_GET['tab']=="ippools" ? "active" : "").'"><a id="tabLink4" data-toggle="tab" role="tab" href="#ippools">IPv4 Pools</a></li>
<li class="'.($_GET['tab']=="vmplans" ? "active" : "").'"><a id="tabLink3" data-toggle="tab" role="tab" href="#plans">Plans</a></li>
<li class="'.($_GET['tab']=="ippools" ? "active" : "").'"><a id="tabLink4" data-toggle="tab" role="tab" href="#ippools">IPv4</a></li>
<li class="'.($_GET['tab']=="actions" ? "active" : "").'"><a id="tabLink5" data-toggle="tab" role="tab" href="#actions">Actions</a></li>
<li class="'.($_GET['tab']=="support" ? "active" : "").'"><a id="tabLink6" data-toggle="tab" role="tab" href="#support">Support</a></li>
<li class="'.($_GET['tab']=="config" ? "active" : "").'"><a id="tabLink7" data-toggle="tab" role="tab" href="#config">Config</a></li>
<li class="'.($_GET['tab']=="logs" ? "active" : "").'"><a id="tabLink8" data-toggle="tab" role="tab" href="#logs">Logs</a></li>
</ul>
</div>
<style>
.pve-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
font-size: 13px;
}
.pve-table thead th {
background: #f8f8f8;
color: #333;
font-weight: 600;
padding: 12px 15px;
text-align: left;
border-bottom: 2px solid #e0e0e0;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pve-table tbody tr {
transition: background 0.15s ease;
}
.pve-table tbody tr:hover {
background: #faf8fc;
}
.pve-table tbody tr:not(:last-child) td {
border-bottom: 1px solid #eee;
}
.pve-table tbody td {
padding: 10px 15px;
color: #333;
vertical-align: middle;
}
.pve-table code {
background: #f4f0f7;
padding: 2px 8px;
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 12px;
color: #5c3d7a;
font-weight: 600;
}
</style>
<div class="tab-content admin-tabs">';
// Handle form submissions for saving or updating plans
@@ -484,11 +527,11 @@ function pvewhmcs_output($vars) {
echo '<div class="panel-heading" style="background:#5c3d7a;color:#fff;">';
echo '<h3 class="panel-title" style="margin:0;"><i class="fa fa-desktop"></i> '.htmlspecialchars($serverlabel).' <small style="color:#ddd;">('.count($guests).' guests: '.$running_count.' running, '.$stopped_count.' stopped)</small></h3>';
echo '</div>';
echo '<div class="panel-body" style="padding:0;">';
echo '<div class="panel-body" style="padding:0;padding-top:8px;">';
if (count($guests) > 0) {
echo '<table class="datatable" border="0" cellpadding="3" cellspacing="1" width="100%">';
echo '<tbody><tr>
echo '<table class="pve-table">';
echo '<thead><tr>
<th>VMID</th>
<th>Name</th>
<th>Status</th>
@@ -498,7 +541,7 @@ function pvewhmcs_output($vars) {
<th>RAM %</th>
<th>Disk %</th>
<th>Uptime</th>
</tr>';
</tr></thead><tbody>';
foreach ($guests as $g) {
$g_node = $g['node'] ?? '—';
@@ -519,8 +562,8 @@ function pvewhmcs_output($vars) {
$status_color = ($g_status === 'running') ? '#5cb85c' : '#999';
echo '<tr>';
echo '<td><strong>'.$g_vmid.'</strong></td>';
echo '<td><i class="fa '.$type_icon.'" style="color:#666;"></i> '.htmlspecialchars($g_name).'</td>';
echo '<td><code>'.$g_vmid.'</code></td>';
echo '<td><i class="fa '.$type_icon.'" style="color:#666;"></i> <strong>'.htmlspecialchars($g_name).'</strong></td>';
echo '<td><span style="display:inline-block;padding:2px 8px;border-radius:3px;background:'.$status_color.';color:#fff;font-size:10px;text-transform:uppercase;">'.htmlspecialchars($g_status).'</span></td>';
echo '<td><span style="text-transform:uppercase;font-size:10px;background:#eee;padding:2px 6px;border-radius:3px;">'.htmlspecialchars($g_type).'</span></td>';
echo '<td>'.htmlspecialchars($g_node).'</td>';
@@ -689,58 +732,109 @@ function pvewhmcs_output($vars) {
// ACTIONS tab in ADMIN GUI
echo '<div id="actions" class="tab-pane '.($_GET['tab']=="actions" ? "active" : "").'" >' ;
echo ('<strong><h2>Module: Action History</h2></strong>');
echo ('Coming in v1.3.x');
echo ('Coming soon!<br><br>');
echo ('<strong><h2>Module: Failed Actions</h2></strong>');
echo ('Coming in v1.3.x<br><br><strong><a href=\'https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/milestones\' target=\'_blank\'>View the milestones/versions on GitHub</a></strong>');
echo ('Coming soon!<br><br>');
echo '</div>';
// SUPPORT tab in ADMIN GUI
echo ('<div id="support" class="tab-pane '.($_GET['tab']=="support" ? "active" : "").'" >') ;
echo ('<strong><h2>System Environment</h2></strong><b>Proxmox VE for WHMCS</b> v' . pvewhmcs_version() . ' (GitHub reports latest as <b>v' . get_pvewhmcs_latest_version() . '</b>)' . '<br><b>PHP</b> v' . phpversion() . ' running on <b>' . $_SERVER['SERVER_SOFTWARE'] . '</b> Web Server (' . $_SERVER['SERVER_NAME'] . ')<br><br>');
echo ('<b>❤️ PVEWHMCS is open-source and free to use & improve on!</b><br><a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/" target="_blank">https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/</a><br><br>');
echo ('<b style="color:darkgreen;">Your 5-star review on WHMCS Marketplace will help the module grow!</b><br>*****: <a href="https://marketplace.whmcs.com/product/6935-proxmox-ve-for-whmcs" target="_blank">https://marketplace.whmcs.com/product/6935-proxmox-ve-for-whmcs</a><br><br>');
echo ('<strong><h2>Issues: Common Causes</h2></strong>1. Save your Package (Plan/Pool)! (configproducts.php?action=edit&id=...#tab=3)<br>2. Where possible, we pass-through the exact error to WHMCS Admin. Check it for info!<br><br>');
echo ('<strong><h2>Module Technical Support</h2></strong>Our README contains a wealth of information:<br><a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/" target="_blank">https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/</a><br>Please only raise an <a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/issues/new/choose" target="_blank"><u>Issue</u></a> on GitHub - inc. logs - if you\'ve properly tried.<br><br><b>Help is not guaranteed (FOSS). We will need your assistance.</b> Thank you!<br><br>');
echo '<div id="support" class="tab-pane '.($_GET['tab']=="support" ? "active" : "").'" >';
echo '
<div style="max-width:800px;">
<div style="background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:25px;margin-bottom:20px;">
<h3 style="margin:0 0 15px 0;color:#5c3d7a;font-weight:600;"><span style="font-size:24px;">&#9881;</span> System Environment</h3>
<table style="width:100%;font-size:14px;">
<tr><td style="padding:6px 0;width:180px;color:#666;">Module Version</td><td style="padding:6px 0;"><code style="background:#f4f0f7;padding:3px 8px;border-radius:3px;color:#5c3d7a;">v' . pvewhmcs_version() . '</code></td></tr>
<tr><td style="padding:6px 0;color:#666;">Latest Available</td><td style="padding:6px 0;"><code style="background:#f4f0f7;padding:3px 8px;border-radius:3px;color:#5c3d7a;">v' . get_pvewhmcs_latest_version() . '</code></td></tr>
<tr><td style="padding:6px 0;color:#666;">Web Server</td><td style="padding:6px 0;"><code style="background:#f4f0f7;padding:3px 8px;border-radius:3px;color:#5c3d7a;">' . htmlspecialchars($_SERVER['SERVER_SOFTWARE']) . '</code></td></tr>
<tr><td style="padding:6px 0;color:#666;">PHP Version</td><td style="padding:6px 0;"><code style="background:#f4f0f7;padding:3px 8px;border-radius:3px;color:#5c3d7a;">v' . phpversion() . '</code></td></tr>
<tr><td style="padding:6px 0;color:#666;">Server Name</td><td style="padding:6px 0;"><code style="background:#f4f0f7;padding:3px 8px;border-radius:3px;color:#5c3d7a;">' . htmlspecialchars($_SERVER['SERVER_NAME']) . '</code></td></tr>
</table>
</div>
<div style="background:#faf8fc;border:1px solid #e0d4e8;border-radius:8px;padding:25px;margin-bottom:20px;">
<h3 style="margin:0 0 15px 0;color:#5c3d7a;font-weight:600;"><span style="font-size:24px;">&#9829;</span> Open Source</h3>
<p style="margin:0 0 12px 0;font-size:14px;line-height:1.6;color:#333;">PVEWHMCS is open-source and free to use &amp; improve on!</p>
<p style="margin:0;">
<a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/" target="_blank" style="color:#5c3d7a;">&#10132; GitHub Repository</a>
</p>
</div>
<div style="background:#f8fff8;border:1px solid #c3e6c3;border-radius:8px;padding:25px;margin-bottom:20px;">
<h3 style="margin:0 0 15px 0;color:#2d7a2d;font-weight:600;"><span style="font-size:24px;">&#9733;</span> Leave a Review</h3>
<p style="margin:0 0 12px 0;font-size:14px;line-height:1.6;color:#333;">Your 5-star review on WHMCS Marketplace helps the module grow!</p>
<p style="margin:0;">
<a href="https://marketplace.whmcs.com/product/6935-proxmox-ve-for-whmcs" target="_blank" style="color:#2d7a2d;">&#9733;&#9733;&#9733;&#9733;&#9733; Rate on WHMCS Marketplace</a>
</p>
</div>
<div style="background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:25px;">
<h3 style="margin:0 0 15px 0;color:#5c3d7a;font-weight:600;"><span style="font-size:24px;">&#9881;</span> Technical Support</h3>
<p style="margin:0 0 12px 0;font-size:14px;line-height:1.6;">Our README contains a wealth of information. Please review it before raising issues.</p>
<p style="margin:0 0 15px 0;">
<a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/" target="_blank" style="color:#5c3d7a;">&#10132; View Documentation</a>
</p>
<p style="margin:0 0 12px 0;font-size:14px;line-height:1.6;">Only raise a GitHub Issue &mdash; including logs &mdash; if you have properly tried to resolve it first.</p>
<p style="margin:0 0 15px 0;">
<a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/issues/new/choose" target="_blank" style="color:#5c3d7a;">&#10132; Open an Issue</a>
</p>
<p style="margin:0;padding:12px;background:#fff8f0;border-radius:6px;font-size:13px;color:#856404;border:1px solid #ffc107;">&#9888; Help is not guaranteed (FOSS). We will need your assistance to troubleshoot.</p>
</div>
</div>';
echo '</div>';
// Config Tab
$config= Capsule::table('mod_pvewhmcs')->where('id', '=', '1')->get()[0];
echo '<div id="config" class="tab-pane '.($_GET['tab']=="config" ? "active" : "").'" >' ;
echo '
<div style="max-width:800px;">
<div style="background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:25px;">
<h3 style="margin:0 0 20px 0;color:#5c3d7a;font-weight:600;">&#9881; Module Configuration</h3>
<form method="post">
<table class="form" border="0" cellpadding="3" cellspacing="1" width="100%">
<table style="width:100%;border-collapse:collapse;">
<tr>
<td class="fieldlabel">VNC Secret</td>
<td class="fieldarea">
<input type="text" size="35" name="vnc_secret" id="vnc_secret" value="'.$config->vnc_secret.'"> Password of "vnc"@"pve" user. Mandatory for VNC proxying. (See the <a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/" target="_blank">README</a> for more info)
</td>
<td style="padding:15px 0;border-bottom:1px solid #eee;width:160px;vertical-align:top;">
<label style="font-weight:600;color:#333;">VNC Secret</label>
</td>
<td style="padding:15px 0;border-bottom:1px solid #eee;">
<input type="text" style="width:100%;max-width:300px;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;" name="vnc_secret" id="vnc_secret" value="'.$config->vnc_secret.'">
<p style="margin:8px 0 0 0;font-size:13px;color:#666;">Password for <code style="background:#f4f0f7;padding:2px 6px;border-radius:3px;color:#5c3d7a;">vnc@pve</code> user. Required for VNC proxying. <a href="https://github.com/The-Network-Crew/Proxmox-VE-for-WHMCS/" target="_blank" style="color:#5c3d7a;"><u>View README</u></a></p>
</td>
</tr>
<tr>
<td class="fieldlabel">VMID Start</td>
<td class="fieldarea">
<input type="text" size="35" name="start_vmid" id="start_vmid" value="'.$config->start_vmid.'"> Starting VMID (PVE). Default is 100. (Module will increment this until vacant VMID is found)
</td>
<td style="padding:15px 0;border-bottom:1px solid #eee;vertical-align:top;">
<label style="font-weight:600;color:#333;">VMID Start</label>
</td>
<td style="padding:15px 0;border-bottom:1px solid #eee;">
<input type="text" style="width:100%;max-width:300px;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;" name="start_vmid" id="start_vmid" value="'.$config->start_vmid.'">
<p style="margin:8px 0 0 0;font-size:13px;color:#666;">For Guests. Increments until a vacant VMID found. Default is <code style="background:#f4f0f7;padding:2px 6px;border-radius:3px;color:#5c3d7a;">100</code></p>
</td>
</tr>
<tr>
<td class="fieldlabel">Debug?</td>
<td class="fieldarea">
<label class="checkbox-inline">
<input type="checkbox" name="debug_mode" value="1" '. ($config->debug_mode=="1" ? "checked" : "").'> Whether or not you want Debug Logging enabled - must also enable WHMCS Module Log (WHMCS Debug) & then view <u><a href="/admin/index.php?rp=/admin/logs/module-log">at this link here.</a></u>
</label>
</td>
<td style="padding:15px 0;vertical-align:top;">
<label style="font-weight:600;color:#333;">Debug Mode</label>
</td>
<td style="padding:15px 0;">
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
<input type="checkbox" name="debug_mode" value="1" '. ($config->debug_mode=="1" ? "checked" : "").' style="width:18px;height:18px;">
<span style="font-size:14px;color:#333;">Enable Debug Logging</span>
</label>
<p style="margin:8px 0 0 0;font-size:13px;color:#666;">Must also enable WHMCS Module Log. <a href="/admin/index.php?rp=/admin/logs/module-log" style="color:#5c3d7a;"><u>View Module Logs</u></a></p>
</td>
</tr>
</table>
<div class="btn-container">
<input type="submit" class="btn btn-primary" value="Save Changes" name="save_config" id="save_config">
<input type="reset" class="btn btn-default" value="Cancel Changes">
<div style="margin-top:25px;padding-top:20px;border-top:1px solid #eee;">
<input type="submit" style="background:#5c3d7a;color:#fff;border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;margin-right:10px;" value="Save Changes" name="save_config" id="save_config">
<input type="reset" style="background:#f5f5f5;color:#333;border:1px solid #ddd;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;" value="Cancel">
</div>
</form>
</div>
</div>
';
echo '</div>';
// LOGS tab in ADMIN GUI
echo '<div id="logs" class="tab-pane ' . (isset($_GET['tab']) && $_GET['tab'] === 'logs' ? 'active' : '') . '">';
echo '<strong><h2>Cluster History</h2></strong>';
try {
// If a client exists already, reuse it; else initialise once from the first enabled pvewhmcs server
@@ -784,8 +878,8 @@ function pvewhmcs_output($vars) {
return (intval($b['starttime'] ?? 0)) <=> (intval($a['starttime'] ?? 0));
});
echo '<table class="datatable" border="0" cellpadding="3" cellspacing="1" width="100%">';
echo '<tbody><tr>
echo '<table class="pve-table">';
echo '<thead><tr>
<th>Task</th>
<th>VMID</th>
<th>Status</th>
@@ -794,7 +888,7 @@ function pvewhmcs_output($vars) {
<th>Duration</th>
<th>Start</th>
<th>End</th>
</tr>';
</tr></thead><tbody>';
foreach ($tasks as $t) {
$node = $t['node'] ?? '—';
@@ -834,10 +928,10 @@ function pvewhmcs_output($vars) {
: ((preg_match('/(error|fail|aborted|unknown)/i', (string)$status)) ? '❌' : '⏳');
echo '<tr>';
echo '<td><strong>' . htmlspecialchars($type) . '</strong></td>';
echo '<td>' . htmlspecialchars($vmid) . '</td>';
echo '<td><code>' . htmlspecialchars($type) . '</code></td>';
echo '<td><code>' . htmlspecialchars($vmid) . '</code></td>';
echo '<td>' . $badge . ' ' . htmlspecialchars($status) . '</td>';
echo '<td><strong>' . htmlspecialchars($node) . '</strong></td>';
echo '<td>' . htmlspecialchars($node) . '</td>';
echo '<td>' . htmlspecialchars($user) . '</td>';
echo '<td>' . htmlspecialchars($durH) . '</td>';
echo '<td>' . htmlspecialchars($start) . '</td>';

589
modules/servers/pvewhmcs/clientarea.tpl
View File

@@ -1,150 +1,503 @@
<div class="row">
<div style="text-align : left;">
</div>
<div class="col col-md-12">
<div class="row">
<div class="col col-md-3">
<div class="row">
<div class="col col-md-12">
<img src="/modules/servers/pvewhmcs/img/{$vm_config['vtype']}.png"/>
</div>
</div>
<div class="row">
<div class="col col-md-12">
<img src="/modules/servers/pvewhmcs/img/os/{$vm_config['ostype']}.png"/>
</div>
</div>
{* Proxmox VE for WHMCS - Client Area Template *}
<style>
.pve-client-area {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.pve-header-panel {
background: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
}
.pve-status-section {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: nowrap;
}
.pve-vm-icons {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.pve-vm-icons img {
max-width: 56px;
height: auto;
}
.pve-status-badge {
text-align: center;
padding: 14px 18px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
min-width: 95px;
flex-shrink: 0;
}
.pve-status-badge img {
max-width: 44px;
margin-bottom: 7px;
}
.pve-status-badge .status-text {
display: block;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: #5c3d7a;
margin-bottom: 3px;
}
.pve-status-badge .uptime-text {
font-size: 12px;
color: #555;
}
.pve-gauges {
display: flex;
gap: 10px;
flex-wrap: nowrap;
flex: 1;
justify-content: flex-end;
}
.pve-gauge-item {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 12px;
text-align: center;
min-width: 75px;
}
.pve-gauge-item .circle {
margin: 0 auto;
}
.pve-gauge-item strong {
display: block;
margin-top: 7px;
font-size: 12px;
color: #555;
}
/* Specs Table */
.pve-specs-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
background: #fff;
font-size: 14px;
}
.pve-specs-table tr:not(:last-child) {
border-bottom: 1px solid #eee;
}
.pve-specs-table td {
padding: 13px 16px;
vertical-align: top;
font-size: 14px;
line-height: 1.5;
}
.pve-specs-table td:first-child {
background: #f8f8f8;
width: 180px;
font-weight: 500;
color: #444;
border-right: 1px solid #eee;
}
.pve-specs-table td:last-child {
color: #333;
}
.pve-specs-table .spec-label {
font-weight: 600;
font-size: 14px;
color: #5c3d7a;
}
.pve-specs-table .spec-sublabel {
font-size: 12px;
color: #555;
font-weight: normal;
}
.pve-specs-table .spec-value {
font-weight: 600;
font-size: 14px;
color: #333;
}
.pve-specs-table .spec-detail {
font-size: 14px;
color: #555;
margin-top: 3px;
}
.pve-specs-table code {
background: #f4f0f7;
padding: 2px 6px;
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
font-size: 13px;
color: #5c3d7a;
}
/* Statistics Section */
.pve-stats-section {
margin-top: 25px;
}
.pve-stats-section h4 {
color: #5c3d7a;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #5c3d7a;
}
.pve-stats-tabs {
display: flex;
gap: 5px;
margin-bottom: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #ddd;
}
.pve-stats-tabs li {
margin: 0;
}
.pve-stats-tabs li a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #666;
background: #f5f5f5;
border: 1px solid #ddd;
border-bottom: none;
border-radius: 6px 6px 0 0;
font-weight: 500;
font-size: 13px;
transition: all 0.2s ease;
}
.pve-stats-tabs li a:hover {
background: #eee;
color: #5c3d7a;
}
.pve-stats-tabs li.active a {
background: #f5f5f5;
color: #666;
border-color: #ddd;
}
.pve-stats-content {
background: #fff;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 8px 8px;
padding: 20px;
}
.pve-stats-content .tab-pane {
display: none;
}
.pve-stats-content .tab-pane.active {
display: block;
}
.pve-graphs-grid {
display: flex;
flex-direction: column;
gap: 15px;
}
.pve-graphs-grid img {
width: 100%;
border-radius: 6px;
border: 1px solid #eee;
}
/* Responsive: Large screens - maximize graph space */
@media (min-width: 1200px) {
.pve-status-section {
gap: 25px;
}
.pve-gauges {
gap: 15px;
}
.pve-gauge-item {
padding: 14px;
min-width: 80px;
}
.pve-graphs-grid img {
max-width: 100%;
}
}
/* Responsive: Medium screens (tablets) */
@media (min-width: 769px) and (max-width: 1199px) {
.pve-status-section {
gap: 15px;
}
.pve-vm-icons img {
max-width: 48px;
}
.pve-gauges {
gap: 8px;
}
.pve-gauge-item {
padding: 10px;
min-width: 65px;
}
}
/* Responsive: Small screens (mobile) */
@media (max-width: 768px) {
.pve-status-section {
flex-direction: column;
text-align: center;
gap: 15px;
}
.pve-status-section > * {
flex-shrink: 1;
}
.pve-vm-icons {
flex-direction: row;
gap: 15px;
}
.pve-gauges {
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.pve-gauge-item {
flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
}
.pve-specs-table td:first-child {
width: 120px;
}
}
/* Alert styling */
.pve-alert-warning {
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 6px;
padding: 15px;
color: #856404;
font-size: 13px;
}
.pve-alert-warning i {
margin-right: 8px;
}
</style>
<div class="pve-client-area">
{* Header Panel with VM Type, Status, and Gauges *}
<div class="pve-header-panel">
<div class="pve-status-section">
{* VM Type & OS Icons *}
<div class="pve-vm-icons">
<img src="/modules/servers/pvewhmcs/img/{$vm_config['vtype']}.png" alt="{$vm_config['vtype']}" title="Type: {$vm_config['vtype']}"/>
<img src="/modules/servers/pvewhmcs/img/os/{$vm_config['ostype']}.png" alt="{$vm_config['ostype']}" title="OS: {$vm_config['ostype']}"/>
</div>
<div class="col col-md-2">
<img src="/modules/servers/pvewhmcs/img/{$vm_status['status']}.png"/><br/>
<span style="text-transform: uppercase"><strong><i>{$vm_status['status']}</i></strong></span><br/>
Up:&nbsp;{$vm_status['uptime']}
{* Status Badge *}
<div class="pve-status-badge">
<img src="/modules/servers/pvewhmcs/img/{$vm_status['status']}.png" alt="{$vm_status['status']}"/>
<span class="status-text">{$vm_status['status']}</span>
<span class="uptime-text">Up {$vm_status['uptime']}</span>
</div>
<div class="col col-md-7">
<div class="row">
<script src="/modules/servers/pvewhmcs/js/CircularLoader.js"></script>
<div class="col col-md-3" style="height:106px;">
<div id="c1" class="circle" data-percent="{$vm_status['cpu']}"><strong>CPU</strong></div>
</div>
<div class="col col-md-3">
<div id="c2" class="circle" data-percent="{$vm_status['memusepercent']}"><strong>RAM</strong></div>
</div>
<div class="col col-md-3">
<div id="c3" class="circle" data-percent="{$vm_status['diskusepercent']}"><strong>Disk</strong></div>
</div>
<div class="col col-md-3">
<div id="c4" class="circle" data-percent="{$vm_status['swapusepercent']}"><strong>Swap</strong></div>
</div>
{* Resource Gauges *}
<div class="pve-gauges">
<script src="/modules/servers/pvewhmcs/js/CircularLoader.js"></script>
<div class="pve-gauge-item">
<div id="c1" class="circle" data-percent="{$vm_status['cpu']}"></div>
<strong>CPU</strong>
</div>
<div class="pve-gauge-item">
<div id="c2" class="circle" data-percent="{$vm_status['memusepercent']}"></div>
<strong>RAM</strong>
</div>
<div class="pve-gauge-item">
<div id="c3" class="circle" data-percent="{$vm_status['diskusepercent']}"></div>
<strong>Disk</strong>
</div>
<div class="pve-gauge-item">
<div id="c4" class="circle" data-percent="{$vm_status['swapusepercent']}"></div>
<strong>Swap</strong>
</div>
<script>
$(document).ready(function() {
$('.circle').each(function(){
$(this).circularloader({
progressPercent: $(this).attr("data-percent"),
fontSize: "13px",
radius: 30,
progressBarWidth: 8,
progressBarBackground: "#D6B1F9",
progressBarColor: "#802DBC",
});
});
});
</script>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.circle').each(function(){
$(this).circularloader({
progressPercent: $(this).attr("data-percent"),
fontSize: "12px",
radius: 27,
progressBarWidth: 7,
progressBarBackground: "#D6B1F9",
progressBarColor: "#802DBC",
});
});
});
</script>
<table class="table table-bordered table-striped">
{* Specifications Table *}
<table class="pve-specs-table">
<tr>
<td><strong>Memory</strong> (RAM)</td>
<td><strong>{$vm_config['memory']}MB</strong></td>
<td><span class="spec-label">Memory</span> <span class="spec-sublabel">(RAM)</span></td>
<td><span class="spec-value">{$vm_config['memory']}MB</span></td>
</tr>
<tr>
<td><strong>Compute</strong> (CPU)</td>
<td><strong>{$vm_config['cpu']}&nbsp;{$vm_config['cores']}&nbsp;core/s&nbsp;on&nbsp;{$vm_config['sockets']}&nbsp;socket/s
</strong></td>
</tr>
<tr>
<td><strong>Storage</strong> (SSD/HDD)</td>
<td><span class="spec-label">Compute</span> <span class="spec-sublabel">(CPU)</span></td>
<td>
{$rootfs=(","|explode:$vm_config['rootfs'])}
{$disk=(","|explode:$vm_config['ide0'])}
{$disk[1]}
{$rootfs[1]}
{($vm_config['scsi0']|replace:',':'<br/>')}
{($vm_config['virtio0']|replace:',':'<br/>')}
<span class="spec-value">{$vm_config['cores']} core(s)</span>
<div class="spec-detail">on {$vm_config['sockets']} socket(s)</div>
</td>
</tr>
<tr>
<td><strong>Boot Order</strong> (1st > 2nd)</td>
<td>{($vm_config['boot']|replace:'order=':''|replace:';':' > ')}</td>
<td><span class="spec-label">Storage</span> <span class="spec-sublabel">(SSD/HDD)</span></td>
<td>
{if $vm_config['rootfs']}
{assign var="rootfs_parts" value=","|explode:$vm_config['rootfs']}
{foreach from=$rootfs_parts item=rpart}
{if $rpart|strpos:"size=" !== false}<span class="spec-value">{$rpart|replace:'size=':''}</span> <span class="spec-detail">(rootfs)</span>{/if}
{/foreach}
{/if}
{if $vm_config['ide0']}
{assign var="ide0_parts" value=","|explode:$vm_config['ide0']}
{foreach from=$ide0_parts item=ipart}
{if $ipart|strpos:"size=" !== false}<div class="spec-detail"><span class="spec-value">{$ipart|replace:'size=':''}</span> (ide0)</div>{/if}
{/foreach}
{/if}
{if $vm_config['scsi0']}
{assign var="scsi0_parts" value=","|explode:$vm_config['scsi0']}
{foreach from=$scsi0_parts item=spart}
{if $spart|strpos:"size=" !== false}<div class="spec-detail"><span class="spec-value">{$spart|replace:'size=':''}</span> (scsi0)</div>{/if}
{/foreach}
{/if}
{if $vm_config['virtio0']}
{assign var="virtio0_parts" value=","|explode:$vm_config['virtio0']}
{foreach from=$virtio0_parts item=vpart}
{if $vpart|strpos:"size=" !== false}<div class="spec-detail"><span class="spec-value">{$vpart|replace:'size=':''}</span> (virtio0)</div>{/if}
{/foreach}
{/if}
</td>
</tr>
<tr>
<td><strong>IPv4</strong> (Networking)</td><td><strong>{$vm_config['ipv4']}</strong><br/>Mask:&nbsp;{$vm_config['netmask4']}<br/>Gateway:&nbsp;{$vm_config['gateway4']}</td>
<td><span class="spec-label">Boot Order</span></td>
<td><span class="spec-value">{($vm_config['boot']|replace:'order=':''|replace:';':' → ')}</span></td>
</tr>
<tr>
<td><strong>ipconfig</strong> (IPv4/v6)</td><td><strong>NIC #0</strong>: {$vm_config['ipconfig0']}<br><strong>NIC #1</strong>: {$vm_config['ipconfig1']}</td>
<td><span class="spec-label">IPv4</span> <span class="spec-sublabel">(Networking)</span></td>
<td>
<span class="spec-value">{$vm_config['ipv4']}</span>
<div class="spec-detail">Mask: {$vm_config['netmask4']} &bull; Gateway: {$vm_config['gateway4']}</div>
</td>
</tr>
<tr>
<td><strong>NIC #0</strong> (IPv4)</td>
<td>{($vm_config['net0']|replace:',':'<br/>'|replace:'=':': ')}</td>
<td><span class="spec-label">IP Config</span> <span class="spec-sublabel">(IPv4/v6)</span></td>
<td>
{if $vm_config['ipconfig0']}<div class="spec-detail"><strong>NIC #0:</strong> {($vm_config['ipconfig0']|replace:',':' &bull; '|replace:'=':': ')}</div>{/if}
{if $vm_config['ipconfig1']}<div class="spec-detail"><strong>NIC #1:</strong> {($vm_config['ipconfig1']|replace:',':' &bull; '|replace:'=':': ')}</div>{/if}
</td>
</tr>
<tr>
<td><strong>NIC #1</strong> (IPv6)</td>
<td>{($vm_config['net1']|replace:',':'<br/>'|replace:'=':': ')}</td>
<td><span class="spec-label">NIC #0</span> <span class="spec-sublabel">(Primary)</span></td>
<td>
{assign var="net0_parts" value=","|explode:$vm_config['net0']}
{foreach from=$net0_parts item=part name=netloop}
{if $part|strpos:"=" !== false}
{assign var="kv" value="="|explode:$part}
{if $kv[0] == 'virtio' || $kv[0] == 'e1000' || $kv[0] == 'rtl8139'}
<div class="spec-detail"><strong>{$kv[0]}</strong>: <code>{$kv[1]}</code></div>
{elseif $kv[0] == 'bridge' || $kv[0] == 'link_down' || $kv[0] == 'firewall' || $kv[0] == 'tag'}
<div class="spec-detail"><strong>{$kv[0]}</strong>: {$kv[1]}</div>
{/if}
{/if}
{/foreach}
</td>
</tr>
{if $vm_config['net1']}
<tr>
<td><strong>Config</strong> (Tweaks)</td>
<td>on_boot: {$vm_config['onboot']}</td>
<td><span class="spec-label">NIC #1</span> <span class="spec-sublabel">(Secondary)</span></td>
<td>
{assign var="net1_parts" value=","|explode:$vm_config['net1']}
{foreach from=$net1_parts item=part name=netloop}
{if $part|strpos:"=" !== false}
{assign var="kv" value="="|explode:$part}
{if $kv[0] == 'virtio' || $kv[0] == 'e1000' || $kv[0] == 'rtl8139'}
<div class="spec-detail"><strong>{$kv[0]}</strong>: <code>{$kv[1]}</code></div>
{elseif $kv[0] == 'bridge' || $kv[0] == 'link_down' || $kv[0] == 'firewall' || $kv[0] == 'tag'}
<div class="spec-detail"><strong>{$kv[0]}</strong>: {$kv[1]}</div>
{/if}
{/if}
{/foreach}
</td>
</tr>
{/if}
<tr>
<td><strong>SSH Keys</strong> (Public)</td>
<td>{$vm_config['sshkeys']}</td>
<td><span class="spec-label">Config</span> <span class="spec-sublabel">(Tweaks)</span></td>
<td><span class="spec-detail"><strong>On-boot?</strong> {if $vm_config['onboot']}Yes!{else}No (Contact Support){/if}</span></td>
</tr>
{if $vm_config['sshkeys']}
<tr>
<td><strong>OS</strong> (System Kernel)</td>
<td><strong>{$vm_config['ostype']}</strong></td>
<td><span class="spec-label">SSH Keys</span> <span class="spec-sublabel">(Public)</span></td>
<td><div class="spec-detail" style="word-break:break-all;">{$vm_config['sshkeys']}</div></td>
</tr>
{/if}
<tr>
<td><span class="spec-label">Operating System</span></td>
<td><span class="spec-value">{$vm_config['ostype']}</span></td>
</tr>
</table>
{if ($smarty.get.a eq 'vmStat')}
<h4>VM Statistics</h4>
{if $vm_statistics['cpu']['day']}
<ul class="nav nav-tabs client-tabs" role="tab-list">
<li class="active"><a id="dailytab" data-toggle="tab" role="tab" href="#dailystat">Daily</a></li>
<li><a id="dailytab" data-toggle="tab" role="tab" href="#weeklystat">Weekly</a></li>
<li><a id="dailytab" data-toggle="tab" role="tab" href="#monthlystat">Monthly</a></li>
<li><a id="dailytab" data-toggle="tab" role="tab" href="#yearlystat">Yearly</a></li>
</ul>
<div class="tab-content admin-tabs">
<div id="dailystat" class="tab-pane active">
<img src="data:image/png;base64,{$vm_statistics['cpu']['day']}"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['day']}"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['day']}"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['day']}"/>
</div>
<div id="weeklystat" class="tab-pane">
<img src="data:image/png;base64,{$vm_statistics['cpu']['week']}"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['week']}"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['week']}"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['week']}"/>
</div>
<div id="monthlystat" class="tab-pane">
<img src="data:image/png;base64,{$vm_statistics['cpu']['month']}"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['month']}"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['month']}"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['month']}"/>
</div>
<div id="yearlystat" class="tab-pane">
<img src="data:image/png;base64,{$vm_statistics['cpu']['year']}"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['year']}"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['year']}"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['year']}"/>
</div>
</div>
{else}
<div class="alert alert-warning">Stats Error: RRD data unavailable. Please ask Support to upgrade RRD stored data from 2.x to 9.0 format on their Nodes.</div>
{/if}
{/if}
{* Statistics Section *}
{if ($smarty.get.a eq 'vmStat')}
<div class="pve-stats-section">
<h4><i class="fa fa-line-chart"></i> Guest Statistics</h4>
{if $vm_statistics['cpu']['day']}
<ul class="pve-stats-tabs" role="tablist">
<li class="active"><a data-toggle="tab" role="tab" href="#dailystat">Daily</a></li>
<li><a data-toggle="tab" role="tab" href="#weeklystat">Weekly</a></li>
<li><a data-toggle="tab" role="tab" href="#monthlystat">Monthly</a></li>
<li><a data-toggle="tab" role="tab" href="#yearlystat">Yearly</a></li>
</ul>
<div class="pve-stats-content tab-content">
<div id="dailystat" class="tab-pane active">
<div class="pve-graphs-grid">
<img src="data:image/png;base64,{$vm_statistics['cpu']['day']}" alt="CPU (Daily)"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['day']}" alt="Memory (Daily)"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['day']}" alt="Network I/O (Daily)"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['day']}" alt="Disk I/O (Daily)"/>
</div>
</div>
<div id="weeklystat" class="tab-pane">
<div class="pve-graphs-grid">
<img src="data:image/png;base64,{$vm_statistics['cpu']['week']}" alt="CPU (Weekly)"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['week']}" alt="Memory (Weekly)"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['week']}" alt="Network I/O (Weekly)"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['week']}" alt="Disk I/O (Weekly)"/>
</div>
</div>
<div id="monthlystat" class="tab-pane">
<div class="pve-graphs-grid">
<img src="data:image/png;base64,{$vm_statistics['cpu']['month']}" alt="CPU (Monthly)"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['month']}" alt="Memory (Monthly)"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['month']}" alt="Network I/O (Monthly)"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['month']}" alt="Disk I/O (Monthly)"/>
</div>
</div>
<div id="yearlystat" class="tab-pane">
<div class="pve-graphs-grid">
<img src="data:image/png;base64,{$vm_statistics['cpu']['year']}" alt="CPU (Yearly)"/>
<img src="data:image/png;base64,{$vm_statistics['mem']['year']}" alt="Memory (Yearly)"/>
<img src="data:image/png;base64,{$vm_statistics['netinout']['year']}" alt="Network I/O (Yearly)"/>
<img src="data:image/png;base64,{$vm_statistics['diskrw']['year']}" alt="Disk I/O (Yearly)"/>
</div>
</div>
</div>
{else}
<div class="pve-alert-warning">
<i class="fa fa-exclamation-triangle"></i>
Stats Error: RRD Unavailable. Ask Support to upgrade guest RRD Data from 2.x to 9.0 format on their Node/s!
</div>
{/if}
</div>
{/if}
</div>