woninet 2.0.1__py3-none-any.whl

woninet/server/static/css/style.css

@@ -0,0 +1,368 @@
+:root {
+    --bg:#08111f;
+    --panel:#101b31;
+    --panel-light:#172541;
+    --text:#e8f0ff;
+    --muted:#95a3bd;
+
+    --good:#22c55e;
+    --warn:#f59e0b;
+    --bad:#ef4444;
+
+    --accent:#6ea8fe;
+
+    --border:rgba(255,255,255,.08);
+}
+
+*{
+    box-sizing:border-box;
+}
+
+body{
+    margin:0;
+    font-family:Inter,Segoe UI,sans-serif;
+    min-height: 100vh;
+    background:
+    radial-gradient(circle at top left,
+    rgba(110,168,254,.12),transparent 25%),
+    linear-gradient(180deg,#08111f,#050b15);
+    color:var(--text);
+}
+
+.dashboard{
+    max-width:1400px;
+    margin:auto;
+    padding:30px;
+}
+
+.topbar{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    margin-bottom:30px;
+}
+
+.eyebrow{
+    color:var(--accent);
+    letter-spacing:2px;
+    font-size:.8rem;
+}
+
+.subtitle{
+    color:var(--muted);
+}
+
+.api-status{
+    display:flex;
+    align-items:center;
+    gap:10px;
+}
+
+.status-dot{
+    width:10px;
+    height:10px;
+    border-radius:50%;
+    background:var(--good);
+}
+
+.overview-grid{
+    display:grid;
+    grid-template-columns:repeat(4,1fr);
+    gap:15px;
+    margin-bottom:20px;
+}
+
+.kpi-card{
+    background:var(--panel);
+    border:1px solid var(--border);
+    border-radius:16px;
+    padding:20px;
+}
+
+.kpi-card span{
+    color:var(--muted);
+}
+
+.kpi-card h2{
+    margin-top:8px;
+}
+
+.health-panel{
+    background:var(--panel);
+    border:1px solid var(--border);
+    border-radius:16px;
+    padding:20px;
+    margin-bottom:20px;
+    display:flex;
+    justify-content:space-between;
+}
+
+.health-label{
+    color:var(--muted);
+}
+
+.toolbar{
+    display:flex;
+    gap:12px;
+    margin-bottom:20px;
+    justify-content: space-between;
+}
+
+.toolbar input,
+.toolbar select{
+    background:var(--panel);
+    color:var(--text);
+    border:1px solid var(--border);
+    border-radius:12px;
+    padding:12px;
+}
+
+.toolbar input{
+    flex:1;
+}
+
+.main-layout{
+    display:grid;
+    grid-template-columns:2fr 1fr;
+    gap:20px;
+}
+
+.panel,
+.events-panel{
+    background:var(--panel);
+    border-radius:16px;
+    border:1px solid var(--border);
+    padding:20px;
+}
+
+.device-grid{
+    display:grid;
+    gap:15px;
+}
+
+.device-card{
+    background:var(--panel-light);
+    border-radius:14px;
+    padding:18px;
+    transition:.2s;
+}
+
+.device-card:hover{
+    transform:translateY(-2px);
+}
+
+.device-online{
+    border-left:4px solid var(--good);
+}
+
+.device-degraded{
+    border-left:4px solid var(--warn);
+}
+
+.device-offline{
+    border-left:4px solid var(--bad);
+}
+
+.device-header{
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    margin-bottom:15px;
+}
+
+.device-ip{
+    font-size:1.1rem;
+    font-weight:700;
+}
+
+.device-status{
+    font-size:.8rem;
+    font-weight:700;
+}
+
+.metrics{
+    display:grid;
+    grid-template-columns:repeat(2,1fr);
+    gap:10px;
+}
+
+.metric{
+    background:rgba(255,255,255,.03);
+    border-radius:10px;
+    padding:10px;
+}
+
+.metric-label{
+    color:var(--muted);
+    font-size:.8rem;
+}
+
+.metric-value{
+    margin-top:4px;
+}
+
+.device-link{
+    color: var(--accent);
+}
+
+.device-link:hover, .device-link:active{
+    color: var(--text);
+}
+
+.event {
+    background: #1e1e1e;
+    color: #fff;
+    padding: 12px;
+    margin-bottom: 10px;
+    border-left: 4px solid #ff9800;
+    border-radius: 6px;
+    font-size: 14px;
+}
+
+.event-trigger {
+    border-left-color: #ff9800;
+}
+
+.event-trigger strong {
+    color: #ff9800;
+}
+
+.event-recover {
+    border-left-color: #22c55e;
+}
+
+.event-recover strong {
+    color: #22c55e;
+}
+
+.loader{
+    width:40px;
+    height:40px;
+    border:4px solid rgba(255,255,255,.15);
+    border-top:4px solid var(--accent);
+    border-radius:50%;
+    animation:spin 1s linear infinite;
+    margin:auto;
+}
+
+/* device_info style */
+.status-online {
+    background-color: var(--good);
+}
+
+.status-offline {
+    background-color: var(--bad);
+}
+
+.status-degraded {
+    background-color: var(--warn);
+}
+
+.back-link {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+.back-link:hover {
+    text-decoration: underline;
+}
+
+.no-alerts {
+    color: var(--muted);
+    text-align: center;
+    padding: 20px;
+}
+
+.device-card-online {
+    border-left-color: var(--good);
+}
+
+.device-card-degraded {
+    border-left-color: var(--warn);
+}
+
+.device-card-offline {
+    border-left-color: var(--bad);
+}
+
+/* responsive settings */
+@keyframes spin{
+    to{
+        transform:rotate(360deg);
+    }
+}
+
+@media(max-width:1000px){
+
+    .main-layout{
+        grid-template-columns:1fr;
+    }
+
+    .overview-grid{
+        grid-template-columns:repeat(2,1fr);
+    }
+}
+
+/* Table view for devices CSS code */
+.table-wrapper{
+    overflow:auto;
+    border-radius:14px;
+}
+
+.device-table{
+    width:100%;
+    border-collapse:collapse;
+}
+
+.device-table thead{
+    background:#131f34;
+    position:sticky;
+    top:0;
+}
+
+.device-table th{
+    text-align:left;
+    padding:16px;
+    color:var(--muted);
+    font-size:.85rem;
+    font-weight:600;
+    border-bottom:1px solid var(--border);
+}
+
+.device-table td{
+    padding:15px 16px;
+    border-bottom:1px solid rgba(255,255,255,.05);
+}
+
+.device-table tbody tr{
+    transition:.15s;
+}
+
+.device-table tbody tr:hover{
+    background:#172540;
+}
+.status-badge{
+    display:inline-flex;
+    align-items:center;
+    justify-content:center;
+    padding:4px 12px;
+    border-radius:999px;
+    font-size:.75rem;
+    font-weight:700;
+    text-transform:uppercase;
+}
+
+.status-badge.online{
+    background:rgba(34,197,94,.15);
+    color:#22c55e;
+}
+
+.status-badge.degraded{
+    background:rgba(245,158,11,.15);
+    color:#f59e0b;
+}
+
+.status-badge.offline{
+    background:rgba(239,68,68,.15);
+    color:#ef4444;
+}

woninet/server/static/js/app.js

@@ -0,0 +1,242 @@
+let found_devices = new Map();
+let events = [];
+
+function addEvent(message) {
+
+    const timestamp = new Date().toLocaleTimeString();
+
+    events.unshift(`${timestamp} - ${message}`);
+
+    if(events.length > 15)
+        events.pop();
+
+    document.getElementById("events").innerHTML =
+        events.map(e => `<div class="event">${e}</div>`).join("");
+}
+
+function getDeviceState(device) {
+
+    const latency = device.latency ?? 0;
+    const loss = device.packet_loss ?? 0;
+
+    if(latency === 0)
+        return "offline";
+
+    if(latency > 100 || loss > 2)
+        return "degraded";
+
+    return "online";
+}
+
+function createDeviceRow(device){
+
+    const state = getDeviceState(device);
+
+    const latency =
+        device.latency !== 0
+            ? `${device.latency} ms`
+            : "--";
+
+    return `
+    <tr>
+
+        <td>
+
+            <span class="status-badge ${state}">
+                ${state}
+            </span>
+
+        </td>
+
+        <td>
+
+            <strong>${device.ip}</strong>
+
+        </td>
+
+        <td>${latency}</td>
+
+        <td>${(device.packet_loss ?? 0).toFixed(1)}%</td>
+
+        <td>${device.mac}</td>
+
+        <td>${device.last_seen}</td>
+
+        <td>
+
+            <a class="device-link"
+               href="/devices/${device.ip}">
+                <i class="fa fa-ellipsis-v"></i>
+            </a>
+
+        </td>
+
+    </tr>
+    `;
+}
+
+function updateOverview(devices){
+
+    const total = devices.length;
+
+    const online =
+        devices.filter(d => (d.latency ?? 0) > 0).length;
+
+    const latencyDevices =
+        devices.filter(d => (d.latency ?? 0) > 0);
+
+    const avgLatency =
+        latencyDevices.length
+        ? Math.round(
+            latencyDevices.reduce(
+                (a,b)=>a+b.latency,0
+            ) / latencyDevices.length
+        )
+        : 0;
+
+    const validDevices = devices.filter(device => device.latency !== 0);
+    const avgLoss = validDevices.length
+        ? (
+            validDevices.reduce(
+                (sum, device) => sum + (device.packet_loss ?? 0), 0) / validDevices.length
+        ).toFixed(1)
+        : 0;
+
+    document.getElementById(
+        "total_devices"
+    ).textContent = total;
+
+    document.getElementById(
+        "online_devices"
+    ).textContent = online;
+
+    document.getElementById(
+        "avg_latency"
+    ).textContent = `${avgLatency} ms`;
+
+    document.getElementById(
+        "avg_packet_loss"
+    ).textContent = `${avgLoss}%`;
+}
+
+function renderDevices(data){
+
+    const devices = data.devices || [];
+
+    updateOverview(devices);
+
+    const search =
+        document.getElementById("search")
+        .value
+        .toLowerCase();
+
+    const filter =
+        document.getElementById("filter_status")
+        .value;
+
+    const filtered =
+        devices.filter(device => {
+
+            const state =
+                getDeviceState(device);
+
+            const matchesSearch =
+                device.ip.toLowerCase().includes(search) ||
+                (device.mac || "")
+                .toLowerCase()
+                .includes(search);
+
+            const matchesFilter =
+                filter === "all" ||
+                state === filter;
+
+            return matchesSearch &&
+                   matchesFilter;
+        });
+
+    document.getElementById(
+        "devices"
+    ).innerHTML =
+        filtered.map(createDeviceRow).join("");
+}
+
+async function loadDevices(){
+
+    const statusDot =
+        document.getElementById("status_dot");
+    const statusText = document.getElementById("status_text");
+
+    try{
+
+        const response =
+            await fetch("/api/devices");
+
+        const data =
+            await response.json();
+
+        renderDevices(data);
+
+        statusDot.style.background =
+            "#22c55e";
+        statusText.textContent = "Connected";
+
+    }catch(error){
+
+        statusDot.style.background =
+            "#ef4444";
+        statusText.textContent = "Disconnected";
+
+        console.error(error);
+    }
+}
+
+document
+.getElementById("search")
+?.addEventListener(
+    "input",
+    loadDevices
+);
+
+document
+.getElementById("filter_status")
+?.addEventListener(
+    "change",
+    loadDevices
+);
+
+async function loadAlertEvents() {
+    try {
+        const response = await fetch("/api/stats");
+        const data = await response.json();
+
+        const alertEvents = data.recent_alert_events || [];
+
+        const alert_events = alertEvents.map(event => {
+            const time = new Date(event.timestamp)
+                .toLocaleString();
+            
+            const eventClass = event.event_type === "trigger" ? "event-trigger" : "event-recover";
+            const metricUnit = event.metric === "latency" ? "ms" : "%";
+
+            return `
+                <div class="event ${eventClass}">
+                    <strong>${event.event_type.toUpperCase()}</strong><br>
+                    ${event.device_ip} | ${event.metric}: ${event.value.toFixed(2)} ${metricUnit}
+                    <small>(${time})</small>
+                </div>
+            `;
+        }).slice(0, 15);
+
+        document.getElementById("events").innerHTML =
+            alert_events.join("");
+
+    } catch (error) {
+        console.error("Error loading alert events:", error);
+    }
+}
+
+loadDevices();
+loadAlertEvents();
+
+setInterval(loadDevices, 5000);
+setInterval(loadAlertEvents, 5000);

woninet/server/static/js/device_info.js

@@ -0,0 +1,95 @@
+const deviceIP = document.getElementById("device-ip");
+const latency = document.getElementById("device-latency");
+const deviceMAC = document.getElementById("device-mac");
+const packetLoss = document.getElementById("device-packet-loss");
+const status = document.getElementById("device-status");
+const lastSeen = document.getElementById("device-last-seen");
+const alertSatteLatency = document.getElementById("alert-state-latency");
+const alertStatePacketLoss = document.getElementById("alert-state-packet-loss");
+const alertsContainer = document.getElementById("events");
+const deviceCard = document.getElementById("device-card");
+const lineGraph = document.getElementById("device-recent-events-line-graph");
+
+
+function loadDeviceCardStyle(device_latency) {
+    // Remove everything
+    deviceCard.classList.remove("device-offline");
+    deviceCard.classList.remove("device-degraded");
+    deviceCard.classList.remove("device-online");
+    // reassign style
+    if (device_latency === 0) {
+        deviceCard.classList.add("device-offline");
+    } else if (device_latency >= 100) {
+        deviceCard.classList.add("device-degraded");
+    } else {
+        deviceCard.classList.add("device-online");
+    }
+}
+
+
+function renderAlertEvents(deviceAlertEvents) {
+    alertsContainer.textContent = "";
+
+    if (deviceAlertEvents.length > 0) {
+        deviceAlertEvents.forEach(event => {
+            const eventDiv = document.createElement("div");
+            eventDiv.classList.add("event");
+            eventDiv.classList.add(
+                event.event_type === "recover" ? "event-recover" : "event-trigger"
+            );
+
+            const strong = document.createElement("strong");
+            strong.textContent = event.event_type.toUpperCase();
+
+            const br = document.createElement("br");
+
+            const text = document.createTextNode(`${event.metric}: ${Number(event.value).toFixed(2)} `);
+
+            const small = document.createElement("small");
+            small.textContent = `(${event.timestamp})`;
+
+            eventDiv.appendChild(strong);
+            eventDiv.appendChild(br);
+            eventDiv.appendChild(text);
+            eventDiv.appendChild(small);
+
+            alertsContainer.appendChild(eventDiv);
+        });
+    } else {
+        const p = document.createElement("p");
+        p.className = "no-alerts";
+        p.textContent = "No alerts";
+        alertsContainer.appendChild(p);
+    }
+}
+
+
+async function loadDeviceInfo() {
+    const ip = window.location.pathname.split("/").pop();
+    deviceIP.textContent = ip;
+
+    const response = await fetch(`/api/devices/${ip}`);
+    const data = await response.json();
+    const device = data.device || "";
+    const deviceAlertState = data.device_alert_state || "";
+    const deviceAlertEvents = data.device_recent_alert_events || [];
+
+    device.latency === 0 ? latency.textContent = "OFFLINE" : latency.textContent = `${device.latency} ms`;
+    deviceMAC.textContent = device.mac;
+    packetLoss.textContent = `${device.packet_loss} %`;
+    device.latency === 0 ? status.textContent = "OFFLINE" : status.textContent = "ONLINE";
+    lastSeen.textContent = device.last_seen;
+
+    alertSatteLatency.textContent = deviceAlertState.latency;
+    alertStatePacketLoss.textContent = deviceAlertState.packet_loss;
+
+    // Send current date as query to prevent cache from not loading the new graph image
+    lineGraph.src = `/charts/${ip}.png?v=${Date.now()}`
+
+    loadDeviceCardStyle(device.latency);
+
+    renderAlertEvents(deviceAlertEvents);
+}
+
+loadDeviceInfo();
+setInterval(loadDeviceInfo, 5000);