192 lines
8.3 KiB
TypeScript
192 lines
8.3 KiB
TypeScript
import { MoreHorizontal, RotateCcw } from 'lucide-react';
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { DataTableCard, type DataTableColumn } from '../../components/data-table';
|
|
import { Badge, Button, Modal } from '../../components/ui';
|
|
import { apiRequest } from '../../lib/api';
|
|
import { PageTitle } from '../../layout/AppLayout';
|
|
import { loadPlatformDevices, type PlatformDevice } from '../agents/platform-api';
|
|
|
|
type HeadscaleNode = {
|
|
id: string;
|
|
name: string;
|
|
ip: string;
|
|
ips?: string[];
|
|
role: string;
|
|
user: string;
|
|
routes: string;
|
|
lastSeen: string | null;
|
|
status: string;
|
|
online?: boolean;
|
|
};
|
|
|
|
type AclRule = { id: string; action: string; sources: string[]; destinations: string[] };
|
|
type PlatformRow = HeadscaleNode & { device?: PlatformDevice; controllers: string[]; no: number };
|
|
|
|
type DeviceKind = 'agent' | 'launcher' | 'unknown';
|
|
|
|
function normalize(value?: string | null) {
|
|
return (value ?? '').toLowerCase().replace(/[^a-z0-9]/g, '');
|
|
}
|
|
|
|
function findDevice(node: HeadscaleNode, devices: PlatformDevice[]) {
|
|
const nodeValues = [node.name, node.user].map(normalize).filter(Boolean);
|
|
return devices.find((device) => {
|
|
const deviceValues = [device.hostname, device.tailscaleHostname, device.accountEmail].map(normalize).filter(Boolean);
|
|
return nodeValues.some((nodeValue) => deviceValues.some((deviceValue) => nodeValue.includes(deviceValue) || deviceValue.includes(nodeValue)));
|
|
});
|
|
}
|
|
|
|
function findControllers(node: HeadscaleNode, rules: AclRule[]) {
|
|
const destinations = new Set([node.ip, ...(node.ips ?? [])].filter(Boolean).map((ip) => `${ip}:*`));
|
|
return [...new Set(rules
|
|
.filter((rule) => rule.action === 'accept' && rule.destinations.some((destination) => destinations.has(destination)))
|
|
.flatMap((rule) => rule.sources))];
|
|
}
|
|
|
|
function getDeviceKind(row: PlatformRow): DeviceKind {
|
|
if (!row.device) return 'unknown';
|
|
return row.device.agentVersion || row.device.agentLastSeenAt ? 'agent' : 'launcher';
|
|
}
|
|
|
|
function formatDateTime(value?: string | null) {
|
|
if (!value) return '-';
|
|
const date = new Date(value);
|
|
return Number.isNaN(date.getTime()) ? '-' : date.toLocaleString('ko-KR', { hour12: false });
|
|
}
|
|
|
|
export function RuntimeDeviceControlPage() {
|
|
const [rows, setRows] = useState<PlatformRow[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selected, setSelected] = useState<PlatformRow | null>(null);
|
|
|
|
const refresh = useCallback(() => {
|
|
setLoading(true);
|
|
Promise.all([
|
|
apiRequest<{ nodes?: HeadscaleNode[] }>('/tailscale/nodes'),
|
|
apiRequest<{ policy?: { acls?: AclRule[] } }>('/tailscale/acl'),
|
|
loadPlatformDevices(),
|
|
])
|
|
.then(([nodeResponse, aclResponse, devices]) => {
|
|
const rules = aclResponse.policy?.acls ?? [];
|
|
const nodes = nodeResponse.nodes ?? [];
|
|
setRows(nodes.map((node, index) => ({
|
|
...node,
|
|
no: nodes.length - index,
|
|
device: findDevice(node, devices),
|
|
controllers: findControllers(node, rules),
|
|
})));
|
|
})
|
|
.catch(() => setRows([]))
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void refresh();
|
|
}, [refresh]);
|
|
|
|
const columns = useMemo<Array<DataTableColumn<PlatformRow>>>(
|
|
() => [
|
|
{ key: 'no', header: 'No.', className: 'w-14 px-3 py-3 text-center font-medium', cell: (row) => <span>{row.no}</span> },
|
|
{
|
|
key: 'platform',
|
|
header: '플랫폼',
|
|
flexible: true,
|
|
cell: (row) => (
|
|
<div className="min-w-0">
|
|
<p className="truncate font-semibold" title={row.name}>{row.name}</p>
|
|
<p className="mt-1 truncate text-xs text-muted-foreground" title={row.user}>{row.user || '-'}</p>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
key: 'connection',
|
|
header: '연결 대상',
|
|
width: 180,
|
|
cell: (row) => <span className="font-mono text-xs text-muted-foreground">{row.ip || '-'}</span>,
|
|
},
|
|
{
|
|
key: 'deviceKind',
|
|
header: '유형',
|
|
width: 150,
|
|
cell: (row) => {
|
|
const kind = getDeviceKind(row);
|
|
if (kind === 'agent') {
|
|
return <Badge tone="green">에이전트</Badge>;
|
|
}
|
|
if (kind === 'launcher') return <Badge tone="neutral">런처 클라이언트</Badge>;
|
|
return <Badge tone="neutral">미확인</Badge>;
|
|
},
|
|
},
|
|
{
|
|
key: 'controllers',
|
|
header: '제어 사용자',
|
|
width: 280,
|
|
cell: (row) => (
|
|
<span className="block truncate text-muted-foreground" title={row.controllers.length ? row.controllers.join(', ') : row.user || '-'}>
|
|
{row.controllers.length ? row.controllers.join(', ') : row.user || '-'}
|
|
</span>
|
|
),
|
|
},
|
|
{ key: 'routes', header: '연결 경로', width: 190, cell: (row) => <span className="block truncate text-muted-foreground" title={row.routes || '-'}>{row.routes || '-'}</span> },
|
|
{ key: 'status', header: '상태', width: 110, cell: (row) => <Badge tone={row.online || row.status === '활성' ? 'green' : 'neutral'}>{row.online || row.status === '활성' ? '연결됨' : '오프라인'}</Badge> },
|
|
{
|
|
key: 'actions',
|
|
header: '',
|
|
className: 'w-20 px-5 py-3 text-right font-medium',
|
|
cell: (row) => (
|
|
<div className="flex justify-end">
|
|
<Button variant="ghost" className="size-8 px-0" title="상세" aria-label="상세" onClick={() => setSelected(row)}>
|
|
<MoreHorizontal className="size-4" />
|
|
</Button>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<PageTitle
|
|
eyebrow="플랫폼 관리"
|
|
title="연결 제어"
|
|
description="Headscale 노드 연결 상태와 ACL 기반 제어 권한을 확인합니다."
|
|
actions={
|
|
<Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
|
|
<RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
|
|
새로고침
|
|
</Button>
|
|
}
|
|
/>
|
|
<DataTableCard
|
|
title="연결 플랫폼"
|
|
description="Headscale에 등록된 노드와 해당 노드에 적용된 ACL 제어 사용자를 표시합니다."
|
|
rows={rows}
|
|
columns={columns}
|
|
searchPlaceholder="플랫폼, 사용자, IP, ACL 검색"
|
|
getSearchText={(row) => `${row.name} ${row.user} ${row.ip} ${row.controllers.join(' ')} ${row.routes}`}
|
|
getRowKey={(row) => row.id || row.name}
|
|
pageSize={6}
|
|
minWidth={1100}
|
|
loading={loading}
|
|
emptyMessage="Headscale에 연결된 플랫폼이 없습니다."
|
|
/>
|
|
<Modal open={Boolean(selected)} title="플랫폼 연결 상세" onClose={() => setSelected(null)}>
|
|
<dl className="grid grid-cols-[140px_minmax(0,1fr)] gap-x-4 gap-y-4 text-sm">
|
|
<dt className="text-muted-foreground">플랫폼</dt><dd className="min-w-0 break-all font-medium">{selected?.name}</dd>
|
|
<dt className="text-muted-foreground">Headscale 사용자</dt><dd className="min-w-0 break-all">{selected?.user || '-'}</dd>
|
|
<dt className="text-muted-foreground">연결 IP</dt><dd className="font-mono text-xs">{selected?.ips?.join(', ') || selected?.ip || '-'}</dd>
|
|
<dt className="text-muted-foreground">ACL 제어 사용자</dt><dd className="min-w-0 break-all">{selected?.controllers.length ? selected.controllers.join(', ') : '개별 ACL 규칙 없음'}</dd>
|
|
<dt className="text-muted-foreground">연결 경로</dt><dd className="min-w-0 break-all">{selected?.routes || '-'}</dd>
|
|
<dt className="text-muted-foreground">Workspace</dt><dd className="min-w-0 break-all">{selected?.device?.workspaceRoot || '-'}</dd>
|
|
<dt className="text-muted-foreground">SSH 사용자</dt><dd>{selected?.device?.sshUser || '-'}</dd>
|
|
<dt className="text-muted-foreground">사용 유형</dt><dd>{selected?.device?.usageType || '-'}</dd>
|
|
<dt className="text-muted-foreground">장비 유형</dt><dd>{selected ? ({ agent: '에이전트', launcher: '런처 클라이언트', unknown: '미확인' }[getDeviceKind(selected)]) : '-'}</dd>
|
|
<dt className="text-muted-foreground">에이전트 버전</dt><dd>{selected?.device?.agentVersion || '-'}</dd>
|
|
<dt className="text-muted-foreground">마지막 에이전트 확인</dt><dd>{formatDateTime(selected?.device?.agentLastSeenAt)}</dd>
|
|
</dl>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|