1037 lines
37 KiB
JavaScript
1037 lines
37 KiB
JavaScript
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import {
|
|
Activity,
|
|
AlertCircle,
|
|
Box,
|
|
CheckCircle2,
|
|
Clipboard,
|
|
Cpu,
|
|
Download,
|
|
ExternalLink,
|
|
HardDrive,
|
|
Loader2,
|
|
PackageCheck,
|
|
Play,
|
|
PlugZap,
|
|
RefreshCcw,
|
|
RotateCcw,
|
|
Search,
|
|
Server,
|
|
Settings,
|
|
ShieldCheck,
|
|
Trash2,
|
|
WifiOff,
|
|
XCircle
|
|
} from 'lucide-react';
|
|
import {
|
|
DEFAULT_AGENT_BASE_URL,
|
|
DEFAULT_PACKAGE_BASE_URL,
|
|
fetchAgentHealth,
|
|
fetchAgentSystemInfo,
|
|
fetchApplicationDetail,
|
|
fetchApplicationManifest,
|
|
fetchInstalledApps,
|
|
fetchLatestAgentPackage,
|
|
fetchPackageApps,
|
|
fetchTaskComponents,
|
|
fetchTaskLogs,
|
|
fetchTaskStatus,
|
|
joinUrl,
|
|
normalizeUrl,
|
|
queueInstall,
|
|
queueRemove,
|
|
queueUpdate
|
|
} from './services/api.js';
|
|
import './styles.css';
|
|
|
|
const SETTINGS_KEY = 'robot-installer-client-settings';
|
|
const TERMINAL_TASK_STATUSES = new Set(['success', 'failed', 'cancelled']);
|
|
const TASK_STATUS_TONES = {
|
|
queued: 'info',
|
|
running: 'info',
|
|
success: 'success',
|
|
failed: 'danger',
|
|
cancelled: 'warning'
|
|
};
|
|
const TASK_ACTION_LABELS = {
|
|
install: 'Installing',
|
|
update: 'Updating',
|
|
remove: 'Removing'
|
|
};
|
|
const AGENT_VERSION_COLLATOR = new Intl.Collator('en', {
|
|
numeric: true,
|
|
sensitivity: 'base'
|
|
});
|
|
|
|
function readSettings() {
|
|
try {
|
|
const parsed = JSON.parse(window.localStorage.getItem(SETTINGS_KEY) || '{}');
|
|
return {
|
|
packageBaseUrl: normalizeUrl(parsed.packageBaseUrl || DEFAULT_PACKAGE_BASE_URL),
|
|
agentBaseUrl: normalizeUrl(parsed.agentBaseUrl || DEFAULT_AGENT_BASE_URL)
|
|
};
|
|
} catch {
|
|
return {
|
|
packageBaseUrl: DEFAULT_PACKAGE_BASE_URL,
|
|
agentBaseUrl: DEFAULT_AGENT_BASE_URL
|
|
};
|
|
}
|
|
}
|
|
|
|
function saveSettings(settings) {
|
|
window.localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
|
|
}
|
|
|
|
function getErrorMessage(error) {
|
|
return error instanceof Error ? error.message : String(error || 'Có lỗi xảy ra');
|
|
}
|
|
|
|
function copyTextFallback(text) {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = text;
|
|
textarea.setAttribute('readonly', '');
|
|
textarea.style.position = 'fixed';
|
|
textarea.style.top = '-1000px';
|
|
textarea.style.opacity = '0';
|
|
document.body.appendChild(textarea);
|
|
textarea.focus();
|
|
textarea.select();
|
|
textarea.setSelectionRange(0, textarea.value.length);
|
|
|
|
try {
|
|
return document.execCommand('copy');
|
|
} finally {
|
|
document.body.removeChild(textarea);
|
|
}
|
|
}
|
|
|
|
function isTaskActive(task) {
|
|
return Boolean(task?.taskId && !TERMINAL_TASK_STATUSES.has(task.status));
|
|
}
|
|
|
|
function clampProgress(value) {
|
|
return Math.max(0, Math.min(100, Number(value) || 0));
|
|
}
|
|
|
|
function statusBadgeClass(status) {
|
|
const tone = TASK_STATUS_TONES[status] || 'info';
|
|
return `badge badge-${tone}`;
|
|
}
|
|
|
|
function formatTaskTime(value) {
|
|
if (!value) return '--';
|
|
const parsed = new Date(value);
|
|
if (Number.isNaN(parsed.getTime())) return value;
|
|
return parsed.toLocaleTimeString([], {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
});
|
|
}
|
|
|
|
function compareAgentVersions(currentVersion, latestVersion) {
|
|
const current = String(currentVersion || '').trim();
|
|
const latest = String(latestVersion || '').trim();
|
|
if (!current && !latest) return 0;
|
|
if (!current) return -1;
|
|
if (!latest) return 1;
|
|
return AGENT_VERSION_COLLATOR.compare(current, latest);
|
|
}
|
|
|
|
function App() {
|
|
const [settings, setSettings] = useState(readSettings);
|
|
const [draftSettings, setDraftSettings] = useState(settings);
|
|
const [apps, setApps] = useState([]);
|
|
const [installedApps, setInstalledApps] = useState([]);
|
|
const [latestAgentPackage, setLatestAgentPackage] = useState(null);
|
|
const [agentHealth, setAgentHealth] = useState(null);
|
|
const [systemInfo, setSystemInfo] = useState(null);
|
|
const [packageStatus, setPackageStatus] = useState({ state: 'idle', message: '' });
|
|
const [agentStatus, setAgentStatus] = useState({ state: 'idle', message: '' });
|
|
const [selectedAppId, setSelectedAppId] = useState('');
|
|
const [selectedDetail, setSelectedDetail] = useState(null);
|
|
const [selectedManifest, setSelectedManifest] = useState(null);
|
|
const [detailStatus, setDetailStatus] = useState({ state: 'idle', message: '' });
|
|
const [query, setQuery] = useState('');
|
|
const [filter, setFilter] = useState('all');
|
|
const [toast, setToast] = useState(null);
|
|
const [busyAction, setBusyAction] = useState('');
|
|
const [activeTask, setActiveTask] = useState(null);
|
|
|
|
const packageBaseUrl = settings.packageBaseUrl;
|
|
const agentBaseUrl = settings.agentBaseUrl;
|
|
const installCommand = `curl -fsSL ${joinUrl(packageBaseUrl, '/install-agent.sh')} | sudo bash`;
|
|
const agentCommand = latestAgentPackage?.installCommand || installCommand;
|
|
|
|
const installedByAppId = useMemo(() => {
|
|
return new Map(installedApps.map((app) => [app.appId, app]));
|
|
}, [installedApps]);
|
|
|
|
const mergedApps = useMemo(() => {
|
|
return apps.map((app) => {
|
|
const installed = installedByAppId.get(app.appId) || installedByAppId.get(app.appCode);
|
|
const isInstalled = Boolean(installed);
|
|
const canUpdate = Boolean(isInstalled && installed.version && installed.version !== app.version);
|
|
|
|
return {
|
|
...app,
|
|
installed,
|
|
localStatus: canUpdate ? 'update' : (isInstalled ? 'installed' : 'available'),
|
|
canUpdate
|
|
};
|
|
});
|
|
}, [apps, installedByAppId]);
|
|
|
|
const filteredApps = useMemo(() => {
|
|
const needle = query.trim().toLowerCase();
|
|
return mergedApps.filter((app) => {
|
|
const matchesQuery = !needle || [
|
|
app.appId,
|
|
app.appCode,
|
|
app.appName,
|
|
app.version,
|
|
app.status
|
|
].join(' ').toLowerCase().includes(needle);
|
|
|
|
if (!matchesQuery) return false;
|
|
if (filter === 'installed') return app.localStatus === 'installed' || app.localStatus === 'update';
|
|
if (filter === 'updates') return app.localStatus === 'update';
|
|
if (filter === 'available') return app.localStatus === 'available';
|
|
return true;
|
|
});
|
|
}, [filter, mergedApps, query]);
|
|
|
|
const selectedApp = useMemo(() => {
|
|
return mergedApps.find((app) => app.appId === selectedAppId) || mergedApps[0] || null;
|
|
}, [mergedApps, selectedAppId]);
|
|
|
|
const agentNeedsUpdate = useMemo(() => {
|
|
return Boolean(
|
|
agentHealth?.agentVersion
|
|
&& latestAgentPackage?.version
|
|
&& compareAgentVersions(agentHealth.agentVersion, latestAgentPackage.version) < 0
|
|
);
|
|
}, [agentHealth?.agentVersion, latestAgentPackage?.version]);
|
|
|
|
const stats = useMemo(() => {
|
|
return {
|
|
available: apps.length,
|
|
installed: installedApps.length,
|
|
updates: mergedApps.filter((app) => app.canUpdate).length,
|
|
components: selectedManifest?.components?.length || selectedDetail?.packages?.length || 0
|
|
};
|
|
}, [apps.length, installedApps.length, mergedApps, selectedDetail, selectedManifest]);
|
|
|
|
const notify = useCallback((type, message) => {
|
|
setToast({ id: Date.now(), type, message });
|
|
}, []);
|
|
|
|
const refreshPackage = useCallback(async () => {
|
|
setPackageStatus({ state: 'loading', message: 'Đang tải app từ package server' });
|
|
try {
|
|
const [nextApps, nextAgentPackage] = await Promise.all([
|
|
fetchPackageApps(packageBaseUrl),
|
|
fetchLatestAgentPackage(packageBaseUrl).catch(() => null)
|
|
]);
|
|
setApps(nextApps);
|
|
setLatestAgentPackage(nextAgentPackage);
|
|
const agentNote = nextAgentPackage?.version ? ` · Agent ${nextAgentPackage.version}` : '';
|
|
setPackageStatus({ state: 'success', message: `${nextApps.length} app released${agentNote}` });
|
|
return nextApps;
|
|
} catch (error) {
|
|
setPackageStatus({ state: 'danger', message: getErrorMessage(error) });
|
|
setApps([]);
|
|
setLatestAgentPackage(null);
|
|
return [];
|
|
}
|
|
}, [packageBaseUrl]);
|
|
|
|
const refreshAgent = useCallback(async () => {
|
|
setAgentStatus({ state: 'loading', message: 'Đang kiểm tra Agent local' });
|
|
try {
|
|
const health = await fetchAgentHealth(agentBaseUrl);
|
|
setAgentHealth(health);
|
|
setAgentStatus({ state: 'success', message: `${health.hostname || 'Agent'} online` });
|
|
|
|
const [info, installed] = await Promise.all([
|
|
fetchAgentSystemInfo(agentBaseUrl).catch(() => null),
|
|
fetchInstalledApps(agentBaseUrl)
|
|
]);
|
|
setSystemInfo(info);
|
|
setInstalledApps(installed);
|
|
return true;
|
|
} catch (error) {
|
|
setAgentHealth(null);
|
|
setSystemInfo(null);
|
|
setInstalledApps([]);
|
|
setAgentStatus({ state: 'danger', message: getErrorMessage(error) });
|
|
return false;
|
|
}
|
|
}, [agentBaseUrl]);
|
|
|
|
const refreshAll = useCallback(async () => {
|
|
await Promise.all([refreshPackage(), refreshAgent()]);
|
|
}, [refreshAgent, refreshPackage]);
|
|
|
|
const loadSelectedDetail = useCallback(async (app) => {
|
|
if (!app) {
|
|
setSelectedDetail(null);
|
|
setSelectedManifest(null);
|
|
return;
|
|
}
|
|
|
|
setDetailStatus({ state: 'loading', message: 'Đang tải manifest' });
|
|
try {
|
|
const [detail, manifest] = await Promise.all([
|
|
fetchApplicationDetail(packageBaseUrl, app.appId).catch(() => null),
|
|
fetchApplicationManifest(packageBaseUrl, app.appId, app.version).catch(() => null)
|
|
]);
|
|
setSelectedDetail(detail);
|
|
setSelectedManifest(manifest);
|
|
setDetailStatus({ state: 'success', message: manifest ? 'Manifest sẵn sàng' : 'Đã tải app detail' });
|
|
} catch (error) {
|
|
setSelectedDetail(null);
|
|
setSelectedManifest(null);
|
|
setDetailStatus({ state: 'danger', message: getErrorMessage(error) });
|
|
}
|
|
}, [packageBaseUrl]);
|
|
|
|
const loadTaskSnapshot = useCallback(async (taskId) => {
|
|
try {
|
|
const [nextTask, logs, components] = await Promise.all([
|
|
fetchTaskStatus(agentBaseUrl, taskId),
|
|
fetchTaskLogs(agentBaseUrl, taskId).catch(() => []),
|
|
fetchTaskComponents(agentBaseUrl, taskId).catch(() => [])
|
|
]);
|
|
const snapshot = {
|
|
...nextTask,
|
|
logs,
|
|
components,
|
|
pollError: ''
|
|
};
|
|
|
|
setActiveTask((current) => {
|
|
if (!current || current.taskId !== taskId) return current;
|
|
return { ...current, ...snapshot };
|
|
});
|
|
|
|
if (TERMINAL_TASK_STATUSES.has(snapshot.status)) {
|
|
await refreshAgent();
|
|
}
|
|
return snapshot;
|
|
} catch (error) {
|
|
const message = getErrorMessage(error);
|
|
setActiveTask((current) => {
|
|
if (!current || current.taskId !== taskId) return current;
|
|
return { ...current, pollError: message };
|
|
});
|
|
return null;
|
|
}
|
|
}, [agentBaseUrl, refreshAgent]);
|
|
|
|
const startTask = useCallback((queuedTask, action, app) => {
|
|
const queuedAt = new Date().toISOString();
|
|
setActiveTask({
|
|
taskId: queuedTask.taskId,
|
|
action,
|
|
appId: app.appId,
|
|
appName: app.appName,
|
|
status: queuedTask.status || 'queued',
|
|
progress: 0,
|
|
currentStep: 'queued',
|
|
logs: [
|
|
{
|
|
time: queuedAt,
|
|
level: 'info',
|
|
message: `Task ${queuedTask.taskId} queued`
|
|
}
|
|
],
|
|
components: [],
|
|
pollError: '',
|
|
queuedAt
|
|
});
|
|
}, []);
|
|
|
|
const runAppAction = useCallback(async (action, app) => {
|
|
if (!agentHealth) {
|
|
notify('warning', 'Agent local đang offline. Cài Agent rồi bấm Retry.');
|
|
return;
|
|
}
|
|
|
|
if (action === 'remove' && !window.confirm(`Remove ${app.appName} khỏi máy local?`)) {
|
|
return;
|
|
}
|
|
|
|
const key = `${action}:${app.appId}`;
|
|
setBusyAction(key);
|
|
try {
|
|
let queuedTask;
|
|
if (action === 'install') {
|
|
queuedTask = await queueInstall(agentBaseUrl, app);
|
|
} else if (action === 'update') {
|
|
queuedTask = await queueUpdate(agentBaseUrl, app, app.installed);
|
|
} else {
|
|
queuedTask = await queueRemove(agentBaseUrl, app);
|
|
}
|
|
|
|
startTask(queuedTask, action, app);
|
|
notify('success', `Đã queue task ${queuedTask.taskId}`);
|
|
} catch (error) {
|
|
notify('failure', getErrorMessage(error));
|
|
} finally {
|
|
setBusyAction('');
|
|
}
|
|
}, [agentBaseUrl, agentHealth, notify, startTask]);
|
|
|
|
const applySettings = useCallback(() => {
|
|
const nextSettings = {
|
|
packageBaseUrl: normalizeUrl(draftSettings.packageBaseUrl || DEFAULT_PACKAGE_BASE_URL),
|
|
agentBaseUrl: normalizeUrl(draftSettings.agentBaseUrl || DEFAULT_AGENT_BASE_URL)
|
|
};
|
|
setSettings(nextSettings);
|
|
saveSettings(nextSettings);
|
|
notify('info', 'Đã cập nhật endpoint test');
|
|
}, [draftSettings, notify]);
|
|
|
|
const copyInstallCommand = useCallback(async () => {
|
|
if (!navigator.clipboard?.writeText) {
|
|
if (copyTextFallback(agentCommand)) {
|
|
notify('success', agentNeedsUpdate ? 'Da copy lenh update Agent' : 'Da copy lenh cai Agent');
|
|
return;
|
|
}
|
|
|
|
window.prompt('Copy Agent command', agentCommand);
|
|
notify('warning', 'Browser dang chan copy tu dong. Hay copy lenh trong popup.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(agentCommand);
|
|
notify('success', agentNeedsUpdate ? 'Đã copy lệnh update Agent' : 'Đã copy lệnh cài Agent');
|
|
} catch {
|
|
notify('warning', 'Không thể copy tự động trong browser này');
|
|
}
|
|
}, [agentCommand, agentNeedsUpdate, notify]);
|
|
|
|
useEffect(() => {
|
|
refreshAll();
|
|
}, [refreshAll]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedApp) {
|
|
setSelectedDetail(null);
|
|
setSelectedManifest(null);
|
|
return;
|
|
}
|
|
setSelectedAppId(selectedApp.appId);
|
|
loadSelectedDetail(selectedApp);
|
|
}, [loadSelectedDetail, selectedApp?.appId]);
|
|
|
|
useEffect(() => {
|
|
if (!activeTask?.taskId || TERMINAL_TASK_STATUSES.has(activeTask.status)) return undefined;
|
|
let disposed = false;
|
|
let terminalNotified = false;
|
|
|
|
async function poll() {
|
|
const nextTask = await loadTaskSnapshot(activeTask.taskId);
|
|
if (disposed || !nextTask) return;
|
|
if (TERMINAL_TASK_STATUSES.has(nextTask.status)) {
|
|
window.clearInterval(timer);
|
|
if (!terminalNotified) {
|
|
terminalNotified = true;
|
|
if (nextTask.status === 'success') {
|
|
notify('success', `${activeTask.appName || 'Task'} completed`);
|
|
} else if (nextTask.status === 'failed') {
|
|
notify('failure', nextTask.errorMessage || `Task ${nextTask.taskId} failed`);
|
|
} else {
|
|
notify('warning', `Task ${nextTask.taskId} ${nextTask.status}`);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
poll();
|
|
const timer = window.setInterval(poll, 1200);
|
|
|
|
return () => {
|
|
disposed = true;
|
|
window.clearInterval(timer);
|
|
};
|
|
}, [activeTask?.action, activeTask?.appName, activeTask?.status, activeTask?.taskId, loadTaskSnapshot, notify]);
|
|
|
|
useEffect(() => {
|
|
if (!toast) return undefined;
|
|
const timer = window.setTimeout(() => setToast(null), 3200);
|
|
return () => window.clearTimeout(timer);
|
|
}, [toast]);
|
|
|
|
return (
|
|
<div className="app-shell">
|
|
<aside className="sidebar">
|
|
<div className="brand-block">
|
|
<div className="brand-mark">
|
|
<PackageCheck size={20} aria-hidden="true" />
|
|
</div>
|
|
<div className="brand-copy">
|
|
<strong>Robot Installer</strong>
|
|
<span>Web Client</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="nav-section">
|
|
<div className="nav-label">Runtime</div>
|
|
<StatusBox
|
|
icon={agentHealth ? PlugZap : WifiOff}
|
|
title={agentNeedsUpdate ? 'Agent update available' : (agentHealth ? 'Agent online' : 'Agent offline')}
|
|
detail={agentHealth ? `${agentHealth.hostname || 'localhost'} · ${agentHealth.agentVersion || '-'}${agentNeedsUpdate ? ` -> ${latestAgentPackage.version}` : ''}` : '127.0.0.1:5010'}
|
|
tone={agentNeedsUpdate ? 'warning' : (agentHealth ? 'success' : 'danger')}
|
|
/>
|
|
<StatusBox
|
|
icon={Server}
|
|
title="Package API"
|
|
detail={packageStatus.message || packageBaseUrl}
|
|
tone={packageStatus.state === 'success' ? 'success' : packageStatus.state}
|
|
/>
|
|
|
|
<div className="nav-label">Endpoint</div>
|
|
<label className="settings-field">
|
|
<span>Package server</span>
|
|
<input
|
|
value={draftSettings.packageBaseUrl}
|
|
onChange={(event) => setDraftSettings((current) => ({
|
|
...current,
|
|
packageBaseUrl: event.target.value
|
|
}))}
|
|
/>
|
|
</label>
|
|
<label className="settings-field">
|
|
<span>Local Agent</span>
|
|
<input
|
|
value={draftSettings.agentBaseUrl}
|
|
onChange={(event) => setDraftSettings((current) => ({
|
|
...current,
|
|
agentBaseUrl: event.target.value
|
|
}))}
|
|
/>
|
|
</label>
|
|
<button className="btn btn-secondary full" type="button" onClick={applySettings}>
|
|
<Settings size={15} aria-hidden="true" />
|
|
Apply
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="main-shell">
|
|
<header className="topbar">
|
|
<div className="topbar-title">
|
|
<span>robot.installer</span>
|
|
<strong>{agentHealth ? 'Ready for install' : 'Waiting for Agent'}</strong>
|
|
</div>
|
|
<div className="topbar-actions">
|
|
<a className="icon-button" href={joinUrl(packageBaseUrl, '/api/apps')} target="_blank" rel="noreferrer" title="Open package API">
|
|
<ExternalLink size={17} aria-hidden="true" />
|
|
</a>
|
|
<button className="btn btn-secondary" type="button" onClick={refreshAll}>
|
|
<RefreshCcw size={15} aria-hidden="true" />
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="page">
|
|
<div className="page-header">
|
|
<div>
|
|
<h1>Application catalog</h1>
|
|
<p>Released apps từ package server và trạng thái cài đặt trên máy local.</p>
|
|
</div>
|
|
<div className="page-actions">
|
|
<button className="btn btn-secondary" type="button" onClick={copyInstallCommand}>
|
|
<Clipboard size={15} aria-hidden="true" />
|
|
{agentNeedsUpdate ? 'Copy Agent update' : 'Copy Agent command'}
|
|
</button>
|
|
<a className="btn btn-primary" href={joinUrl(packageBaseUrl, '/install-agent.sh')} target="_blank" rel="noreferrer">
|
|
<Download size={15} aria-hidden="true" />
|
|
{agentNeedsUpdate ? 'update-agent.sh' : 'install-agent.sh'}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="dashboard-stats">
|
|
<MetricCard label="Released apps" value={stats.available} note={packageStatus.state === 'loading' ? 'loading' : 'from API'} />
|
|
<MetricCard label="Installed local" value={stats.installed} note={agentHealth ? 'Agent SQLite' : 'Agent offline'} />
|
|
<MetricCard label="Updates" value={stats.updates} note="version diff" tone={stats.updates ? 'warning' : 'success'} />
|
|
<MetricCard label="Components" value={stats.components} note={selectedApp?.appCode || selectedApp?.appId || 'selected app'} />
|
|
</div>
|
|
|
|
{!agentHealth && (
|
|
<div className="offline-banner">
|
|
<AlertCircle size={19} aria-hidden="true" />
|
|
<div>
|
|
<strong>Local Installer Agent chưa online</strong>
|
|
<code>{agentCommand}</code>
|
|
</div>
|
|
<button className="btn btn-secondary" type="button" onClick={copyInstallCommand}>
|
|
<Clipboard size={15} aria-hidden="true" />
|
|
Copy
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{agentNeedsUpdate && (
|
|
<div className="offline-banner agent-update-banner">
|
|
<AlertCircle size={19} aria-hidden="true" />
|
|
<div>
|
|
<strong>Agent {latestAgentPackage.version} đã sẵn sàng</strong>
|
|
<code>{agentCommand}</code>
|
|
</div>
|
|
<button className="btn btn-secondary" type="button" onClick={copyInstallCommand}>
|
|
<Clipboard size={15} aria-hidden="true" />
|
|
Copy
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="workbench-grid">
|
|
<section className="table-panel">
|
|
<div className="page-filters inline">
|
|
<label className="filter-field wide">
|
|
<span>Search</span>
|
|
<div className="input-with-icon">
|
|
<Search size={15} aria-hidden="true" />
|
|
<input
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder="App code, name, version..."
|
|
/>
|
|
</div>
|
|
</label>
|
|
<label className="filter-field">
|
|
<span>Status</span>
|
|
<select value={filter} onChange={(event) => setFilter(event.target.value)}>
|
|
<option value="all">All</option>
|
|
<option value="available">Available</option>
|
|
<option value="installed">Installed</option>
|
|
<option value="updates">Updates</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Application</th>
|
|
<th>Released</th>
|
|
<th>Local</th>
|
|
<th>Packages</th>
|
|
<th className="action-col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{packageStatus.state === 'loading' && (
|
|
<tr>
|
|
<td colSpan="5" className="table-empty">Đang tải danh sách app...</td>
|
|
</tr>
|
|
)}
|
|
{packageStatus.state === 'danger' && (
|
|
<tr>
|
|
<td colSpan="5" className="table-empty danger-text">{packageStatus.message}</td>
|
|
</tr>
|
|
)}
|
|
{packageStatus.state !== 'loading' && packageStatus.state !== 'danger' && filteredApps.length === 0 && (
|
|
<tr>
|
|
<td colSpan="5" className="table-empty">Chưa có app phù hợp bộ lọc.</td>
|
|
</tr>
|
|
)}
|
|
{filteredApps.map((app) => {
|
|
const rowTask = activeTask?.appId === app.appId ? activeTask : null;
|
|
const rowTaskBusy = isTaskActive(rowTask);
|
|
const installBusy = busyAction === `install:${app.appId}` || (rowTaskBusy && rowTask.action === 'install');
|
|
const updateBusy = busyAction === `update:${app.appId}` || (rowTaskBusy && rowTask.action === 'update');
|
|
const removeBusy = busyAction === `remove:${app.appId}` || (rowTaskBusy && rowTask.action === 'remove');
|
|
|
|
return (
|
|
<tr
|
|
key={app.appId}
|
|
className={selectedApp?.appId === app.appId ? 'selected-row' : ''}
|
|
onClick={() => setSelectedAppId(app.appId)}
|
|
>
|
|
<td>
|
|
<button className="table-title as-button" type="button" onClick={() => setSelectedAppId(app.appId)}>
|
|
{app.appName}
|
|
</button>
|
|
<span className="table-subtitle">{app.appCode || app.appId}</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge badge-info">{app.version}</span>
|
|
</td>
|
|
<td>
|
|
<LocalStatus app={app} task={rowTaskBusy ? rowTask : null} />
|
|
</td>
|
|
<td>{app.packageCount || 0}</td>
|
|
<td className="action-col">
|
|
<div className="action-group">
|
|
{!app.installed && (
|
|
<button
|
|
className="btn btn-primary compact"
|
|
type="button"
|
|
disabled={!agentHealth || rowTaskBusy || installBusy}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
runAppAction('install', app);
|
|
}}
|
|
>
|
|
{installBusy ? <Loader2 className="spin" size={14} aria-hidden="true" /> : <Play size={14} aria-hidden="true" />}
|
|
Install
|
|
</button>
|
|
)}
|
|
{app.installed && app.canUpdate && (
|
|
<button
|
|
className="btn btn-warning compact"
|
|
type="button"
|
|
disabled={!agentHealth || rowTaskBusy || updateBusy}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
runAppAction('update', app);
|
|
}}
|
|
>
|
|
{updateBusy ? <Loader2 className="spin" size={14} aria-hidden="true" /> : <RotateCcw size={14} aria-hidden="true" />}
|
|
Update
|
|
</button>
|
|
)}
|
|
{app.installed && (
|
|
<button
|
|
className="icon-button danger"
|
|
type="button"
|
|
title="Remove"
|
|
disabled={!agentHealth || rowTaskBusy || removeBusy}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
runAppAction('remove', app);
|
|
}}
|
|
>
|
|
{removeBusy ? <Loader2 className="spin" size={16} aria-hidden="true" /> : <Trash2 size={16} aria-hidden="true" />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="page-pager">
|
|
<span>{filteredApps.length} / {mergedApps.length} apps</span>
|
|
<span>{packageBaseUrl}</span>
|
|
</div>
|
|
</section>
|
|
|
|
<aside className="side-stack">
|
|
<AgentPanel
|
|
health={agentHealth}
|
|
systemInfo={systemInfo}
|
|
status={agentStatus}
|
|
latestAgentPackage={latestAgentPackage}
|
|
needsUpdate={agentNeedsUpdate}
|
|
onCopyUpdate={copyInstallCommand}
|
|
/>
|
|
{activeTask && (
|
|
<TaskPanel
|
|
task={activeTask}
|
|
onClear={() => setActiveTask(null)}
|
|
onRefresh={() => loadTaskSnapshot(activeTask.taskId)}
|
|
/>
|
|
)}
|
|
<AppDetailPanel
|
|
app={selectedApp}
|
|
detail={selectedDetail}
|
|
manifest={selectedManifest}
|
|
status={detailStatus}
|
|
packageBaseUrl={packageBaseUrl}
|
|
/>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
{toast && <Toast toast={toast} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatusBox({ icon: Icon, title, detail, tone }) {
|
|
return (
|
|
<div className={`status-box tone-${tone || 'muted'}`}>
|
|
<span className="status-icon"><Icon size={16} aria-hidden="true" /></span>
|
|
<div>
|
|
<strong>{title}</strong>
|
|
<span>{detail}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MetricCard({ label, value, note, tone }) {
|
|
return (
|
|
<article className={`metric-card ${tone ? `tone-${tone}` : ''}`}>
|
|
<span>{label}</span>
|
|
<div>
|
|
<strong>{value}</strong>
|
|
<small>{note}</small>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
function LocalStatus({ app, task }) {
|
|
if (isTaskActive(task)) {
|
|
return (
|
|
<span className="status-inline">
|
|
<span className={statusBadgeClass(task.status)}>
|
|
{TASK_ACTION_LABELS[task.action] || task.status}
|
|
</span>
|
|
<small>{clampProgress(task.progress)}%</small>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (app.localStatus === 'update') {
|
|
return (
|
|
<span className="status-inline">
|
|
<span className="badge badge-warning">Update</span>
|
|
<small>{app.installed.version}</small>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (app.localStatus === 'installed') {
|
|
return (
|
|
<span className="status-inline">
|
|
<span className="badge badge-success">Installed</span>
|
|
<small>{app.installed.version}</small>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return <span className="badge badge-muted">Available</span>;
|
|
}
|
|
|
|
function TaskPanel({ task, onClear, onRefresh }) {
|
|
const progress = clampProgress(task.progress);
|
|
const statusTone = TASK_STATUS_TONES[task.status] || 'info';
|
|
const components = task.components || [];
|
|
const logs = task.logs || [];
|
|
const visibleLogs = logs.slice(-6);
|
|
const canClear = TERMINAL_TASK_STATUSES.has(task.status);
|
|
|
|
return (
|
|
<section className="panel task-panel">
|
|
<div className="panel-header">
|
|
<div>
|
|
<h2>Task monitor</h2>
|
|
<p>{task.taskId}</p>
|
|
</div>
|
|
<div className="panel-actions">
|
|
<span className={statusBadgeClass(task.status)}>{task.status || 'queued'}</span>
|
|
<button className="icon-button subtle" type="button" title="Refresh task" onClick={onRefresh}>
|
|
<RefreshCcw size={16} aria-hidden="true" />
|
|
</button>
|
|
{canClear && (
|
|
<button className="icon-button subtle" type="button" title="Clear task" onClick={onClear}>
|
|
<XCircle size={16} aria-hidden="true" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="task-progress" aria-label={`Task progress ${progress}%`}>
|
|
<div className={`task-progress-bar tone-${statusTone}`} style={{ width: `${progress}%` }} />
|
|
</div>
|
|
|
|
<dl className="detail-list compact-list">
|
|
<div>
|
|
<dt>Action</dt>
|
|
<dd>{task.action || task.type || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>App</dt>
|
|
<dd>{task.appName || task.appId || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Step</dt>
|
|
<dd>{task.currentStep || '-'}</dd>
|
|
</div>
|
|
{(task.errorMessage || task.pollError) && (
|
|
<div>
|
|
<dt>Error</dt>
|
|
<dd className="danger-text">{task.errorMessage || task.pollError}</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
|
|
<div className="component-list task-components">
|
|
<div className="component-list-title">
|
|
<Activity size={15} aria-hidden="true" />
|
|
Components
|
|
</div>
|
|
{components.map((component) => (
|
|
<div className="component-item task-component-item" key={component.componentId}>
|
|
<div>
|
|
<strong>{component.componentId}</strong>
|
|
<span>{component.currentStep || component.type || '-'}</span>
|
|
</div>
|
|
<span className={statusBadgeClass(component.status)}>{component.progress}%</span>
|
|
</div>
|
|
))}
|
|
{!components.length && (
|
|
<div className="table-empty compact-empty">Waiting for component details...</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="task-log-list">
|
|
{visibleLogs.map((log, index) => (
|
|
<div className="task-log-line" key={`${log.time}-${log.level}-${index}`}>
|
|
<span>{formatTaskTime(log.time)}</span>
|
|
<strong>{log.level}</strong>
|
|
<p>{log.message}</p>
|
|
</div>
|
|
))}
|
|
{!visibleLogs.length && (
|
|
<div className="table-empty compact-empty">Waiting for task logs...</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function AgentPanel({ health, systemInfo, status, latestAgentPackage, needsUpdate, onCopyUpdate }) {
|
|
return (
|
|
<section className="panel">
|
|
<div className="panel-header">
|
|
<div>
|
|
<h2>Local Agent</h2>
|
|
<p>{status.message || '127.0.0.1:5010'}</p>
|
|
</div>
|
|
{needsUpdate ? <AlertCircle className="panel-state warning" size={20} aria-hidden="true" /> : health ? <CheckCircle2 className="panel-state success" size={20} aria-hidden="true" /> : <XCircle className="panel-state danger" size={20} aria-hidden="true" />}
|
|
</div>
|
|
<dl className="detail-list compact-list">
|
|
<div>
|
|
<dt>Version</dt>
|
|
<dd>
|
|
<span className={needsUpdate ? 'status-inline' : ''}>
|
|
{health?.agentVersion || '-'}
|
|
{needsUpdate && <span className="badge badge-warning">Update</span>}
|
|
</span>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Latest</dt>
|
|
<dd>{latestAgentPackage?.version || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Host</dt>
|
|
<dd>{health?.hostname || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>OS</dt>
|
|
<dd>{systemInfo?.os || health?.os || '-'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Arch</dt>
|
|
<dd>{systemInfo?.architecture || health?.architecture || '-'}</dd>
|
|
</div>
|
|
</dl>
|
|
<div className="agent-metrics">
|
|
<span><Cpu size={14} aria-hidden="true" /> {systemInfo?.kernel || 'kernel -'}</span>
|
|
<span><HardDrive size={14} aria-hidden="true" /> {systemInfo?.diskFree || 'disk -'}</span>
|
|
</div>
|
|
{needsUpdate && (
|
|
<div className="agent-update-action">
|
|
<button className="btn btn-warning" type="button" onClick={onCopyUpdate}>
|
|
<Clipboard size={15} aria-hidden="true" />
|
|
Copy update command
|
|
</button>
|
|
{latestAgentPackage?.downloadUrl && (
|
|
<a className="btn btn-secondary" href={latestAgentPackage.downloadUrl} target="_blank" rel="noreferrer">
|
|
<Download size={15} aria-hidden="true" />
|
|
Latest .deb
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function AppDetailPanel({ app, detail, manifest, status, packageBaseUrl }) {
|
|
const packages = detail?.packages || [];
|
|
const components = manifest?.components || [];
|
|
|
|
return (
|
|
<section className="panel app-detail-panel">
|
|
<div className="panel-header">
|
|
<div>
|
|
<h2>{app?.appName || 'App detail'}</h2>
|
|
<p>{app?.appCode || app?.appId || status.message || packageBaseUrl}</p>
|
|
</div>
|
|
{status.state === 'loading' ? <Loader2 className="spin panel-state" size={20} aria-hidden="true" /> : <Box className="panel-state" size={20} aria-hidden="true" />}
|
|
</div>
|
|
|
|
{app ? (
|
|
<>
|
|
<dl className="detail-list compact-list">
|
|
<div>
|
|
<dt>Released</dt>
|
|
<dd>{app.version}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Status</dt>
|
|
<dd><span className="badge badge-success">{app.status || 'Released'}</span></dd>
|
|
</div>
|
|
<div>
|
|
<dt>Local</dt>
|
|
<dd>{app.installed ? `${app.installed.version} · ${app.installed.status || 'installed'}` : 'Not installed'}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div className="component-list">
|
|
<div className="component-list-title">
|
|
<ShieldCheck size={15} aria-hidden="true" />
|
|
Components
|
|
</div>
|
|
{(components.length ? components : packages).slice(0, 5).map((item) => (
|
|
<div className="component-item" key={item.componentId || item.id || item.packageId}>
|
|
<div>
|
|
<strong>{item.componentId || item.code || item.name}</strong>
|
|
<span>{item.packageName || item.selectedVersion || item.type}</span>
|
|
</div>
|
|
<span className="badge badge-muted">{item.version || item.selectedVersion || item.type || 'pkg'}</span>
|
|
</div>
|
|
))}
|
|
{!components.length && !packages.length && (
|
|
<div className="table-empty compact-empty">{status.message || 'Chưa có component.'}</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="table-empty compact-empty">Chọn app để xem manifest.</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function Toast({ toast }) {
|
|
const tone = toast.type === 'failure' ? 'danger' : toast.type;
|
|
const Icon = tone === 'danger' ? AlertCircle : tone === 'success' ? CheckCircle2 : Activity;
|
|
return (
|
|
<div className={`toast tone-${tone || 'info'}`}>
|
|
<Icon size={17} aria-hidden="true" />
|
|
<span>{toast.message}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
createRoot(document.getElementById('root')).render(<App />);
|