1932 lines
90 KiB
TypeScript
1932 lines
90 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useState } from "react"
|
|
import { useQuery } from "convex/react"
|
|
import { format, formatDistanceToNowStrict } from "date-fns"
|
|
import { ptBR } from "date-fns/locale"
|
|
import { toast } from "sonner"
|
|
import { ClipboardCopy, ServerCog, Cpu, MemoryStick, Monitor, HardDrive, Pencil, ShieldCheck, ShieldAlert, Apple, Terminal } from "lucide-react"
|
|
|
|
import { api } from "@/convex/_generated/api"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { cn } from "@/lib/utils"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
|
|
type MachineMetrics = Record<string, unknown> | null
|
|
|
|
type MachineLabel = {
|
|
id?: number | string
|
|
name?: string
|
|
}
|
|
|
|
type MachineSoftware = {
|
|
name?: string
|
|
version?: string
|
|
source?: string
|
|
}
|
|
|
|
type DetailLineProps = { label: string; value?: string | number | null; classNameValue?: string }
|
|
|
|
type GpuAdapter = {
|
|
name?: string
|
|
vendor?: string
|
|
driver?: string
|
|
memoryBytes?: number
|
|
}
|
|
|
|
type LinuxLsblkEntry = {
|
|
name?: string
|
|
mountPoint?: string
|
|
mountpoint?: string
|
|
fs?: string
|
|
fstype?: string
|
|
sizeBytes?: number
|
|
size?: number
|
|
}
|
|
|
|
type LinuxSmartEntry = {
|
|
smart_status?: { passed?: boolean }
|
|
model_name?: string
|
|
model_family?: string
|
|
serial_number?: string
|
|
device?: { name?: string }
|
|
}
|
|
|
|
type LinuxExtended = {
|
|
lsblk?: LinuxLsblkEntry[]
|
|
lspci?: string
|
|
lsusb?: string
|
|
pciList?: Array<{ text: string }>
|
|
usbList?: Array<{ text: string }>
|
|
smart?: LinuxSmartEntry[]
|
|
}
|
|
|
|
type WindowsCpuInfo = {
|
|
Name?: string
|
|
Manufacturer?: string
|
|
SocketDesignation?: string
|
|
NumberOfCores?: number
|
|
NumberOfLogicalProcessors?: number
|
|
L2CacheSize?: number
|
|
L3CacheSize?: number
|
|
MaxClockSpeed?: number
|
|
}
|
|
|
|
type WindowsMemoryModule = {
|
|
BankLabel?: string
|
|
Capacity?: number
|
|
Manufacturer?: string
|
|
PartNumber?: string
|
|
SerialNumber?: string
|
|
ConfiguredClockSpeed?: number
|
|
Speed?: number
|
|
ConfiguredVoltage?: number
|
|
}
|
|
|
|
type WindowsVideoController = {
|
|
Name?: string
|
|
AdapterRAM?: number
|
|
DriverVersion?: string
|
|
PNPDeviceID?: string
|
|
}
|
|
|
|
type WindowsDiskEntry = {
|
|
Model?: string
|
|
SerialNumber?: string
|
|
Size?: number
|
|
InterfaceType?: string
|
|
MediaType?: string
|
|
}
|
|
|
|
type WindowsOsInfo = {
|
|
ProductName?: string
|
|
CurrentBuild?: string | number
|
|
CurrentBuildNumber?: string | number
|
|
DisplayVersion?: string
|
|
ReleaseId?: string
|
|
EditionID?: string
|
|
LicenseStatus?: number
|
|
IsActivated?: boolean
|
|
}
|
|
|
|
type WindowsExtended = {
|
|
software?: MachineSoftware[]
|
|
services?: Array<{ name?: string; status?: string; displayName?: string }>
|
|
defender?: Record<string, unknown>
|
|
hotfix?: Array<Record<string, unknown>>
|
|
cpu?: WindowsCpuInfo | WindowsCpuInfo[]
|
|
baseboard?: Record<string, unknown> | Array<Record<string, unknown>>
|
|
bios?: Record<string, unknown> | Array<Record<string, unknown>>
|
|
memoryModules?: WindowsMemoryModule[]
|
|
videoControllers?: WindowsVideoController[]
|
|
disks?: WindowsDiskEntry[]
|
|
osInfo?: WindowsOsInfo
|
|
}
|
|
|
|
type MacExtended = {
|
|
systemProfiler?: Record<string, unknown>
|
|
packages?: string[]
|
|
launchctl?: string
|
|
}
|
|
|
|
type NetworkInterface = { name?: string; mac?: string; ip?: string }
|
|
|
|
type MachineInventory = {
|
|
hardware?: {
|
|
vendor?: string
|
|
model?: string
|
|
serial?: string
|
|
cpuType?: string
|
|
physicalCores?: number
|
|
logicalCores?: number
|
|
memoryBytes?: number
|
|
memory?: number
|
|
primaryGpu?: GpuAdapter
|
|
gpus?: GpuAdapter[]
|
|
}
|
|
network?: { primaryIp?: string; publicIp?: string; macAddresses?: string[] } | NetworkInterface[]
|
|
software?: MachineSoftware[]
|
|
labels?: MachineLabel[]
|
|
fleet?: {
|
|
id?: number | string
|
|
teamId?: number | string
|
|
detailUpdatedAt?: string
|
|
osqueryVersion?: string
|
|
}
|
|
disks?: Array<{ name?: string; mountPoint?: string; fs?: string; interface?: string | null; serial?: string | null; totalBytes?: number; availableBytes?: number }>
|
|
extended?: { linux?: LinuxExtended; windows?: WindowsExtended; macos?: MacExtended }
|
|
services?: Array<{ name?: string; status?: string; displayName?: string }>
|
|
collaborator?: { email?: string; name?: string; role?: string }
|
|
}
|
|
|
|
function toRecord(value: unknown): Record<string, unknown> | null {
|
|
if (!value || typeof value !== "object") return null
|
|
return value as Record<string, unknown>
|
|
}
|
|
|
|
function readString(record: Record<string, unknown>, ...keys: string[]): string | undefined {
|
|
for (const key of keys) {
|
|
const raw = record[key]
|
|
if (typeof raw === "string" && raw.trim().length > 0) {
|
|
return raw
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function readNumber(record: Record<string, unknown>, ...keys: string[]): number | undefined {
|
|
for (const key of keys) {
|
|
const raw = record[key]
|
|
if (typeof raw === "number" && Number.isFinite(raw)) {
|
|
return raw
|
|
}
|
|
if (typeof raw === "string") {
|
|
const trimmed = raw.trim()
|
|
if (!trimmed) continue
|
|
const parsed = Number(trimmed)
|
|
if (!Number.isNaN(parsed)) return parsed
|
|
const digits = trimmed.replace(/[^0-9.]/g, "")
|
|
if (digits) {
|
|
const fallback = Number(digits)
|
|
if (!Number.isNaN(fallback)) return fallback
|
|
}
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function parseBytesLike(value: unknown): number | undefined {
|
|
if (typeof value === "number" && Number.isFinite(value)) return value
|
|
if (typeof value === "string") {
|
|
const trimmed = value.trim()
|
|
if (!trimmed) return undefined
|
|
const normalized = trimmed.replace(",", ".")
|
|
const match = normalized.match(/^([\d.]+)\s*(ti|tb|tib|gb|gib|mb|mib|kb|kib|b)?$/i)
|
|
if (match) {
|
|
const amount = Number(match[1])
|
|
if (Number.isNaN(amount)) return undefined
|
|
const unit = match[2]?.toLowerCase()
|
|
const base = 1024
|
|
const unitMap: Record<string, number> = {
|
|
b: 1,
|
|
kb: base,
|
|
kib: base,
|
|
mb: base ** 2,
|
|
mib: base ** 2,
|
|
gb: base ** 3,
|
|
gib: base ** 3,
|
|
tb: base ** 4,
|
|
tib: base ** 4,
|
|
ti: base ** 4,
|
|
}
|
|
if (unit) {
|
|
const multiplier = unitMap[unit]
|
|
if (multiplier) {
|
|
return amount * multiplier
|
|
}
|
|
}
|
|
return amount
|
|
}
|
|
const digits = normalized.replace(/[^0-9.]/g, "")
|
|
if (digits) {
|
|
const fallback = Number(digits)
|
|
if (!Number.isNaN(fallback)) return fallback
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
function deriveVendor(record: Record<string, unknown>): string | undefined {
|
|
const direct = readString(record, "vendor", "Vendor", "AdapterCompatibility")
|
|
if (direct) return direct
|
|
const pnp = readString(record, "PNPDeviceID")
|
|
if (!pnp) return undefined
|
|
const match = pnp.match(/VEN_([0-9A-F]{4})/i)
|
|
if (match) {
|
|
const vendorCode = match[1].toUpperCase()
|
|
const vendorMap: Record<string, string> = {
|
|
"10DE": "NVIDIA",
|
|
"1002": "AMD",
|
|
"1022": "AMD",
|
|
"8086": "Intel",
|
|
"8087": "Intel",
|
|
"1AF4": "Red Hat",
|
|
}
|
|
return vendorMap[vendorCode] ?? `VEN_${vendorCode}`
|
|
}
|
|
const segments = pnp.split("\\")
|
|
const last = segments.pop()
|
|
return last && last.trim().length > 0 ? last : pnp
|
|
}
|
|
|
|
function normalizeGpuSource(value: unknown): GpuAdapter | null {
|
|
if (typeof value === "string") {
|
|
const name = value.trim()
|
|
return name ? { name } : null
|
|
}
|
|
const record = toRecord(value)
|
|
if (!record) return null
|
|
const name = readString(record, "name", "Name", "_name", "AdapterCompatibility")
|
|
const vendor = deriveVendor(record)
|
|
const driver = readString(record, "driver", "DriverVersion", "driverVersion")
|
|
const memoryBytes =
|
|
readNumber(record, "memoryBytes", "MemoryBytes", "AdapterRAM", "VRAM", "vramBytes") ??
|
|
parseBytesLike(record["AdapterRAM"] ?? record["VRAM"] ?? record["vram"])
|
|
if (!name && !vendor && !driver && memoryBytes === undefined) {
|
|
return null
|
|
}
|
|
return { name, vendor, driver, memoryBytes }
|
|
}
|
|
|
|
function uniqueBy<T>(items: T[], keyFn: (item: T) => string): T[] {
|
|
const seen = new Set<string>()
|
|
const result: T[] = []
|
|
items.forEach((item) => {
|
|
const key = keyFn(item)
|
|
if (key && !seen.has(key)) {
|
|
seen.add(key)
|
|
result.push(item)
|
|
}
|
|
})
|
|
return result
|
|
}
|
|
|
|
export type MachinesQueryItem = {
|
|
id: string
|
|
tenantId: string
|
|
hostname: string
|
|
companyId: string | null
|
|
companySlug: string | null
|
|
osName: string | null
|
|
osVersion: string | null
|
|
architecture: string | null
|
|
macAddresses: string[]
|
|
serialNumbers: string[]
|
|
authUserId: string | null
|
|
authEmail: string | null
|
|
persona: string | null
|
|
assignedUserId: string | null
|
|
assignedUserEmail: string | null
|
|
assignedUserName: string | null
|
|
assignedUserRole: string | null
|
|
status: string | null
|
|
lastHeartbeatAt: number | null
|
|
heartbeatAgeMs: number | null
|
|
registeredBy: string | null
|
|
createdAt: number
|
|
updatedAt: number
|
|
token: {
|
|
expiresAt: number
|
|
lastUsedAt: number | null
|
|
usageCount: number
|
|
} | null
|
|
metrics: MachineMetrics
|
|
inventory: MachineInventory | null
|
|
postureAlerts?: Array<Record<string, unknown>> | null
|
|
lastPostureAt?: number | null
|
|
}
|
|
|
|
function useMachinesQuery(tenantId: string): MachinesQueryItem[] {
|
|
return (
|
|
(useQuery(api.machines.listByTenant, {
|
|
tenantId,
|
|
includeMetadata: true,
|
|
}) ?? []) as MachinesQueryItem[]
|
|
)
|
|
}
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
online: "Online",
|
|
offline: "Offline",
|
|
maintenance: "Manutenção",
|
|
blocked: "Bloqueada",
|
|
unknown: "Desconhecida",
|
|
}
|
|
|
|
const statusClasses: Record<string, string> = {
|
|
online: "border-emerald-500/20 bg-emerald-500/15 text-emerald-600",
|
|
offline: "border-rose-500/20 bg-rose-500/15 text-rose-600",
|
|
maintenance: "border-amber-500/20 bg-amber-500/15 text-amber-600",
|
|
blocked: "border-orange-500/20 bg-orange-500/15 text-orange-600",
|
|
unknown: "border-slate-300 bg-slate-200 text-slate-700",
|
|
}
|
|
|
|
function formatRelativeTime(date?: Date | null) {
|
|
if (!date) return "Nunca"
|
|
try {
|
|
return formatDistanceToNowStrict(date, { addSuffix: true, locale: ptBR })
|
|
} catch {
|
|
return "—"
|
|
}
|
|
}
|
|
|
|
function formatDate(date?: Date | null) {
|
|
if (!date) return "—"
|
|
return format(date, "dd/MM/yyyy HH:mm")
|
|
}
|
|
|
|
function formatBytes(bytes?: number | null) {
|
|
if (!bytes || Number.isNaN(bytes)) return "—"
|
|
const units = ["B", "KB", "MB", "GB", "TB"]
|
|
let value = bytes
|
|
let unitIndex = 0
|
|
while (value >= 1024 && unitIndex < units.length - 1) {
|
|
value /= 1024
|
|
unitIndex += 1
|
|
}
|
|
return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
|
}
|
|
|
|
function formatPercent(value?: number | null) {
|
|
if (value === null || value === undefined || Number.isNaN(value)) return "—"
|
|
const normalized = value > 1 ? value : value * 100
|
|
return `${normalized.toFixed(0)}%`
|
|
}
|
|
|
|
function readBool(source: unknown, key: string): boolean | undefined {
|
|
if (!source || typeof source !== "object") return undefined
|
|
const value = (source as Record<string, unknown>)[key]
|
|
return typeof value === "boolean" ? value : undefined
|
|
}
|
|
|
|
function getStatusVariant(status?: string | null) {
|
|
if (!status) return { label: statusLabels.unknown, className: statusClasses.unknown }
|
|
const normalized = status.toLowerCase()
|
|
return {
|
|
label: statusLabels[normalized] ?? status,
|
|
className: statusClasses[normalized] ?? statusClasses.unknown,
|
|
}
|
|
}
|
|
|
|
function OsIcon({ osName }: { osName?: string | null }) {
|
|
const name = (osName ?? "").toLowerCase()
|
|
if (name.includes("mac") || name.includes("darwin") || name.includes("macos")) return <Apple className="size-4 text-black" />
|
|
if (name.includes("linux")) return <Terminal className="size-4 text-black" />
|
|
// fallback para Windows/outros como monitor genérico
|
|
return <Monitor className="size-4 text-black" />
|
|
}
|
|
|
|
export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
|
|
const machines = useMachinesQuery(tenantId)
|
|
const [q, setQ] = useState("")
|
|
const [statusFilter, setStatusFilter] = useState<string>("all")
|
|
const [osFilter, setOsFilter] = useState<string>("all")
|
|
const [companyQuery, setCompanyQuery] = useState<string>("")
|
|
const [onlyAlerts, setOnlyAlerts] = useState<boolean>(false)
|
|
const { convexUserId } = useAuth()
|
|
const companies = useQuery(
|
|
convexUserId ? api.companies.list : "skip",
|
|
convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : ("skip" as const)
|
|
) as Array<{ id: string; name: string; slug?: string }> | undefined
|
|
const companyNameBySlug = useMemo(() => {
|
|
const map = new Map<string, string>()
|
|
;(companies ?? []).forEach((c) => c.slug && map.set(c.slug, c.name))
|
|
return map
|
|
}, [companies])
|
|
|
|
const osOptions = useMemo(() => {
|
|
const set = new Set<string>()
|
|
machines.forEach((m) => m.osName && set.add(m.osName))
|
|
return Array.from(set).sort()
|
|
}, [machines])
|
|
|
|
const companyNameOptions = useMemo(() => (companies ?? []).map((c) => c.name).sort((a,b)=>a.localeCompare(b,"pt-BR")), [companies])
|
|
|
|
const filteredMachines = useMemo(() => {
|
|
const text = q.trim().toLowerCase()
|
|
return machines.filter((m) => {
|
|
if (onlyAlerts && !(Array.isArray(m.postureAlerts) && m.postureAlerts.length > 0)) return false
|
|
if (statusFilter !== "all") {
|
|
const s = (m.status ?? "unknown").toLowerCase()
|
|
if (s !== statusFilter) return false
|
|
}
|
|
if (osFilter !== "all" && (m.osName ?? "").toLowerCase() !== osFilter.toLowerCase()) return false
|
|
if (companyQuery && companyQuery.trim().length > 0) {
|
|
const name = companyNameBySlug.get(m.companySlug ?? "")?.toLowerCase() ?? ""
|
|
if (!name.includes(companyQuery.trim().toLowerCase())) return false
|
|
}
|
|
if (!text) return true
|
|
const hay = [
|
|
m.hostname,
|
|
m.authEmail ?? "",
|
|
(m.macAddresses ?? []).join(" "),
|
|
(m.serialNumbers ?? []).join(" "),
|
|
]
|
|
.join(" ")
|
|
.toLowerCase()
|
|
return hay.includes(text)
|
|
})
|
|
}, [machines, q, statusFilter, osFilter, companyQuery, onlyAlerts, companyNameBySlug])
|
|
|
|
return (
|
|
<div className="grid gap-6">
|
|
<Card className="border-slate-200">
|
|
<CardHeader>
|
|
<CardTitle>Máquinas registradas</CardTitle>
|
|
<CardDescription>Sincronizadas via agente local ou Fleet. Atualiza em tempo real.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="overflow-hidden">
|
|
<div className="mb-3 flex flex-wrap items-center gap-2">
|
|
<div className="min-w-[220px] flex-1">
|
|
<Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar hostname, e-mail, MAC, serial..." />
|
|
</div>
|
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
<SelectTrigger className="min-w-36">
|
|
<SelectValue placeholder="Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos status</SelectItem>
|
|
<SelectItem value="online">Online</SelectItem>
|
|
<SelectItem value="offline">Offline</SelectItem>
|
|
<SelectItem value="unknown">Desconhecido</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={osFilter} onValueChange={setOsFilter}>
|
|
<SelectTrigger className="min-w-40">
|
|
<SelectValue placeholder="Sistema" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos sistemas</SelectItem>
|
|
{osOptions.map((os) => (
|
|
<SelectItem key={os} value={os}>{os}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<div className="relative">
|
|
<Input
|
|
value={companyQuery}
|
|
onChange={(e) => setCompanyQuery(e.target.value)}
|
|
placeholder="Buscar empresa"
|
|
className="min-w-[220px]"
|
|
/>
|
|
{companyQuery && companyNameOptions.filter((c) => c.toLowerCase().includes(companyQuery.toLowerCase())).slice(0,6).length > 0 ? (
|
|
<div className="absolute z-10 mt-1 max-h-52 w-full overflow-auto rounded-md border bg-white p-1 shadow-sm">
|
|
{companyNameOptions
|
|
.filter((c) => c.toLowerCase().includes(companyQuery.toLowerCase()))
|
|
.slice(0, 8)
|
|
.map((c) => (
|
|
<button
|
|
key={c}
|
|
type="button"
|
|
onClick={() => setCompanyQuery(c)}
|
|
className="w-full rounded px-2 py-1 text-left text-sm hover:bg-slate-100"
|
|
>
|
|
{c}
|
|
</button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<label className="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50/80 px-3 py-1.5 text-sm">
|
|
<Checkbox checked={onlyAlerts} onCheckedChange={(v) => setOnlyAlerts(Boolean(v))} />
|
|
<span>Somente com alertas</span>
|
|
</label>
|
|
<Button variant="outline" onClick={() => { setQ(""); setStatusFilter("all"); setOsFilter("all"); setCompanyQuery(""); setOnlyAlerts(false) }}>Limpar</Button>
|
|
</div>
|
|
{machines.length === 0 ? (
|
|
<EmptyState />
|
|
) : (
|
|
<MachinesGrid machines={filteredMachines} companyNameBySlug={companyNameBySlug} />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MachineStatusBadge({ status }: { status?: string | null }) {
|
|
const { label, className } = getStatusVariant(status)
|
|
const s = String(status ?? "").toLowerCase()
|
|
const colorClass =
|
|
s === "online"
|
|
? "bg-emerald-500"
|
|
: s === "offline"
|
|
? "bg-rose-500"
|
|
: s === "maintenance"
|
|
? "bg-amber-500"
|
|
: s === "blocked"
|
|
? "bg-orange-500"
|
|
: "bg-slate-400"
|
|
const ringClass =
|
|
s === "online"
|
|
? "bg-emerald-400/30"
|
|
: s === "offline"
|
|
? "bg-rose-400/30"
|
|
: s === "maintenance"
|
|
? "bg-amber-400/30"
|
|
: s === "blocked"
|
|
? "bg-orange-400/30"
|
|
: "bg-slate-300/30"
|
|
|
|
const isOnline = s === "online"
|
|
return (
|
|
<Badge className={cn("inline-flex h-9 items-center gap-5 rounded-full border border-slate-200 px-3 text-sm font-semibold", className)}>
|
|
<span className="relative inline-flex items-center">
|
|
<span className={cn("size-2 rounded-full", colorClass)} />
|
|
{isOnline ? (
|
|
<span className={cn("absolute left-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping [animation-duration:2s]", ringClass)} />
|
|
) : null}
|
|
</span>
|
|
{label}
|
|
</Badge>
|
|
)
|
|
}
|
|
|
|
function EmptyState() {
|
|
return (
|
|
<div className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-slate-300 bg-slate-50/50 py-12 text-center">
|
|
<ServerCog className="size-10 text-slate-400" />
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold text-slate-600">Nenhuma máquina registrada ainda</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Execute o agente local ou o webhook do Fleet para registrar as máquinas do tenant.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
type MachineDetailsProps = {
|
|
machine: MachinesQueryItem | null
|
|
}
|
|
|
|
export function MachineDetails({ machine }: MachineDetailsProps) {
|
|
const { convexUserId } = useAuth()
|
|
const router = useRouter()
|
|
// Company name lookup (by slug)
|
|
const companyQueryArgs = convexUserId && machine ? { tenantId: machine.tenantId, viewerId: convexUserId as Id<"users"> } : undefined
|
|
const companies = useQuery(
|
|
api.companies.list,
|
|
companyQueryArgs ?? ("skip" as const)
|
|
) as Array<{ id: string; name: string; slug?: string }> | undefined
|
|
const metadata = machine?.inventory ?? null
|
|
const metrics = machine?.metrics ?? null
|
|
const hardware = metadata?.hardware
|
|
const network = metadata?.network ?? null
|
|
const networkInterfaces = Array.isArray(network) ? network : null
|
|
const networkSummary = !Array.isArray(network) && network ? network : null
|
|
const software = metadata?.software ?? null
|
|
const labels = metadata?.labels ?? null
|
|
const fleet = metadata?.fleet ?? null
|
|
const disks = Array.isArray(metadata?.disks) ? metadata.disks : []
|
|
const extended = metadata?.extended ?? null
|
|
const linuxExt = extended?.linux ?? null
|
|
const windowsExt = extended?.windows ?? null
|
|
const macosExt = extended?.macos ?? null
|
|
const windowsMemoryModulesRaw = windowsExt?.memoryModules
|
|
const windowsVideoControllersRaw = windowsExt?.videoControllers
|
|
const windowsDiskEntriesRaw = windowsExt?.disks
|
|
const windowsMemoryModules = Array.isArray(windowsMemoryModulesRaw)
|
|
? windowsMemoryModulesRaw
|
|
: windowsMemoryModulesRaw && typeof windowsMemoryModulesRaw === "object"
|
|
? [windowsMemoryModulesRaw]
|
|
: []
|
|
const windowsVideoControllers = Array.isArray(windowsVideoControllersRaw)
|
|
? windowsVideoControllersRaw
|
|
: windowsVideoControllersRaw && typeof windowsVideoControllersRaw === "object"
|
|
? [windowsVideoControllersRaw]
|
|
: []
|
|
const windowsDiskEntries = Array.isArray(windowsDiskEntriesRaw)
|
|
? windowsDiskEntriesRaw
|
|
: windowsDiskEntriesRaw && typeof windowsDiskEntriesRaw === "object"
|
|
? [windowsDiskEntriesRaw]
|
|
: []
|
|
const linuxLsblk = linuxExt?.lsblk ?? []
|
|
const linuxSmartEntries = linuxExt?.smart ?? []
|
|
const normalizedHardwareGpus = Array.isArray(hardware?.gpus)
|
|
? hardware.gpus.map((gpu) => normalizeGpuSource(gpu)).filter((gpu): gpu is GpuAdapter => Boolean(gpu))
|
|
: []
|
|
const hardwarePrimaryGpu = hardware?.primaryGpu ? normalizeGpuSource(hardware.primaryGpu) : null
|
|
|
|
const windowsCpuRaw = windowsExt?.cpu
|
|
const winCpu = windowsCpuRaw
|
|
? (Array.isArray(windowsCpuRaw) ? windowsCpuRaw[0] ?? null : windowsCpuRaw)
|
|
: null
|
|
const winMemTotal = windowsMemoryModules.reduce((acc, module) => acc + (parseBytesLike(module?.Capacity) ?? 0), 0)
|
|
const normalizedWindowsGpus = windowsVideoControllers
|
|
.map((controller) => normalizeGpuSource(controller))
|
|
.filter((gpu): gpu is GpuAdapter => Boolean(gpu))
|
|
const combinedGpus = uniqueBy(
|
|
[
|
|
...(hardwarePrimaryGpu ? [hardwarePrimaryGpu] : []),
|
|
...normalizedHardwareGpus,
|
|
...normalizedWindowsGpus,
|
|
],
|
|
(gpu) => `${gpu.name ?? ""}|${gpu.vendor ?? ""}|${gpu.driver ?? ""}`
|
|
)
|
|
const displayGpus = [...combinedGpus].sort(
|
|
(a, b) => (b.memoryBytes ?? 0) - (a.memoryBytes ?? 0)
|
|
)
|
|
const primaryGpu = hardwarePrimaryGpu ?? displayGpus[0] ?? null
|
|
const windowsPrimaryGpu = [...normalizedWindowsGpus].sort(
|
|
(a, b) => (b.memoryBytes ?? 0) - (a.memoryBytes ?? 0)
|
|
)[0] ?? null
|
|
const windowsCpuDetails = windowsCpuRaw
|
|
? Array.isArray(windowsCpuRaw)
|
|
? windowsCpuRaw
|
|
: [windowsCpuRaw]
|
|
: []
|
|
const windowsServices = windowsExt?.services ?? []
|
|
const windowsSoftware = windowsExt?.software ?? []
|
|
const winDiskStats = windowsDiskEntries.length > 0
|
|
? {
|
|
count: windowsDiskEntries.length,
|
|
total: windowsDiskEntries.reduce((acc, disk) => acc + (parseBytesLike(disk?.Size) ?? 0), 0),
|
|
}
|
|
: { count: 0, total: 0 }
|
|
|
|
const lastHeartbeatDate = machine?.lastHeartbeatAt ? new Date(machine.lastHeartbeatAt) : null
|
|
const tokenExpiry = machine?.token?.expiresAt ? new Date(machine.token.expiresAt) : null
|
|
const tokenLastUsed = machine?.token?.lastUsedAt ? new Date(machine.token.lastUsedAt) : null
|
|
|
|
const copyEmail = async () => {
|
|
if (!machine?.authEmail) return
|
|
try {
|
|
await navigator.clipboard.writeText(machine.authEmail)
|
|
toast.success("E-mail da máquina copiado.")
|
|
} catch {
|
|
toast.error("Não foi possível copiar o e-mail da máquina.")
|
|
}
|
|
}
|
|
|
|
// collaborator (from machine assignment or metadata)
|
|
type Collaborator = { email?: string; name?: string; role?: string }
|
|
const collaborator: Collaborator | null = useMemo(() => {
|
|
if (machine?.assignedUserEmail) {
|
|
return {
|
|
email: machine.assignedUserEmail ?? undefined,
|
|
name: machine.assignedUserName ?? undefined,
|
|
role: machine.persona ?? machine.assignedUserRole ?? undefined,
|
|
}
|
|
}
|
|
if (!metadata || typeof metadata !== "object") return null
|
|
const inv = metadata as Record<string, unknown>
|
|
const c = inv["collaborator"]
|
|
if (c && typeof c === "object") {
|
|
const base = c as Record<string, unknown>
|
|
return {
|
|
email: typeof base.email === "string" ? base.email : undefined,
|
|
name: typeof base.name === "string" ? base.name : undefined,
|
|
role: typeof base.role === "string" ? (base.role as string) : undefined,
|
|
}
|
|
}
|
|
return null
|
|
}, [machine?.assignedUserEmail, machine?.assignedUserName, machine?.persona, machine?.assignedUserRole, metadata])
|
|
|
|
const personaLabel = collaborator?.role === "manager" ? "Gestor" : "Colaborador"
|
|
|
|
const companyName = (() => {
|
|
if (!companies || !machine?.companySlug) return machine?.companySlug ?? null
|
|
const found = companies.find((c) => c.slug === machine.companySlug)
|
|
return found?.name ?? machine.companySlug
|
|
})()
|
|
|
|
const [renaming, setRenaming] = useState(false)
|
|
const [newName, setNewName] = useState<string>(machine?.hostname ?? "")
|
|
|
|
const [openDialog, setOpenDialog] = useState(false)
|
|
const [dialogQuery, setDialogQuery] = useState("")
|
|
const [deleteDialog, setDeleteDialog] = useState(false)
|
|
const [deleting, setDeleting] = useState(false)
|
|
const [accessDialog, setAccessDialog] = useState(false)
|
|
const [accessEmail, setAccessEmail] = useState<string>(collaborator?.email ?? "")
|
|
const [accessName, setAccessName] = useState<string>(collaborator?.name ?? "")
|
|
const [accessRole, setAccessRole] = useState<"collaborator" | "manager">(
|
|
(machine?.persona === "manager" || collaborator?.role === "manager") ? "manager" : "collaborator"
|
|
)
|
|
const [savingAccess, setSavingAccess] = useState(false)
|
|
const jsonText = useMemo(() => {
|
|
const payload = {
|
|
id: machine?.id,
|
|
hostname: machine?.hostname,
|
|
status: machine?.status,
|
|
lastHeartbeatAt: machine?.lastHeartbeatAt,
|
|
metrics,
|
|
inventory: metadata,
|
|
postureAlerts: machine?.postureAlerts ?? null,
|
|
lastPostureAt: machine?.lastPostureAt ?? null,
|
|
}
|
|
return JSON.stringify(payload, null, 2)
|
|
}, [machine, metrics, metadata])
|
|
|
|
const filteredJsonHtml = useMemo(() => {
|
|
if (!dialogQuery.trim()) return jsonText
|
|
const q = dialogQuery.trim().toLowerCase()
|
|
// highlight simples
|
|
return jsonText.replace(new RegExp(q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"), (m) => `__HIGHLIGHT__${m}__END__`)
|
|
}, [jsonText, dialogQuery])
|
|
|
|
// removed copy/export inventory JSON buttons as requested
|
|
useEffect(() => {
|
|
setAccessEmail(collaborator?.email ?? "")
|
|
setAccessName(collaborator?.name ?? "")
|
|
setAccessRole((machine?.persona === "manager" || collaborator?.role === "manager") ? "manager" : "collaborator")
|
|
}, [machine?.id, machine?.persona, collaborator?.email, collaborator?.name, collaborator?.role])
|
|
|
|
const handleSaveAccess = async () => {
|
|
if (!machine) return
|
|
if (!accessEmail.trim()) {
|
|
toast.error("Informe o e-mail do colaborador ou gestor.")
|
|
return
|
|
}
|
|
setSavingAccess(true)
|
|
try {
|
|
const response = await fetch("/api/admin/machines/access", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
machineId: machine.id,
|
|
persona: accessRole,
|
|
email: accessEmail.trim(),
|
|
name: accessName.trim() || undefined,
|
|
}),
|
|
})
|
|
if (!response.ok) {
|
|
throw new Error(await response.text())
|
|
}
|
|
toast.success("Perfil de acesso atualizado.")
|
|
setAccessDialog(false)
|
|
} catch (error) {
|
|
console.error(error)
|
|
toast.error("Falha ao atualizar acesso da máquina.")
|
|
} finally {
|
|
setSavingAccess(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="border-slate-200">
|
|
<CardHeader>
|
|
<CardTitle>Detalhes</CardTitle>
|
|
<CardDescription>Resumo da máquina selecionada.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{!machine ? (
|
|
<p className="text-sm text-muted-foreground">Selecione uma máquina para visualizar detalhes.</p>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<section className="space-y-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="space-y-1">
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="break-words text-2xl font-semibold text-neutral-900">{machine.hostname}</h1>
|
|
<Button size="icon" variant="ghost" className="size-7" onClick={() => { setNewName(machine.hostname); setRenaming(true) }}>
|
|
<Pencil className="size-4" />
|
|
<span className="sr-only">Renomear máquina</span>
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{machine.authEmail ?? "E-mail não definido"}
|
|
</p>
|
|
{machine.companySlug ? (
|
|
<p className="text-xs text-muted-foreground">
|
|
Empresa vinculada: <span className="font-medium text-foreground">{companyName ?? machine.companySlug}</span>
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
<MachineStatusBadge status={machine.status} />
|
|
</div>
|
|
{/* ping integrado na badge de status */}
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
<span className="mr-2 inline-flex items-center"><OsIcon osName={machine.osName} /></span>
|
|
{machine.osName ?? "SO desconhecido"} {machine.osVersion ?? ""}
|
|
</Badge>
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
{machine.architecture?.toUpperCase() ?? "Arquitetura indefinida"}
|
|
</Badge>
|
|
{windowsExt?.osInfo ? (
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
Build: {String(windowsExt.osInfo?.CurrentBuildNumber ?? windowsExt.osInfo?.CurrentBuild ?? "—")}
|
|
</Badge>
|
|
) : null}
|
|
{windowsExt?.osInfo ? (
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
Ativado: {windowsExt.osInfo?.IsActivated === true ? "Sim" : "Não"}
|
|
</Badge>
|
|
) : null}
|
|
{primaryGpu?.name ? (
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
GPU: {primaryGpu.name}
|
|
{typeof primaryGpu.memoryBytes === "number" ? ` · ${formatBytes(primaryGpu.memoryBytes)}` : ""}
|
|
</Badge>
|
|
) : null}
|
|
{companyName ? (
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
Empresa: {companyName}
|
|
</Badge>
|
|
) : null}
|
|
{collaborator?.email ? (
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
{personaLabel}: {collaborator?.name ? `${collaborator.name} · ` : ""}{collaborator.email}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{machine.authEmail ? (
|
|
<Button size="sm" variant="outline" onClick={copyEmail} className="gap-2 border-dashed">
|
|
<ClipboardCopy className="size-4" />
|
|
Copiar e-mail
|
|
</Button>
|
|
) : null}
|
|
<Button size="sm" variant="outline" className="gap-2 border-dashed" onClick={() => { setAccessDialog(true) }}>
|
|
<ShieldCheck className="size-4" />
|
|
Ajustar acesso
|
|
</Button>
|
|
{machine.registeredBy ? (
|
|
<Badge variant="outline" className="h-7 border-slate-300 bg-slate-100 px-3 text-sm font-medium text-slate-700">
|
|
Registrada via {machine.registeredBy}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Renomear máquina */}
|
|
<Dialog open={renaming} onOpenChange={setRenaming}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Renomear máquina</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="grid gap-3 py-2">
|
|
<Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="Novo hostname" />
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setRenaming(false)}>Cancelar</Button>
|
|
<Button
|
|
onClick={async () => {
|
|
if (!machine) return
|
|
const name = (newName ?? "").trim()
|
|
if (name.length < 2) {
|
|
toast.error("Informe um nome válido")
|
|
return
|
|
}
|
|
try {
|
|
const res = await fetch("/api/admin/machines/rename", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineId: machine.id, hostname: name }),
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
toast.success("Máquina renomeada")
|
|
setRenaming(false)
|
|
} catch (err) {
|
|
console.error(err)
|
|
toast.error("Falha ao renomear máquina")
|
|
}
|
|
}}
|
|
>
|
|
Salvar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={accessDialog} onOpenChange={setAccessDialog}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Ajustar acesso da máquina</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="grid gap-3 py-2">
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Perfil</label>
|
|
<Select value={accessRole} onValueChange={(value) => setAccessRole((value as "collaborator" | "manager") ?? "collaborator")}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Selecione o perfil" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="collaborator">Colaborador (portal)</SelectItem>
|
|
<SelectItem value="manager">Gestor (painel completo)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">E-mail</label>
|
|
<Input type="email" value={accessEmail} onChange={(e) => setAccessEmail(e.target.value)} placeholder="colaborador@empresa.com" />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Nome (opcional)</label>
|
|
<Input value={accessName} onChange={(e) => setAccessName(e.target.value)} placeholder="Nome completo" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setAccessDialog(false)} disabled={savingAccess}>Cancelar</Button>
|
|
<Button onClick={handleSaveAccess} disabled={savingAccess || !accessEmail.trim()}>
|
|
{savingAccess ? "Salvando..." : "Salvar"}
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Sincronização</h4>
|
|
<div className="grid gap-2 text-sm text-muted-foreground">
|
|
<div className="flex justify-between gap-4">
|
|
<span>Último heartbeat</span>
|
|
<span className="text-right font-medium text-foreground">
|
|
{formatRelativeTime(lastHeartbeatDate)}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Criada em</span>
|
|
<span className="text-right font-medium text-foreground">{formatDate(new Date(machine.createdAt))}</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Atualizada em</span>
|
|
<span className="text-right font-medium text-foreground">{formatDate(new Date(machine.updatedAt))}</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Token expira</span>
|
|
<span className="text-right font-medium text-foreground">
|
|
{tokenExpiry ? formatRelativeTime(tokenExpiry) : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Token usado por último</span>
|
|
<span className="text-right font-medium text-foreground">
|
|
{tokenLastUsed ? formatRelativeTime(tokenLastUsed) : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span>Uso do token</span>
|
|
<span className="text-right font-medium text-foreground">{machine.token?.usageCount ?? 0} trocas</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{metrics && typeof metrics === "object" ? (
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Métricas recentes</h4>
|
|
<MetricsGrid metrics={metrics} />
|
|
</section>
|
|
) : null}
|
|
|
|
{hardware || network || (labels && labels.length > 0) ? (
|
|
<section className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-semibold">Inventário</h4>
|
|
<p className="text-xs text-muted-foreground">
|
|
Dados sincronizados via agente ou Fleet.
|
|
</p>
|
|
</div>
|
|
<div className="space-y-3 text-sm text-muted-foreground">
|
|
{hardware ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Hardware</p>
|
|
<div className="mt-2 grid gap-1">
|
|
<DetailLine label="Fabricante" value={hardware.vendor} />
|
|
<DetailLine label="Modelo" value={hardware.model} />
|
|
<DetailLine label="Número de série" value={hardware.serial} />
|
|
<DetailLine label="CPU" value={hardware.cpuType} />
|
|
<DetailLine
|
|
label="Núcleos"
|
|
value={`${hardware.physicalCores ?? "?"} físicos / ${hardware.logicalCores ?? "?"} lógicos`}
|
|
/>
|
|
<DetailLine label="Memória" value={formatBytes(Number(hardware.memoryBytes ?? hardware.memory))} />
|
|
{displayGpus.length > 0 ? (
|
|
<div className="mt-2 space-y-1 text-xs text-muted-foreground">
|
|
<p className="font-semibold uppercase text-slate-500">GPUs</p>
|
|
<ul className="space-y-1">
|
|
{displayGpus.slice(0, 3).map((gpu, idx) => {
|
|
const { name, memoryBytes, driver, vendor } = gpu
|
|
return (
|
|
<li key={`gpu-${idx}`}>
|
|
<span className="font-medium text-foreground">{name ?? "Adaptador de vídeo"}</span>
|
|
{memoryBytes ? <span className="ml-1 text-muted-foreground">{formatBytes(memoryBytes)}</span> : null}
|
|
{vendor ? <span className="ml-1 text-muted-foreground">· {vendor}</span> : null}
|
|
{driver ? <span className="ml-1 text-muted-foreground">· Driver {driver}</span> : null}
|
|
</li>
|
|
)
|
|
})}
|
|
{displayGpus.length > 3 ? (
|
|
<li className="text-muted-foreground">+{displayGpus.length - 3} adaptadores adicionais</li>
|
|
) : null}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{networkInterfaces ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Rede (interfaces)</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Interface</TableHead>
|
|
<TableHead className="text-xs text-slate-500">MAC</TableHead>
|
|
<TableHead className="text-xs text-slate-500">IP</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{networkInterfaces.map((iface, idx) => (
|
|
<TableRow key={`iface-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{iface?.name ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{iface?.mac ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{iface?.ip ?? "—"}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : networkSummary ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Rede</p>
|
|
<div className="mt-2 grid gap-1">
|
|
<DetailLine label="IP primário" value={networkSummary.primaryIp} />
|
|
<DetailLine label="IP público" value={networkSummary.publicIp} />
|
|
<DetailLine
|
|
label="MAC addresses"
|
|
value={
|
|
Array.isArray(networkSummary.macAddresses)
|
|
? networkSummary.macAddresses.join(", ")
|
|
: machine?.macAddresses.join(", ")
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{labels && labels.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Labels</p>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{labels.slice(0, 12).map((label, index) => (
|
|
<Badge key={String(label.id ?? `${label.name ?? "label"}-${index}`)} variant="outline">
|
|
{label.name ?? `Label ${index + 1}`}
|
|
</Badge>
|
|
))}
|
|
{labels.length > 12 ? (
|
|
<Badge variant="outline">+{labels.length - 12} outras</Badge>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{/* Discos (agente) */}
|
|
{disks.length > 0 ? (
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Discos e partições</h4>
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Mount</TableHead>
|
|
<TableHead className="text-xs text-slate-500">FS</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Capacidade</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Livre</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{disks.map((d, idx) => (
|
|
<TableRow key={`disk-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{d.name ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{d.mountPoint ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{d.fs ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-foreground">{formatBytes(Number(d.totalBytes))}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{formatBytes(Number(d.availableBytes))}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{/* Inventário estendido por SO */}
|
|
{extended ? (
|
|
<section className="space-y-3">
|
|
<div>
|
|
<h4 className="text-sm font-semibold">Inventário estendido</h4>
|
|
<p className="text-xs text-muted-foreground">Dados ricos coletados pelo agente, variam por sistema operacional.</p>
|
|
</div>
|
|
|
|
{/* Linux */}
|
|
{linuxExt ? (
|
|
<div className="space-y-3">
|
|
{linuxLsblk.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Montagens (lsblk)</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Ponto de montagem</TableHead>
|
|
<TableHead className="text-xs text-slate-500">FS</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Tamanho</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{linuxLsblk.slice(0, 18).map((entry, idx) => {
|
|
const name = entry.name ?? "—"
|
|
const mp = entry.mountPoint ?? entry.mountpoint ?? "—"
|
|
const fs = entry.fs ?? entry.fstype ?? "—"
|
|
const sizeRaw = typeof entry.sizeBytes === "number" ? entry.sizeBytes : entry.size
|
|
return (
|
|
<TableRow key={`lsblk-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm text-foreground">{name}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{mp || "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{fs || "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{typeof sizeRaw === "number" ? formatBytes(sizeRaw) : "—"}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{linuxSmartEntries.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-emerald-50/40 p-3 dark:bg-emerald-900/10">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">SMART</p>
|
|
<div className="mt-2 grid gap-2">
|
|
{linuxSmartEntries.map((smartEntry, idx) => {
|
|
const ok = smartEntry.smart_status?.passed !== false
|
|
const model = smartEntry.model_name ?? smartEntry.model_family ?? "Disco"
|
|
const serial = smartEntry.serial_number ?? smartEntry.device?.name ?? "—"
|
|
return (
|
|
<div
|
|
key={`smart-${idx}`}
|
|
className={cn(
|
|
"flex items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm",
|
|
ok
|
|
? "border-emerald-500/20 bg-emerald-500/15 text-emerald-700"
|
|
: "border-rose-500/20 bg-rose-500/15 text-rose-700"
|
|
)}
|
|
>
|
|
<span className="font-medium text-foreground">
|
|
{model} <span className="text-muted-foreground">({serial})</span>
|
|
</span>
|
|
<Badge variant="outline" className="text-xs uppercase">
|
|
{ok ? "OK" : "ALERTA"}
|
|
</Badge>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{linuxExt.lspci ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">PCI</p>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words text-xs text-muted-foreground">{linuxExt.lspci}</pre>
|
|
</div>
|
|
) : null}
|
|
{linuxExt.lsusb ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">USB</p>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words text-xs text-muted-foreground">{linuxExt.lsusb}</pre>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Windows */}
|
|
{windowsExt ? (
|
|
<div className="space-y-3">
|
|
{/* Cards resumidos: CPU / RAM / GPU / Discos */}
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<Cpu className="size-5 text-slate-500" />
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-muted-foreground">CPU</p>
|
|
<p className="break-words text-sm font-semibold text-foreground">{winCpu?.Name ?? "—"}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<MemoryStick className="size-5 text-slate-500" />
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Memória total</p>
|
|
<p className="text-sm font-semibold text-foreground">{formatBytes(winMemTotal)}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<Monitor className="size-5 text-slate-500" />
|
|
<div className="min-w-0">
|
|
<p className="truncate text-xs text-muted-foreground">GPU</p>
|
|
<p className="truncate text-sm font-semibold text-foreground">{(windowsPrimaryGpu ?? primaryGpu)?.name ?? "—"}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-slate-200">
|
|
<CardContent className="flex items-center gap-3 py-3">
|
|
<HardDrive className="size-5 text-slate-500" />
|
|
<div>
|
|
<p className="text-xs text-muted-foreground">Discos</p>
|
|
<p className="text-sm font-semibold text-foreground">{winDiskStats.count} · {formatBytes(winDiskStats.total)}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
{windowsCpuDetails.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">CPU</p>
|
|
{windowsCpuDetails.slice(0, 1).map((cpuRecord, idx) => (
|
|
<div key={`cpu-${idx}`} className="mt-2 grid gap-1 text-sm text-muted-foreground">
|
|
<DetailLine label="Modelo" value={cpuRecord?.Name ?? "—"} classNameValue="break-words" />
|
|
<DetailLine label="Fabricante" value={cpuRecord?.Manufacturer ?? "—"} />
|
|
<DetailLine label="Socket" value={cpuRecord?.SocketDesignation ?? "—"} />
|
|
<DetailLine label="Núcleos" value={cpuRecord?.NumberOfCores != null ? `${cpuRecord.NumberOfCores}` : "—"} />
|
|
<DetailLine label="Threads" value={cpuRecord?.NumberOfLogicalProcessors != null ? `${cpuRecord.NumberOfLogicalProcessors}` : "—"} />
|
|
<DetailLine label="L2" value={cpuRecord?.L2CacheSize != null ? `${cpuRecord.L2CacheSize} KB` : "—"} />
|
|
<DetailLine label="L3" value={cpuRecord?.L3CacheSize != null ? `${cpuRecord.L3CacheSize} KB` : "—"} />
|
|
<DetailLine label="Clock máx" value={cpuRecord?.MaxClockSpeed != null ? `${cpuRecord.MaxClockSpeed} MHz` : "—"} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsExt.baseboard || windowsExt.bios ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Placa-mãe / BIOS</p>
|
|
<div className="mt-2 grid gap-1 text-sm text-muted-foreground">
|
|
{(() => {
|
|
const b = Array.isArray(windowsExt.baseboard) ? windowsExt.baseboard[0] : windowsExt.baseboard
|
|
const bios = Array.isArray(windowsExt.bios) ? windowsExt.bios[0] : windowsExt.bios
|
|
return (
|
|
<>
|
|
<DetailLine label="Board" value={b ? `${String(b?.["Manufacturer"] ?? "")} ${String(b?.["Product"] ?? "")}`.trim() : "—"} />
|
|
<DetailLine label="Board SN" value={b ? String(b?.["SerialNumber"] ?? "—") : "—"} />
|
|
<DetailLine label="BIOS" value={bios ? `${String(bios?.["Manufacturer"] ?? "")} ${String(bios?.["SMBIOSBIOSVersion"] ?? "")}`.trim() : "—"} />
|
|
</>
|
|
)
|
|
})()}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
{windowsServices.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Serviços</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Exibição</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsServices.slice(0, 10).map((service, index) => {
|
|
const record = toRecord(service) ?? {}
|
|
const name = readString(record, "Name", "name") ?? "—"
|
|
const displayName = readString(record, "DisplayName", "displayName") ?? "—"
|
|
const status = readString(record, "Status", "status") ?? "—"
|
|
return (
|
|
<TableRow key={`svc-${index}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{name}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{displayName}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{status}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsSoftware.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Softwares (amostra)</p>
|
|
<ul className="mt-2 grid gap-1 text-xs text-muted-foreground">
|
|
{windowsSoftware.slice(0, 8).map((softwareItem, index) => {
|
|
const record = toRecord(softwareItem) ?? {}
|
|
const name = readString(record, "DisplayName", "name") ?? "—"
|
|
const version = readString(record, "DisplayVersion", "version")
|
|
const publisher = readString(record, "Publisher")
|
|
return (
|
|
<li key={`sw-${index}`}>
|
|
<span className="font-medium text-foreground">{name}</span>
|
|
{version ? <span className="ml-1">{version}</span> : null}
|
|
{publisher ? <span className="ml-1">· {publisher}</span> : null}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsMemoryModules.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Módulos de memória</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Banco</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Capacidade</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Fabricante</TableHead>
|
|
<TableHead className="text-xs text-slate-500">PartNumber</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Clock</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsMemoryModules.map((module, idx) => {
|
|
const record = toRecord(module) ?? {}
|
|
const bank = readString(record, "BankLabel", "bankLabel") ?? "—"
|
|
const capacityBytes =
|
|
parseBytesLike(record["Capacity"]) ?? parseBytesLike(record["capacity"]) ?? 0
|
|
const manufacturer = readString(record, "Manufacturer", "manufacturer") ?? "—"
|
|
const partNumber = readString(record, "PartNumber", "partNumber") ?? "—"
|
|
const clockValue = readNumber(
|
|
record,
|
|
"ConfiguredClockSpeed",
|
|
"configuredClockSpeed",
|
|
"Speed",
|
|
"speed"
|
|
)
|
|
const clockLabel =
|
|
typeof clockValue === "number" && Number.isFinite(clockValue)
|
|
? `${clockValue} MHz`
|
|
: "—"
|
|
return (
|
|
<TableRow key={`mem-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{bank}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{capacityBytes > 0 ? formatBytes(capacityBytes) : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{manufacturer}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{partNumber}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{clockLabel}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsVideoControllers.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Adaptadores de vídeo</p>
|
|
<ul className="mt-2 grid gap-1 text-xs text-muted-foreground">
|
|
{windowsVideoControllers.map((controller, idx) => {
|
|
const record = toRecord(controller) ?? {}
|
|
const normalized = normalizeGpuSource(record)
|
|
const name =
|
|
normalized?.name ??
|
|
readString(record, "Name", "name") ??
|
|
"—"
|
|
const ram =
|
|
normalized?.memoryBytes ??
|
|
parseBytesLike(record["AdapterRAM"]) ??
|
|
undefined
|
|
const driver = normalized?.driver ?? readString(record, "DriverVersion", "driverVersion")
|
|
const vendor = normalized?.vendor ?? readString(record, "AdapterCompatibility")
|
|
return (
|
|
<li key={`vid-${idx}`}>
|
|
<span className="font-medium text-foreground">{name}</span>
|
|
{typeof ram === "number" && ram > 0 ? <span className="ml-1">{formatBytes(ram)}</span> : null}
|
|
{vendor ? <span className="ml-1 text-muted-foreground">· {vendor}</span> : null}
|
|
{driver ? <span className="ml-1">· Driver {driver}</span> : null}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsDiskEntries.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Discos físicos</p>
|
|
<div className="mt-2 overflow-hidden rounded-md border border-slate-200">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Modelo</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Tamanho</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Interface</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Tipo</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Serial</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{windowsDiskEntries.map((disk, idx) => {
|
|
const record = toRecord(disk) ?? {}
|
|
const model = readString(record, "Model", "model")
|
|
const serial = readString(record, "SerialNumber", "serialNumber")
|
|
const size = parseBytesLike(record["Size"])
|
|
const iface = readString(record, "InterfaceType", "interfaceType")
|
|
const media = readString(record, "MediaType", "mediaType")
|
|
return (
|
|
<TableRow key={`diskp-${idx}`} className="border-slate-100">
|
|
<TableCell className="text-sm">{model ?? serial ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
{typeof size === "number" && size > 0 ? formatBytes(size) : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{iface ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{media ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{serial ?? "—"}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{windowsExt.defender ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Defender</p>
|
|
<div className="mt-2 flex flex-wrap gap-2 text-xs">
|
|
{readBool(windowsExt.defender, "AntivirusEnabled") === true ? (
|
|
<Badge className="gap-1 border-emerald-500/20 bg-emerald-500/15 text-emerald-700">
|
|
<ShieldCheck className="size-3" /> Antivírus: Ativo
|
|
</Badge>
|
|
) : (
|
|
<Badge className="gap-1 border-rose-500/20 bg-rose-500/15 text-rose-700">
|
|
<ShieldAlert className="size-3" /> Antivírus: Inativo
|
|
</Badge>
|
|
)}
|
|
{readBool(windowsExt.defender, "RealTimeProtectionEnabled") === true ? (
|
|
<Badge className="gap-1 border-emerald-500/20 bg-emerald-500/15 text-emerald-700">
|
|
<ShieldCheck className="size-3" /> Proteção em tempo real: Ativa
|
|
</Badge>
|
|
) : (
|
|
<Badge className="gap-1 border-rose-500/20 bg-rose-500/15 text-rose-700">
|
|
<ShieldAlert className="size-3" /> Proteção em tempo real: Inativa
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* macOS */}
|
|
{macosExt ? (
|
|
<div className="space-y-3">
|
|
{Array.isArray(macosExt.packages) && macosExt.packages.length > 0 ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Pacotes</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">{macosExt.packages.slice(0, 8).join(", ")}</p>
|
|
</div>
|
|
) : null}
|
|
{macosExt.launchctl ? (
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60 p-3">
|
|
<p className="text-xs font-semibold uppercase text-slate-500">Launchctl</p>
|
|
<pre className="mt-2 whitespace-pre-wrap break-words text-xs text-muted-foreground">{macosExt.launchctl}</pre>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
) : null}
|
|
|
|
{/* Postura/Alertas */}
|
|
{Array.isArray(machine?.postureAlerts) && machine?.postureAlerts?.length ? (
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Alertas de postura</h4>
|
|
<div className="space-y-2">
|
|
{machine?.postureAlerts?.map((a: { kind?: string; message?: string; severity?: string }, i: number) => (
|
|
<div key={`alert-${i}`} className={cn("flex items-center justify-between rounded-md border px-3 py-2 text-sm",
|
|
(a?.severity ?? "warning").toLowerCase() === "critical" ? "border-rose-500/20 bg-rose-500/10" : "border-amber-500/20 bg-amber-500/10")
|
|
}>
|
|
<span className="font-medium text-foreground">{a?.message ?? a?.kind ?? "Alerta"}</span>
|
|
<Badge variant="outline">{String(a?.kind ?? "ALERTA")}</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
Última avaliação: {machine?.lastPostureAt ? formatRelativeTime(new Date(machine.lastPostureAt)) : "—"}
|
|
</p>
|
|
</section>
|
|
) : null}
|
|
|
|
<div className="flex flex-wrap gap-2 pt-2">
|
|
{Array.isArray(software) && software.length > 0 ? (
|
|
<Button size="sm" variant="outline" onClick={() => exportCsv(software, "softwares.csv")}>Softwares CSV</Button>
|
|
) : null}
|
|
{Array.isArray(metadata?.services) && metadata.services.length > 0 ? (
|
|
<Button size="sm" variant="outline" onClick={() => exportCsv(metadata.services as Array<Record<string, unknown>>, "servicos.csv")}>Serviços CSV</Button>
|
|
) : null}
|
|
</div>
|
|
{fleet ? (
|
|
<section className="space-y-2 text-sm text-muted-foreground">
|
|
<Separator />
|
|
<div className="flex items-center justify-between">
|
|
<span>ID Fleet</span>
|
|
<span className="font-medium text-foreground">{fleet.id ?? "—"}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span>Team ID</span>
|
|
<span className="font-medium text-foreground">{fleet.teamId ?? "—"}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span>Detalhes atualizados</span>
|
|
<span className="font-medium text-foreground">
|
|
{fleet.detailUpdatedAt ? formatDate(new Date(String(fleet.detailUpdatedAt))) : "—"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span>Versão osquery</span>
|
|
<span className="font-medium text-foreground">{fleet.osqueryVersion ?? "—"}</span>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{software && software.length > 0 ? (
|
|
<section className="space-y-2">
|
|
<h4 className="text-sm font-semibold">Softwares detectados</h4>
|
|
<div className="rounded-md border border-slate-200 bg-slate-50/60">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-200 bg-slate-100/80">
|
|
<TableHead className="text-xs text-slate-500">Nome</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Versão</TableHead>
|
|
<TableHead className="text-xs text-slate-500">Fonte</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{software.slice(0, 6).map((item, index) => (
|
|
<TableRow key={`${item.name ?? "software"}-${index}`} className="border-slate-100">
|
|
<TableCell className="text-sm text-foreground">{item.name ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{item.version ?? "—"}</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">{item.source ?? "—"}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
{software.length > 6 ? (
|
|
<p className="px-3 py-2 text-xs text-muted-foreground">
|
|
+{software.length - 6} softwares adicionais sincronizados via Fleet.
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
{machine ? (
|
|
<section className="space-y-2 rounded-md border border-rose-200 bg-rose-50/60 p-3">
|
|
<div className="space-y-1">
|
|
<h4 className="text-sm font-semibold text-rose-700">Zona perigosa</h4>
|
|
<p className="text-xs text-rose-600">
|
|
Excluir a máquina revoga o token atual e remove os dados de inventário sincronizados.
|
|
</p>
|
|
</div>
|
|
<Button variant="destructive" size="sm" onClick={() => setDeleteDialog(true)}>Excluir máquina</Button>
|
|
</section>
|
|
) : null}
|
|
|
|
<Dialog open={openDialog} onOpenChange={setOpenDialog}>
|
|
<div className="flex justify-end">
|
|
<DialogTrigger asChild>
|
|
<Button size="sm" variant="outline" onClick={() => setOpenDialog(true)}>Inventário completo</Button>
|
|
</DialogTrigger>
|
|
</div>
|
|
<DialogContent className="max-w-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Inventário completo — {machine.hostname}</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-2">
|
|
<Input placeholder="Buscar no JSON" value={dialogQuery} onChange={(e) => setDialogQuery(e.target.value)} />
|
|
<div className="max-h-[60vh] overflow-auto rounded-md border border-slate-200 bg-slate-50/60 p-3 text-xs">
|
|
<pre className="whitespace-pre-wrap break-words text-muted-foreground" dangerouslySetInnerHTML={{ __html: filteredJsonHtml
|
|
.replaceAll("__HIGHLIGHT__", '<mark class="bg-yellow-200 text-foreground">')
|
|
.replaceAll("__END__", '</mark>')
|
|
}} />
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Dialog open={deleteDialog} onOpenChange={(open) => { if (!open) setDeleting(false); setDeleteDialog(open) }}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Excluir máquina</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-3 text-sm text-muted-foreground">
|
|
<p>Tem certeza que deseja excluir <span className="font-semibold text-foreground">{machine?.hostname}</span>? Esta ação não pode ser desfeita.</p>
|
|
<p>Os tokens ativos serão revogados e o inventário deixará de aparecer no painel.</p>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setDeleteDialog(false)} disabled={deleting}>Cancelar</Button>
|
|
<Button
|
|
variant="destructive"
|
|
disabled={deleting}
|
|
onClick={async () => {
|
|
if (!machine) return
|
|
setDeleting(true)
|
|
try {
|
|
const res = await fetch("/api/admin/machines/delete", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineId: machine.id }),
|
|
})
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
|
toast.success("Máquina excluída")
|
|
setDeleteDialog(false)
|
|
router.push("/admin/machines")
|
|
} catch (err) {
|
|
console.error(err)
|
|
toast.error("Falha ao excluir máquina")
|
|
} finally {
|
|
setDeleting(false)
|
|
}
|
|
}}
|
|
>
|
|
{deleting ? "Excluindo..." : "Excluir máquina"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function MachinesGrid({ machines, companyNameBySlug }: { machines: MachinesQueryItem[]; companyNameBySlug: Map<string, string> }) {
|
|
if (!machines || machines.length === 0) return <EmptyState />
|
|
return (
|
|
<div className="grid grid-cols-1 gap-3 [@supports(display:grid)]:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">
|
|
{machines.map((m) => (
|
|
<MachineCard
|
|
key={m.id}
|
|
machine={m}
|
|
companyName={m.companySlug ? companyNameBySlug.get(m.companySlug) ?? m.companySlug : null}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MachineCard({ machine, companyName }: { machine: MachinesQueryItem; companyName?: string | null }) {
|
|
const { className } = getStatusVariant(machine.status)
|
|
const lastHeartbeat = machine.lastHeartbeatAt ? new Date(machine.lastHeartbeatAt) : null
|
|
type AgentMetrics = {
|
|
memoryUsedBytes?: number
|
|
memoryTotalBytes?: number
|
|
memoryUsedPercent?: number
|
|
cpuUsagePercent?: number
|
|
}
|
|
const mm = (machine.metrics ?? null) as unknown as AgentMetrics | null
|
|
const memUsed = mm?.memoryUsedBytes ?? NaN
|
|
const memTotal = mm?.memoryTotalBytes ?? NaN
|
|
const memPct = mm?.memoryUsedPercent ?? (Number.isFinite(memUsed) && Number.isFinite(memTotal) ? (Number(memUsed) / Number(memTotal)) * 100 : NaN)
|
|
const cpuPct = mm?.cpuUsagePercent ?? NaN
|
|
const collaborator = (() => {
|
|
if (machine.assignedUserEmail) {
|
|
return {
|
|
email: machine.assignedUserEmail ?? undefined,
|
|
name: machine.assignedUserName ?? undefined,
|
|
role: machine.persona ?? machine.assignedUserRole ?? undefined,
|
|
}
|
|
}
|
|
const inv = machine.inventory as unknown
|
|
if (!inv || typeof inv !== "object") return null
|
|
const raw = (inv as Record<string, unknown>).collaborator
|
|
if (!raw || typeof raw !== "object") return null
|
|
const obj = raw as Record<string, unknown>
|
|
const email = typeof obj.email === "string" ? obj.email : undefined
|
|
if (!email) return null
|
|
return {
|
|
email,
|
|
name: typeof obj.name === "string" ? obj.name : undefined,
|
|
role: typeof obj.role === "string" ? (obj.role as string) : undefined,
|
|
}
|
|
})()
|
|
const persona = collaborator?.role === "manager" ? "Gestor" : "Colaborador"
|
|
const companyLabel = companyName ?? machine.companySlug ?? null
|
|
|
|
return (
|
|
<Link href={`/admin/machines/${machine.id}`} className="group">
|
|
<Card className="relative h-full overflow-hidden border-slate-200 transition-colors hover:border-slate-300">
|
|
<div className="absolute right-2 top-2">
|
|
<span
|
|
aria-hidden
|
|
className={cn(
|
|
"relative block size-2 rounded-full",
|
|
className.includes("emerald")
|
|
? "bg-emerald-500"
|
|
: className.includes("rose")
|
|
? "bg-rose-500"
|
|
: className.includes("amber")
|
|
? "bg-amber-500"
|
|
: "bg-slate-400"
|
|
)}
|
|
/>
|
|
{String(machine.status ?? "").toLowerCase() === "online" ? (
|
|
<span className="absolute left-1/2 top-1/2 -z-10 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400/30 animate-ping" />
|
|
) : null}
|
|
</div>
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="line-clamp-1 flex items-center gap-2 text-base font-semibold">
|
|
<Monitor className="size-4 text-slate-500" /> {machine.hostname}
|
|
</CardTitle>
|
|
<CardDescription className="line-clamp-1 text-xs">{machine.authEmail ?? "—"}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex grow flex-col gap-3 text-sm">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline" className="border-slate-300 bg-slate-100 text-xs font-medium text-slate-700">
|
|
{machine.osName ?? "SO"} {machine.osVersion ?? ""}
|
|
</Badge>
|
|
{machine.architecture ? (
|
|
<Badge variant="outline" className="border-slate-300 bg-slate-100 text-xs font-medium text-slate-700">
|
|
{machine.architecture.toUpperCase()}
|
|
</Badge>
|
|
) : null}
|
|
{companyLabel ? (
|
|
<Badge variant="outline" className="text-xs">{companyLabel}</Badge>
|
|
) : null}
|
|
</div>
|
|
{collaborator?.email ? (
|
|
<p className="text-[11px] text-muted-foreground">
|
|
{persona}: {collaborator.name ? `${collaborator.name} · ` : ""}
|
|
{collaborator.email}
|
|
</p>
|
|
) : null}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50/80 px-2 py-1.5">
|
|
<Cpu className="size-4 text-slate-500" />
|
|
<span className="text-xs font-medium text-slate-800">{formatPercent(cpuPct)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50/80 px-2 py-1.5">
|
|
<MemoryStick className="size-4 text-slate-500" />
|
|
<span className="text-xs font-medium text-slate-800">
|
|
{Number.isFinite(memUsed) && Number.isFinite(memTotal)
|
|
? `${formatBytes(memUsed)} / ${formatBytes(memTotal)}`
|
|
: formatPercent(memPct)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-auto flex items-center justify-between text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1.5">
|
|
<HardDrive className="size-3.5 text-slate-500" />
|
|
{Array.isArray(machine.inventory?.disks) ? `${machine.inventory?.disks?.length ?? 0} discos` : "—"}
|
|
</span>
|
|
<span>
|
|
{lastHeartbeat ? formatRelativeTime(lastHeartbeat) : "sem heartbeat"}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function DetailLine({ label, value, classNameValue }: DetailLineProps) {
|
|
if (value === null || value === undefined) return null
|
|
if (typeof value === "string" && (value.trim() === "" || value === "undefined" || value === "null")) {
|
|
return null
|
|
}
|
|
return (
|
|
<div className="flex items-center justify-between gap-4">
|
|
<span>{label}</span>
|
|
<span className={cn("text-right font-medium text-foreground", classNameValue)}>{value}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MetricsGrid({ metrics }: { metrics: MachineMetrics }) {
|
|
const data = (metrics ?? {}) as Record<string, unknown>
|
|
// Compat: aceitar chaves do agente desktop (cpuUsagePercent, memoryUsedBytes, memoryTotalBytes)
|
|
const cpu = (() => {
|
|
const v = Number(
|
|
data.cpuUsage ?? data.cpu ?? data.cpu_percent ?? data.cpuUsagePercent ?? NaN
|
|
)
|
|
return v
|
|
})()
|
|
const memory = (() => {
|
|
// valor absoluto em bytes, se disponível
|
|
const memBytes = Number(
|
|
data.memoryBytes ?? data.memory ?? data.memory_used ?? data.memoryUsedBytes ?? NaN
|
|
)
|
|
if (Number.isFinite(memBytes)) return memBytes
|
|
// tentar derivar a partir de percentuais do agente
|
|
const usedPct = Number(data.memoryUsedPercent ?? NaN)
|
|
const totalBytes = Number(data.memoryTotalBytes ?? NaN)
|
|
if (Number.isFinite(usedPct) && Number.isFinite(totalBytes)) {
|
|
return Math.max(0, Math.min(1, usedPct > 1 ? usedPct / 100 : usedPct)) * totalBytes
|
|
}
|
|
return NaN
|
|
})()
|
|
const disk = Number(data.diskUsage ?? data.disk ?? NaN)
|
|
const gpuUsage = Number(
|
|
data.gpuUsage ?? data.gpu ?? data.gpuUsagePercent ?? data.gpu_percent ?? NaN
|
|
)
|
|
|
|
const cards: Array<{ label: string; value: string }> = [
|
|
{ label: "CPU", value: formatPercent(cpu) },
|
|
{ label: "Memória", value: formatBytes(memory) },
|
|
{ label: "Disco", value: Number.isNaN(disk) ? "—" : formatPercent(disk) },
|
|
]
|
|
|
|
if (!Number.isNaN(gpuUsage)) {
|
|
cards.push({ label: "GPU", value: formatPercent(gpuUsage) })
|
|
}
|
|
|
|
return (
|
|
<div className="grid gap-2 sm:grid-cols-3 md:grid-cols-4">
|
|
{cards.map((card) => (
|
|
<div key={card.label} className="rounded-md border border-slate-200 bg-slate-50/60 p-3 text-sm text-muted-foreground">
|
|
<p className="text-xs uppercase text-slate-500">{card.label}</p>
|
|
<p className="text-sm font-semibold text-foreground">{card.value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function exportCsv(items: Array<Record<string, unknown>>, filename: string) {
|
|
if (!Array.isArray(items) || items.length === 0) return
|
|
const headersSet = new Set<string>()
|
|
items.forEach((it) => Object.keys(it ?? {}).forEach((k) => headersSet.add(k)))
|
|
const headers = Array.from(headersSet)
|
|
const csv = [headers.join(",")]
|
|
for (const it of items) {
|
|
const row = headers
|
|
.map((h) => {
|
|
const v = (it as Record<string, unknown>)[h]
|
|
if (v === undefined || v === null) return ""
|
|
const s = typeof v === "string" ? v : JSON.stringify(v)
|
|
return `"${s.replace(/"/g, '""')}"`
|
|
})
|
|
.join(",")
|
|
csv.push(row)
|
|
}
|
|
const blob = new Blob([csv.join("\n")], { type: "text/csv;charset=utf-8;" })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement("a")
|
|
a.href = url
|
|
a.download = filename
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
a.remove()
|
|
URL.revokeObjectURL(url)
|
|
}
|