134 lines
4.8 KiB
JavaScript
134 lines
4.8 KiB
JavaScript
|
||
// Helper - return the value of the ?host= query‑string
|
||
function getSelectedHost() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
return params.get('host') || '';
|
||
}
|
||
|
||
// Build the endpoints list when we receive data
|
||
socket.on('client_hostnames', rawMsg => {
|
||
// rawMsg is the JSON string that redis-cli prints
|
||
let hosts;
|
||
try {
|
||
hosts = JSON.parse(rawMsg);
|
||
} catch (e) {
|
||
console.warn('Could not parse client_hostnames message', rawMsg);
|
||
return;
|
||
}
|
||
|
||
// Sanity‑check
|
||
if (!Array.isArray(hosts)) { return; }
|
||
|
||
const ol = document.getElementById('endpointList');
|
||
const selected = getSelectedHost().toLowerCase();
|
||
|
||
// Clear old list
|
||
ol.innerHTML = '';
|
||
|
||
hosts.forEach(host => {
|
||
const li = document.createElement('li');
|
||
const a = document.createElement('a');
|
||
a.href = '?host=' + encodeURIComponent(host);
|
||
a.textContent = host;
|
||
if (host.toLowerCase() === selected) {
|
||
a.classList.add('active');
|
||
}
|
||
li.appendChild(a);
|
||
ol.appendChild(li);
|
||
});
|
||
});
|
||
|
||
/* -----------------------------------------------
|
||
2. (Optional) Re‑build the list if the URL changes
|
||
----------------------------------------------- */
|
||
window.addEventListener('popstate', () => {
|
||
// When the user navigates via back/forward the page
|
||
// still holds the old list, so we rebuild it.
|
||
const currentSelected = getSelectedHost().toLowerCase();
|
||
const anchors = document.querySelectorAll('#endpointList a');
|
||
anchors.forEach(a => {
|
||
a.classList.toggle('active', a.textContent.toLowerCase() === currentSelected);
|
||
});
|
||
});
|
||
|
||
(function () {
|
||
/* ----------------------------------------------------------
|
||
Use the socket that system_metrics.js already created.
|
||
If for some reason it isn’t defined, create a new one.
|
||
---------------------------------------------------------- */
|
||
const sock = typeof socket !== 'undefined' ? socket : io();
|
||
|
||
/* ----------------------------------------------------------
|
||
Return the hostname that is currently selected in the URL
|
||
(the value of the “?host=…” query string).
|
||
---------------------------------------------------------- */
|
||
function getSelectedHost() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
return params.get('host') || '';
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
Populate <ul id="endpointList"> with <li><a> items.
|
||
---------------------------------------------------------- */
|
||
function buildList(hosts) {
|
||
const ol = document.getElementById('endpointList');
|
||
const selected = getSelectedHost().toLowerCase();
|
||
|
||
ol.innerHTML = ''; // clear old items
|
||
|
||
hosts.forEach(host => {
|
||
const li = document.createElement('li');
|
||
const a = document.createElement('a');
|
||
a.href = '?host=' + encodeURIComponent(host);
|
||
a.textContent = host;
|
||
if (host.toLowerCase() === selected) a.classList.add('active');
|
||
li.appendChild(a);
|
||
ol.appendChild(li);
|
||
});
|
||
}
|
||
|
||
/* ----------------------------------------------------------
|
||
Listen for the “client_hostnames” event from the server.
|
||
The payload can be:
|
||
– a JSON string → parse it
|
||
– a plain array → use it directly
|
||
– an object with a .data array (fallback)
|
||
---------------------------------------------------------- */
|
||
sock.on('client_hostnames', payload => {
|
||
let hosts;
|
||
|
||
if (typeof payload === 'string') {
|
||
try {
|
||
hosts = JSON.parse(payload);
|
||
} catch (e) {
|
||
console.warn('client_hostnames message is not JSON:', payload);
|
||
return;
|
||
}
|
||
} else if (Array.isArray(payload)) {
|
||
hosts = payload;
|
||
} else if (payload && Array.isArray(payload.data)) {
|
||
hosts = payload.data;
|
||
} else {
|
||
console.warn('client_hostnames payload format unrecognised:', payload);
|
||
return;
|
||
}
|
||
|
||
if (!Array.isArray(hosts)) {
|
||
console.warn('client_hostnames payload did not resolve to an array:', hosts);
|
||
return;
|
||
}
|
||
|
||
buildList(hosts);
|
||
});
|
||
|
||
/* ----------------------------------------------------------
|
||
When the user navigates via the back/forward buttons,
|
||
re‑apply the “active” class to the correct link.
|
||
---------------------------------------------------------- */
|
||
window.addEventListener('popstate', () => {
|
||
const selected = getSelectedHost().toLowerCase();
|
||
document.querySelectorAll('#endpointList a').forEach(a => {
|
||
a.classList.toggle('active', a.textContent.toLowerCase() === selected);
|
||
});
|
||
});
|
||
})(); |