Add Last Seen column and color-coded status badges in Machines table

- New Last Seen column showing last_seen_at timestamp per machine
- Status badges: online=green (success), offline=red (error), waking/pending=amber
- Update Machine interface with last_seen_at and created_at fields
This commit is contained in:
2026-07-10 10:51:10 -04:00
parent 175fdf4dff
commit 7a2a7a4935
5 changed files with 15 additions and 10 deletions
+2
View File
@@ -53,6 +53,8 @@ export interface Machine {
fingerprint_confirmed: boolean;
host_key_fingerprint: string | null;
status: string;
last_seen_at: string | null;
created_at: string;
}
export interface TestConnectionResponse {
+3 -1
View File
@@ -25,7 +25,7 @@ export type BadgeVariant = VariantProps<typeof badgeVariants>['variant']
const STATUS_TO_VARIANT: Record<string, BadgeVariant> = {
running: 'running',
pending: 'pending',
waking: 'waking',
waking: 'pending',
success: 'success',
error: 'error',
failed: 'error',
@@ -33,6 +33,8 @@ const STATUS_TO_VARIANT: Record<string, BadgeVariant> = {
cancelled: 'neutral',
info: 'info',
unknown: 'neutral',
online: 'success',
offline: 'error',
}
export function statusVariant(status: string): BadgeVariant {
+8 -7
View File
@@ -5,6 +5,7 @@ import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/Select';
import { Badge } from '@/components/ui/Badge';
import { statusVariant } from '@/lib/status';
import {
Modal,
ModalContent,
@@ -278,6 +279,7 @@ export default function Machines() {
<TableHead>WoL</TableHead>
<TableHead>WoL Timeout</TableHead>
<TableHead>Status</TableHead>
<TableHead>Last Seen</TableHead>
<TableHead className="w-24">Actions</TableHead>
</TableRow>
</TableHeader>
@@ -312,6 +314,11 @@ export default function Machines() {
<TableCell>
<StatusBadge status={m.status} />
</TableCell>
<TableCell>
<span className="text-xs text-fg-muted">
{m.last_seen_at ? new Date(m.last_seen_at).toLocaleString() : <span className="text-fg-subtle"></span>}
</span>
</TableCell>
<TableCell>
<div className="flex items-center gap-1">
<Button
@@ -696,11 +703,5 @@ export default function Machines() {
}
function StatusBadge({ status }: { status: string }) {
const variant =
status === 'online'
? 'success'
: status === 'offline'
? 'neutral'
: 'info';
return <Badge variant={variant} label={status} />;
return <Badge variant={statusVariant(status)} label={status} />;
}