chore: sync local changes (2026-03-12)
This commit is contained in:
@@ -1,110 +1,110 @@
|
||||
# 萌芽监控面板 - 前端
|
||||
|
||||
## 概述
|
||||
服务器监控面板前端应用，使用 React + TypeScript + Vite 构建。
|
||||
|
||||
## 功能特性
|
||||
- 🖥️ 多服务器监控支持
|
||||
- 📊 实时数据展示（CPU、内存、存储、GPU）
|
||||
- 🔄 自动刷新（2秒轮询）
|
||||
- 📱 响应式设计
|
||||
- 🎨 白色柔和风格界面
|
||||
- 💾 本地存储配置
|
||||
|
||||
## 开发
|
||||
|
||||
### 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
访问 http://localhost:2929
|
||||
|
||||
### 构建生产版本
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
生产文件将输出到 `dist` 目录
|
||||
|
||||
### 预览生产版本
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
|
||||
### 添加服务器
|
||||
1. 点击右上角"添加服务器"按钮
|
||||
2. 输入服务器名称（如：生产服务器1）
|
||||
3. 输入服务器地址（如：http://192.168.1.100:9292）
|
||||
4. 点击"添加"按钮
|
||||
|
||||
### 查看详情
|
||||
点击服务器卡片上的"查看详情"按钮，可以查看完整的系统信息：
|
||||
- 系统信息（主机名、操作系统、内核、架构、运行时间）
|
||||
- CPU 详细信息（型号、核心数、使用率、负载）
|
||||
- 内存详细信息（总容量、已使用、可用、使用率）
|
||||
- 存储详细信息（挂载点、容量、使用情况）
|
||||
- GPU 信息（名称、显存、利用率）
|
||||
|
||||
### 移除服务器
|
||||
点击服务器卡片右上角的"×"按钮，确认后即可移除。
|
||||
|
||||
## 项目结构
|
||||
```
|
||||
src/
|
||||
├── api/ # API 调用
|
||||
│ └── monitor.ts # 监控 API
|
||||
├── components/ # React 组件
|
||||
│ ├── ServerCard/ # 服务器卡片组件
|
||||
│ └── ServerDetail/ # 服务器详情弹窗
|
||||
├── hooks/ # 自定义 Hooks
|
||||
│ └── useServerMonitor.ts # 服务器监控 Hook
|
||||
├── types/ # TypeScript 类型定义
|
||||
│ └── index.ts
|
||||
├── utils/ # 工具函数
|
||||
│ ├── format.ts # 格式化函数
|
||||
│ └── storage.ts # 本地存储
|
||||
├── App.tsx # 主应用组件
|
||||
├── App.css # 主应用样式
|
||||
├── main.tsx # 应用入口
|
||||
└── index.css # 全局样式
|
||||
```
|
||||
|
||||
## 配置说明
|
||||
|
||||
### 修改端口
|
||||
编辑 `vite.config.ts` 文件中的 `server.port` 配置：
|
||||
```typescript
|
||||
server: {
|
||||
port: 2929, // 修改为你想要的端口
|
||||
}
|
||||
```
|
||||
|
||||
### 修改轮询间隔
|
||||
编辑 `src/App.tsx` 文件中的 `useServerMonitor` 第二个参数：
|
||||
```typescript
|
||||
const statuses = useServerMonitor(servers, 2000); // 2000ms = 2秒
|
||||
```
|
||||
|
||||
## 部署
|
||||
|
||||
### 静态文件部署
|
||||
1. 构建项目：`npm run build`
|
||||
2. 将 `dist` 目录部署到 Web 服务器（如 Nginx、Apache）
|
||||
3. 或使用静态托管服务（如 Vercel、Netlify）
|
||||
|
||||
### 桌面应用
|
||||
可以使用 Electron 或 Tauri 将前端打包成桌面应用：
|
||||
- Electron: https://www.electronjs.org/
|
||||
- Tauri: https://tauri.app/
|
||||
|
||||
## 注意事项
|
||||
- 确保后端服务器已启动并可访问
|
||||
- 后端服务器需要配置 CORS 允许跨域访问
|
||||
- 服务器地址需要包含协议（http:// 或 https://）
|
||||
- 本地存储的服务器配置保存在浏览器 localStorage 中
|
||||
# 萌芽监控面板 - 前端
|
||||
|
||||
## 概述
|
||||
服务器监控面板前端应用，使用 React + TypeScript + Vite 构建。
|
||||
|
||||
## 功能特性
|
||||
- 🖥️ 多服务器监控支持
|
||||
- 📊 实时数据展示（CPU、内存、存储、GPU）
|
||||
- 🔄 自动刷新（2秒轮询）
|
||||
- 📱 响应式设计
|
||||
- 🎨 白色柔和风格界面
|
||||
- 💾 本地存储配置
|
||||
|
||||
## 开发
|
||||
|
||||
### 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
访问 http://localhost:2929
|
||||
|
||||
### 构建生产版本
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
生产文件将输出到 `dist` 目录
|
||||
|
||||
### 预览生产版本
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 使用说明
|
||||
|
||||
### 添加服务器
|
||||
1. 点击右上角"添加服务器"按钮
|
||||
2. 输入服务器名称（如：生产服务器1）
|
||||
3. 输入服务器地址（如：http://192.168.1.100:9292）
|
||||
4. 点击"添加"按钮
|
||||
|
||||
### 查看详情
|
||||
点击服务器卡片上的"查看详情"按钮，可以查看完整的系统信息：
|
||||
- 系统信息（主机名、操作系统、内核、架构、运行时间）
|
||||
- CPU 详细信息（型号、核心数、使用率、负载）
|
||||
- 内存详细信息（总容量、已使用、可用、使用率）
|
||||
- 存储详细信息（挂载点、容量、使用情况）
|
||||
- GPU 信息（名称、显存、利用率）
|
||||
|
||||
### 移除服务器
|
||||
点击服务器卡片右上角的"×"按钮，确认后即可移除。
|
||||
|
||||
## 项目结构
|
||||
```
|
||||
src/
|
||||
├── api/ # API 调用
|
||||
│ └── monitor.ts # 监控 API
|
||||
├── components/ # React 组件
|
||||
│ ├── ServerCard/ # 服务器卡片组件
|
||||
│ └── ServerDetail/ # 服务器详情弹窗
|
||||
├── hooks/ # 自定义 Hooks
|
||||
│ └── useServerMonitor.ts # 服务器监控 Hook
|
||||
├── types/ # TypeScript 类型定义
|
||||
│ └── index.ts
|
||||
├── utils/ # 工具函数
|
||||
│ ├── format.ts # 格式化函数
|
||||
│ └── storage.ts # 本地存储
|
||||
├── App.tsx # 主应用组件
|
||||
├── App.css # 主应用样式
|
||||
├── main.tsx # 应用入口
|
||||
└── index.css # 全局样式
|
||||
```
|
||||
|
||||
## 配置说明
|
||||
|
||||
### 修改端口
|
||||
编辑 `vite.config.ts` 文件中的 `server.port` 配置：
|
||||
```typescript
|
||||
server: {
|
||||
port: 2929, // 修改为你想要的端口
|
||||
}
|
||||
```
|
||||
|
||||
### 修改轮询间隔
|
||||
编辑 `src/App.tsx` 文件中的 `useServerMonitor` 第二个参数：
|
||||
```typescript
|
||||
const statuses = useServerMonitor(servers, 2000); // 2000ms = 2秒
|
||||
```
|
||||
|
||||
## 部署
|
||||
|
||||
### 静态文件部署
|
||||
1. 构建项目：`npm run build`
|
||||
2. 将 `dist` 目录部署到 Web 服务器（如 Nginx、Apache）
|
||||
3. 或使用静态托管服务（如 Vercel、Netlify）
|
||||
|
||||
### 桌面应用
|
||||
可以使用 Electron 或 Tauri 将前端打包成桌面应用：
|
||||
- Electron: https://www.electronjs.org/
|
||||
- Tauri: https://tauri.app/
|
||||
|
||||
## 注意事项
|
||||
- 确保后端服务器已启动并可访问
|
||||
- 后端服务器需要配置 CORS 允许跨域访问
|
||||
- 服务器地址需要包含协议（http:// 或 https://）
|
||||
- 本地存储的服务器配置保存在浏览器 localStorage 中
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||
<link rel="apple-touch-icon" href="/logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#1a1a2e" />
|
||||
<meta name="description" content="服务器监控面板 - 萌芽监控" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="萌芽监控" />
|
||||
<title>萌芽监控面板</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
4457
mengyamonitor-frontend/package-lock.json
generated
4457
mengyamonitor-frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -10,6 +10,9 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
@@ -25,6 +28,7 @@
|
||||
"globals": "^16.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.46.4",
|
||||
"vite": "^7.2.4"
|
||||
"vite": "^7.2.4",
|
||||
"vite-plugin-pwa": "^1.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
16
mengyamonitor-frontend/public/logo.svg
Normal file
16
mengyamonitor-frontend/public/logo.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#1a1a2e"/>
|
||||
<stop offset="100%" style="stop-color:#16213e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="leaf" x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#4ecca3"/>
|
||||
<stop offset="100%" style="stop-color:#2d8f7a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="512" height="512" rx="96" fill="url(#bg)"/>
|
||||
<path fill="url(#leaf)" d="M256 96c-20 80-80 160-80 240 0 53 35.8 96 80 96s80-43 80-96c0-80-60-160-80-240z"/>
|
||||
<path fill="url(#leaf)" opacity=".9" d="M256 96c20 80 60 160 60 240 0 53-35.8 96-80 96s-80-43-80-96c0-80 40-160 60-240z"/>
|
||||
<ellipse cx="256" cy="336" rx="48" ry="24" fill="url(#leaf)" opacity=".7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 867 B |
@@ -16,25 +16,87 @@
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-light);
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-main);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-weight: 400;
|
||||
gap: 0.75rem;
|
||||
font-weight: 600;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.app-logo {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: var(--surface-color);
|
||||
color: var(--text-main);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.5rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background: var(--bg-color);
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-show-header {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
z-index: 1000;
|
||||
opacity: 0.5;
|
||||
transition: all 0.2s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-show-header:hover {
|
||||
opacity: 1;
|
||||
background: var(--surface-color);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: scale(1.1);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
@@ -163,16 +225,7 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.server-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.add-form {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.add-form input {
|
||||
min-width: 100%;
|
||||
.header-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,34 +1,80 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import type { ServerConfig } from './types';
|
||||
import { loadServers, saveServers, removeServer } from './utils/storage';
|
||||
import { loadServers, saveServers, removeServer, exportServersToClipboard, importServersFromClipboard } from './utils/storage';
|
||||
import { useServerMonitor } from './hooks/useServerMonitor';
|
||||
import { ServerCard } from './components/ServerCard/ServerCard';
|
||||
import { ServerDetail } from './components/ServerDetail/ServerDetail';
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import type { DragEndEvent } from '@dnd-kit/core';
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
rectSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import './App.css';
|
||||
|
||||
const formatServerUrl = (url: string) => {
|
||||
let formatted = url.trim();
|
||||
|
||||
// Fix common typo .op -> .top based on user requirement
|
||||
if (formatted.endsWith('.op')) {
|
||||
formatted = formatted.slice(0, -3) + '.top';
|
||||
}
|
||||
|
||||
if (formatted && !/^https?:\/\//i.test(formatted)) {
|
||||
return `http://${formatted}`;
|
||||
}
|
||||
return formatted;
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [servers, setServers] = useState<ServerConfig[]>([]);
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [selectedServerId, setSelectedServerId] = useState<string | null>(null);
|
||||
const [newServerForm, setNewServerForm] = useState({ name: '', url: '' });
|
||||
const [showHeader, setShowHeader] = useState(true);
|
||||
|
||||
const statuses = useServerMonitor(servers, 2000);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const loaded = loadServers();
|
||||
setServers(loaded);
|
||||
}, []);
|
||||
|
||||
const handleUrlBlur = () => {
|
||||
const formatted = formatServerUrl(newServerForm.url);
|
||||
if (formatted !== newServerForm.url) {
|
||||
setNewServerForm(prev => ({ ...prev, url: formatted }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddServer = () => {
|
||||
if (!newServerForm.name || !newServerForm.url) {
|
||||
alert('请填写服务器名称和地址');
|
||||
return;
|
||||
}
|
||||
|
||||
const formattedUrl = formatServerUrl(newServerForm.url);
|
||||
|
||||
const newServer: ServerConfig = {
|
||||
id: Date.now().toString(),
|
||||
name: newServerForm.name,
|
||||
url: newServerForm.url,
|
||||
url: formattedUrl,
|
||||
enabled: true,
|
||||
};
|
||||
|
||||
@@ -51,20 +97,94 @@ function App() {
|
||||
setSelectedServerId(serverId);
|
||||
};
|
||||
|
||||
const handleExportServers = async () => {
|
||||
try {
|
||||
await exportServersToClipboard();
|
||||
alert('服务器配置已复制到剪贴板！');
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : '导出失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleImportServers = async () => {
|
||||
if (!confirm('导入服务器配置将添加到现有服务器列表中，是否继续？')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const importedServers = await importServersFromClipboard();
|
||||
const updated = [...servers, ...importedServers];
|
||||
setServers(updated);
|
||||
saveServers(updated);
|
||||
alert(`成功导入 ${importedServers.length} 个服务器配置！`);
|
||||
} catch (error) {
|
||||
alert(error instanceof Error ? error.message : '导入失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
setServers((items) => {
|
||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
||||
const newIndex = items.findIndex((item) => item.id === over.id);
|
||||
const newOrder = arrayMove(items, oldIndex, newIndex);
|
||||
saveServers(newOrder);
|
||||
return newOrder;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const selectedStatus = selectedServerId ? statuses[selectedServerId] : null;
|
||||
const selectedServer = servers.find(s => s.id === selectedServerId);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="app-header">
|
||||
<h1>
|
||||
<img className="app-logo" src="/logo.png" alt="萌芽监控面板" />
|
||||
萌芽监控面板
|
||||
</h1>
|
||||
<button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
|
||||
{showAddForm ? '×' : '+'}
|
||||
{!showHeader && (
|
||||
<button
|
||||
className="btn-show-header"
|
||||
onClick={() => setShowHeader(true)}
|
||||
title="显示导航栏"
|
||||
>
|
||||
👁️
|
||||
</button>
|
||||
)}
|
||||
|
||||
{showHeader && (
|
||||
<header className="app-header">
|
||||
<h1>
|
||||
<img className="app-logo" src="/logo.svg" alt="萌芽监控面板" />
|
||||
萌芽监控面板
|
||||
</h1>
|
||||
<div className="header-actions">
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={() => setShowHeader(false)}
|
||||
title="隐藏导航栏"
|
||||
>
|
||||
👁️
|
||||
</button>
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={handleExportServers}
|
||||
title="导出服务器配置到剪贴板"
|
||||
>
|
||||
📤
|
||||
</button>
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={handleImportServers}
|
||||
title="从剪贴板导入服务器配置"
|
||||
>
|
||||
📥
|
||||
</button>
|
||||
<button className="btn-add" onClick={() => setShowAddForm(!showAddForm)} title={showAddForm ? '取消' : '添加服务器'}>
|
||||
{showAddForm ? '×' : '+'}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
)}
|
||||
|
||||
{showAddForm && (
|
||||
<div className="add-form">
|
||||
@@ -79,6 +199,7 @@ function App() {
|
||||
placeholder="服务器地址 (例如: http://192.168.1.100:9292)"
|
||||
value={newServerForm.url}
|
||||
onChange={(e) => setNewServerForm({ ...newServerForm, url: e.target.value })}
|
||||
onBlur={handleUrlBlur}
|
||||
/>
|
||||
<button className="btn-submit" onClick={handleAddServer}>
|
||||
添加
|
||||
@@ -93,26 +214,34 @@ function App() {
|
||||
<p className="hint">点击右上角的"添加服务器"按钮开始使用</p>
|
||||
</div>
|
||||
) : (
|
||||
servers.map((server) => {
|
||||
const status = statuses[server.id];
|
||||
// Calculate storage usage (max of all mounts)
|
||||
const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
|
||||
|
||||
return (
|
||||
<ServerCard
|
||||
key={server.id}
|
||||
server={server}
|
||||
online={status?.online || false}
|
||||
metrics={status?.metrics}
|
||||
cpuUsage={status?.metrics?.cpu.usagePercent || 0}
|
||||
memoryUsage={status?.metrics?.memory.usedPercent || 0}
|
||||
storageUsage={storageUsage} // Pass max storage usage
|
||||
uptime={status?.metrics?.uptimeSeconds}
|
||||
onDetail={handleShowDetail}
|
||||
onRemove={handleRemoveServer}
|
||||
/>
|
||||
);
|
||||
})
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={servers.map((s) => s.id)} strategy={rectSortingStrategy}>
|
||||
{servers.map((server) => {
|
||||
const status = statuses[server.id];
|
||||
// Calculate storage usage (max of all mounts)
|
||||
const storageUsage = status?.metrics?.storage?.reduce((max, s) => Math.max(max, s.usedPercent), 0) || 0;
|
||||
|
||||
return (
|
||||
<ServerCard
|
||||
key={server.id}
|
||||
server={server}
|
||||
online={status?.online || false}
|
||||
metrics={status?.metrics}
|
||||
cpuUsage={status?.metrics?.cpu.usagePercent || 0}
|
||||
memoryUsage={status?.metrics?.memory.usedPercent || 0}
|
||||
storageUsage={storageUsage} // Pass max storage usage
|
||||
uptime={status?.metrics?.uptimeSeconds}
|
||||
onDetail={handleShowDetail}
|
||||
onRemove={handleRemoveServer}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,101 +1,101 @@
|
||||
import type { ServerMetrics } from '../types';
|
||||
|
||||
export const fetchServerMetrics = async (serverUrl: string): Promise<ServerMetrics> => {
|
||||
// 测量客户端到服务器的延迟（使用健康检查端点）
|
||||
const clientToServerLatency = await measureLatency(`${serverUrl}/api/health`);
|
||||
|
||||
// 并行请求各个端点
|
||||
const endpoints = [
|
||||
'/api/metrics/cpu',
|
||||
'/api/metrics/memory',
|
||||
'/api/metrics/storage',
|
||||
'/api/metrics/gpu',
|
||||
'/api/metrics/network',
|
||||
'/api/metrics/system',
|
||||
'/api/metrics/docker',
|
||||
'/api/metrics/latency',
|
||||
];
|
||||
|
||||
const results = await Promise.all(
|
||||
endpoints.map(endpoint =>
|
||||
fetch(`${serverUrl}${endpoint}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error(`Failed to fetch ${endpoint}`);
|
||||
return res.json();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(`Error fetching ${endpoint}:`, err);
|
||||
return null;
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
// 合并所有结果
|
||||
const [cpuRes, memRes, storageRes, gpuRes, networkRes, systemRes, dockerRes, latencyRes] = results;
|
||||
|
||||
const system = systemRes?.data || {};
|
||||
const docker = dockerRes?.data || {};
|
||||
const latency = latencyRes?.data || {};
|
||||
|
||||
// 将 docker 数据合并到 system.dockerStats
|
||||
return {
|
||||
hostname: system.hostname || 'Unknown',
|
||||
timestamp: new Date().toISOString(),
|
||||
cpu: cpuRes?.data || {},
|
||||
memory: memRes?.data || {},
|
||||
storage: storageRes?.data || [],
|
||||
gpu: gpuRes?.data || [],
|
||||
network: networkRes?.data || [],
|
||||
system: {
|
||||
...system,
|
||||
dockerStats: docker
|
||||
},
|
||||
os: system.os || { kernel: '', distro: '', architecture: '' },
|
||||
uptimeSeconds: system.uptimeSeconds || 0,
|
||||
latency: {
|
||||
clientToServer: clientToServerLatency,
|
||||
external: latency.external || {},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 测量延迟
|
||||
async function measureLatency(url: string): Promise<number> {
|
||||
try {
|
||||
const startTime = performance.now();
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
const endTime = performance.now();
|
||||
|
||||
if (response.ok) {
|
||||
return Math.round(endTime - startTime);
|
||||
}
|
||||
return -1; // 表示失败
|
||||
} catch {
|
||||
return -1; // 表示超时或失败
|
||||
}
|
||||
}
|
||||
|
||||
export const checkServerHealth = async (serverUrl: string): Promise<boolean> => {
|
||||
try {
|
||||
const url = `${serverUrl}/api/health`;
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
return response.ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
import type { ServerMetrics } from '../types';
|
||||
|
||||
export const fetchServerMetrics = async (serverUrl: string): Promise<ServerMetrics> => {
|
||||
// 测量客户端到服务器的延迟（使用健康检查端点）
|
||||
const clientToServerLatency = await measureLatency(`${serverUrl}/api/health`);
|
||||
|
||||
// 并行请求各个端点
|
||||
const endpoints = [
|
||||
'/api/metrics/cpu',
|
||||
'/api/metrics/memory',
|
||||
'/api/metrics/storage',
|
||||
'/api/metrics/gpu',
|
||||
'/api/metrics/network',
|
||||
'/api/metrics/system',
|
||||
'/api/metrics/docker',
|
||||
'/api/metrics/latency',
|
||||
];
|
||||
|
||||
const results = await Promise.all(
|
||||
endpoints.map(endpoint =>
|
||||
fetch(`${serverUrl}${endpoint}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error(`Failed to fetch ${endpoint}`);
|
||||
return res.json();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(`Error fetching ${endpoint}:`, err);
|
||||
return null;
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
// 合并所有结果
|
||||
const [cpuRes, memRes, storageRes, gpuRes, networkRes, systemRes, dockerRes, latencyRes] = results;
|
||||
|
||||
const system = systemRes?.data || {};
|
||||
const docker = dockerRes?.data || {};
|
||||
const latency = latencyRes?.data || {};
|
||||
|
||||
// 将 docker 数据合并到 system.dockerStats
|
||||
return {
|
||||
hostname: system.hostname || 'Unknown',
|
||||
timestamp: new Date().toISOString(),
|
||||
cpu: cpuRes?.data || {},
|
||||
memory: memRes?.data || {},
|
||||
storage: storageRes?.data || [],
|
||||
gpu: gpuRes?.data || [],
|
||||
network: networkRes?.data || [],
|
||||
system: {
|
||||
...system,
|
||||
dockerStats: docker
|
||||
},
|
||||
os: system.os || { kernel: '', distro: '', architecture: '' },
|
||||
uptimeSeconds: system.uptimeSeconds || 0,
|
||||
latency: {
|
||||
clientToServer: clientToServerLatency,
|
||||
external: latency.external || {},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 测量延迟
|
||||
async function measureLatency(url: string): Promise<number> {
|
||||
try {
|
||||
const startTime = performance.now();
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
const endTime = performance.now();
|
||||
|
||||
if (response.ok) {
|
||||
return Math.round(endTime - startTime);
|
||||
}
|
||||
return -1; // 表示失败
|
||||
} catch {
|
||||
return -1; // 表示超时或失败
|
||||
}
|
||||
}
|
||||
|
||||
export const checkServerHealth = async (serverUrl: string): Promise<boolean> => {
|
||||
try {
|
||||
const url = `${serverUrl}/api/health`;
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
return response.ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -52,7 +52,7 @@ export const CircularProgress = ({
|
||||
className="progress-value"
|
||||
textAnchor="middle"
|
||||
dy="0.3em"
|
||||
fontSize={valueFontSize}
|
||||
fontSize={subLabelFontSize}
|
||||
>
|
||||
{subLabel}
|
||||
</text>
|
||||
|
||||
@@ -1,381 +1,387 @@
|
||||
.server-card {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.server-card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.server-card.online {
|
||||
border-top: 4px solid var(--success-color);
|
||||
}
|
||||
|
||||
.server-card.offline {
|
||||
border-top: 4px solid var(--text-light);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.server-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
background: var(--success-color);
|
||||
box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.2);
|
||||
}
|
||||
|
||||
.status-online::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
border: 1px solid var(--success-color);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 0.5; }
|
||||
70% { transform: scale(1.5); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background: var(--text-light);
|
||||
}
|
||||
|
||||
.server-name-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.server-name {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.server-hostname {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-light);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-light);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-remove:hover {
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Main Metrics */
|
||||
.card-main-metrics {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.metrics-grid-main {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.circular-progress-small {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-ring-bg {
|
||||
fill: none;
|
||||
stroke: #e2e8f0;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-ring-circle {
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.5s ease;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-value-small {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
fill: var(--text-main);
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-label-small {
|
||||
font-size: 10px;
|
||||
fill: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Info Grid */
|
||||
.card-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.info-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
writing-mode: horizontal-tb;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
writing-mode: horizontal-tb;
|
||||
text-orientation: mixed;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
font-size: 0.7rem;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Performance Grid */
|
||||
.card-performance-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.performance-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.performance-header {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.performance-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.performance-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.performance-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.performance-item-label {
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.performance-item-value {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Footer Info */
|
||||
.card-footer-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.footer-label {
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-value {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
||||
/* Metrics List */
|
||||
.metrics-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metric-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.progress-bar-bg {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--bg-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.uptime-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.875rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.uptime-label {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.uptime-value {
|
||||
color: var(--text-secondary);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.offline-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.btn-detail {
|
||||
width: 100%;
|
||||
background: var(--surface-hover);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-detail:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
.server-card {
|
||||
background: var(--surface-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.server-card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.server-card.online {
|
||||
border-top: 4px solid var(--success-color);
|
||||
}
|
||||
|
||||
.server-card.offline {
|
||||
border-top: 4px solid var(--text-light);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.card-header:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.server-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
background: var(--success-color);
|
||||
box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.2);
|
||||
}
|
||||
|
||||
.status-online::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
border: 1px solid var(--success-color);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); opacity: 0.5; }
|
||||
70% { transform: scale(1.5); opacity: 0; }
|
||||
100% { transform: scale(1); opacity: 0; }
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background: var(--text-light);
|
||||
}
|
||||
|
||||
.server-name-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.server-name {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.server-hostname {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-light);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-light);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-remove:hover {
|
||||
background: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Main Metrics */
|
||||
.card-main-metrics {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.metrics-grid-main {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.circular-progress-small {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-ring-bg {
|
||||
fill: none;
|
||||
stroke: #e2e8f0;
|
||||
stroke-width: 6;
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-ring-circle {
|
||||
fill: none;
|
||||
stroke-width: 6;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 0.5s ease;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-value-small {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
fill: var(--text-main);
|
||||
}
|
||||
|
||||
.circular-progress-small .progress-label-small {
|
||||
font-size: 10px;
|
||||
fill: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Info Grid */
|
||||
.card-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.info-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
writing-mode: horizontal-tb;
|
||||
text-orientation: mixed;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
writing-mode: horizontal-tb;
|
||||
text-orientation: mixed;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
font-size: 0.7rem;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Performance Grid */
|
||||
.card-performance-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.performance-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.performance-header {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.performance-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.performance-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.performance-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.performance-item-label {
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.performance-item-value {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Footer Info */
|
||||
.card-footer-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.footer-label {
|
||||
color: var(--text-light);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-value {
|
||||
color: var(--text-main);
|
||||
font-weight: 600;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
||||
/* Metrics List */
|
||||
.metrics-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metric-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.progress-bar-bg {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--bg-color);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.uptime-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.875rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.uptime-label {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.uptime-value {
|
||||
color: var(--text-secondary);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.offline-state {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.btn-detail {
|
||||
width: 100%;
|
||||
background: var(--surface-hover);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-detail:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import type { ServerConfig, ServerMetrics } from '../../types';
|
||||
import { formatUptime, formatBytes } from '../../utils/format';
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import './ServerCard.css';
|
||||
|
||||
const CircularProgress = ({ value, label, color, size = 60 }: { value: number; label: string; color: string; size?: number }) => {
|
||||
@@ -95,6 +97,21 @@ export const ServerCard = ({
|
||||
onDetail,
|
||||
onRemove,
|
||||
}: ServerCardProps) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: server.id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
};
|
||||
|
||||
// 从 URL 提取 IP 地址
|
||||
const extractIP = (url: string): string => {
|
||||
try {
|
||||
@@ -142,8 +159,12 @@ export const ServerCard = ({
|
||||
const latencyColor = getLatencyColor(latency);
|
||||
|
||||
return (
|
||||
<div className={`server-card ${online ? 'online' : 'offline'}`}>
|
||||
<div className="card-header">
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`server-card ${online ? 'online' : 'offline'}`}
|
||||
>
|
||||
<div className="card-header" {...attributes} {...listeners}>
|
||||
<div className="server-info">
|
||||
<div className={`status-indicator ${online ? 'status-online' : 'status-offline'}`} />
|
||||
<div className="server-name-group">
|
||||
@@ -153,7 +174,15 @@ export const ServerCard = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn-remove" onClick={() => onRemove(server.id)} title="移除服务器">
|
||||
<button
|
||||
className="btn-remove"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onRemove(server.id);
|
||||
}}
|
||||
title="移除服务器"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,58 +1,58 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import type { ServerConfig, ServerStatus } from '../types';
|
||||
import { fetchServerMetrics } from '../api/monitor';
|
||||
|
||||
export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => {
|
||||
const [statuses, setStatuses] = useState<Record<string, ServerStatus>>({});
|
||||
|
||||
const fetchMetrics = useCallback(async (server: ServerConfig) => {
|
||||
if (!server.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const metrics = await fetchServerMetrics(server.url);
|
||||
setStatuses(prev => ({
|
||||
...prev,
|
||||
[server.id]: {
|
||||
serverId: server.id,
|
||||
online: true,
|
||||
metrics,
|
||||
lastUpdate: Date.now(),
|
||||
},
|
||||
}));
|
||||
} catch (error) {
|
||||
setStatuses(prev => ({
|
||||
...prev,
|
||||
[server.id]: {
|
||||
serverId: server.id,
|
||||
online: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
lastUpdate: Date.now(),
|
||||
},
|
||||
}));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Initial fetch
|
||||
servers.forEach(server => {
|
||||
if (server.enabled) {
|
||||
fetchMetrics(server);
|
||||
}
|
||||
});
|
||||
|
||||
// Set up polling
|
||||
const timer = setInterval(() => {
|
||||
servers.forEach(server => {
|
||||
if (server.enabled) {
|
||||
fetchMetrics(server);
|
||||
}
|
||||
});
|
||||
}, interval);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [servers, interval, fetchMetrics]);
|
||||
|
||||
return statuses;
|
||||
};
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import type { ServerConfig, ServerStatus } from '../types';
|
||||
import { fetchServerMetrics } from '../api/monitor';
|
||||
|
||||
export const useServerMonitor = (servers: ServerConfig[], interval: number = 2000) => {
|
||||
const [statuses, setStatuses] = useState<Record<string, ServerStatus>>({});
|
||||
|
||||
const fetchMetrics = useCallback(async (server: ServerConfig) => {
|
||||
if (!server.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const metrics = await fetchServerMetrics(server.url);
|
||||
setStatuses(prev => ({
|
||||
...prev,
|
||||
[server.id]: {
|
||||
serverId: server.id,
|
||||
online: true,
|
||||
metrics,
|
||||
lastUpdate: Date.now(),
|
||||
},
|
||||
}));
|
||||
} catch (error) {
|
||||
setStatuses(prev => ({
|
||||
...prev,
|
||||
[server.id]: {
|
||||
serverId: server.id,
|
||||
online: false,
|
||||
error: error instanceof Error ? error.message : 'Unknown error',
|
||||
lastUpdate: Date.now(),
|
||||
},
|
||||
}));
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Initial fetch
|
||||
servers.forEach(server => {
|
||||
if (server.enabled) {
|
||||
fetchMetrics(server);
|
||||
}
|
||||
});
|
||||
|
||||
// Set up polling
|
||||
const timer = setInterval(() => {
|
||||
servers.forEach(server => {
|
||||
if (server.enabled) {
|
||||
fetchMetrics(server);
|
||||
}
|
||||
});
|
||||
}, interval);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [servers, interval, fetchMetrics]);
|
||||
|
||||
return statuses;
|
||||
};
|
||||
|
||||
@@ -1,125 +1,125 @@
|
||||
export interface ServerConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export interface CPUMetrics {
|
||||
model: string;
|
||||
cores: number;
|
||||
usagePercent: number;
|
||||
loadAverages?: number[];
|
||||
temperature?: number;
|
||||
perCoreUsage?: CoreUsage[];
|
||||
}
|
||||
|
||||
export interface CoreUsage {
|
||||
core: number;
|
||||
percent: number;
|
||||
}
|
||||
|
||||
export interface MemoryMetrics {
|
||||
totalBytes: number;
|
||||
usedBytes: number;
|
||||
freeBytes: number;
|
||||
usedPercent: number;
|
||||
}
|
||||
|
||||
export interface StorageMetrics {
|
||||
mount: string;
|
||||
totalBytes: number;
|
||||
usedBytes: number;
|
||||
freeBytes: number;
|
||||
usedPercent: number;
|
||||
}
|
||||
|
||||
export interface GPUMetrics {
|
||||
name: string;
|
||||
memoryTotalMB: number;
|
||||
memoryUsedMB: number;
|
||||
utilizationPercent: number;
|
||||
temperature?: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface NetworkInterface {
|
||||
name: string;
|
||||
ipAddress: string;
|
||||
macAddress: string;
|
||||
rxBytes: number;
|
||||
txBytes: number;
|
||||
rxSpeed: number;
|
||||
txSpeed: number;
|
||||
}
|
||||
|
||||
export interface SystemStats {
|
||||
processCount: number;
|
||||
packageCount: number;
|
||||
packageManager: string;
|
||||
temperature?: number;
|
||||
diskReadSpeed: number;
|
||||
diskWriteSpeed: number;
|
||||
networkRxSpeed?: number;
|
||||
networkTxSpeed?: number;
|
||||
topProcesses: ProcessInfo[];
|
||||
dockerStats: DockerStats;
|
||||
systemLogs?: string[];
|
||||
}
|
||||
|
||||
export interface ProcessInfo {
|
||||
pid: number;
|
||||
name: string;
|
||||
cpu: number;
|
||||
memory: number;
|
||||
memoryMB: number;
|
||||
command: string;
|
||||
}
|
||||
|
||||
export interface DockerStats {
|
||||
available: boolean;
|
||||
version?: string;
|
||||
running: number;
|
||||
stopped: number;
|
||||
imageCount: number;
|
||||
runningNames?: string[];
|
||||
stoppedNames?: string[];
|
||||
imageNames?: string[];
|
||||
}
|
||||
|
||||
export interface OSInfo {
|
||||
kernel: string;
|
||||
distro: string;
|
||||
architecture: string;
|
||||
}
|
||||
|
||||
export interface LatencyInfo {
|
||||
clientToServer: number;
|
||||
external: {
|
||||
'baidu.com'?: string;
|
||||
'google.com'?: string;
|
||||
'github.com'?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ServerMetrics {
|
||||
hostname: string;
|
||||
timestamp: string;
|
||||
cpu: CPUMetrics;
|
||||
memory: MemoryMetrics;
|
||||
storage: StorageMetrics[];
|
||||
gpu: GPUMetrics[];
|
||||
network: NetworkInterface[];
|
||||
system: SystemStats;
|
||||
os: OSInfo;
|
||||
uptimeSeconds: number;
|
||||
latency?: LatencyInfo;
|
||||
}
|
||||
|
||||
export interface ServerStatus {
|
||||
serverId: string;
|
||||
online: boolean;
|
||||
metrics?: ServerMetrics;
|
||||
error?: string;
|
||||
lastUpdate: number;
|
||||
}
|
||||
export interface ServerConfig {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export interface CPUMetrics {
|
||||
model: string;
|
||||
cores: number;
|
||||
usagePercent: number;
|
||||
loadAverages?: number[];
|
||||
temperature?: number;
|
||||
perCoreUsage?: CoreUsage[];
|
||||
}
|
||||
|
||||
export interface CoreUsage {
|
||||
core: number;
|
||||
percent: number;
|
||||
}
|
||||
|
||||
export interface MemoryMetrics {
|
||||
totalBytes: number;
|
||||
usedBytes: number;
|
||||
freeBytes: number;
|
||||
usedPercent: number;
|
||||
}
|
||||
|
||||
export interface StorageMetrics {
|
||||
mount: string;
|
||||
totalBytes: number;
|
||||
usedBytes: number;
|
||||
freeBytes: number;
|
||||
usedPercent: number;
|
||||
}
|
||||
|
||||
export interface GPUMetrics {
|
||||
name: string;
|
||||
memoryTotalMB: number;
|
||||
memoryUsedMB: number;
|
||||
utilizationPercent: number;
|
||||
temperature?: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface NetworkInterface {
|
||||
name: string;
|
||||
ipAddress: string;
|
||||
macAddress: string;
|
||||
rxBytes: number;
|
||||
txBytes: number;
|
||||
rxSpeed: number;
|
||||
txSpeed: number;
|
||||
}
|
||||
|
||||
export interface SystemStats {
|
||||
processCount: number;
|
||||
packageCount: number;
|
||||
packageManager: string;
|
||||
temperature?: number;
|
||||
diskReadSpeed: number;
|
||||
diskWriteSpeed: number;
|
||||
networkRxSpeed?: number;
|
||||
networkTxSpeed?: number;
|
||||
topProcesses: ProcessInfo[];
|
||||
dockerStats: DockerStats;
|
||||
systemLogs?: string[];
|
||||
}
|
||||
|
||||
export interface ProcessInfo {
|
||||
pid: number;
|
||||
name: string;
|
||||
cpu: number;
|
||||
memory: number;
|
||||
memoryMB: number;
|
||||
command: string;
|
||||
}
|
||||
|
||||
export interface DockerStats {
|
||||
available: boolean;
|
||||
version?: string;
|
||||
running: number;
|
||||
stopped: number;
|
||||
imageCount: number;
|
||||
runningNames?: string[];
|
||||
stoppedNames?: string[];
|
||||
imageNames?: string[];
|
||||
}
|
||||
|
||||
export interface OSInfo {
|
||||
kernel: string;
|
||||
distro: string;
|
||||
architecture: string;
|
||||
}
|
||||
|
||||
export interface LatencyInfo {
|
||||
clientToServer: number;
|
||||
external: {
|
||||
'baidu.com'?: string;
|
||||
'google.com'?: string;
|
||||
'github.com'?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ServerMetrics {
|
||||
hostname: string;
|
||||
timestamp: string;
|
||||
cpu: CPUMetrics;
|
||||
memory: MemoryMetrics;
|
||||
storage: StorageMetrics[];
|
||||
gpu: GPUMetrics[];
|
||||
network: NetworkInterface[];
|
||||
system: SystemStats;
|
||||
os: OSInfo;
|
||||
uptimeSeconds: number;
|
||||
latency?: LatencyInfo;
|
||||
}
|
||||
|
||||
export interface ServerStatus {
|
||||
serverId: string;
|
||||
online: boolean;
|
||||
metrics?: ServerMetrics;
|
||||
error?: string;
|
||||
lastUpdate: number;
|
||||
}
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
export const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0 || bytes === null || bytes === undefined || isNaN(bytes) || !isFinite(bytes)) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
// 处理负数
|
||||
if (bytes < 0) {
|
||||
bytes = 0;
|
||||
}
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
|
||||
// 处理小于 1 的情况
|
||||
if (bytes < 1) {
|
||||
return bytes.toFixed(2) + ' ' + sizes[0];
|
||||
}
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
// 确保索引在有效范围内
|
||||
const sizeIndex = Math.max(0, Math.min(i, sizes.length - 1));
|
||||
const value = Math.round((bytes / Math.pow(k, sizeIndex)) * 100) / 100;
|
||||
|
||||
// 确保 sizes[sizeIndex] 存在
|
||||
const unit = sizes[sizeIndex] || sizes[0];
|
||||
|
||||
return value + ' ' + unit;
|
||||
};
|
||||
|
||||
export const formatUptime = (seconds: number): string => {
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
const parts: string[] = [];
|
||||
if (days > 0) parts.push(`${days}天`);
|
||||
if (hours > 0) parts.push(`${hours}小时`);
|
||||
if (minutes > 0) parts.push(`${minutes}分钟`);
|
||||
|
||||
return parts.length > 0 ? parts.join(' ') : '刚刚启动';
|
||||
};
|
||||
|
||||
export const formatPercent = (value: number): string => {
|
||||
return `${Math.round(value * 10) / 10}%`;
|
||||
};
|
||||
export const formatBytes = (bytes: number): string => {
|
||||
if (bytes === 0 || bytes === null || bytes === undefined || isNaN(bytes) || !isFinite(bytes)) {
|
||||
return '0 B';
|
||||
}
|
||||
|
||||
// 处理负数
|
||||
if (bytes < 0) {
|
||||
bytes = 0;
|
||||
}
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
|
||||
// 处理小于 1 的情况
|
||||
if (bytes < 1) {
|
||||
return bytes.toFixed(2) + ' ' + sizes[0];
|
||||
}
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
// 确保索引在有效范围内
|
||||
const sizeIndex = Math.max(0, Math.min(i, sizes.length - 1));
|
||||
const value = Math.round((bytes / Math.pow(k, sizeIndex)) * 100) / 100;
|
||||
|
||||
// 确保 sizes[sizeIndex] 存在
|
||||
const unit = sizes[sizeIndex] || sizes[0];
|
||||
|
||||
return value + ' ' + unit;
|
||||
};
|
||||
|
||||
export const formatUptime = (seconds: number): string => {
|
||||
const days = Math.floor(seconds / 86400);
|
||||
const hours = Math.floor((seconds % 86400) / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
|
||||
const parts: string[] = [];
|
||||
if (days > 0) parts.push(`${days}天`);
|
||||
if (hours > 0) parts.push(`${hours}小时`);
|
||||
if (minutes > 0) parts.push(`${minutes}分钟`);
|
||||
|
||||
return parts.length > 0 ? parts.join(' ') : '刚刚启动';
|
||||
};
|
||||
|
||||
export const formatPercent = (value: number): string => {
|
||||
return `${Math.round(value * 10) / 10}%`;
|
||||
};
|
||||
|
||||
@@ -1,53 +1,115 @@
|
||||
import type { ServerConfig } from '../types';
|
||||
|
||||
const STORAGE_KEY = 'mengya_monitor_servers';
|
||||
|
||||
export const loadServers = (): ServerConfig[] => {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) {
|
||||
const parsed = JSON.parse(stored);
|
||||
// Ensure it's an array
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load servers:', error);
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
export const saveServers = (servers: ServerConfig[]): void => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
|
||||
} catch (error) {
|
||||
console.error('Failed to save servers:', error);
|
||||
}
|
||||
};
|
||||
|
||||
export const addServer = (server: Omit<ServerConfig, 'id'>): ServerConfig => {
|
||||
const servers = loadServers();
|
||||
const newServer: ServerConfig = {
|
||||
...server,
|
||||
id: Date.now().toString(),
|
||||
};
|
||||
servers.push(newServer);
|
||||
saveServers(servers);
|
||||
return newServer;
|
||||
};
|
||||
|
||||
export const updateServer = (id: string, updates: Partial<ServerConfig>): void => {
|
||||
const servers = loadServers();
|
||||
const index = servers.findIndex(s => s.id === id);
|
||||
if (index !== -1) {
|
||||
servers[index] = { ...servers[index], ...updates };
|
||||
saveServers(servers);
|
||||
}
|
||||
};
|
||||
|
||||
export const removeServer = (id: string): void => {
|
||||
const servers = loadServers();
|
||||
const filtered = servers.filter(s => s.id !== id);
|
||||
saveServers(filtered);
|
||||
};
|
||||
import type { ServerConfig } from '../types';
|
||||
|
||||
const STORAGE_KEY = 'mengya_monitor_servers';
|
||||
|
||||
export const loadServers = (): ServerConfig[] => {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) {
|
||||
const parsed = JSON.parse(stored);
|
||||
// Ensure it's an array
|
||||
if (Array.isArray(parsed)) {
|
||||
return parsed;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load servers:', error);
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
export const saveServers = (servers: ServerConfig[]): void => {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(servers));
|
||||
} catch (error) {
|
||||
console.error('Failed to save servers:', error);
|
||||
}
|
||||
};
|
||||
|
||||
export const addServer = (server: Omit<ServerConfig, 'id'>): ServerConfig => {
|
||||
const servers = loadServers();
|
||||
const newServer: ServerConfig = {
|
||||
...server,
|
||||
id: Date.now().toString(),
|
||||
};
|
||||
servers.push(newServer);
|
||||
saveServers(servers);
|
||||
return newServer;
|
||||
};
|
||||
|
||||
export const updateServer = (id: string, updates: Partial<ServerConfig>): void => {
|
||||
const servers = loadServers();
|
||||
const index = servers.findIndex(s => s.id === id);
|
||||
if (index !== -1) {
|
||||
servers[index] = { ...servers[index], ...updates };
|
||||
saveServers(servers);
|
||||
}
|
||||
};
|
||||
|
||||
export const removeServer = (id: string): void => {
|
||||
const servers = loadServers();
|
||||
const filtered = servers.filter(s => s.id !== id);
|
||||
saveServers(filtered);
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出服务器配置到剪贴板
|
||||
* @returns Promise<string> 返回导出的 JSON 字符串
|
||||
*/
|
||||
export const exportServersToClipboard = async (): Promise<string> => {
|
||||
const servers = loadServers();
|
||||
const json = JSON.stringify(servers, null, 2);
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(json);
|
||||
return json;
|
||||
} catch (error) {
|
||||
console.error('Failed to copy to clipboard:', error);
|
||||
throw new Error('无法复制到剪贴板，请检查浏览器权限');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 从剪贴板导入服务器配置
|
||||
* @returns Promise<ServerConfig[]> 返回导入的服务器配置数组
|
||||
*/
|
||||
export const importServersFromClipboard = async (): Promise<ServerConfig[]> => {
|
||||
try {
|
||||
const text = await navigator.clipboard.readText();
|
||||
const parsed = JSON.parse(text);
|
||||
|
||||
if (!Array.isArray(parsed)) {
|
||||
throw new Error('无效的配置格式：必须是服务器配置数组');
|
||||
}
|
||||
|
||||
// 验证每个配置项的基本结构
|
||||
const validServers: ServerConfig[] = [];
|
||||
for (const item of parsed) {
|
||||
if (item && typeof item === 'object' &&
|
||||
typeof item.name === 'string' &&
|
||||
typeof item.url === 'string') {
|
||||
// 为新导入的服务器生成新的 ID，避免 ID 冲突
|
||||
validServers.push({
|
||||
id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
|
||||
name: item.name,
|
||||
url: item.url,
|
||||
enabled: item.enabled !== undefined ? item.enabled : true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (validServers.length === 0) {
|
||||
throw new Error('未找到有效的服务器配置');
|
||||
}
|
||||
|
||||
return validServers;
|
||||
} catch (error) {
|
||||
if (error instanceof SyntaxError) {
|
||||
throw new Error('无效的 JSON 格式');
|
||||
}
|
||||
if (error instanceof Error) {
|
||||
throw error;
|
||||
}
|
||||
throw new Error('读取剪贴板失败，请检查浏览器权限');
|
||||
}
|
||||
};
|
||||
@@ -1,9 +1,49 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
plugins: [
|
||||
react(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
includeAssets: ['logo.svg'],
|
||||
manifest: {
|
||||
name: '萌芽监控面板',
|
||||
short_name: '萌芽监控',
|
||||
description: '服务器监控面板 - 萌芽监控',
|
||||
theme_color: '#1a1a2e',
|
||||
background_color: '#16213e',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait-primary',
|
||||
scope: '/',
|
||||
start_url: '/',
|
||||
icons: [
|
||||
{ src: '/logo.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any maskable' }
|
||||
],
|
||||
categories: ['utilities', 'productivity']
|
||||
},
|
||||
workbox: {
|
||||
globPatterns: ['**/*.{js,css,html,ico,svg,woff2}'],
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: /^https:\/\/.*\/api\//i,
|
||||
handler: 'NetworkFirst',
|
||||
options: {
|
||||
cacheName: 'api-cache',
|
||||
expiration: { maxEntries: 32, maxAgeSeconds: 60 * 5 },
|
||||
networkTimeoutSeconds: 10,
|
||||
cacheableResponse: { statuses: [0, 200] }
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
devOptions: {
|
||||
enabled: true
|
||||
}
|
||||
})
|
||||
],
|
||||
server: {
|
||||
port: 2929,
|
||||
host: true,
|
||||
|
||||
Reference in New Issue
Block a user