mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-07 01:14:14 +00:00
feat(frontend): migrate resources, app store, and blueprint sheets to §9.11 chrome (#962)
Final PR of the System Sheet (§9.11) chrome rollout, stacked on PR 2.
Migrates the last five sheet consumers and extracts the inline network
detail sheet from ResourcesView into its own file.
Sheets migrated:
* VolumeBrowserSheet: crumb Resources > Volumes > {name}, Refresh tree
primary, footer audit-log notice. Uses the new SystemSheet noScroll
prop because the body is a 2-pane file browser that manages its own
scroll regions; each pane (file tree, file preview) wraps its scroll
region in ScrollArea per §10 Scrollbars.
* ImageDetailsSheet: crumb Resources > Images > {name}. Three sections
(Overview, Config, Layers) flush against hairlines. Removed the
icon-prefixed title and per-layer card wrapping (replaced with
divide-y dividers).
* NetworkDetailSheet: NEW file extracted from the inline 150-line
network sheet that lived inside ResourcesView.tsx. Crumb Resources >
Networks > {name}. Five sections (Overview, IPAM, Options, Connected,
Labels). Re-exports NetworkInspectData so ResourcesView can import
the type. ResourcesView now renders the extracted component and drops
its now-unused Sheet, ScrollArea, copyToClipboard, Copy, and Container
imports.
* AppStoreView template detail sheet: crumb App store > {template}.
Tabs Essentials | Advanced. Deploy lifted from SheetFooter into the
toolbar primary slot. The remote-target signal (was a Badge in the
header) collapses into the meta line as "→ {remoteName}".
* BlueprintDetail: the §9.11 reference implementation, intentionally
migrated last. Crumb Blueprints > {name}. The kebab dropdown
dissolves into individual toolbar actions: Apply now (primary), Edit
(secondary, when not in editMode), Enable/Disable (secondary), Delete
(destructive). Body has Description, Deployments, Compose sections.
Primitive enhancement:
* Added noScroll?: boolean to SystemSheet. When true, the body is
rendered as a flex container instead of being wrapped in ScrollArea.
Caller manages its own scroll regions and body padding.
Final state: frontend/src/components/ui/sheet.tsx is now imported only
by TopBar.tsx (mobile nav drawer, intentionally out of scope per the
plan) and SystemSheet itself. The §9.11 rollout is complete.
This commit is contained in:
Anso
@@ -2,11 +2,10 @@ import { useState, useEffect, useMemo } from 'react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from '@/components/ui/sheet';
|
||||
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
||||
import { Search, Rocket, Loader2, Info, ExternalLink, Star, ShieldCheck } from 'lucide-react';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -324,277 +323,260 @@ export function AppStoreView({ onDeploySuccess }: AppStoreViewProps) {
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
|
||||
<SheetContent className="w-full sm:max-w-md flex flex-col h-full" side="right">
|
||||
{selectedTemplate && (
|
||||
<div className="flex flex-col h-full">
|
||||
<SheetHeader className="mb-4 text-left">
|
||||
{activeNode?.type === 'remote' && (
|
||||
<div className="mb-2">
|
||||
<Badge variant="secondary" className="text-xs font-normal">
|
||||
Deploying to: {activeNode.name}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="w-16 h-16 rounded bg-muted/50 p-1 flex-shrink-0 flex items-center justify-center overflow-hidden border">
|
||||
{selectedTemplate.logo && !imgErrors[selectedTemplate.logo] ? (
|
||||
<img src={selectedTemplate.logo} alt={selectedTemplate.title} className="w-full h-full object-contain" onError={() => setImgErrors(prev => ({ ...prev, [selectedTemplate.logo!]: true }))} />
|
||||
) : (
|
||||
<Rocket className="w-8 h-8 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<SheetTitle className="text-xl truncate">{selectedTemplate.title}</SheetTitle>
|
||||
<div className="mt-1">
|
||||
<SheetDescription className={isDescExpanded ? '' : 'line-clamp-3 text-sm text-muted-foreground'}>
|
||||
{selectedTemplate.description}
|
||||
</SheetDescription>
|
||||
<span className="text-xs text-primary cursor-pointer hover:underline mt-1 inline-block" onClick={() => setIsDescExpanded(!isDescExpanded)}>
|
||||
{isDescExpanded ? 'Read less' : 'Read more'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{(selectedTemplate.architectures || selectedTemplate.stars !== undefined || selectedTemplate.github_url || selectedTemplate.docs_url) && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{selectedTemplate.architectures && selectedTemplate.architectures.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedTemplate.architectures.map(arch => (
|
||||
<Badge variant="outline" key={arch} className="text-[10px] px-1.5 py-0">
|
||||
{arch}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-muted-foreground mt-1">
|
||||
{selectedTemplate.stars !== undefined && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-3 h-3 fill-muted-foreground" />
|
||||
<span className="tabular-nums">{selectedTemplate.stars?.toLocaleString()}</span>
|
||||
</div>
|
||||
)}
|
||||
{selectedTemplate.github_url && (
|
||||
<a href={selectedTemplate.github_url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-foreground transition-colors">
|
||||
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
<span>Source</span>
|
||||
</a>
|
||||
)}
|
||||
{selectedTemplate.docs_url && (
|
||||
<a href={selectedTemplate.docs_url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-foreground transition-colors">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
<span>Docs</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<SystemSheet
|
||||
open={isSheetOpen}
|
||||
onOpenChange={setIsSheetOpen}
|
||||
crumb={['App store', selectedTemplate?.title ?? 'Template']}
|
||||
name={selectedTemplate?.title ?? 'Template'}
|
||||
meta={selectedTemplate
|
||||
? [
|
||||
selectedTemplate.architectures?.join(', '),
|
||||
selectedTemplate.stars !== undefined ? `★ ${selectedTemplate.stars.toLocaleString()}` : null,
|
||||
activeNode?.type === 'remote' ? `→ ${activeNode.name}` : null,
|
||||
].filter(Boolean).join(' · ')
|
||||
: ''}
|
||||
tabs={selectedTemplate ? [
|
||||
{ id: 'essentials', label: 'Essentials' },
|
||||
{ id: 'advanced', label: 'Advanced' },
|
||||
] : undefined}
|
||||
activeTab={sheetTab}
|
||||
onTabChange={(id) => setSheetTab(id as 'essentials' | 'advanced')}
|
||||
primaryAction={selectedTemplate ? {
|
||||
label: isDeploying ? 'Deploying…' : `Deploy ${selectedTemplate.title}`,
|
||||
icon: isDeploying ? Loader2 : Rocket,
|
||||
onClick: handleDeploy,
|
||||
disabled: isDeploying || !stackName.trim() || !can('stack:create'),
|
||||
} : undefined}
|
||||
footerContext={isDeploying ? 'This may take a few minutes for large images.' : undefined}
|
||||
size="md"
|
||||
>
|
||||
{selectedTemplate && (
|
||||
<>
|
||||
<SheetSection title="About">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-16 h-16 rounded bg-muted/50 p-1 flex-shrink-0 flex items-center justify-center overflow-hidden border">
|
||||
{selectedTemplate.logo && !imgErrors[selectedTemplate.logo] ? (
|
||||
<img src={selectedTemplate.logo} alt={selectedTemplate.title} className="w-full h-full object-contain" onError={() => setImgErrors(prev => ({ ...prev, [selectedTemplate.logo!]: true }))} />
|
||||
) : (
|
||||
<Rocket className="w-8 h-8 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</SheetHeader>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className={isDescExpanded ? 'text-sm text-stat-subtitle' : 'line-clamp-3 text-sm text-stat-subtitle'}>
|
||||
{selectedTemplate.description}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs text-primary cursor-pointer hover:underline mt-1 inline-block"
|
||||
onClick={() => setIsDescExpanded(!isDescExpanded)}
|
||||
>
|
||||
{isDescExpanded ? 'Read less' : 'Read more'}
|
||||
</button>
|
||||
|
||||
<Tabs value={sheetTab} onValueChange={(v) => setSheetTab(v as 'essentials' | 'advanced')} className="flex flex-col flex-1 min-h-0">
|
||||
<TabsList className="self-start mb-3">
|
||||
<TabsTrigger value="essentials">Essentials</TabsTrigger>
|
||||
<TabsTrigger value="advanced">Advanced</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="essentials" className="flex-1 min-h-0 mt-0">
|
||||
<ScrollArea className="h-full pr-4 -mx-4 px-4">
|
||||
<div className="space-y-4 pb-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="stackName" className="font-semibold">
|
||||
Stack Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="stackName"
|
||||
value={stackName}
|
||||
onChange={(e) => setStackName(e.target.value)}
|
||||
placeholder="e.g. my-app"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This determines the directory name and docker project name.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border border-border/60 bg-muted/20 px-3 py-2.5 text-xs text-stat-subtitle">
|
||||
Deploy with defaults: the template's recommended ports, volumes, and environment variables.
|
||||
Use the Advanced tab to customize.
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="advanced" className="flex-1 min-h-0 mt-0">
|
||||
<ScrollArea className="h-full pr-4 -mx-4 px-4">
|
||||
<div className="space-y-6 pb-4">
|
||||
{selectedTemplate.ports && selectedTemplate.ports.length > 0 && (
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-semibold">Ports (Host : Container)</h4>
|
||||
{selectedTemplate.ports.map((p, idx) => {
|
||||
const parts = p.split(':');
|
||||
if (parts.length < 2) return null;
|
||||
const hostPort = portVars[p] || '';
|
||||
const conflict = hostPort ? portsInUse[hostPort] : undefined;
|
||||
return (
|
||||
<div key={idx} className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={hostPort}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value.replace(/[^0-9]/g, '');
|
||||
setPortVars(prev => ({ ...prev, [p]: val }));
|
||||
}}
|
||||
className={cn('w-24 text-center font-mono', hostPort && !isValidPort(hostPort) && 'border-destructive')}
|
||||
/>
|
||||
{conflict ? (
|
||||
<CursorProvider>
|
||||
<CursorContainer className="inline-flex items-center gap-2">
|
||||
<span className="text-muted-foreground font-mono">: {parts[1]}</span>
|
||||
<span className="w-2 h-2 rounded-full bg-warning animate-pulse" />
|
||||
</CursorContainer>
|
||||
<Cursor>
|
||||
<div className="h-2 w-2 rounded-full bg-brand" />
|
||||
</Cursor>
|
||||
<CursorFollow side="bottom" sideOffset={4} align="center" transition={{ stiffness: 400, damping: 40, bounce: 0 }}>
|
||||
<div className="rounded-md border border-card-border bg-popover/95 backdrop-blur-[10px] backdrop-saturate-[1.15] px-2.5 py-1.5 shadow-md">
|
||||
<span className="font-mono tabular-nums text-xs text-stat-value">
|
||||
{conflict.stack !== null
|
||||
? <>Port {hostPort} used by <span className="text-brand">{conflict.stack}</span></>
|
||||
: <>Port {hostPort} used by an external app</>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</CursorFollow>
|
||||
</CursorProvider>
|
||||
) : (
|
||||
<span className="text-muted-foreground font-mono">: {parts[1]}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedTemplate.volumes && selectedTemplate.volumes.length > 0 && (
|
||||
<div className="space-y-4 pt-4 border-t">
|
||||
<h4 className="font-semibold">Volumes (Host : Container)</h4>
|
||||
{selectedTemplate.volumes.map((v, idx) => {
|
||||
const containerPath = v.container;
|
||||
if (!containerPath) return null;
|
||||
return (
|
||||
<div key={idx} className="space-y-1.5">
|
||||
<Label className="text-xs text-muted-foreground font-mono">Container: {containerPath}</Label>
|
||||
<Input
|
||||
value={volVars[containerPath] !== undefined ? volVars[containerPath] : ''}
|
||||
onChange={(e) => setVolVars(prev => ({ ...prev, [containerPath]: e.target.value }))}
|
||||
placeholder="/path/to/host/dir"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedTemplate.env && selectedTemplate.env.length > 0 && (
|
||||
<div className="space-y-4 pt-4 border-t">
|
||||
<h4 className="font-semibold">Environment Variables</h4>
|
||||
{selectedTemplate.env.map((e, idx) => (
|
||||
<div key={idx} className="space-y-1.5">
|
||||
<Label htmlFor={`env-${e.name}`} className="text-sm">
|
||||
{e.label || e.name}
|
||||
</Label>
|
||||
<Input
|
||||
id={`env-${e.name}`}
|
||||
value={envVars[e.name] !== undefined ? envVars[e.name] : ''}
|
||||
onChange={(ev) => setEnvVars(prev => ({ ...prev, [e.name]: ev.target.value }))}
|
||||
placeholder={e.default || `Enter value for ${e.name}`}
|
||||
/>
|
||||
<p className="text-[10px] text-muted-foreground font-mono">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
{(selectedTemplate.architectures || selectedTemplate.stars !== undefined || selectedTemplate.github_url || selectedTemplate.docs_url) && (
|
||||
<div className="mt-3 space-y-2">
|
||||
{selectedTemplate.architectures && selectedTemplate.architectures.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedTemplate.architectures.map(arch => (
|
||||
<Badge variant="outline" key={arch} className="text-[10px] px-1.5 py-0">
|
||||
{arch}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4 pt-4 border-t">
|
||||
<h4 className="font-semibold text-sm">Add Custom Variable</h4>
|
||||
{customEnvs.map((ce, idx) => (
|
||||
<div key={idx} className="flex gap-2">
|
||||
<Input value={ce.key} readOnly className="w-1/3 bg-muted font-mono text-xs" />
|
||||
<Input value={ce.value} readOnly className="flex-1 bg-muted font-mono text-xs" />
|
||||
<Button variant="ghost" size="icon" className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground" onClick={() => setCustomEnvs(prev => prev.filter((_, i) => i !== idx))}>-</Button>
|
||||
<div className="flex items-center gap-3 text-xs text-muted-foreground mt-1">
|
||||
{selectedTemplate.stars !== undefined && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-3 h-3 fill-muted-foreground" />
|
||||
<span className="tabular-nums">{selectedTemplate.stars?.toLocaleString()}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<Input placeholder="KEY" value={newEnvKey} onChange={e => setNewEnvKey(e.target.value)} className="w-1/3 font-mono text-xs" />
|
||||
<Input placeholder="VALUE" value={newEnvVal} onChange={e => setNewEnvVal(e.target.value)} className="flex-1 font-mono text-xs" />
|
||||
<Button variant="secondary" onClick={() => {
|
||||
if (newEnvKey.trim()) {
|
||||
if (selectedTemplate?.env?.find(e => e.name === newEnvKey.trim())) {
|
||||
toast.warning(`"${newEnvKey.trim()}" already exists in template defaults. The custom value will override it.`);
|
||||
}
|
||||
setCustomEnvs(prev => [...prev, { key: newEnvKey, value: newEnvVal }]);
|
||||
setNewEnvKey('');
|
||||
setNewEnvVal('');
|
||||
}
|
||||
}}>+</Button>
|
||||
</div>
|
||||
)}
|
||||
{selectedTemplate.github_url && (
|
||||
<a href={selectedTemplate.github_url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-foreground transition-colors">
|
||||
<svg className="w-3 h-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" /></svg>
|
||||
<span>Source</span>
|
||||
</a>
|
||||
)}
|
||||
{selectedTemplate.docs_url && (
|
||||
<a href={selectedTemplate.docs_url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-foreground transition-colors">
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
<span>Docs</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{trivyAvailable && (
|
||||
<div className="flex items-center gap-2 pt-4 border-t">
|
||||
<Checkbox
|
||||
id="auto-scan"
|
||||
checked={autoScan}
|
||||
onCheckedChange={(checked) => setAutoScan(!!checked)}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="auto-scan"
|
||||
className="text-sm text-muted-foreground cursor-pointer flex items-center gap-1.5"
|
||||
>
|
||||
<ShieldCheck className="w-3.5 h-3.5" strokeWidth={1.5} />
|
||||
Scan images for vulnerabilities after deploy
|
||||
</Label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<SheetFooter className="pt-4 mt-auto border-t sm:justify-start">
|
||||
<div className="flex flex-col w-full gap-3">
|
||||
<Button
|
||||
onClick={handleDeploy}
|
||||
disabled={isDeploying || !stackName.trim() || !can('stack:create')}
|
||||
className="w-full"
|
||||
size="lg"
|
||||
title={!can('stack:create') ? 'Permission required to deploy' : undefined}
|
||||
>
|
||||
{isDeploying ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 mr-2 animate-spin" strokeWidth={1.5} />
|
||||
Deploying Stack...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Rocket className="w-5 h-5 mr-2" strokeWidth={1.5} />
|
||||
Deploy {selectedTemplate.title}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{isDeploying && (
|
||||
<p className="text-center text-xs text-muted-foreground animate-pulse">
|
||||
This may take a few minutes for large images.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</SheetFooter>
|
||||
</div>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</SheetSection>
|
||||
|
||||
{sheetTab === 'essentials' && (
|
||||
<SheetSection title="Stack name">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="stackName" className="font-semibold">
|
||||
Stack Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="stackName"
|
||||
value={stackName}
|
||||
onChange={(e) => setStackName(e.target.value)}
|
||||
placeholder="e.g. my-app"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
This determines the directory name and docker project name.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 rounded-md border border-border/60 bg-muted/20 px-3 py-2.5 text-xs text-stat-subtitle">
|
||||
Deploy with defaults: the template's recommended ports, volumes, and environment variables.
|
||||
Use the Advanced tab to customize.
|
||||
</div>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
{sheetTab === 'advanced' && (
|
||||
<>
|
||||
{selectedTemplate.ports && selectedTemplate.ports.length > 0 && (
|
||||
<SheetSection title="Ports (Host : Container)">
|
||||
<div className="space-y-3">
|
||||
{selectedTemplate.ports.map((p, idx) => {
|
||||
const parts = p.split(':');
|
||||
if (parts.length < 2) return null;
|
||||
const hostPort = portVars[p] || '';
|
||||
const conflict = hostPort ? portsInUse[hostPort] : undefined;
|
||||
return (
|
||||
<div key={idx} className="flex items-center space-x-2">
|
||||
<Input
|
||||
value={hostPort}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value.replace(/[^0-9]/g, '');
|
||||
setPortVars(prev => ({ ...prev, [p]: val }));
|
||||
}}
|
||||
className={cn('w-24 text-center font-mono', hostPort && !isValidPort(hostPort) && 'border-destructive')}
|
||||
/>
|
||||
{conflict ? (
|
||||
<CursorProvider>
|
||||
<CursorContainer className="inline-flex items-center gap-2">
|
||||
<span className="text-muted-foreground font-mono">: {parts[1]}</span>
|
||||
<span className="w-2 h-2 rounded-full bg-warning animate-pulse" />
|
||||
</CursorContainer>
|
||||
<Cursor>
|
||||
<div className="h-2 w-2 rounded-full bg-brand" />
|
||||
</Cursor>
|
||||
<CursorFollow side="bottom" sideOffset={4} align="center" transition={{ stiffness: 400, damping: 40, bounce: 0 }}>
|
||||
<div className="rounded-md border border-card-border bg-popover/95 backdrop-blur-[10px] backdrop-saturate-[1.15] px-2.5 py-1.5 shadow-md">
|
||||
<span className="font-mono tabular-nums text-xs text-stat-value">
|
||||
{conflict.stack !== null
|
||||
? <>Port {hostPort} used by <span className="text-brand">{conflict.stack}</span></>
|
||||
: <>Port {hostPort} used by an external app</>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</CursorFollow>
|
||||
</CursorProvider>
|
||||
) : (
|
||||
<span className="text-muted-foreground font-mono">: {parts[1]}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
{selectedTemplate.volumes && selectedTemplate.volumes.length > 0 && (
|
||||
<SheetSection title="Volumes (Host : Container)">
|
||||
<div className="space-y-3">
|
||||
{selectedTemplate.volumes.map((v, idx) => {
|
||||
const containerPath = v.container;
|
||||
if (!containerPath) return null;
|
||||
return (
|
||||
<div key={idx} className="space-y-1.5">
|
||||
<Label className="text-xs text-muted-foreground font-mono">Container: {containerPath}</Label>
|
||||
<Input
|
||||
value={volVars[containerPath] !== undefined ? volVars[containerPath] : ''}
|
||||
onChange={(e) => setVolVars(prev => ({ ...prev, [containerPath]: e.target.value }))}
|
||||
placeholder="/path/to/host/dir"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
{selectedTemplate.env && selectedTemplate.env.length > 0 && (
|
||||
<SheetSection title="Environment variables">
|
||||
<div className="space-y-3">
|
||||
{selectedTemplate.env.map((e, idx) => (
|
||||
<div key={idx} className="space-y-1.5">
|
||||
<Label htmlFor={`env-${e.name}`} className="text-sm">
|
||||
{e.label || e.name}
|
||||
</Label>
|
||||
<Input
|
||||
id={`env-${e.name}`}
|
||||
value={envVars[e.name] !== undefined ? envVars[e.name] : ''}
|
||||
onChange={(ev) => setEnvVars(prev => ({ ...prev, [e.name]: ev.target.value }))}
|
||||
placeholder={e.default || `Enter value for ${e.name}`}
|
||||
/>
|
||||
<p className="text-[10px] text-muted-foreground font-mono">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
<SheetSection title="Custom variables">
|
||||
<div className="space-y-3">
|
||||
{customEnvs.map((ce, idx) => (
|
||||
<div key={idx} className="flex gap-2">
|
||||
<Input value={ce.key} readOnly className="w-1/3 bg-muted font-mono text-xs" />
|
||||
<Input value={ce.value} readOnly className="flex-1 bg-muted font-mono text-xs" />
|
||||
<Button variant="ghost" size="icon" className="text-destructive/60 hover:bg-destructive hover:text-destructive-foreground" onClick={() => setCustomEnvs(prev => prev.filter((_, i) => i !== idx))}>-</Button>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex gap-2">
|
||||
<Input placeholder="KEY" value={newEnvKey} onChange={e => setNewEnvKey(e.target.value)} className="w-1/3 font-mono text-xs" />
|
||||
<Input placeholder="VALUE" value={newEnvVal} onChange={e => setNewEnvVal(e.target.value)} className="flex-1 font-mono text-xs" />
|
||||
<Button variant="secondary" onClick={() => {
|
||||
if (newEnvKey.trim()) {
|
||||
if (selectedTemplate?.env?.find(e => e.name === newEnvKey.trim())) {
|
||||
toast.warning(`"${newEnvKey.trim()}" already exists in template defaults. The custom value will override it.`);
|
||||
}
|
||||
setCustomEnvs(prev => [...prev, { key: newEnvKey, value: newEnvVal }]);
|
||||
setNewEnvKey('');
|
||||
setNewEnvVal('');
|
||||
}
|
||||
}}>+</Button>
|
||||
</div>
|
||||
</div>
|
||||
</SheetSection>
|
||||
|
||||
{trivyAvailable && (
|
||||
<SheetSection title="Security">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="auto-scan"
|
||||
checked={autoScan}
|
||||
onCheckedChange={(checked) => setAutoScan(!!checked)}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="auto-scan"
|
||||
className="text-sm text-muted-foreground cursor-pointer flex items-center gap-1.5"
|
||||
>
|
||||
<ShieldCheck className="w-3.5 h-3.5" strokeWidth={1.5} />
|
||||
Scan images for vulnerabilities after deploy
|
||||
</Label>
|
||||
</div>
|
||||
</SheetSection>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SystemSheet>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Modal, ModalHeader, ModalBody, ModalFooter, ConfirmModal } from "@/components/ui/modal";
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Combobox } from "@/components/ui/combobox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -15,9 +14,8 @@ import { Label } from "@/components/ui/label";
|
||||
import { TogglePill } from "@/components/ui/toggle-pill";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { copyToClipboard } from '@/lib/clipboard';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { Trash2, HardDrive, Network, PackageMinus, MonitorX, MoreVertical, AlertTriangle, ShieldCheck, Plus, Eye, Copy, Container, Loader2, History, FolderOpen } from 'lucide-react';
|
||||
import { Trash2, HardDrive, Network, PackageMinus, MonitorX, MoreVertical, AlertTriangle, ShieldCheck, Plus, Eye, Loader2, History, FolderOpen } from 'lucide-react';
|
||||
import { CursorProvider, CursorContainer, Cursor, CursorFollow } from '@/components/animate-ui/primitives/animate/cursor';
|
||||
import { useTrivyStatus } from '@/hooks/useTrivyStatus';
|
||||
import { VulnerabilityScanSheet } from './VulnerabilityScanSheet';
|
||||
@@ -38,6 +36,7 @@ import { ReclaimHero } from './resources/ReclaimHero';
|
||||
import { FootprintTreemap } from './resources/FootprintTreemap';
|
||||
import { ImageDetailsSheet } from './resources/ImageDetailsSheet';
|
||||
import { VolumeBrowserSheet } from './resources/VolumeBrowserSheet';
|
||||
import { NetworkDetailSheet, type NetworkInspectData } from './resources/NetworkDetailSheet';
|
||||
import { TabLanding, type TabLandingEntry } from './resources/TabLanding';
|
||||
|
||||
const NetworkTopologyView = lazy(() => import('./NetworkTopologyView'));
|
||||
@@ -108,28 +107,7 @@ interface UnmanagedContainer {
|
||||
Image: string;
|
||||
}
|
||||
|
||||
interface NetworkInspectData {
|
||||
Id: string;
|
||||
Name: string;
|
||||
Created: string;
|
||||
Scope: string;
|
||||
Driver: string;
|
||||
Internal: boolean;
|
||||
Attachable: boolean;
|
||||
Labels: Record<string, string>;
|
||||
IPAM: {
|
||||
Driver: string;
|
||||
Config: Array<{ Subnet?: string; Gateway?: string; IPRange?: string }>;
|
||||
};
|
||||
Containers: Record<string, {
|
||||
Name: string;
|
||||
EndpointID: string;
|
||||
MacAddress: string;
|
||||
IPv4Address: string;
|
||||
IPv6Address: string;
|
||||
}>;
|
||||
Options: Record<string, string>;
|
||||
}
|
||||
// NetworkInspectData is re-exported from ./resources/NetworkDetailSheet
|
||||
|
||||
type ResourceFilter = 'all' | 'managed' | 'unmanaged';
|
||||
type PruneTarget = 'containers' | 'images' | 'networks' | 'volumes';
|
||||
@@ -1365,161 +1343,11 @@ export default function ResourcesView() {
|
||||
<VolumeBrowserSheet volumeName={browseVolume} onClose={() => setBrowseVolume(null)} />
|
||||
|
||||
|
||||
{/* Network Inspect Sheet */}
|
||||
<Sheet open={!!inspectNetwork} onOpenChange={open => !open && setInspectNetwork(null)}>
|
||||
<SheetContent className="sm:max-w-lg">
|
||||
<ScrollArea className="h-full">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-2">
|
||||
<Network className="w-4 h-4 text-muted-foreground" strokeWidth={1.5} />
|
||||
{inspectNetwork?.Name}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
{inspectNetwork && (
|
||||
<div className="space-y-6 mt-6 pb-6">
|
||||
{/* Overview */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Overview</h4>
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">ID</span>
|
||||
<p className="font-mono text-xs mt-0.5 flex items-center gap-1.5">
|
||||
{inspectNetwork.Id.substring(0, 12)}
|
||||
<button
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={async () => { try { await copyToClipboard(inspectNetwork.Id); toast.success('ID copied'); } catch { toast.error('Copy failed.'); } }}
|
||||
>
|
||||
<Copy className="w-3 h-3" strokeWidth={1.5} />
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Driver</span>
|
||||
<span className="text-xs mt-0.5 block"><Badge variant="outline" className="text-[10px] h-5">{inspectNetwork.Driver}</Badge></span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Scope</span>
|
||||
<span className="text-xs mt-0.5 block"><Badge variant="outline" className="text-[10px] h-5">{inspectNetwork.Scope}</Badge></span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Created</span>
|
||||
<p className="text-xs mt-0.5">{new Date(inspectNetwork.Created).toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Internal</span>
|
||||
<p className="text-xs mt-0.5">{inspectNetwork.Internal ? 'Yes' : 'No'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Attachable</span>
|
||||
<p className="text-xs mt-0.5">{inspectNetwork.Attachable ? 'Yes' : 'No'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* IPAM Config */}
|
||||
{inspectNetwork.IPAM?.Config?.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">IPAM Configuration</h4>
|
||||
<div className="space-y-2">
|
||||
{inspectNetwork.IPAM.Config.map((cfg, i) => (
|
||||
<div key={i} className="rounded-lg border border-card-border bg-card p-3 shadow-card-bevel space-y-1.5">
|
||||
{cfg.Subnet && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground">Subnet</span>
|
||||
<span className="font-mono text-xs tabular-nums">{cfg.Subnet}</span>
|
||||
</div>
|
||||
)}
|
||||
{cfg.Gateway && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground">Gateway</span>
|
||||
<span className="font-mono text-xs tabular-nums">{cfg.Gateway}</span>
|
||||
</div>
|
||||
)}
|
||||
{cfg.IPRange && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground">IP Range</span>
|
||||
<span className="font-mono text-xs tabular-nums">{cfg.IPRange}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Options */}
|
||||
{inspectNetwork.Options && Object.keys(inspectNetwork.Options).length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Options</h4>
|
||||
<div className="rounded-lg border border-card-border bg-card shadow-card-bevel overflow-hidden">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{Object.entries(inspectNetwork.Options).map(([key, val]) => (
|
||||
<TableRow key={key} className="hover:bg-muted/30">
|
||||
<TableCell className="font-mono text-xs py-1.5 text-muted-foreground">{key}</TableCell>
|
||||
<TableCell className="font-mono text-xs py-1.5 text-right">{val}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Connected Containers */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
|
||||
Connected Containers ({Object.keys(inspectNetwork.Containers || {}).length})
|
||||
</h4>
|
||||
{Object.keys(inspectNetwork.Containers || {}).length === 0 ? (
|
||||
<p className="text-xs text-muted-foreground py-4 text-center">No containers connected to this network.</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{Object.entries(inspectNetwork.Containers).map(([id, container]) => (
|
||||
<div key={id} className="rounded-lg border border-card-border border-t-card-border-top bg-card p-3 shadow-card-bevel space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Container className="w-3.5 h-3.5 text-muted-foreground" strokeWidth={1.5} />
|
||||
<span className="text-sm font-medium truncate">{container.Name}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 pl-5.5">
|
||||
<div>
|
||||
<span className="text-[10px] text-muted-foreground">IPv4</span>
|
||||
<p className="font-mono text-xs tabular-nums">{container.IPv4Address || 'N/A'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] text-muted-foreground">MAC</span>
|
||||
<p className="font-mono text-xs tabular-nums">{container.MacAddress || 'N/A'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
{inspectNetwork.Labels && Object.keys(inspectNetwork.Labels).length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Labels</h4>
|
||||
<div className="rounded-lg border border-card-border bg-card shadow-card-bevel overflow-hidden">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{Object.entries(inspectNetwork.Labels).map(([key, val]) => (
|
||||
<TableRow key={key} className="hover:bg-muted/30">
|
||||
<TableCell className="font-mono text-xs py-1.5 text-muted-foreground">{key}</TableCell>
|
||||
<TableCell className="font-mono text-xs py-1.5 text-right">{val}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
{/* Network detail sheet */}
|
||||
<NetworkDetailSheet
|
||||
network={inspectNetwork}
|
||||
onClose={() => setInspectNetwork(null)}
|
||||
/>
|
||||
|
||||
<VulnerabilityScanSheet
|
||||
scanId={inspectScanId}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { ChevronLeft, MoreHorizontal, Pencil, Play, Trash2 } from 'lucide-react';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||
import { Pencil, Play, Power, Trash2 } from 'lucide-react';
|
||||
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
|
||||
import { Modal, ModalDestructiveHeader, ModalBody, ModalFooter } from '@/components/ui/modal';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import {
|
||||
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import {
|
||||
type BlueprintSummary,
|
||||
@@ -199,70 +196,63 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
|
||||
setStateReviewTarget({ nodeId, nodeName: node.name });
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent side="right" className="w-full sm:max-w-2xl flex flex-col gap-0 overflow-y-auto p-0">
|
||||
<SheetHeader className="sticky top-0 z-10 bg-popover/95 backdrop-blur-md border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<Button variant="ghost" size="sm" onClick={() => onOpenChange(false)} className="gap-1.5 -ml-2">
|
||||
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
Back
|
||||
</Button>
|
||||
{blueprint && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Button size="sm" onClick={handleApply} disabled={submitting || !blueprint.enabled} className="gap-1.5">
|
||||
<Play className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
Apply now
|
||||
</Button>
|
||||
{canEdit && !editMode && (
|
||||
<Button size="sm" variant="outline" onClick={() => setEditMode(true)} className="gap-1.5">
|
||||
<Pencil className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
Edit
|
||||
</Button>
|
||||
)}
|
||||
{canEdit && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button size="icon" variant="ghost" className="h-8 w-8" disabled={submitting}>
|
||||
<MoreHorizontal className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={handleToggleEnabled} disabled={submitting}>
|
||||
{blueprint.enabled ? 'Disable reconciler' : 'Enable reconciler'}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => setDeleteOpen(true)} className="text-destructive">
|
||||
<Trash2 className="h-3.5 w-3.5 mr-2" strokeWidth={1.5} />
|
||||
Delete blueprint
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-icon">
|
||||
Blueprint
|
||||
</span>
|
||||
<SheetTitle className="font-serif italic text-2xl tracking-[-0.01em] text-stat-value">
|
||||
{blueprint?.name ?? <Skeleton className="h-7 w-40" />}
|
||||
</SheetTitle>
|
||||
{blueprint?.description && (
|
||||
<p className="text-xs text-stat-subtitle">{blueprint.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</SheetHeader>
|
||||
const meta = blueprint
|
||||
? `${describeSelector(blueprint.selector)} · ${blueprint.drift_mode} · rev ${blueprint.revision}`
|
||||
: (loading ? 'Loading…' : '');
|
||||
|
||||
<div className="px-6 py-5 space-y-5">
|
||||
{loading || !blueprint || !summary ? (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-12 w-full" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-40 w-full" />
|
||||
</div>
|
||||
) : editMode ? (
|
||||
const footerContext = blueprint
|
||||
? `Updated ${formatTimeAgo(blueprint.updated_at)}${blueprint.enabled ? '' : ' · reconciler disabled'}`
|
||||
: undefined;
|
||||
|
||||
const secondaryActions = blueprint && canEdit
|
||||
? [
|
||||
...(!editMode ? [{
|
||||
label: 'Edit',
|
||||
icon: Pencil,
|
||||
onClick: () => setEditMode(true),
|
||||
disabled: submitting,
|
||||
}] : []),
|
||||
{
|
||||
label: blueprint.enabled ? 'Disable' : 'Enable',
|
||||
icon: Power,
|
||||
onClick: handleToggleEnabled,
|
||||
disabled: submitting,
|
||||
},
|
||||
]
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<SystemSheet
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
crumb={['Blueprints', blueprint?.name ?? '…']}
|
||||
name={blueprint?.name ?? <Skeleton className="h-7 w-40 inline-block" />}
|
||||
meta={meta}
|
||||
primaryAction={blueprint ? {
|
||||
label: 'Apply now',
|
||||
icon: Play,
|
||||
onClick: handleApply,
|
||||
disabled: submitting || !blueprint.enabled || editMode,
|
||||
} : undefined}
|
||||
secondaryActions={secondaryActions}
|
||||
destructiveAction={blueprint && canEdit ? {
|
||||
label: 'Delete',
|
||||
icon: Trash2,
|
||||
onClick: () => setDeleteOpen(true),
|
||||
disabled: submitting || editMode,
|
||||
} : undefined}
|
||||
footerContext={footerContext}
|
||||
size="lg"
|
||||
>
|
||||
{loading || !blueprint || !summary ? (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-12 w-full" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-40 w-full" />
|
||||
</div>
|
||||
) : editMode ? (
|
||||
<SheetSection title="Edit blueprint" hideHeader>
|
||||
<BlueprintEditor
|
||||
mode="edit"
|
||||
initial={blueprint}
|
||||
@@ -271,15 +261,16 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
|
||||
onSubmit={handleSaveEdit}
|
||||
submitting={submitting}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
|
||||
<Stat label="Selector" value={describeSelector(blueprint.selector)} />
|
||||
<Stat label="Drift" value={blueprint.drift_mode} />
|
||||
<Stat label="Revision" value={String(blueprint.revision)} />
|
||||
<Stat label="Last updated" value={formatTimeAgo(blueprint.updated_at)} />
|
||||
</div>
|
||||
</SheetSection>
|
||||
) : (
|
||||
<>
|
||||
{blueprint.description && (
|
||||
<SheetSection title="Description" hideHeader>
|
||||
<p className="text-xs text-stat-subtitle">{blueprint.description}</p>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
<SheetSection title="Deployments">
|
||||
<BlueprintDeploymentTable
|
||||
deployments={summary.deployments}
|
||||
classification={blueprint.classification}
|
||||
@@ -289,20 +280,23 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
|
||||
onAcceptStateReview={openAcceptStateReview}
|
||||
onRetry={handleRetryRow}
|
||||
/>
|
||||
</SheetSection>
|
||||
|
||||
<details className="rounded-lg border border-card-border bg-card">
|
||||
<summary className="cursor-pointer px-3 py-2 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-icon hover:text-stat-value">
|
||||
Compose
|
||||
<SheetSection title="Compose">
|
||||
<details>
|
||||
<summary className="cursor-pointer font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle hover:text-stat-value">
|
||||
Show compose source
|
||||
</summary>
|
||||
<pre className="px-3 pb-3 font-mono text-[11px] text-stat-value overflow-x-auto whitespace-pre-wrap">
|
||||
<pre className="mt-2 font-mono text-[11px] text-stat-value overflow-x-auto whitespace-pre-wrap">
|
||||
{blueprint.compose_content}
|
||||
</pre>
|
||||
</details>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</SheetSection>
|
||||
</>
|
||||
)}
|
||||
</SystemSheet>
|
||||
|
||||
{evictTarget && blueprint && (
|
||||
{evictTarget && blueprint && (
|
||||
<EvictionDialog
|
||||
open={!!evictTarget}
|
||||
onOpenChange={(o) => { if (!o) setEvictTarget(null); }}
|
||||
@@ -366,16 +360,6 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="space-y-0.5">
|
||||
<span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-icon">{label}</span>
|
||||
<p className="font-mono text-sm tabular-nums tracking-tight text-stat-value truncate">{value}</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { formatBytes } from '@/lib/utils';
|
||||
import { copyToClipboard } from '@/lib/clipboard';
|
||||
import { Image as ImageIcon, Copy } from 'lucide-react';
|
||||
import { Copy } from 'lucide-react';
|
||||
|
||||
interface ImageInspect {
|
||||
Id: string;
|
||||
@@ -105,150 +104,147 @@ export function ImageDetailsSheet({ imageId, onClose }: ImageDetailsSheetProps)
|
||||
const history = data?.history ?? [];
|
||||
const totalLayers = history.length;
|
||||
|
||||
const name = inspect?.RepoTags?.[0] || (inspect ? shortDigest(inspect.Id) : 'Image details');
|
||||
const meta = inspect
|
||||
? `${formatBytes(inspect.Size)} · ${inspect.Architecture ?? '?'}/${inspect.Os ?? '?'} · ${totalLayers} layers`
|
||||
: (loading ? 'Loading…' : '');
|
||||
|
||||
const footerContext = inspect?.Created
|
||||
? `Created ${formatRelativeAge(new Date(inspect.Created).getTime() / 1000)}`
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<Sheet open={!!imageId} onOpenChange={(open) => !open && onClose()}>
|
||||
<SheetContent className="sm:max-w-lg">
|
||||
<ScrollArea className="h-full">
|
||||
<SheetHeader>
|
||||
<SheetTitle className="flex items-center gap-2">
|
||||
<ImageIcon className="w-4 h-4 text-muted-foreground" strokeWidth={1.5} />
|
||||
{inspect?.RepoTags?.[0] || (inspect ? shortDigest(inspect.Id) : 'Image details')}
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<SystemSheet
|
||||
open={!!imageId}
|
||||
onOpenChange={(open) => !open && onClose()}
|
||||
crumb={['Resources', 'Images', name]}
|
||||
name={name}
|
||||
meta={meta}
|
||||
footerContext={footerContext}
|
||||
size="md"
|
||||
>
|
||||
{loading && (
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="h-5 w-1/2" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-3/4" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="space-y-3 mt-6">
|
||||
<Skeleton className="h-5 w-1/2" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-3/4" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && inspect && (
|
||||
<div className="space-y-6 mt-6 pb-6">
|
||||
<Section title="Overview">
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<Field label="ID">
|
||||
<p className="font-mono text-xs mt-0.5 flex items-center gap-1.5">
|
||||
{shortDigest(inspect.Id)}
|
||||
<button
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={async () => {
|
||||
try { await copyToClipboard(inspect.Id); toast.success('ID copied'); }
|
||||
catch { toast.error('Copy failed.'); }
|
||||
}}
|
||||
aria-label="Copy image ID"
|
||||
>
|
||||
<Copy className="w-3 h-3" strokeWidth={1.5} />
|
||||
</button>
|
||||
</p>
|
||||
</Field>
|
||||
<Field label="Size">
|
||||
<p className="font-mono text-xs mt-0.5 tabular-nums">{formatBytes(inspect.Size)}</p>
|
||||
</Field>
|
||||
<Field label="Created">
|
||||
<p className="text-xs mt-0.5" title={new Date(inspect.Created).toLocaleString()}>
|
||||
{new Date(inspect.Created).toLocaleDateString()}
|
||||
</p>
|
||||
</Field>
|
||||
<Field label="Arch / OS">
|
||||
<p className="text-xs mt-0.5">
|
||||
<Badge variant="outline" className="text-[10px] h-5">{inspect.Architecture ?? 'unknown'} / {inspect.Os ?? 'unknown'}</Badge>
|
||||
</p>
|
||||
</Field>
|
||||
{inspect.Author && (
|
||||
<Field label="Author" span={2}>
|
||||
<p className="text-xs mt-0.5">{inspect.Author}</p>
|
||||
</Field>
|
||||
)}
|
||||
{inspect.RepoTags && inspect.RepoTags.length > 0 && (
|
||||
<Field label="Tags" span={2}>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{inspect.RepoTags.map((t) => (
|
||||
<Badge key={t} variant="outline" className="text-[10px] h-5 font-mono">{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{inspect.Config && (
|
||||
<Section title="Config">
|
||||
<div className="space-y-2 text-sm">
|
||||
<ConfigRow label="Cmd" value={inspect.Config.Cmd?.join(' ')} />
|
||||
<ConfigRow label="Entrypoint" value={inspect.Config.Entrypoint?.join(' ')} />
|
||||
<ConfigRow label="WorkingDir" value={inspect.Config.WorkingDir} />
|
||||
<ConfigRow label="User" value={inspect.Config.User} />
|
||||
<ConfigRow
|
||||
label="Ports"
|
||||
value={
|
||||
inspect.Config.ExposedPorts
|
||||
? Object.keys(inspect.Config.ExposedPorts).join(', ')
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
{inspect.Config.Env && inspect.Config.Env.length > 0 && (
|
||||
<CollapsibleList label="Env" count={inspect.Config.Env.length} items={inspect.Config.Env} />
|
||||
)}
|
||||
{inspect.Config.Labels && Object.keys(inspect.Config.Labels).length > 0 && (
|
||||
<CollapsibleList
|
||||
label="Labels"
|
||||
count={Object.keys(inspect.Config.Labels).length}
|
||||
items={Object.entries(inspect.Config.Labels).map(([k, v]) => `${k}=${v}`)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
{!loading && inspect && (
|
||||
<>
|
||||
<SheetSection title="Overview">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
|
||||
<Field label="ID">
|
||||
<p className="font-mono text-xs mt-0.5 flex items-center gap-1.5">
|
||||
{shortDigest(inspect.Id)}
|
||||
<button
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={async () => {
|
||||
try { await copyToClipboard(inspect.Id); toast.success('ID copied'); }
|
||||
catch { toast.error('Copy failed.'); }
|
||||
}}
|
||||
aria-label="Copy image ID"
|
||||
>
|
||||
<Copy className="w-3 h-3" strokeWidth={1.5} />
|
||||
</button>
|
||||
</p>
|
||||
</Field>
|
||||
<Field label="Size">
|
||||
<p className="font-mono text-xs mt-0.5 tabular-nums">{formatBytes(inspect.Size)}</p>
|
||||
</Field>
|
||||
<Field label="Created">
|
||||
<p className="text-xs mt-0.5" title={new Date(inspect.Created).toLocaleString()}>
|
||||
{new Date(inspect.Created).toLocaleDateString()}
|
||||
</p>
|
||||
</Field>
|
||||
<Field label="Arch / OS">
|
||||
<p className="text-xs mt-0.5">
|
||||
<Badge variant="outline" className="text-[10px] h-5">{inspect.Architecture ?? 'unknown'} / {inspect.Os ?? 'unknown'}</Badge>
|
||||
</p>
|
||||
</Field>
|
||||
{inspect.Author && (
|
||||
<Field label="Author" span={2}>
|
||||
<p className="text-xs mt-0.5">{inspect.Author}</p>
|
||||
</Field>
|
||||
)}
|
||||
{inspect.RepoTags && inspect.RepoTags.length > 0 && (
|
||||
<Field label="Tags" span={2}>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{inspect.RepoTags.map((t) => (
|
||||
<Badge key={t} variant="outline" className="text-[10px] h-5 font-mono">{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
<Section title={`Layers (${totalLayers})`}>
|
||||
{totalLayers === 0 ? (
|
||||
<p className="text-xs text-muted-foreground italic">No layer history available.</p>
|
||||
) : (
|
||||
<ol className="space-y-1.5">
|
||||
{history.map((h, idx) => {
|
||||
const empty = h.Size === 0;
|
||||
return (
|
||||
<li
|
||||
key={`${h.Id}-${idx}`}
|
||||
className={`rounded-md border border-card-border bg-card px-3 py-2 shadow-card-bevel ${empty ? 'opacity-60' : ''}`}
|
||||
>
|
||||
<div className="flex items-baseline justify-between gap-3 text-[11px] text-muted-foreground tabular-nums">
|
||||
<span>#{totalLayers - idx}</span>
|
||||
<span className="font-mono">{formatBytes(h.Size)}</span>
|
||||
<span>{formatRelativeAge(h.Created)}</span>
|
||||
</div>
|
||||
<p
|
||||
className="font-mono text-[11px] mt-1 break-all"
|
||||
title={h.CreatedBy}
|
||||
>
|
||||
{h.CreatedBy || '(no command)'}
|
||||
</p>
|
||||
{h.Comment && (
|
||||
<p className="text-[11px] text-muted-foreground italic mt-0.5">{h.Comment}</p>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
</Section>
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
</SheetSection>
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{title}</h4>
|
||||
{children}
|
||||
</div>
|
||||
{inspect.Config && (
|
||||
<SheetSection title="Config">
|
||||
<div className="space-y-2 text-sm">
|
||||
<ConfigRow label="Cmd" value={inspect.Config.Cmd?.join(' ')} />
|
||||
<ConfigRow label="Entrypoint" value={inspect.Config.Entrypoint?.join(' ')} />
|
||||
<ConfigRow label="WorkingDir" value={inspect.Config.WorkingDir} />
|
||||
<ConfigRow label="User" value={inspect.Config.User} />
|
||||
<ConfigRow
|
||||
label="Ports"
|
||||
value={
|
||||
inspect.Config.ExposedPorts
|
||||
? Object.keys(inspect.Config.ExposedPorts).join(', ')
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
{inspect.Config.Env && inspect.Config.Env.length > 0 && (
|
||||
<CollapsibleList label="Env" count={inspect.Config.Env.length} items={inspect.Config.Env} />
|
||||
)}
|
||||
{inspect.Config.Labels && Object.keys(inspect.Config.Labels).length > 0 && (
|
||||
<CollapsibleList
|
||||
label="Labels"
|
||||
count={Object.keys(inspect.Config.Labels).length}
|
||||
items={Object.entries(inspect.Config.Labels).map(([k, v]) => `${k}=${v}`)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
<SheetSection title={`Layers · ${totalLayers}`}>
|
||||
{totalLayers === 0 ? (
|
||||
<p className="text-xs text-muted-foreground italic">No layer history available.</p>
|
||||
) : (
|
||||
<ol className="divide-y divide-card-border/40">
|
||||
{history.map((h, idx) => {
|
||||
const empty = h.Size === 0;
|
||||
return (
|
||||
<li
|
||||
key={`${h.Id}-${idx}`}
|
||||
className={`py-2 ${empty ? 'opacity-60' : ''}`}
|
||||
>
|
||||
<div className="flex items-baseline justify-between gap-3 text-[11px] text-muted-foreground tabular-nums">
|
||||
<span>#{totalLayers - idx}</span>
|
||||
<span className="font-mono">{formatBytes(h.Size)}</span>
|
||||
<span>{formatRelativeAge(h.Created)}</span>
|
||||
</div>
|
||||
<p
|
||||
className="font-mono text-[11px] mt-1 break-all"
|
||||
title={h.CreatedBy}
|
||||
>
|
||||
{h.CreatedBy || '(no command)'}
|
||||
</p>
|
||||
{h.Comment && (
|
||||
<p className="text-[11px] text-muted-foreground italic mt-0.5">{h.Comment}</p>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
</SheetSection>
|
||||
</>
|
||||
)}
|
||||
</SystemSheet>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,193 @@
|
||||
import { SystemSheet, SheetSection } from '@/components/ui/system-sheet';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { copyToClipboard } from '@/lib/clipboard';
|
||||
import { Container, Copy } from 'lucide-react';
|
||||
|
||||
export interface NetworkInspectData {
|
||||
Id: string;
|
||||
Name: string;
|
||||
Created: string;
|
||||
Scope: string;
|
||||
Driver: string;
|
||||
Internal: boolean;
|
||||
Attachable: boolean;
|
||||
Labels: Record<string, string>;
|
||||
IPAM: {
|
||||
Driver: string;
|
||||
Config: Array<{ Subnet?: string; Gateway?: string; IPRange?: string }>;
|
||||
};
|
||||
Containers: Record<string, {
|
||||
Name: string;
|
||||
EndpointID: string;
|
||||
MacAddress: string;
|
||||
IPv4Address: string;
|
||||
IPv6Address: string;
|
||||
}>;
|
||||
Options: Record<string, string>;
|
||||
}
|
||||
|
||||
interface NetworkDetailSheetProps {
|
||||
network: NetworkInspectData | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function NetworkDetailSheet({ network, onClose }: NetworkDetailSheetProps) {
|
||||
const containerCount = network ? Object.keys(network.Containers || {}).length : 0;
|
||||
const subnet = network?.IPAM?.Config?.[0]?.Subnet;
|
||||
const meta = network
|
||||
? `${network.Driver} · ${network.Scope}${subnet ? ` · ${subnet}` : ''} · ${containerCount} container${containerCount === 1 ? '' : 's'}`
|
||||
: '';
|
||||
|
||||
const footerContext = network?.Created
|
||||
? `Created ${new Date(network.Created).toLocaleString()}`
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<SystemSheet
|
||||
open={!!network}
|
||||
onOpenChange={(open) => { if (!open) onClose(); }}
|
||||
crumb={['Resources', 'Networks', network?.Name ?? '—']}
|
||||
name={network?.Name ?? 'Network'}
|
||||
meta={meta}
|
||||
footerContext={footerContext}
|
||||
size="md"
|
||||
>
|
||||
{network && (
|
||||
<>
|
||||
<SheetSection title="Overview">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">ID</span>
|
||||
<p className="font-mono text-xs mt-0.5 flex items-center gap-1.5">
|
||||
{network.Id.substring(0, 12)}
|
||||
<button
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={async () => {
|
||||
try { await copyToClipboard(network.Id); toast.success('ID copied'); }
|
||||
catch { toast.error('Copy failed.'); }
|
||||
}}
|
||||
aria-label="Copy network ID"
|
||||
>
|
||||
<Copy className="w-3 h-3" strokeWidth={1.5} />
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Driver</span>
|
||||
<span className="text-xs mt-0.5 block">
|
||||
<Badge variant="outline" className="text-[10px] h-5">{network.Driver}</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Scope</span>
|
||||
<span className="text-xs mt-0.5 block">
|
||||
<Badge variant="outline" className="text-[10px] h-5">{network.Scope}</Badge>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Created</span>
|
||||
<p className="text-xs mt-0.5">{new Date(network.Created).toLocaleString()}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Internal</span>
|
||||
<p className="text-xs mt-0.5">{network.Internal ? 'Yes' : 'No'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs text-muted-foreground">Attachable</span>
|
||||
<p className="text-xs mt-0.5">{network.Attachable ? 'Yes' : 'No'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</SheetSection>
|
||||
|
||||
{network.IPAM?.Config?.length > 0 && (
|
||||
<SheetSection title="IPAM configuration">
|
||||
<div className="divide-y divide-card-border/40">
|
||||
{network.IPAM.Config.map((cfg, i) => (
|
||||
<div key={i} className="py-2 space-y-1.5">
|
||||
{cfg.Subnet && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground">Subnet</span>
|
||||
<span className="font-mono text-xs tabular-nums">{cfg.Subnet}</span>
|
||||
</div>
|
||||
)}
|
||||
{cfg.Gateway && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground">Gateway</span>
|
||||
<span className="font-mono text-xs tabular-nums">{cfg.Gateway}</span>
|
||||
</div>
|
||||
)}
|
||||
{cfg.IPRange && (
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs text-muted-foreground">IP Range</span>
|
||||
<span className="font-mono text-xs tabular-nums">{cfg.IPRange}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
{network.Options && Object.keys(network.Options).length > 0 && (
|
||||
<SheetSection title="Options">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{Object.entries(network.Options).map(([key, val]) => (
|
||||
<TableRow key={key} className="hover:bg-muted/30">
|
||||
<TableCell className="font-mono text-xs py-1.5 text-muted-foreground">{key}</TableCell>
|
||||
<TableCell className="font-mono text-xs py-1.5 text-right">{val}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</SheetSection>
|
||||
)}
|
||||
|
||||
<SheetSection title={`Connected · ${containerCount} container${containerCount === 1 ? '' : 's'}`}>
|
||||
{containerCount === 0 ? (
|
||||
<p className="text-xs text-muted-foreground py-4 text-center">No containers connected to this network.</p>
|
||||
) : (
|
||||
<div className="divide-y divide-card-border/40">
|
||||
{Object.entries(network.Containers).map(([id, c]) => (
|
||||
<div key={id} className="py-2 space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Container className="w-3.5 h-3.5 text-muted-foreground" strokeWidth={1.5} />
|
||||
<span className="text-sm font-medium truncate">{c.Name}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 pl-5">
|
||||
<div>
|
||||
<span className="text-[10px] text-muted-foreground">IPv4</span>
|
||||
<p className="font-mono text-xs tabular-nums">{c.IPv4Address || 'N/A'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] text-muted-foreground">MAC</span>
|
||||
<p className="font-mono text-xs tabular-nums">{c.MacAddress || 'N/A'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</SheetSection>
|
||||
|
||||
{network.Labels && Object.keys(network.Labels).length > 0 && (
|
||||
<SheetSection title="Labels">
|
||||
<Table>
|
||||
<TableBody>
|
||||
{Object.entries(network.Labels).map(([key, val]) => (
|
||||
<TableRow key={key} className="hover:bg-muted/30">
|
||||
<TableCell className="font-mono text-xs py-1.5 text-muted-foreground">{key}</TableCell>
|
||||
<TableCell className="font-mono text-xs py-1.5 text-right">{val}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</SheetSection>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</SystemSheet>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { HardDrive, RefreshCw } from 'lucide-react';
|
||||
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
||||
import { RefreshCw } from 'lucide-react';
|
||||
import { SystemSheet } from '@/components/ui/system-sheet';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { FileTree } from '@/components/files/FileTree';
|
||||
import type { FileEntry } from '@/lib/stackFilesApi';
|
||||
@@ -66,65 +66,58 @@ export function VolumeBrowserSheet({ volumeName, onClose }: VolumeBrowserSheetPr
|
||||
[volumeName]
|
||||
);
|
||||
|
||||
const meta = selectedPath || 'No file selected';
|
||||
|
||||
return (
|
||||
<Sheet open={!!volumeName} onOpenChange={handleClose}>
|
||||
<SheetContent className="sm:max-w-3xl">
|
||||
<SheetHeader className="pr-10">
|
||||
<SheetTitle className="flex items-center gap-2 min-w-0">
|
||||
<HardDrive className="w-4 h-4 text-muted-foreground shrink-0" strokeWidth={1.5} />
|
||||
<span className="font-mono text-sm truncate">{volumeName}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 ml-auto shrink-0"
|
||||
onClick={() => setRefreshKey((k) => k + 1)}
|
||||
title="Refresh tree"
|
||||
aria-label="Refresh tree"
|
||||
>
|
||||
<RefreshCw className="w-3.5 h-3.5" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
{volumeName && (
|
||||
<div className="grid grid-cols-[260px_1fr] gap-3 mt-4 h-[calc(100vh-180px)]">
|
||||
<div className="rounded-md border border-card-border bg-card overflow-hidden">
|
||||
<FileTree
|
||||
key={`${volumeName}:${refreshKey}`}
|
||||
sourceKey={volumeName}
|
||||
loadDir={loadDir}
|
||||
refreshKey={refreshKey}
|
||||
selectedPath={selectedPath}
|
||||
onSelectFile={handleSelectFile}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border border-card-border bg-card overflow-hidden flex flex-col">
|
||||
{!selectedPath && (
|
||||
<div className="flex-1 flex items-center justify-center p-6 text-xs text-muted-foreground italic">
|
||||
Select a file to preview.
|
||||
</div>
|
||||
)}
|
||||
{selectedPath && fileLoading && (
|
||||
<div className="p-3 space-y-2">
|
||||
<Skeleton className="h-4 w-1/3" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
</div>
|
||||
)}
|
||||
{selectedPath && !fileLoading && fileResult && (
|
||||
<FileResultPanel path={selectedPath} result={fileResult} />
|
||||
)}
|
||||
</div>
|
||||
<SystemSheet
|
||||
open={!!volumeName}
|
||||
onOpenChange={handleClose}
|
||||
crumb={['Resources', 'Volumes', volumeName ?? '—']}
|
||||
name={volumeName ?? 'Volume'}
|
||||
meta={meta}
|
||||
primaryAction={{
|
||||
label: 'Refresh tree',
|
||||
icon: RefreshCw,
|
||||
onClick: () => setRefreshKey((k) => k + 1),
|
||||
}}
|
||||
footerContext="File reads are recorded in the audit log."
|
||||
size="lg"
|
||||
noScroll
|
||||
>
|
||||
{volumeName && (
|
||||
<div className="grid grid-cols-[260px_1fr] gap-3 px-6 py-5 flex-1 min-h-0">
|
||||
<div className="rounded-md border border-card-border bg-card overflow-hidden">
|
||||
<FileTree
|
||||
key={`${volumeName}:${refreshKey}`}
|
||||
sourceKey={volumeName}
|
||||
loadDir={loadDir}
|
||||
refreshKey={refreshKey}
|
||||
selectedPath={selectedPath}
|
||||
onSelectFile={handleSelectFile}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-3 text-[11px] text-muted-foreground">
|
||||
File reads are recorded in the audit log.
|
||||
</p>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<div className="rounded-md border border-card-border bg-card overflow-hidden flex flex-col">
|
||||
{!selectedPath && (
|
||||
<div className="flex-1 flex items-center justify-center p-6 text-xs text-muted-foreground italic">
|
||||
Select a file to preview.
|
||||
</div>
|
||||
)}
|
||||
{selectedPath && fileLoading && (
|
||||
<div className="p-3 space-y-2">
|
||||
<Skeleton className="h-4 w-1/3" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-full" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
</div>
|
||||
)}
|
||||
{selectedPath && !fileLoading && fileResult && (
|
||||
<FileResultPanel path={selectedPath} result={fileResult} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</SystemSheet>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -143,9 +136,11 @@ function FileResultPanel({ path, result }: { path: string; result: VolumeFileRes
|
||||
Showing first {formatBytes(5 * 1024 * 1024)}. Larger files cannot be downloaded from this view.
|
||||
</div>
|
||||
)}
|
||||
<pre className="flex-1 overflow-auto p-3 font-mono text-[11px] whitespace-pre-wrap break-all leading-relaxed">
|
||||
{decoded}
|
||||
</pre>
|
||||
<ScrollArea className="flex-1">
|
||||
<pre className="p-3 font-mono text-[11px] whitespace-pre-wrap break-all leading-relaxed">
|
||||
{decoded}
|
||||
</pre>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -53,6 +53,13 @@ export interface SystemSheetProps {
|
||||
footerContext?: React.ReactNode;
|
||||
|
||||
size?: SystemSheetSize;
|
||||
/**
|
||||
* Skip wrapping the body in `<ScrollArea>`. Use when the sheet body manages its own
|
||||
* scroll regions (e.g. multi-pane file browsers). The caller is responsible for
|
||||
* keeping scrollbars to `<ScrollArea>` per §10 Scrollbars, AND for adding their own
|
||||
* body padding (`noScroll` skips the default `px-6 py-5` wrapper).
|
||||
*/
|
||||
noScroll?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
@@ -70,6 +77,7 @@ export function SystemSheet({
|
||||
onTabChange,
|
||||
footerContext,
|
||||
size = 'md',
|
||||
noScroll = false,
|
||||
children,
|
||||
}: SystemSheetProps) {
|
||||
const hasToolbar = !!(primaryAction || (secondaryActions && secondaryActions.length > 0) || destructiveAction);
|
||||
@@ -111,9 +119,13 @@ export function SystemSheet({
|
||||
/>
|
||||
)}
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="px-6 py-5">{children}</div>
|
||||
</ScrollArea>
|
||||
{noScroll ? (
|
||||
<div className="flex-1 min-h-0 flex flex-col">{children}</div>
|
||||
) : (
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="px-6 py-5">{children}</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
{hasFooter && <FooterBand context={footerContext} />}
|
||||
</SheetContent>
|
||||
|
||||
Reference in New Issue
Block a user