// All views/screens for RodaiClientes
const { useState: useStateV, useEffect: useEffectV, useMemo: useMemoV, useRef: useRefV } = React;
// ---------------- LOGIN ----------------
function LoginView({ onLogin }) {
const [user, setUser] = useStateV('admin');
const [pwd, setPwd] = useStateV('');
const [loading, setLoading] = useStateV(false);
const [error, setError] = useStateV('');
const submit = async (e) => {
e?.preventDefault?.();
if (!user || !pwd) { setError('Preencha usuário e senha'); return; }
setLoading(true);
setError('');
try {
const r = await fetch('/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username: user, password: pwd }),
});
if (r.ok) {
const data = await r.json();
onLogin(data.access_token);
} else {
const err = await r.json().catch(() => ({}));
setError(err.detail || 'Credenciais inválidas');
}
} catch (_) {
setError('Erro de conexão — verifique o servidor');
} finally {
setLoading(false);
}
};
return (
{/* subtle grid backdrop */}
RodaiClientes
Painel interno · RodaiLAB
4 servidores
3 online 1 offline v0.4.2
);
}
const min = Math.min(...data);
const max = Math.max(...data);
const range = max - min || 1;
const pts = data.map((v, i) => [
4 + (i / (data.length - 1)) * (width - 8),
(height - 6) - ((v - min) / range) * (height - 10) + 3,
]);
const d = pts.reduce((acc, pt, i) => {
if (i === 0) return `M${pt[0].toFixed(1)},${pt[1].toFixed(1)}`;
const prev = pts[i - 1];
const cx = ((prev[0] + pt[0]) / 2).toFixed(1);
return `${acc} C${cx},${prev[1].toFixed(1)} ${cx},${pt[1].toFixed(1)} ${pt[0].toFixed(1)},${pt[1].toFixed(1)}`;
}, '');
return (
{dashed
?
);
}
function _parseUptimeStr(raw) {
if (!raw) return { uptime: '—', load: null };
const loadM = raw.match(/load averages?:\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
const load = loadM ? [parseFloat(loadM[1]), parseFloat(loadM[2]), parseFloat(loadM[3])] : null;
const daysM = raw.match(/up\s+(\d+)\s+days?/);
const hmM = raw.match(/(\d+):(\d+)/);
const minM = raw.match(/up\s+(\d+)\s+min/);
let uptime = '—';
if (daysM && hmM) uptime = `${daysM[1]} d ${hmM[1].padStart(2,'0')}:${hmM[2]}`;
else if (hmM) uptime = `${hmM[1]}h ${hmM[2]}min`;
else if (minM) uptime = `${minM[1]} min`;
return { uptime, load };
}
function _apiToMetrics(apiResult, sparkHistory) {
if (!apiResult) {
return { ping: null, cpu: null, ram: null, disk: null, diskTotal: null, swap: null, swapTotal: null, temp: null, backup: {}, uptime: '?', load: null, svc: {}, users: {}, spark: [], alerts: [], status: 'saudavel', online: true };
}
const { online, ping_ms, uptime: raw, cpu_pct, ram_pct, disk_pct, disk_total, swap_pct, swap_total, temp_c, backup_status, backup_detail, backup_time, services = {}, users = {} } = apiResult;
const { uptime, load } = _parseUptimeStr(raw);
const cpu = Number.isFinite(cpu_pct) ? cpu_pct : null;
const ram = Number.isFinite(ram_pct) ? ram_pct : null;
const disk = Number.isFinite(disk_pct) ? disk_pct : null;
const swap = Number.isFinite(swap_pct) ? swap_pct : null;
const temp = Number.isFinite(temp_c) ? temp_c : null;
const backup = { status: backup_status || 'unknown', detail: backup_detail || null, time: backup_time || null };
const alerts = [];
if (!online) alerts.push('ssh_timeout');
if (online && disk !== null && disk > 70) alerts.push('disk');
if (online && cpu !== null && cpu > 85) alerts.push('cpu');
if (online && ram !== null && ram > 85) alerts.push('ram');
if (online && swap !== null && swap > 75) alerts.push('swap');
if (online && temp !== null && temp > 80) alerts.push('temp');
if (online && ['fail', 'missing', 'unknown'].includes(backup.status)) alerts.push(`backup_${backup.status}`);
const svc = {
ssh: online ? 'ok' : 'err',
rsync: online && services.rsync === true ? 'ok' : 'err',
cron: online && services.cron === true ? 'ok' : 'err',
monitor: online && services.monitor === true ? 'ok' : 'err',
};
const userStatus = {};
const userNames = (window.RC && window.RC.users && window.RC.users.length) ? window.RC.users : Object.keys(users || {});
userNames.forEach(name => {
userStatus[name] = online && users && users[name] === true ? 'ok' : 'err';
if (online && userStatus[name] === 'err') alerts.push(`user_${name}`);
});
if (online && svc.rsync === 'err') alerts.push('svc_rsync');
if (online && svc.cron === 'err') alerts.push('svc_cron');
if (online && svc.monitor === 'err') alerts.push('svc_monitor');
const status = !online ? 'offline' : alerts.length ? 'atencao' : 'saudavel';
return {
ping: online ? ping_ms : null,
cpu,
ram,
disk,
diskTotal: disk_total || null,
swap,
swapTotal: swap_total || null,
temp,
backup,
uptime: online ? uptime : 'down',
load,
svc,
users: userStatus,
spark: sparkHistory || [],
alerts,
status,
online,
};
}
function MetricBlock({ label, value, unit = '%', hint, tone = 'accent' }) {
const pct = Number.isFinite(value) ? Math.max(0, Math.min(100, Math.round(value))) : null;
const color = tone === 'err' ? 'var(--err)' : tone === 'warn' ? 'var(--warn)' : 'var(--accent)';
return (
{label}
{hint || (pct === null ? 'offline' : 'normal')}
{pct === null ? '?' : pct}
{pct !== null ? {unit} : null}
);
}
function StatusBlock({ label, value, hint, tone = 'accent' }) {
const color = tone === 'err' ? 'var(--err)' : tone === 'warn' ? 'var(--warn)' : tone === 'ok' ? 'var(--ok)' : 'var(--accent)';
return (
{label}
{hint || 'sem leitura'}
{value || '?'}
);
}
function _shortTimeLabel(raw) {
if (!raw) return null;
const m = String(raw).match(/^(\d{4}-\d{2}-\d{2})\s+(\d{2}:\d{2})/);
if (m) return m[2];
return String(raw).slice(0, 16);
}
function _backupSummary(backup = {}) {
const time = _shortTimeLabel(backup.time);
const detail = backup.detail || '';
if (backup.status === 'ok') return { value: 'OK', hint: time ? `hoje ${time}` : 'concluido', tone: 'ok' };
if (backup.status === 'fail') return { value: 'FALHOU', hint: time ? `${detail || 'erro'} ${time}` : (detail || 'erro'), tone: 'err' };
if (backup.status === 'missing') return { value: 'SEM HOJE', hint: time ? `ultimo ${time}` : 'sem registro', tone: 'warn' };
if (backup.status === 'running') return { value: 'RODANDO', hint: time ? `desde ${time}` : 'em execucao', tone: 'warn' };
return { value: '?', hint: detail || 'sem log', tone: 'warn' };
}
function ServidorCard({ server, metrics, onRecheck, checking, onEdit }) {
if (!metrics) {
return (
{server.name}
{server.host}
verificando...
);
}
const { cpu, ram, disk, diskTotal, swap, swapTotal, temp, backup = {}, ping, uptime, load, svc = {}, users = {}, spark, alerts = [], status = 'saudavel', online } = metrics;
const cardTone = status === 'offline' ? 'err' : status === 'atencao' ? 'warn' : 'ok';
const sparkColor = cardTone === 'err' ? 'var(--err)' : 'var(--accent)';
const statusLabel = status === 'saudavel' ? 'SAUD\u00c1VEL' : status === 'atencao' ? 'ATEN\u00c7\u00c3O' : 'OFFLINE';
const cpuTone = !online || cpu === null ? 'mut' : cpu > 85 ? 'err' : cpu > 70 ? 'warn' : 'accent';
const ramTone = !online || ram === null ? 'mut' : ram > 85 ? 'err' : ram > 70 ? 'warn' : 'accent';
const diskTone = disk === null ? 'mut' : disk > 85 ? 'err' : disk > 70 ? 'warn' : 'accent';
const swapTone = !online || swap === null ? 'mut' : swap > 85 ? 'err' : swap > 70 ? 'warn' : 'accent';
const tempTone = !online || temp === null ? 'mut' : temp > 85 ? 'err' : temp > 75 ? 'warn' : 'accent';
const backupSummary = _backupSummary(backup);
const alertMsg = {
cpu: `CPU passou de 85% (${Math.round(cpu || 0)}%)`,
ram: `RAM passou de 85% (${Math.round(ram || 0)}%)`,
disk: `Disco passou de 70% (${Math.round(disk || 0)}%)`,
swap: `Swap passou de 75% (${Math.round(swap || 0)}%)`,
temp: `Temperatura passou de 80C (${Math.round(temp || 0)}C)`,
backup_fail: 'Backup diario falhou na ultima execucao',
backup_missing: 'Backup diario ainda nao registrado hoje',
backup_unknown: 'Backup diario sem leitura do log',
ssh_timeout: 'SSH timeout \u2014 servidor inalcan\u00e7\u00e1vel',
svc_rsync: 'Rsync indisponivel no servidor',
svc_cron: 'Cron inativo no servidor',
svc_monitor: 'Monitor rodaiuploader inativo',
};
const svcLabels = { ssh: 'ssh', rsync: 'rsync', cron: 'cron', monitor: 'monitor' };
return (
{server.name}
{server.host}
{statusLabel}
{'Lat\u00eancia'}
{ping != null ? ping : '?'}
{ping != null ? ms : null}
Uptime {online ? uptime : 'down'}
Load avg {load ? load.map(l => l.toFixed(2)).join(' ') : '?'}
Disco total {diskTotal || '?'}
Visto {server.lastSeen || 'agora'}
Usuarios
{Object.entries(users).map(([name, state]) => (
))}
Servicos
{Object.entries(svc).map(([name, state]) => (
))}
{alerts.map((a, i) => (
))}
SSH
{checking ? 'Verificando...' : 'Re-checar'}
{onEdit ?
Editar : null}
Detalhes
);
}
// ---------------- DASHBOARD ----------------
function DashboardView({ go }) {
const [apiResults, setApiResults] = useStateV(null); // null = ainda carregando
const [fetchErr, setFetchErr] = useStateV('');
const [checking, setChecking] = useStateV({});
const [showTelegramAlerts, setShowTelegramAlerts] = useStateV(false);
const [telegramEvents, setTelegramEvents] = useStateV([]);
const [telegramUnreadOnly, setTelegramUnreadOnly] = useStateV(false);
const [telegramUnreadCount, setTelegramUnreadCount] = useStateV(0);
const [telegramTotalCount, setTelegramTotalCount] = useStateV(0);
const [telegramBusy, setTelegramBusy] = useStateV(false);
const sparkRef = useRefV({}); // { srvId: number[] } — histórico de latência
const _addSpark = (srvId, ping) => {
if (ping == null) return;
if (!sparkRef.current[srvId]) sparkRef.current[srvId] = [];
sparkRef.current[srvId].push(ping);
if (sparkRef.current[srvId].length > 16) sparkRef.current[srvId].shift();
};
const fetchTelegramAlerts = async (unreadOnly = telegramUnreadOnly) => {
try {
const r = await window.rcFetch(`/api/servidores/alertas-telegram?limit=80&unread_only=${unreadOnly ? 'true' : 'false'}`);
if (r.ok) {
const data = await r.json();
setTelegramEvents(Array.isArray(data.events) ? data.events : []);
setTelegramUnreadCount(Number(data.unread_count || 0));
setTelegramTotalCount(Number(data.total_count || 0));
}
} catch (_) {}
};
const toggleTelegramUnread = async () => {
const next = !telegramUnreadOnly;
setTelegramUnreadOnly(next);
await fetchTelegramAlerts(next);
};
const markTelegramRead = async () => {
setTelegramBusy(true);
try {
const r = await window.rcFetch('/api/servidores/alertas-telegram/marcar-lidas', { method: 'POST' });
if (r.ok) await fetchTelegramAlerts(telegramUnreadOnly);
} catch (_) {
} finally {
setTelegramBusy(false);
}
};
const clearTelegramAlerts = async () => {
if (!telegramTotalCount) return;
if (!window.confirm('Limpar mensagens encaminhadas ao Telegram?')) return;
setTelegramBusy(true);
try {
const r = await window.rcFetch('/api/servidores/alertas-telegram/limpar', { method: 'POST' });
if (r.ok) {
setTelegramEvents([]);
setTelegramUnreadCount(0);
setTelegramTotalCount(0);
}
} catch (_) {
} finally {
setTelegramBusy(false);
}
};
const fetchAll = async () => {
setFetchErr('');
const all = {};
window.RC.servers.forEach(s => { all[s.id] = true; });
setChecking(all);
try {
const r = await window.rcFetch('/api/servidores/testar-todos', { method: 'POST' });
if (r.ok) {
const data = await r.json();
data.forEach(d => _addSpark(d.servidor_id, d.ping_ms));
setApiResults(data);
await fetchTelegramAlerts();
} else {
setFetchErr('Falha ao verificar servidores');
}
} catch (e) {
setFetchErr('Erro de conexao: ' + (e.message || e));
} finally {
setChecking({});
}
};
const recheckServer = async (srvId) => {
setChecking(c => ({ ...c, [srvId]: true }));
try {
const r = await window.rcFetch(`/api/servidores/${srvId}/testar`, { method: 'POST' });
if (r.ok) {
const res = await r.json();
_addSpark(srvId, res.ping_ms);
setApiResults(prev => (prev || []).map(d => d.servidor_id === srvId ? res : d));
await fetchTelegramAlerts();
}
} catch (_) {}
setChecking(c => ({ ...c, [srvId]: false }));
};
const recheckAll = fetchAll;
useEffectV(() => {
fetchTelegramAlerts();
fetchAll();
const h = () => fetchAll();
window.addEventListener('rc-recheck-all', h);
return () => window.removeEventListener('rc-recheck-all', h);
}, []);
const onlineSrvs = (apiResults || []).filter(r => r.online);
const offlineSrvs = (apiResults || []).filter(r => !r.online);
const pings = onlineSrvs.map(r => r.ping_ms).filter(Boolean);
const avgPing = pings.length ? Math.round(pings.reduce((a, v) => a + v, 0) / pings.length) : null;
const disks = (apiResults || []).map(r => r.disk_pct || 0);
const avgDisk = disks.length ? Math.round(disks.reduce((a, v) => a + v, 0) / disks.length) : 0;
const activeAlertRows = (apiResults || []).flatMap(r => {
const srv = window.RC.servers.find(s => s.id === r.servidor_id) || {};
const nome = srv.name || r.nome || `Servidor ${r.servidor_id}`;
const rows = [];
const add = (kind, label, tone = 'warn') => rows.push({
id: `${r.servidor_id}-${kind}`,
tone,
title: `${nome}: ${label}`,
detail: 'Falha ativa detectada na ultima verificacao.',
});
if (!r.online) {
add('ssh', 'SSH indisponivel', 'err');
return rows;
}
const services = r.services || {};
if (services.rsync !== true) add('rsync', 'rsync indisponivel');
if (services.cron !== true) add('cron', 'cron inativo');
if (services.monitor !== true) add('monitor', 'monitor rodaiuploader inativo');
Object.entries(r.users || {}).forEach(([name, ok]) => {
if (ok !== true) add(`user-${name}`, `${name} OFF - HRC nao esta ativo`);
});
const backupLabels = {
fail: 'backup diario falhou',
missing: 'backup diario sem registro hoje',
unknown: 'backup diario sem leitura do log',
};
if (backupLabels[r.backup_status]) add(`backup-${r.backup_status}`, backupLabels[r.backup_status], r.backup_status === 'fail' ? 'err' : 'warn');
return rows;
});
const alertCnt = activeAlertRows.length;
const telegramAlertRows = (telegramEvents || []).map((event, idx) => ({
id: event.id || `${event.servidor_id || 'telegram'}-${event.created_at || idx}-${idx}`,
tone: event.tone || (event.tipo === 'recuperado' ? 'ok' : 'warn'),
title: event.title || `${event.servidor || 'Servidor'}: ${event.tipo === 'recuperado' ? 'recuperado' : 'alerta enviado'}`,
detail: event.detail || event.created_at_label || 'Mensagem encaminhada ao Telegram.',
badge: event.badge || (event.tipo === 'recuperado' ? 'Recuperado no Telegram' : 'Telegram enviado'),
unread: !event.read_at,
}));
const telegramPanelBadge = telegramUnreadOnly
? `${telegramAlertRows.length} nao lida${telegramAlertRows.length !== 1 ? 's' : ''}`
: telegramUnreadCount
? `${telegramUnreadCount} nao lida${telegramUnreadCount !== 1 ? 's' : ''}`
: (telegramAlertRows.length ? `${telegramAlertRows.length} recente${telegramAlertRows.length !== 1 ? 's' : ''}` : (apiResults ? '0 recentes' : 'verificando'));
const activeClients = window.RC.clients.filter(c => !c.archived).length;
const syncedClients = window.RC.clients.filter(c => !c.archived && c.status.every(s => s === 0)).length;
const diffCount = window.RC.syncDiff.length;
const liveOp = window.RC.liveOp;
const opStatusEl = (s) => (
s === 'running' ? rodando sucesso parcial falhou
{/* ── HERO: SAÚDE DOS SERVIDORES ─────────────────────────────────────── */}
{/* section header */}
Saúde dos servidores
Telemetria das {window.RC.servers.length} máquinas RodaiLAB · alertas espelhados no Telegram
setShowTelegramAlerts(v => !v)}>Alertas
Re-checar todos
{/* summary stats bar */}
{[
{
label: 'ONLINE',
value: apiResults ? `${onlineSrvs.length}/${window.RC.servers.length}` : '—',
sub: !apiResults ? 'verificando…' : offlineSrvs.length ? `${offlineSrvs.length} offline` : 'todos online',
valColor: !apiResults ? 'var(--text-muted)' : offlineSrvs.length ? 'var(--err)' : 'var(--ok)',
},
{
label: 'LATÊNCIA MÉDIA',
value: avgPing !== null ? `${avgPing}ms` : '—',
sub: 'p/ servidores online',
valColor: avgPing > 100 ? 'var(--warn)' : 'var(--text)',
},
{
label: 'USO DE DISCO',
value: `${avgDisk}%`,
sub: 'média da frota',
valColor: avgDisk > 70 ? 'var(--warn)' : 'var(--text)',
},
{
label: 'ALERTAS ATIVOS',
value: alertCnt,
sub: !apiResults ? 'verificando...' : alertCnt ? `${alertCnt} ativo${alertCnt > 1 ? 's' : ''} agora` : 'nenhum incidente',
valColor: alertCnt ? 'var(--warn)' : 'var(--ok)',
},
].map((stat, i) => (
{stat.label}
{stat.value}
{i === 0 && offlineSrvs.length ? · {offlineSrvs.length} offline : null}
{stat.sub}
))}
{/* Telegram status bar */}
Telegram
conectado
@rodai_server_status_bot
setShowTelegramAlerts(v => !v)}>Alertas
go('historico')}>Histórico
{(showTelegramAlerts || telegramAlertRows.length > 0 || activeAlertRows.length > 0) && (
Mensagens encaminhadas ao Telegram
{telegramPanelBadge}
{telegramUnreadOnly ? 'Todas' : 'Nao lidas'}
Marcar lidas
Limpar
{!apiResults && !telegramAlertRows.length ? (
Verificando servidores antes de listar os envios ao Telegram.
) : telegramAlertRows.length ? (
{telegramAlertRows.map(alert => (
{alert.title}
{alert.detail}
{alert.unread ? 'Nao lida' : alert.badge}
))}
) : (
Nenhuma mensagem de alerta encaminhada ao Telegram agora.
)}
)}
{/* ── CARDS INDIVIDUAIS DE SERVIDOR ──────────────────────────────────── */}
{fetchErr && (
Tentar novamente
)}
{window.RC.servers.map((srv) => {
const apiR = (apiResults || []).find(r => r.servidor_id === srv.id);
const mtr = _apiToMetrics(apiR, sparkRef.current[srv.id]);
return (
recheckServer(srv.id)}
checking={!!checking[srv.id]}
/>
);
})}
{/* ── BOTTOM ROW ─────────────────────────────────────────────────────── */}
{/* Live operation */}
Operação em andamento
{liveOp &&
{liveOp.kind} }
{liveOp &&
go('operacao')}>Abrir }
{liveOp ? (
{liveOp.target}
{liveOp.id}
{(liveOp.servers || []).map(s => (
{s.name}
{Math.round(s.progress * 100)}%
))}
) : (
Nenhuma operação em andamento
)}
{/* Divergências */}
Divergências
{diffCount}
go('sync')}>Resolver
{diffCount > 0 ? (
{window.RC.syncDiff.slice(0, 6).map((d, i) => (
{d.client}
{d.kind === 'extra' ? 'extra' : 'falta'}
{(d.server || '').replace(/RODAI-?/i, 'R')}
))}
) : (
)}
{/* Clientes summary */}
Clientes
go('clientes')}>Ver clientes
{activeClients}
{[
{ label: 'Sincronizados', val: syncedClients, dot: 'dot-ok' },
{ label: 'Divergentes', val: diffCount, dot: 'dot-warn' },
{ label: 'Em transição', val: window.RC.clients.filter(c => c.running).length, dot: 'dot-acc' },
].map(row => (
))}
{/* ── HISTÓRICO RECENTE ───────────────────────────────────────────────── */}
Histórico recente
go('historico')}>Ver tudo
OP
Tipo
Alvo
Quando
Status
{window.RC.ops.slice(0, 6).map(op => (
{op.id}
{op.kind} {op.target}
{op.at}
{opStatusEl(op.status)}
))}
{window.RC.ops.length === 0 && (
Sem operações registradas
)}
{/* filter bar */}
{/* linha 1: busca + status + acoes */}
{/* linha 2: filtro de times — quebra linha */}
{[
{ value: 'all', label: 'Todos' },
...subTeams.map(t => ({ value: t.id, label: t.name })),
].map(opt => (
setTeam(opt.value)}
style={{ padding: '3px 12px', borderRadius: 20, border: '1px solid',
borderColor: team === opt.value ? 'var(--accent)' : 'var(--line)',
background: team === opt.value ? 'var(--accent-soft)' : 'transparent',
color: team === opt.value ? 'var(--accent)' : 'var(--text-muted)',
fontSize: 12, cursor: 'pointer', fontWeight: team === opt.value ? 600 : 400,
whiteSpace: 'nowrap' }}
>
{opt.label}
))}
{/* bulk action bar */}
{selected.size > 0 && (
{selected.size} selecionado{selected.size > 1 ? 's' : ''}
setShowBulkMover(true)}>Mover
Sincronizar
{
if (!confirm(`Arquivar ${selected.size} cliente(s)? As pastas serao renomeadas em todos os servidores.`)) return;
setBulkArquivando(true);
for (const id of selected) {
await window.rcFetch(`/api/clientes/${id}/arquivar`, { method: 'POST' }).catch(() => null);
}
await window.RC.reload?.();
setSelected(new Set()); setBulkArquivando(false);
}}>
{bulkArquivando ? 'Arquivando...' : 'Arquivar'}
setSelected(new Set())}>Limpar
)}
{showBulkMover && (() => {
const selClients = data.filter(c => selected.has(c.id));
const uniqTeam = selClients.length > 0 && selClients.every(c => c.team === selClients[0].team) ? selClients[0].team : null;
return (
c.name)}
currentTeam={uniqTeam}
onClose={() => setShowBulkMover(false)}
onDone={() => { setShowBulkMover(false); setSelected(new Set()); }}
/>
);
})()}
{/* table */}
{/* legend footer */}
Legenda:
tudo OK divergente pasta ausente em transição
{data.length} cliente{data.length !== 1 ? 's' : ''}
e.stopPropagation()}>
{clientIds.length > 1 ? `Mover ${clientIds.length} clientes` : `Mover "${clientNames[0]}"`}
{subTeams.map(t => (
setTimeId(t.id)}>
{t.name}
{t.id === currentTeam &&
atual }
{timeId === t.id &&
}
))}
{subTeams.length === 0 && (
Nenhum time disponivel.
)}
{erro && (
{erro}
)}
Cancelar
{loading ? 'Movendo...' : 'Mover'}
);
}
// ---------------- MODAL DELETAR ----------------
function DeletarModal({ client, onClose, onDone }) {
const [input, setInput] = useStateV('');
const [loading, setLoading] = useStateV(false);
const [erro, setErro] = useStateV('');
const match = input === client.name;
const doDelete = async () => {
if (!match) return;
setLoading(true); setErro('');
try {
const r = await window.rcFetch(`/api/clientes/${client.id}`, {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ confirmacao_nome: input }),
});
if (r.ok) { await window.RC.reload?.(); onDone(); }
else {
const err = await r.json().catch(() => ({}));
const d = err.detail || {};
setErro(typeof d === 'object' ? (d.message || JSON.stringify(d)) : String(d));
}
} catch (_) { setErro('Erro de conexao'); }
finally { setLoading(false); }
};
return (
e.stopPropagation()}>
{erro && (
{erro}
)}
Cancelar
{loading ? 'Deletando...' : 'Deletar permanentemente'}
);
}
function ClientDrawer({ client, onClose, go }) {
const [tab, setTab] = useStateV('overview');
const [arquivando, setArquivando] = useStateV(false);
const [actionBusy, setActionBusy] = useStateV('');
const [actionErro, setActionErro] = useStateV('');
const [showMover, setShowMover] = useStateV(false);
const [showDeletar, setShowDeletar] = useStateV(false);
const readActionError = async (r, fallback = 'Erro na operacao') => {
const err = await r.json().catch(() => ({}));
const detail = err.detail || err.message || fallback;
return typeof detail === 'object' ? (detail.message || JSON.stringify(detail)) : String(detail);
};
const runClientAction = async (key, fn) => {
setActionBusy(key);
setActionErro('');
try {
await fn();
} catch (e) {
setActionErro(e?.message || 'Erro de conexao');
} finally {
setActionBusy('');
}
};
const doRenomear = () => runClientAction('rename', async () => {
const novoNome = prompt('Novo nome do cliente:', client.name);
if (!novoNome || novoNome.trim() === client.name) return;
const r = await window.rcFetch(`/api/clientes/${client.id}/renomear`, {
method: 'POST',
body: JSON.stringify({ novo_nome: novoNome.trim() }),
});
if (!r.ok) throw new Error(await readActionError(r, 'Erro ao renomear cliente'));
await window.RC.reload?.();
});
const doMover = () => setShowMover(true);
const updateModalidades = (nextMods) => runClientAction('mods', async () => {
const modalidadeIds = nextMods.map(nome => window.RC._modMap[nome]).filter(Boolean);
if (!modalidadeIds.length) throw new Error('Cliente precisa ter pelo menos uma modalidade');
const r = await window.rcFetch(`/api/clientes/${client.id}/modalidades`, {
method: 'PUT',
body: JSON.stringify({ modalidade_ids: modalidadeIds }),
});
if (!r.ok) throw new Error(await readActionError(r, 'Erro ao atualizar modalidades'));
await window.RC.reload?.();
});
const doArquivar = async () => {
if (!confirm(`Arquivar "${client.name}"? As pastas serao renomeadas com sufixo _ARQUIVO_DATA em todos os servidores.`)) return;
setArquivando(true);
setActionErro('');
try {
const r = await window.rcFetch(`/api/clientes/${client.id}/arquivar`, { method: 'POST' });
if (r.ok) {
await window.RC.reload?.();
onClose();
} else {
setActionErro(await readActionError(r, 'Erro ao arquivar cliente'));
}
} catch (_) {
setActionErro('Erro de conexao');
} finally {
setArquivando(false);
}
};
if (!client) return null;
const teamLabel = window.RC.teamById(client.team)?.name || client.team;
const stateOf = (c) => {
if (c.running || c.status.includes(1)) return { kind: 'acc', label: 'em transi\u00e7\u00e3o', dot: 'dot-acc', pulse: true };
if (c.status.includes(3)) return { kind: 'err', label: 'pasta ausente em 1 servidor', dot: 'dot-err' };
if (c.status.includes(2)) return { kind: 'warn', label: 'divergente', dot: 'dot-warn' };
return { kind: 'ok', label: 'sincronizado', dot: 'dot-ok' };
};
const st = stateOf(client);
const busy = !!actionBusy || arquivando;
return (
<>
{[
{ id: 'overview', label: 'Vis\u00e3o' },
{ id: 'servers', label: 'Servidores' },
{ id: 'mods', label: 'Modalidades' },
{ id: 'history', label: 'Hist\u00f3rico' },
].map(t => (
setTab(t.id)}
style={{
padding: '10px 10px',
background: 'transparent', border: 0,
color: tab === t.id ? 'var(--text)' : 'var(--text-muted)',
fontSize: 13, fontWeight: 500, cursor: 'pointer',
borderBottom: tab === t.id ? '2px solid var(--accent)' : '2px solid transparent',
marginBottom: -1,
}}
>{t.label}
))}
{tab === 'overview' && (
Modalidades
{client.mods.length} ativas
{'\u00daltima opera\u00e7\u00e3o'}
{client.updated}
Estrutura nos servidores
4 x 4 = 16 pastas esperadas
go('sync')}>Verificar agora
{window.RC.servers.map((srv, idx) => {
const s = client.status[idx];
const stMap = { 0: { c: 'ok', l: 'OK' }, 1: { c: 'acc', l: 'sync' }, 2: { c: 'warn', l: 'div' }, 3: { c: 'err', l: 'falta' } };
const cur = stMap[s] || stMap[0];
return (
{srv.name}
{'4 usu\u00e1rios'}
{[0,1,2,3].map(u => (
);
})}
Modalidades
{client.mods.map(m => (
updateModalidades(client.mods.filter(x => x !== m))} disabled={busy} style={{ height: 22, fontSize: 12, border: '1px solid var(--line)', cursor: busy ? 'not-allowed' : 'pointer' }}>
{m}
))}
setTab('mods')}>Adicionar
)}
{tab === 'servers' && (
{window.RC.servers.map((srv, idx) => {
const s = client.status[idx];
const stMap = { 0: { c: 'ok', l: 'sincronizado' }, 1: { c: 'acc', l: 'em transi\u00e7\u00e3o' }, 2: { c: 'warn', l: 'divergente' }, 3: { c: 'err', l: 'pasta ausente' } };
const cur = stMap[s] || stMap[0];
return (
{srv.name}
{cur.l}
go('sync')}>Re-sincronizar
/clients/{teamLabel}/{client.name}/{`{${client.mods.join(',')}}`}
);
})}
)}
{tab === 'mods' && (
{window.RC.modalities.map(m => {
const has = client.mods.includes(m);
return (
{m}
{has
?
updateModalidades(client.mods.filter(x => x !== m))} disabled={busy}>Remover
:
updateModalidades([...client.mods, m])} disabled={busy}>Adicionar }
);
})}
)}
{tab === 'history' && (
{window.RC.ops.filter(o => o.target === client.name).map(op => (
{op.id}
{op.kind}
{op.actor}
{op.at}
))}
{window.RC.ops.filter(o => o.target === client.name).length === 0 && (
{'Sem opera\u00e7\u00f5es registradas para este cliente.'}
)}
)}
{(actionErro) && (
{actionErro}
)}
{actionBusy === 'rename' ? 'Renomeando...' : 'Renomear'}
{actionBusy === 'move' ? 'Movendo...' : 'Mover'}
{arquivando ? 'Arquivando...' : 'Arquivar'}
setShowDeletar(true)} disabled={busy}>Deletar
go('sync')}>Sincronizar
go(window.RC.liveOp?.target === client.name ? 'operacao' : 'historico')}>{'Ver opera\u00e7\u00e3o'}
{showMover && (
setShowMover(false)}
onDone={() => { setShowMover(false); onClose(); }}
/>
)}
{showDeletar && (
setShowDeletar(false)}
onDone={() => { setShowDeletar(false); onClose(); }}
/>
)}
);
}
// ---------------- ARVORE DE TIMES ----------------
function TimesView({ openClient, go }) {
const [expanded, setExpanded] = useStateV(() => new Set(window.RC.teams.map(t => t.id)));
const [active, setActive] = useStateV(() => {
const first = window.RC.teams.find(t => t.kind === 'team');
return first ? first.id : (window.RC.teams[0]?.id ?? null);
});
const [moverClient, setMoverClient] = useStateV(null);
const [timeActionBusy, setTimeActionBusy] = useStateV(false);
const [timeActionErro, setTimeActionErro] = useStateV('');
const doRenomearTime = async () => {
if (!activeTeam || activeTeam.kind === 'root') return;
const novo = prompt('Novo nome para o time:', activeTeam.name);
if (!novo || novo.trim() === activeTeam.name) return;
setTimeActionBusy(true); setTimeActionErro('');
try {
const r = await window.rcFetch(`/api/times/${activeTeam.id}/renomear`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ novo_nome: novo.trim().toUpperCase() }),
});
if (r.ok) { await window.RC.reload?.(); }
else {
const e = await r.json().catch(() => ({}));
setTimeActionErro((e.detail?.message || e.detail || 'Erro ao renomear'));
}
} catch (_) { setTimeActionErro('Erro de conexao'); }
finally { setTimeActionBusy(false); }
};
const doNovoTime = async () => {
const nome = prompt('Nome do novo sub-time:');
if (!nome || !nome.trim()) return;
setTimeActionBusy(true); setTimeActionErro('');
try {
const parent = active;
const r = await window.rcFetch('/api/times', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nome: nome.trim().toUpperCase(), parent_id: parent }),
});
if (r.ok) { await window.RC.reload?.(); }
else {
const e = await r.json().catch(() => ({}));
setTimeActionErro((e.detail?.message || e.detail || 'Erro ao criar time'));
}
} catch (_) { setTimeActionErro('Erro de conexao'); }
finally { setTimeActionBusy(false); }
};
const toggle = (id) => {
setExpanded(prev => {
const n = new Set(prev);
if (n.has(id)) n.delete(id); else n.add(id);
return n;
});
};
const renderNode = (team, depth = 0) => {
const isOpen = expanded.has(team.id);
const children = window.RC.teams.filter(t => t.parent === team.id);
const tClients = window.RC.clientsByTeam(team.id).filter(c => !c.archived);
const hasKids = children.length > 0 || tClients.length > 0;
return (
{ setActive(team.id); if (hasKids) toggle(team.id); }}
>
{hasKids ?
{team.name}
{tClients.length}{children.length > 0 ? '·' + children.length : ''}
{isOpen && (
<>
{children.map(c => renderNode(c, depth + 1))}
{tClients.map(cl => (
openClient(cl)}
>
{cl.name}
))}
)}
);
};
const root = window.RC.teams.find(t => t.parent === null);
const activeTeam = window.RC.teamById(active);
const activeClients = window.RC.clientsByTeam(active);
const activeChildren = window.RC.teams.filter(t => t.parent === active);
return (
<>
{/* tree */}
{root ? renderNode(root) : null}
{window.RC.teams.length} times · {window.RC.clients.filter(c => !c.archived).length} clientes
{/* detail */}
{activeTeam?.kind === 'root' ? 'RAIZ' : 'TIME'}
{activeTeam?.name}
{activeClients.length} clientes diretos · {activeChildren.length} sub-times
Renomear
go && go('criar', { teamId: activeTeam?.id })}>Novo cliente
{timeActionErro && (
{timeActionErro}
setTimeActionErro('')}>×
)}
{/* sub-teams */}
{activeChildren.length > 0 && (
Sub-times
{activeChildren.map(c => {
const n = window.RC.clientsByTeam(c.id).filter(x => !x.archived).length;
return (
setActive(c.id)}>
{c.name}
{n} clientes
);
})}
)}
{/* clients */}
Clientes
Cliente
Modalidades
Servidores
Atualizado
{activeClients.map(c => (
openClient(c)} style={{ cursor: 'pointer' }}>
{c.name}
{c.archived ? arq. : null}
{c.mods.length} ativas
{c.updated}
e.stopPropagation()}>
setMoverClient(c)}>Mover
))}
{activeClients.length === 0 ? (
Nenhum cliente direto neste time.
setMoverClient(null)}
onDone={async () => { setMoverClient(null); await window.RC.reload?.(); }}
/>
)}
);
}
// ---------------- CRIAR CLIENTE ----------------
function CriarClienteView({ go, onSubmit }) {
const [name, setName] = useStateV('');
const [team, setTeam] = useStateV(() => {
const first = window.RC.teams.find(t => t.kind === 'team');
return first ? first.id : null;
});
const [mods, setMods] = useStateV(() => (window.RC.modalities || ['PKO', 'VANILLA', 'MYSTERY']).slice());
const [running, setRunning] = useStateV(false);
const [error, setError] = useStateV('');
const [sshResult, setSshResult] = useStateV(null); // { ok, resultado_por_servidor, operacao_status }
const toggleMod = (m) => {
setMods(prev => prev.includes(m) ? prev.filter(x => x !== m) : [...prev, m]);
};
const normalizeClientName = (v) => v
.toUpperCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.replace(/\s+/g, '_')
.replace(/[^A-Z0-9_]/g, '')
.slice(0, 25);
const validName = /^[A-Z0-9_]{2,25}$/.test(name);
const canSubmit = validName && mods.length > 0 && team !== null;
const submit = async (e) => {
e?.preventDefault?.();
if (!canSubmit) return;
setRunning(true);
setError('');
setSshResult(null);
try {
const modalidadeIds = mods.map(nome => window.RC._modMap[nome]).filter(Boolean);
const r = await window.rcFetch('/api/clientes', {
method: 'POST',
body: JSON.stringify({ nome: name, time_id: team, modalidades: modalidadeIds }),
});
const data = await r.json().catch(() => ({}));
if (r.ok) {
setSshResult({ ok: true, resultado_por_servidor: data.resultado_por_servidor || {}, operacao_status: data.operacao_status });
await window.RC.reload?.();
onSubmit(name);
setTimeout(() => go('clientes'), 2000);
} else {
const detail = data.detail || {};
if (typeof detail === 'object' && detail.resultado_por_servidor) {
setSshResult({ ok: false, resultado_por_servidor: detail.resultado_por_servidor, operacao_status: detail.operacao_status });
setError(detail.message || 'Falha ao propagar para os servidores');
} else {
setError(typeof detail === 'string' ? detail : 'Erro ao criar cliente');
}
}
} catch (_) {
setError('Erro de conexão');
} finally {
setRunning(false);
}
};
return (
{/* preview side */}
Preview da operação
O que vai rodar quando você clicar em "Criar e propagar".
Caminho
{`/clients/${window.RC.teamById(team)?.name || team}/${name || 'NOVO_CLIENTE'}/`}
{(mods.length ? mods : ['(modalidades)']).map(m => ` └─ ${m}/`).join('\n')}
Sub-operações ({4 * 4} pastas {mods.length > 1 ? `× ${mods.length} modalidades = ${16 * mods.length}` : ''})
{window.RC.servers.map(s => (
{s.name}
{!s.online ? offline : null}
4 usuários · {mods.length || 0} modalidades
))}
{window.RC.servers.some(s => !s.online) && (
)}
);
}
// ---------------- PROGRESSO DE OPERAÇÃO ----------------
function OperacaoView({ goBack }) {
const op = window.RC.liveOp;
const [tick, setTick] = useStateV(0);
useEffectV(() => {
const id = setInterval(() => setTick(t => t + 1), 600);
return () => clearInterval(id);
}, []);
if (!op) {
return (
Nenhuma operação em andamento
Voltar
As operações concluídas aparecem no histórico.
);
}
const opServers = op.servers || window.RC.servers.map(s => ({
id: s.id,
name: s.name,
state: 'running',
progress: 0.45,
users: window.RC.users.map(u => ({ name: u, state: 'running' })),
}));
// animate the running server's progress slowly
const animatedServers = opServers.map(s => {
if (s.state !== 'running') return s;
const next = Math.min(0.97, s.progress + (tick % 6) * 0.005);
return { ...s, progress: next };
});
const stIcon = (st) => {
if (st === 'ok') return
{/* op header */}
{op.id.toUpperCase()}
{op.kind}
{op.target}
·
{op.teamName || window.RC.teamById(op.team)?.name}
iniciada {op.startedAt} · por {op.actor}
{/* overall summary */}
Concluído
{animatedServers.filter(s => s.state === 'done').length}/{animatedServers.length}
servidores
Sub-operações
{animatedServers.flatMap(s => s.users).filter(u => u.state === 'ok').length}/{animatedServers.flatMap(s => s.users).length}
usuários
Falhas
{animatedServers.flatMap(s => s.users).filter(u => u.state === 'fail').length}
Tempo decorrido
00:{String(tick).padStart(2,'0')}
Re-tentar falhas
Abortar
{/* servers grid */}
{animatedServers.map(s => (
{s.name}
{s.state === 'done' ? 'concluído' : s.state === 'fail' ? 'falhou' : s.state === 'running' ? 'rodando' : 'na fila'}
{Math.round(s.progress * 100)}%
{s.users.map(u => (
{stIcon(u.state)}
{u.name}
{u.detail || (u.state === 'queued' ? '— aguardando' : u.state === 'ok' ? 'pasta criada' : u.state === 'fail' ? 'erro' : '')}
{stLabel(u.state)}
))}
{s.error ? (
{s.error}
) : null}
))}
{/* live log */}
Log da operação
tempo real
Baixar log
{(op.log && op.log.length > 0)
? op.log.join('\n')
: '— sem log disponível —'}
Voltar
Notificar quando terminar
{label}
{opts.hint} }
);
return (
e.stopPropagation()}>
{/* cabeçalho */}
Configurar {servidor.nome}
{/* formulário */}
{field('Host / IP', host, setHost, { placeholder: '10.0.0.1 ou hostname' })}
{field('Caminho da chave privada (no RodaiLAB)', keyPath, setKeyPath, {
placeholder: '/etc/rodai-clientes/ssh-keys/rodai-01.pem',
hint: 'Arquivo deve existir no servidor RodaiLAB com chmod 600.',
})}
{erro && (
)}
{/* rodapé */}
Cancelar
salvar(false)}>
{saving ? 'Salvando…' : 'Salvar'}
salvar(true)}>
{saving ? 'Salvando…' : 'Salvar e testar'}
);
}
// ---------------- SERVIDORES ----------------
function ServidoresView() {
const [checking, setChecking] = useStateV(new Set());
const [results, setResults] = useStateV(null);
const [fetchErr, setFetchErr] = useStateV('');
const [editando, setEditando] = useStateV(null);
const sparkRef = useRefV({});
const _addSpark = (srvId, ping) => {
if (ping == null) return;
if (!sparkRef.current[srvId]) sparkRef.current[srvId] = [];
sparkRef.current[srvId].push(ping);
if (sparkRef.current[srvId].length > 16) sparkRef.current[srvId].shift();
};
const handleSaved = useRefV(null);
handleSaved.current = (id, eTestar) => {
if (eTestar) {
const srv = window.RC.servers.find(s => s.id === id);
if (srv) verificarUm.current(srv);
}
};
const verificarUm = useRefV(null);
verificarUm.current = async (s) => {
setFetchErr('');
setChecking(prev => new Set([...prev, s.id]));
try {
const r = await window.rcFetch(`/api/servidores/${s.id}/testar`, { method: 'POST' });
if (r.ok) {
const data = await r.json();
_addSpark(s.id, data.ping_ms);
setResults(prev => ({ ...(prev || {}), [s.id]: data }));
await window.RC.reload?.();
} else {
setFetchErr('Falha ao verificar servidor');
}
} catch (e) {
setFetchErr('Erro de conexao: ' + (e.message || e));
} finally {
setChecking(prev => { const n = new Set(prev); n.delete(s.id); return n; });
}
};
const verificarTodos = useRefV(null);
verificarTodos.current = async () => {
const ids = window.RC.servers.map(s => s.id);
setFetchErr('');
setChecking(new Set(ids));
try {
const r = await window.rcFetch('/api/servidores/testar-todos', { method: 'POST' });
if (r.ok) {
const lista = await r.json();
const mapa = {};
lista.forEach(d => {
_addSpark(d.servidor_id, d.ping_ms);
mapa[d.servidor_id] = d;
});
setResults(mapa);
await window.RC.reload?.();
} else {
setFetchErr('Falha ao verificar servidores');
}
} catch (e) {
setFetchErr('Erro de conexao: ' + (e.message || e));
} finally {
setChecking(new Set());
}
};
useEffectV(() => {
verificarTodos.current?.();
const handler = () => verificarTodos.current?.();
window.addEventListener('rc-recheck-all', handler);
return () => window.removeEventListener('rc-recheck-all', handler);
}, []);
return (
{fetchErr && (
verificarTodos.current?.()} style={{ marginLeft: 10, fontSize: 11, color: 'var(--accent)', background: 'none', border: 'none', cursor: 'pointer' }}>Tentar novamente
)}
{window.RC.servers.map(s => {
const res = results?.[s.id];
const mtr = _apiToMetrics(res, sparkRef.current[s.id]);
return (
verificarUm.current(s)}
checking={checking.has(s.id)}
onEdit={() => setEditando(s)}
/>
);
})}
{editando && (
setEditando(null)}
onSaved={(id, eTestar) => handleSaved.current(id, eTestar)}
/>
)}
{/* control bar */}
Comparação banco × servidores
{running ?
: done ?
{window.RC.syncDiff.length} divergências
:
aguardando }
{lastVerified &&
última verificação: {lastVerified.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })} }
{}} options={[
{ value: 'all', label: 'Todos' }, { value: 'extra', label: 'Extras' }, { value: 'missing', label: 'Faltando' },
]} />
{running ? 'Verificando…' : 'Verificar agora'}
{running && (
)}
{/* selection bar */}
{selected.size > 0 && (
{selected.size} divergência{selected.size > 1 ? 's' : ''} selecionada{selected.size > 1 ? 's' : ''}
Aceitar (atualizar banco)
Reconciliar (atualizar servidor)
setSelected(new Set())} title="Limpar" />
)}
{/* diffs */}
{Object.keys(groupByClient).length === 0 ? (
Tudo sincronizado
Banco e servidores estão alinhados.
) : Object.entries(groupByClient).map(([cName, items]) => (
{cName}
{items.length} divergência{items.length > 1 ? 's' : ''}
Reconciliar tudo
))}
OP
Tipo
Alvo
Time
Por
Quando
Duração
Status
{window.RC.ops.map(op => (
{op.id}
{op.kind} {op.target}
{op.teamName || window.RC.teamById(op.team)?.name || '-'}
{op.actor}
{op.at}
{op.duration}
{op.status === 'running' ? rodando sucesso parcial falhou
))}
);
}
Object.assign(window, {
LoginView, DashboardView, ClientesView, ClientDrawer, TimesView,
MoverModal, DeletarModal,
CriarClienteView, OperacaoView, ServidoresView, SyncView, HistoricoView,
});