Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 4x 14x 1x 13x 25x 1x 1x 1x | import {
TextButton,
TextButtonSize,
Box,
IconName,
ButtonIcon,
} from '@metamask/design-system-react';
import type { VatRecord } from '../types.ts';
import {
Table,
TableCell,
TableHead,
TableHeader,
TableValue,
} from './table/index.ts';
export const VatTable: React.FC<{
vats: VatRecord[];
onPingVat: (id: string) => void;
onRestartVat: (id: string) => void;
onTerminateVat: (id: string) => void;
}> = ({ vats, onPingVat, onRestartVat, onTerminateVat }) => {
if (vats.length === 0) {
return null;
}
return (
<Box className="w-full mt-4">
<Table dataTestid="vat-table">
<TableHead>
<TableHeader first>ID</TableHeader>
<TableHeader>Source</TableHeader>
<TableHeader>Parameters</TableHeader>
<TableHeader>Actions</TableHeader>
</TableHead>
<tbody>
{vats.map((vat, index) => (
<tr
key={vat.id}
data-vat-id={vat.id}
className={`hover:bg-alternative ${
index === vats.length - 1 ? '' : 'border-b border-muted'
}`}
>
<TableValue first>{vat.id}</TableValue>
<TableValue>{vat.source}</TableValue>
<TableValue>{vat.parameters}</TableValue>
<TableCell>
<Box className="flex gap-2">
<Box className="flex flex-1">
<TextButton
size={TextButtonSize.BodyXs}
onClick={() => onPingVat(vat.id)}
className="min-w-0"
data-testid="ping-vat-button"
>
Ping
</TextButton>
</Box>
<ButtonIcon
iconName={IconName.Refresh}
ariaLabel="Restart"
onClick={() => onRestartVat(vat.id)}
data-testid="restart-vat-button"
/>
<ButtonIcon
iconName={IconName.Trash}
ariaLabel="Terminate"
onClick={() => onTerminateVat(vat.id)}
data-testid="terminate-vat-button"
/>
</Box>
</TableCell>
</tr>
))}
</tbody>
</Table>
</Box>
);
};
|