Public/fgAI
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ui

Browse Source
This commit is contained in:
larssand
2026-06-21 15:19:24 +02:00
parent d41d318134
commit 5bb381a063
6 changed files with 81 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/fgai/dashboard.py
View File

@@ -14,14 +14,14 @@ HTML = """<!doctype html>
<style>
:root { color-scheme: light; font-family: Arial, sans-serif; background: #f5f7f9; color: #16202a; }
body { margin: 0; }
header { background: #102032; color: white; padding: 18px 24px; }
header { background: #102032; color: white; padding: 14px 24px; }
h1 { margin: 0; font-size: 22px; }
main { padding: 18px; max-width: 1320px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr); gap: 14px; align-items: stretch; }
.hero img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; border-radius: 6px; border: 1px solid #1f3b57; background: #061322; }
main { padding: 14px; max-width: 1440px; margin: 0 auto; }
.hero { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: stretch; }
.hero img { width: 100%; height: 144px; object-fit: cover; border-radius: 6px; border: 1px solid #1f3b57; background: #061322; }
.hero .panel { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.panel { background: white; border: 1px solid #d9e0e7; border-radius: 6px; padding: 14px; margin-bottom: 14px; }
.panel { background: white; border: 1px solid #d9e0e7; border-radius: 6px; padding: 14px; margin-bottom: 12px; }
.metric { font-size: 28px; font-weight: 700; }
.label { color: #536170; font-size: 13px; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
@@ -33,11 +33,21 @@ HTML = """<!doctype html>
.sev-low { color: #345995; font-weight: 700; }
.muted { color: #697789; }
code { background: #eef2f6; padding: 2px 4px; border-radius: 4px; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero img { max-height: 240px; } }
.capabilities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.capability { border: 1px solid #cbd5df; background: #f8fafc; padding: 5px 8px; font-size: 12px; }
.capability.on { border-color: #4d8b62; color: #176638; background: #effaf2; }
.capability.warn { border-color: #bd8d2f; color: #865b00; background: #fff9e9; }
.tabs { display: flex; border-bottom: 1px solid #d9e0e7; margin: 14px 0 12px; gap: 4px; }
.tab { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 10px 14px; color: #536170; cursor: pointer; }
.tab.active { border-bottom-color: #176b87; color: #102032; font-weight: 700; }
[data-view] { display: none; } [data-view].active { display: block; }
.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr); gap: 12px; }
.table-wrap { overflow-x: auto; }
@media (max-width: 860px) { .hero, .split { grid-template-columns: 1fr; } .hero img { display: none; } }
</style>
</head>
<body>
<header><h1>fgAI Monitor</h1><div id="stamp" class="muted"></div></header>
<header><h1>fgAI Monitor</h1><div id="stamp" class="muted"></div><div id="capabilities" class="capabilities"></div></header>
<main>
<section class="hero">
<img src="/images/FGinspectionagent.png" alt="FortiGate AI/ML Analyzer">
@@ -46,13 +56,10 @@ HTML = """<!doctype html>
<section class="panel"><h2>Live Status</h2><div id="liveStatus" class="muted">Waiting for monitor data.</div></section>
</div>
</section>
<section class="panel"><h2>AI Assessment</h2><div id="llmAssessment" class="muted">LLM assessment disabled.</div></section>
<section class="panel"><h2>Anomalies</h2><div id="anomalies"></div></section>
<section class="panel"><h2>Recommendations</h2><div id="recommendations"></div></section>
<section class="panel"><h2>Block Candidates</h2><div id="blocks"></div></section>
<section class="panel"><h2>Threat Intelligence</h2><div id="reputation"></div></section>
<section class="panel"><h2>Policy Findings</h2><div id="policies"></div></section>
<section class="panel"><h2>Diagnostics</h2><div id="diagnostics"></div></section>
<nav class="tabs" aria-label="Dashboard views"><button class="tab active" data-tab="overview">Overview</button><button class="tab" data-tab="findings">Findings</button><button class="tab" data-tab="diagnostics">Diagnostics</button></nav>
<div data-view="overview" class="active"><section class="panel"><h2>AI Assessment</h2><div id="llmAssessment" class="muted">LLM assessment disabled.</div></section><section class="split"><div class="panel"><h2>Anomalies</h2><div id="anomalies"></div></div><div class="panel"><h2>Recommendations</h2><div id="recommendations"></div></div></section></div>
<div data-view="findings"><section class="split"><div class="panel"><h2>Block Candidates</h2><div id="blocks"></div></div><div class="panel"><h2>Threat Intelligence</h2><div id="reputation"></div></div></section><section class="panel"><h2>Policy Findings</h2><div id="policies"></div></section></div>
<div data-view="diagnostics"><section class="panel"><h2>Diagnostics</h2><div id="diagnostics"></div></section></div>
</main>
<script>
function esc(value) {
@@ -65,13 +72,16 @@ function table(rows, columns) {
if (!rows || rows.length === 0) return '<p class="muted">No data.</p>';
const head = columns.map(c => `<th>${esc(c.label)}</th>`).join('');
const body = rows.map(row => `<tr>${columns.map(c => `<td>${c.render ? c.render(row) : esc(row[c.key])}</td>`).join('')}</tr>`).join('');
return `<table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
return `<div class="table-wrap"><table><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></div>`;
}
function capability(label, state, detail) { return `<span class="capability ${state}">${esc(label)}: ${esc(detail)}</span>`; }
async function refresh() {
const res = await fetch('/api/status', {cache: 'no-store'});
const data = await res.json();
const s = data.summary || {};
const a = data.anomaly_summary || {};
const baseline = data.baseline || {};
const threat = (data.capabilities || {}).threat_intel || {};
document.getElementById('stamp').textContent = data.generated_at ? `Updated ${new Date(data.generated_at * 1000).toLocaleString()}` : 'Waiting for monitor data';
document.getElementById('metrics').innerHTML = [
metric('Total events', s.total || 0),
@@ -79,6 +89,12 @@ async function refresh() {
metric('Threat actions', s.threat_actions || 0),
metric('Anomalies high+', (a.high || 0) + (a.critical || 0))
].join('');
const llm = data.llm_assessment || {};
document.getElementById('capabilities').innerHTML = [
capability('Baseline', baseline.enabled ? 'on' : 'warn', baseline.enabled ? `${baseline.sources_ready || 0} sources ready` : 'disabled'),
capability('Ollama', llm.enabled && llm.status !== 'error' ? 'on' : 'warn', llm.enabled ? (llm.status || 'starting') : 'disabled'),
capability('Threat Intel', threat.enabled && threat.configured ? 'on' : 'warn', threat.enabled ? `${threat.provider || 'unknown'}${threat.configured ? '' : ', key missing'}` : 'disabled')
].join('');
document.getElementById('liveStatus').innerHTML = [
`Log file: <code>${esc(data.log_path || '')}</code>`,
`Policy file: <code>${esc(data.policy_path || 'none')}</code>`,
@@ -86,7 +102,6 @@ async function refresh() {
`High anomalies: ${esc((a.high || 0))}`,
`Baseline sources ready: ${esc((data.baseline || {}).sources_ready || 0)}`
].join('<br>');
const llm = data.llm_assessment || {};
const llmText = llm.text ? esc(llm.text).replace(/\\n/g, '<br>') : esc(llm.error || 'LLM assessment disabled or waiting for first run.');
document.getElementById('llmAssessment').innerHTML = `<div>Status: <code>${esc(llm.status || 'unknown')}</code></div><p>${llmText}</p>`;
document.getElementById('anomalies').innerHTML = table(data.anomalies || [], [
@@ -133,11 +148,17 @@ async function refresh() {
const d = data.diagnostics || {};
document.getElementById('diagnostics').innerHTML =
'<h3>Top Sources</h3>' + table(d.top_source_ips || [], [{label:'Value', key:'value'}, {label:'Count', key:'count'}]) +
'<h3>Top Destinations</h3>' + table(d.top_destination_ips || [], [{label:'Value', key:'value'}, {label:'Count', key:'count'}]) +
'<h3>Top Policy IDs</h3>' + table(d.top_policy_ids || [], [{label:'Value', key:'value'}, {label:'Count', key:'count'}]) +
'<h3>Top Destination Ports</h3>' + table(d.top_destination_ports || [], [{label:'Value', key:'value'}, {label:'Count', key:'count'}]) +
'<h3>Top Source Ports</h3>' + table(d.top_source_ports || [], [{label:'Value', key:'value'}, {label:'Count', key:'count'}]) +
'<h3>Top Services</h3>' + table(d.top_services || [], [{label:'Value', key:'value'}, {label:'Count', key:'count'}]) +
'<h3>Local-in Failures</h3>' + table(d.local_in_failures || [], [{label:'Source', key:'src_ip'}, {label:'Service', key:'service'}, {label:'Policy', key:'policy'}, {label:'Count', key:'count'}]);
}
document.querySelectorAll('.tab').forEach(button => button.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(item => item.classList.toggle('active', item === button));
document.querySelectorAll('[data-view]').forEach(view => view.classList.toggle('active', view.dataset.view === button.dataset.tab));
}));
refresh();
setInterval(refresh, 5000);
</script>