gru/leox-gpon-monitoring
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-01-02 22:31:35 +01:00
commit 69711b46bc
16 changed files with 2725 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
templates/base.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="pl" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}GPON Monitor{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
{% block extra_css %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<i class="bi bi-diagram-3"></i> GPON Monitor
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<span class="nav-link" id="status-indicator">
<i class="bi bi-circle-fill text-secondary"></i> Checking...
</span>
</li>
</ul>
</div>
</div>
</nav>
<main class="container-fluid py-4">
{% block content %}{% endblock %}
</main>
<footer class="text-center text-muted py-3 mt-5">
<small>GPON Monitor v1.0 | LXT-010S-H/H-D | linuxiarz.pl</small>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
<script src="{{ url_for('static', filename='js/charts.js') }}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>

361
templates/index.html Normal file
View File

@@ -0,0 +1,361 @@
{% extends "base.html" %}
{% block content %}
<!-- Alerts Container -->
<div id="alerts-container" class="mb-4"></div>
<!-- Global Period Selector -->
<div class="row mb-3">
<div class="col-md-12">
<div class="card">
<div class="card-body py-3">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
<div>
<i class="bi bi-calendar-range me-2"></i>
<strong>Global Time Range</strong>
</div>
<div class="btn-group btn-group-sm" role="group" id="global-period-selector">
<input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked>
<label class="btn btn-outline-primary" for="period-1h">1h</label>
<input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h">
<label class="btn btn-outline-primary" for="period-6h">6h</label>
<input type="radio" class="btn-check" name="global-period" id="period-12h" value="12h">
<label class="btn btn-outline-primary" for="period-12h">12h</label>
<input type="radio" class="btn-check" name="global-period" id="period-24h" value="24h">
<label class="btn btn-outline-primary" for="period-24h">24h</label>
<input type="radio" class="btn-check" name="global-period" id="period-3d" value="3d">
<label class="btn btn-outline-primary" for="period-3d">3d</label>
<input type="radio" class="btn-check" name="global-period" id="period-7d" value="7d">
<label class="btn btn-outline-primary" for="period-7d">7d</label>
<input type="radio" class="btn-check" name="global-period" id="period-14d" value="14d">
<label class="btn btn-outline-primary" for="period-14d">14d</label>
<input type="radio" class="btn-check" name="global-period" id="period-30d" value="30d">
<label class="btn btn-outline-primary" for="period-30d">30d</label>
<input type="radio" class="btn-check" name="global-period" id="period-60d" value="60d">
<label class="btn btn-outline-primary" for="period-60d">60d</label>
<input type="radio" class="btn-check" name="global-period" id="period-90d" value="90d">
<label class="btn btn-outline-primary" for="period-90d">90d</label>
<input type="radio" class="btn-check" name="global-period" id="period-120d" value="120d">
<label class="btn btn-outline-primary" for="period-120d">120d</label>
<input type="radio" class="btn-check" name="global-period" id="period-1y" value="1y">
<label class="btn btn-outline-primary" for="period-1y">1Y</label>
<input type="radio" class="btn-check" name="global-period" id="period-2y" value="2y">
<label class="btn btn-outline-primary" for="period-2y">2Y</label>
<input type="radio" class="btn-check" name="global-period" id="period-5y" value="5y">
<label class="btn btn-outline-primary" for="period-5y">5Y</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Metrics Row -->
<div class="row g-3 mb-4">
<div class="col-md-3">
<div class="card metric-card">
<div class="card-body text-center">
<i class="bi bi-arrow-down-circle fs-1 text-info"></i>
<h6 class="card-title mt-2">RX Power</h6>
<div class="metric-value" id="rx-power">--</div>
<span class="metric-unit">dBm</span>
<div class="progress mt-2" style="height: 5px;">
<div id="rx-power-bar" class="progress-bar bg-info" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card metric-card">
<div class="card-body text-center">
<i class="bi bi-arrow-up-circle fs-1 text-warning"></i>
<h6 class="card-title mt-2">TX Power</h6>
<div class="metric-value" id="tx-power">--</div>
<span class="metric-unit">dBm</span>
<div class="progress mt-2" style="height: 5px;">
<div id="tx-power-bar" class="progress-bar bg-warning" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card metric-card">
<div class="card-body text-center">
<i class="bi bi-thermometer-half fs-1 text-danger"></i>
<h6 class="card-title mt-2">Temperature</h6>
<div class="metric-value" id="temperature">--</div>
<span class="metric-unit">°C</span>
<div class="progress mt-2" style="height: 5px;">
<div id="temp-bar" class="progress-bar bg-danger" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card metric-card">
<div class="card-body text-center">
<i class="bi bi-clock-history fs-1 text-success"></i>
<h6 class="card-title mt-2">Uptime</h6>
<div class="metric-value fs-5" id="uptime">--</div>
</div>
</div>
</div>
</div>
<!-- OLT Information Row -->
<div class="row g-3 mb-4">
<div class="col-md-12">
<div class="card">
<div class="card-header"><i class="bi bi-hdd-network"></i> Device & OLT Information</div>
<div class="card-body">
<div class="row">
<div class="col-md-3">
<h6 class="text-muted mb-3"><i class="bi bi-router"></i> ONU Device</h6>
<table class="table table-sm">
<tr><td class="text-muted border-0" style="width: 50%;">Vendor ID:</td><td class="border-0 fw-semibold" id="vendor-id">--</td></tr>
<tr><td class="text-muted border-0">Serial Number:</td><td class="border-0 fw-semibold" id="serial-number">--</td></tr>
<tr><td class="text-muted border-0">Version:</td><td class="border-0 fw-semibold" id="version">--</td></tr>
<tr><td class="text-muted border-0">MAC Address:</td><td class="border-0 fw-semibold font-monospace" id="mac-address">--</td></tr>
</table>
</div>
<div class="col-md-3">
<h6 class="text-muted mb-3"><i class="bi bi-hdd-network-fill"></i> OLT Info</h6>
<table class="table table-sm">
<tr><td class="text-muted border-0" style="width: 50%;">OLT Vendor:</td><td class="border-0 fw-semibold" id="olt-vendor-info">--</td></tr>
<tr><td class="text-muted border-0">OLT Version:</td><td class="border-0 fw-semibold" id="olt-version-info">--</td></tr>
<tr><td class="text-muted border-0">Connection Time:</td><td class="border-0 fw-semibold" id="connection-time">--</td></tr>
</table>
</div>
<div class="col-md-3">
<h6 class="text-muted mb-3"><i class="bi bi-bar-chart-line"></i> Statistics</h6>
<table class="table table-sm">
<tr><td class="text-muted border-0" style="width: 50%;">RX Packets:</td><td class="border-0 fw-semibold" id="rx-packets">--</td></tr>
<tr><td class="text-muted border-0">TX Packets:</td><td class="border-0 fw-semibold" id="tx-packets">--</td></tr>
<tr><td class="text-muted border-0">FEC Corrected:</td><td class="border-0 fw-semibold" id="fec-corrected">--</td></tr>
<tr><td class="text-muted border-0">FEC Uncorrected:</td><td class="border-0 fw-semibold" id="fec-uncorrected">--</td></tr>
</table>
</div>
<div class="col-md-3">
<h6 class="text-muted mb-3"><i class="bi bi-info-circle"></i> Diagnostics</h6>
<table class="table table-sm">
<tr><td class="text-muted border-0" style="width: 50%;">Voltage:</td><td class="border-0 fw-semibold" id="voltage">--</td></tr>
<tr><td class="text-muted border-0">TX Bias:</td><td class="border-0 fw-semibold" id="tx-bias">--</td></tr>
<tr><td class="text-muted border-0">Data Volume:</td><td class="border-0 fw-semibold" id="data-volume-total">--</td></tr>
<tr><td class="text-muted border-0">Last Update:</td><td class="border-0 fw-semibold" id="last-update">--</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Charts Row -->
<div class="row g-3 mb-4">
<!-- Optical Power -->
<div class="col-md-4">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-graph-up"></i> Optical Power</span>
<select class="form-select form-select-sm w-auto" id="period-optical">
<option value="1h" selected>1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d">7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="5y">5 Years</option>
</select>
</div>
<div class="card-body">
<canvas id="chart-optical" height="250"></canvas>
</div>
</div>
</div>
<!-- Temperature -->
<div class="col-md-4">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-thermometer-half"></i> Temperature</span>
<select class="form-select form-select-sm w-auto" id="period-temperature">
<option value="1h" selected>1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d">7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="5y">5 Years</option>
</select>
</div>
<div class="card-body">
<canvas id="chart-temperature" height="250"></canvas>
</div>
</div>
</div>
<!-- Traffic -->
<div class="col-md-4">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-activity"></i> Traffic</span>
<select class="form-select form-select-sm w-auto" id="period-traffic">
<option value="1h" selected>1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d">7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="5y">5 Years</option>
</select>
</div>
<div class="card-body">
<canvas id="chart-traffic" height="250"></canvas>
</div>
</div>
</div>
</div>
<!-- FEC Errors & Bytes Traffic Row -->
<div class="row g-3 mb-4">
<!-- Bytes Traffic -->
<div class="col-md-6">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-speedometer2"></i> Bytes Traffic (Speed)</span>
<select class="form-select form-select-sm w-auto" id="period-bytes">
<option value="1h" selected>1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d">7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="5y">5 Years</option>
</select>
</div>
<div class="card-body">
<canvas id="chart-bytes" height="150"></canvas>
</div>
</div>
</div>
<!-- FEC Errors -->
<div class="col-md-6">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-exclamation-triangle"></i> FEC Errors History</span>
<select class="form-select form-select-sm w-auto" id="period-fec">
<option value="1h" selected>1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d">7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="5y">5 Years</option>
</select>
</div>
<div class="card-body">
<canvas id="chart-fec" height="150"></canvas>
</div>
</div>
</div>
</div>
<!-- Data Volume Row -->
<div class="row g-3">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="bi bi-database"></i> Data Volume (Cumulative)</span>
<div class="d-flex gap-2 align-items-center">
<!-- Przełącznik Line/Bar -->
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="volume-chart-type" id="volume-line" value="line" checked>
<label class="btn btn-outline-secondary" for="volume-line">
<i class="bi bi-graph-up"></i> Line
</label>
<input type="radio" class="btn-check" name="volume-chart-type" id="volume-bar" value="bar">
<label class="btn btn-outline-secondary" for="volume-bar">
<i class="bi bi-bar-chart"></i> Bar
</label>
</div>
<!-- Period selector -->
<select class="form-select form-select-sm w-auto" id="period-volume">
<option value="1h" selected>1h</option>
<option value="6h">6h</option>
<option value="12h">12h</option>
<option value="24h">24h</option>
<option value="3d">3d</option>
<option value="7d">7d</option>
<option value="14d">14d</option>
<option value="30d">30d</option>
<option value="60d">60d</option>
<option value="90d">90d</option>
<option value="120d">120d</option>
<option value="1y">1 Year</option>
<option value="2y">2 Years</option>
<option value="5y">5 Years</option>
</select>
</div>
</div>
<div class="card-body">
<canvas id="chart-volume" height="150"></canvas>
</div>
</div>
</div>
</div>
{% endblock %}