devlab/server-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve threshold modal design with card-based layout and color-coded inputs

Browse Source
This commit is contained in:
Agent
2026-06-13 16:28:38 -04:00
parent eda923dc44
commit dc34f29169
1 changed files with 43 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
views/servers/show.php
View File

@@ -304,49 +304,60 @@ $canManage = $server_role === 'owner' || $server_role === 'manager';
</div>
<div id="thresholdModal" class="modal">
<div class="modal-dialog">
<div class="modal-dialog" style="max-width:560px">
<div class="modal-header">
<h3><i class="fas fa-bell"></i> Notification Thresholds</h3>
<button type="button" class="modal-close" onclick="closeThresholdModal()">&times;</button>
</div>
<div class="modal-body">
<p class="text-muted" style="margin-bottom:20px">
Notifications are sent to all users with access to this server when the agent reports values
exceeding these thresholds. Only the server owner can modify them.
<p class="text-muted" style="margin-bottom:24px;font-size:0.9em;line-height:1.5">
When the agent reports values above these thresholds, all users with access to this server
receive a notification and push alert. Only the server owner can modify them.
</p>
<form id="thresholdForm" onsubmit="return false">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Resource</th>
<th>Warning (%)</th>
<th>Critical (%)</th>
</tr>
</thead>
<tbody>
<?php foreach (['cpu' => 'CPU', 'ram' => 'RAM', 'disk' => 'Disk'] as $key => $label): ?>
<tr>
<td><strong><?= $label ?></strong></td>
<td>
<input type="number" name="<?= $key ?>_warning"
value="<?= htmlspecialchars((string)($server["threshold_{$key}_warning"] ?? 80)) ?>"
min="0" max="100" step="0.01" class="form-control" style="width:120px">
</td>
<td>
<input type="number" name="<?= $key ?>_critical"
value="<?= htmlspecialchars((string)($server["threshold_{$key}_critical"] ?? 95)) ?>"
min="0" max="100" step="0.01" class="form-control" style="width:120px">
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php $resources = [
'cpu' => ['label' => 'CPU', 'icon' => 'fas fa-microchip', 'color' => 'var(--info)'],
'ram' => ['label' => 'RAM', 'icon' => 'fas fa-memory', 'color' => 'var(--purple)'],
'disk' => ['label' => 'Disk', 'icon' => 'fas fa-hdd', 'color' => 'var(--warning)'],
]; ?>
<?php foreach ($resources as $key => $res): ?>
<div style="background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:12px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:14px">
<i class="<?= $res['icon'] ?>" style="color:<?= $res['color'] ?>;font-size:1.2em;width:20px;text-align:center"></i>
<strong style="font-size:1em"><?= $res['label'] ?></strong>
</div>
<div style="display:flex;gap:16px;align-items:center">
<div style="flex:1">
<label style="display:flex;align-items:center;gap:6px;font-size:0.82em;color:var(--warning);margin-bottom:4px;font-weight:600">
<i class="fas fa-exclamation-triangle" style="font-size:0.85em"></i> Warning
</label>
<div style="position:relative">
<input type="number" name="<?= $key ?>_warning"
value="<?= htmlspecialchars((string)($server["threshold_{$key}_warning"] ?? 80)) ?>"
min="0" max="100" step="0.01"
style="width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:6px;background:var(--bg-dark);color:var(--text);font-size:0.95em;box-sizing:border-box">
<span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.85em">%</span>
</div>
</div>
<div style="flex:1">
<label style="display:flex;align-items:center;gap:6px;font-size:0.82em;color:var(--danger);margin-bottom:4px;font-weight:600">
<i class="fas fa-bolt" style="font-size:0.85em"></i> Critical
</label>
<div style="position:relative">
<input type="number" name="<?= $key ?>_critical"
value="<?= htmlspecialchars((string)($server["threshold_{$key}_critical"] ?? 95)) ?>"
min="0" max="100" step="0.01"
style="width:100%;padding:8px 12px 8px 32px;border:1px solid var(--border);border-radius:6px;background:var(--bg-dark);color:var(--text);font-size:0.95em;box-sizing:border-box">
<span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.85em">%</span>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="saveThresholds()"><i class="fas fa-save"></i> Save</button>
<button class="btn btn-primary" onclick="saveThresholds()"><i class="fas fa-save"></i> Save Thresholds</button>
<button class="btn btn-secondary" onclick="closeThresholdModal()">Cancel</button>
</div>
</div>