1234
This commit is contained in:
parent
ee32c158df
commit
5fa3e78dd9
30
apps.py
30
apps.py
@ -1,8 +1,26 @@
|
|||||||
#展示Computer_status对象中的状态，以时间为轴，绘制折线图
|
from flask import Flask, jsonify, request
|
||||||
#
|
from datetime import datetime
|
||||||
# 可以选择实时展示，每隔1s发送请求，服务器调用Computer_status.get_data_json_30s，返回json
|
from your_database_module import ComputerStatus # 请根据实际路径引入你的数据库模块
|
||||||
#
|
|
||||||
# 可以选择查看指定时间端的历史信息，发送请求,包含开始时间和结束时间，服务器调用Computer_status.get_data_json，返回json
|
app = Flask(__name__)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/get_data_json_30s', methods=['GET'])
|
||||||
|
def get_data_json_30s():
|
||||||
|
# 获取最新30秒的数据
|
||||||
|
data = ComputerStatus.get_data_json_30s()
|
||||||
|
return jsonify(data)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route('/get_data_json', methods=['GET'])
|
||||||
|
def get_data_json():
|
||||||
|
time_start = int(request.args.get('time_start'))
|
||||||
|
time_end = int(request.args.get('time_end'))
|
||||||
|
|
||||||
|
# 获取指定时间范围的数据
|
||||||
|
data = ComputerStatus.get_data_json(time_start, time_end)
|
||||||
|
return jsonify(data)
|
||||||
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
pass
|
app.run(debug=True)
|
||||||
|
|||||||
237
templates/index.html
Normal file
237
templates/index.html
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Server Monitoring Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.status div {
|
||||||
|
width: 30%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.status div h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.chart-container {
|
||||||
|
width: 80%;
|
||||||
|
margin: 30px auto;
|
||||||
|
}
|
||||||
|
#time-range {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
#time-range input {
|
||||||
|
width: 48%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Server Monitoring Dashboard</h1>
|
||||||
|
|
||||||
|
<!-- Display basic system status -->
|
||||||
|
<div class="status">
|
||||||
|
<div>
|
||||||
|
<h3>CPU Usage</h3>
|
||||||
|
<p id="cpuUsage">Loading...</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Memory Usage</h3>
|
||||||
|
<p id="memoryUsage">Loading...</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>Disk Usage</h3>
|
||||||
|
<p id="diskUsage">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- GPU Information -->
|
||||||
|
<h2>GPU Information</h2>
|
||||||
|
<div id="gpuInfo">Loading...</div>
|
||||||
|
|
||||||
|
<!-- Time Range for Historical Data -->
|
||||||
|
<div id="time-range">
|
||||||
|
<input type="datetime-local" id="start-time">
|
||||||
|
<input type="datetime-local" id="end-time">
|
||||||
|
<button onclick="getHistoricalData()">Get Historical Data</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Real-time Monitoring Charts -->
|
||||||
|
<div class="chart-container">
|
||||||
|
<h3>Real-Time Data (Last 30s)</h3>
|
||||||
|
<canvas id="cpuChart"></canvas>
|
||||||
|
<canvas id="memoryChart"></canvas>
|
||||||
|
<canvas id="diskChart"></canvas>
|
||||||
|
<canvas id="gpuChart"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Fetch real-time data every second and update the UI
|
||||||
|
function fetchRealTimeData() {
|
||||||
|
fetch('/get_data_json_30s')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
updateSystemStatus(data);
|
||||||
|
updateCharts(data);
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the system status on the page
|
||||||
|
function updateSystemStatus(data) {
|
||||||
|
document.getElementById('cpuUsage').innerText = data.cpu_usage + '%';
|
||||||
|
document.getElementById('memoryUsage').innerText = data.memory_usage + '%';
|
||||||
|
document.getElementById('diskUsage').innerText = data.disk_usage + '%';
|
||||||
|
|
||||||
|
let gpuInfoHtml = '';
|
||||||
|
data.gpu_info.forEach(gpu => {
|
||||||
|
gpuInfoHtml += `<h4>${gpu.name}</h4>
|
||||||
|
<p>Memory Used: ${gpu.memory_used} MB</p>
|
||||||
|
<p>Memory Total: ${gpu.memory_total} MB</p>
|
||||||
|
<p>GPU Utilization: ${gpu.gpu_util}%</p>
|
||||||
|
<p>GPU Fan Speed: ${gpu.gpu_fan}%</p>`;
|
||||||
|
});
|
||||||
|
document.getElementById('gpuInfo').innerHTML = gpuInfoHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update charts with real-time data
|
||||||
|
let cpuChart, memoryChart, diskChart, gpuChart;
|
||||||
|
|
||||||
|
function initializeCharts() {
|
||||||
|
let ctxCpu = document.getElementById('cpuChart').getContext('2d');
|
||||||
|
let ctxMemory = document.getElementById('memoryChart').getContext('2d');
|
||||||
|
let ctxDisk = document.getElementById('diskChart').getContext('2d');
|
||||||
|
let ctxGpu = document.getElementById('gpuChart').getContext('2d');
|
||||||
|
|
||||||
|
cpuChart = new Chart(ctxCpu, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'CPU Usage (%)',
|
||||||
|
data: [],
|
||||||
|
borderColor: 'rgba(255, 99, 132, 1)',
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
memoryChart = new Chart(ctxMemory, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Memory Usage (%)',
|
||||||
|
data: [],
|
||||||
|
borderColor: 'rgba(54, 162, 235, 1)',
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
diskChart = new Chart(ctxDisk, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Disk Usage (%)',
|
||||||
|
data: [],
|
||||||
|
borderColor: 'rgba(255, 159, 64, 1)',
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
gpuChart = new Chart(ctxGpu, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
labels: [],
|
||||||
|
datasets: [{
|
||||||
|
label: 'GPU Usage (%)',
|
||||||
|
data: [],
|
||||||
|
borderColor: 'rgba(75, 192, 192, 1)',
|
||||||
|
fill: false
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the charts with new data
|
||||||
|
function updateCharts(data) {
|
||||||
|
let timestamp = new Date(data.time * 1000);
|
||||||
|
let timeString = timestamp.toLocaleTimeString();
|
||||||
|
|
||||||
|
// Add new data points
|
||||||
|
cpuChart.data.labels.push(timeString);
|
||||||
|
cpuChart.data.datasets[0].data.push(data.cpu_usage);
|
||||||
|
if (cpuChart.data.labels.length > 30) {
|
||||||
|
cpuChart.data.labels.shift();
|
||||||
|
cpuChart.data.datasets[0].data.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
memoryChart.data.labels.push(timeString);
|
||||||
|
memoryChart.data.datasets[0].data.push(data.memory_usage);
|
||||||
|
if (memoryChart.data.labels.length > 30) {
|
||||||
|
memoryChart.data.labels.shift();
|
||||||
|
memoryChart.data.datasets[0].data.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
diskChart.data.labels.push(timeString);
|
||||||
|
diskChart.data.datasets[0].data.push(data.disk_usage);
|
||||||
|
if (diskChart.data.labels.length > 30) {
|
||||||
|
diskChart.data.labels.shift();
|
||||||
|
diskChart.data.datasets[0].data.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
gpuChart.data.labels.push(timeString);
|
||||||
|
gpuChart.data.datasets[0].data.push(data.gpu_usage);
|
||||||
|
if (gpuChart.data.labels.length > 30) {
|
||||||
|
gpuChart.data.labels.shift();
|
||||||
|
gpuChart.data.datasets[0].data.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
cpuChart.update();
|
||||||
|
memoryChart.update();
|
||||||
|
diskChart.update();
|
||||||
|
gpuChart.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch historical data based on the selected time range
|
||||||
|
function getHistoricalData() {
|
||||||
|
let startTime = new Date(document.getElementById('start-time').value).getTime() / 1000;
|
||||||
|
let endTime = new Date(document.getElementById('end-time').value).getTime() / 1000;
|
||||||
|
|
||||||
|
fetch(`/get_data_json?time_start=${startTime}&time_end=${endTime}`)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
updateCharts(data);
|
||||||
|
})
|
||||||
|
.catch(err => console.log(err));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the charts and start real-time data fetching
|
||||||
|
window.onload = function() {
|
||||||
|
initializeCharts();
|
||||||
|
setInterval(fetchRealTimeData, 1000); // Fetch data every second
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user