Varaverk: Scheduler Information panel with structured how-it-works sections

- Right panel title: "Suggested Schedules" → "Scheduler Information"
- Removed top hint paragraph; info now lives in the panel itself
- Added three collapsible info sections (open by default) at top of panel:
  Controls — toggle, cron, run, dry run, log, stop, verbose, config
  Orchestrators — enabled/disabled behavior, child cron rules, event triggers
  Children & Advanced — toggle semantics, independent cron, rsync flag badge
- Bullet lists use CSS columns:2 with column-fill:balance for even distribution
- "Suggested Schedules" divider separates info from parsed schedule blocks
- Added vvToggleSug() for DOM-traversal-based accordion (no ID dependency)
This commit is contained in:
Gmer4Lfe
2026-05-24 22:47:34 -04:00
parent cdd2dfc990
commit eade6072b0
2 changed files with 79 additions and 6 deletions
@@ -195,6 +195,16 @@
font-size: 11px; white-space: nowrap; }
.vv-sug-path { color: #888; font-family: monospace; }
.vv-sug-configured { color: #4caf50; font-size: 11px; }
/* Info sections inside Scheduler Information panel */
.vv-info-block .vv-sug-title { color: #9ab; }
.vv-info-body { padding: 2px 10px 10px; }
.vv-info-cols { margin: 0; padding-left: 16px; columns: 2; column-gap: 20px; column-fill: balance; }
.vv-info-cols li { font-size: 12px; color: #aaa; margin-bottom: 5px; break-inside: avoid; line-height: 1.5; }
.vv-info-cols li strong { color: #ccc; }
.vv-info-cols code { background: #1a1a1a; padding: 0 4px; border-radius: 2px;
font-size: 11px; color: #9ab; border: 1px solid #333; }
.vv-info-divider { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #444;
padding: 10px 12px 4px; border-top: 1px solid #2a2a2a; margin-top: 2px; }
/* Log panel */
.vv-log-panel { margin-top: 10px; border-top: 1px solid #333; padding-top: 8px; }
@@ -15,10 +15,6 @@ foreach ($tree as $orch) {
?>
<div id="vv-scheduler">
<p class="vv-hint">Toggle saves immediately. Fill in cron expressions and hit
<strong>Save Schedule</strong> at the bottom. <strong>Run</strong> fires now;
<strong>Dry Run</strong> sets DRY_RUN=1. Log opens on the right.</p>
<div id="vv-sched-layout">
<!-- ── Left: script cards ── -->
@@ -209,7 +205,7 @@ foreach ($tree as $orch) {
<div style="display:flex;align-items:center;gap:8px;">
<button id="vv-back-btn" class="vv-btn-sm" onclick="vvBackToSuggestions()" style="display:none">&#9776; Scheduler Info</button>
<button id="vv-restore-btn" class="vv-btn-sm" onclick="vvRestoreLastLog()" style="display:none">&#8592; <span id="vv-restore-label"></span></button>
<span id="vv-log-title" style="font-size:13px;font-weight:bold;color:#ccc;">Suggested Schedules</span>
<span id="vv-log-title" style="font-size:13px;font-weight:bold;color:#ccc;">Scheduler Information</span>
<span id="vv-log-dot" style="display:none;width:8px;height:8px;border-radius:50%;background:#4caf50;flex-shrink:0;"></span>
</div>
<div style="display:flex;align-items:center;gap:12px;">
@@ -229,6 +225,65 @@ foreach ($tree as $orch) {
<!-- Suggestions view (default) -->
<div id="vv-suggestions">
<!-- ── Static info: Controls ── -->
<div class="vv-sug-block vv-info-block">
<div class="vv-sug-header" onclick="vvToggleSug(this)">
<span class="vv-sug-chevron">▾</span>
<span class="vv-sug-title">Controls</span>
</div>
<div class="vv-sug-body vv-info-body">
<ul class="vv-info-cols">
<li><strong>Toggle</strong> — saves to schedule.json immediately</li>
<li><strong>Cron</strong> — 5-field expression; hit <strong>Save Schedule</strong> to apply all at once</li>
<li><strong>Run</strong> — fires script immediately regardless of schedule</li>
<li><strong>Dry Run</strong> — same as Run with <code>DRY_RUN=1</code></li>
<li><strong>Log</strong> — opens script log in this panel; auto-scrolls to latest</li>
<li><strong>Stop</strong> — sends SIGTERM to process group → 3 s → SIGKILL; clears stuck locks</li>
<li><strong>Verbose</strong> — appends <code>--log</code> for detailed per-step output</li>
<li><strong>Config</strong> — edit host-scoped settings for scripts that support it</li>
</ul>
</div>
</div>
<!-- ── Static info: Orchestrators ── -->
<div class="vv-sug-block vv-info-block">
<div class="vv-sug-header" onclick="vvToggleSug(this)">
<span class="vv-sug-chevron">▾</span>
<span class="vv-sug-title">Orchestrators</span>
</div>
<div class="vv-sug-body vv-info-body">
<ul class="vv-info-cols">
<li><strong>Enabled (ON)</strong> — orchestrator is the sole trigger; its cron fires it and it calls all children in order</li>
<li><strong>Disabled (OFF)</strong> — orchestrator never runs; all children switch off and crons are suppressed</li>
<li><strong>Child toggles (orch ON)</strong> — comment or uncomment the script's line in master.conf <code>*_SCRIPTS</code> array</li>
<li><strong>Child cron (orch ON)</strong> — ignored; orch is the only trigger while it is enabled</li>
<li><strong>Child cron (orch OFF)</strong> — enable a child and give it a cron to run it on its own schedule, independent of the orch</li>
<li><strong>⚡ Array Start / Stop</strong> — triggered by Unraid array events; no cron field; toggle enables or disables the handler</li>
</ul>
</div>
</div>
<!-- ── Static info: Children & Advanced ── -->
<div class="vv-sug-block vv-info-block">
<div class="vv-sug-header" onclick="vvToggleSug(this)">
<span class="vv-sug-chevron">▾</span>
<span class="vv-sug-title">Children &amp; Advanced</span>
</div>
<div class="vv-sug-body vv-info-body">
<ul class="vv-info-cols">
<li><strong>Advanced ▸</strong> — expand to see child scripts managed by the orchestrator</li>
<li><strong>Toggle (orch ON)</strong> — comments or uncomments the script entry in master.conf; determines whether the orch calls it</li>
<li><strong>Toggle (orch OFF)</strong> — has no effect without a cron; pair with a cron expression to run standalone</li>
<li><strong>Cron (orch OFF)</strong> — child runs on its own schedule; completely independent of the parent orchestrator</li>
<li><strong>Rsync child</strong> — shows amber <code>TIER_RSYNC_ENABLED</code> badge; toggle writes <code>true</code> / <code>false</code> directly to master.conf — controls whether rsync runs inside that orchestrator</li>
<li><strong>Rsync (orch OFF)</strong> — toggle is disabled; rsync flag only matters when the orchestrator is running</li>
</ul>
</div>
</div>
<div class="vv-info-divider">Suggested Schedules</div>
<?php foreach ($blocks as $bi => $block):
$scripts = $block['scripts'];
$schedule = $block['schedule'];
@@ -467,7 +522,7 @@ function vvBackToSuggestions() {
const _preBack = document.getElementById('vv-log-pre');
_preBack.removeEventListener('scroll', vvOnLogScroll);
_preBack.style.overflowY = '';
document.getElementById('vv-log-title').textContent = 'Suggested Schedules';
document.getElementById('vv-log-title').textContent = 'Scheduler Information';
document.getElementById('vv-log-ts').textContent = '';
document.getElementById('vv-log-dot').style.display = 'none';
requestAnimationFrame(vvFitRight);
@@ -976,6 +1031,14 @@ function vvToggleSugBlock(bi) {
body.style.display = open ? 'none' : 'block';
chevron.textContent = open ? '▸' : '▾';
}
function vvToggleSug(header) {
const body = header.nextElementSibling;
const chevron = header.querySelector('.vv-sug-chevron');
const open = body.style.display !== 'none';
body.style.display = open ? 'none' : '';
chevron.textContent = open ? '▸' : '▾';
}
</script>
<script>