242 lines
10 KiB
HTML
242 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>DCTS — 分布式恒星大气网格计算控制台</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/src/style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 顶部导航栏 (Header) -->
|
|
<header class="header">
|
|
<div class="logo-container">
|
|
<div class="logo-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="logo-title">DCTS 集群控制台</h1>
|
|
<p class="logo-subtitle">Distributed Computing TLUSTY / SYNSPEC Grid System</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-status">
|
|
<div class="status-indicator online" id="status-indicator-box">
|
|
<span class="status-dot"></span>
|
|
<span id="server-status-text">服务端正常运行</span>
|
|
</div>
|
|
<button id="btn-create-wf" class="btn btn-primary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
创建工作流
|
|
</button>
|
|
<button id="refresh-btn" class="btn btn-secondary">
|
|
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M23 4v6h-6M1 20v-6h6"/>
|
|
<path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
|
|
</svg>
|
|
刷新
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-container">
|
|
<!-- 核心指标卡片 -->
|
|
<section class="metrics-grid">
|
|
<div class="metric-card glass">
|
|
<div class="metric-header">
|
|
<span class="metric-title">在线计算节点</span>
|
|
<div class="metric-icon nodes-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"/>
|
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"/>
|
|
<line x1="6" y1="6" x2="6.01" y2="6"/>
|
|
<line x1="6" y1="18" x2="6.01" y2="18"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="metric-body">
|
|
<span class="metric-value" id="val-active-nodes">0</span>
|
|
<span class="metric-sub" id="val-total-slots">0 / 0 CPU 槽位占用</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card glass">
|
|
<div class="metric-header">
|
|
<span class="metric-title">待计算网格点</span>
|
|
<div class="metric-icon pending-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="metric-body">
|
|
<span class="metric-value" id="val-pending-tasks">0</span>
|
|
<span class="metric-sub" id="val-running-tasks">0 个任务计算中</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card glass">
|
|
<div class="metric-header">
|
|
<span class="metric-title">已收敛网格模型</span>
|
|
<div class="metric-icon success-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
|
<polyline points="22 4 12 14.01 9 11.01"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="metric-body">
|
|
<span class="metric-value" id="val-completed-tasks">0</span>
|
|
<span class="metric-sub" id="val-completion-rate">全网网格总数: 0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card glass">
|
|
<div class="metric-header">
|
|
<span class="metric-title">计算工作流</span>
|
|
<div class="metric-icon workflow-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
|
|
<polyline points="2 17 12 22 22 17"/>
|
|
<polyline points="2 12 12 17 22 12"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="metric-body">
|
|
<span class="metric-value" id="val-total-workflows">0</span>
|
|
<span class="metric-sub" id="val-active-wf">系统已就绪</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 主要内容双栏 -->
|
|
<div class="content-grid">
|
|
<!-- 节点集群状态 -->
|
|
<div class="panel glass">
|
|
<div class="panel-header">
|
|
<h2>计算节点集群 (Worker Nodes)</h2>
|
|
<span class="badge" id="node-count-badge">0 个节点</span>
|
|
</div>
|
|
<div class="panel-body table-responsive">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>节点 ID</th>
|
|
<th>主机名</th>
|
|
<th>CPU 槽位</th>
|
|
<th>CPU 使用率</th>
|
|
<th>内存使用率</th>
|
|
<th>心跳时间</th>
|
|
<th>状态</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="nodes-table-body">
|
|
<tr>
|
|
<td colspan="7" class="empty-cell">正在连接服务端获取计算节点...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：工作流管理与数据资源下载 -->
|
|
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
|
|
<!-- 工作流面板 -->
|
|
<div class="panel glass">
|
|
<div class="panel-header">
|
|
<h2>恒星大气网格工作流 (Workflows)</h2>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="workflows-list" class="workflows-container">
|
|
<div class="empty-cell">正在获取工作流配置...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 系统资源与数据下载 -->
|
|
<div class="panel glass">
|
|
<div class="panel-header">
|
|
<h2>大气与谱线数据资源 (Data Resources)</h2>
|
|
</div>
|
|
<div class="panel-body" style="display: flex; flex-direction: column; gap: 0.75rem;">
|
|
<p style="font-size: 0.85rem; color: var(--text-secondary);">
|
|
如需本地运行计算节点或检验谱线列表，可直接通过服务端 API 获取静态配分函数及原子文件：
|
|
</p>
|
|
<div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
|
|
<a href="/api/data/linelist" target="_blank" class="btn btn-secondary btn-sm">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
下载 原子谱线列表 (Line List)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 创建 / 编辑工作流 模态弹窗 -->
|
|
<div id="modal-workflow" class="modal-backdrop hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">注册新的计算工作流</h3>
|
|
<button id="modal-close-btn" class="modal-close">×</button>
|
|
</div>
|
|
<form id="form-workflow" style="display: flex; flex-direction: column; gap: 1rem;">
|
|
<div class="form-group">
|
|
<label for="input-wf-name">工作流名称 (Identifier)</label>
|
|
<input type="text" id="input-wf-name" class="form-input" placeholder="例如: sdB_cno" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="input-wf-desc">描述信息</label>
|
|
<input type="text" id="input-wf-desc" class="form-input" placeholder="例如: sdB 6维恒星大气模型计算网格" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="input-wf-yaml">YAML 配置内容 (GridConfig)</label>
|
|
<textarea id="input-wf-yaml" class="form-textarea" required placeholder="请粘贴工作流 YAML 参数网格定义..."></textarea>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="btn-cancel-modal" class="btn btn-secondary">取消</button>
|
|
<button type="submit" class="btn btn-primary">提交保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 查看 YAML 模态弹窗 -->
|
|
<div id="modal-view-yaml" class="modal-backdrop hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-header">
|
|
<h3 id="view-yaml-title">工作流 YAML 配置详情</h3>
|
|
<button id="view-yaml-close-btn" class="modal-close">×</button>
|
|
</div>
|
|
<pre id="view-yaml-content" style="background: var(--bg-sunken); padding: 1rem; border-radius: 6px; font-family: var(--font-mono); font-size: 0.85rem; overflow-x: auto; max-height: 350px;"></pre>
|
|
<div class="modal-footer">
|
|
<button type="button" id="btn-close-yaml-modal" class="btn btn-secondary">关闭</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<p>DCTS 分布式恒星大气计算系统 © 2026 TLUSTY/SYNSPEC Project</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|