dashboard: refactor layout and add worker stats

static/dashboard.html

@@ -33,57 +33,45 @@
             <div class="sysbar-bar"><div class="sysbar-fill" id="sysDiskFill" style="width:0"></div></div>
             <span class="sysbar-val" id="sysDiskPct">-</span></div>
         <div class="sysbar-item"><span class="sysbar-lbl">Process:</span><span class="sysbar-val" id="sysProcMem">-</span></div>
-        <div class="sysbar-item sysbar-net"><span class="sysbar-lbl">Scrape:</span><span class="sysbar-val net-tx" id="netScrapeTx">-</span><span class="sysbar-val net-rx" id="netScrapeRx">-</span></div>
-        <div class="sysbar-item sysbar-net"><span class="sysbar-lbl">Proxy:</span><span class="sysbar-val net-tx" id="netProxyTx">-</span><span class="sysbar-val net-rx" id="netProxyRx">-</span></div>
     </div>
 
-    <!-- Primary Stats Row -->
-    <div class="g g5">
+    <!-- Distributed Workers (Primary) -->
+    <div class="g g3" style="margin-bottom:16px">
         <div class="c">
             <div class="lbl">Working Proxies</div>
             <div class="val grn" id="working">-</div>
             <div class="sub">of <span id="total">-</span> in database</div>
         </div>
         <div class="c">
-            <div class="lbl">Tests (Cumulative)</div>
-            <div class="val" id="tested">-</div>
-            <div class="sub"><span class="grn" id="passed">-</span> passed / <span class="red" id="failed">-</span> failed</div>
+            <div class="lbl">Active Workers</div>
+            <div class="val cyn" id="dwActive">-</div>
+            <div class="sub">distributed nodes</div>
         </div>
         <div class="c">
-            <div class="lbl">Success Rate</div>
-            <div class="val-md grn" id="successRate">-</div>
-            <div class="bar-wrap"><div class="bar grn" id="srBar" style="width:0"></div></div>
-        </div>
-        <div class="c">
-            <div class="lbl">Test Rate</div>
-            <div class="val-md blu" id="rate">-</div>
-            <div class="sub">tests/sec (60s)</div>
-        </div>
-        <div class="c">
-            <div class="lbl">Uptime</div>
-            <div class="val-md" id="uptime">-</div>
-            <div class="sub">session duration</div>
+            <div class="lbl">Combined Rate</div>
+            <div class="val blu" id="dwRate">-</div>
+            <div class="sub">tests/sec (all workers)</div>
         </div>
     </div>
 
-    <!-- Worker Pool (always visible) -->
+    <!-- Worker Stats & Scraper Stats -->
     <div class="g g2" style="margin-bottom:16px">
         <div class="c">
-            <div class="sec-hdr" style="margin-top:0">Worker Pool</div>
+            <div class="sec-hdr" style="margin-top:0">Worker Testing</div>
             <div class="stats-wrap">
-                <div class="stat-row"><span class="stat-lbl">Active Threads</span><span class="stat-val" id="threads">-</span></div>
-                <div class="bar-wrap"><div class="bar blu" id="threadBar" style="width:0"></div></div>
-                <div class="stat-row" style="margin-top:8px"><span class="stat-lbl">Job Queue</span><span class="stat-val yel" id="queue">-</span></div>
-                <div class="stat-row"><span class="stat-lbl">Queue ETA</span><span class="stat-val cyn" id="queueEta">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Tests (Session)</span><span class="stat-val" id="dwTested">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Working Found</span><span class="stat-val grn" id="dwWorking">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Success Rate</span><span class="stat-val" id="successRate">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Uptime</span><span class="stat-val" id="uptime">-</span></div>
             </div>
         </div>
         <div class="c">
-            <div class="sec-hdr" style="margin-top:0">Tor Pool</div>
+            <div class="sec-hdr" style="margin-top:0">Scraper Network</div>
             <div class="stats-wrap">
-                <div class="stat-row"><span class="stat-lbl">Total Requests</span><span class="stat-val" id="torTotal">-</span></div>
-                <div class="stat-row"><span class="stat-lbl">Success Rate</span><span class="stat-val grn" id="torSuccess">-</span></div>
-                <div class="stat-row"><span class="stat-lbl">Healthy Nodes</span><span class="stat-val" id="torHealthy">-</span></div>
-                <div class="stat-row"><span class="stat-lbl">Avg Latency</span><span class="stat-val cyn" id="torLatency">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Tor Requests</span><span class="stat-val" id="torTotal">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Tor Success</span><span class="stat-val grn" id="torSuccess">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Engines Active</span><span class="stat-val cyn" id="engActive">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Proxies Added</span><span class="stat-val yel" id="proxiesAdded">-</span></div>
             </div>
         </div>
     </div>
