mirror of
				https://github.com/usmannasir/cyberpanel.git
				synced 2025-10-31 10:26:01 +01:00 
			
		
		
		
	Initial commit for v2.4.3
This commit is contained in:
		
							
								
								
									
										143
									
								
								websiteFunctions/static/js/resource-monitoring.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										143
									
								
								websiteFunctions/static/js/resource-monitoring.js
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,143 @@ | ||||
| // Resource Monitoring | ||||
| let cpuChart, memoryChart, diskChart; | ||||
| let cpuData = [], memoryData = [], diskData = []; | ||||
| const maxDataPoints = 30; | ||||
|  | ||||
| function initializeCharts() { | ||||
|     const chartOptions = { | ||||
|         responsive: true, | ||||
|         maintainAspectRatio: false, | ||||
|         scales: { | ||||
|             y: { | ||||
|                 beginAtZero: true, | ||||
|                 max: 100, | ||||
|                 ticks: { | ||||
|                     callback: function(value) { | ||||
|                         return value + '%'; | ||||
|                     } | ||||
|                 } | ||||
|             } | ||||
|         }, | ||||
|         animation: { | ||||
|             duration: 750 | ||||
|         } | ||||
|     }; | ||||
|  | ||||
|     // CPU Chart | ||||
|     const cpuCtx = document.getElementById('cpuChart').getContext('2d'); | ||||
|     cpuChart = new Chart(cpuCtx, { | ||||
|         type: 'line', | ||||
|         data: { | ||||
|             labels: [], | ||||
|             datasets: [{ | ||||
|                 label: 'CPU Usage (%)', | ||||
|                 data: [], | ||||
|                 borderColor: '#2563eb', | ||||
|                 backgroundColor: 'rgba(37, 99, 235, 0.1)', | ||||
|                 borderWidth: 2, | ||||
|                 fill: true, | ||||
|                 tension: 0.4 | ||||
|             }] | ||||
|         }, | ||||
|         options: chartOptions | ||||
|     }); | ||||
|  | ||||
|     // Memory Chart | ||||
|     const memoryCtx = document.getElementById('memoryChart').getContext('2d'); | ||||
|     memoryChart = new Chart(memoryCtx, { | ||||
|         type: 'line', | ||||
|         data: { | ||||
|             labels: [], | ||||
|             datasets: [{ | ||||
|                 label: 'Memory Usage (%)', | ||||
|                 data: [], | ||||
|                 borderColor: '#00b894', | ||||
|                 backgroundColor: 'rgba(0, 184, 148, 0.1)', | ||||
|                 borderWidth: 2, | ||||
|                 fill: true, | ||||
|                 tension: 0.4 | ||||
|             }] | ||||
|         }, | ||||
|         options: chartOptions | ||||
|     }); | ||||
|  | ||||
|     // Disk Chart | ||||
|     const diskCtx = document.getElementById('diskChart').getContext('2d'); | ||||
|     diskChart = new Chart(diskCtx, { | ||||
|         type: 'line', | ||||
|         data: { | ||||
|             labels: [], | ||||
|             datasets: [{ | ||||
|                 label: 'Disk Usage (%)', | ||||
|                 data: [], | ||||
|                 borderColor: '#ff9800', | ||||
|                 backgroundColor: 'rgba(255, 152, 0, 0.1)', | ||||
|                 borderWidth: 2, | ||||
|                 fill: true, | ||||
|                 tension: 0.4 | ||||
|             }] | ||||
|         }, | ||||
|         options: chartOptions | ||||
|     }); | ||||
| } | ||||
|  | ||||
| function updateCharts(data) { | ||||
|     const now = new Date(); | ||||
|     const timeLabel = now.toLocaleTimeString(); | ||||
|  | ||||
|     // Update CPU Chart | ||||
|     cpuData.push(data.cpu_usage); | ||||
|     if (cpuData.length > maxDataPoints) cpuData.shift(); | ||||
|     cpuChart.data.labels.push(timeLabel); | ||||
|     if (cpuChart.data.labels.length > maxDataPoints) cpuChart.data.labels.shift(); | ||||
|     cpuChart.data.datasets[0].data = cpuData; | ||||
|     cpuChart.update('none'); // Use 'none' mode for better performance | ||||
|  | ||||
|     // Update Memory Chart | ||||
|     memoryData.push(data.memory_usage); | ||||
|     if (memoryData.length > maxDataPoints) memoryData.shift(); | ||||
|     memoryChart.data.labels.push(timeLabel); | ||||
|     if (memoryChart.data.labels.length > maxDataPoints) memoryChart.data.labels.shift(); | ||||
|     memoryChart.data.datasets[0].data = memoryData; | ||||
|     memoryChart.update('none'); | ||||
|  | ||||
|     // Update Disk Chart | ||||
|     diskData.push(data.disk_percent); | ||||
|     if (diskData.length > maxDataPoints) diskData.shift(); | ||||
|     diskChart.data.labels.push(timeLabel); | ||||
|     if (diskChart.data.labels.length > maxDataPoints) diskChart.data.labels.shift(); | ||||
|     diskChart.data.datasets[0].data = diskData; | ||||
|     diskChart.update('none'); | ||||
| } | ||||
|  | ||||
| function fetchResourceUsage() { | ||||
|     $.ajax({ | ||||
|         url: '/websites/get_website_resources/', | ||||
|         type: 'POST', | ||||
|         data: JSON.stringify({ | ||||
|             'domain': $('#domainNamePage').text().trim() | ||||
|         }), | ||||
|         contentType: 'application/json', | ||||
|         success: function(data) { | ||||
|             if (data.status === 1) { | ||||
|                 updateCharts(data); | ||||
|             } else { | ||||
|                 console.error('Error fetching resource data:', data.error_message); | ||||
|             } | ||||
|         }, | ||||
|         error: function(xhr, status, error) { | ||||
|             console.error('Failed to fetch resource usage:', error); | ||||
|         } | ||||
|     }); | ||||
| } | ||||
|  | ||||
| // Initialize charts when the page loads | ||||
| $(document).ready(function() { | ||||
|     if (document.getElementById('cpuChart')) { | ||||
|         initializeCharts(); | ||||
|         // Fetch resource usage every 5 seconds | ||||
|         setInterval(fetchResourceUsage, 5000); | ||||
|         // Initial fetch | ||||
|         fetchResourceUsage(); | ||||
|     } | ||||
| });  | ||||
		Reference in New Issue
	
	Block a user