Upload files to "static/js/pages"

static/js/pages/bgp_peer_graph.js

@@ -4,16 +4,66 @@ document.addEventListener('DOMContentLoaded', function () {
     let currentRange = '24h';
 
     const timeRangeButtons = document.querySelectorAll('.btn-group .btn');
+    const customRangeBtn = document.getElementById('customRangeBtn');
+    const startDateInput = document.getElementById('startDate');
+    const endDateInput = document.getElementById('endDate');
+
+    function formatDateForInput(date) {
+        const pad = (num) => num.toString().padStart(2, '0');
+        const year = date.getFullYear();
+        const month = pad(date.getMonth() + 1);
+        const day = pad(date.getDate());
+        const hours = pad(date.getHours());
+        const minutes = pad(date.getMinutes());
+        return `${year}-${month}-${day}T${hours}:${minutes}`;
+    }
+
+    function updateDateInputs(range) {
+        const endDate = new Date();
+        let startDate = new Date();
+        
+        switch (range) {
+            case '24h':
+                startDate.setHours(startDate.getHours() - 24);
+                break;
+            case '7d':
+                startDate.setDate(startDate.getDate() - 7);
+                break;
+            case '30d':
+                startDate.setDate(startDate.getDate() - 30);
+                break;
+            case '90d':
+                startDate.setDate(startDate.getDate() - 90);
+                break;
+        }
+
+        startDateInput.value = formatDateForInput(startDate);
+        endDateInput.value = formatDateForInput(endDate);
+    }
     
     timeRangeButtons.forEach(button => {
         button.addEventListener('click', () => {
             currentRange = button.getAttribute('data-range');
             timeRangeButtons.forEach(btn => btn.classList.remove('active'));
             button.classList.add('active');
-            fetchDataAndRenderChart(currentRange);
+            
+            updateDateInputs(currentRange);
+            fetchDataAndRenderChart({ range: currentRange });
         });
     });
 
+    customRangeBtn.addEventListener('click', () => {
+        const startDate = startDateInput.value;
+        const endDate = endDateInput.value;
+
+        if (startDate && endDate) {
+            timeRangeButtons.forEach(btn => btn.classList.remove('active'));
+            fetchDataAndRenderChart({ startDate, endDate });
+        } else {
+            alert('Please select both a start and end date.');
+        }
+    });
+
     function updateChartScale(chartInstance) {
         const visibleDatasets = chartInstance.data.datasets.filter(dataset => !dataset.hidden);
         
@@ -49,9 +99,16 @@ document.addEventListener('DOMContentLoaded', function () {
         chartInstance.update();
     }
 
-    async function fetchDataAndRenderChart(range) {
+    async function fetchDataAndRenderChart(params) {
+        let url = `/bgp/peer/${neighborIp}/history`;
+        if (params.range) {
+            url += `?range=${params.range}`;
+        } else if (params.startDate && params.endDate) {
+            url += `?start_date=${params.startDate}&end_date=${params.endDate}`;
+        }
+
         try {
-            const response = await fetch(`/bgp/peer/${neighborIp}/history?range=${range}`);
+            const response = await fetch(url);
             if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
             const data = await response.json();
             renderChart(data);
@@ -183,5 +240,6 @@ document.addEventListener('DOMContentLoaded', function () {
         updateChartScale(chart);
     }
 
-    fetchDataAndRenderChart(currentRange);
+    updateDateInputs(currentRange);
+    fetchDataAndRenderChart({ range: currentRange });
 });