feat(resources): render anonymous volume names readably in the volume browser (#1429)

Anonymous Docker volumes carry a raw 64-character hex name, which is correct
data but unreadable in the volume browser crumb, sheet title, and table row.

Detect 64-hex names and show a short prefix (e.g. 079dfda49f2c…) in the table
cell and sheet title, with the full name available on hover and an "anonymous"
chip so the truncation is self-explanatory. The volume browser sheet adds a
band that keeps the full hash visible and copyable. Named volumes still display
in full. The name is passed verbatim to the API; only the rendered label changes.
This commit is contained in:
Anso
2026-06-24 19:05:40 -04:00
committed by GitHub
parent 2c70e11485
commit 401980ffa3
8 changed files with 232 additions and 32 deletions
+2 -1
View File
@@ -38,6 +38,7 @@ import { ReclaimHero } from './resources/ReclaimHero';
import { FootprintTreemap } from './resources/FootprintTreemap';
import { ImageDetailsSheet } from './resources/ImageDetailsSheet';
import { VolumeBrowserSheet } from './resources/VolumeBrowserSheet';
import { VolumeNameLabel } from './resources/VolumeNameLabel';
import { NetworkDetailSheet, type NetworkInspectData } from './resources/NetworkDetailSheet';
const NetworkTopologyView = lazy(() => import('./NetworkTopologyView'));
@@ -1021,7 +1022,7 @@ export default function ResourcesView({ headerActions }: ResourcesViewProps = {}
className="animate-in fade-in-0 duration-200 hover:bg-muted/30 transition-colors"
style={{ animationDelay: `${Math.min(i * 20, 200)}ms` }}
>
<TableCell className="font-mono text-xs max-w-[200px] truncate">{vol.Name}</TableCell>
<TableCell className="font-mono text-xs max-w-[200px]"><VolumeNameLabel name={vol.Name} showChip /></TableCell>
<TableCell><Badge variant="outline" className="text-[10px] h-5">{vol.Driver}</Badge></TableCell>
<TableCell className="hidden md:table-cell text-xs text-muted-foreground truncate max-w-[300px]">{vol.Mountpoint}</TableCell>
<TableCell>