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`
|
||||
//
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue