mirror of
https://github.com/MacRimi/ProxMenux.git
synced 2026-09-14 18:56:52 +00:00
MacRimiandClaude Opus 5
da8a480eff
ProxMenux modifies the host: it rewrites configuration files, installs packages, enables services. Until now nobody could say afterwards what had changed, and showing the script does not answer that question — a four-hundred-line function may alter two values, and the reader has no way to know which two. This adds the two halves of an answer. The change journal records what ProxMenux does as it does it. Eleven bash primitives capture the previous state, apply the change and record it in the same step, writing to a spool that the Monitor reads back. One hundred and thirteen functions across twenty-five scripts are instrumented, covering post-install, shared storage, security tooling, container conversions, disk operations and the PVE 8 to 9 upgrade path. The page shows the difference — rotate 7 becoming rotate 14 — and never the script. Restore and backup scripts are deliberately left out: a restore puts the host back to a state some other script already recorded. The Audit and reports page answers the other half: what state is this host in, regardless of who put it there. Forty-three checks across seven areas read the host and classify each result as critical, warning, observation, conformant, unverified or not applicable, with the evidence they read attached to each one. A declared policy lets the reader say what this particular host is expected to do — which guests must have a backup, which storages are essential — so the report judges the host against its own intent rather than a generic template. An inventory records the hardware, network and guest topology behind those readings, a comparison shows what moved between two runs, and six report profiles produce a printable document scoped to what the reader needs. Everything is available in the eight supported languages. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
324 lines
13 KiB
TypeScript
324 lines
13 KiB
TypeScript
"use client"
|
||
|
||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
|
||
import { Badge } from "./ui/badge"
|
||
import {
|
||
ChevronDown, ChevronRight, FileCode, HelpCircle, Loader2, Package,
|
||
Play, Settings2,
|
||
} from "lucide-react"
|
||
import { fetchApi } from "../lib/api-config"
|
||
import { useT, useI18n } from "../lib/i18n/provider"
|
||
|
||
/**
|
||
* What ProxMenux changed on this host.
|
||
*
|
||
* The complaint this answers is not that the tool changes things: it is
|
||
* that afterwards nobody can say what it changed. Showing the script
|
||
* does not answer it either — a function of four hundred lines may alter
|
||
* two values, and the reader cannot tell which two. So what is shown
|
||
* here is the difference and nothing else.
|
||
*
|
||
* Two distinctions are kept in front of the reader, because both bear on
|
||
* what they can do about what they are looking at: whether ProxMenux
|
||
* authored the change or merely ran something the user asked for, and
|
||
* how much of the previous state is actually known.
|
||
*/
|
||
|
||
interface Change {
|
||
id: number
|
||
recorded_at: number
|
||
class: string
|
||
operation: string
|
||
source: string
|
||
function: string
|
||
function_version: string
|
||
target: string
|
||
before_ref: string
|
||
after_ref: string
|
||
capture: string
|
||
revert: string
|
||
exactness: string
|
||
result: string
|
||
recoverable: boolean
|
||
detail: Record<string, unknown>
|
||
diff?: {
|
||
available: boolean; reason?: string
|
||
added?: number; removed?: number; truncated?: boolean; hunks?: string[]
|
||
} | null
|
||
}
|
||
|
||
interface Summary {
|
||
total: number
|
||
by_class: Record<string, number>
|
||
functions: Array<{
|
||
function: string; source: string; version: string
|
||
changes: number; last_change: number; first_change: number
|
||
}>
|
||
journal_started: number | null
|
||
}
|
||
|
||
const CLASS_STYLE: Record<string, { chip: string; Icon: typeof Settings2 }> = {
|
||
configuration: { chip: "bg-blue-500/10 text-blue-400 border-blue-400/20", Icon: Settings2 },
|
||
installation: { chip: "bg-green-500/10 text-green-500 border-green-500/20", Icon: Package },
|
||
execution: { chip: "bg-muted text-muted-foreground border-border", Icon: Play },
|
||
registration: { chip: "bg-muted text-muted-foreground border-border", Icon: HelpCircle },
|
||
}
|
||
|
||
export function AuditChanges() {
|
||
const t = useT()
|
||
const { language } = useI18n()
|
||
const [changes, setChanges] = useState<Change[]>([])
|
||
const [summary, setSummary] = useState<Summary | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [open, setOpen] = useState<Set<number>>(new Set())
|
||
const [filter, setFilter] = useState<string>("all")
|
||
|
||
const load = useCallback(async () => {
|
||
try {
|
||
const res: any = await fetchApi("/api/audit/changes?limit=500")
|
||
if (res?.success) {
|
||
setChanges(res.changes || [])
|
||
setSummary(res.summary || null)
|
||
setError(null)
|
||
} else {
|
||
setError(res?.message || t("audit.changes.failed"))
|
||
}
|
||
} catch (e) {
|
||
setError(e instanceof Error ? e.message : String(e))
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [t])
|
||
|
||
useEffect(() => { load() }, [load])
|
||
|
||
const toggle = (id: number) => setOpen((prev) => {
|
||
const next = new Set(prev)
|
||
next.has(id) ? next.delete(id) : next.add(id)
|
||
return next
|
||
})
|
||
|
||
const visible = useMemo(
|
||
() => changes.filter((c) => filter === "all" || c.class === filter),
|
||
[changes, filter],
|
||
)
|
||
|
||
const when = (epoch: number) => new Date(epoch * 1000).toLocaleString(language)
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex items-center justify-center py-16 text-muted-foreground">
|
||
<Loader2 className="h-5 w-5 animate-spin mr-2" />{t("audit.changes.loading")}
|
||
</div>
|
||
)
|
||
}
|
||
if (error) return <p className="text-sm text-red-400 px-1">{error}</p>
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<Card className="bg-card border-border">
|
||
<CardContent className="py-4 space-y-3">
|
||
<p className="text-sm text-muted-foreground">{t("audit.changes.intro")}</p>
|
||
{/* A host with nothing recorded should say why, rather than
|
||
looking like a host nothing has touched. */}
|
||
{summary && summary.total === 0 && (
|
||
<p className="text-sm text-muted-foreground">{t("audit.changes.empty")}</p>
|
||
)}
|
||
{summary && summary.journal_started && (
|
||
<p className="text-xs text-muted-foreground">
|
||
{t("audit.changes.since", { date: when(summary.journal_started) })}
|
||
</p>
|
||
)}
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{(["all", "configuration", "installation", "execution", "registration"] as const)
|
||
.filter((key) => key === "all" || summary?.by_class?.[key])
|
||
.map((key) => (
|
||
<button
|
||
key={key}
|
||
type="button"
|
||
onClick={() => setFilter(key)}
|
||
className={`px-3 py-1 rounded-md text-sm transition-colors ${
|
||
filter === key
|
||
? "bg-blue-500 text-white"
|
||
: "text-muted-foreground hover:text-foreground hover:bg-background/60"
|
||
}`}
|
||
>
|
||
{t(`audit.changes.class.${key}`)}
|
||
{key !== "all" && summary?.by_class?.[key] !== undefined && (
|
||
<span className="ml-1.5 tabular-nums">{summary.by_class[key]}</span>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{summary && summary.functions.length > 0 && (
|
||
<Card className="bg-card border-border">
|
||
<CardHeader className="pb-3">
|
||
<CardTitle className="flex items-center gap-2 text-base font-semibold text-foreground">
|
||
<FileCode className="h-4 w-4" />{t("audit.changes.byFunction")}
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="pt-0 space-y-2">
|
||
{summary.functions.map((fn) => (
|
||
<button
|
||
key={fn.function}
|
||
type="button"
|
||
onClick={() => setFilter("all")}
|
||
className="flex w-full flex-wrap items-center gap-2 rounded-md border
|
||
border-border p-2.5 text-left hover:bg-white/5
|
||
transition-colors cursor-pointer"
|
||
>
|
||
<span className="font-mono text-sm text-foreground">{fn.function}</span>
|
||
{fn.version && (
|
||
<Badge variant="outline" className="text-xs">v{fn.version}</Badge>
|
||
)}
|
||
<Badge variant="outline" className="text-xs tabular-nums">
|
||
{t("audit.changes.count", { count: String(fn.changes) })}
|
||
</Badge>
|
||
<span className="ml-auto text-xs text-muted-foreground">
|
||
{when(fn.last_change)}
|
||
</span>
|
||
</button>
|
||
))}
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
{visible.map((change) => {
|
||
const style = CLASS_STYLE[change.class] || CLASS_STYLE.registration
|
||
const Icon = style.Icon
|
||
const expanded = open.has(change.id)
|
||
const installed = String(change.detail?.installed || "")
|
||
return (
|
||
<Card key={change.id} className="bg-card border-border">
|
||
<button
|
||
type="button"
|
||
onClick={() => toggle(change.id)}
|
||
aria-expanded={expanded}
|
||
className="w-full text-left p-3 flex flex-wrap items-center gap-2
|
||
rounded-lg hover:bg-white/5 transition-colors cursor-pointer"
|
||
>
|
||
{expanded
|
||
? <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||
: <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />}
|
||
<Badge variant="outline" className={`${style.chip} gap-1.5 shrink-0`}>
|
||
<Icon className="h-3.5 w-3.5" />
|
||
{t(`audit.changes.operation.${change.operation}`)}
|
||
</Badge>
|
||
<span className="min-w-0 font-mono text-sm text-foreground break-all">
|
||
{change.target}
|
||
</span>
|
||
{change.diff?.available && (
|
||
<Badge variant="outline" className="text-xs tabular-nums shrink-0">
|
||
+{change.diff.added} −{change.diff.removed}
|
||
</Badge>
|
||
)}
|
||
{/* Whether the previous state is known is what decides
|
||
if undoing this is even discussable. */}
|
||
{change.capture === "unknown" && (
|
||
<Badge variant="outline" className="text-xs shrink-0">
|
||
{t("audit.changes.capture.unknown")}
|
||
</Badge>
|
||
)}
|
||
<span className="ml-auto shrink-0 text-xs text-muted-foreground">
|
||
{when(change.recorded_at)}
|
||
</span>
|
||
</button>
|
||
|
||
{expanded && (
|
||
<CardContent className="pt-0 pl-10 space-y-3">
|
||
<div className="flex flex-wrap gap-x-6 gap-y-1 text-xs text-muted-foreground">
|
||
<span>{t("audit.changes.function")}:{" "}
|
||
<span className="font-mono text-foreground">{change.function || "—"}</span>
|
||
{change.function_version && ` v${change.function_version}`}
|
||
</span>
|
||
<span>{t("audit.changes.source")}:{" "}
|
||
<span className="font-mono">{change.source || "—"}</span></span>
|
||
<span>{t("audit.changes.reversibility")}:{" "}
|
||
{t(`audit.changes.exactness.${change.exactness}`)}</span>
|
||
</div>
|
||
|
||
{installed && (
|
||
<div>
|
||
<p className="text-xs font-medium text-muted-foreground mb-1">
|
||
{t("audit.changes.packagesAdded")}
|
||
</p>
|
||
<div className="flex flex-wrap gap-1.5">
|
||
{installed.split(/\s+/).filter(Boolean).map((pkg) => (
|
||
<Badge key={pkg} variant="outline" className="font-mono text-xs">
|
||
{pkg}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{change.class === "execution" && Boolean(change.detail?.command) && (
|
||
<div>
|
||
<p className="text-xs font-medium text-muted-foreground mb-1">
|
||
{t("audit.changes.commandRun")}
|
||
</p>
|
||
<pre className="text-xs font-mono bg-background border border-border
|
||
rounded-md p-2.5 overflow-x-auto">
|
||
{String(change.detail.command)}
|
||
</pre>
|
||
<p className="text-xs text-muted-foreground mt-1">
|
||
{t("audit.changes.executionNote")}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{change.diff && (
|
||
<div>
|
||
<p className="text-xs font-medium text-muted-foreground mb-1">
|
||
{t("audit.changes.difference")}
|
||
</p>
|
||
{change.diff.available ? (
|
||
<>
|
||
<pre className="text-xs font-mono bg-background border border-border
|
||
rounded-md p-2.5 overflow-x-auto">
|
||
{(change.diff.hunks || []).map((line: string, i: number) => (
|
||
<div key={i} className={
|
||
line.startsWith("+") ? "text-green-500"
|
||
: line.startsWith("-") ? "text-red-400"
|
||
: line.startsWith("@@") ? "text-blue-400" : ""
|
||
}>{line}</div>
|
||
))}
|
||
</pre>
|
||
{change.diff.truncated && (
|
||
<p className="text-xs text-muted-foreground mt-1">
|
||
{t("audit.changes.diffTruncated")}
|
||
</p>
|
||
)}
|
||
</>
|
||
) : (
|
||
<p className="text-xs text-muted-foreground">
|
||
{t("audit.changes.diffUnavailable")}
|
||
</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{change.capture === "unknown" && (
|
||
<p className="text-xs text-muted-foreground">
|
||
{t("audit.changes.unknownNote")}
|
||
</p>
|
||
)}
|
||
</CardContent>
|
||
)}
|
||
</Card>
|
||
)
|
||
})}
|
||
{visible.length === 0 && summary && summary.total > 0 && (
|
||
<p className="text-sm text-muted-foreground px-1">{t("audit.changes.noneInFilter")}</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|