sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve Containers table/tab readability: bold centered headers, taller rows, filing-cabinet tabs

Browse source
This commit is contained in:
Claude 2026-06-21 08:47:52 +00:00
parent 5703f93027
commit 98b69e47d5
No known key found for this signature in database
1 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/pages/Containers.tsx
View file

@ -305,7 +305,7 @@ export default function Containers() {
</div> </div>
{/* Intra-page tab bar */} {/* Intra-page tab bar */}
<div className="flex items-center gap-1 border-b border-white/10"> <div className="flex items-end gap-1 border-b border-white/10">
<TabButton label="Containers" active={activeTab === 'list'} onClick={() => setActiveTab('list')} /> <TabButton label="Containers" active={activeTab === 'list'} onClick={() => setActiveTab('list')} />
{detailTabs.map((t) => ( {detailTabs.map((t) => (
<TabButton <TabButton
@ -331,14 +331,14 @@ export default function Containers() {
<div style={cardBase} className="overflow-hidden"> <div style={cardBase} className="overflow-hidden">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead> <thead>
<tr style={{ color: TEXT_SECONDARY, borderBottom: '1px solid rgba(255,255,255,0.06)' }}> <tr style={{ color: TEXT_PRIMARY, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
<th className="px-3 py-2 text-left font-medium">Name</th> <th className="px-3 py-3 text-center text-base font-bold">Name</th>
<th className="px-3 py-2 text-left font-medium">Image</th> <th className="px-3 py-3 text-center text-base font-bold">Image</th>
<th className="px-3 py-2 text-left font-medium">State</th> <th className="px-3 py-3 text-center text-base font-bold">State</th>
<th className="px-3 py-2 text-left font-medium">CPU</th> <th className="px-3 py-3 text-center text-base font-bold">CPU</th>
<th className="px-3 py-2 text-left font-medium">Memory</th> <th className="px-3 py-3 text-center text-base font-bold">Memory</th>
<th className="px-3 py-2 text-left font-medium">Ports</th> <th className="px-3 py-3 text-center text-base font-bold">Ports</th>
<th className="px-3 py-2 text-right font-medium">Actions</th> <th className="px-3 py-3 text-center text-base font-bold">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -354,67 +354,67 @@ export default function Containers() {
const busy = busyId === c.id const busy = busyId === c.id
return ( return (
<tr key={c.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}> <tr key={c.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
<td className="px-3 py-2"> <td className="px-3 py-4 text-center text-[15px]">
<button <button
onClick={() => openDetail(c)} onClick={() => openDetail(c)}
className="text-left hover:underline" className="hover:underline"
style={{ color: GOLD }} style={{ color: GOLD }}
title="View details" title="View details"
> >
{c.name} {c.name}
</button> </button>
</td> </td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}> <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{c.image} {c.image}
</td> </td>
<td className="px-3 py-2"> <td className="px-3 py-4 text-center text-[15px]">
<span className="flex items-center gap-1.5"> <span className="flex items-center justify-center gap-1.5">
<span className="inline-block h-2 w-2 rounded-full" style={{ background: stateColor(c.state) }} /> <span className="inline-block h-2 w-2 rounded-full" style={{ background: stateColor(c.state) }} />
<span style={{ color: TEXT_PRIMARY }}>{c.status}</span> <span style={{ color: TEXT_PRIMARY }}>{c.status}</span>
</span> </span>
</td> </td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}> <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{stats ? `${stats.cpuPercent.toFixed(1)}%` : '—'} {stats ? `${stats.cpuPercent.toFixed(1)}%` : '—'}
</td> </td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}> <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{stats ? `${formatBytes(stats.memUsage)} / ${formatBytes(stats.memLimit)}` : '—'} {stats ? `${formatBytes(stats.memUsage)} / ${formatBytes(stats.memLimit)}` : '—'}
</td> </td>
<td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}> <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
{c.ports || '—'} {c.ports || '—'}
</td> </td>
<td className="px-3 py-2"> <td className="px-3 py-4 text-[15px]">
<div className="flex items-center justify-end gap-1.5"> <div className="flex items-center justify-center gap-2">
{canManage ? ( {canManage ? (
<> <>
{c.state === 'running' ? ( {c.state === 'running' ? (
<> <>
<button disabled={busy} onClick={() => runAction(c, 'pause')} title="Pause" style={{ color: TEXT_SECONDARY }}> <button disabled={busy} onClick={() => runAction(c, 'pause')} title="Pause" style={{ color: TEXT_SECONDARY }}>
<Pause size={14} /> <Pause size={16} />
</button> </button>
<button disabled={busy} onClick={() => runAction(c, 'restart')} title="Restart" style={{ color: TEXT_SECONDARY }}> <button disabled={busy} onClick={() => runAction(c, 'restart')} title="Restart" style={{ color: TEXT_SECONDARY }}>
<RotateCw size={14} /> <RotateCw size={16} />
</button> </button>
<button disabled={busy} onClick={() => runAction(c, 'stop')} title="Stop" style={{ color: TEXT_SECONDARY }}> <button disabled={busy} onClick={() => runAction(c, 'stop')} title="Stop" style={{ color: TEXT_SECONDARY }}>
<Square size={14} /> <Square size={16} />
</button> </button>
<button disabled={busy} onClick={() => setExecRow(c)} title="Exec terminal" style={{ color: GOLD }}> <button disabled={busy} onClick={() => setExecRow(c)} title="Exec terminal" style={{ color: GOLD }}>
<TerminalSquare size={14} /> <TerminalSquare size={16} />
</button> </button>
</> </>
) : c.state === 'paused' ? ( ) : c.state === 'paused' ? (
<button disabled={busy} onClick={() => runAction(c, 'unpause')} title="Unpause" style={{ color: TEXT_SECONDARY }}> <button disabled={busy} onClick={() => runAction(c, 'unpause')} title="Unpause" style={{ color: TEXT_SECONDARY }}>
<PlayCircle size={14} /> <PlayCircle size={16} />
</button> </button>
) : ( ) : (
<button disabled={busy} onClick={() => runAction(c, 'start')} title="Start" style={{ color: TEXT_SECONDARY }}> <button disabled={busy} onClick={() => runAction(c, 'start')} title="Start" style={{ color: TEXT_SECONDARY }}>
<Play size={14} /> <Play size={16} />
</button> </button>
)} )}
<button disabled={busy} onClick={() => setLogsRow(c)} title="Logs" style={{ color: TEXT_SECONDARY }}> <button disabled={busy} onClick={() => setLogsRow(c)} title="Logs" style={{ color: TEXT_SECONDARY }}>
<ScrollText size={14} /> <ScrollText size={16} />
</button> </button>
<button disabled={busy} onClick={() => removeRow(c)} title="Remove" style={{ color: '#E74C3C' }}> <button disabled={busy} onClick={() => removeRow(c)} title="Remove" style={{ color: '#E74C3C' }}>
<Trash2 size={14} /> <Trash2 size={16} />
</button> </button>
</> </>
) : ( ) : (
@ -450,17 +450,20 @@ function TabButton({ label, active, onClick, onClose }: { label: string; active:
return ( return (
<div <div
onClick={onClick} onClick={onClick}
className="flex cursor-pointer items-center gap-2 rounded-t-md px-3 py-1.5 text-xs" className="flex cursor-pointer items-center gap-2 rounded-t-md px-4 py-2 text-sm font-semibold"
style={{ style={{
color: active ? GOLD : TEXT_SECONDARY, color: active ? GOLD : TEXT_SECONDARY,
borderBottom: active ? `2px solid ${GOLD}` : '2px solid transparent', backgroundColor: active ? 'rgba(200,164,52,0.12)' : 'rgba(255,255,255,0.02)',
border: active ? '1px solid rgba(200,164,52,0.35)' : '1px solid rgba(255,255,255,0.06)',
borderBottom: active ? '1px solid rgba(200,164,52,0.12)' : '1px solid rgba(255,255,255,0.06)',
marginBottom: '-1px',
maxWidth: '200px', maxWidth: '200px',
}} }}
> >
<span className="truncate">{label}</span> <span className="truncate">{label}</span>
{onClose && ( {onClose && (
<X <X
size={12} size={13}
onClick={(e) => { onClick={(e) => {
e.stopPropagation() e.stopPropagation()
onClose() onClose()