mission-control/static/js/panels/jobs.js

// jobs.js — Aktivitaets-Stream ("Incident Stream"): Hintergrund-Jobs mit Live-Log.
// Exportiert track(id), damit andere Panels einen frisch gestarteten Job auto-aufklappen.

import { $, esc } from "../core/ui.js";

const tracked = new Set();
let JOBS = [];

export function track(id) {
  tracked.add(id);
  render();
}

function statusBadge(state) {
  if (state === "done")   return '<span class="badge b-run">fertig</span>';
  if (state === "failed") return '<span class="badge b-err">fehler</span>';
  return '<span class="badge b-load">läuft…</span>';
}
function dotClass(state) {
  if (state === "done")   return "on";
  if (state === "failed") return "";
  return "load";
}

function mount() {
  $("#ov-activity").innerHTML = `
    <div class="card-h"><h3>Aktivität</h3><span class="meta" id="job-count"></span></div>
    <div id="jobs"></div>
    <div id="jobs-empty" class="empty-c">
      <div class="e-t">Noch nichts losgemacht.</div>
      <div class="e-s">Downloads, Updates &amp; Co. erscheinen hier mit Live-Log.</div>
    </div>`;

  // Klicks auf Job-Kopf -> auf/zuklappen (Event-Delegation)
  $("#jobs").addEventListener("click", e => {
    const h = e.target.closest(".job-h");
    if (!h) return;
    const id = h.getAttribute("data-id");
    tracked.has(id) ? tracked.delete(id) : tracked.add(id);
    render();
  });
}

function render() {
  const c = $("#jobs");
  if (!c) return;
  $("#jobs-empty").style.display = JOBS.length ? "none" : "flex";
  const failed = JOBS.filter(j => j.state === "failed").length;
  $("#job-count").textContent = JOBS.length ? (failed ? failed + " Fehler" : JOBS.length + " gesamt") : "";

  c.innerHTML = JOBS.map(j => {
    const open = tracked.has(j.id);
    const log = open ? `<div class="log">${esc((j.log || []).join("\n"))}</div>` : "";
    return `<div class="job">
      <div class="job-h" data-id="${esc(j.id)}">
        <span class="li-dot ${dotClass(j.state)}"></span>
        <span class="mid">${esc(j.label)}</span>${statusBadge(j.state)}
      </div>${log}</div>`;
  }).join("");
}

function onJobs(jobs) {
  JOBS = jobs || [];
  render();
}

export default { id: "jobs", mount, onJobs };