feat(desktop): migra abas do Tauri para shadcn/Radix Tabs, adiciona status badge e botão 'Enviar inventário agora'\n\nfix(web): corrige tipo do DetailLine (classNameValue) para build no CI\n\nchore(prisma): padroniza fluxo local DEV com DATABASE_URL=file:./prisma/db.dev.sqlite (db push + seed)\n\nchore: atualiza pnpm-lock.yaml após dependências do desktop
This commit is contained in:
Esdras Renan
parent
ce4b935e0c
commit
e3d6fea412
13 changed files with 683 additions and 1118 deletions
|
|
@ -1,8 +1,10 @@
|
|||
import React, { useEffect, useMemo, useState } from "react"
|
||||
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 } from "lucide-react"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"
|
||||
import { cn } from "./lib/utils"
|
||||
|
||||
type MachineOs = {
|
||||
name: string
|
||||
|
|
@ -117,6 +119,7 @@ function App() {
|
|||
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("")
|
||||
|
|
@ -138,6 +141,7 @@ function App() {
|
|||
const p = await invoke<MachineProfile>("collect_machine_profile")
|
||||
setProfile(p)
|
||||
}
|
||||
setStatus(t ? "online" : null)
|
||||
} catch (err) {
|
||||
setError("Falha ao carregar estado do agente.")
|
||||
}
|
||||
|
|
@ -182,6 +186,7 @@ function App() {
|
|||
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 {
|
||||
|
|
@ -204,15 +209,45 @@ function App() {
|
|||
async function reprovision() {
|
||||
if (!store) return
|
||||
await store.delete("token"); await store.delete("config"); await store.save()
|
||||
setToken(null); setConfig(null)
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
<div className="w-full max-w-[720px] rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<h1 className="text-xl font-semibold">Sistema de Chamados — Agente Desktop</h1>
|
||||
<StatusBadge status={status} />
|
||||
</div>
|
||||
{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">
|
||||
|
|
@ -267,14 +302,66 @@ function App() {
|
|||
</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 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>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -282,6 +369,22 @@ function App() {
|
|||
)
|
||||
}
|
||||
|
||||
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 />)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue