80 lines
3.8 KiB
HTML
80 lines
3.8 KiB
HTML
{% 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 %} |