D4rkst3randClaude Opus 5
40c446f859
Vier Dinge, alle am laufenden Dienst gemessen. PAPIERKORB. Loeschen war endgueltig -- bei einem Knopf "alle 3861 waehlen" direkt neben "loeschen" ist das die falsche Haerte, und die Sicherung half nur bis zum letzten naechtlichen Lauf. Die Datei wandert jetzt nach /data/papierkorb, der Datensatz in eine eigene Tabelle, nach 30 Tagen raeumt der Dienst stuendlich selbst auf. Der Ablagename traegt eine laufende Nummer: unter demselben Pfad koennen nacheinander verschiedene Dateien gelegen haben, und beide sollen zurueckholbar sein. Geprueft: loeschen -> oeffentlich 404, Eintrag im Papierkorb, zurueckholen -> 200 samt neu gerechneter Vorschau. ABRUFZAEHLER. media.abrufe und zuletzt_abgerufen. Gezaehlt wird im Speicher und alle 30 Sekunden weggeschrieben -- ein UPDATE je Kachel waeren bei einer Galerieseite 120 Schreibvorgaenge. Der 304 zaehlt mit (der Aufrufer WOLLTE die Datei, er hatte sie nur schon), HEAD nicht. Was vor dem Einbau lag, steht als "nie geholt" da, auch wenn es taeglich benutzt wurde -- die Karte im Speicherbericht sagt das auch dazu, statt eine Zahl zu zeigen, die luegt. WEBP OHNE ADRESSAENDERUNG. Der Pfad ist die Adresse: aus items/foo.png darf nicht items/foo.webp werden. Die sparsame Fassung liegt deshalb DANEBEN und wird unter DERSELBEN Adresse ausgeliefert, wenn der Aufrufer per Accept sagt, dass er WebP versteht. Nachgemessen an einer Datei: 6448 Bytes fuer curl, 2758 fuer einen Browser. Ueber den ganzen Bestand: 3606 Fassungen, 199,3 MB -> 33,1 MB, gespart 166,2 MB. Bei 29 lohnt WebP nicht -- dort bleibt es beim Original. Zwei Dinge haengen daran, beide gegengeprueft: "Vary: Accept" (ohne die Zeile legt ein Zwischenspeicher die WebP-Fassung fuer alle ab, auch fuer die, die sie nicht lesen koennen) und getrennte ETags mit "-w" (sonst bekaeme jemand auf seinen If-None-Match hin ein 304 fuer das falsche Bild). Gemessen: derselbe ETag mit Accept -> 304, ohne Accept -> 200 mit dem PNG. ZIP HOCHLADEN. Ein Archiv wird ausgepackt statt abgelegt, die Ordner darin bleiben erhalten und haengen sich hinter den gewaehlten Zielordner. fflate und nicht adm-zip: reines JavaScript, keine native Bibliothek -- dieses Projekt hat schon einen halben Abend an einer ABI-Nummer verloren. Grenzen: 5000 Eintraege, 256 MB entpackt, geprueft VOR dem Entpacken (eine Zip-Bombe waere sonst schon im Speicher). Zip-Slip gemessen: "../../../../etc/passwd" und "..\..\windows\hosts" abgelehnt, die harmlose Datei im selben Archiv abgelegt. UND EIN KNOPF, DER GELOGEN HAT. Der erste Nachruestlauf ueber alle Dateien brauchte mehr als 90 Sekunden -- genau da gibt Nginx Proxy Manager auf. Der Aufrufer sah einen 504, waehrend die Arbeit im Hintergrund weiterlief und fertig wurde. Ein Knopf, der Erfolg als Fehler meldet, ist schlimmer als einer ohne Rueckmeldung. Beide Wartungsknoepfe laufen deshalb in Runden zu 300 Stueck: der Server meldet "offen" und "fertig", die Oberflaeche ruft erneut auf und zeigt dabei "280 erzeugt, noch 129 offen ...". Gemessen: 7,8 s je Runde statt 90+ am Stueck. Der Vorschau-Knopf hatte dieselbe Wand und wurde mitgezogen, obwohl er noch nicht dagegengelaufen war. Nebenbei: der Verwaisten-Sucher kennt jetzt auch /data/webp (gleiche Schleife, Ordner im Ergebnis vorangestellt), Verschieben und Loeschen nehmen die sparsame Fassung mit, und das Loeschen eines Ordners raeumt thumbs/ und webp/ hinterher. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
225 lines
11 KiB
TypeScript
225 lines
11 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { FileQuestion, FileText, Film, Image, Loader2, Music } from 'lucide-react'
|
||
import { api, type Speicher } from '../api'
|
||
import { useStore } from '../store'
|
||
import { bytes, zeit } from '../format'
|
||
import { Karte, Leer } from './Bausteine'
|
||
|
||
const ARTEN: Record<string, { text: string; kind: typeof Image; farbe: string }> = {
|
||
bild: { text: 'Bilder', kind: Image, farbe: 'bg-akzent' },
|
||
video: { text: 'Video', kind: Film, farbe: 'bg-warn' },
|
||
ton: { text: 'Ton', kind: Music, farbe: 'bg-gut' },
|
||
dokument: { text: 'Dokumente', kind: FileText, farbe: 'bg-schrift-leise' },
|
||
andere: { text: 'Anderes', kind: FileQuestion, farbe: 'bg-schlecht' },
|
||
}
|
||
|
||
/** Was liegt da eigentlich — nach Art, nach Größe, nach Alter.
|
||
*
|
||
* ERST SEHEN, DANN ENTSCHEIDEN. Eine Aufbewahrungsregel („alles älter als 90
|
||
* Tage weg") ist eine Behauptung, solange niemand weiß, wie viel das wäre.
|
||
* Diese Karten löschen nichts; sie liefern die Zahlen, mit denen man
|
||
* entscheiden kann. */
|
||
export function SpeicherKarten() {
|
||
const note = useStore((s) => s.note)
|
||
const [daten, setDaten] = useState<Speicher | null>(null)
|
||
|
||
useEffect(() => {
|
||
api.speicher()
|
||
.then(setDaten)
|
||
.catch((err) => note('fehler', err instanceof Error ? err.message : 'Unbekannt'))
|
||
}, [note])
|
||
|
||
if (!daten) {
|
||
return (
|
||
<Karte titel="Nach Medienart">
|
||
<div className="flex justify-center py-6">
|
||
<Loader2 className="animate-spin text-schrift-leise" />
|
||
</div>
|
||
</Karte>
|
||
)
|
||
}
|
||
|
||
const gesamt = daten.nachArt.reduce((s, a) => s + a.bytes, 0) || 1
|
||
|
||
return (
|
||
<>
|
||
<Karte titel="Nach Medienart">
|
||
<div className="flex flex-col gap-2">
|
||
{/* Ein Balken für alles, damit die Verhältnisse auf einen
|
||
Blick stimmen — Zahlen untereinander liest man, Anteile
|
||
sieht man. */}
|
||
<div className="flex h-2.5 overflow-hidden rounded-full bg-grund">
|
||
{daten.nachArt
|
||
.filter((a) => a.bytes > 0)
|
||
.map((a) => (
|
||
<div
|
||
key={a.art}
|
||
className={ARTEN[a.art]?.farbe ?? 'bg-rand'}
|
||
style={{ width: `${(a.bytes / gesamt) * 100}%` }}
|
||
title={`${ARTEN[a.art]?.text}: ${bytes(a.bytes)}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<table className="w-full text-sm">
|
||
<tbody>
|
||
{daten.nachArt.map((a) => {
|
||
const g = ARTEN[a.art]
|
||
const Kind = g?.kind ?? FileQuestion
|
||
return (
|
||
<tr
|
||
key={a.art}
|
||
className={`border-t border-rand first:border-0 ${
|
||
a.files === 0 ? 'text-schrift-leise/50' : ''
|
||
}`}
|
||
>
|
||
<td className="py-1.5">
|
||
<span className="flex items-center gap-2">
|
||
<span
|
||
className={`h-2 w-2 rounded-full ${g?.farbe ?? 'bg-rand'}`}
|
||
/>
|
||
<Kind size={14} />
|
||
{g?.text ?? a.art}
|
||
</span>
|
||
</td>
|
||
<td className="py-1.5 text-right tabular-nums">
|
||
{a.files}
|
||
</td>
|
||
<td className="w-24 py-1.5 text-right tabular-nums">
|
||
{bytes(a.bytes)}
|
||
</td>
|
||
<td className="w-16 py-1.5 text-right text-xs text-schrift-leise tabular-nums">
|
||
{gesamt > 1 ? `${Math.round((a.bytes / gesamt) * 100)} %` : '—'}
|
||
</td>
|
||
</tr>
|
||
)
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</Karte>
|
||
|
||
<div className="grid gap-4 lg:grid-cols-2">
|
||
<Karte titel="Die größten Dateien">
|
||
{daten.groesste.length === 0 ? (
|
||
<Leer text="Noch nichts da." />
|
||
) : (
|
||
<ul className="flex flex-col gap-1 text-sm">
|
||
{daten.groesste.map((m) => (
|
||
<li key={m.id} className="flex items-center gap-2">
|
||
<span
|
||
className="min-w-0 flex-1 truncate font-mono text-xs"
|
||
title={m.path}
|
||
>
|
||
{m.path}
|
||
</span>
|
||
<span className="shrink-0 text-xs tabular-nums">
|
||
{bytes(m.size)}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</Karte>
|
||
|
||
<Karte titel="Doppelt abgelegt">
|
||
{daten.doppelte.length === 0 ? (
|
||
<p className="py-2 text-sm text-schrift-leise">
|
||
Nichts doppelt — jeder Inhalt liegt genau einmal.
|
||
</p>
|
||
) : (
|
||
<div className="flex flex-col gap-2">
|
||
<p className="text-xs text-schrift-leise">
|
||
Derselbe Inhalt unter mehreren Pfaden. Kein Fehler — aber{' '}
|
||
<strong className="text-warn">{bytes(daten.verschwendet)}</strong>{' '}
|
||
Platz, den niemand gewählt hat.
|
||
</p>
|
||
<ul className="flex max-h-48 flex-col gap-1 overflow-auto text-xs">
|
||
{daten.doppelte.map((d) => (
|
||
<li key={d.sha256} className="rounded border border-rand p-1.5">
|
||
<span className="text-schrift-leise">
|
||
{d.n}× · {bytes(d.bytes / d.n)}
|
||
</span>
|
||
<span className="mt-0.5 block truncate font-mono">
|
||
{d.pfade.replaceAll('|', ' · ')}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</Karte>
|
||
</div>
|
||
|
||
<Karte titel="Wird das überhaupt geholt?">
|
||
<p className="mb-3 text-xs text-schrift-leise">
|
||
Die Frage, die eine Aufbewahrungsregel wirklich braucht — und die sich von
|
||
innen nicht beantworten lässt. Gezählt wird seit dem Einbau des Zählers;
|
||
was davor lag, steht hier als „nie geholt", auch wenn es täglich benutzt
|
||
wurde. Nach ein paar Wochen stimmt die Zahl.
|
||
</p>
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
<div className="rounded-md border border-rand bg-grund p-3">
|
||
<p className="text-xs text-schrift-leise">Nie geholt</p>
|
||
<p className="text-xl font-semibold">
|
||
{daten.nieGeholt.n}{' '}
|
||
<span className="text-sm font-normal text-schrift-leise">
|
||
({bytes(daten.nieGeholt.bytes)})
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div className="rounded-md border border-rand bg-grund p-3">
|
||
<p className="mb-1 text-xs text-schrift-leise">Am häufigsten geholt</p>
|
||
{daten.beliebteste.length === 0 ? (
|
||
<p className="text-sm text-schrift-leise">noch nichts gezählt</p>
|
||
) : (
|
||
<ul className="flex flex-col gap-0.5 text-xs">
|
||
{daten.beliebteste.slice(0, 5).map((m) => (
|
||
<li key={m.id} className="flex items-center gap-2">
|
||
<span className="min-w-0 flex-1 truncate font-mono" title={m.path}>
|
||
{m.path}
|
||
</span>
|
||
<span className="shrink-0 tabular-nums text-schrift-leise">
|
||
{m.abrufe}×
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</Karte>
|
||
|
||
<Karte titel="Wie alt der Bestand ist">
|
||
<p className="mb-3 text-xs text-schrift-leise">
|
||
Die Zahlen, die eine Aufbewahrungsregel braucht. „Alles älter als 90 Tage
|
||
löschen" ist eine Behauptung, solange niemand weiß, wie viel das wäre —
|
||
hier steht es. <strong>Gelöscht wird hier nichts.</strong>
|
||
</p>
|
||
<table className="w-full text-sm">
|
||
<tbody>
|
||
{daten.stufen.map((st) => (
|
||
<tr key={st.tage} className="border-t border-rand first:border-0">
|
||
<td className="py-1.5">älter als {st.tage} Tage</td>
|
||
<td className="py-1.5 text-right tabular-nums">
|
||
{st.files} Dateien
|
||
</td>
|
||
<td className="w-24 py-1.5 text-right tabular-nums">
|
||
{bytes(st.bytes)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
{daten.aelteste[0] && (
|
||
<p className="mt-3 text-xs text-schrift-leise">
|
||
Das älteste ist{' '}
|
||
<code className="font-mono">{daten.aelteste[0].path}</code> vom{' '}
|
||
{zeit(daten.aelteste[0].created_at)}.
|
||
</p>
|
||
)}
|
||
</Karte>
|
||
</>
|
||
)
|
||
}
|