ui(machines): integrate pulsating dot inside status badge with spacing; add breadcrumbs; Defender badges; Linux lsblk table; search by company name via Convex; refine card heights
This commit is contained in:
Esdras Renan
parent
f89424c168
commit
ea46514da5
8 changed files with 432 additions and 38 deletions
|
|
@ -3,22 +3,12 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="color-scheme" content="light" />
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
<link rel="stylesheet" href="/src/index.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sistema de Chamados — Agente Desktop</title>
|
||||
<script type="module" src="/src/main.ts" defer></script>
|
||||
<script type="module" src="/src/main.tsx" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main id="app-root" class="app-root">
|
||||
<section class="card">
|
||||
<header>
|
||||
<h1>Sistema de Chamados</h1>
|
||||
<p class="subtitle">Agente desktop para provisionamento de máquinas</p>
|
||||
</header>
|
||||
<div id="alert-container" class="alert"></div>
|
||||
<div id="content"></div>
|
||||
<p id="status-text" class="status-text"></p>
|
||||
</section>
|
||||
</main>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,15 @@
|
|||
"dependencies": {
|
||||
"@tauri-apps/api": "^2",
|
||||
"@tauri-apps/plugin-opener": "^2",
|
||||
"@tauri-apps/plugin-store": "^2"
|
||||
"@tauri-apps/plugin-store": "^2",
|
||||
"lucide-react": "^0.544.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tauri-apps/cli": "^2",
|
||||
"vite": "^6.0.3",
|
||||
"typescript": "~5.6.2"
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
apps/desktop/src/index.css
Normal file
14
apps/desktop/src/index.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-slate-50 text-slate-900;
|
||||
}
|
||||
|
||||
287
apps/desktop/src/main.tsx
Normal file
287
apps/desktop/src/main.tsx
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
import React, { useEffect, useMemo, useState } from "react"
|
||||
import { createRoot } from "react-dom/client"
|
||||
import { invoke } from "@tauri-apps/api/core"
|
||||
import { Store } from "@tauri-apps/plugin-store"
|
||||
import { ExternalLink, Eye, EyeOff } from "lucide-react"
|
||||
|
||||
type MachineOs = {
|
||||
name: string
|
||||
version?: string | null
|
||||
architecture?: string | null
|
||||
}
|
||||
|
||||
type MachineMetrics = {
|
||||
collectedAt: string
|
||||
cpuLogicalCores: number
|
||||
cpuPhysicalCores?: number | null
|
||||
cpuUsagePercent: number
|
||||
memoryTotalBytes: number
|
||||
memoryUsedBytes: number
|
||||
memoryUsedPercent: number
|
||||
uptimeSeconds: number
|
||||
}
|
||||
|
||||
type MachineInventory = {
|
||||
cpuBrand?: string | null
|
||||
hostIdentifier?: string | null
|
||||
}
|
||||
|
||||
type MachineProfile = {
|
||||
hostname: string
|
||||
os: MachineOs
|
||||
macAddresses: string[]
|
||||
serialNumbers: string[]
|
||||
inventory: MachineInventory
|
||||
metrics: MachineMetrics
|
||||
}
|
||||
|
||||
type MachineRegisterResponse = {
|
||||
machineId: string
|
||||
tenantId?: string | null
|
||||
companyId?: string | null
|
||||
companySlug?: string | null
|
||||
machineToken: string
|
||||
machineEmail?: string | null
|
||||
expiresAt?: number | null
|
||||
}
|
||||
|
||||
type AgentConfig = {
|
||||
machineId: string
|
||||
tenantId?: string | null
|
||||
companySlug?: string | null
|
||||
machineEmail?: string | null
|
||||
apiBaseUrl: string
|
||||
appUrl: string
|
||||
createdAt: number
|
||||
lastSyncedAt?: number | null
|
||||
expiresAt?: number | null
|
||||
heartbeatIntervalSec?: number | null
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_APP_URL?: string
|
||||
readonly VITE_API_BASE_URL?: string
|
||||
}
|
||||
interface ImportMeta { readonly env: ImportMetaEnv }
|
||||
}
|
||||
|
||||
const STORE_FILENAME = "machine-agent.json"
|
||||
const DEFAULT_APP_URL = import.meta.env.MODE === "production" ? "https://tickets.esdrasrenan.com.br" : "http://localhost:3000"
|
||||
|
||||
function normalizeUrl(value?: string | null, fallback = DEFAULT_APP_URL) {
|
||||
const trimmed = (value ?? fallback).trim()
|
||||
if (!trimmed.startsWith("http")) return fallback
|
||||
return trimmed.replace(/\/+$/, "")
|
||||
}
|
||||
|
||||
const appUrl = normalizeUrl(import.meta.env.VITE_APP_URL, DEFAULT_APP_URL)
|
||||
const apiBaseUrl = normalizeUrl(import.meta.env.VITE_API_BASE_URL, appUrl)
|
||||
|
||||
async function loadStore(): Promise<Store> {
|
||||
return await Store.load(STORE_FILENAME)
|
||||
}
|
||||
|
||||
async function readToken(store: Store): Promise<string | null> {
|
||||
return (await store.get<string>("token")) ?? null
|
||||
}
|
||||
|
||||
async function writeToken(store: Store, token: string): Promise<void> {
|
||||
await store.set("token", token)
|
||||
await store.save()
|
||||
}
|
||||
|
||||
async function readConfig(store: Store): Promise<AgentConfig | null> {
|
||||
return (await store.get<AgentConfig>("config")) ?? null
|
||||
}
|
||||
|
||||
async function writeConfig(store: Store, cfg: AgentConfig): Promise<void> {
|
||||
await store.set("config", cfg)
|
||||
await store.save()
|
||||
}
|
||||
|
||||
function bytes(n?: number) {
|
||||
if (!n || !Number.isFinite(n)) return "—"
|
||||
const u = ["B","KB","MB","GB","TB"]
|
||||
let v = n; let i = 0
|
||||
while (v >= 1024 && i < u.length - 1) { v/=1024; i++ }
|
||||
return `${v.toFixed(v>=10||i===0?0:1)} ${u[i]}`
|
||||
}
|
||||
|
||||
function pct(p?: number) { return !p && p !== 0 ? "—" : `${p.toFixed(0)}%` }
|
||||
|
||||
function App() {
|
||||
const [store, setStore] = useState<Store | null>(null)
|
||||
const [token, setToken] = useState<string | null>(null)
|
||||
const [config, setConfig] = useState<AgentConfig | null>(null)
|
||||
const [profile, setProfile] = useState<MachineProfile | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [showSecret, setShowSecret] = useState(false)
|
||||
|
||||
const [provisioningSecret, setProvisioningSecret] = useState("")
|
||||
const [tenantId, setTenantId] = useState("")
|
||||
const [company, setCompany] = useState("")
|
||||
const [collabEmail, setCollabEmail] = useState("")
|
||||
const [collabName, setCollabName] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const s = await loadStore()
|
||||
setStore(s)
|
||||
const t = await readToken(s)
|
||||
setToken(t)
|
||||
const cfg = await readConfig(s)
|
||||
setConfig(cfg)
|
||||
if (!t) {
|
||||
const p = await invoke<MachineProfile>("collect_machine_profile")
|
||||
setProfile(p)
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Falha ao carregar estado do agente.")
|
||||
}
|
||||
})()
|
||||
}, [])
|
||||
|
||||
async function register() {
|
||||
if (!profile) return
|
||||
if (!provisioningSecret.trim()) { setError("Informe o código de provisionamento."); return }
|
||||
setBusy(true); setError(null)
|
||||
try {
|
||||
const payload = {
|
||||
provisioningSecret: provisioningSecret.trim(),
|
||||
tenantId: tenantId.trim() || undefined,
|
||||
companySlug: company.trim() || undefined,
|
||||
hostname: profile.hostname,
|
||||
os: profile.os,
|
||||
macAddresses: profile.macAddresses,
|
||||
serialNumbers: profile.serialNumbers,
|
||||
metadata: { inventory: profile.inventory, metrics: profile.metrics, collaborator: collabEmail ? { email: collabEmail.trim(), name: collabName.trim() || undefined } : undefined },
|
||||
registeredBy: "desktop-agent",
|
||||
}
|
||||
const res = await fetch(`${apiBaseUrl}/api/machines/register`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) })
|
||||
if (!res.ok) {
|
||||
const text = await res.text()
|
||||
throw new Error(`Falha no registro (${res.status}): ${text.slice(0,300)}`)
|
||||
}
|
||||
const data = (await res.json()) as MachineRegisterResponse
|
||||
if (!store) throw new Error("Store ausente")
|
||||
await writeToken(store, data.machineToken)
|
||||
const cfg: AgentConfig = {
|
||||
machineId: data.machineId,
|
||||
tenantId: data.tenantId ?? null,
|
||||
companySlug: data.companySlug ?? null,
|
||||
machineEmail: data.machineEmail ?? null,
|
||||
apiBaseUrl,
|
||||
appUrl,
|
||||
createdAt: Date.now(),
|
||||
lastSyncedAt: Date.now(),
|
||||
expiresAt: data.expiresAt ?? null,
|
||||
}
|
||||
await writeConfig(store, cfg)
|
||||
setConfig(cfg); setToken(data.machineToken)
|
||||
await invoke("start_machine_agent", { baseUrl: apiBaseUrl, token: data.machineToken, status: "online", intervalSeconds: 300 })
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function openSystem() {
|
||||
if (!token || !config) return
|
||||
const url = `${config.appUrl}/machines/handshake?token=${encodeURIComponent(token)}`
|
||||
try {
|
||||
// open in default browser; fallback to in-webview
|
||||
const { openUrl } = await import("@tauri-apps/plugin-opener")
|
||||
await openUrl(url)
|
||||
} catch {
|
||||
window.location.replace(url)
|
||||
}
|
||||
}
|
||||
|
||||
async function reprovision() {
|
||||
if (!store) return
|
||||
await store.delete("token"); await store.delete("config"); await store.save()
|
||||
setToken(null); setConfig(null)
|
||||
const p = await invoke<MachineProfile>("collect_machine_profile")
|
||||
setProfile(p)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen grid place-items-center p-6">
|
||||
<div className="w-full max-w-[560px] rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<h1 className="text-xl font-semibold">Sistema de Chamados — Agente Desktop</h1>
|
||||
{error ? <p className="mt-3 rounded-md bg-rose-50 p-2 text-sm text-rose-700">{error}</p> : null}
|
||||
{!token ? (
|
||||
<div className="mt-4 space-y-3">
|
||||
<p className="text-sm text-slate-600">Informe os dados para registrar esta máquina.</p>
|
||||
<div className="grid gap-2">
|
||||
<label className="text-sm font-medium">Código de provisionamento</label>
|
||||
<div className="relative">
|
||||
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 pr-9 text-sm" type={showSecret?"text":"password"} value={provisioningSecret} onChange={(e)=>setProvisioningSecret(e.target.value)} />
|
||||
<button className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-600" onClick={()=>setShowSecret((v)=>!v)} aria-label="Mostrar/ocultar">
|
||||
{showSecret ? <EyeOff className="size-4"/> : <Eye className="size-4"/>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label className="text-sm font-medium">Empresa (slug opcional)</label>
|
||||
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="ex.: tenant-atlas" value={company} onChange={(e)=>setCompany(e.target.value)} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label className="text-sm font-medium">Colaborador (e-mail)</label>
|
||||
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="colaborador@empresa.com" value={collabEmail} onChange={(e)=>setCollabEmail(e.target.value)} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label className="text-sm font-medium">Nome do colaborador (opcional)</label>
|
||||
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Nome completo" value={collabName} onChange={(e)=>setCollabName(e.target.value)} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label className="text-sm font-medium">Tenant (opcional)</label>
|
||||
<input className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="tenant-atlas" value={tenantId} onChange={(e)=>setTenantId(e.target.value)} />
|
||||
</div>
|
||||
{profile ? (
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs">
|
||||
<div>
|
||||
<div className="text-slate-500">Hostname</div>
|
||||
<div className="font-medium text-slate-900">{profile.hostname}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-500">Sistema</div>
|
||||
<div className="font-medium text-slate-900">{profile.os.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-500">CPU</div>
|
||||
<div className="font-medium text-slate-900">{pct(profile.metrics.cpuUsagePercent)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-slate-500">Memória</div>
|
||||
<div className="font-medium text-slate-900">{bytes(profile.metrics.memoryUsedBytes)} / {bytes(profile.metrics.memoryTotalBytes)}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="mt-2 flex gap-2">
|
||||
<button disabled={busy} onClick={register} className="rounded-lg border border-black bg-black px-3 py-2 text-sm font-semibold text-white hover:bg-black/90 disabled:opacity-60">Registrar máquina</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-4 space-y-3">
|
||||
<p className="text-sm text-slate-700">Máquina provisionada.</p>
|
||||
<div className="grid gap-2">
|
||||
<button onClick={openSystem} className="inline-flex items-center gap-2 rounded-lg border border-black bg-black px-3 py-2 text-sm font-semibold text-white hover:bg-black/90">
|
||||
<ExternalLink className="size-4"/> Abrir sistema
|
||||
</button>
|
||||
<button onClick={reprovision} className="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-50">Reprovisionar</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const root = document.getElementById("root") || (() => { const el = document.createElement("div"); el.id = "root"; document.body.appendChild(el); return el })()
|
||||
createRoot(root).render(<App />)
|
||||
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
// @ts-nocheck
|
||||
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
const host = process.env.TAURI_DEV_HOST;
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig(async () => ({
|
||||
plugins: [react()],
|
||||
|
||||
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
|
||||
//
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ export const list = query({
|
|||
.query("companies")
|
||||
.withIndex("by_tenant", (q) => q.eq("tenantId", tenantId))
|
||||
.collect()
|
||||
return companies.map((c) => ({ id: c._id, name: c.name }))
|
||||
return companies.map((c) => ({ id: c._id, name: c.name, slug: c.slug }))
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import Link from "next/link"
|
||||
import { AppShell } from "@/components/app-shell"
|
||||
import { SiteHeader } from "@/components/site-header"
|
||||
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
||||
|
|
@ -13,9 +14,17 @@ export default function AdminMachineDetailsPage({ params }: { params: { id: stri
|
|||
header={<SiteHeader title="Detalhe da máquina" lead="Inventário e métricas da máquina selecionada." />}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-6xl px-4 pb-12 lg:px-6">
|
||||
<nav className="mb-4 text-sm text-neutral-600">
|
||||
<ol className="flex items-center gap-2">
|
||||
<li>
|
||||
<Link href="/admin/machines" className="underline-offset-4 hover:underline">Máquinas</Link>
|
||||
</li>
|
||||
<li className="text-neutral-400">/</li>
|
||||
<li className="text-neutral-800">Detalhe</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<AdminMachineDetailsClient tenantId={DEFAULT_TENANT_ID} machineId={id} />
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ 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 } from "lucide-react"
|
||||
import { ClipboardCopy, ServerCog, Cpu, MemoryStick, Monitor, HardDrive, Pencil, ShieldCheck, ShieldAlert } from "lucide-react"
|
||||
|
||||
import { api } from "@/convex/_generated/api"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
|
@ -27,6 +27,7 @@ import { Separator } from "@/components/ui/separator"
|
|||
import { cn } from "@/lib/utils"
|
||||
import Link from "next/link"
|
||||
import { useAuth } from "@/lib/auth-client"
|
||||
import type { Id } from "@/convex/_generated/dataModel"
|
||||
|
||||
type MachineMetrics = Record<string, unknown> | null
|
||||
|
||||
|
|
@ -219,6 +220,16 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
|
|||
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>()
|
||||
|
|
@ -226,11 +237,7 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
|
|||
return Array.from(set).sort()
|
||||
}, [machines])
|
||||
|
||||
const companyOptions = useMemo(() => {
|
||||
const set = new Set<string>()
|
||||
machines.forEach((m) => m.companySlug && set.add(m.companySlug))
|
||||
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()
|
||||
|
|
@ -242,8 +249,8 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
|
|||
}
|
||||
if (osFilter !== "all" && (m.osName ?? "").toLowerCase() !== osFilter.toLowerCase()) return false
|
||||
if (companyQuery && companyQuery.trim().length > 0) {
|
||||
const slug = (m.companySlug ?? "").toLowerCase()
|
||||
if (!slug.includes(companyQuery.trim().toLowerCase())) return false
|
||||
const name = companyNameBySlug.get(m.companySlug ?? "")?.toLowerCase() ?? ""
|
||||
if (!name.includes(companyQuery.trim().toLowerCase())) return false
|
||||
}
|
||||
if (!text) return true
|
||||
const hay = [
|
||||
|
|
@ -296,12 +303,12 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
|
|||
<Input
|
||||
value={companyQuery}
|
||||
onChange={(e) => setCompanyQuery(e.target.value)}
|
||||
placeholder="Buscar empresa (slug)"
|
||||
placeholder="Buscar empresa"
|
||||
className="min-w-[220px]"
|
||||
/>
|
||||
{companyQuery && companyOptions.filter((c) => c.toLowerCase().includes(companyQuery.toLowerCase())).slice(0,6).length > 0 ? (
|
||||
{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">
|
||||
{companyOptions
|
||||
{companyNameOptions
|
||||
.filter((c) => c.toLowerCase().includes(companyQuery.toLowerCase()))
|
||||
.slice(0, 8)
|
||||
.map((c) => (
|
||||
|
|
@ -336,7 +343,40 @@ export function AdminMachinesOverview({ tenantId }: { tenantId: string }) {
|
|||
|
||||
function MachineStatusBadge({ status }: { status?: string | null }) {
|
||||
const { label, className } = getStatusVariant(status)
|
||||
return <Badge className={cn("border", className)}>{label}</Badge>
|
||||
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-2 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", ringClass)} />
|
||||
) : null}
|
||||
</span>
|
||||
{label}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
|
|
@ -499,7 +539,7 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
|
|||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-semibold text-foreground">{machine.hostname}</p>
|
||||
<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>
|
||||
|
|
@ -755,6 +795,39 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
|
|||
{/* Linux */}
|
||||
{linuxExt ? (
|
||||
<div className="space-y-3">
|
||||
{Array.isArray((linuxExt as any).lsblk) && (linuxExt as any).lsblk.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>
|
||||
{((linuxExt as any).lsblk as Array<Record<string, unknown>>).slice(0, 18).map((entry, idx) => {
|
||||
const name = typeof entry["name"] === "string" ? (entry["name"] as string) : "—"
|
||||
const mp = typeof entry["mountPoint"] === "string" ? (entry["mountPoint"] as string) : typeof entry["mountpoint"] === "string" ? (entry["mountpoint"] as string) : "—"
|
||||
const fs = typeof entry["fs"] === "string" ? (entry["fs"] as string) : typeof entry["fstype"] === "string" ? (entry["fstype"] as string) : "—"
|
||||
const sizeRaw = typeof entry["sizeBytes"] === "number" ? (entry["sizeBytes"] as number) : typeof entry["size"] === "number" ? (entry["size"] as number) : undefined
|
||||
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}
|
||||
{Array.isArray(linuxExt.smart) && linuxExt.smart.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>
|
||||
|
|
@ -995,9 +1068,25 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
|
|||
{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 grid grid-cols-2 gap-2 text-sm">
|
||||
<DetailLine label="Antivírus" value={fmtBool(readBool(windowsExt.defender, "AntivirusEnabled"))} />
|
||||
<DetailLine label="Proteção em tempo real" value={fmtBool(readBool(windowsExt.defender, "RealTimeProtectionEnabled"))} />
|
||||
<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}
|
||||
|
|
@ -1165,7 +1254,7 @@ function MachineCard({ machine }: { machine: MachinesQueryItem }) {
|
|||
|
||||
return (
|
||||
<Link href={`/admin/machines/${machine.id}`} className="group">
|
||||
<Card className="relative overflow-hidden border-slate-200 transition-colors hover:border-slate-300">
|
||||
<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
|
||||
|
|
@ -1190,7 +1279,7 @@ function MachineCard({ machine }: { machine: MachinesQueryItem }) {
|
|||
</CardTitle>
|
||||
<CardDescription className="line-clamp-1 text-xs">{machine.authEmail ?? "—"}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3 text-sm">
|
||||
<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 ?? ""}
|
||||
|
|
@ -1218,7 +1307,7 @@ function MachineCard({ machine }: { machine: MachinesQueryItem }) {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<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` : "—"}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue