@hadesz/monitor
Version:
A complete server monitoring system with agents, server and dashboard
207 lines (173 loc) • 4.44 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务器监控面板</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.header {
background: #2c3e50;
color: white;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
padding: 1rem;
max-width: 1400px;
margin: 0 auto;
}
.controls {
background: white;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.chart-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.chart-container {
background: white;
padding: 1rem;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-height: 500px;
}
.chart {
height: 300px;
}
select,
button {
padding: 0.5rem;
margin: 0 0.5rem;
border: 1px solid #ddd;
border-radius: 3px;
}
button {
background: #3498db;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #2980b9;
}
.status-indicator {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.status-online {
background: #2ecc71;
}
.status-offline {
background: #e74c3c;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.info-card {
background: white;
padding: 1rem;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.info-card h4 {
margin-bottom: 0.5rem;
color: #2c3e50;
}
.info-value {
font-size: 1.5rem;
font-weight: bold;
color: #3498db;
}
.info-label {
font-size: 0.8rem;
color: #7f8c8d;
}
</style>
</head>
<body>
<div class="header">
<h1>服务器监控面板</h1>
<div id="currentTime"></div>
</div>
<div class="container">
<div class="controls">
<label>选择服务器:</label>
<select id="agentSelect">
<option value="">加载中...</option>
</select>
<label>时间范围:</label>
<select id="timeRange">
<option value="1">最近1小时</option>
<option value="6">最近6小时</option>
<option value="24">最近24小时</option>
<option value="168">最近1周</option>
<option value="720">最近30天</option>
</select>
<button onclick="refreshData()">刷新</button>
<span id="status"></span>
</div>
<!-- 系统信息卡片 -->
<div class="info-grid" id="systemInfo">
<!-- 动态生成的系统信息卡片 -->
</div>
<div class="chart-grid">
<div class="chart-container">
<h3>CPU 使用率 (%)</h3>
<canvas id="cpuChart" class="chart"></canvas>
</div>
<div class="chart-container">
<h3>内存使用率 (%)</h3>
<canvas id="memoryChart" class="chart"></canvas>
</div>
<div class="chart-container">
<h3>磁盘使用率 (%)</h3>
<canvas id="diskChart" class="chart"></canvas>
</div>
<div class="chart-container">
<h3>系统负载</h3>
<canvas id="loadChart" class="chart"></canvas>
</div>
<div class="chart-container">
<h3>磁盘 IO (KB/s)</h3>
<canvas id="diskIOChart" class="chart"></canvas>
</div>
<div class="chart-container">
<h3>网络 IO (KB/s)</h3>
<canvas id="networkChart" class="chart"></canvas>
</div>
<!-- 新增 Docker 相关图表 -->
<div class="chart-container">
<h3>Docker 容器状态</h3>
<canvas id="dockerContainersChart" class="chart"></canvas>
</div>
<div class="chart-container">
<h3>进程状态</h3>
<canvas id="processesChart" class="chart"></canvas>
</div>
</div>
</div>
<script src="dashboard.js"></script>
</body>
</html>