v2.5.0: refine admin traffic and port status

This commit is contained in:
Виталий Литвинов
2026-04-25 12:01:31 +03:00
parent d8ec62eb07
commit d74b05ccf8
7 changed files with 758 additions and 136 deletions

View File

@@ -11,7 +11,7 @@
document.documentElement.dataset.theme = theme;
}());
</script>
<link rel="stylesheet" href="/styles.css?v=2.5.0-admin5">
<link rel="stylesheet" href="/styles.css?v=2.5.0-admin6">
</head>
<body>
<div class="app-shell">
@@ -24,7 +24,7 @@
</div>
</div>
<nav class="nav-tabs" aria-label="Admin sections">
<nav class="nav-tabs" aria-label="Admin sections" data-i18n-aria-label="ariaAdminSections">
<button type="button" class="nav-item active" data-nav="dashboard"><span class="nav-icon"></span><span data-i18n="navDashboard">Dashboard</span></button>
<button type="button" class="nav-item" data-nav="traffic"><span class="nav-icon"></span><span data-i18n="navTraffic">Traffic</span></button>
<button type="button" class="nav-item" data-nav="keys"><span class="nav-icon"></span><span data-i18n="navKeys">Keys</span></button>
@@ -41,14 +41,14 @@
<div class="workspace">
<header class="topbar">
<button id="menuBtn" class="icon-btn mobile-only" type="button" aria-label="Menu"></button>
<button id="menuBtn" class="icon-btn mobile-only" type="button" aria-label="Menu" data-i18n-aria-label="ariaMenu"></button>
<div class="title-block">
<p class="eyebrow" id="pageKicker">Local Admin</p>
<h1 id="pageTitle">Dashboard</h1>
<small id="lastRefresh">--</small>
</div>
<div class="top-actions">
<select id="languageSelect" class="language-select" aria-label="Language">
<select id="languageSelect" class="language-select" aria-label="Language" data-i18n-aria-label="ariaLanguage">
<option value="en">EN</option>
<option value="ru">RU</option>
</select>
@@ -62,13 +62,15 @@
<section class="visual-overview">
<div>
<p class="eyebrow">goTelegram Pro</p>
<h2 id="visualTitle">443 shared edge</h2>
<h2 id="visualTitle">Port 443</h2>
<p id="visualText">Website, MTProxy and local admin status in one operational view.</p>
</div>
<div class="signal-map" aria-hidden="true">
<span class="node node-site">HTTPS</span>
<span class="node node-proxy">MTProto</span>
<span class="node node-admin">Admin</span>
<div class="port-map" id="port443Map">
<div class="port-map-head">
<span>443</span>
<strong id="port443Summary">--</strong>
</div>
<div id="port443List" class="port-list"></div>
</div>
</section>
@@ -101,7 +103,7 @@
<div class="panel-head">
<div>
<p class="eyebrow" data-i18n="servicesEyebrow">Services</p>
<h2 data-i18n="servicesTitle">Runtime health</h2>
<h2 class="with-help"><span data-i18n="servicesTitle">Service health</span><span class="info-hint" tabindex="0" data-i18n-title="servicesHelp" title="Service health">?</span></h2>
</div>
</div>
<div class="service-grid" id="services"></div>
@@ -111,7 +113,7 @@
<div class="panel-head">
<div>
<p class="eyebrow" data-i18n="runtimeEyebrow">Runtime</p>
<h2 data-i18n="runtimeTitle">telemt summary</h2>
<h2 class="with-help"><span data-i18n="runtimeTitle">telemt summary</span><span class="info-hint" tabindex="0" data-i18n-title="runtimeHelp" title="Runtime data">?</span></h2>
</div>
</div>
<div id="runtimeCards" class="runtime-grid"></div>
@@ -129,8 +131,8 @@
</div>
<div class="panel-actions">
<span id="statsHealth" class="status-pill">--</span>
<button id="collectStatsBtn" class="ghost" type="button" data-i18n="collectStats">Collect</button>
<button id="repairStatsBtn" type="button" data-i18n="repairStats">Repair stats</button>
<button id="collectStatsBtn" class="ghost" type="button" data-i18n="collectStats" data-i18n-title="collectStatsHelp">Collect</button>
<button id="repairStatsBtn" type="button" data-i18n="repairStats" data-i18n-title="repairStatsHelp">Restart collector</button>
</div>
</div>
<div class="traffic-summary">
@@ -147,12 +149,24 @@
<strong id="historyRows">0</strong>
</article>
</div>
<div class="traffic-controls">
<div class="segmented" id="trafficRange" aria-label="Traffic range" data-i18n-aria-label="ariaTrafficRange">
<button type="button" data-traffic-range="15m" data-i18n="range15m">15 min</button>
<button type="button" data-traffic-range="1h" data-i18n="range1h">1 hour</button>
<button type="button" data-traffic-range="24h" data-i18n="range24h">24 hours</button>
<button type="button" data-traffic-range="month" data-i18n="rangeMonth">Month</button>
</div>
<div class="segmented" id="trafficView" aria-label="Traffic view" data-i18n-aria-label="ariaTrafficView">
<button type="button" data-traffic-view="chart" data-i18n="viewChart">Chart</button>
<button type="button" data-traffic-view="table" data-i18n="viewRows">Rows</button>
</div>
</div>
<div id="trafficChart" class="traffic-chart"></div>
<div class="table-wrap">
<div class="table-wrap" id="trafficTableWrap">
<table>
<thead>
<tr>
<th data-i18n="tableTime">Time</th>
<th data-i18n="tablePeriod">Period</th>
<th data-i18n="tableProxyDelta">Proxy delta</th>
<th data-i18n="tableSiteDelta">Site delta</th>
<th data-i18n="tableProxyTotal">Proxy total</th>
@@ -285,7 +299,7 @@
<div id="toast" class="toast"></div>
<div id="promoModal" class="promo-modal" hidden>
<div class="promo-card" role="dialog" aria-modal="true" aria-labelledby="promoTitle">
<button id="promoClose" class="icon-btn ghost" type="button" aria-label="Close">×</button>
<button id="promoClose" class="icon-btn ghost" type="button" aria-label="Close" data-i18n-aria-label="ariaClose">×</button>
<p class="eyebrow" data-i18n="promoEyebrow">Promo</p>
<h2 id="promoTitle" data-i18n="promoTitle">Support goTelegram Pro</h2>
<div class="promo-grid">
@@ -304,6 +318,6 @@
</div>
</div>
</div>
<script src="/app.js?v=2.5.0-admin5" type="module"></script>
<script src="/app.js?v=2.5.0-admin6" type="module"></script>
</body>
</html>