2026-03-01 23:03:18 -05:00
|
|
|
<!DOCTYPE html>
|
2026-04-18 21:01:20 -04:00
|
|
|
<html lang="en" data-theme="dark">
|
2026-03-01 23:03:18 -05:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2026-04-18 21:42:04 -04:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
2026-04-18 21:01:20 -04:00
|
|
|
<meta name="theme-color" content="#030508">
|
2026-04-18 21:42:04 -04:00
|
|
|
<meta name="robots" content="noindex, nofollow">
|
|
|
|
|
<title>{% block title %}GANDALF{% endblock %} — GANDALF</title>
|
|
|
|
|
|
2026-04-18 21:01:20 -04:00
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
2026-04-18 21:42:04 -04:00
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=VT323&display=swap" rel="stylesheet">
|
|
|
|
|
|
2026-03-14 21:40:20 -04:00
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
|
2026-03-01 23:03:18 -05:00
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
2026-04-18 21:42:04 -04:00
|
|
|
|
|
|
|
|
<!-- base.js loaded in head so lt.* is available for inline scripts -->
|
|
|
|
|
<script src="{{ url_for('static', filename='base.js') }}"></script>
|
2026-03-01 23:03:18 -05:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-04-18 21:01:20 -04:00
|
|
|
|
2026-04-18 21:42:04 -04:00
|
|
|
<a class="lt-skip-link" href="#main-content">Skip to main content</a>
|
|
|
|
|
|
|
|
|
|
<!-- BOOT OVERLAY -->
|
|
|
|
|
<div id="lt-boot" class="lt-boot-overlay" data-app-name="GANDALF" style="display:none" aria-hidden="true">
|
2026-03-14 21:40:20 -04:00
|
|
|
<pre id="lt-boot-text" class="lt-boot-text"></pre>
|
|
|
|
|
</div>
|
2026-04-18 21:01:20 -04:00
|
|
|
|
2026-04-18 21:42:04 -04:00
|
|
|
<!-- MOBILE NAV DRAWER -->
|
|
|
|
|
<div id="lt-nav-drawer" class="lt-nav-drawer" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Navigation menu">
|
|
|
|
|
<div class="lt-nav-drawer-header">
|
|
|
|
|
<span class="lt-brand-title">GANDALF</span>
|
|
|
|
|
<button type="button" class="lt-nav-drawer-close" id="lt-nav-drawer-close" aria-label="Close navigation">✕</button>
|
|
|
|
|
</div>
|
|
|
|
|
<nav class="lt-nav-drawer-links" aria-label="Mobile navigation">
|
|
|
|
|
<a href="{{ url_for('index') }}"
|
|
|
|
|
class="lt-nav-drawer-link{% if request.endpoint == 'index' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'index' %}aria-current="page"{% endif %}>Dashboard</a>
|
|
|
|
|
<a href="{{ url_for('links_page') }}"
|
|
|
|
|
class="lt-nav-drawer-link{% if request.endpoint == 'links_page' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'links_page' %}aria-current="page"{% endif %}>Link Debug</a>
|
|
|
|
|
<a href="{{ url_for('inspector') }}"
|
|
|
|
|
class="lt-nav-drawer-link{% if request.endpoint == 'inspector' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'inspector' %}aria-current="page"{% endif %}>Inspector</a>
|
2026-04-18 23:54:01 -04:00
|
|
|
{% if user.groups and 'admin' in user.groups %}
|
2026-04-18 21:42:04 -04:00
|
|
|
<a href="{{ url_for('suppressions_page') }}"
|
|
|
|
|
class="lt-nav-drawer-link{% if request.endpoint == 'suppressions_page' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'suppressions_page' %}aria-current="page"{% endif %}>Suppressions</a>
|
2026-04-18 23:54:01 -04:00
|
|
|
{% endif %}
|
2026-04-18 21:42:04 -04:00
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="lt-nav-overlay" class="lt-nav-drawer-overlay"></div>
|
|
|
|
|
|
|
|
|
|
<!-- PRIMARY HEADER -->
|
|
|
|
|
<header class="lt-header" role="banner">
|
2026-04-18 21:01:20 -04:00
|
|
|
<div class="lt-header-left">
|
2026-04-18 21:42:04 -04:00
|
|
|
|
|
|
|
|
<!-- Hamburger (mobile) -->
|
|
|
|
|
<button type="button"
|
|
|
|
|
class="lt-menu-btn"
|
|
|
|
|
id="lt-menu-btn"
|
|
|
|
|
data-action="open-nav-drawer"
|
|
|
|
|
aria-label="Open navigation menu"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
aria-controls="lt-nav-drawer">
|
|
|
|
|
<span class="lt-menu-btn-bar"></span>
|
|
|
|
|
<span class="lt-menu-btn-bar"></span>
|
|
|
|
|
<span class="lt-menu-btn-bar"></span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<!-- Brand -->
|
2026-04-18 21:01:20 -04:00
|
|
|
<div class="lt-brand">
|
2026-04-18 21:42:04 -04:00
|
|
|
<a href="{{ url_for('index') }}"
|
|
|
|
|
class="lt-brand-title lt-glitch"
|
|
|
|
|
data-text="GANDALF"
|
|
|
|
|
style="text-decoration:none"
|
|
|
|
|
aria-label="GANDALF home">GANDALF</a>
|
2026-04-18 21:01:20 -04:00
|
|
|
<span class="lt-brand-subtitle">Network Monitor // LotusGuild</span>
|
2026-03-02 12:43:11 -05:00
|
|
|
</div>
|
2026-04-18 21:42:04 -04:00
|
|
|
|
|
|
|
|
<!-- Desktop nav -->
|
2026-04-18 21:01:20 -04:00
|
|
|
<nav class="lt-nav" aria-label="Main navigation">
|
2026-03-02 12:43:11 -05:00
|
|
|
<a href="{{ url_for('index') }}"
|
2026-04-18 21:42:04 -04:00
|
|
|
class="lt-nav-link{% if request.endpoint == 'index' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'index' %}aria-current="page"{% endif %}>
|
2026-03-02 12:43:11 -05:00
|
|
|
Dashboard
|
|
|
|
|
</a>
|
|
|
|
|
<a href="{{ url_for('links_page') }}"
|
2026-04-18 21:42:04 -04:00
|
|
|
class="lt-nav-link{% if request.endpoint == 'links_page' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'links_page' %}aria-current="page"{% endif %}>
|
2026-03-02 12:43:11 -05:00
|
|
|
Link Debug
|
|
|
|
|
</a>
|
2026-03-03 15:39:48 -05:00
|
|
|
<a href="{{ url_for('inspector') }}"
|
2026-04-18 21:42:04 -04:00
|
|
|
class="lt-nav-link{% if request.endpoint == 'inspector' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'inspector' %}aria-current="page"{% endif %}>
|
2026-03-03 15:39:48 -05:00
|
|
|
Inspector
|
|
|
|
|
</a>
|
2026-04-18 23:54:01 -04:00
|
|
|
{% if user.groups and 'admin' in user.groups %}
|
|
|
|
|
<div class="lt-nav-dropdown" data-action="toggle-nav-dropdown">
|
|
|
|
|
<a href="#"
|
|
|
|
|
class="lt-nav-link{% if request.endpoint == 'suppressions_page' %} active{% endif %}"
|
|
|
|
|
role="button"
|
|
|
|
|
aria-haspopup="true"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
aria-controls="lt-admin-dropdown-menu">
|
|
|
|
|
Admin ▾
|
|
|
|
|
</a>
|
|
|
|
|
<ul class="lt-nav-dropdown-menu"
|
|
|
|
|
id="lt-admin-dropdown-menu"
|
|
|
|
|
role="menu"
|
|
|
|
|
aria-label="Admin menu">
|
|
|
|
|
<li role="none">
|
|
|
|
|
<a href="{{ url_for('suppressions_page') }}" role="menuitem"
|
|
|
|
|
class="{% if request.endpoint == 'suppressions_page' %}active{% endif %}">
|
|
|
|
|
Suppressions
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
{% else %}
|
2026-03-02 12:43:11 -05:00
|
|
|
<a href="{{ url_for('suppressions_page') }}"
|
2026-04-18 21:42:04 -04:00
|
|
|
class="lt-nav-link{% if request.endpoint == 'suppressions_page' %} active{% endif %}"
|
|
|
|
|
{% if request.endpoint == 'suppressions_page' %}aria-current="page"{% endif %}>
|
2026-03-02 12:43:11 -05:00
|
|
|
Suppressions
|
|
|
|
|
</a>
|
2026-04-18 23:54:01 -04:00
|
|
|
{% endif %}
|
2026-03-02 12:43:11 -05:00
|
|
|
</nav>
|
2026-03-01 23:03:18 -05:00
|
|
|
</div>
|
2026-04-18 21:42:04 -04:00
|
|
|
|
2026-04-18 21:01:20 -04:00
|
|
|
<div class="lt-header-right">
|
2026-04-18 23:46:44 -04:00
|
|
|
{% set _uname = user.name or user.username %}
|
2026-04-18 23:54:01 -04:00
|
|
|
{% set _words = _uname.split() %}
|
|
|
|
|
{% set _initials = (_words[0][0] ~ (_words[1][0] if _words|length > 1 else ''))|upper %}
|
|
|
|
|
<div class="lt-avatar lt-avatar--sm {{ _uname | avatar_color }}"
|
|
|
|
|
aria-hidden="true" title="{{ _uname }}">
|
2026-04-30 21:09:56 -04:00
|
|
|
<img src="{{ url_for('api_avatar') }}" alt="" class="lt-avatar-img">
|
2026-04-18 23:54:01 -04:00
|
|
|
<span class="lt-avatar-initials">{{ _initials }}</span>
|
|
|
|
|
</div>
|
2026-04-18 23:46:44 -04:00
|
|
|
<span class="lt-header-user">{{ _uname }}</span>
|
|
|
|
|
{% if user.groups and 'admin' in user.groups %}
|
2026-04-18 23:54:01 -04:00
|
|
|
<span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
|
2026-04-18 23:46:44 -04:00
|
|
|
{% endif %}
|
2026-04-30 21:33:02 -04:00
|
|
|
|
|
|
|
|
<!-- Notification bell — shows active monitoring alerts -->
|
|
|
|
|
<div class="lt-notif-dropdown-wrap" id="lt-notif-wrap">
|
|
|
|
|
<button type="button"
|
|
|
|
|
class="lt-btn lt-btn-ghost lt-btn-sm lt-notif-bell-btn"
|
|
|
|
|
id="lt-notif-bell"
|
|
|
|
|
aria-label="Active alerts"
|
|
|
|
|
aria-expanded="false"
|
|
|
|
|
aria-controls="lt-notif-panel"
|
|
|
|
|
title="Active alerts">🔔</button>
|
|
|
|
|
<div class="lt-notif-panel" id="lt-notif-panel" aria-hidden="true" role="dialog" aria-label="Active alerts">
|
|
|
|
|
<div class="lt-notif-panel-header">
|
|
|
|
|
<span>Active Alerts</span>
|
|
|
|
|
<button type="button" class="lt-notif-panel-clear" id="lt-notif-clear-btn">Mark all read</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-notif-panel-list" id="lt-notif-list">
|
|
|
|
|
<div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Loading…</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-notif-panel-footer">
|
|
|
|
|
<a href="{{ url_for('index') }}" class="lt-btn lt-btn-ghost lt-btn-sm" style="width:100%;text-align:center;display:block;font-size:0.72rem">View dashboard</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- ⌘K affordance -->
|
|
|
|
|
<button type="button"
|
|
|
|
|
class="lt-btn lt-btn-ghost lt-btn-sm"
|
|
|
|
|
title="Command palette (Ctrl+K)"
|
|
|
|
|
aria-label="Open command palette"
|
|
|
|
|
onclick="if(window.lt&<.cmdPalette)lt.cmdPalette.open()"
|
|
|
|
|
style="font-size:0.65rem;opacity:0.55;letter-spacing:0.03em;padding:0.2rem 0.45rem">⌕ K</button>
|
|
|
|
|
|
2026-04-18 21:42:04 -04:00
|
|
|
<button type="button" class="lt-theme-btn" id="lt-theme-btn"
|
|
|
|
|
aria-label="Toggle theme" title="Toggle light/dark mode">☀</button>
|
2026-03-01 23:03:18 -05:00
|
|
|
</div>
|
2026-03-02 12:43:11 -05:00
|
|
|
</header>
|
2026-03-01 23:03:18 -05:00
|
|
|
|
2026-04-18 21:42:04 -04:00
|
|
|
<!-- COMMAND PALETTE -->
|
|
|
|
|
<div id="lt-cmd-overlay" class="lt-cmd-overlay" role="dialog" aria-modal="true" aria-label="Command palette" aria-hidden="true">
|
|
|
|
|
<div class="lt-cmd-palette" id="lt-cmd-palette">
|
|
|
|
|
<div class="lt-cmd-input-wrap">
|
|
|
|
|
<span class="lt-cmd-prompt">></span>
|
|
|
|
|
<input id="lt-cmd-input" class="lt-cmd-input" type="text"
|
|
|
|
|
placeholder="Search commands…" autocomplete="off"
|
|
|
|
|
spellcheck="false" aria-label="Search commands">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-cmd-results" id="lt-cmd-results">
|
|
|
|
|
<div class="lt-cmd-empty">Start typing to search…</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-cmd-footer">
|
|
|
|
|
<span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
|
|
|
|
|
<span><kbd>Enter</kbd> Select</span>
|
|
|
|
|
<span><kbd>Esc</kbd> Close</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- MAIN CONTENT -->
|
|
|
|
|
<main class="lt-main lt-container" id="main-content">
|
2026-03-01 23:03:18 -05:00
|
|
|
{% block content %}{% endblock %}
|
|
|
|
|
</main>
|
|
|
|
|
|
2026-04-30 21:33:02 -04:00
|
|
|
<!-- FOOTER — context-sensitive per page -->
|
2026-04-18 21:42:04 -04:00
|
|
|
<footer class="lt-footer" role="contentinfo">
|
|
|
|
|
<nav class="lt-footer-hints" aria-label="Keyboard shortcuts">
|
2026-04-30 21:33:02 -04:00
|
|
|
{% if request.endpoint == 'index' %}
|
|
|
|
|
<span class="lt-footer-hint"><span class="lt-footer-key">[ R ]</span> REFRESH</span>
|
|
|
|
|
<span class="lt-footer-sep">|</span>
|
|
|
|
|
<span class="lt-footer-hint"><span class="lt-footer-key">[ S ]</span> SUPPRESS</span>
|
|
|
|
|
<span class="lt-footer-sep">|</span>
|
|
|
|
|
{% elif request.endpoint == 'links_page' %}
|
|
|
|
|
<span class="lt-footer-hint"><span class="lt-footer-key">[ R ]</span> REFRESH</span>
|
|
|
|
|
<span class="lt-footer-sep">|</span>
|
|
|
|
|
{% endif %}
|
|
|
|
|
<button type="button" class="lt-footer-hint" data-action="open-settings"><span class="lt-footer-key">[ * ]</span> CFG</button>
|
2026-04-18 21:42:04 -04:00
|
|
|
<span class="lt-footer-sep">|</span>
|
|
|
|
|
<button type="button" class="lt-footer-hint" data-action="show-keyboard-help"><span class="lt-footer-key">[ ? ]</span> HELP</button>
|
|
|
|
|
</nav>
|
|
|
|
|
<span>GANDALF — TDS v1.2</span>
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
<!-- KEYBOARD SHORTCUTS MODAL -->
|
|
|
|
|
<div id="lt-keys-help" class="lt-modal-overlay" aria-hidden="true">
|
|
|
|
|
<div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="keys-help-title">
|
|
|
|
|
<div class="lt-modal-header">
|
|
|
|
|
<span class="lt-modal-title" id="keys-help-title">Keyboard Shortcuts</span>
|
|
|
|
|
<button type="button" class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-modal-body">
|
|
|
|
|
<table class="lt-table" style="width:100%">
|
|
|
|
|
<thead><tr><th>Shortcut</th><th>Action</th></tr></thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr><td>Ctrl / ⌘ + K</td><td>Command palette</td></tr>
|
2026-04-30 21:33:02 -04:00
|
|
|
<tr><td>R</td><td>Refresh data (Dashboard / Link Debug)</td></tr>
|
|
|
|
|
<tr><td>S</td><td>Quick-suppress alert (Dashboard)</td></tr>
|
|
|
|
|
<tr><td>*</td><td>Open settings</td></tr>
|
2026-04-18 21:42:04 -04:00
|
|
|
<tr><td>?</td><td>Show this help</td></tr>
|
2026-04-30 21:33:02 -04:00
|
|
|
<tr><td>ESC</td><td>Close modal / panel</td></tr>
|
2026-04-18 21:42:04 -04:00
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-modal-footer">
|
|
|
|
|
<button type="button" class="lt-btn" data-modal-close>Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-04-30 21:33:02 -04:00
|
|
|
<!-- SETTINGS MODAL -->
|
|
|
|
|
<div id="lt-settings-modal" class="lt-modal-overlay" aria-hidden="true">
|
|
|
|
|
<div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title">
|
|
|
|
|
<div class="lt-modal-header">
|
|
|
|
|
<span class="lt-modal-title" id="settings-modal-title">Settings</span>
|
|
|
|
|
<button type="button" class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-modal-body">
|
|
|
|
|
<div class="lt-form-group">
|
|
|
|
|
<label class="lt-label">Auto-refresh interval</label>
|
|
|
|
|
<div class="duration-pills" id="settings-refresh-pills">
|
|
|
|
|
<button type="button" class="pill" data-refresh-interval="15">15 s</button>
|
|
|
|
|
<button type="button" class="pill" data-refresh-interval="30">30 s</button>
|
|
|
|
|
<button type="button" class="pill" data-refresh-interval="60">1 min</button>
|
|
|
|
|
<button type="button" class="pill" data-refresh-interval="300">5 min</button>
|
|
|
|
|
<button type="button" class="pill" data-refresh-interval="0">Off</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-field-hint" id="settings-refresh-hint"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-divider" style="margin:1rem 0 0.75rem"></div>
|
|
|
|
|
<div class="lt-kv-grid">
|
|
|
|
|
<div class="lt-kv-row">
|
|
|
|
|
<span class="lt-kv-label">User</span>
|
|
|
|
|
<span class="lt-kv-value lt-text-cyan">{{ user.name or user.username }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
{% if user.groups %}
|
|
|
|
|
<div class="lt-kv-row">
|
|
|
|
|
<span class="lt-kv-label">Groups</span>
|
|
|
|
|
<span class="lt-kv-value">{{ user.groups | join(', ') }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lt-modal-footer">
|
|
|
|
|
<button type="button" class="lt-btn" data-modal-close>Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-03-14 14:31:57 -04:00
|
|
|
<script>
|
|
|
|
|
const GANDALF_CONFIG = {
|
|
|
|
|
ticket_web_url: "{{ config.get('ticket_api', {}).get('web_url', 'http://t.lotusguild.org/ticket/') }}"
|
|
|
|
|
};
|
|
|
|
|
</script>
|
2026-04-18 21:42:04 -04:00
|
|
|
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
|
|
|
|
{% block scripts %}{% endblock %}
|
|
|
|
|
|
2026-04-18 21:01:20 -04:00
|
|
|
<script>
|
2026-04-18 21:42:04 -04:00
|
|
|
if (window.lt) {
|
2026-04-18 21:01:20 -04:00
|
|
|
lt.init({ bootName: 'GANDALF' });
|
2026-04-18 21:42:04 -04:00
|
|
|
|
|
|
|
|
// Theme toggle
|
|
|
|
|
var themeBtn = document.getElementById('lt-theme-btn');
|
|
|
|
|
if (themeBtn) themeBtn.addEventListener('click', function() { lt.theme.toggle(); });
|
|
|
|
|
|
|
|
|
|
// Command palette
|
|
|
|
|
lt.cmdPalette.init([
|
2026-04-30 21:33:02 -04:00
|
|
|
{ id: 'nav-dashboard', group: 'Navigate', icon: '~', label: 'Dashboard', action: function() { window.location.href = '/'; } },
|
|
|
|
|
{ id: 'nav-links', group: 'Navigate', icon: '↗', label: 'Link Debug', action: function() { window.location.href = '/links'; } },
|
|
|
|
|
{ id: 'nav-inspector', group: 'Navigate', icon: '⬡', label: 'Inspector', action: function() { window.location.href = '/inspector'; } },
|
|
|
|
|
{ id: 'nav-suppressions', group: 'Navigate', icon: '🔕', label: 'Suppressions', action: function() { window.location.href = '/suppressions'; } },
|
|
|
|
|
{ id: 'action-refresh', group: 'Actions', icon: '↻', label: 'Refresh Data', kbd: 'R', action: function() { lt.autoRefresh.now(); } },
|
|
|
|
|
{ id: 'action-suppress', group: 'Actions', icon: '🔕', label: 'New Suppression', kbd: 'S', action: function() { if (typeof openSuppressModal === 'function') openSuppressModal('host','',''); else window.location.href='/suppressions'; } },
|
|
|
|
|
{ id: 'help-shortcuts', group: 'Help', icon: '?', label: 'Keyboard Shortcuts', kbd: '?', action: function() { lt.modal.open('lt-keys-help'); } },
|
|
|
|
|
{ id: 'help-settings', group: 'Help', icon: '*', label: 'Settings', kbd: '*', action: function() { lt.modal.open('lt-settings-modal'); } },
|
|
|
|
|
{ id: 'help-theme', group: 'Help', icon: '☀', label: 'Toggle Theme', action: function() { lt.theme.toggle(); } },
|
2026-04-18 21:42:04 -04:00
|
|
|
]);
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-30 21:33:02 -04:00
|
|
|
// ── Global footer + key actions ───────────────────────────────────────
|
2026-04-18 21:42:04 -04:00
|
|
|
document.addEventListener('click', function(e) {
|
|
|
|
|
var btn = e.target.closest('[data-action]');
|
|
|
|
|
if (!btn) return;
|
2026-04-30 21:33:02 -04:00
|
|
|
var action = btn.getAttribute('data-action');
|
|
|
|
|
if (action === 'show-keyboard-help' && window.lt) lt.modal.open('lt-keys-help');
|
|
|
|
|
if (action === 'open-settings' && window.lt) lt.modal.open('lt-settings-modal');
|
2026-04-18 21:42:04 -04:00
|
|
|
});
|
|
|
|
|
|
2026-04-30 21:33:02 -04:00
|
|
|
lt.keys.on('r', function() { lt.autoRefresh.now(); });
|
|
|
|
|
lt.keys.on('?', function() { if (window.lt) lt.modal.open('lt-keys-help'); });
|
|
|
|
|
lt.keys.on('*', function() { if (window.lt) lt.modal.open('lt-settings-modal'); });
|
|
|
|
|
lt.keys.on('s', function() {
|
|
|
|
|
if (typeof openSuppressModal === 'function') openSuppressModal('host', '', '');
|
2026-04-18 21:01:20 -04:00
|
|
|
});
|
2026-04-30 21:09:56 -04:00
|
|
|
|
2026-04-30 21:33:02 -04:00
|
|
|
// ── Avatar image error fallback ───────────────────────────────────────
|
2026-04-30 21:09:56 -04:00
|
|
|
document.addEventListener('error', function(e) {
|
|
|
|
|
if (e.target.tagName === 'IMG' && e.target.closest('.lt-avatar')) {
|
|
|
|
|
e.target.classList.add('lt-avatar-img-err');
|
|
|
|
|
}
|
|
|
|
|
}, true);
|
2026-04-30 21:33:02 -04:00
|
|
|
|
|
|
|
|
// ── Settings modal ────────────────────────────────────────────────────
|
|
|
|
|
(function() {
|
|
|
|
|
var LS_KEY = 'gandalf_settings';
|
|
|
|
|
var DEFAULT = { refreshInterval: 30 };
|
|
|
|
|
|
|
|
|
|
function loadSettings() {
|
|
|
|
|
try { return Object.assign({}, DEFAULT, JSON.parse(localStorage.getItem(LS_KEY) || '{}')); }
|
|
|
|
|
catch(_) { return Object.assign({}, DEFAULT); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveSettings(s) {
|
|
|
|
|
try { localStorage.setItem(LS_KEY, JSON.stringify(s)); } catch(_) {}
|
|
|
|
|
if (typeof window.onGandalfSettingsChanged === 'function') window.onGandalfSettingsChanged(s);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function applyRefreshPillUI(interval) {
|
|
|
|
|
document.querySelectorAll('#settings-refresh-pills .pill').forEach(function(p) {
|
|
|
|
|
p.classList.toggle('active', parseInt(p.dataset.refreshInterval) === interval);
|
|
|
|
|
});
|
|
|
|
|
var hint = document.getElementById('settings-refresh-hint');
|
|
|
|
|
if (hint) {
|
|
|
|
|
if (interval === 0) hint.textContent = 'Auto-refresh disabled.';
|
|
|
|
|
else if (interval < 60) hint.textContent = 'Refreshes every ' + interval + ' seconds.';
|
|
|
|
|
else hint.textContent = 'Refreshes every ' + Math.floor(interval/60) + ' minute' + (interval > 60 ? 's' : '') + '.';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Init pill UI from saved settings
|
|
|
|
|
var _settings = loadSettings();
|
|
|
|
|
applyRefreshPillUI(_settings.refreshInterval);
|
|
|
|
|
|
|
|
|
|
// Expose for pages that need to read it (e.g. index.html for autoRefresh)
|
|
|
|
|
window.gandalfSettings = _settings;
|
|
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) {
|
|
|
|
|
var pill = e.target.closest('#settings-refresh-pills .pill[data-refresh-interval]');
|
|
|
|
|
if (!pill) return;
|
|
|
|
|
var interval = parseInt(pill.dataset.refreshInterval);
|
|
|
|
|
_settings.refreshInterval = interval;
|
|
|
|
|
saveSettings(_settings);
|
|
|
|
|
applyRefreshPillUI(interval);
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
// ── Notification Bell — shows active monitoring alerts ────────────────
|
|
|
|
|
(function() {
|
|
|
|
|
var bell = document.getElementById('lt-notif-bell');
|
|
|
|
|
var panel = document.getElementById('lt-notif-panel');
|
|
|
|
|
var list = document.getElementById('lt-notif-list');
|
|
|
|
|
var clearBtn = document.getElementById('lt-notif-clear-btn');
|
|
|
|
|
var wrapEl = document.getElementById('lt-notif-wrap');
|
|
|
|
|
if (!bell || !panel) return;
|
|
|
|
|
|
|
|
|
|
var _open = false;
|
|
|
|
|
var _lastEvents = [];
|
|
|
|
|
var LS_READ_KEY = 'gandalf_notif_read_before';
|
|
|
|
|
|
|
|
|
|
function getReadBefore() {
|
|
|
|
|
try { return parseInt(localStorage.getItem(LS_READ_KEY) || '0'); } catch(_) { return 0; }
|
|
|
|
|
}
|
|
|
|
|
function setReadBefore(ts) {
|
|
|
|
|
try { localStorage.setItem(LS_READ_KEY, String(ts)); } catch(_) {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function esc(s) {
|
|
|
|
|
return (window.lt && lt.escHtml) ? lt.escHtml(String(s)) : String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function toMs(dateStr) {
|
|
|
|
|
if (!dateStr) return 0;
|
|
|
|
|
return new Date(dateStr.replace(' UTC','Z').replace(' ','T')).getTime();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fmtAgo(dateStr) {
|
|
|
|
|
var diff = Math.floor((Date.now() - toMs(dateStr)) / 1000);
|
|
|
|
|
if (diff < 60) return diff + 's ago';
|
|
|
|
|
if (diff < 3600) return Math.floor(diff/60) + 'm ago';
|
|
|
|
|
if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
|
|
|
|
|
return Math.floor(diff/86400) + 'd ago';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var SEV_DOT = { critical: 'var(--red)', warning: 'var(--amber)' };
|
|
|
|
|
|
|
|
|
|
function renderAlerts(events) {
|
|
|
|
|
_lastEvents = events || [];
|
|
|
|
|
var readBefore = getReadBefore();
|
|
|
|
|
var active = _lastEvents.filter(function(e) { return e.severity !== 'info'; });
|
|
|
|
|
var unreadCount = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
|
|
|
|
|
lt.notif.set(bell, unreadCount);
|
|
|
|
|
|
|
|
|
|
if (!active.length) {
|
|
|
|
|
list.innerHTML = '<div style="padding:1rem;font-size:0.75rem;color:var(--text-muted);text-align:center">✔ No active alerts</div>';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
list.innerHTML = active.slice(0, 25).map(function(e) {
|
|
|
|
|
var isUnread = toMs(e.last_seen) > readBefore;
|
|
|
|
|
var dotColor = SEV_DOT[e.severity] || 'var(--text-muted)';
|
|
|
|
|
return '<div class="lt-notif-item' + (isUnread ? ' lt-notif-item--unread' : '') + '">' +
|
|
|
|
|
'<div class="lt-notif-dot' + (isUnread ? '' : ' lt-notif-dot--read') + '" style="background:' + dotColor + ';border-radius:50%;margin-top:4px"></div>' +
|
|
|
|
|
'<div class="lt-notif-item-body">' +
|
|
|
|
|
'<div class="lt-notif-item-title">' + esc(e.target_name) + (e.target_detail ? ' · ' + esc(e.target_detail) : '') + '</div>' +
|
|
|
|
|
'<div class="lt-notif-item-time">' + esc(e.event_type.replace(/_/g,' ')) + ' · ' + fmtAgo(e.last_seen) + '</div>' +
|
|
|
|
|
'</div></div>';
|
|
|
|
|
}).join('');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function fetchAlerts(andRender) {
|
|
|
|
|
fetch('/api/status', { credentials: 'same-origin' })
|
|
|
|
|
.then(function(r) { return r.json(); })
|
|
|
|
|
.then(function(data) {
|
|
|
|
|
var events = data.events || [];
|
|
|
|
|
if (andRender) {
|
|
|
|
|
renderAlerts(events);
|
|
|
|
|
} else {
|
|
|
|
|
_lastEvents = events;
|
|
|
|
|
var readBefore = getReadBefore();
|
|
|
|
|
var active = events.filter(function(e) { return e.severity !== 'info'; });
|
|
|
|
|
var unread = active.filter(function(e) { return toMs(e.last_seen) > readBefore; }).length;
|
|
|
|
|
lt.notif.set(bell, unread);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(function() {
|
|
|
|
|
if (andRender) list.innerHTML = '<div style="padding:0.75rem;font-size:0.75rem;color:var(--text-muted);text-align:center">Could not load</div>';
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function openPanel() { _open = true; panel.removeAttribute('aria-hidden'); bell.setAttribute('aria-expanded','true'); fetchAlerts(true); }
|
|
|
|
|
function closePanel() { _open = false; panel.setAttribute('aria-hidden','true'); bell.setAttribute('aria-expanded','false'); }
|
|
|
|
|
|
|
|
|
|
bell.addEventListener('click', function(e) { e.stopPropagation(); _open ? closePanel() : openPanel(); });
|
|
|
|
|
|
|
|
|
|
if (clearBtn) {
|
|
|
|
|
clearBtn.addEventListener('click', function() {
|
|
|
|
|
setReadBefore(Date.now());
|
|
|
|
|
renderAlerts(_lastEvents);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.addEventListener('click', function(e) { if (_open && wrapEl && !wrapEl.contains(e.target)) closePanel(); });
|
|
|
|
|
document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && _open) closePanel(); });
|
|
|
|
|
|
|
|
|
|
// Initial badge load + poll every 60 s
|
|
|
|
|
fetchAlerts(false);
|
|
|
|
|
setInterval(function() { fetchAlerts(_open); }, 60000);
|
|
|
|
|
|
|
|
|
|
// Allow refreshAll() to also push fresh events to the bell
|
|
|
|
|
window.gandalfNotifUpdate = function(events) { renderAlerts(events); };
|
|
|
|
|
})();
|
2026-04-18 21:01:20 -04:00
|
|
|
</script>
|
2026-04-18 21:42:04 -04:00
|
|
|
|
2026-03-01 23:03:18 -05:00
|
|
|
</body>
|
|
|
|
|
</html>
|
