- Implemented Docker operations including image building, container management, and resource stats. - Added Gitea API client for repository management and webhook handling. - Introduced monitoring service to collect and store container metrics in InfluxDB. - Created a queue system using BullMQ for managing deployment jobs with real-time log streaming. - Developed Telegram notification service for deployment status updates. - Added Traefik label generation for dynamic reverse proxy configuration. - Implemented WebSocket endpoints for log streaming and terminal access to containers. - Created an updater sidecar for self-updating the AutoDeployer container.
86 lines
2.8 KiB
JavaScript
86 lines
2.8 KiB
JavaScript
import { auth } from './api.js';
|
|
import { icons } from './icons.js';
|
|
import { route, navigate, startRouter } from './router.js';
|
|
import { renderDashboard } from './pages/dashboard.js';
|
|
import { renderLogin } from './pages/login.js';
|
|
import { renderServiceDetail } from './pages/service-detail.js';
|
|
import { renderLogs } from './pages/logs.js';
|
|
import { renderMonitoring } from './pages/monitoring.js';
|
|
import { renderSettings } from './pages/settings.js';
|
|
|
|
let currentUser = null;
|
|
|
|
function renderSidebar(user) {
|
|
return `
|
|
<aside class="sidebar">
|
|
<div class="sidebar-brand">
|
|
<div class="sidebar-brand-icon">${icons.rocket(20)}</div>
|
|
<h1>AutoDeployer</h1>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-section">Navigation</div>
|
|
<div class="sidebar-link" data-path="/">${icons.layoutDashboard()} <span>Dashboard</span></div>
|
|
<div class="sidebar-link" data-path="/logs">${icons.scrollText()} <span>Logs</span></div>
|
|
<div class="sidebar-link" data-path="/monitoring">${icons.activity()} <span>Monitoring</span></div>
|
|
<div class="sidebar-section">System</div>
|
|
<div class="sidebar-link" data-path="/settings">${icons.settings()} <span>Settings</span></div>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<div class="sidebar-link" id="logout-btn">${icons.logOut()} <span>Logout</span></div>
|
|
<div class="text-xs text-muted mt-2" style="padding:0 12px">
|
|
Logged in as <strong>${user.username}</strong>
|
|
</div>
|
|
</div>
|
|
</aside>`;
|
|
}
|
|
|
|
function setupSidebarEvents() {
|
|
document.querySelectorAll('.sidebar-link[data-path]').forEach(el => {
|
|
el.onclick = () => navigate(el.dataset.path);
|
|
});
|
|
const logoutBtn = document.getElementById('logout-btn');
|
|
if (logoutBtn) logoutBtn.onclick = async () => { await auth.logout(); location.reload(); };
|
|
}
|
|
|
|
async function init() {
|
|
const app = document.getElementById('app');
|
|
|
|
// Check auth
|
|
try {
|
|
const status = await auth.status();
|
|
if (status.setupRequired) {
|
|
renderLogin(app, true, onLogin);
|
|
return;
|
|
}
|
|
const data = await auth.me();
|
|
currentUser = data.user;
|
|
} catch {
|
|
renderLogin(app, false, onLogin);
|
|
return;
|
|
}
|
|
|
|
// Render app layout
|
|
app.innerHTML = `
|
|
${renderSidebar(currentUser)}
|
|
<main class="main-content" id="page-content"></main>
|
|
`;
|
|
setupSidebarEvents();
|
|
|
|
// Setup routes
|
|
const content = document.getElementById('page-content');
|
|
route('/', (c) => renderDashboard(c));
|
|
route('/services/:id', (c, p) => renderServiceDetail(c, p.id));
|
|
route('/logs', (c) => renderLogs(c));
|
|
route('/monitoring', (c) => renderMonitoring(c));
|
|
route('/settings', (c) => renderSettings(c));
|
|
|
|
startRouter(content);
|
|
}
|
|
|
|
function onLogin(user) {
|
|
currentUser = user;
|
|
init();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', init);
|