feat(hosts): Seiten fuer Hosts und Hostgruppen (#008)
Ersetzt die Platzhalter: Hostliste mit Suche und Gruppenfilter per GET (teilbare Links), Formulare fuer Hosts und Gruppen, Hostdetail als Geruest und Gruppendetail mit Mitgliederauswahl. Bearbeiten-Knoepfe entscheidet der Server per darf(); jede Seite prueft die Sitzung selbst. Die Detailseite rendert HostKeyAktionen (#009) und BootstrapAktionen (#010) als feste Platzhalter mit fertigen Props, damit die Folge-Issues nur ihre eigene Datei ersetzen. Formulare senden per onSubmit, weil React ein <form action> nach jeder Antwort zuruecksetzt und Eingaben bei Feldfehlern sonst verloren gingen. Unter md zeigt die Hostliste Karten statt Tabelle, damit Status und Host-Key auf 390 px ohne Wischen sichtbar bleiben. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,95 @@
|
||||
import { Server } from "lucide-react";
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { adresseMitPort } from "@/components/hosts/Anzeige";
|
||||
import { GruppenFormular } from "@/components/hosts/GruppenFormular";
|
||||
import { Breadcrumb } from "@/components/ui/Breadcrumb";
|
||||
import { Karte } from "@/components/ui/Karte";
|
||||
import { Leerzustand } from "@/components/ui/Leerzustand";
|
||||
import { Seitenkopf } from "@/components/ui/Seitenkopf";
|
||||
import { Statuspunkt } from "@/components/ui/Statuspunkt";
|
||||
import { Tabelle, TabellenZeile, TabellenZelle } from "@/components/ui/Tabelle";
|
||||
import { datum } from "@/lib/format";
|
||||
import { darf } from "@/server/auth/rechte";
|
||||
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
|
||||
import { gruppeDetail, hostAuswahl } from "@/server/queries/hosts";
|
||||
|
||||
export const metadata: Metadata = { title: "Hostgruppe" };
|
||||
|
||||
/** Gruppendetail mit Mitgliedern; wer Hosts verwalten darf, bearbeitet hier auch (#008). */
|
||||
export default async function HostgruppeSeite({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const { benutzer } = await sitzungErforderlich("lesen", `/hostgruppen/${id}`);
|
||||
const gruppe = await gruppeDetail(id);
|
||||
if (!gruppe) notFound();
|
||||
const verwalten = darf(benutzer.rolle, "hostsVerwalten");
|
||||
const hosts = verwalten ? await hostAuswahl() : [];
|
||||
const anzahl = gruppe.mitglieder.length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 sm:gap-7">
|
||||
<Seitenkopf
|
||||
oben={<Breadcrumb pfad={[{ titel: "Hostgruppen", href: "/hostgruppen" }, { titel: gruppe.name }]} />}
|
||||
titel={gruppe.name}
|
||||
untertitel={
|
||||
<>
|
||||
{gruppe.beschreibung && <span className="mb-1 block">{gruppe.beschreibung}</span>}
|
||||
{anzahl === 1 ? "1 Mitglied" : `${anzahl} Mitglieder`} · angelegt am {datum(gruppe.angelegtAm)}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
|
||||
<Karte titel="Mitglieder">
|
||||
{anzahl === 0 ? (
|
||||
<Leerzustand
|
||||
icon={<Server className="size-5" />}
|
||||
titel="Keine Mitglieder"
|
||||
text={
|
||||
verwalten
|
||||
? "Hosts lassen sich unter „Bearbeiten“ auswählen."
|
||||
: "Dieser Gruppe ist noch kein Host zugeordnet."
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Tabelle beschriftung="Mitglieder" spalten={[{ titel: "Host" }, { titel: "Status" }]}>
|
||||
{gruppe.mitglieder.map((h) => (
|
||||
<TabellenZeile key={h.id}>
|
||||
<TabellenZelle className="min-w-0">
|
||||
<Link
|
||||
href={`/hosts/${h.id}`}
|
||||
className="text-text hover:text-accent -my-2 inline-flex min-h-11 items-center font-mono text-[13.5px] font-medium break-all transition-colors"
|
||||
>
|
||||
{h.name}
|
||||
</Link>
|
||||
<p className="text-muted font-mono text-[12.5px] break-all">
|
||||
{adresseMitPort(h.adresse, h.port)}
|
||||
</p>
|
||||
</TabellenZelle>
|
||||
<TabellenZelle className="whitespace-nowrap">
|
||||
<Statuspunkt status={h.status} />
|
||||
</TabellenZelle>
|
||||
</TabellenZeile>
|
||||
))}
|
||||
</Tabelle>
|
||||
)}
|
||||
</Karte>
|
||||
|
||||
{verwalten && (
|
||||
<Karte titel="Bearbeiten" untertitel="Name, Beschreibung und Mitglieder">
|
||||
<GruppenFormular
|
||||
vorgabe={{
|
||||
id: gruppe.id,
|
||||
name: gruppe.name,
|
||||
beschreibung: gruppe.beschreibung ?? "",
|
||||
hostIds: gruppe.mitglieder.map((m) => m.id),
|
||||
}}
|
||||
hosts={hosts}
|
||||
/>
|
||||
</Karte>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { Metadata } from "next";
|
||||
import { GruppenFormular } from "@/components/hosts/GruppenFormular";
|
||||
import { Breadcrumb } from "@/components/ui/Breadcrumb";
|
||||
import { Karte } from "@/components/ui/Karte";
|
||||
import { Seitenkopf } from "@/components/ui/Seitenkopf";
|
||||
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
|
||||
import { hostAuswahl } from "@/server/queries/hosts";
|
||||
|
||||
export const metadata: Metadata = { title: "Hostgruppe anlegen" };
|
||||
|
||||
export default async function HostgruppeNeu() {
|
||||
await sitzungErforderlich("hostsVerwalten", "/hostgruppen/neu");
|
||||
const hosts = await hostAuswahl();
|
||||
return (
|
||||
<div className="flex max-w-3xl flex-col gap-6 sm:gap-7">
|
||||
<Seitenkopf
|
||||
oben={
|
||||
<Breadcrumb pfad={[{ titel: "Hostgruppen", href: "/hostgruppen" }, { titel: "Neue Gruppe" }]} />
|
||||
}
|
||||
titel="Hostgruppe anlegen"
|
||||
/>
|
||||
<Karte>
|
||||
<GruppenFormular
|
||||
vorgabe={{ name: "", beschreibung: "", hostIds: [] }}
|
||||
hosts={hosts}
|
||||
abbrechenZiel="/hostgruppen"
|
||||
/>
|
||||
</Karte>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,18 +1,70 @@
|
||||
import { Boxes, Plus } from "lucide-react";
|
||||
import type { Metadata } from "next";
|
||||
import { Platzhalterseite } from "@/components/huelle/Platzhalterseite";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Karte } from "@/components/ui/Karte";
|
||||
import { Leerzustand } from "@/components/ui/Leerzustand";
|
||||
import { Seitenkopf } from "@/components/ui/Seitenkopf";
|
||||
import { Tabelle, TabellenZeile, TabellenZelle } from "@/components/ui/Tabelle";
|
||||
import { darf } from "@/server/auth/rechte";
|
||||
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
|
||||
import { gruppenListe } from "@/server/queries/hosts";
|
||||
|
||||
export const metadata: Metadata = { title: "Hostgruppen" };
|
||||
|
||||
/** Hostgruppen mit Mitgliederzahl (#008). */
|
||||
export default async function Hostgruppen() {
|
||||
// Jede Seite prueft selbst; die Huelle ist nur das zweite Netz (CLAUDE.md).
|
||||
await sitzungErforderlich();
|
||||
const { benutzer } = await sitzungErforderlich("lesen", "/hostgruppen");
|
||||
const gruppen = await gruppenListe();
|
||||
const verwalten = darf(benutzer.rolle, "hostsVerwalten");
|
||||
const anlegen = verwalten && (
|
||||
<Button href="/hostgruppen/neu" variante="primaer" icon={<Plus className="size-4" strokeWidth={2.4} />}>
|
||||
Gruppe anlegen
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<Platzhalterseite
|
||||
titel="Hostgruppen"
|
||||
untertitel="Hosts bündeln, um Schlüssel gemeinsam zuzuweisen"
|
||||
phase={1}
|
||||
issue="#008"
|
||||
/>
|
||||
<div className="flex flex-col gap-6 sm:gap-7">
|
||||
<Seitenkopf
|
||||
titel="Hostgruppen"
|
||||
untertitel="Hosts bündeln, um Schlüssel gemeinsam zuzuweisen"
|
||||
aktionen={anlegen}
|
||||
/>
|
||||
{gruppen.length === 0 ? (
|
||||
<Leerzustand
|
||||
icon={<Boxes className="size-5" />}
|
||||
titel="Noch keine Hostgruppen"
|
||||
text="Gruppen wie „Proxmox“ oder „DMZ“ fassen Hosts zusammen – ein Schlüssel lässt sich dann einer ganzen Gruppe zuweisen."
|
||||
aktion={anlegen}
|
||||
/>
|
||||
) : (
|
||||
<Karte>
|
||||
<Tabelle
|
||||
beschriftung="Hostgruppen"
|
||||
spalten={[{ titel: "Gruppe" }, { titel: "Mitglieder", rechts: true }]}
|
||||
>
|
||||
{gruppen.map((g) => (
|
||||
<TabellenZeile key={g.id}>
|
||||
{/* Beschreibung unter dem Namen statt als eigene Spalte: so bleibt die
|
||||
Mitgliederzahl auch auf 390 px sichtbar (#008). */}
|
||||
<TabellenZelle>
|
||||
<Link
|
||||
href={`/hostgruppen/${g.id}`}
|
||||
className="text-text hover:text-accent -my-2 inline-flex min-h-11 items-center font-medium transition-colors"
|
||||
>
|
||||
{g.name}
|
||||
</Link>
|
||||
{g.beschreibung && <p className="text-muted text-[13.5px]">{g.beschreibung}</p>}
|
||||
</TabellenZelle>
|
||||
<TabellenZelle rechts className="tabular-nums">
|
||||
{g.mitglieder}
|
||||
</TabellenZelle>
|
||||
</TabellenZeile>
|
||||
))}
|
||||
</Tabelle>
|
||||
</Karte>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
export type BootstrapAktionenProps = {
|
||||
readonly hostId: string;
|
||||
/** Recht `hostsVerwalten` – serverseitig per `darf()` ermittelt. */
|
||||
readonly darfVerwalten: boolean;
|
||||
/** `bootstrapAm` ist gesetzt: sshkv arbeitet bereits schluesselbasiert. */
|
||||
readonly eingerichtet: boolean;
|
||||
/** Mindestens ein vertrauter Host-Key – Voraussetzung fuer jede Verbindung. */
|
||||
readonly hostKeyVertraut: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Platzhalter fuer „Zugang einrichten“ (Bootstrap, #010). Die Detailseite rendert diese
|
||||
* Komponente unter der Info-Leiste; #010 ersetzt nur diese Datei.
|
||||
*/
|
||||
export function BootstrapAktionen(props: BootstrapAktionenProps) {
|
||||
// Die Props stehen schon fest, damit die Detailseite bis #009/#010 unveraendert bleibt.
|
||||
void props;
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import type { HostKeyZusammenfassung } from "@/lib/hosts";
|
||||
|
||||
export type HostKeyAktionenProps = {
|
||||
readonly hostId: string;
|
||||
/** Recht `hostKeyEntscheiden` – serverseitig per `darf()` ermittelt. */
|
||||
readonly darfEntscheiden: boolean;
|
||||
/** Zaehlung der Host-Keys nach Status und zusammengefasster Zustand. */
|
||||
readonly status: HostKeyZusammenfassung;
|
||||
};
|
||||
|
||||
/**
|
||||
* Platzhalter fuer „Host-Key abrufen“ / „Bestätigen“ / „Ablehnen“ (#009). Die Detailseite
|
||||
* rendert diese Komponente im Kopf der Karte „Host-Key“; #009 ersetzt nur diese Datei.
|
||||
*/
|
||||
export function HostKeyAktionen(props: HostKeyAktionenProps) {
|
||||
// Die Props stehen schon fest, damit die Detailseite bis #009/#010 unveraendert bleibt.
|
||||
void props;
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import type { Metadata } from "next";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { HostFormular } from "@/components/hosts/HostFormular";
|
||||
import { Breadcrumb } from "@/components/ui/Breadcrumb";
|
||||
import { Seitenkopf } from "@/components/ui/Seitenkopf";
|
||||
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
|
||||
import { gruppenAuswahl, hostFormularWerte, kundenNamen } from "@/server/queries/hosts";
|
||||
|
||||
export const metadata: Metadata = { title: "Host bearbeiten" };
|
||||
|
||||
export default async function HostBearbeiten({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
await sitzungErforderlich("hostsVerwalten", `/hosts/${id}/bearbeiten`);
|
||||
const [werte, gruppen, kunden] = await Promise.all([
|
||||
hostFormularWerte(id),
|
||||
gruppenAuswahl(),
|
||||
kundenNamen(),
|
||||
]);
|
||||
if (!werte) notFound();
|
||||
// Archivierte Hosts sind schreibgeschuetzt; die Detailseite sagt warum.
|
||||
if (werte.archiviert) redirect(`/hosts/${id}`);
|
||||
|
||||
return (
|
||||
<div className="flex max-w-3xl flex-col gap-6 sm:gap-7">
|
||||
<Seitenkopf
|
||||
oben={
|
||||
<Breadcrumb
|
||||
pfad={[
|
||||
{ titel: "Hosts", href: "/hosts" },
|
||||
{ titel: werte.name, href: `/hosts/${id}` },
|
||||
{ titel: "Bearbeiten" },
|
||||
]}
|
||||
/>
|
||||
}
|
||||
titel={
|
||||
<>
|
||||
<span className="font-mono">{werte.name}</span> bearbeiten
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<HostFormular vorgabe={werte} gruppen={gruppen} kunden={kunden} abbrechenZiel={`/hosts/${id}`} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,227 @@
|
||||
import { KeyRound, Pencil, ShieldQuestion } from "lucide-react";
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import type { ReactNode } from "react";
|
||||
import { ArchivierenDialog } from "@/components/hosts/ArchivierenDialog";
|
||||
import { adresseMitPort, AnmeldeartBadge, HostSchluesselStatusBadge } from "@/components/hosts/Anzeige";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { Breadcrumb } from "@/components/ui/Breadcrumb";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Karte } from "@/components/ui/Karte";
|
||||
import { Leerzustand } from "@/components/ui/Leerzustand";
|
||||
import { MonoKopieren } from "@/components/ui/MonoKopieren";
|
||||
import { Seitenkopf } from "@/components/ui/Seitenkopf";
|
||||
import { Statuspunkt } from "@/components/ui/Statuspunkt";
|
||||
import { datum, datumZeit, relativ } from "@/lib/format";
|
||||
import { darf } from "@/server/auth/rechte";
|
||||
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
|
||||
import { hostDetail, type HostDetail } from "@/server/queries/hosts";
|
||||
import { BootstrapAktionen } from "./BootstrapAktionen";
|
||||
import { HostKeyAktionen } from "./HostKeyAktionen";
|
||||
|
||||
export const metadata: Metadata = { title: "Host" };
|
||||
|
||||
function Zeitpunkt({ wert, jetzt, sonst }: { wert: Date | null; jetzt: Date; sonst: string }) {
|
||||
if (!wert) return <span className="text-muted">{sonst}</span>;
|
||||
return (
|
||||
<time dateTime={wert.toISOString()} title={datumZeit(wert)}>
|
||||
{relativ(wert, jetzt)}
|
||||
</time>
|
||||
);
|
||||
}
|
||||
|
||||
function Info({ titel, children }: { titel: string; children: ReactNode }) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<dt className="text-muted text-[13px] font-medium">{titel}</dt>
|
||||
<dd className="text-text mt-1 text-[14.5px] break-words">{children}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Erreichbarkeit({ host, jetzt }: { host: HostDetail; jetzt: Date }) {
|
||||
const pruefung = host.zuletztGeprueftAm ? ` · ${relativ(host.zuletztGeprueftAm, jetzt)}` : "";
|
||||
if (host.erreichbar === true) return <Statuspunkt status="synchron" text={`erreichbar${pruefung}`} />;
|
||||
if (host.erreichbar === false)
|
||||
return <Statuspunkt status="unerreichbar" text={`nicht erreichbar${pruefung}`} />;
|
||||
return <Statuspunkt status="unbekannt" text="noch nicht geprüft" />;
|
||||
}
|
||||
|
||||
/** `sshd -T`-Auszug (#010 fuellt ihn); hier nur flach als Schluessel/Wert gezeigt. */
|
||||
function SshdBefund({ befund }: { befund: unknown }) {
|
||||
if (!befund || typeof befund !== "object" || Array.isArray(befund)) return null;
|
||||
const eintraege = Object.entries(befund as Record<string, unknown>);
|
||||
if (eintraege.length === 0) return null;
|
||||
return (
|
||||
<div className="border-border mt-5 border-t pt-4">
|
||||
<p className="text-muted text-[13px] font-medium">sshd-Befund</p>
|
||||
<dl className="mt-2 grid gap-x-6 gap-y-1 font-mono text-[13px] sm:grid-cols-2">
|
||||
{eintraege.map(([k, v]) => (
|
||||
<div key={k} className="flex min-w-0 gap-2">
|
||||
<dt className="text-muted shrink-0">{k}</dt>
|
||||
<dd className="text-text min-w-0 break-all">{String(v)}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Hostdetail (#008): Gerüst, in das #009 (Host-Key), #010 (Bootstrap) und #016 einziehen. */
|
||||
export default async function HostSeite({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
const { benutzer } = await sitzungErforderlich("lesen", `/hosts/${id}`);
|
||||
const host = await hostDetail(id);
|
||||
if (!host) notFound();
|
||||
|
||||
const archiviert = host.archiviertAm !== null;
|
||||
const verwalten = darf(benutzer.rolle, "hostsVerwalten") && !archiviert;
|
||||
const jetzt = new Date();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 sm:gap-7">
|
||||
<Seitenkopf
|
||||
oben={<Breadcrumb pfad={[{ titel: "Hosts", href: "/hosts" }, { titel: host.name }]} />}
|
||||
titel={<span className="font-mono">{host.name}</span>}
|
||||
untertitel={
|
||||
<>
|
||||
<span className="text-text font-mono text-[13.5px] break-all">
|
||||
{adresseMitPort(host.adresse, host.port)}
|
||||
</span>
|
||||
{host.beschreibung && <span className="mt-1.5 block">{host.beschreibung}</span>}
|
||||
</>
|
||||
}
|
||||
badges={
|
||||
<>
|
||||
{archiviert && host.archiviertAm && (
|
||||
<Badge variante="gefahr">archiviert am {datum(host.archiviertAm)}</Badge>
|
||||
)}
|
||||
<AnmeldeartBadge anmeldeart={host.anmeldeart} />
|
||||
{host.gruppen.map((g) => (
|
||||
<Badge key={g.id}>{g.name}</Badge>
|
||||
))}
|
||||
{host.tags.map((t) => (
|
||||
<Badge key={t} mono className="text-muted">
|
||||
#{t}
|
||||
</Badge>
|
||||
))}
|
||||
</>
|
||||
}
|
||||
aktionen={
|
||||
verwalten && (
|
||||
<Button href={`/hosts/${host.id}/bearbeiten`} icon={<Pencil className="size-4" />}>
|
||||
Bearbeiten
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<Karte as="div">
|
||||
<dl className="grid grid-cols-1 gap-x-6 gap-y-4 min-[480px]:grid-cols-2 xl:grid-cols-4">
|
||||
<Info titel="Erreichbar">
|
||||
<Erreichbarkeit host={host} jetzt={jetzt} />
|
||||
</Info>
|
||||
<Info titel="Bootstrap">
|
||||
{host.bootstrapAm ? (
|
||||
<time dateTime={host.bootstrapAm.toISOString()}>{datumZeit(host.bootstrapAm)}</time>
|
||||
) : (
|
||||
<span className="text-accent">noch nicht eingerichtet</span>
|
||||
)}
|
||||
</Info>
|
||||
<Info titel="Letzter Abgleich">
|
||||
<span className="flex flex-col gap-0.5">
|
||||
<Zeitpunkt wert={host.letzterAbgleichAm} jetzt={jetzt} sonst="noch nie" />
|
||||
{host.letzterAbgleichAm && <Statuspunkt status={host.status} className="text-[13px]" />}
|
||||
</span>
|
||||
</Info>
|
||||
<Info titel="Kunde">{host.kunde ? host.kunde.name : <span className="text-muted">–</span>}</Info>
|
||||
</dl>
|
||||
<SshdBefund befund={host.sshdBefund} />
|
||||
<BootstrapAktionen
|
||||
hostId={host.id}
|
||||
darfVerwalten={verwalten}
|
||||
eingerichtet={host.bootstrapAm !== null}
|
||||
hostKeyVertraut={host.hostKey.vertraut > 0}
|
||||
/>
|
||||
</Karte>
|
||||
|
||||
<Karte
|
||||
titel="Host-Key"
|
||||
untertitel="Fingerprints, gegen die sshkv jede Verbindung prüft"
|
||||
aktionen={
|
||||
<HostKeyAktionen
|
||||
hostId={host.id}
|
||||
darfEntscheiden={darf(benutzer.rolle, "hostKeyEntscheiden") && !archiviert}
|
||||
status={host.hostKey}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{host.hostSchluessel.length === 0 ? (
|
||||
<Leerzustand
|
||||
icon={<ShieldQuestion className="size-5" />}
|
||||
titel="Noch kein Host-Key abgerufen"
|
||||
text="Ohne bestätigten Host-Key verbindet sich sshkv nicht mit diesem Host."
|
||||
/>
|
||||
) : (
|
||||
<ul className="flex flex-col">
|
||||
{host.hostSchluessel.map((k) => (
|
||||
<li
|
||||
key={k.id}
|
||||
className="border-border grid gap-x-4 gap-y-1 border-b py-3 first:pt-0 last:border-b-0 last:pb-0 md:grid-cols-[12rem_minmax(0,1fr)_auto] md:items-center"
|
||||
>
|
||||
<span className="flex items-center justify-between gap-3 md:block">
|
||||
<span className="text-text font-mono text-[13px]">{k.algorithmus}</span>
|
||||
<span className="md:hidden">
|
||||
<HostSchluesselStatusBadge status={k.status} />
|
||||
</span>
|
||||
</span>
|
||||
<span className="min-w-0">
|
||||
<MonoKopieren wert={k.fingerprint} beschriftung="Fingerprint" umbrechen />
|
||||
<span className="text-muted block text-[12.5px]">
|
||||
zuerst gesehen {datumZeit(k.erstmalsGesehen)} · zuletzt {relativ(k.zuletztGesehen, jetzt)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="hidden md:block">
|
||||
<HostSchluesselStatusBadge status={k.status} />
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Karte>
|
||||
|
||||
<Karte
|
||||
titel="Schlüssel auf diesem Host"
|
||||
untertitel={`${host.publicVerwendungen} Public-Key-Verwendungen · ${host.privateVerwendungen} Private-Key-Verwendungen`}
|
||||
>
|
||||
{host.zielkonten.length > 0 && (
|
||||
<p className="text-muted mb-4 text-[14px]">
|
||||
Zielkonten:{" "}
|
||||
{host.zielkonten.map((z, i) => (
|
||||
<span key={z.id}>
|
||||
{i > 0 && ", "}
|
||||
<code className="text-text font-mono text-[13px]">{z.benutzername}</code>
|
||||
</span>
|
||||
))}
|
||||
</p>
|
||||
)}
|
||||
<Leerzustand
|
||||
icon={<KeyRound className="size-5" />}
|
||||
titel="Folgt mit #016"
|
||||
text="Hier erscheinen die Public und Private Keys, die sshkv auf diesem Host verwaltet."
|
||||
/>
|
||||
</Karte>
|
||||
|
||||
{verwalten && (
|
||||
<Karte titel="Archivieren" untertitel="Host stilllegen, ohne die Historie zu verlieren">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-muted max-w-xl text-[14px]">
|
||||
Archivierte Hosts verschwinden aus Listen und Hostgruppen. Name und Protokoll bleiben erhalten.
|
||||
</p>
|
||||
<ArchivierenDialog hostId={host.id} hostName={host.name} />
|
||||
</div>
|
||||
</Karte>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { Metadata } from "next";
|
||||
import { HostFormular, LEERER_HOST } from "@/components/hosts/HostFormular";
|
||||
import { Breadcrumb } from "@/components/ui/Breadcrumb";
|
||||
import { Seitenkopf } from "@/components/ui/Seitenkopf";
|
||||
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
|
||||
import { gruppenAuswahl, kundenNamen } from "@/server/queries/hosts";
|
||||
|
||||
export const metadata: Metadata = { title: "Host anlegen" };
|
||||
|
||||
export default async function HostNeu() {
|
||||
await sitzungErforderlich("hostsVerwalten", "/hosts/neu");
|
||||
const [gruppen, kunden] = await Promise.all([gruppenAuswahl(), kundenNamen()]);
|
||||
return (
|
||||
<div className="flex max-w-3xl flex-col gap-6 sm:gap-7">
|
||||
<Seitenkopf
|
||||
oben={<Breadcrumb pfad={[{ titel: "Hosts", href: "/hosts" }, { titel: "Neuer Host" }]} />}
|
||||
titel="Host anlegen"
|
||||
untertitel="Danach ruft sshkv den Host-Key ab; eingerichtet wird der Zugang im nächsten Schritt."
|
||||
/>
|
||||
<HostFormular vorgabe={LEERER_HOST} gruppen={gruppen} kunden={kunden} abbrechenZiel="/hosts" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+210
-10
@@ -1,18 +1,218 @@
|
||||
import { Plus, Search, Server } from "lucide-react";
|
||||
import type { Metadata } from "next";
|
||||
import { Platzhalterseite } from "@/components/huelle/Platzhalterseite";
|
||||
import Link from "next/link";
|
||||
import { adresseMitPort, HostKeyBadge } from "@/components/hosts/Anzeige";
|
||||
import { Badge } from "@/components/ui/Badge";
|
||||
import { Button } from "@/components/ui/Button";
|
||||
import { Auswahlliste, Feld } from "@/components/ui/Feld";
|
||||
import { Karte } from "@/components/ui/Karte";
|
||||
import { Leerzustand } from "@/components/ui/Leerzustand";
|
||||
import { Seitenkopf } from "@/components/ui/Seitenkopf";
|
||||
import { Statuspunkt } from "@/components/ui/Statuspunkt";
|
||||
import { Tabelle, TabellenZeile, TabellenZelle } from "@/components/ui/Tabelle";
|
||||
import { datumZeit, relativ } from "@/lib/format";
|
||||
import { darf } from "@/server/auth/rechte";
|
||||
import { sitzungErforderlich } from "@/server/auth/sitzungspflicht";
|
||||
import { gruppenAuswahl, hostListe, type HostListenEintrag } from "@/server/queries/hosts";
|
||||
|
||||
export const metadata: Metadata = { title: "Hosts" };
|
||||
|
||||
export default async function Hosts() {
|
||||
// Jede Seite prueft selbst; die Huelle ist nur das zweite Netz (CLAUDE.md).
|
||||
await sitzungErforderlich();
|
||||
type Suchparameter = Promise<Record<string, string | string[] | undefined>>;
|
||||
|
||||
function einzeln(wert: string | string[] | undefined): string {
|
||||
return (Array.isArray(wert) ? wert[0] : wert)?.trim() ?? "";
|
||||
}
|
||||
|
||||
function statusText(h: HostListenEintrag): string | undefined {
|
||||
if (h.status !== "drift" || h.offeneAbweichungen === 0) return undefined;
|
||||
return h.offeneAbweichungen === 1 ? "1 Abweichung" : `${h.offeneAbweichungen} Abweichungen`;
|
||||
}
|
||||
|
||||
function Abgleich({ wert, jetzt }: { wert: Date | null; jetzt: Date }) {
|
||||
if (!wert) return <>noch nie</>;
|
||||
return (
|
||||
<Platzhalterseite
|
||||
titel="Hosts"
|
||||
untertitel="Verwaltete Server, Host-Keys und Erreichbarkeit"
|
||||
phase={1}
|
||||
issue="#008"
|
||||
/>
|
||||
<time dateTime={wert.toISOString()} title={datumZeit(wert)}>
|
||||
{relativ(wert, jetzt)}
|
||||
</time>
|
||||
);
|
||||
}
|
||||
|
||||
/** Hostliste mit Suche und Gruppenfilter (#008). Filter per GET, damit Links teilbar sind. */
|
||||
export default async function Hosts({ searchParams }: { searchParams: Suchparameter }) {
|
||||
// Jede Seite prueft selbst; die Huelle ist nur das zweite Netz (CLAUDE.md).
|
||||
const { benutzer } = await sitzungErforderlich("lesen", "/hosts");
|
||||
const parameter = await searchParams;
|
||||
const q = einzeln(parameter["q"]);
|
||||
const gruppeId = einzeln(parameter["gruppe"]);
|
||||
const [hosts, gruppen] = await Promise.all([
|
||||
hostListe({ q, gruppeId: gruppeId || undefined }),
|
||||
gruppenAuswahl(),
|
||||
]);
|
||||
const verwalten = darf(benutzer.rolle, "hostsVerwalten");
|
||||
const gefiltert = q !== "" || gruppeId !== "";
|
||||
const jetzt = new Date();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 sm:gap-7">
|
||||
<Seitenkopf
|
||||
titel="Hosts"
|
||||
untertitel={
|
||||
gefiltert
|
||||
? `${hosts.length} Treffer`
|
||||
: `${hosts.length} ${hosts.length === 1 ? "verwalteter Server" : "verwaltete Server"}`
|
||||
}
|
||||
aktionen={
|
||||
verwalten && (
|
||||
<Button href="/hosts/neu" variante="primaer" icon={<Plus className="size-4" strokeWidth={2.4} />}>
|
||||
Host anlegen
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<form
|
||||
method="get"
|
||||
role="search"
|
||||
className="grid items-end gap-3 sm:grid-cols-[minmax(0,1fr)_14rem_auto]"
|
||||
>
|
||||
<Feld
|
||||
beschriftung="Suche"
|
||||
name="q"
|
||||
type="search"
|
||||
defaultValue={q}
|
||||
placeholder="Name, Adresse oder Tag"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
<Auswahlliste beschriftung="Hostgruppe" name="gruppe" defaultValue={gruppeId}>
|
||||
<option value="">Alle Gruppen</option>
|
||||
{gruppen.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</option>
|
||||
))}
|
||||
</Auswahlliste>
|
||||
<div className="flex gap-2.5">
|
||||
<Button type="submit" icon={<Search className="size-4" />} className="flex-1 sm:flex-none">
|
||||
Filtern
|
||||
</Button>
|
||||
{gefiltert && (
|
||||
<Button href="/hosts" className="flex-1 sm:flex-none">
|
||||
Zurücksetzen
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{hosts.length === 0 ? (
|
||||
gefiltert ? (
|
||||
<Leerzustand
|
||||
icon={<Search className="size-5" />}
|
||||
titel="Keine Treffer"
|
||||
text="Kein Host passt zu Suche und Gruppe."
|
||||
aktion={<Button href="/hosts">Filter zurücksetzen</Button>}
|
||||
/>
|
||||
) : (
|
||||
<Leerzustand
|
||||
icon={<Server className="size-5" />}
|
||||
titel="Noch keine Hosts"
|
||||
text="Legen Sie den ersten Server an. Danach ruft sshkv seinen Host-Key ab und richtet den Zugang ein."
|
||||
aktion={
|
||||
verwalten && (
|
||||
<Button
|
||||
href="/hosts/neu"
|
||||
variante="primaer"
|
||||
icon={<Plus className="size-4" strokeWidth={2.4} />}
|
||||
>
|
||||
Host anlegen
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Karte>
|
||||
{/* Unter md eine Liste statt der Tabelle: sechs Spalten passen nicht auf 390 px, und
|
||||
Status und Host-Key sollen ohne seitliches Wischen sichtbar sein (#008). */}
|
||||
<ul className="flex flex-col md:hidden">
|
||||
{hosts.map((h) => (
|
||||
<li key={h.id} className="border-border border-b last:border-b-0">
|
||||
<Link
|
||||
href={`/hosts/${h.id}`}
|
||||
className="hover:bg-raised/50 rounded-box -mx-2 flex min-h-11 flex-col gap-2 px-2 py-3 transition-colors"
|
||||
>
|
||||
<span className="min-w-0">
|
||||
<span className="text-text block truncate font-mono text-[14px] font-medium">
|
||||
{h.name}
|
||||
</span>
|
||||
<span className="text-muted block truncate font-mono text-[12.5px]">
|
||||
{adresseMitPort(h.adresse, h.port)}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex flex-wrap items-center gap-x-3 gap-y-1.5">
|
||||
<Statuspunkt status={h.status} text={statusText(h)} />
|
||||
<HostKeyBadge zustand={h.hostKey.zustand} />
|
||||
{h.gruppen.map((g) => (
|
||||
<Badge key={g.id}>{g.name}</Badge>
|
||||
))}
|
||||
</span>
|
||||
<span className="text-muted text-[13px]">
|
||||
Letzter Abgleich: <Abgleich wert={h.letzterAbgleichAm} jetzt={jetzt} />
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Tabelle
|
||||
className="hidden md:block"
|
||||
beschriftung="Hosts"
|
||||
spalten={[
|
||||
{ titel: "Name" },
|
||||
{ titel: "Adresse" },
|
||||
{ titel: "Gruppen" },
|
||||
{ titel: "Status" },
|
||||
{ titel: "Host-Key" },
|
||||
{ titel: "Letzter Abgleich" },
|
||||
]}
|
||||
>
|
||||
{hosts.map((h) => (
|
||||
<TabellenZeile key={h.id}>
|
||||
<TabellenZelle className="whitespace-nowrap">
|
||||
<Link
|
||||
href={`/hosts/${h.id}`}
|
||||
className="text-text hover:text-accent -my-2 inline-flex min-h-11 items-center font-mono text-[13.5px] font-medium transition-colors"
|
||||
>
|
||||
{h.name}
|
||||
</Link>
|
||||
</TabellenZelle>
|
||||
<TabellenZelle mono className="text-muted whitespace-nowrap">
|
||||
{adresseMitPort(h.adresse, h.port)}
|
||||
</TabellenZelle>
|
||||
<TabellenZelle>
|
||||
{h.gruppen.length === 0 ? (
|
||||
<span className="text-muted">–</span>
|
||||
) : (
|
||||
<span className="flex flex-wrap gap-1.5">
|
||||
{h.gruppen.map((g) => (
|
||||
<Badge key={g.id}>{g.name}</Badge>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</TabellenZelle>
|
||||
<TabellenZelle className="whitespace-nowrap">
|
||||
<Statuspunkt status={h.status} text={statusText(h)} />
|
||||
</TabellenZelle>
|
||||
<TabellenZelle className="whitespace-nowrap">
|
||||
<HostKeyBadge zustand={h.hostKey.zustand} />
|
||||
</TabellenZelle>
|
||||
<TabellenZelle className="text-muted whitespace-nowrap">
|
||||
<Abgleich wert={h.letzterAbgleichAm} jetzt={jetzt} />
|
||||
</TabellenZelle>
|
||||
</TabellenZeile>
|
||||
))}
|
||||
</Tabelle>
|
||||
</Karte>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user