create-interview-cockpit 0.17.3 → 0.19.0

package/template/client/src/components/GhaJobsPanel.tsx

@@ -0,0 +1,432 @@
+import { useMemo, useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { parse as parseYaml } from "yaml";
+import type { GhaJobSnapshot, GhaJobStatus, GhaStepSnapshot } from "../api";
+
+// ─── Types ───────────────────────────────────────────────────────────────
+
+interface DagJob {
+  id: string;
+  label: string;
+  key: string;
+  needs: string[];
+}
+
+interface DagLayout {
+  columns: number[];
+  jobs: DagJob[];
+}
+
+// Parse a single workflow YAML and pull out the jobs graph. Returns null when
+// the YAML is invalid or doesn't declare any jobs — the caller falls back to
+// a flat layout built from runtime observations.
+function parseWorkflowJobs(yaml: string | undefined): DagJob[] | null {
+  if (!yaml) return null;
+  let doc: unknown;
+  try {
+    doc = parseYaml(yaml);
+  } catch {
+    return null;
+  }
+  if (!doc || typeof doc !== "object") return null;
+  const jobsRaw = (doc as Record<string, unknown>).jobs;
+  if (!jobsRaw || typeof jobsRaw !== "object") return null;
+
+  const jobs: DagJob[] = [];
+  for (const [key, value] of Object.entries(
+    jobsRaw as Record<string, unknown>,
+  )) {
+    if (!value || typeof value !== "object") continue;
+    const obj = value as Record<string, unknown>;
+    const label = typeof obj.name === "string" && obj.name ? obj.name : key;
+    const needsField = obj.needs;
+    const needs: string[] = Array.isArray(needsField)
+      ? needsField.filter((n): n is string => typeof n === "string")
+      : typeof needsField === "string"
+        ? [needsField]
+        : [];
+    jobs.push({ id: key, key, label, needs });
+  }
+  return jobs;
+}
+
+// Topological layering — every job lives in column max(needs)+1 so edges
+// always point left-to-right. Same shape GitHub uses for its workflow run.
+function computeLayout(jobs: DagJob[]): DagLayout {
+  const columns: number[] = jobs.map(() => 0);
+  const keyToIdx = new Map(jobs.map((j, i) => [j.key, i]));
+
+  for (let pass = 0; pass < jobs.length + 1; pass++) {
+    let changed = false;
+    jobs.forEach((job, idx) => {
+      let col = 0;
+      for (const need of job.needs) {
+        const needIdx = keyToIdx.get(need);
+        if (needIdx === undefined) continue;
+        col = Math.max(col, columns[needIdx] + 1);
+      }
+      if (col !== columns[idx]) {
+        columns[idx] = col;
+        changed = true;
+      }
+    });
+    if (!changed) break;
+  }
+  return { columns, jobs };
+}
+
+// Merge declared jobs with runtime statuses; runtime keys may include matrix
+// suffixes like `build-1`, so we collapse them onto the base key when
+// possible and surface any extras as their own nodes.
+function applyRuntimeStatuses(
+  declared: DagJob[],
+  runtime: GhaJobSnapshot[],
+): {
+  jobs: DagJob[];
+  statusByKey: Record<string, GhaJobStatus>;
+  durationByKey: Record<string, number | undefined>;
+  snapshotByKey: Record<string, GhaJobSnapshot | undefined>;
+} {
+  const declaredKeys = new Set(declared.map((j) => j.key));
+  const statusByKey: Record<string, GhaJobStatus> = {};
+  const durationByKey: Record<string, number | undefined> = {};
+  const snapshotByKey: Record<string, GhaJobSnapshot | undefined> = {};
+  const extras: DagJob[] = [];
+
+  for (const job of declared) statusByKey[job.key] = "pending";
+
+  for (const snap of runtime) {
+    let key = snap.name;
+    if (!declaredKeys.has(key)) {
+      const base = declared.find((j) => snap.name.startsWith(`${j.key}-`));
+      if (base) key = base.key;
+    }
+    const prev = statusByKey[key];
+    statusByKey[key] = mergeStatus(prev, snap.status);
+    if (typeof snap.durationMs === "number") {
+      durationByKey[key] = Math.max(durationByKey[key] ?? 0, snap.durationMs);
+    }
+    // Keep the first snapshot seen for the key so step expansion has
+    // something to render. Matrix consolidation is best-effort.
+    if (!snapshotByKey[key]) snapshotByKey[key] = snap;
+    if (
+      !declaredKeys.has(snap.name) &&
+      !declared.some((j) => snap.name.startsWith(`${j.key}-`))
+    ) {
+      extras.push({
+        id: snap.name,
+        key: snap.name,
+        label: snap.name,
+        needs: [],
+      });
+    }
+  }
+
+  return {
+    jobs: [...declared, ...extras],
+    statusByKey,
+    durationByKey,
+    snapshotByKey,
+  };
+}
+
+function mergeStatus(
+  prev: GhaJobStatus | undefined,
+  next: GhaJobStatus,
+): GhaJobStatus {
+  const order: GhaJobStatus[] = [
+    "pending",
+    "skipped",
+    "success",
+    "running",
+    "failed",
+  ];
+  if (!prev) return next;
+  return order.indexOf(next) > order.indexOf(prev) ? next : prev;
+}
+
+// ─── Styling helpers ─────────────────────────────────────────────────────
+
+const STATUS_STYLES: Record<
+  GhaJobStatus,
+  { box: string; dot: string; label: string; icon: string }
+> = {
+  pending: {
+    box: "border-slate-700 bg-slate-900/40 text-slate-400",
+    dot: "bg-slate-500",
+    label: "Pending",
+    icon: "○",
+  },
+  running: {
+    box: "border-amber-400/60 bg-amber-500/10 text-amber-100",
+    dot: "bg-amber-400 animate-pulse",
+    label: "Running",
+    icon: "●",
+  },
+  success: {
+    box: "border-emerald-500/50 bg-emerald-500/10 text-emerald-100",
+    dot: "bg-emerald-400",
+    label: "Success",
+    icon: "✓",
+  },
+  failed: {
+    box: "border-red-500/60 bg-red-500/10 text-red-100",
+    dot: "bg-red-400",
+    label: "Failed",
+    icon: "✗",
+  },
+  skipped: {
+    box: "border-slate-600 bg-slate-800/30 text-slate-500",
+    dot: "bg-slate-500",
+    label: "Skipped",
+    icon: "↷",
+  },
+};
+
+function formatDuration(ms: number | undefined): string {
+  if (!ms || ms < 0) return "";
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const r = Math.round(s % 60);
+  return `${m}m${r ? ` ${r}s` : ""}`;
+}
+
+// ─── Step row ────────────────────────────────────────────────────────────
+
+function StepRow({ step }: { step: GhaStepSnapshot }) {
+  const [open, setOpen] = useState(false);
+  const style = STATUS_STYLES[step.status];
+  const hasLog = !!step.log && step.log.trim().length > 0;
+  return (
+    <div className="border-t border-slate-800/40 first:border-t-0">
+      <button
+        type="button"
+        onClick={() => hasLog && setOpen((v) => !v)}
+        className={`w-full flex items-center gap-2 px-2 py-1.5 text-[11px] text-left ${
+          hasLog ? "hover:bg-slate-800/40 cursor-pointer" : "cursor-default"
+        }`}
+      >
+        <span className="w-3 text-slate-500 inline-flex">
+          {hasLog ? (
+            open ? (
+              <ChevronDown className="w-3 h-3" />
+            ) : (
+              <ChevronRight className="w-3 h-3" />
+            )
+          ) : null}
+        </span>
+        <span
+          className={`inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] leading-none ${style.dot}`}
+          title={style.label}
+        >
+          <span className="text-slate-900 font-bold">{style.icon}</span>
+        </span>
+        <span className="flex-1 truncate text-slate-200">
+          {step.phase !== "Main" && (
+            <span className="text-slate-500 mr-1">[{step.phase}]</span>
+          )}
+          {step.name}
+        </span>
+        <span className="text-[10px] text-slate-500">
+          {formatDuration(step.durationMs)}
+        </span>
+      </button>
+      {open && hasLog && (
+        <pre className="mx-2 mb-2 max-h-60 overflow-auto rounded bg-black/40 p-2 text-[10px] text-slate-300 whitespace-pre-wrap">
+          {step.log}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+// ─── Job card (expandable to step list) ──────────────────────────────────
+
+function JobCard({
+  label,
+  status,
+  durationMs,
+  needs,
+  snapshot,
+}: {
+  label: string;
+  status: GhaJobStatus;
+  durationMs?: number;
+  needs?: string[];
+  snapshot?: GhaJobSnapshot;
+}) {
+  const [open, setOpen] = useState(false);
+  const style = STATUS_STYLES[status];
+  const steps = snapshot?.steps ?? [];
+  const hasSteps = steps.length > 0;
+  const dur = formatDuration(durationMs);
+  return (
+    <div className={`rounded-md border text-xs shadow-sm ${style.box}`}>
+      <button
+        type="button"
+        onClick={() => hasSteps && setOpen((v) => !v)}
+        className={`w-full flex items-center gap-2 px-3 py-2 ${
+          hasSteps ? "cursor-pointer" : "cursor-default"
+        }`}
+      >
+        <span className="w-3 opacity-70 inline-flex">
+          {hasSteps ? (
+            open ? (
+              <ChevronDown className="w-3 h-3" />
+            ) : (
+              <ChevronRight className="w-3 h-3" />
+            )
+          ) : null}
+        </span>
+        <span className={`inline-block w-2 h-2 rounded-full ${style.dot}`} />
+        <span className="font-medium truncate flex-1 text-left">{label}</span>
+        <span className="text-[10px] opacity-80">{style.label}</span>
+        {dur && <span className="text-[10px] opacity-80">• {dur}</span>}
+      </button>
+      {needs && needs.length > 0 && !open && (
+        <div className="px-3 pb-2 -mt-1 text-[10px] text-slate-500 truncate">
+          needs: {needs.join(", ")}
+        </div>
+      )}
+      {open && hasSteps && (
+        <div className="border-t border-slate-800/60 bg-slate-950/40">
+          {steps.map((s, idx) => (
+            <StepRow key={`${s.phase}-${s.name}-${idx}`} step={s} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Panel ───────────────────────────────────────────────────────────────
+
+export interface GhaJobsPanelProps {
+  // Source of `needs:` info for live DAG layout. Pass undefined for history
+  // views so the layout reflects what actually ran rather than the current
+  // (possibly edited) YAML.
+  workflowYaml?: string | undefined;
+  jobs: GhaJobSnapshot[];
+  caption?: string;
+  // "dag" lays jobs into dependency columns; "list" stacks them vertically
+  // (used by history rows where the DAG is misleading because the YAML may
+  // have changed since the run).
+  mode?: "dag" | "list";
+}
+
+export default function GhaJobsPanel({
+  workflowYaml,
+  jobs,
+  caption,
+  mode = "dag",
+}: GhaJobsPanelProps) {
+  const declared = useMemo(
+    () => (mode === "dag" ? (parseWorkflowJobs(workflowYaml) ?? []) : []),
+    [workflowYaml, mode],
+  );
+
+  const {
+    jobs: allJobs,
+    statusByKey,
+    durationByKey,
+    snapshotByKey,
+  } = useMemo(() => applyRuntimeStatuses(declared, jobs), [declared, jobs]);
+
+  const layout = useMemo(() => computeLayout(allJobs), [allJobs]);
+
+  const columnsMap = useMemo(() => {
+    const map = new Map<number, DagJob[]>();
+    layout.jobs.forEach((job, idx) => {
+      const col = layout.columns[idx];
+      const bucket = map.get(col) ?? [];
+      bucket.push(job);
+      map.set(col, bucket);
+    });
+    return Array.from(map.entries())
+      .sort((a, b) => a[0] - b[0])
+      .map(([col, jobs]) => ({ col, jobs }));
+  }, [layout]);
+
+  if (allJobs.length === 0) {
+    return (
+      <div className="flex-1 min-h-0 flex items-center justify-center text-xs text-slate-500 px-4 text-center">
+        No jobs detected yet. Run a workflow to see the live DAG, or open a
+        workflow YAML so the planned jobs appear here.
+      </div>
+    );
+  }
+
+  // ── List mode (history): vertical stack of expandable jobs ──
+  if (mode === "list") {
+    return (
+      <div className="flex-1 min-h-0 overflow-auto p-3">
+        {caption && (
+          <div className="mb-2 text-[10px] uppercase tracking-wider text-slate-500">
+            {caption}
+          </div>
+        )}
+        <div className="flex flex-col gap-2">
+          {allJobs.map((job) => (
+            <JobCard
+              key={job.id}
+              label={job.label}
+              status={statusByKey[job.key] ?? "pending"}
+              durationMs={durationByKey[job.key]}
+              snapshot={snapshotByKey[job.key]}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // ── DAG mode (live): layered columns with connector bars ──
+  return (
+    <div className="flex-1 min-h-0 overflow-auto p-3">
+      {caption && (
+        <div className="mb-2 text-[10px] uppercase tracking-wider text-slate-500">
+          {caption}
+        </div>
+      )}
+      <div className="flex items-start gap-6">
+        {columnsMap.map(({ col, jobs }, colIdx) => (
+          <div key={col} className="flex flex-col gap-3 min-w-[200px]">
+            {jobs.map((job) => (
+              <div key={job.id} className="relative">
+                <JobCard
+                  label={job.label}
+                  status={statusByKey[job.key] ?? "pending"}
+                  durationMs={durationByKey[job.key]}
+                  needs={job.needs}
+                  snapshot={snapshotByKey[job.key]}
+                />
+                {colIdx < columnsMap.length - 1 && (
+                  <span className="absolute top-4 -right-6 w-6 h-px bg-slate-700" />
+                )}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div className="mt-4 flex flex-wrap gap-3 text-[10px] text-slate-500">
+        {(["pending", "running", "success", "failed", "skipped"] as const).map(
+          (s) => (
+            <span key={s} className="inline-flex items-center gap-1">
+              <span
+                className={`inline-block w-2 h-2 rounded-full ${STATUS_STYLES[s].dot}`}
+              />
+              {STATUS_STYLES[s].label}
+            </span>
+          ),
+        )}
+        <span className="ml-auto">
+          Jobs in the same column run in parallel; arrows imply{" "}
+          <code className="text-slate-400">needs:</code>. Click a job to expand
+          its steps.
+        </span>
+      </div>
+    </div>
+  );
+}