feat: Papierkorb, Abrufzaehler, WebP ohne Adressaenderung, ZIP hochladen
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>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,213 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { AlertTriangle, Loader2, RotateCcw, Trash2 } from 'lucide-react'
|
||||
import { api, type PapierkorbSeite, type PapierkorbEintrag } from '../api'
|
||||
import { run, useStore } from '../store'
|
||||
import { bytes, zeit } from '../format'
|
||||
import { Karte, Knopf, Leer, Nachfrage } from '../components/Bausteine'
|
||||
|
||||
/** Der Papierkorb.
|
||||
*
|
||||
* Löschen war bis vor Kurzem endgültig — die Sicherung half nur bis zum
|
||||
* letzten nächtlichen Lauf. Bei einem Knopf „alle 3670 wählen" direkt neben
|
||||
* „löschen" ist das die falsche Härte.
|
||||
*
|
||||
* Was hier steht, liegt weiterhin auf der Platte, nur nicht mehr unter seiner
|
||||
* öffentlichen Adresse. Nach 30 Tagen räumt der Dienst selbst auf. */
|
||||
export function Papierkorb() {
|
||||
const note = useStore((s) => s.note)
|
||||
const [daten, setDaten] = useState<PapierkorbSeite | null>(null)
|
||||
const [gewaehlt, setGewaehlt] = useState<Set<number>>(new Set())
|
||||
const [laeuft, setLaeuft] = useState(false)
|
||||
const [fragt, setFragt] = useState<PapierkorbEintrag[] | 'alles' | null>(null)
|
||||
|
||||
const laden = useCallback(async () => {
|
||||
try {
|
||||
setDaten(await api.papierkorb())
|
||||
} catch (err) {
|
||||
note('fehler', err instanceof Error ? err.message : 'Unbekannt')
|
||||
}
|
||||
}, [note])
|
||||
|
||||
useEffect(() => {
|
||||
void laden()
|
||||
}, [laden])
|
||||
|
||||
if (!daten) {
|
||||
return (
|
||||
<div className="flex justify-center py-16">
|
||||
<Loader2 className="animate-spin text-schrift-leise" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const items = daten.items
|
||||
const auswahl = items.filter((i) => gewaehlt.has(i.id))
|
||||
|
||||
async function zurueck(liste: PapierkorbEintrag[]) {
|
||||
setLaeuft(true)
|
||||
await run(
|
||||
() => api.papierkorbZurueck(liste.map((e) => e.id)),
|
||||
(r) =>
|
||||
r.fehlgeschlagen === 0
|
||||
? `${r.zurueck} zurückgeholt.`
|
||||
: `${r.zurueck} zurückgeholt, ${r.fehlgeschlagen} nicht: ` +
|
||||
r.ergebnisse
|
||||
.filter((e) => !e.ok)
|
||||
.slice(0, 3)
|
||||
.map((e) => `${e.path} (${e.error})`)
|
||||
.join('; '),
|
||||
)
|
||||
setLaeuft(false)
|
||||
setGewaehlt(new Set())
|
||||
void laden()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className="text-sm text-schrift-leise">
|
||||
{daten.n} {daten.n === 1 ? 'Eintrag' : 'Einträge'} · {bytes(daten.bytes)}
|
||||
</span>
|
||||
|
||||
{auswahl.length > 0 && (
|
||||
<>
|
||||
<Knopf
|
||||
art="haupt"
|
||||
wartet={laeuft}
|
||||
onClick={() => void zurueck(auswahl)}
|
||||
kind={
|
||||
<>
|
||||
<RotateCcw size={15} />
|
||||
{auswahl.length} zurückholen
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Knopf
|
||||
art="gefahr"
|
||||
onClick={() => setFragt(auswahl)}
|
||||
kind={`${auswahl.length} endgültig löschen`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{items.length > 0 && (
|
||||
<Knopf
|
||||
art="gefahr"
|
||||
className="ml-auto"
|
||||
onClick={() => setFragt('alles')}
|
||||
kind={
|
||||
<>
|
||||
<Trash2 size={15} />
|
||||
Papierkorb leeren
|
||||
</>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Karte>
|
||||
{items.length === 0 ? (
|
||||
<Leer
|
||||
kind={<Trash2 size={26} className="text-schrift-leise/50" />}
|
||||
text="Der Papierkorb ist leer."
|
||||
/>
|
||||
) : (
|
||||
<table className="w-full table-fixed text-sm">
|
||||
<colgroup>
|
||||
<col className="w-10" />
|
||||
<col />
|
||||
<col className="w-24" />
|
||||
<col className="w-40" />
|
||||
<col className="w-32" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr className="text-left text-xs text-schrift-leise">
|
||||
<th className="px-3 pb-2" />
|
||||
<th className="px-3 pb-2 font-medium">Pfad</th>
|
||||
<th className="px-3 pb-2 text-right font-medium">Größe</th>
|
||||
<th className="px-3 pb-2 font-medium">Gelöscht</th>
|
||||
<th className="px-3 pb-2 font-medium">Von</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((e) => (
|
||||
<tr key={e.id} className="border-t border-rand">
|
||||
<td className="px-3 py-1.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={gewaehlt.has(e.id)}
|
||||
onChange={(ev) =>
|
||||
setGewaehlt((alt) => {
|
||||
const neu = new Set(alt)
|
||||
if (ev.target.checked) neu.add(e.id)
|
||||
else neu.delete(e.id)
|
||||
return neu
|
||||
})
|
||||
}
|
||||
className="accent-akzent"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-w-0 truncate px-3 py-1.5 font-mono text-xs"
|
||||
title={e.path}
|
||||
>
|
||||
{e.path}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 text-right tabular-nums">
|
||||
{bytes(e.size)}
|
||||
</td>
|
||||
<td className="px-3 py-1.5 whitespace-nowrap text-schrift-leise tabular-nums">
|
||||
{zeit(e.geloescht)}
|
||||
</td>
|
||||
<td className="truncate px-3 py-1.5 text-schrift-leise">
|
||||
{e.von}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</Karte>
|
||||
|
||||
<p className="text-xs text-schrift-leise">
|
||||
Einträge werden nach {daten.haltbarTage} Tagen von selbst endgültig entfernt.
|
||||
Solange sie hier stehen, liegen sie weiterhin auf der Platte — nur nicht mehr
|
||||
unter ihrer öffentlichen Adresse.
|
||||
</p>
|
||||
|
||||
<Nachfrage
|
||||
offen={fragt !== null}
|
||||
titel={fragt === 'alles' ? 'Papierkorb leeren?' : 'Endgültig löschen?'}
|
||||
bestaetigung="Endgültig löschen"
|
||||
wartet={laeuft}
|
||||
onNein={() => setFragt(null)}
|
||||
onJa={async () => {
|
||||
setLaeuft(true)
|
||||
await run(
|
||||
() =>
|
||||
api.papierkorbLeeren(
|
||||
fragt === 'alles' ? undefined : (fragt ?? []).map((e) => e.id),
|
||||
),
|
||||
(r) => `${r.geleert} endgültig entfernt.`,
|
||||
)
|
||||
setLaeuft(false)
|
||||
setFragt(null)
|
||||
setGewaehlt(new Set())
|
||||
void laden()
|
||||
}}
|
||||
text={
|
||||
<p className="flex items-start gap-2">
|
||||
<AlertTriangle size={16} className="mt-0.5 shrink-0 text-schlecht" />
|
||||
<span>
|
||||
{fragt === 'alles'
|
||||
? `Alle ${daten.n} Einträge werden von der Platte entfernt.`
|
||||
: `${(fragt as PapierkorbEintrag[])?.length} Einträge werden von der Platte entfernt.`}{' '}
|
||||
Danach hilft nur noch die Sicherung — und die ist bis zu 24 Stunden
|
||||
alt.
|
||||
</span>
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user