Hugging Face's logo

Spaces:
ACRoot
/
Dashboard
Running

App Files Community
Dashboard / public /index.html
Solvaxis
Add application file
af4f86e
raw
history blame contribute delete
59.2 kB
 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>HF Space Manager</title>
<!-- 引入 Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<!-- 引入科技感字体 Orbitron -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Orbitron', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: var(--background-color);
color: var(--text-color);
padding: 20px;
min-height: 100vh;
background-image: radial-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), radial-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px);
background-size: 40px 40px;
background-position: 0 0, 20px 20px;
}
:root {
/* 深色模式变量（默认且唯一） */
--background-color: #0A0A1E;
--text-color: #E0E0FF;
--secondary-text: #A0A0CC;
--card-background: rgba(20, 20, 40, 0.7);
--card-border: rgba(0, 212, 255, 0.3);
--metric-background: rgba(30, 30, 50, 0.6);
--metric-border: rgba(0, 212, 255, 0.2);
--metric-hover: rgba(40, 40, 70, 0.8);
--label-color: #A0A0CC;
--action-button-bg: rgba(0, 212, 255, 0.2);
--action-button-hover: rgba(0, 212, 255, 0.4);
--accent-color: #00D4FF;
--neon-pink: #FF00FF;
--neon-green: #00FFAA;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}
.overview {
background: var(--card-background);
border-radius: 8px;
padding: 20px;
margin-bottom: 25px;
border: 1px solid var(--card-border);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.3), inset 0 0 2px rgba(0, 212, 255, 0.5);
transition: background 0.3s ease, border 0.3s ease;
}
.overview-title {
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
color: var(--accent-color);
text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}
#summary {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
#summary div {
background: var(--metric-background);
padding: 14px;
border-radius: 6px;
border: 1px solid var(--metric-border);
transition: background 0.3s ease;
box-shadow: inset 0 0 3px rgba(0, 212, 255, 0.3);
}
#summary div {
font-size: 13px;
font-weight: 500;
color: var(--secondary-text);
}
#summary span {
display: block;
font-size: 22px;
font-weight: 700;
margin-top: 6px;
color: var(--text-color);
text-shadow: 0 0 3px rgba(0, 212, 255, 0.3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stats-container {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 20px;
}
.user-group {
background: var(--card-background);
border-radius: 8px;
border: 1px solid var(--card-border);
overflow: hidden;
box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
transition: background 0.3s ease, border 0.3s ease;
}
.user-group summary {
padding: 16px;
font-weight: 600;
cursor: pointer;
color: var(--accent-color);
background: var(--metric-background);
transition: background 0.2s ease;
text-shadow: 0 0 4px rgba(0, 212, 255, 0.4);
}
.user-group summary:hover {
background: var(--metric-hover);
box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.5);
}
.user-group summary::-webkit-details-marker {
color: var(--accent-color);
}
.user-servers {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 16px;
}
.server-card {
background: var(--metric-background);
border-radius: 6px;
padding: 16px;
border: 1px solid var(--metric-border);
transition: background 0.2s ease, box-shadow 0.2s ease;
min-height: 150px;
display: flex;
flex-direction: column;
box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
position: relative;
overflow: hidden;
}
.server-card.not-logged-in {
min-height: 120px;
}
.server-card:hover {
background: var(--metric-hover);
box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}
.server-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-color), var(--neon-pink));
opacity: 0.7;
}
.server-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-size: 14px;
}
.server-name {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
cursor: pointer;
position: relative;
}
.server-name:hover {
opacity: 0.8;
}
.server-name::after {
content: '▼';
font-size: 12px;
color: var(--accent-color);
margin-left: 8px;
transition: transform 0.3s ease;
}
.server-card.info-expanded .server-name::after {
transform: rotate(180deg);
}
.server-name div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
font-weight: 500;
color: var(--accent-color);
text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}
.server-flag {
width: 20px;
height: 20px;
border-radius: 6px;
flex-shrink: 0;
filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.3));
}
.metric-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 12px;
}
.metric-item {
background: var(--card-background);
padding: 10px;
border-radius: 4px;
border: 1px solid var(--metric-border);
transition: background 0.2s ease;
overflow: hidden;
box-shadow: inset 0 0 3px rgba(0, 212, 255, 0.2);
}
.metric-item:hover {
background: var(--metric-hover);
box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.4);
}
.metric-label {
color: var(--label-color);
font-size: 12px;
margin-bottom: 4px;
white-space: nowrap;
}
.metric-value {
font-size: 14px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
color: var(--text-color);
text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
}
/* 新增信息块样式 */
.info-block {
background: var(--card-background);
padding: 10px;
border-radius: 4px;
border: 1px solid var(--metric-border);
margin-top: 12px;
transition: background 0.2s ease, height 0.3s ease;
overflow: hidden;
box-shadow: inset 0 0 3px rgba(0, 212, 255, 0.2);
display: none;
}
.server-card.info-expanded .info-block {
display: block;
}
.info-block:hover {
background: var(--metric-hover);
box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.4);
}
.info-item {
margin-bottom: 6px;
}
.info-item:last-child {
margin-bottom: 0;
}
.info-label {
color: var(--label-color);
font-size: 12px;
margin-bottom: 4px;
white-space: nowrap;
}
.info-value {
font-size: 14px;
font-weight: 500;
color: var(--text-color);
text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp: 2;
}
.status-dot {
display: inline-block;
border-radius: 50%;
animation: pulse 2s infinite;
width: 10px;
height: 10px;
flex-shrink: 0;
}
.status-online {
background-color: var(--neon-green);
color: var(--neon-green);
box-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
}
.status-offline {
background-color: #ff3b30;
color: #ff3b30;
box-shadow: 0 0 8px rgba(255, 59, 48, 0.6);
}
.status-sleep {
background-color: var(--neon-pink);
color: var(--neon-pink);
box-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
animation: none;
}
.action-buttons {
display: flex;
gap: 10px;
margin-top: 12px;
}
.action-button {
background: var(--action-button-bg);
color: var(--accent-color);
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease, box-shadow 0.2s ease;
text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
position: relative;
overflow: hidden;
}
.action-button:hover {
background: var(--action-button-hover);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.action-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.action-button:hover::after {
opacity: 1;
}
.network-stats {
background: var(--metric-background);
border: 1px solid var(--metric-border);
margin-top: 20px;
padding: 16px;
border-radius: 6px;
transition: background 0.3s ease;
box-shadow: 0 0 5px rgba(0, 212, 255, 0.2);
}
.network-item {
font-size: 14px;
color: var(--secondary-text);
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.6); }
70% { box-shadow: 0 0 0 8px rgba(0, 255, 170, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0); }
}
@media (max-width: 900px) {
#summary {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
#summary div {
padding: 10px;
}
#summary span {
font-size: 20px;
}
.metric-grid {
grid-template-columns: repeat(3, 1fr); /* 与系统概览同步，变为3列 */
gap: 8px;
}
.metric-item {
padding: 8px;
}
.metric-value {
font-size: 13px;
}
.info-block {
padding: 8px;
}
.info-value {
font-size: 13px;
}
}
@media (max-width: 600px) {
#summary {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
#summary div {
padding: 8px;
}
#summary span {
font-size: 18px;
}
.user-servers {
grid-template-columns: 1fr !important;
}
.metric-grid {
grid-template-columns: repeat(2, 1fr); /* 与系统概览同步，变为2列 */
gap: 8px;
}
.metric-item {
padding: 6px;
}
.metric-value {
font-size: 13px;
}
.server-header {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
.container {
padding: 0 10px;
}
.overview {
padding: 16px;
margin-bottom: 20px;
}
.info-block {
padding: 6px;
}
.info-value {
font-size: 12px;
-webkit-line-clamp: 1;
line-clamp: 1;
}
}
@media (max-width: 400px) {
#summary {
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
#summary div {
padding: 6px;
}
#summary span {
font-size: 16px;
}
.metric-grid {
grid-template-columns: repeat(2, 1fr); /* 保持2列，进一步优化间距和字体 */
gap: 6px;
}
.metric-item {
padding: 5px;
}
.metric-value {
font-size: 12px;
}
.info-block {
padding: 5px;
}
.info-value {
font-size: 11px;
}
}
.login-overlay, .confirm-overlay, .loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 30, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
display: none;
}
.login-box, .confirm-box {
background: var(--card-background);
padding: 24px;
border-radius: 8px;
border: 1px solid var(--card-border);
width: 320px;
text-align: center;
box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
position: relative;
}
.login-box::before, .confirm-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--accent-color), var(--neon-pink));
}
.login-box h2, .confirm-box h2 {
margin-bottom: 20px;
color: var(--accent-color);
font-size: 18px;
font-weight: 600;
text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}
.login-box input {
width: 100%;
padding: 12px 16px;
margin: 12px 0;
border: 1px solid var(--metric-border);
border-radius: 6px;
background: var(--metric-background);
color: var(--text-color);
font-size: 16px;
transition: border 0.2s ease, box-shadow 0.2s ease;
}
.login-box input:focus {
border-color: var(--accent-color);
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
outline: none;
}
.login-box button, .confirm-box button {
width: 48%;
padding: 12px;
background: var(--action-button-bg);
border: none;
border-radius: 6px;
color: var(--accent-color);
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: background 0.2s ease, box-shadow 0.2s ease;
margin: 10px 1%;
text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}
.login-box button:hover, .confirm-box button:hover {
background: var(--action-button-hover);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.login-box button:last-child, .confirm-box button:last-child {
background: transparent;
color: var(--neon-pink);
}
.login-box button:last-child:hover, .confirm-box button:last-child:hover {
background: rgba(255, 0, 255, 0.1);
box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}
.login-error {
color: #ff3b30;
margin-top: 12px;
font-size: 14px;
text-shadow: 0 0 3px rgba(255, 59, 48, 0.5);
}
.login-button, .logout-button {
background: var(--action-button-bg);
border: none;
color: var(--accent-color);
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease, box-shadow 0.2s ease;
text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}
.login-button:hover, .logout-button:hover {
background: var(--action-button-hover);
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.auth-buttons {
display: flex;
gap: 10px;
}
/* 加载状态指示器样式 */
.loader {
border: 5px solid transparent;
border-top: 5px solid var(--accent-color);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 优化后的过滤与排序控件样式 */
.filter-sort-panel {
background: var(--card-background);
border: 1px solid var(--card-border);
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
transition: background 0.3s ease;
}
.filter-sort-group {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-color);
min-width: 200px;
}
.filter-sort-group label {
white-space: nowrap;
color: var(--secondary-text);
font-weight: 500;
text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
}
.filter-sort-group select {
flex: 1;
background: var(--metric-background);
border: 1px solid var(--metric-border);
color: var(--text-color);
padding: 10px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
outline: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg fill='%2300D4FF' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 36px;
text-shadow: 0 0 2px rgba(0, 212, 255, 0.3);
}
.filter-sort-group select:hover {
background-color: var(--metric-hover);
box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
}
.filter-sort-group select:focus {
border-color: var(--accent-color);
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
.refresh-button {
background: var(--action-button-bg);
border: none;
color: var(--accent-color);
padding: 8px 16px; /* 与 .chart-toggle-button 一致 */
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease, box-shadow 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}
.refresh-button:hover {
background: var(--action-button-hover);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.refresh-icon {
width: 16px;
height: 16px;
fill: var(--accent-color);
}
@media (max-width: 600px) {
.filter-sort-group {
min-width: 100%;
}
.filter-sort-panel {
gap: 14px;
padding: 14px;
}
}
/* 图表相关样式 */
.chart-container {
display: none;
margin-top: 16px;
background: var(--card-background);
border: 1px solid var(--card-border);
border-radius: 6px;
padding: 12px;
height: 300px;
transition: background 0.3s ease;
box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}
.chart-toggle-button {
background: var(--action-button-bg);
color: var(--accent-color);
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease, box-shadow 0.2s ease;
margin-left: auto;
white-space: nowrap;
text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}
.chart-toggle-button:hover {
background: var(--action-button-hover);
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
.expanded .chart-container {
display: block;
}
canvas {
width: 100% !important;
height: auto !important;
}
@media (max-width: 600px) {
.chart-container {
height: 250px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="overview">
<div class="header-container">
<div class="overview-title">🤖 系统概览</div>
<div class="auth-buttons">
<button class="login-button" id="loginButton" onclick="showLoginForm()">登录</button>
<button class="logout-button" id="logoutButton" style="display: none;" onclick="logout()">登出</button>
</div>
</div>
<div id="summary">
<div>总用户数: <span id="totalUsers">0</span></div>
<div>总实例数: <span id="totalServers">0</span></div>
<div>在线实例: <span id="onlineServers">0</span></div>
<div>离线实例: <span id="offlineServers">0</span></div>
<div>总上传: <span id="totalUpload">0 B/s</span></div>
<div>总下载: <span id="totalDownload">0 B/s</span></div>
</div>
</div>
<!-- 优化后的过滤与排序面板 -->
<div class="filter-sort-panel">
<div class="filter-sort-group">
<label for="statusFilter">过滤状态:</label>
<select id="statusFilter" onchange="applyFiltersAndSort()">
<option value="all">全部状态</option>
<option value="running">运行中</option>
<option value="sleeping">休眠中</option>
<option value="stopped">已停止</option>
</select>
</div>
<div class="filter-sort-group">
<label for="userFilter">过滤用户:</label>
<select id="userFilter" onchange="applyFiltersAndSort()">
<option value="all">全部用户</option>
</select>
</div>
<div class="filter-sort-group">
<label for="sortBy">排序方式:</label>
<select id="sortBy" onchange="applyFiltersAndSort()">
<option value="name-asc">名称 (A-Z)</option>
<option value="name-desc">名称 (Z-A)</option>
<option value="status-asc">状态 (运行-停止)</option>
<option value="status-desc">状态 (停止-运行)</option>
</select>
</div>
<button class="refresh-button" onclick="refreshData()">
<svg class="refresh-icon" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
</svg>
刷新数据
</button>
</div>
<div id="servers" class="stats-container">
</div>
</div>
<!-- 登录弹窗 -->
<div id="loginOverlay" class="login-overlay">
<div class="login-box">
<h2>登录</h2>
<input type="text" id="username" placeholder="用户名" aria-label="用户名">
<input type="password" id="password" placeholder="密码" aria-label="密码">
<div style="display: flex; justify-content: center; gap: 10px; margin-top: 20px;">
<button onclick="login()">登录</button>
<button onclick="hideLoginForm()">取消</button>
</div>
<div id="loginError" class="login-error" style="display: none;"></div>
</div>
</div>
<!-- 确认弹窗 -->
<div id="confirmOverlay" class="confirm-overlay">
<div class="confirm-box">
<h2 id="confirmTitle">确认操作</h2>
<p id="confirmMessage" style="margin-bottom: 20px; color: var(--text-color);"></p>
<button onclick="confirmAction()">确认</button>
<button onclick="cancelAction()">取消</button>
</div>
</div>
<!-- 加载状态覆盖层 -->
<div id="loadingOverlay" class="loading-overlay">
<div class="loader"></div>
</div>
<script>
// 全局变量，表示当前是否已登录
let isLoggedIn = false;
// 加载状态控制函数
function showLoading() {
document.getElementById('loadingOverlay').style.display = 'flex';
}
function hideLoading() {
document.getElementById('loadingOverlay').style.display = 'none';
}
// 登录状态管理
function checkLoginStatus() {
const token = localStorage.getItem('authToken');
const loginButton = document.getElementById('loginButton');
const logoutButton = document.getElementById('logoutButton');
if (token) {
console.log('本地存储中找到 token，尝试验证:', token.slice(0, 8) + '...');
showLoading();
return fetch('/api/verify-token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token })
})
.then(response => response.json())
.then(data => {
hideLoading();
if (data.success) {
console.log('Token 验证成功，用户已登录');
isLoggedIn = true;
loginButton.style.display = 'none';
logoutButton.style.display = 'block';
updateActionButtons(true);
} else {
console.log('Token 验证失败，清除本地存储:', data.message);
localStorage.removeItem('authToken');
isLoggedIn = false;
loginButton.style.display = 'block';
logoutButton.style.display = 'none';
updateActionButtons(false);
}
return data.success;
})
.catch(error => {
hideLoading();
console.error('验证 token 失败，清除本地存储:', error);
localStorage.removeItem('authToken');
isLoggedIn = false;
loginButton.style.display = 'block';
logoutButton.style.display = 'none';
updateActionButtons(false);
return false;
});
} else {
console.log('本地存储中无 token，显示未登录状态');
isLoggedIn = false;
loginButton.style.display = 'block';
logoutButton.style.display = 'none';
updateActionButtons(false);
return Promise.resolve(false);
}
}
function showLoginForm() {
document.getElementById('loginOverlay').style.display = 'flex';
document.getElementById('username').value = '';
document.getElementById('password').value = '';
document.getElementById('loginError').style.display = 'none';
document.getElementById('username').focus();
}
function hideLoginForm() {
document.getElementById('loginOverlay').style.display = 'none';
}
function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const loginError = document.getElementById('loginError');
showLoading();
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, password })
})
.then(response => response.json())
.then(data => {
hideLoading();
if (data.success) {
console.log('登录成功，保存 token');
localStorage.setItem('authToken', data.token);
isLoggedIn = true;
hideLoginForm();
document.getElementById('loginButton').style.display = 'none';
document.getElementById('logoutButton').style.display = 'block';
updateActionButtons(true);
refreshData(); // 登录成功后刷新数据以显示所有实例包括 private
} else {
console.log('登录失败:', data.message);
loginError.textContent = data.message || '登录失败';
loginError.style.display = 'block';
}
})
.catch(error => {
hideLoading();
console.error('登录请求失败:', error);
loginError.textContent = '登录请求失败，请稍后重试';
loginError.style.display = 'block';
});
}
function logout() {
const token = localStorage.getItem('authToken');
if (token) {
showLoading();
fetch('/api/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ token })
})
.then(response => response.json())
.then(data => {
hideLoading();
console.log('登出成功，清除 token');
localStorage.removeItem('authToken');
isLoggedIn = false;
document.getElementById('loginButton').style.display = 'block';
document.getElementById('logoutButton').style.display = 'none';
updateActionButtons(false);
refreshData(); // 登出后刷新数据以隐藏 private 实例
})
.catch(error => {
hideLoading();
console.error('登出失败，但仍清除 token:', error);
localStorage.removeItem('authToken');
isLoggedIn = false;
document.getElementById('loginButton').style.display = 'block';
document.getElementById('logoutButton').style.display = 'none';
updateActionButtons(false);
refreshData(); // 登出后刷新数据以隐藏 private 实例
});
} else {
console.log('本地无 token，直接设置为未登录');
isLoggedIn = false;
document.getElementById('loginButton').style.display = 'block';
document.getElementById('logoutButton').style.display = 'none';
updateActionButtons(false);
refreshData(); // 登出后刷新数据以隐藏 private 实例
}
}
function updateActionButtons(loggedIn) {
console.log('更新操作按钮状态，是否已登录:', loggedIn);
isLoggedIn = loggedIn;
const cards = document.querySelectorAll('.server-card');
cards.forEach(card => {
const buttons = card.querySelector('.action-buttons');
if (buttons) {
buttons.style.display = loggedIn ? 'flex' : 'none';
}
// 动态添加或去除 not-logged-in 类以调整卡片高度
if (loggedIn) {
card.classList.remove('not-logged-in');
} else {
card.classList.add('not-logged-in');
}
// 确保图表切换按钮总是可见，不管是否登录
const chartToggleButton = card.querySelector('.chart-toggle-button');
if (chartToggleButton) {
chartToggleButton.style.display = 'inline-block';
}
});
}
// 使用 window.onload 确保页面完全加载后检查登录状态
window.onload = async function() {
console.log('页面加载完成，开始检查登录状态');
await checkLoginStatus();
console.log('登录状态检查完成，初始化数据');
await initialize();
};
// 二次确认弹窗逻辑
let pendingAction = null;
let pendingRepoId = null;
function showConfirmDialog(action, repoId, title, message) {
pendingAction = action;
pendingRepoId = repoId;
document.getElementById('confirmTitle').textContent = title;
document.getElementById('confirmMessage').textContent = message;
document.getElementById('confirmOverlay').style.display = 'flex';
}
function confirmAction() {
if (pendingAction === 'restart') {
restartSpace(pendingRepoId);
} else if (pendingAction === 'rebuild') {
rebuildSpace(pendingRepoId);
}
cancelAction();
}
function cancelAction() {
pendingAction = null;
pendingRepoId = null;
document.getElementById('confirmOverlay').style.display = 'none';
}
async function getUsernames() {
try {
showLoading();
const token = localStorage.getItem('authToken');
const headers = {};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
console.log('getUsernames 请求中附加 Token:', token.slice(0, 8) + '...');
}
const response = await fetch('/api/config', { headers });
const config = await response.json();
hideLoading();
const usernamesList = config.usernames ? config.usernames.split(',').map(name => name.trim()).filter(name => name) : [];
document.getElementById('totalUsers').textContent = usernamesList.length;
// 更新用户过滤下拉菜单
const userFilter = document.getElementById('userFilter');
userFilter.innerHTML = '<option value="all">全部用户</option>';
usernamesList.forEach(username => {
const option = document.createElement('option');
option.value = username;
option.textContent = username;
userFilter.appendChild(option);
});
return usernamesList;
} catch (error) {
hideLoading();
console.error('Failed to fetch usernames:', error);
document.getElementById('totalUsers').textContent = 0;
return [];
}
}
async function fetchInstances() {
try {
showLoading();
const token = localStorage.getItem('authToken');
const headers = {};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
console.log('fetchInstances 请求中附加 Token:', token.slice(0, 8) + '...');
} else {
console.log('无可用 Token，未附加 Authorization 头');
}
const response = await fetch('/api/proxy/spaces', { headers });
const instances = await response.json();
console.log('从后端获取的实例列表:', instances);
hideLoading();
if (instances.length === 0) {
alert('未获取到实例数据，可能是网络问题或数据暂不可用。');
}
return instances;
} catch (error) {
hideLoading();
console.error("获取实例列表失败：", error);
alert('获取实例列表失败，请稍后重试。');
return [];
}
}
class MetricsStreamManager {
constructor() {
this.eventSource = null;
}
connect(subscribedInstances = []) {
if (this.eventSource) {
this.eventSource.close();
}
const instancesParam = subscribedInstances.join(',');
const token = localStorage.getItem('authToken');
// 由于 EventSource 不支持直接设置 Authorization 头，这里通过查询参数传递 token
const url = `/api/proxy/live-metrics-stream?instances=${encodeURIComponent(instancesParam)}&token=${encodeURIComponent(token || '')}`;
console.log('SSE 连接 URL:', url.split('&token=')[0] + (token ? '&token=... (隐藏)' : '&token=空'));
this.eventSource = new EventSource(url);
this.eventSource.addEventListener("metric", (event) => {
try {
const data = JSON.parse(event.data);
const { repoId, metrics } = data;
updateServerCard(metrics, repoId);
} catch (error) {
console.error(`解析监控数据失败:`, error);
}
});
this.eventSource.onerror = (error) => {
console.error(`SSE 连接错误:`, error);
this.eventSource.close();
this.eventSource = null;
// 可选：尝试重新连接
setTimeout(() => this.connect(subscribedInstances), 5000);
};
console.log(`SSE 连接已建立，订阅实例: ${instancesParam || '无'}`);
}
disconnect() {
if (this.eventSource) {
this.eventSource.close();
this.eventSource = null;
console.log(`SSE 连接已断开`);
}
}
}
const metricsStreamManager = new MetricsStreamManager();
const instanceMap = new Map();
const serverStatus = new Map();
let allInstances = []; // 存储所有实例数据，用于过滤和排序
const chartInstances = new Map(); // 存储每个实例的图表实例
const chartDataBuffer = new Map(); // 存储图表数据缓冲以减少更新频率
async function initialize() {
await getUsernames();
const instances = await fetchInstances();
allInstances = instances;
renderInstances(allInstances);
// 默认只监控状态为 running 的实例
const runningInstances = instances
.filter(instance => instance.status.toLowerCase() === 'running')
.map(instance => instance.repo_id);
metricsStreamManager.connect(runningInstances);
updateSummary();
updateActionButtons(isLoggedIn);
}
// 手动刷新数据函数
async function refreshData() {
metricsStreamManager.disconnect();
// 销毁所有图表实例
chartInstances.forEach(chart => {
if (chart) {
chart.destroy();
}
});
chartInstances.clear();
chartDataBuffer.clear();
await initialize();
applyFiltersAndSort(); // 确保刷新后重新应用过滤和排序
}
function renderInstances(instances) {
const serversContainer = document.getElementById('servers');
serversContainer.innerHTML = ''; // 清空现有内容
const userGroups = {};
// 按用户分组
instances.forEach(instance => {
if (!userGroups[instance.owner]) {
userGroups[instance.owner] = [];
}
userGroups[instance.owner].push(instance);
});
// 渲染每个用户组
Object.keys(userGroups).forEach(owner => {
let userGroup = document.createElement('details');
userGroup.className = 'user-group';
userGroup.id = `user-${owner}`;
userGroup.setAttribute('open', '');
const summary = document.createElement('summary');
summary.textContent = `用户: ${owner}`;
userGroup.appendChild(summary);
const userServers = document.createElement('div');
userServers.className = 'user-servers';
userGroup.appendChild(userServers);
serversContainer.appendChild(userGroup);
// 渲染该用户下的实例
userGroups[owner].forEach(instance => {
renderInstanceCard(instance, userServers);
});
});
}
// 图表配置函数
function createChart(instanceId) {
const canvasId = `chart-${instanceId}`;
const canvas = document.getElementById(canvasId);
if (!canvas) return null;
const gridColor = 'rgba(0, 212, 255, 0.1)';
const textColor = '#E0E0FF';
const cpuColor = '#00FFAA';
const memoryColor = '#00D4FF';
const uploadColor = '#FF9500';
const downloadColor = '#FF00FF';
const ctx = canvas.getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: Array(30).fill(''), // 初始为空标签，最多30个数据点
datasets: [
{
label: 'CPU 使用率 (%)',
data: [],
borderColor: cpuColor,
backgroundColor: 'rgba(0, 255, 170, 0.2)',
tension: 0.4,
fill: true,
},
{
label: '内存使用率 (%)',
data: [],
borderColor: memoryColor,
backgroundColor: 'rgba(0, 212, 255, 0.2)',
tension: 0.4,
fill: true,
},
{
label: '上传速度 (KB/s)',
data: [],
borderColor: uploadColor,
backgroundColor: 'rgba(255, 149, 0, 0.2)',
tension: 0.4,
fill: true,
},
{
label: '下载速度 (KB/s)',
data: [],
borderColor: downloadColor,
backgroundColor: 'rgba(255, 0, 255, 0.2)',
tension: 0.4,
fill: true,
},
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: textColor,
font: { size: 12, family: "'Orbitron', sans-serif" }
}
},
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(20, 20, 40, 0.9)',
titleColor: textColor,
bodyColor: textColor,
padding: 12,
boxPadding: 8,
borderRadius: 6,
borderWidth: 1,
borderColor: 'rgba(0, 212, 255, 0.3)'
}
},
scales: {
y: {
beginAtZero: true,
grid: { color: gridColor, drawTicks: false },
ticks: {
color: textColor,
font: { size: 11, family: "'Orbitron', sans-serif" }
}
},
x: {
grid: { color: gridColor, drawTicks: false },
ticks: {
color: textColor,
font: { size: 11, family: "'Orbitron', sans-serif" },
maxRotation: 0,
minRotation: 0,
autoSkip: true,
autoSkipPadding: 10
}
}
},
elements: {
point: {
radius: 0, // 隐藏数据点
hitRadius: 5 // 确保悬停仍有效
},
line: {
borderWidth: 2
}
},
animation: false // 禁用图表动画，减少性能开销
}
});
chartInstances.set(instanceId, chart);
return chart;
}
// 更新图表数据，带有缓冲机制减少更新频率
function updateChart(instanceId, data) {
let buffer = chartDataBuffer.get(instanceId) || { data: [], count: 0 };
buffer.data.push(data);
buffer.count++;
if (buffer.count < 2) { // 每 2 次数据更新才渲染一次
chartDataBuffer.set(instanceId, buffer);
return;
}
let chart = chartInstances.get(instanceId);
if (!chart) {
chart = createChart(instanceId);
if (!chart) return;
}
// 获取当前数据集
const cpuData = chart.data.datasets[0].data;
const memoryData = chart.data.datasets[1].data;
const uploadData = chart.data.datasets[2].data;
const downloadData = chart.data.datasets[3].data;
// 追加最新数据
const latestData = buffer.data[buffer.data.length - 1];
cpuData.push(latestData.cpu_usage_pct);
memoryData.push(((latestData.memory_used_bytes / latestData.memory_total_bytes) * 100).toFixed(2));
uploadData.push((latestData.tx_bps / 1024).toFixed(2)); // 转换为 KB/s
downloadData.push((latestData.rx_bps / 1024).toFixed(2)); // 转换为 KB/s
// 限制数据点数量为 30 个
if (cpuData.length > 30) {
cpuData.shift();
memoryData.shift();
uploadData.shift();
downloadData.shift();
}
// 更新图表
chart.update();
// 清空缓冲
chartDataBuffer.set(instanceId, { data: [], count: 0 });
}
// 计算相对时间的辅助函数
function formatRelativeTime(dateStr) {
if (!dateStr) return '未知时间';
try {
const date = new Date(dateStr);
const now = new Date();
const diffMs = now - date;
const diffSecs = Math.floor(diffMs / 1000);
const diffMins = Math.floor(diffSecs / 60);
const diffHrs = Math.floor(diffMins / 60);
const diffDays = Math.floor(diffHrs / 24);
if (diffDays > 7) {
return date.toLocaleDateString(); // 超过7天显示日期
} else if (diffDays > 0) {
return `${diffDays}天前`;
} else if (diffHrs > 0) {
return `${diffHrs}小时前`;
} else if (diffMins > 0) {
return `${diffMins}分钟前`;
} else {
return '刚刚';
}
} catch (error) {
console.error('时间格式化失败:', error);
return '未知时间';
}
}
// 切换信息块显示/隐藏的函数
function toggleInfoBlock(instanceId) {
const card = document.getElementById(`instance-${instanceId}`);
if (!card) return;
card.classList.toggle('info-expanded');
}
function renderInstanceCard(instance, container) {
const instanceId = instance.repo_id;
instanceMap.set(instanceId, instance);
const cardId = `instance-${instanceId}`;
let card = document.getElementById(cardId);
if (!card) {
card = document.createElement('div');
card.id = cardId;
card.className = 'server-card';
if (!isLoggedIn) {
card.classList.add('not-logged-in'); // 未登录时添加类以调整高度
}
// 根据 instance.private 属性选择不同的图标
const iconSvg = instance.private
? `<svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M18 8v-3c0-1.656-1.344-3-3-3h-6c-1.656 0-3 1.344-3 3v3h-3v14h18v-14h-3zm-10-1.5c0-.828.672-1.5 1.5-1.5h5c.828 0 1.5.672 1.5 1.5v2.5h-8v-2.5zm4 11.5c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/>
</svg>` // 锁图标，表示 private 实例
: `<svg class="server-flag" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 3H3C1.9 3 1 3.9 1 5v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 5H4V6h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2zm1 4H3c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-3c0-1.1-.9-2-2-2zm-1 5H4v-2h16v2z"/>
</svg>`; // 服务器图标，表示非 private 实例
// 处理 short_description，默认值“暂无描述”
const description = instance.short_description && instance.short_description.trim() ? instance.short_description : 'N/A';
// 处理 last_modified，格式化为相对时间
const lastModified = formatRelativeTime(instance.last_modified);
card.innerHTML = `
<div class="server-header">
<div class="server-name" onclick="toggleInfoBlock('${instanceId}')">
<div class="status-dot status-sleep"></div>
${iconSvg}
<div>${instance.name}</div>
</div>
<div>
<button class="chart-toggle-button" onclick="toggleChart('${instanceId}')">查看图表</button>
</div>
</div>
<div class="metric-grid">
<div class="metric-item">
<div class="metric-label">状态</div>
<div class="metric-value status">${instance.status}</div>
</div>
<div class="metric-item">
<div class="metric-label">CPU</div>
<div class="metric-value cpu-usage">N/A</div>
</div>
<div class="metric-item">
<div class="metric-label">内存</div>
<div class="metric-value memory-usage">N/A</div>
</div>
<div class="metric-item">
<div class="metric-label">上传</div>
<div class="metric-value upload">N/A</div>
</div>
<div class="metric-item">
<div class="metric-label">下载</div>
<div class="metric-value download">N/A</div>
</div>
</div>
<div class="info-block">
<div class="info-item">
<div class="info-label">描述</div>
<div class="info-value" title="${description}">${description}</div>
</div>
<div class="info-item">
<div class="info-label">最近更新</div>
<div class="info-value">${lastModified}</div>
</div>
</div>
<div class="action-buttons" style="display: ${isLoggedIn ? 'flex' : 'none'};">
<button class="action-button view-button" onclick="viewInstance('${instance.url}')">查看</button>
<button class="action-button" onclick="manageInstance('${instance.repo_id}')">管理</button>
<button class="action-button" onclick="showConfirmDialog('restart', '${instance.repo_id}', '确认重启', '您确定要重启实例 ${instance.name} (${instance.repo_id}) 吗？')">重启</button>
<button class="action-button" onclick="showConfirmDialog('rebuild', '${instance.repo_id}', '确认重建', '您确定要重建实例 ${instance.name} (${instance.repo_id}) 吗？')">重建</button>
</div>
<div class="chart-container" id="chart-container-${instanceId}">
<canvas id="chart-${instanceId}"></canvas>
</div>
`;
container.appendChild(card);
}
const statusDot = card.querySelector('.status-dot');
const initialStatus = instance.status.toLowerCase();
if (initialStatus === 'running') {
statusDot.className = 'status-dot status-online';
} else if (initialStatus === 'sleeping') {
statusDot.className = 'status-dot status-sleep';
} else {
statusDot.className = 'status-dot status-offline';
}
serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline: initialStatus === 'running', isSleep: initialStatus === 'sleeping', data: null, status: instance.status });
}
// 切换图表显示/隐藏
function toggleChart(instanceId) {
const card = document.getElementById(`instance-${instanceId}`);
const chartContainer = document.getElementById(`chart-container-${instanceId}`);
const toggleButton = card.querySelector('.chart-toggle-button');
if (!card || !chartContainer) return;
if (card.classList.contains('expanded')) {
card.classList.remove('expanded');
toggleButton.textContent = '查看图表';
} else {
card.classList.add('expanded');
toggleButton.textContent = '收起图表';
// 如果图表未初始化，则创建
if (!chartInstances.has(instanceId)) {
createChart(instanceId);
}
}
}
function updateServerCard(data, instanceId, isSleep = false) {
const cardId = `instance-${instanceId}`;
let card = document.getElementById(cardId);
const instance = instanceMap.get(instanceId);
if (!card && instance) {
// 如果卡片不存在，但实例存在，说明可能被过滤掉了，不渲染
return;
}
if (card) {
const statusDot = card.querySelector('.status-dot');
let upload = 'N/A', download = 'N/A', cpuUsage = 'N/A', memoryUsage = 'N/A';
let isOnline = false;
if (data) {
cpuUsage = `${data.cpu_usage_pct}%`;
memoryUsage = `${((data.memory_used_bytes / data.memory_total_bytes) * 100).toFixed(2)}%`;
upload = `${formatBytes(data.tx_bps)}/s`;
download = `${formatBytes(data.rx_bps)}/s`;
statusDot.className = 'status-dot status-online';
isOnline = true;
isSleep = false;
// 更新图表数据
updateChart(instanceId, data);
} else {
const currentStatus = instance?.status.toLowerCase() || 'unknown';
if (currentStatus === 'running') {
statusDot.className = 'status-dot status-online';
isOnline = true;
isSleep = false;
} else if (currentStatus === 'sleeping') {
statusDot.className = 'status-dot status-sleep';
isOnline = false;
isSleep = true;
} else {
statusDot.className = 'status-dot status-offline';
isOnline = false;
isSleep = false;
}
}
card.querySelector('.cpu-usage').textContent = cpuUsage;
card.querySelector('.memory-usage').textContent = memoryUsage;
card.querySelector('.upload').textContent = upload;
card.querySelector('.download').textContent = download;
serverStatus.set(instanceId, { lastSeen: Date.now(), isOnline, isSleep, data: data || null, status: instance?.status || 'unknown' });
updateSummary();
}
}
async function restartSpace(repoId) {
try {
const token = localStorage.getItem('authToken');
if (!token || !isLoggedIn) {
alert('请先登录以执行此操作');
showLoginForm();
return;
}
showLoading();
const encodedRepoId = encodeURIComponent(repoId);
const response = await fetch(`/api/proxy/restart/${encodedRepoId}`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`
}
});
const result = await response.json();
hideLoading();
if (result.success) {
alert(`重启成功: ${repoId}`);
// 操作成功后立即刷新数据
refreshData();
} else {
if (response.status === 401) {
alert('登录已过期，请重新登录');
localStorage.removeItem('authToken');
isLoggedIn = false;
document.getElementById('loginButton').style.display = 'block';
document.getElementById('logoutButton').style.display = 'none';
updateActionButtons(false);
showLoginForm();
} else {
alert(`重启失败: ${result.error || '未知错误'}`);
console.error(`重启失败 (${repoId}):`, result.error, result.details);
}
}
} catch (error) {
hideLoading();
console.error(`重启失败 (${repoId}):`, error);
alert(`重启失败: ${error.message}`);
}
}
async function rebuildSpace(repoId) {
try {
const token = localStorage.getItem('authToken');
if (!token || !isLoggedIn) {
alert('请先登录以执行此操作');
showLoginForm();
return;
}
showLoading();
const encodedRepoId = encodeURIComponent(repoId);
const response = await fetch(`/api/proxy/rebuild/${encodedRepoId}`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`
}
});
const result = await response.json();
hideLoading();
if (result.success) {
alert(`重建成功: ${repoId}`);
// 操作成功后立即刷新数据
refreshData();
} else {
if (response.status === 401) {
alert('登录已过期，请重新登录');
localStorage.removeItem('authToken');
isLoggedIn = false;
document.getElementById('loginButton').style.display = 'block';
document.getElementById('logoutButton').style.display = 'none';
updateActionButtons(false);
showLoginForm();
} else {
alert(`重建失败: ${result.error || '未知错误'}`);
console.error(`重建失败 (${repoId}):`, result.error, result.details);
}
}
} catch (error) {
hideLoading();
console.error(`重建失败 (${repoId}):`, error);
alert(`重建失败: ${error.message}`);
}
}
function updateSummary() {
let online = 0;
let offline = 0;
let totalUpload = 0;
let totalDownload = 0;
serverStatus.forEach((status, instanceId) => {
const isRecentlyOnline = status.isOnline || status.status.toLowerCase() === 'running';
if (isRecentlyOnline) {
online++;
if (status.data) {
totalUpload += parseFloat(status.data.tx_bps) || 0;
totalDownload += parseFloat(status.data.rx_bps) || 0;
}
} else {
offline++;
}
});
document.getElementById('totalServers').textContent = serverStatus.size;
document.getElementById('onlineServers').textContent = online;
document.getElementById('offlineServers').textContent = offline;
document.getElementById('totalUpload').textContent = `${formatBytes(totalUpload)}/s`;
document.getElementById('totalDownload').textContent = `${formatBytes(totalDownload)}/s`;
}
function formatBytes(bytes) {
if (bytes === 0) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
setInterval(updateSummary, 5000);
setInterval(async () => {
metricsStreamManager.disconnect();
await initialize();
}, 300000);
// 应用过滤和排序
function applyFiltersAndSort() {
const statusFilter = document.getElementById('statusFilter').value;
const userFilter = document.getElementById('userFilter').value;
const sortBy = document.getElementById('sortBy').value;
// 过滤实例
let filteredInstances = allInstances;
if (statusFilter !== 'all') {
filteredInstances = filteredInstances.filter(instance => instance.status.toLowerCase() === statusFilter);
}
if (userFilter !== 'all') {
filteredInstances = filteredInstances.filter(instance => instance.owner === userFilter);
}
// 排序实例
filteredInstances.sort((a, b) => {
if (sortBy === 'name-asc') {
return a.name.localeCompare(b.name);
} else if (sortBy === 'name-desc') {
return b.name.localeCompare(a.name);
} else if (sortBy === 'status-asc') {
const statusOrder = { 'running': 0, 'sleeping': 1, 'stopped': 2 };
return statusOrder[a.status.toLowerCase()] - statusOrder[b.status.toLowerCase()];
} else if (sortBy === 'status-desc') {
const statusOrder = { 'running': 2, 'sleeping': 1, 'stopped': 0 };
return statusOrder[a.status.toLowerCase()] - statusOrder[b.status.toLowerCase()];
}
return 0;
});
// 重新渲染过滤和排序后的实例
instanceMap.clear();
serverStatus.clear();
metricsStreamManager.disconnect();
// 销毁现有图表实例
chartInstances.forEach(chart => {
if (chart) {
chart.destroy();
}
});
chartInstances.clear();
chartDataBuffer.clear();
renderInstances(filteredInstances);
// 默认监控状态为 running 的实例
const runningInstances = filteredInstances
.filter(instance => instance.status.toLowerCase() === 'running')
.map(instance => instance.repo_id);
metricsStreamManager.connect(runningInstances);
updateSummary();
updateActionButtons(isLoggedIn);
}
// 新增函数：在新标签页中打开实例的URL
function viewInstance(url) {
window.open(url, '_blank');
}
// 新增函数：在新标签页中打开实例的管理页面
function manageInstance(repoId) {
const manageUrl = `https://huggingface.co/spaces/${repoId}`;
window.open(manageUrl, '_blank');
}
</script>
</body>
</html>