@@ -91,17 +79,69 @@
     <!-- Tab Navigation -->
     <div class="tabs">
         <div class="tab-nav">
-            <button class="tab-btn active" data-tab="perf">Performance</button>
+            <button class="tab-btn active" data-tab="workers">Workers</button>
+            <button class="tab-btn" data-tab="perf">Performance</button>
             <button class="tab-btn" data-tab="proto">Protocols</button>
             <button class="tab-btn" data-tab="geo">Geography</button>
-            <button class="tab-btn" data-tab="infra">Infrastructure</button>
+            <button class="tab-btn" data-tab="scraper">Scraper</button>
             <button class="tab-btn" data-tab="mitm">MITM</button>
             <button class="tab-btn" data-tab="db">Database</button>
         </div>
     </div>
 
+    <!-- Workers Tab (default) -->
+    <div id="tab-workers" class="tab-content active">
+    <div class="sec">
+        <div class="sec-hdr">Distributed Worker Nodes</div>
+        <div class="g g4">
+            <div class="c c-sm">
+                <div class="lbl">Active</div>
+                <div class="val-sm cyn" id="wkActive">-</div>
+            </div>
+            <div class="c c-sm">
+                <div class="lbl">Total Tested</div>
+                <div class="val-sm blu" id="wkTested">-</div>
+            </div>
+            <div class="c c-sm">
+                <div class="lbl">Working Found</div>
+                <div class="val-sm grn" id="wkWorking">-</div>
+            </div>
+            <div class="c c-sm">
+                <div class="lbl">Success Rate</div>
+                <div class="val-sm yel" id="wkSuccessRate">-</div>
+            </div>
+        </div>
+    </div>
+    <div class="sec">
+        <div class="sec-hdr">Worker Status</div>
+        <div class="g g2" id="workerCards">
+            <div class="c" style="text-align:center;color:var(--dim);padding:40px">
+                <div style="font-size:24px;margin-bottom:8px">No workers connected</div>
+                <div style="font-size:12px">Add workers with: <code>python ppf.py --worker --server URL</code></div>
+            </div>
+        </div>
+    </div>
+    <div class="sec">
+        <div class="sec-hdr">Queue Status</div>
+        <div class="g g3">
+            <div class="c c-sm">
+                <div class="lbl">Pending Tests</div>
+                <div class="val-sm" id="queuePending">-</div>
+            </div>
+            <div class="c c-sm">
+                <div class="lbl">Claimed by Workers</div>
+                <div class="val-sm cyn" id="queueClaimed">-</div>
+            </div>
+            <div class="c c-sm">
+                <div class="lbl">Due for Retest</div>
+                <div class="val-sm yel" id="queueDue">-</div>
+            </div>
+        </div>
+    </div>
+    </div>
+
     <!-- Performance Tab -->
-    <div id="tab-perf" class="tab-content active">
+    <div id="tab-perf" class="tab-content">
     <!-- Rate & Success Charts -->
     <div class="g g2">
         <div class="c c-lg">
@@ -230,74 +270,9 @@
 
     </div>
 
-    <!-- Infrastructure Tab -->
-    <div id="tab-infra" class="tab-content">
-    <!-- Judge Services & Anonymity -->
-    <div class="g g2">
-        <div class="c">
-            <div class="sec-hdr" style="margin-top:0">Judge Services</div>
-            <div class="stats-wrap">
-                <div class="stat-row"><span class="stat-lbl">Available</span><span class="stat-val grn" id="judgesAvail">-</span></div>
-                <div class="stat-row"><span class="stat-lbl">In Cooldown</span><span class="stat-val yel" id="judgesCooldown">-</span></div>
-            </div>
-            <div class="lbl" style="margin-top:10px">Top Performers</div>
-            <div class="lb-wrap">
-                <div id="topJudges"></div>
-            </div>
-        </div>
-        <div class="c">
-            <div class="sec-hdr" style="margin-top:0">Anonymity Levels</div>
-            <div class="stats-wrap">
-                <div id="anonBreakdown"></div>
-            </div>
-            <div class="sub" style="margin-top:8px;font-size:10px">Elite = no headers, Anonymous = adds headers, Transparent = reveals IP</div>
-        </div>
-    </div>
-
-    <!-- Tor Exit Nodes -->
-    <div class="sec">
-        <div class="sec-hdr">Tor Exit Nodes</div>
-        <div class="g g3" id="torPool"></div>
-    </div>
-
-    <!-- Network Usage -->
-    <div class="sec">
-        <div class="sec-hdr">Network Usage</div>
-        <div class="g g3">
-            <div class="c c-sm">
-                <div class="lbl">Total RX</div>
-                <div class="val-sm grn" id="netRx">-</div>
-            </div>
-            <div class="c c-sm">
-                <div class="lbl">Total TX</div>
-                <div class="val-sm blu" id="netTx">-</div>
-            </div>
-            <div class="c c-sm">
-                <div class="lbl">Total</div>
-                <div class="val-sm cyn" id="netTotal">-</div>
-            </div>
-        </div>
-        <div class="g g2" style="margin-top:12px">
-            <div class="c">
-                <div class="lbl" style="text-align:center;margin-bottom:8px">By Category</div>
-                <div class="stats-wrap">
-                    <div class="stat-row"><span class="stat-lbl">Proxy Testing</span><span class="stat-val cyn" id="netProxy">-</span></div>
-                    <div class="stat-row"><span class="stat-lbl">Scraping</span><span class="stat-val yel" id="netScraper">-</span></div>
-                </div>
-            </div>
-            <div class="c">
-                <div class="lbl" style="text-align:center;margin-bottom:8px">Rates (avg)</div>
-                <div class="stats-wrap">
-                    <div class="stat-row"><span class="stat-lbl">RX Rate</span><span class="stat-val grn" id="netRxRate">-</span></div>
-                    <div class="stat-row"><span class="stat-lbl">TX Rate</span><span class="stat-val blu" id="netTxRate">-</span></div>
-                </div>
-            </div>
-        </div>
-        <div class="lbl" style="margin-top:12px">Per Tor Node</div>
-        <div class="g g3" id="netTorNodes"></div>
-    </div>
-
-    <!-- Scraper & SSL Stats -->
+    <!-- Scraper Tab -->
+    <div id="tab-scraper" class="tab-content">
+    <!-- Search Engines -->
     <div class="g g2">
         <div class="c">
             <div class="sec-hdr" style="margin-top:0">Search Engines</div>
@@ -312,7 +287,31 @@
             </div>
         </div>
         <div class="c">
-            <div class="sec-hdr" style="margin-top:0">SSL/TLS Security</div>
+            <div class="sec-hdr" style="margin-top:0">Tor Network (Scraping)</div>
+            <div class="stats-wrap">
+                <div class="stat-row"><span class="stat-lbl">Healthy Nodes</span><span class="stat-val grn" id="torHealthy">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">Avg Latency</span><span class="stat-val cyn" id="torLatency">-</span></div>
+            </div>
+            <div class="lbl" style="margin-top:10px">Tor Exit Nodes</div>
+            <div class="g g2" id="torPool" style="margin-top:8px"></div>
+        </div>
+    </div>
+
+    <!-- Judge Services -->
+    <div class="g g2">
+        <div class="c">
+            <div class="sec-hdr" style="margin-top:0">Judge Services</div>
+            <div class="stats-wrap">
+                <div class="stat-row"><span class="stat-lbl">Available</span><span class="stat-val grn" id="judgesAvail">-</span></div>
+                <div class="stat-row"><span class="stat-lbl">In Cooldown</span><span class="stat-val yel" id="judgesCooldown">-</span></div>
+            </div>
+            <div class="lbl" style="margin-top:10px">Top Performers</div>
+            <div class="lb-wrap">
+                <div id="topJudges"></div>
+            </div>
+        </div>
+        <div class="c">
+            <div class="sec-hdr" style="margin-top:0">SSL/TLS Testing</div>
             <div class="stats-wrap">
                 <div class="stat-row"><span class="stat-lbl">SSL Tests</span><span class="stat-val" id="sslTested">-</span></div>
                 <div class="stat-row"><span class="stat-lbl">Passed</span><span class="stat-val grn" id="sslPassed">-</span></div>