Initial commit of AthonetTools

templates/pages/vpn_status.html

@@ -0,0 +1,80 @@
+{% extends "layout.html" %}
+{% set active_page = 'vpn_status' %}
+{% block title %}m2000 Status - {{ super() }}{% endblock %}
+
+{% block content %}
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2 id="page-title" class="mb-0">m2000 Status</h2>
+    </div>
+    <div class="row align-items-end">
+        <div class="col-md-4" id="dashboard-select-wrapper">
+            <label for="dashboard-select" class="form-label">HPE P5G Dashboard</label>
+            <select class="form-select" id="dashboard-select">
+                <option selected>Triton</option>
+                <option>Star</option>
+                <option>Bluebonnet</option>
+                <option>Lonestar</option>
+                <option>Production</option>
+                <option>Test (future)</option>
+            </select>
+        </div>
+    </div>
+    <hr>
+    <div id="vpn-view">
+        <p>List the status of all network links from the selected dashboard. From the results table, you can restart the OpenVPN service on a specific device.</p>
+        <p>Note that after a VPN connection is restarted it will take some time for the connection to re-establish. Click List m2000 status to refresh the list.</p>
+        <button class="btn btn-primary" id="listVpnsBtn">List m2000 Status</button>
+    </div>
+    <div class="mt-4">
+        <h4>Results</h4>
+        <div id="spinner" class="d-none spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
+        <div id="results-output" class="p-3"></div>
+    </div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script defer>
+    document.getElementById('listVpnsBtn').addEventListener('click', async () => {
+        const dashboard = document.getElementById('dashboard-select').value;
+        const devices = await apiCall('/api/m2000/list', { dashboard });
+        if (devices) {
+            let tableHtml = `<table class="table table-dark table-hover table-sm align-middle table-compact">
+                <thead><tr><th>Serial</th><th>Name</th><th>Subnet</th><th>Status</th><th class="text-center">Action</th></tr></thead>
+                <tbody>`;
+            devices.forEach(d => {
+                const statusClass = getStatusClass(d.status);
+                let actionHtml = '';
+                if (d.status === 'DEPLOYED') {
+                    actionHtml = `<a href="#" class="badge bg-danger text-decoration-none restart-btn" data-serial="${d.serial}" data-subnet="${d.subnet}" data-bs-toggle="tooltip" title="Restart VPN"><i class="bi bi-arrow-clockwise"></i> Restart</a>`;
+                }
+                tableHtml += `<tr><td>${d.serial}</td><td>${d.name}</td><td>${d.subnet}</td><td><span class="badge ${statusClass}">${d.status}</span></td><td><div class="d-flex justify-content-center">${actionHtml}</div></td></tr>`;
+            });
+            tableHtml += '</tbody></table>';
+            resultsOutput.innerHTML = tableHtml;
+            initializeTooltips();
+        }
+    });
+
+    resultsOutput.addEventListener('click', async (event) => {
+        const actionLink = event.target.closest('.restart-btn');
+        if (actionLink) {
+            event.preventDefault();
+            const serial = actionLink.dataset.serial;
+            const subnet = actionLink.dataset.subnet;
+            const dashboard = document.getElementById('dashboard-select').value;
+
+            actionLink.disabled = true;
+            actionLink.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Sending...`;
+
+            const result = await apiCall('/api/m2000/restart', { dashboard, serial, subnet }, false);
+
+            if (result) {
+                alert(result.message);
+            }
+
+            actionLink.disabled = false;
+            actionLink.innerHTML = `<i class="bi bi-arrow-clockwise"></i> Restart`;
+        }
+    });
+</script>
+{% endblock %}