added LiveDAG
This commit is contained in:
parent
654221d956
commit
b9826e3975
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue