logan
2d73661dd1
Add the Loki query UI, access policies, ingress insights, alert and registry settings, and their backend APIs. Include the related Kubernetes deployment and collector updates required by the integrated application. Validated with go test ./..., npm run build, and npm run lint.
56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
import { memo } from 'react'
|
|
import { Monitor, RefreshCw, Trash2, Eye, Terminal, Pencil } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { StatusBadge } from '@/components/StatusBadge'
|
|
import { ResourceCard } from '@/components/ResourceCard'
|
|
import type { Host } from '@/types'
|
|
|
|
interface HostCardProps {
|
|
host: Host
|
|
validating: number | null
|
|
onViewInfo: (h: Host) => void
|
|
onOpenTerminal: (h: Host) => void
|
|
onValidate: (id: number) => void
|
|
onDelete: (h: Host) => void
|
|
onEdit: (h: Host) => void
|
|
}
|
|
|
|
/** 主机卡片 — 统一 ResourceCard 样式 */
|
|
export const HostCard = memo(function HostCard({
|
|
host, validating, onViewInfo, onOpenTerminal, onValidate, onDelete, onEdit,
|
|
}: HostCardProps) {
|
|
return (
|
|
<ResourceCard
|
|
icon={Monitor}
|
|
iconClassName="text-purple-500"
|
|
title={host.name}
|
|
badges={<StatusBadge status={host.status} />}
|
|
fields={[
|
|
{ label: '地址', value: `${host.hostIP}:${host.port}` },
|
|
{ label: '用户', value: host.user },
|
|
{ label: '认证', value: host.authType === 'key' ? 'SSH 密钥' : '密码' },
|
|
{ label: '系统', value: `${host.os || '未知'} / ${host.arch || '未知'}` },
|
|
]}
|
|
actions={
|
|
<>
|
|
<Button variant="outline" size="sm" aria-label={'编辑主机 ' + host.name} onClick={() => onEdit(host)}>
|
|
<Pencil className="size-3.5" />
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onViewInfo(host)}>
|
|
<Eye className="size-3 mr-1" />详情
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onOpenTerminal(host)}>
|
|
<Terminal className="size-3 mr-1" />终端
|
|
</Button>
|
|
<Button variant="outline" size="sm" aria-label={`验证主机 ${host.name}`} disabled={validating === host.id} onClick={() => onValidate(host.id)}>
|
|
<RefreshCw className={`size-3 ${validating === host.id ? 'animate-spin' : ''}`} />
|
|
</Button>
|
|
<Button variant="outline" size="sm" aria-label={`删除主机 ${host.name}`} className="text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => onDelete(host)}>
|
|
<Trash2 className="size-3.5" />
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
})
|