444 lines
23 KiB
HTML
444 lines
23 KiB
HTML
{% 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 class="flex-shrink-0 text-white-50">
|
|
<i class="bi bi-calendar-range me-2"></i>
|
|
<strong class="text-white">Global Time Range</strong>
|
|
</div>
|
|
|
|
<div class="d-flex gap-1 flex-shrink-0 p-1 bg-dark bg-opacity-50 border border-secondary border-opacity-25 rounded-1"
|
|
style="max-width: 70%;">
|
|
|
|
<div class="btn-toolbar d-none d-sm-flex" role="toolbar" id="global-quick-pickers"
|
|
style="overflow-x: auto; scrollbar-width: thin; max-width: 100%;">
|
|
|
|
<!-- Grupa 1 -->
|
|
<div class="btn-group btn-group-sm me-1" role="group">
|
|
<input type="radio" class="btn-check" name="global-period" id="period-1h" value="1h" checked>
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-1h">1h</label>
|
|
|
|
<input type="radio" class="btn-check" name="global-period" id="period-6h" value="6h">
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-6h">6h</label>
|
|
|
|
<input type="radio" class="btn-check" name="global-period" id="period-12h" value="12h">
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-12h">12h</label>
|
|
|
|
<input type="radio" class="btn-check" name="global-period" id="period-24h" value="24h">
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-24h">24h</label>
|
|
</div>
|
|
|
|
<!-- Grupa 2 -->
|
|
<div class="btn-group btn-group-sm" role="group">
|
|
<input type="radio" class="btn-check" name="global-period" id="period-3d" value="3d">
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-3d">3d</label>
|
|
|
|
<input type="radio" class="btn-check" name="global-period" id="period-7d" value="7d">
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-7d">7d</label>
|
|
|
|
<input type="radio" class="btn-check" name="global-period" id="period-30d" value="30d">
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-30d">30d</label>
|
|
|
|
<input type="radio" class="btn-check" name="global-period" id="period-90d" value="90d">
|
|
<label class="btn btn-outline-light btn-sm px-2 py-0.5 text-nowrap" for="period-90d">90d</label>
|
|
</div>
|
|
</div>
|
|
|
|
<select class="form-select form-select-sm d-md-none ms-2 bg-dark text-white border-secondary"
|
|
id="global-period-select" style="min-width: 100px;">
|
|
<option value="1h" class="bg-dark text-white">1h</option>
|
|
<option value="6h" class="bg-dark text-white">6h</option>
|
|
<option value="12h" class="bg-dark text-white">12h</option>
|
|
<option value="24h" class="bg-dark text-white">24h</option>
|
|
<option value="3d" class="bg-dark text-white">3d</option>
|
|
<option value="7d" class="bg-dark text-white">7d</option>
|
|
<option value="14d" class="bg-dark text-white">14d</option>
|
|
<option value="30d" class="bg-dark text-white">30d</option>
|
|
<option value="60d" class="bg-dark text-white">60d</option>
|
|
<option value="90d" class="bg-dark text-white">90d</option>
|
|
<option value="120d" class="bg-dark text-white">120d</option>
|
|
<option value="1y" class="bg-dark text-white">1Y</option>
|
|
<option value="2y" class="bg-dark text-white">2Y</option>
|
|
<option value="5y" class="bg-dark text-white">5Y</option>
|
|
</select>
|
|
</div>
|
|
|
|
<input type="hidden" id="global-period-hidden" name="global-period" value="1h">
|
|
</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">Model:</td><td class="border-0 fw-semibold" id="model">--</td></tr>
|
|
<tr><td class="text-muted border-0">SW Version:</td><td class="border-0 fw-semibold" id="version">--</td></tr>
|
|
<tr><td class="text-muted border-0">HW Version:</td><td class="border-0 fw-semibold" id="hw-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 & OMCI</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">OLT Mode:</td><td class="border-0 fw-semibold" id="olt-mode">--</td></tr>
|
|
<tr><td class="text-muted border-0">OMCC Version:</td><td class="border-0 fw-semibold font-monospace" id="omcc-version">--</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%;">PON Mode:</td><td class="border-0 fw-semibold" id="pon-mode">--</td></tr>
|
|
<tr><td class="text-muted border-0">LAN Mode:</td><td class="border-0 fw-semibold" id="lan-mode">--</td></tr>
|
|
<tr><td class="text-muted border-0">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>
|
|
|
|
|
|
<!-- Optical Metrics Row (RX/TX Power + Temperature + TX Bias) -->
|
|
<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>
|
|
|
|
<!-- TX Bias -->
|
|
<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-lightning-charge"></i> TX Bias Current</span>
|
|
<select class="form-select form-select-sm w-auto" id="period-txbias">
|
|
<option value="1h">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" selected>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-txbias" height="250"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Traffic Row -->
|
|
<div class="row g-3 mb-4">
|
|
<!-- Traffic Packets -->
|
|
<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-activity"></i> Traffic (Packets/s)</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="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bytes Traffic -->
|
|
<div class="row g-3 mb-4">
|
|
<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-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="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Volume Row -->
|
|
<div class="row g-3 mb-4">
|
|
<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="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Voltage + FEC Errors -->
|
|
<div class="row g-3 mb-4">
|
|
<!-- Voltage Chart -->
|
|
<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-battery-charging"></i> Supply Voltage</span>
|
|
<select class="form-select form-select-sm w-auto" id="period-voltage">
|
|
<option value="1h">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" selected>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-voltage" height="200"></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="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %} |