426 lines
18 KiB
TypeScript
426 lines
18 KiB
TypeScript
import { useEffect, 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, GalleryVerticalEnd, RefreshCw } from "lucide-react"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"
|
|
import { cn } from "./lib/utils"
|
|
|
|
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 [status, setStatus] = useState<string | null>(null)
|
|
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("")
|
|
const [updating, setUpdating] = useState(false)
|
|
|
|
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)
|
|
}
|
|
setStatus(t ? "online" : null)
|
|
} 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 })
|
|
setStatus("online")
|
|
} 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); setStatus(null)
|
|
const p = await invoke<MachineProfile>("collect_machine_profile")
|
|
setProfile(p)
|
|
}
|
|
|
|
async function sendInventoryNow() {
|
|
if (!token || !profile) return
|
|
setBusy(true); setError(null)
|
|
try {
|
|
const payload = {
|
|
machineToken: token,
|
|
hostname: profile.hostname,
|
|
os: profile.os,
|
|
metrics: profile.metrics,
|
|
inventory: profile.inventory,
|
|
}
|
|
const res = await fetch(`${apiBaseUrl}/api/machines/inventory`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
})
|
|
if (!res.ok) {
|
|
const text = await res.text()
|
|
throw new Error(`Falha ao enviar inventário (${res.status}): ${text.slice(0, 200)}`)
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err))
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
async function checkForUpdates() {
|
|
try {
|
|
setUpdating(true)
|
|
const { check } = await import("@tauri-apps/plugin-updater")
|
|
const update = await check()
|
|
if (update && (update as any).available) {
|
|
// download and install then relaunch
|
|
await (update as any).downloadAndInstall()
|
|
const { relaunch } = await import("@tauri-apps/plugin-process")
|
|
await relaunch()
|
|
} else {
|
|
alert("Nenhuma atualização disponível.")
|
|
}
|
|
} catch (error) {
|
|
console.error("Falha ao verificar atualizações", error)
|
|
alert("Falha ao verificar atualizações.")
|
|
} finally {
|
|
setUpdating(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen grid place-items-center p-6">
|
|
<div className="w-full max-w-[720px] rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<div className="mb-2 flex items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2 text-xl font-semibold text-neutral-900">
|
|
<span className="flex size-6 items-center justify-center rounded-md bg-black text-white"><GalleryVerticalEnd className="size-4" /></span>
|
|
Sistema de chamados
|
|
</div>
|
|
<StatusBadge status={status} />
|
|
</div>
|
|
<h1 className="text-base font-semibold text-slate-800">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.: atlas-engenharia" 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">
|
|
<Tabs defaultValue="resumo" className="w-full">
|
|
<TabsList className="h-10">
|
|
<TabsTrigger value="resumo" className="rounded-lg px-3">Resumo</TabsTrigger>
|
|
<TabsTrigger value="inventario" className="rounded-lg px-3">Inventário</TabsTrigger>
|
|
<TabsTrigger value="diagnostico" className="rounded-lg px-3">Diagnóstico</TabsTrigger>
|
|
<TabsTrigger value="config" className="rounded-lg px-3">Configurações</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="resumo" className="mt-4">
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="stat-card">
|
|
<div className="text-xs text-slate-500">CPU</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile ? pct(profile.metrics.cpuUsagePercent) : "—"}</div>
|
|
</div>
|
|
<div className="stat-card">
|
|
<div className="text-xs text-slate-500">Memória</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile ? `${bytes(profile.metrics.memoryUsedBytes)} / ${bytes(profile.metrics.memoryTotalBytes)}` : "—"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex gap-2">
|
|
<button onClick={openSystem} className="btn btn-primary inline-flex items-center gap-2">
|
|
<ExternalLink className="size-4"/> Abrir sistema
|
|
</button>
|
|
<button onClick={reprovision} className="btn btn-outline">Reprovisionar</button>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="inventario" className="mt-4 space-y-3">
|
|
<p className="text-sm text-slate-600">Inventário básico coletado localmente. Envie para sincronizar com o servidor.</p>
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
<div className="card">
|
|
<div className="text-xs text-slate-500">Hostname</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile?.hostname ?? "—"}</div>
|
|
</div>
|
|
<div className="card">
|
|
<div className="text-xs text-slate-500">Sistema</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile?.os?.name ?? "—"} {profile?.os?.version ?? ""}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button disabled={busy} onClick={sendInventoryNow} className={cn("btn btn-primary", busy && "opacity-60")}>Enviar inventário agora</button>
|
|
<button onClick={openSystem} className="btn btn-outline">Ver no sistema</button>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="diagnostico" className="mt-4 space-y-2">
|
|
<div className="card">
|
|
<p className="text-sm text-slate-700">Token armazenado: <span className="font-mono break-all text-xs">{token?.slice(0, 6)}…{token?.slice(-6)}</span></p>
|
|
<p className="text-sm text-slate-700">Base URL: <span className="font-mono text-xs">{apiBaseUrl}</span></p>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="config" className="mt-4 space-y-3">
|
|
<div className="grid gap-2">
|
|
<label className="label">E-mail do colaborador (opcional)</label>
|
|
<input className="input" placeholder="colaborador@empresa.com" value={collabEmail} onChange={(e)=>setCollabEmail(e.target.value)} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="label">Nome do colaborador (opcional)</label>
|
|
<input className="input" placeholder="Nome completo" value={collabName} onChange={(e)=>setCollabName(e.target.value)} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="label">Atualizações</label>
|
|
<button onClick={checkForUpdates} disabled={updating} className={cn("btn btn-outline inline-flex items-center gap-2", updating && "opacity-60")}>
|
|
<RefreshCw className="size-4" /> Verificar atualizações
|
|
</button>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-6 flex justify-center">
|
|
<img src={`${appUrl}/rever-8.png`} alt="Logotipo Rever Tecnologia" width={110} height={110} className="h-[3.45rem] w-auto" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: string | null }) {
|
|
const s = (status ?? "").toLowerCase()
|
|
const label = s === "online" ? "Online" : s === "offline" ? "Offline" : s === "maintenance" ? "Manutenção" : "Sem status"
|
|
const dot = s === "online" ? "bg-emerald-500" : s === "offline" ? "bg-rose-500" : s === "maintenance" ? "bg-amber-500" : "bg-slate-400"
|
|
const ring = s === "online" ? "bg-emerald-400/30" : s === "offline" ? "bg-rose-400/30" : s === "maintenance" ? "bg-amber-400/30" : "bg-slate-300/30"
|
|
const isOnline = s === "online"
|
|
return (
|
|
<span className="inline-flex h-8 items-center gap-4 rounded-full border border-slate-200 px-3 text-sm font-semibold">
|
|
<span className="relative inline-flex items-center">
|
|
<span className={cn("size-2 rounded-full", dot)} />
|
|
{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]", ring)} /> : null}
|
|
</span>
|
|
{label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const root = document.getElementById("root") || (() => { const el = document.createElement("div"); el.id = "root"; document.body.appendChild(el); return el })()
|
|
createRoot(root).render(<App />)
|