From b9826e39753b9a2de64cbf0114760feeb6eb968b Mon Sep 17 00:00:00 2001
From: Jeremy Anderson <info@dcos.net>
Date: Wed, 25 Mar 2026 18:49:41 -0400
Subject: [PATCH] added LiveDAG

---
 cockpit/fester-module/targets.js | 144 +++++++++++++++----------------
 cockpit/fester-module/ui.html    | 143 ++++++++++++++++++++----------
 2 files changed, 171 insertions(+), 116 deletions(-)

diff --git a/cockpit/fester-module/targets.js b/cockpit/fester-module/targets.js
index ed49d7e..91be4ca 100644
--- a/cockpit/fester-module/targets.js
+++ b/cockpit/fester-module/targets.js
@@ -1,84 +1,84 @@
 // cockpit/fester-module/targets.js
 
-/**
- * Fester Targets Module
- * Handles nodes, edges, metrics, heatmaps, and live updates for cockpit UI.
- */
+// State for available targets
+let targets = [];
 
-(function(global) {
+// Fetch current targets from backend
+async function fetchTargets() {
+    try {
+        const res = await fetch("/api/targets");
+        targets = await res.json();
+        renderTargets();
+    } catch (err) {
+        console.error("Failed to fetch targets:", err);
+    }
+}
 
-    const targetsModule = {
-        nodes: {},
-        edges: [],
-        metrics: {},
-        heatmaps: {},
-        callbacks: [],
+// Render target list in the sidebar
+function renderTargets() {
+    let sidebar = document.getElementById("sidebar");
+    let panel = document.getElementById("targets-panel");
+    
+    if(!panel) {
+        panel = document.createElement("div");
+        panel.id = "targets-panel";
+        panel.className = "panel";
+        sidebar.appendChild(panel);
+    }
 
-        /**
-         * Register a callback to receive updated DAG data
-         */
-        onUpdate(callback) {
-            if (typeof callback === 'function') {
-                this.callbacks.push(callback);
-            }
-        },
+    panel.innerHTML = "<h2>Targets</h2>";
 
-        /**
-         * Update the internal state from WS or iframe message
-         */
-        update(data) {
-            if (!data) return;
+    targets.forEach(target => {
+        const container = document.createElement("div");
+        container.style.marginBottom = "5px";
 
-            if (data.nodes) {
-                data.nodes.forEach(node => this.nodes[node.id] = node);
-            }
-            if (data.edges) {
-                this.edges = data.edges;
-            }
-            if (data.metrics) {
-                Object.assign(this.metrics, data.metrics);
-            }
-            if (data.heatmaps) {
-                Object.assign(this.heatmaps, data.heatmaps);
-            }
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        checkbox.id = `target-${target.name}`;
+        checkbox.checked = target.enabled;
+        checkbox.addEventListener("change", () => toggleTarget(target.name, checkbox.checked));
 
-            this.dispatch();
-        },
+        const label = document.createElement("label");
+        label.htmlFor = checkbox.id;
+        label.innerText = target.name;
 
-        /**
-         * Notify all registered callbacks with the updated data
-         */
-        dispatch() {
-            const snapshot = {
-                nodes: Object.values(this.nodes),
-                edges: this.edges,
-                metrics: this.metrics,
-                heatmaps: this.heatmaps
-            };
-            this.callbacks.forEach(cb => cb(snapshot));
-        },
-
-        /**
-         * Clear all stored DAG state
-         */
-        clear() {
-            this.nodes = {};
-            this.edges = [];
-            this.metrics = {};
-            this.heatmaps = {};
-            this.dispatch();
-        }
-    };
-
-    // Listen for iframe messages from cockpit.html
-    window.addEventListener('message', (event) => {
-        const data = event.data;
-        if (data && typeof data === 'object') {
-            targetsModule.update(data);
-        }
+        container.appendChild(checkbox);
+        container.appendChild(label);
+        panel.appendChild(container);
     });
+}
 
-    // Expose module globally
-    global.FesterTargets = targetsModule;
+// Enable/disable target via backend
+async function toggleTarget(targetName, enabled) {
+    try {
+        const res = await fetch(`/api/targets/${targetName}`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ enabled })
+        });
+        if (!res.ok) {
+            console.error("Failed to update target", targetName);
+        } else {
+            console.log(`Target ${targetName} set to ${enabled}`);
+        }
+    } catch (err) {
+        console.error("Error toggling target:", err);
+    }
+}
 
-})(window);
+// WebSocket for live target state updates
+const wsTargets = new WebSocket("ws://localhost:8080/ws-targets");
+
+wsTargets.onmessage = (msg) => {
+    const event = JSON.parse(msg.data);
+    if (event.type === "target-update") {
+        const t = targets.find(t => t.name === event.data.name);
+        if (t) {
+            t.enabled = event.data.enabled;
+            renderTargets();
+        }
+    }
+};
+
+// Initial fetch
+fetchTargets();
diff --git a/cockpit/fester-module/ui.html b/cockpit/fester-module/ui.html
index 2fbb02a..3fa2243 100644
--- a/cockpit/fester-module/ui.html
+++ b/cockpit/fester-module/ui.html
@@ -1,58 +1,113 @@
+<!-- cockpit/fester-module/ui.html -->
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Fester Cockpit</title>
-    <link rel="stylesheet" href="../../style.css">
-    <style>
-        body { margin: 0; font-family: Arial, sans-serif; background: #1e1e1e; color: #eee; }
-        header { background: #2c2c2c; padding: 10px; font-size: 1.2em; display: flex; align-items: center; }
-        header h1 { flex: 1; margin: 0; font-weight: normal; }
-        #tabs { display: flex; background: #252525; }
-        .tab { flex: 1; text-align: center; padding: 10px; cursor: pointer; }
-        .tab.active { background: #3a3a3a; }
-        iframe { border: none; width: 100%; height: calc(100vh - 80px); }
-    </style>
+<meta charset="UTF-8">
+<title>Fester Cockpit</title>
+<link rel="stylesheet" href="../style.css">
+<script src="targets.js"></script>
+<script src="../fester.js"></script>
+<style>
+body { font-family: sans-serif; margin:0; display:flex; height:100vh; }
+#sidebar { width:250px; background:#222; color:#eee; padding:10px; overflow-y:auto; }
+#main { flex:1; padding:10px; overflow:auto; }
+.panel { margin-bottom:20px; }
+.tab { cursor:pointer; padding:5px 10px; display:inline-block; color:#eee; background:#444; margin-right:2px; }
+.tab.active { background:#666; }
+#debugger-content { display:none; }
+.debugger-controls button { margin-right:5px; }
+.timeline { border:1px solid #ccc; height:200px; overflow-x:auto; white-space:nowrap; padding:5px; }
+</style>
 </head>
 <body>
-
-<header>
-    <h1>Fester Cockpit</h1>
-</header>
-
-<div id="tabs">
-    <div class="tab active" data-target="live_dag">Live DAG</div>
-    <div class="tab" data-target="replay">Replay / Debugger</div>
+<div id="sidebar">
+    <div class="panel">
+        <div class="tab active" onclick="switchTab('targets')">Targets</div>
+        <div class="tab" onclick="switchTab('debugger')">Debugger</div>
+    </div>
+    <!-- Targets panel inserted by targets.js -->
 </div>
 
-<iframe id="cockpit-frame" src="../../ui/live_dag.html"></iframe>
+<div id="main">
+    <div id="targets-content"></div>
+    <div id="debugger-content">
+        <h2>Debugger</h2>
+        <div class="debugger-controls">
+            <button onclick="debugStepBack()">⏮ Step Back</button>
+            <button onclick="debugStepForward()">⏭ Step Forward</button>
+            <button onclick="debugPauseResume()">⏸/▶ Pause</button>
+        </div>
+        <div class="timeline" id="debugger-timeline"></div>
+        <pre id="debugger-state" style="border:1px solid #ccc; padding:5px; margin-top:10px;"></pre>
+    </div>
+</div>
 
-<script src="./targets.js"></script>
 <script>
-    // Tab switching logic
-    const tabs = document.querySelectorAll('.tab');
-    const iframe = document.getElementById('cockpit-frame');
-    tabs.forEach(tab => {
-        tab.addEventListener('click', () => {
-            tabs.forEach(t => t.classList.remove('active'));
-            tab.classList.add('active');
-            iframe.src = tab.dataset.target === 'live_dag' ? '../../ui/live_dag.html' : '../../ui/replay.html';
-        });
+// Tab switching
+function switchTab(tab) {
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('#targets-content, #debugger-content').forEach(c => c.style.display = 'none');
+
+    if(tab === 'targets') {
+        document.querySelector('.tab[onclick*="targets"]').classList.add('active');
+        document.getElementById('targets-content').style.display = 'block';
+    } else if(tab === 'debugger') {
+        document.querySelector('.tab[onclick*="debugger"]').classList.add('active');
+        document.getElementById('debugger-content').style.display = 'block';
+        fetchDebuggerState();
+    }
+}
+
+// Debugger WebSocket
+let wsDebugger = new WebSocket("ws://localhost:8080/ws-debugger");
+let paused = false;
+
+wsDebugger.onmessage = function(msg) {
+    const event = JSON.parse(msg.data);
+    if(event.type === 'timeline-update') {
+        renderTimeline(event.data);
+        updateDebuggerState(event.data.current);
+    }
+};
+
+function renderTimeline(events) {
+    const timeline = document.getElementById('debugger-timeline');
+    timeline.innerHTML = '';
+    events.forEach((ev,i) => {
+        const div = document.createElement('span');
+        div.style.display = 'inline-block';
+        div.style.width = '20px';
+        div.style.height = '20px';
+        div.style.marginRight = '2px';
+        div.style.background = ev.completed ? '#0f0' : '#555';
+        div.title = `${i}: ${ev.name}`;
+        timeline.appendChild(div);
     });
+}
 
-    // Initialize WebSocket connection and dispatch events to iframe
-    const ws = new WebSocket(`ws://${window.location.hostname}:8080/ws`);
-    ws.onopen = () => console.log("Cockpit WS connected");
-    ws.onmessage = (event) => {
-        try {
-            const data = JSON.parse(event.data);
-            // Forward event to iframe
-            iframe.contentWindow.postMessage(data, '*');
-        } catch (err) {
-            console.error("Invalid WS event", err);
-        }
-    };
+function updateDebuggerState(currentEvent) {
+    const stateBox = document.getElementById('debugger-state');
+    stateBox.textContent = JSON.stringify(currentEvent, null, 2);
+}
+
+// Debugger controls
+function debugStepBack() {
+    wsDebugger.send(JSON.stringify({ action: 'step_back' }));
+}
+function debugStepForward() {
+    wsDebugger.send(JSON.stringify({ action: 'step_forward' }));
+}
+function debugPauseResume() {
+    paused = !paused;
+    wsDebugger.send(JSON.stringify({ action: paused ? 'pause' : 'resume' }));
+    console.log("Debugger " + (paused ? "paused" : "resumed"));
+}
+
+// Initial fetch
+function fetchDebuggerState() {
+    document.getElementById('debugger-content').style.display = 'block';
+}
 </script>
-
 </body>
 </html>