ADD: remove architecture , fix sites
This commit is contained in:
@@ -31,9 +31,6 @@
|
||||
<i class="fas fa-globe"></i><span>Application Sites</span>
|
||||
<span class="nav-badge" id="nav-badge-sites">5</span>
|
||||
</a>
|
||||
<a class="nav-item {% if active_page == 'architecture' %}active{% endif %}" href="{{ url_for('architecture_page') }}">
|
||||
<i class="fas fa-sitemap"></i><span>Architecture</span>
|
||||
</a>
|
||||
<a class="nav-item {% if active_page == 'containers' %}active{% endif %}" href="{{ url_for('containers_page') }}">
|
||||
<i class="fas fa-cubes"></i><span>All Containers</span>
|
||||
<span class="nav-badge" id="nav-badge-containers">—</span>
|
||||
|
||||
@@ -1,276 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
|
||||
<style>
|
||||
.arch-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.arch-diagram-wrap {
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
min-height: 320px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.arch-diagram-wrap .mermaid { display: flex; justify-content: center; }
|
||||
.arch-stacks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.arch-stack-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
border-left: 3px solid var(--accent);
|
||||
}
|
||||
.arch-stack-card h4 {
|
||||
font-size: 14px; font-weight: 700; margin: 0 0 4px;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 8px;
|
||||
}
|
||||
.arch-stack-meta { font-size: 11px; color: var(--text3); margin-bottom: 10px; font-family: var(--mono); }
|
||||
.arch-node-list { display: flex; flex-direction: column; gap: 6px; }
|
||||
.arch-node {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 11px; font-family: var(--mono);
|
||||
padding: 6px 8px; background: var(--surface2);
|
||||
border-radius: 6px; border: 1px solid var(--border);
|
||||
}
|
||||
.arch-node .role-badge {
|
||||
font-size: 8px; letter-spacing: 0.06em; padding: 2px 5px;
|
||||
border-radius: 4px; background: var(--border); color: var(--text3);
|
||||
}
|
||||
.arch-node.running .status-dot { background: var(--green); }
|
||||
.arch-node.stopped .status-dot, .arch-node.missing .status-dot { background: var(--red); }
|
||||
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||||
.arch-legend {
|
||||
display: flex; gap: 16px; flex-wrap: wrap;
|
||||
font-size: 11px; color: var(--text2); margin-bottom: 14px;
|
||||
}
|
||||
.arch-legend span { display: inline-flex; align-items: center; gap: 6px; }
|
||||
.infra-box {
|
||||
background: var(--surface2); border: 1px dashed var(--border2);
|
||||
border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px;
|
||||
}
|
||||
.infra-box h4 { font-size: 13px; margin: 0 0 10px; }
|
||||
.infra-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.infra-chip {
|
||||
font-family: var(--mono); font-size: 11px;
|
||||
padding: 4px 10px; border-radius: 20px;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
}
|
||||
@media (max-width: 900px) { .arch-summary { grid-template-columns: repeat(2, 1fr); } }
|
||||
</style>
|
||||
|
||||
<div class="arch-summary" id="arch-summary">
|
||||
<div class="stat-card"><div class="stat-number" id="arch-sites">—</div><div class="stat-label">App Stacks</div></div>
|
||||
<div class="stat-card"><div class="stat-number" id="arch-ctrs" style="color:var(--accent2);">—</div><div class="stat-label">Containers</div></div>
|
||||
<div class="stat-card"><div class="stat-number" id="arch-running" style="color:var(--green);">—</div><div class="stat-label">Running</div></div>
|
||||
<div class="stat-card"><div class="stat-number" id="arch-server" style="font-size:14px;color:var(--cyan);">—</div><div class="stat-label">Main Server</div></div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom:16px;">
|
||||
<div class="card-header">
|
||||
<div class="card-title"><i class="fas fa-sitemap"></i> Infrastructure Topology</div>
|
||||
<span class="card-meta" id="arch-refresh-meta">Loading…</span>
|
||||
</div>
|
||||
<div class="arch-legend">
|
||||
<span><span class="status-dot" style="background:var(--green);"></span> Running</span>
|
||||
<span><span class="status-dot" style="background:var(--red);"></span> Stopped / missing</span>
|
||||
<span><i class="fas fa-arrow-right" style="font-size:10px;color:var(--text3);"></i> Dependency</span>
|
||||
</div>
|
||||
<div class="arch-diagram-wrap" id="mermaid-wrap">
|
||||
<pre class="mermaid" id="mermaid-diagram">flowchart TB
|
||||
loading["Loading architecture…"]
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infra-box" id="infra-box" style="display:none;">
|
||||
<h4><i class="fas fa-server" style="color:var(--accent2);margin-right:6px;"></i>Shared Infrastructure</h4>
|
||||
<div class="infra-list" id="infra-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title"><i class="fas fa-layer-group"></i> Stack Breakdown</div>
|
||||
<a href="/sites" class="btn btn-ghost btn-sm"><i class="fas fa-globe"></i> Open Sites</a>
|
||||
</div>
|
||||
<div class="arch-stacks" id="arch-stacks">
|
||||
<div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function esc(s) {
|
||||
if (s == null) return '';
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
function nodeStatusClass(st) {
|
||||
return st === 'running' ? 'running' : 'stopped';
|
||||
}
|
||||
|
||||
function buildMermaid(data) {
|
||||
const ip = data.server_ip || 'server';
|
||||
const plat = data.platform || {};
|
||||
const platSt = plat.status === 'running' ? 'running' : 'stopped';
|
||||
const platLabel = plat.domain
|
||||
? `CloudOps Platform<br/>${plat.domain}`
|
||||
: `CloudOps Platform<br/>:${plat.port || 8088}`;
|
||||
|
||||
let lines = ['flowchart TB'];
|
||||
lines.push(` subgraph HOST["🖥 Main Server ${ip}"]`);
|
||||
lines.push(` direction TB`);
|
||||
lines.push(` PLATFORM["${platLabel}"]:::${platSt}`);
|
||||
lines.push(` INTERNET(("🌐 Users / Internet"))`);
|
||||
lines.push(` INTERNET --> PLATFORM`);
|
||||
lines.push(` INTERNET --> APPS`);
|
||||
|
||||
lines.push(` subgraph APPS["Application Stacks"]`);
|
||||
lines.push(` direction LR`);
|
||||
|
||||
(data.stacks || []).forEach((stack, i) => {
|
||||
const sid = 'stack_' + stack.id;
|
||||
const stackRunning = stack.running === stack.total && stack.total > 0;
|
||||
const stackCls = stackRunning ? 'running' : (stack.running > 0 ? 'partial' : 'stopped');
|
||||
lines.push(` subgraph ${sid}["${stack.name} :${stack.port}"]`);
|
||||
lines.push(` direction TB`);
|
||||
|
||||
(stack.nodes || []).forEach(node => {
|
||||
const nid = node.id.replace(/[^a-zA-Z0-9_]/g, '_');
|
||||
const cls = node.status === 'running' ? 'running' : 'stopped';
|
||||
const shortLabel = node.label.length > 22 ? node.label.substring(0, 20) + '…' : node.label;
|
||||
lines.push(` ${nid}["${shortLabel}<br/><small>${node.role}</small>"]:::${cls}`);
|
||||
});
|
||||
|
||||
(stack.edges || []).forEach(edge => {
|
||||
const from = edge.from.replace(/[^a-zA-Z0-9_]/g, '_');
|
||||
const to = edge.to.replace(/[^a-zA-Z0-9_]/g, '_');
|
||||
lines.push(` ${from} --> ${to}`);
|
||||
});
|
||||
|
||||
lines.push(` end`);
|
||||
lines.push(` ${sid}:::${stackCls}`);
|
||||
lines.push(` INTERNET --> ${sid}`);
|
||||
});
|
||||
|
||||
lines.push(` end`);
|
||||
lines.push(` end`);
|
||||
|
||||
const nets = (data.shared && data.shared.networks) || [];
|
||||
if (nets.length) {
|
||||
lines.push(` subgraph NETS["Docker Networks"]`);
|
||||
nets.forEach((n, i) => {
|
||||
const nid = 'net_' + i;
|
||||
lines.push(` ${nid}["${n}"]:::network`);
|
||||
});
|
||||
lines.push(` end`);
|
||||
}
|
||||
|
||||
lines.push('');
|
||||
lines.push(' classDef running fill:#0d2818,stroke:#22c55e,color:#e8ecf4');
|
||||
lines.push(' classDef stopped fill:#2a1215,stroke:#ef4444,color:#e8ecf4');
|
||||
lines.push(' classDef partial fill:#2a2010,stroke:#f59e0b,color:#e8ecf4');
|
||||
lines.push(' classDef network fill:#111827,stroke:#a78bfa,color:#e8ecf4');
|
||||
|
||||
return lines.join('\n');
|
||||
}
|
||||
|
||||
function renderStackCards(stacks) {
|
||||
const el = document.getElementById('arch-stacks');
|
||||
if (!stacks.length) {
|
||||
el.innerHTML = '<div class="empty-state">No stacks</div>';
|
||||
return;
|
||||
}
|
||||
el.innerHTML = stacks.map(stack => {
|
||||
const nodes = (stack.nodes || []).map(n => `
|
||||
<div class="arch-node ${nodeStatusClass(n.status)}">
|
||||
<span class="status-dot"></span>
|
||||
<span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;">${esc(n.label)}</span>
|
||||
<span class="role-badge">${esc(n.role)}</span>
|
||||
</div>`).join('');
|
||||
const domain = stack.domain ? esc(stack.domain) : `IP :${stack.port}`;
|
||||
return `<div class="arch-stack-card" style="border-left-color:${esc(stack.brand_color)}">
|
||||
<h4>
|
||||
${esc(stack.name)}
|
||||
<span class="badge ${stack.running === stack.total && stack.total ? 'badge-run' : 'badge-stop'}">${stack.running}/${stack.total}</span>
|
||||
</h4>
|
||||
<div class="arch-stack-meta">${domain} · ~/docker-compose/${esc(stack.compose_dir)}</div>
|
||||
<div class="arch-node-list">${nodes}</div>
|
||||
<div style="margin-top:10px;">
|
||||
<a href="/sites" class="btn btn-ghost btn-sm" onclick="event.preventDefault();window.location='/sites'">
|
||||
<i class="fas fa-arrow-up-right-from-square"></i> ${esc(stack.access_url || '')}
|
||||
</a>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function renderInfra(shared, platform) {
|
||||
const box = document.getElementById('infra-box');
|
||||
const list = document.getElementById('infra-list');
|
||||
const chips = [];
|
||||
if (platform.domain) {
|
||||
chips.push(`Platform: ${platform.access_url || platform.domain}`);
|
||||
}
|
||||
chips.push(`Container: ${platform.container || 'management-platform'} :${platform.port || 8088}`);
|
||||
(shared.networks || []).forEach(n => chips.push(`Network: ${n}`));
|
||||
if (shared.backup_path) chips.push(`Backups: ${shared.backup_path}`);
|
||||
if (shared.vm_backup_path) chips.push(`VM sync: ${shared.vm_backup_path}`);
|
||||
list.innerHTML = chips.map(c => `<span class="infra-chip">${esc(c)}</span>`).join('');
|
||||
box.style.display = '';
|
||||
}
|
||||
|
||||
async function loadArchitecture() {
|
||||
const meta = document.getElementById('arch-refresh-meta');
|
||||
try {
|
||||
meta.textContent = 'Loading…';
|
||||
const res = await fetch('/api/architecture');
|
||||
const data = await res.json();
|
||||
|
||||
const sum = data.summary || {};
|
||||
document.getElementById('arch-sites').textContent = sum.sites || 0;
|
||||
document.getElementById('arch-ctrs').textContent = sum.containers || 0;
|
||||
document.getElementById('arch-running').textContent = sum.running || 0;
|
||||
document.getElementById('arch-server').textContent = data.server_ip || '—';
|
||||
|
||||
renderStackCards(data.stacks || []);
|
||||
renderInfra(data.shared || {}, data.platform || {});
|
||||
|
||||
const diagram = buildMermaid(data);
|
||||
const wrap = document.getElementById('mermaid-wrap');
|
||||
wrap.innerHTML = `<pre class="mermaid" id="mermaid-diagram">${diagram}</pre>`;
|
||||
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: document.documentElement.getAttribute('data-theme') === 'light' ? 'default' : 'dark',
|
||||
flowchart: { curve: 'basis', padding: 16 },
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
await mermaid.run({ nodes: [document.getElementById('mermaid-diagram')] });
|
||||
|
||||
meta.textContent = 'Updated ' + new Date().toLocaleTimeString();
|
||||
} catch (e) {
|
||||
meta.textContent = 'Error';
|
||||
document.getElementById('arch-stacks').innerHTML =
|
||||
`<div class="empty-state" style="color:var(--red);">Failed: ${esc(e)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
window.loadArchitecture = loadArchitecture;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadArchitecture();
|
||||
setInterval(loadArchitecture, 45000);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -5,6 +5,7 @@
|
||||
<div style="max-width:460px; display:flex; flex-direction:column; gap:14px;">
|
||||
<div class="form-group"><label class="form-label">MAIN SERVER IP</label><input class="form-input" value="{{ main_server }}" readonly></div>
|
||||
<div class="form-group"><label class="form-label">PLATFORM DOMAIN</label><input class="form-input" value="{{ platform_domain }}" readonly></div>
|
||||
<div class="form-group"><label class="form-label">SSL</label><input class="form-input" value="{{ 'Configured' if platform_ssl else 'Not configured' }}" readonly></div>
|
||||
<div class="form-group"><label class="form-label">PLATFORM URL</label>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<input class="form-input" value="{{ platform_url }}" readonly style="flex:1;">
|
||||
|
||||
@@ -75,6 +75,9 @@
|
||||
.site-url-link:hover { text-decoration: underline; }
|
||||
.domain-set { color: var(--green); }
|
||||
.domain-unset { color: var(--text3); font-style: italic; }
|
||||
.ssl-set { color: var(--green); }
|
||||
.ssl-unset { color: var(--yellow); }
|
||||
.health-slot { min-width: 88px; min-height: 26px; display: flex; align-items: center; justify-content: flex-end; }
|
||||
.health-pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 4px 10px; border-radius: 20px;
|
||||
@@ -125,6 +128,14 @@
|
||||
<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 style="font-size:11px;margin-top:4px;">
|
||||
<span class="site-row-label" style="min-width:auto;margin-right:6px;">SSL</span>
|
||||
{% if platform_ssl %}
|
||||
<span class="ssl-set"><i class="fas fa-lock"></i> Configured</span>
|
||||
{% else %}
|
||||
<span class="ssl-unset"><i class="fas fa-lock-open"></i> Not configured</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-ghost btn-sm" href="{{ platform_url }}" target="_blank" rel="noopener">
|
||||
@@ -179,17 +190,22 @@ function esc(s) {
|
||||
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>';
|
||||
}
|
||||
function healthPill(health) {
|
||||
if (!health) return '';
|
||||
const st = health.status || 'down';
|
||||
const labels = { up: 'Active', down: 'Unreachable', offline: 'Offline', checking: 'Checking…' };
|
||||
if (st === 'checking') {
|
||||
return '<span class="health-pill checking"><span class="dot"></span>Checking…</span>';
|
||||
}
|
||||
const labels = { up: 'Healthy', down: 'Unhealthy', offline: 'Offline' };
|
||||
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>`;
|
||||
return `<span class="health-pill ${st === 'up' ? 'up' : (st === 'offline' ? 'offline' : 'down')}"><span class="dot"></span>${labels[st] || st}${extra}${code}</span>`;
|
||||
}
|
||||
|
||||
function sslHtml(configured) {
|
||||
return configured
|
||||
? '<span class="ssl-set"><i class="fas fa-lock"></i> Configured</span>'
|
||||
: '<span class="ssl-unset"><i class="fas fa-lock-open"></i> Not configured</span>';
|
||||
}
|
||||
|
||||
function renderSiteCard(site) {
|
||||
@@ -209,13 +225,17 @@ function renderSiteCard(site) {
|
||||
<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 class="health-slot" id="health-${esc(site.id)}">${healthPill(site.health)}</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">SSL</span>
|
||||
<span class="site-row-value">${sslHtml(site.ssl_configured)}</span>
|
||||
</div>
|
||||
<div class="site-row">
|
||||
<span class="site-row-label">URL</span>
|
||||
<span class="site-row-value">
|
||||
@@ -254,10 +274,11 @@ function renderSiteCard(site) {
|
||||
}
|
||||
|
||||
function updateSummary(sites) {
|
||||
const up = sites.filter(s => s.health && s.health.status === 'up').length;
|
||||
const checked = sites.filter(s => s.health && s.health.status !== 'checking');
|
||||
const up = checked.filter(s => 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-up').textContent = checked.length ? up : '—';
|
||||
document.getElementById('ss-running').textContent = running;
|
||||
document.getElementById('ss-domains').textContent = domains;
|
||||
}
|
||||
@@ -283,16 +304,17 @@ async function loadSites(withHealth = false) {
|
||||
|
||||
async function pingSite(siteId) {
|
||||
const el = document.getElementById('health-' + siteId);
|
||||
if (el) el.innerHTML = healthPill({ status: 'checking' }, true);
|
||||
if (el) el.innerHTML = healthPill({ status: 'checking' });
|
||||
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);
|
||||
if (el) el.innerHTML = healthPill(health);
|
||||
updateSummary(sitesData);
|
||||
} catch (e) {
|
||||
if (el) el.innerHTML = healthPill({ status: 'down', error: String(e) }, true);
|
||||
if (el) el.innerHTML = healthPill({ status: 'down', error: String(e) });
|
||||
updateSummary(sitesData);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -321,6 +343,7 @@ function openSiteDetails(siteId) {
|
||||
<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">SSL</div><div class="val">${site.ssl_configured ? 'Configured' : 'Not configured'}</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>
|
||||
@@ -358,7 +381,7 @@ window.closeSiteModal = closeSiteModal;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadSites(true);
|
||||
setInterval(() => loadSites(false), 30000);
|
||||
setInterval(() => loadSites(true), 60000);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user