FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Varaverk: monitor grid overhaul + Containers & VMs card

Browse Source 
Monitor layout (8-col grid):
- Row 1: System | Power | CPU | Memory | Network
- Row 2: Scripts | Partner & Fallback (span 3) | Containers & VMs (span 4)
- Row 3: GPU (span 2) | Transcode (span 2) | Streams (span 4)
- Row 4: Parity (cols 1-2) | Pools (cols 3-4) | Array (cols 5-8)

New Containers & VMs card:
- Reads FolderView3 folders from docker.json; expand/collapse per folder
- VMs listed first (virsh); containers show start/stop/webui/edit actions
- 2-column balanced layout; collapses to 1 column below 900px
- Docker WebUI URLs resolved from dockerMan template XMLs

New files: include/vms.php, include/docker_folders.php, api/docker_action.php, api/snapshot.php
Responsive: explicit grid-column placements reset at 1024px breakpoint
This commit is contained in:
Gmer4Lfe
2026-05-26 18:59:19 -04:00
parent 6078af0dbb
commit 072c8b720d
12 changed files with 689 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/usr/local/emhttp/plugins/varaverk/css/varaverk.css
+81 -3
View File
@@ -121,6 +121,17 @@
@media (max-width: 1024px) {
#vv-monitor { grid-template-columns: repeat(4, 1fr) !important; }
#vv-docker { grid-column: span 4 !important; }
/* Reset explicit placements so cards reflow in the 4-col grid */
#vv-docker-folders { grid-column: span 4 !important; }
#vv-parity-card { grid-column: auto !important; }
#vv-storage-card { grid-column: auto !important; }
#vv-array-card { grid-column: auto !important; }
}
/* Containers+VMs: single column when viewport is narrow */
@media (max-width: 900px) {
.vv-df-cols { flex-direction: column; }
.vv-df-fname { flex: 0 1 auto; }
}
/* Phone layout — scheduler row/actions fixes + monitor single-column */
@@ -133,10 +144,30 @@
.vv-cron { flex: 1 1 80px; width: auto; min-width: 80px; }
/* Slightly tighter label on narrow screens */
.vv-job-label { font-size: 14px; }
/* Footer buttons wrap instead of overflowing */
.vv-sched-footer { flex-wrap: wrap; }
/* Log toolbar wraps so Stop/Clear stay inside the card */
.vv-log-toolbar { flex-wrap: wrap; align-items: flex-start; }
.vv-log-toolbar > div { flex-wrap: wrap; }
/* Snapshot footer — smaller on mobile */
.vv-snap-footer { gap: 10px !important; }
.vv-snap-item { gap: 4px; }
.vv-snap-label { font-size: 10px; }
.vv-snap-bar { width: 44px; height: 5px; }
.vv-snap-val { font-size: 11px; min-width: 26px; }
.vv-snap-div { font-size: 11px; }
.vv-snap-state { font-size: 11px; }
#vv-snap-partner { font-size: 11px; }
.vv-snap-media { font-size: 11px; }
/* Monitor single-column */
/* CPU core bars — shrink gap and min-width so many cores don't overflow */
.vv-cpu-cores { gap: 1px !important; }
.vv-cpu-core { min-width: 4px !important; }
/* Monitor single-column — explicit placement cards need override too */
#vv-monitor { grid-template-columns: 1fr !important; }
#vv-monitor > .vv-card { grid-column: 1 / -1 !important; }
#vv-docker-folders { grid-column: 1 / -1 !important; }
}
/* Shared footer (Save Schedule left, info right) — same min-height so log card ends level with script cards */
@@ -481,6 +512,8 @@ code.vv-unknown-var { color: #ff9800; background: #1f130d; }
.vv-arrange-btn-active { background: #1a3a1e !important; color: #4caf50 !important; border-color: #2d5c33 !important; }
.vv-arrange-save-btn { background: #1a3a1e; border-color: #2d5c33; color: #4caf50; }
.vv-arrange-save-btn:hover { background: #22502a; }
#vv-arrange-btn { background: #7b1fa2; border-color: #7b1fa2; }
#vv-arrange-btn:hover { background: #4a148c; border-color: #4a148c; }
/* ── Arrange workspace panel ─────────────────────────────────────────────── */
.vv-arrange-ws-hdr { font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase;
@@ -518,8 +551,53 @@ code.vv-unknown-var { color: #ff9800; background: #1f130d; }
.vv-folder-children.vv-drop-target { background: rgba(76,175,80,0.07); border-radius: 4px;
outline: 1px dashed #3a6a3e; }
.vv-folder-new-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
.vv-new-folder-btn { background: #1c1e1c; border-color: #2e3a2e; color: #6a9e6a; }
.vv-new-folder-btn:hover { background: #222e22; }
.vv-new-folder-btn { background: #0277bd !important; border: none !important; color: #fff !important; }
.vv-new-folder-btn:hover { background: #01579b !important; }
/* ── Snapshot footer (right panel status bar) ────────────────────────────── */
.vv-snap-footer { display: flex !important; flex-direction: row !important;
align-items: center !important; justify-content: center; gap: 20px; flex-wrap: wrap; }
.vv-snap-item { display: flex; align-items: center; gap: 7px; }
.vv-snap-label { font-size: 12px; color: #555; text-transform: uppercase; letter-spacing: 0.05em; }
.vv-snap-bar { width: 90px; height: 8px; background: #222; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.vv-snap-bar span { display: block; height: 100%; border-radius: 4px; width: 0;
transition: width 0.5s, background-color 0.5s; }
.vv-snap-val { font-size: 15px; color: #aaa; font-family: monospace; min-width: 36px; }
.vv-snap-div { color: #333; font-size: 15px; }
.vv-snap-state { font-size: 15px; font-weight: bold; }
#vv-snap-partner { font-size: 15px; color: #666; }
.vv-snap-media { font-size: 15px; color: #666; }
/* ── Containers and VMs card ──────────────────────────────────────────────── */
.vv-df-section-hdr { font-size: 10px; font-weight: bold; color: #555; text-transform: uppercase;
letter-spacing: 0.08em; padding: 4px 2px 5px; border-bottom: 1px solid #222;
margin-bottom: 4px; }
.vv-df-empty { font-size: 12px; color: #555; font-style: italic; padding: 4px 2px 8px; }
.vv-df-vm-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px;
border-bottom: 1px solid #1a1a1a; }
.vv-df-vm-row:last-of-type { border-bottom: none; }
.vv-df-vm-icon { font-size: 15px; line-height: 1; flex-shrink: 0; }
.vv-df-vm-meta { font-size: 10px; color: #555; }
.vv-df-cols { display: flex; gap: 10px; align-items: flex-start; }
.vv-df-col { flex: 1; min-width: 0; }
.vv-df-folder { border-bottom: 1px solid #1a1a1a; }
.vv-df-folder:last-child { border-bottom: none; }
.vv-df-folder-hdr { display: flex; align-items: center; gap: 6px; padding: 5px 4px;
cursor: pointer; user-select: none; border-radius: 3px; }
.vv-df-folder-hdr:hover { background: rgba(255,255,255,0.03); }
.vv-df-chevron { color: #555; font-size: 10px; width: 10px; flex-shrink: 0; }
.vv-df-fname { flex: 1; font-size: 12px; color: #aaa; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-df-folder-body { padding-left: 10px; padding-bottom: 3px; }
.vv-df-container { display: flex; align-items: center; gap: 7px; padding: 3px 6px;
cursor: pointer; border-radius: 3px; user-select: none; }
.vv-df-container:hover { background: rgba(255,255,255,0.04); }
.vv-df-active { background: rgba(255,255,255,0.05) !important; outline: 1px solid #444; }
.vv-df-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.vv-df-cname { flex: 1; font-size: 12px; color: #ccc;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv-df-status { font-size: 10px; color: #555; flex-shrink: 0; white-space: nowrap; }
.vv-df-actions { display: flex; gap: 6px; padding: 3px 6px 5px 24px; flex-wrap: wrap; }
/* ── Rsync standalone controls ────────────────────────────────────────────── */
.vv-rsync-location { width: 120px; flex-shrink: 1; min-width: 60px; font-size: 11px; font-family: monospace;