ADD: sites and architecture module
This commit is contained in:
364
platform/templates/pages/sites.html
Normal file
364
platform/templates/pages/sites.html
Normal file
@@ -0,0 +1,364 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
|
||||
<style>
|
||||
.sites-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sites-summary .stat-card { text-align: center; }
|
||||
.sites-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.site-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
transition: border-color var(--trans), box-shadow var(--trans);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.site-card:hover {
|
||||
border-color: var(--border2);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.site-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
padding: 18px 18px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface2);
|
||||
}
|
||||
.site-icon-wrap {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
}
|
||||
.site-icon-wrap img { width: 28px; height: 28px; }
|
||||
.site-icon-wrap i { font-size: 22px; }
|
||||
.site-card-title { flex: 1; min-width: 0; }
|
||||
.site-card-title h3 {
|
||||
font-size: 16px; font-weight: 700; margin: 0 0 2px;
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||||
}
|
||||
.site-tagline { font-size: 12px; color: var(--text3); margin: 0; }
|
||||
.site-category {
|
||||
font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
|
||||
color: var(--text3); background: var(--surface);
|
||||
border: 1px solid var(--border); padding: 2px 7px; border-radius: 20px;
|
||||
}
|
||||
.site-card-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
|
||||
.site-row {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.site-row-label {
|
||||
font-family: var(--mono); font-size: 9px; font-weight: 700;
|
||||
letter-spacing: 0.08em; color: var(--text3);
|
||||
min-width: 62px; padding-top: 2px;
|
||||
}
|
||||
.site-row-value { flex: 1; min-width: 0; word-break: break-all; }
|
||||
.site-url-link {
|
||||
color: var(--accent2); text-decoration: none; font-family: var(--mono); font-size: 11px;
|
||||
}
|
||||
.site-url-link:hover { text-decoration: underline; }
|
||||
.domain-set { color: var(--green); }
|
||||
.domain-unset { color: var(--text3); font-style: italic; }
|
||||
.health-pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 4px 10px; border-radius: 20px;
|
||||
font-family: var(--mono); font-size: 11px; font-weight: 500;
|
||||
}
|
||||
.health-pill.up { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.25); }
|
||||
.health-pill.down { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.25); }
|
||||
.health-pill.offline { background: rgba(148,163,184,0.12); color: var(--text3); border: 1px solid var(--border); }
|
||||
.health-pill.checking { background: rgba(59,130,246,0.12); color: var(--accent2); border: 1px solid rgba(59,130,246,0.25); }
|
||||
.health-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
.health-pill.checking .dot { animation: pulse-dot 1s infinite; }
|
||||
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }
|
||||
.site-card-footer {
|
||||
display: flex; gap: 8px; padding: 0 18px 16px; flex-wrap: wrap;
|
||||
}
|
||||
.site-detail-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
|
||||
}
|
||||
.site-detail-item {
|
||||
background: var(--surface2); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 10px 12px;
|
||||
}
|
||||
.site-detail-item .lbl {
|
||||
font-family: var(--mono); font-size: 9px; color: var(--text3);
|
||||
letter-spacing: 0.08em; margin-bottom: 4px;
|
||||
}
|
||||
.site-detail-item .val {
|
||||
font-family: var(--mono); font-size: 12px; color: var(--text); word-break: break-all;
|
||||
}
|
||||
.site-ctr-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
|
||||
.site-ctr-table th {
|
||||
text-align: left; font-family: var(--mono); font-size: 9px;
|
||||
color: var(--text3); padding: 6px 8px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.site-ctr-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
||||
.site-ctr-table tr:last-child td { border-bottom: none; }
|
||||
@media (max-width: 900px) {
|
||||
.sites-summary { grid-template-columns: repeat(2, 1fr); }
|
||||
.site-detail-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card" style="margin-bottom:16px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;">
|
||||
<div style="display:flex;align-items:center;gap:12px;">
|
||||
<div class="site-icon-wrap" style="width:40px;height:40px;border-color:var(--accent)33;">
|
||||
<i class="fas fa-gauge-high" style="color:var(--accent);font-size:18px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:13px;font-weight:600;">This platform</div>
|
||||
<a class="site-url-link" href="{{ platform_url }}" target="_blank" rel="noopener">{{ platform_url }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-ghost btn-sm" href="{{ platform_url }}" target="_blank" rel="noopener">
|
||||
<i class="fas fa-arrow-up-right-from-square"></i> cloudops.nav.ovh
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sites-summary" id="sites-summary">
|
||||
<div class="stat-card"><div class="stat-number" id="ss-total">{{ site_count }}</div><div class="stat-label">Sites</div></div>
|
||||
<div class="stat-card"><div class="stat-number" id="ss-up" style="color:var(--green);">—</div><div class="stat-label">Healthy</div></div>
|
||||
<div class="stat-card"><div class="stat-number" id="ss-running" style="color:var(--accent2);">—</div><div class="stat-label">Containers Up</div></div>
|
||||
<div class="stat-card"><div class="stat-number" id="ss-domains" style="color:var(--purple);">—</div><div class="stat-label">With Domain</div></div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom:16px;">
|
||||
<div class="card-header">
|
||||
<div class="card-title"><i class="fas fa-globe"></i> Your Applications</div>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<span class="card-meta" id="sites-refresh-meta">Loading…</span>
|
||||
<button class="btn btn-ghost btn-sm" onclick="loadSites(true)"><i class="fas fa-heart-pulse"></i> Health check all</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sites-grid" id="sites-grid">
|
||||
<div class="empty-state" style="grid-column:1/-1;"><i class="fas fa-spinner fa-spin"></i> Loading sites…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Site details modal #}
|
||||
<div id="site-detail-modal" class="modal-overlay" style="display:none;" onclick="closeSiteModal(event)">
|
||||
<div class="modal-box" style="max-width:640px;" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title" id="site-modal-title"><i class="fas fa-circle-info" style="color:var(--accent2);"></i> Site Details</div>
|
||||
<button class="modal-close" onclick="closeSiteModal()" title="Close">✕</button>
|
||||
</div>
|
||||
<div class="modal-body" id="site-modal-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const SITE_ICONS = {
|
||||
erpnext: 'https://cdn.simpleicons.org/erpnext/0089FF',
|
||||
odoo: 'https://cdn.simpleicons.org/odoo/714B67',
|
||||
nextcloud: 'https://cdn.simpleicons.org/nextcloud/0082C9',
|
||||
mautic: 'https://cdn.simpleicons.org/mautic/4E5E9E',
|
||||
n8n: 'https://cdn.simpleicons.org/n8n/EA4B71',
|
||||
};
|
||||
|
||||
let sitesData = [];
|
||||
|
||||
function esc(s) {
|
||||
if (s == null) return '';
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
function healthPill(health, containerRunning) {
|
||||
if (!health) {
|
||||
return containerRunning
|
||||
? '<span class="health-pill checking"><span class="dot"></span>Unchecked</span>'
|
||||
: '<span class="health-pill offline"><span class="dot"></span>Offline</span>';
|
||||
}
|
||||
const st = health.status || 'down';
|
||||
const labels = { up: 'Active', down: 'Unreachable', offline: 'Offline', checking: 'Checking…' };
|
||||
const extra = health.latency_ms != null ? ` · ${health.latency_ms}ms` : '';
|
||||
const code = health.http_code ? ` · HTTP ${health.http_code}` : '';
|
||||
return `<span class="health-pill ${st}"><span class="dot"></span>${labels[st] || st}${extra}${code}</span>`;
|
||||
}
|
||||
|
||||
function renderSiteCard(site) {
|
||||
const iconUrl = SITE_ICONS[site.icon] || '';
|
||||
const iconHtml = iconUrl
|
||||
? `<img src="${iconUrl}" alt="${esc(site.name)}" onerror="this.parentElement.innerHTML='<i class=\\'fas fa-server\\' style=\\'color:${esc(site.brand_color)}\\'></i>'">`
|
||||
: `<i class="fas fa-server" style="color:${esc(site.brand_color)}"></i>`;
|
||||
|
||||
const domainHtml = site.has_domain
|
||||
? `<span class="domain-set"><i class="fas fa-check-circle"></i> ${esc(site.domain)}</span>`
|
||||
: `<span class="domain-unset"><i class="fas fa-minus-circle"></i> Not configured — using IP</span>`;
|
||||
|
||||
return `<article class="site-card" data-site-id="${esc(site.id)}" style="border-top:3px solid ${esc(site.brand_color)}">
|
||||
<div class="site-card-header">
|
||||
<div class="site-icon-wrap" style="border-color:${esc(site.brand_color)}33">${iconHtml}</div>
|
||||
<div class="site-card-title">
|
||||
<h3>${esc(site.name)} <span class="site-category">${esc(site.category)}</span></h3>
|
||||
<p class="site-tagline">${esc(site.tagline)}</p>
|
||||
</div>
|
||||
<div id="health-${esc(site.id)}">${healthPill(site.health, site.container_running)}</div>
|
||||
</div>
|
||||
<div class="site-card-body">
|
||||
<div class="site-row">
|
||||
<span class="site-row-label">DOMAIN</span>
|
||||
<span class="site-row-value">${domainHtml}</span>
|
||||
</div>
|
||||
<div class="site-row">
|
||||
<span class="site-row-label">URL</span>
|
||||
<span class="site-row-value">
|
||||
<a class="site-url-link" href="${esc(site.access_url)}" target="_blank" rel="noopener">${esc(site.access_url)}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="site-row">
|
||||
<span class="site-row-label">PORT</span>
|
||||
<span class="site-row-value" style="font-family:var(--mono);">
|
||||
${esc(site.port_mapping || site.port)}
|
||||
${site.internal_port && site.internal_port !== site.port ? ` <span class="dim">(internal ${site.internal_port})</span>` : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div class="site-row">
|
||||
<span class="site-row-label">CONTAINER</span>
|
||||
<span class="site-row-value">
|
||||
${site.container_running
|
||||
? `<span class="badge badge-run">Running</span>`
|
||||
: `<span class="badge badge-stop">Stopped</span>`}
|
||||
<span class="dim" style="font-family:var(--mono);margin-left:6px;">${esc(site.main_container)}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-card-footer">
|
||||
<a class="btn btn-primary btn-sm" href="${esc(site.access_url)}" target="_blank" rel="noopener">
|
||||
<i class="fas fa-arrow-up-right-from-square"></i> Open site
|
||||
</a>
|
||||
<button class="btn btn-ghost btn-sm" onclick="pingSite('${esc(site.id)}')">
|
||||
<i class="fas fa-heart-pulse"></i> Ping
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-sm" onclick="openSiteDetails('${esc(site.id)}')">
|
||||
<i class="fas fa-circle-info"></i> Details
|
||||
</button>
|
||||
</div>
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function updateSummary(sites) {
|
||||
const up = sites.filter(s => s.health && s.health.status === 'up').length;
|
||||
const running = sites.reduce((n, s) => n + (s.containers_running || 0), 0);
|
||||
const domains = sites.filter(s => s.has_domain).length;
|
||||
document.getElementById('ss-up').textContent = up;
|
||||
document.getElementById('ss-running').textContent = running;
|
||||
document.getElementById('ss-domains').textContent = domains;
|
||||
}
|
||||
|
||||
async function loadSites(withHealth = false) {
|
||||
const grid = document.getElementById('sites-grid');
|
||||
const meta = document.getElementById('sites-refresh-meta');
|
||||
try {
|
||||
meta.textContent = withHealth ? 'Running health checks…' : 'Refreshing…';
|
||||
const res = await fetch('/api/sites?health=' + (withHealth ? '1' : '0'));
|
||||
const data = await res.json();
|
||||
sitesData = data.sites || [];
|
||||
grid.innerHTML = sitesData.length
|
||||
? sitesData.map(renderSiteCard).join('')
|
||||
: '<div class="empty-state" style="grid-column:1/-1;"><i class="fas fa-inbox"></i>No sites configured</div>';
|
||||
updateSummary(sitesData);
|
||||
meta.textContent = 'Updated ' + new Date().toLocaleTimeString();
|
||||
} catch (e) {
|
||||
grid.innerHTML = `<div class="empty-state" style="grid-column:1/-1;color:var(--red);">Failed to load: ${esc(e)}</div>`;
|
||||
meta.textContent = 'Error';
|
||||
}
|
||||
}
|
||||
|
||||
async function pingSite(siteId) {
|
||||
const el = document.getElementById('health-' + siteId);
|
||||
if (el) el.innerHTML = healthPill({ status: 'checking' }, true);
|
||||
try {
|
||||
const res = await fetch('/api/sites/' + siteId + '/health');
|
||||
const health = await res.json();
|
||||
const site = sitesData.find(s => s.id === siteId);
|
||||
if (site) site.health = health;
|
||||
if (el) el.innerHTML = healthPill(health, site?.container_running);
|
||||
updateSummary(sitesData);
|
||||
} catch (e) {
|
||||
if (el) el.innerHTML = healthPill({ status: 'down', error: String(e) }, true);
|
||||
}
|
||||
}
|
||||
|
||||
function openSiteDetails(siteId) {
|
||||
const site = sitesData.find(s => s.id === siteId);
|
||||
if (!site) return;
|
||||
const modal = document.getElementById('site-detail-modal');
|
||||
const body = document.getElementById('site-modal-body');
|
||||
document.getElementById('site-modal-title').innerHTML =
|
||||
`<i class="fas fa-circle-info" style="color:${esc(site.brand_color)}"></i> ${esc(site.name)} — Deployment`;
|
||||
|
||||
const ctrRows = (site.containers || []).map(c => `
|
||||
<tr>
|
||||
<td class="ct-name">${esc(c.name)}</td>
|
||||
<td>${esc(c.role)}</td>
|
||||
<td>${c.status === 'running' ? '<span class="badge badge-run">Up</span>' : '<span class="badge badge-stop">Down</span>'}</td>
|
||||
<td class="ct-image">${esc(c.image_live || c.image)}</td>
|
||||
<td class="ct-ports">${esc(c.ports || '—')}</td>
|
||||
</tr>`).join('');
|
||||
|
||||
body.innerHTML = `
|
||||
<div class="site-detail-grid">
|
||||
<div class="site-detail-item"><div class="lbl">COMPOSE PROJECT</div><div class="val">~/${esc(site.compose_dir)}</div></div>
|
||||
<div class="site-detail-item"><div class="lbl">MAIN CONTAINER</div><div class="val">${esc(site.main_container)}</div></div>
|
||||
<div class="site-detail-item"><div class="lbl">HOST PORT</div><div class="val">${esc(site.port)}</div></div>
|
||||
<div class="site-detail-item"><div class="lbl">PORT MAPPING</div><div class="val">${esc(site.port_mapping || site.port + '→' + site.internal_port)}</div></div>
|
||||
<div class="site-detail-item"><div class="lbl">ACCESS URL</div><div class="val"><a class="site-url-link" href="${esc(site.access_url)}" target="_blank">${esc(site.access_url)}</a></div></div>
|
||||
<div class="site-detail-item"><div class="lbl">DOMAIN</div><div class="val">${site.has_domain ? esc(site.domain) : '— (IP only)'}</div></div>
|
||||
<div class="site-detail-item"><div class="lbl">IP FALLBACK</div><div class="val">${esc(site.ip_url)}</div></div>
|
||||
<div class="site-detail-item"><div class="lbl">HEALTH ENDPOINT</div><div class="val">${esc(site.health_url)}</div></div>
|
||||
</div>
|
||||
<div style="font-size:12px;font-weight:600;margin-bottom:6px;"><i class="fas fa-cubes" style="color:var(--accent2);margin-right:6px;"></i>Stack containers (${site.containers_running}/${site.containers_total} running)</div>
|
||||
<div style="overflow-x:auto;">
|
||||
<table class="site-ctr-table">
|
||||
<thead><tr><th>NAME</th><th>ROLE</th><th>STATUS</th><th>IMAGE</th><th>PORTS</th></tr></thead>
|
||||
<tbody>${ctrRows}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
${site.volumes && site.volumes.length ? `
|
||||
<div style="margin-top:14px;font-size:12px;font-weight:600;"><i class="fas fa-hard-drive" style="color:var(--cyan);margin-right:6px;"></i>Volumes</div>
|
||||
<div style="font-family:var(--mono);font-size:11px;color:var(--text2);margin-top:6px;">${site.volumes.map(v => esc(v)).join('<br>')}</div>` : ''}
|
||||
${site.networks && site.networks.length ? `
|
||||
<div style="margin-top:14px;font-size:12px;font-weight:600;"><i class="fas fa-network-wired" style="color:var(--purple);margin-right:6px;"></i>Networks</div>
|
||||
<div style="font-family:var(--mono);font-size:11px;color:var(--text2);margin-top:6px;">${site.networks.map(n => esc(n)).join(', ')}</div>` : ''}
|
||||
<div style="margin-top:18px;display:flex;gap:8px;">
|
||||
<a class="btn btn-primary btn-sm" href="${esc(site.access_url)}" target="_blank"><i class="fas fa-arrow-up-right-from-square"></i> Open site</a>
|
||||
<button class="btn btn-ghost btn-sm" onclick="closeSiteModal()">Close</button>
|
||||
</div>`;
|
||||
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeSiteModal(e) {
|
||||
if (!e || e.target === document.getElementById('site-detail-modal')) {
|
||||
document.getElementById('site-detail-modal').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
window.loadSites = loadSites;
|
||||
window.pingSite = pingSite;
|
||||
window.openSiteDetails = openSiteDetails;
|
||||
window.closeSiteModal = closeSiteModal;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadSites(true);
|
||||
setInterval(() => loadSites(false), 30000);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user