Add static/js/pages/rpki.js

static/js/pages/rpki.js

@@ -0,0 +1,99 @@
+function lookupRpki() {
+    const rpkiInput = document.getElementById('rpkiInput').value;
+    const rpkiOutput = document.getElementById('rpkiOutput');
+    rpkiOutput.innerHTML = 'Looking up...';
+
+    fetch('/rpki/lookup', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ query: rpkiInput }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        rpkiOutput.innerHTML = '';
+
+        if (data.prefixes && data.prefixes.length > 0) {
+            const table = document.createElement('table');
+            table.className = 'table table-borderless';
+
+            const thead = document.createElement('thead');
+            thead.innerHTML = `
+                <tr>
+                    <th>Prefix</th>
+                    <th>Prefix Length</th>
+                    <th>Origin-AS</th>
+                </tr>
+            `;
+            table.appendChild(thead);
+
+            const tbody = document.createElement('tbody');
+            data.prefixes.forEach(pfx => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td>${pfx.prefix}</td>
+                    <td>${pfx.length}</td>
+                    <td>${pfx.as}</td>
+                `;
+                tbody.appendChild(row);
+            });
+            table.appendChild(tbody);
+
+            rpkiOutput.appendChild(table);
+
+            if (data.summary && data.summary.length > 0) {
+                const summaryDiv = document.createElement('div');
+                summaryDiv.style.marginTop = '1rem';
+                summaryDiv.innerHTML = data.summary.join('<br>');
+                rpkiOutput.appendChild(summaryDiv);
+            }
+
+        } else {
+            rpkiOutput.textContent = JSON.stringify(data, null, 2);
+        }
+    })
+    .catch((error) => {
+        rpkiOutput.textContent = 'Error: ' + error;
+    });
+}
+
+function getRpkiStatus() {
+    const rpkiStatusOutput = document.getElementById('rpkiStatusOutput');
+
+    fetch('/rpki/status')
+    .then(response => response.json())
+    .then(servers => {
+        rpkiStatusOutput.innerHTML = ''; 
+
+        if (servers && servers.length > 0) {
+            const list = document.createElement('ul');
+            list.className = 'list-group';
+
+            servers.forEach(server => {
+                const listItem = document.createElement('li');
+                listItem.className = 'list-group-item';
+
+                const statusBadgeClass = server.status === 'Connected' ? 'badge bg-success' : 'badge bg-secondary';
+                
+                listItem.innerHTML = `
+                    Server: <strong>${server.ip_address}:${server.port}</strong>
+                    <span class="${statusBadgeClass} float-end">${server.status}</span>
+                    <br>
+                    <small>Preference: ${server.preference}</small>
+                `;
+                list.appendChild(listItem);
+            });
+            rpkiStatusOutput.appendChild(list);
+        } else {
+            rpkiStatusOutput.innerHTML = '<p>No RPKI cache servers found or could not parse data.</p>';
+        }
+    })
+    .catch((error) => {
+        rpkiStatusOutput.innerHTML = '<p class="text-danger">Error fetching status: ' + error + '</p>';
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    getRpkiStatus();
+});