f6c515157c
- 新增完整的 Python 实现，替代 Go 版本 - 添加 Web 登录界面和仪表板 - 实现 JWT 认证和 API 密钥管理 - 添加数据库存储功能 - 保持与 Go 版本一致的目录结构和启动脚本 - 包含完整的文档和测试脚本
326 lines
14 KiB
HTML
326 lines
14 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>仪表板 - Gitea Webhook Ambassador</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
padding: 48px 0 0;
|
|
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
|
}
|
|
.sidebar-sticky {
|
|
position: relative;
|
|
top: 0;
|
|
height: calc(100vh - 48px);
|
|
padding-top: .5rem;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.navbar-brand {
|
|
padding-top: .75rem;
|
|
padding-bottom: .75rem;
|
|
font-size: 1rem;
|
|
background-color: rgba(0, 0, 0, .25);
|
|
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
|
}
|
|
.health-indicator {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.health-indicator.healthy {
|
|
background-color: #28a745;
|
|
}
|
|
.health-indicator.unhealthy {
|
|
background-color: #dc3545;
|
|
}
|
|
.nav-link {
|
|
color: #333;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
margin: 0.125rem 0;
|
|
}
|
|
.nav-link:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.nav-link.active {
|
|
background-color: #0d6efd;
|
|
color: white;
|
|
}
|
|
.tab-content {
|
|
padding-top: 1rem;
|
|
}
|
|
.api-key {
|
|
font-family: monospace;
|
|
background-color: #f8f9fa;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.log-entry {
|
|
padding: 0.5rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
font-family: monospace;
|
|
font-size: 0.875rem;
|
|
}
|
|
.log-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.log-entry.error {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.log-entry.warn {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
.log-entry.info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
}
|
|
.log-entry.debug {
|
|
background-color: #e2e3e5;
|
|
color: #383d41;
|
|
}
|
|
.main-content {
|
|
margin-left: 240px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
|
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">
|
|
🔗 Gitea Webhook Ambassador
|
|
</a>
|
|
<div class="navbar-nav">
|
|
<div class="nav-item text-nowrap">
|
|
<span class="px-3 text-white">
|
|
<span class="health-indicator"></span>
|
|
<span id="healthStatus">检查中...</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
|
<div class="position-sticky pt-3">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#projects" data-bs-toggle="tab">
|
|
<i class="bi bi-folder"></i> 项目管理
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#api-keys" data-bs-toggle="tab">
|
|
<i class="bi bi-key"></i> API 密钥
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#logs" data-bs-toggle="tab">
|
|
<i class="bi bi-journal-text"></i> 日志查看
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#health" data-bs-toggle="tab">
|
|
<i class="bi bi-heart-pulse"></i> 健康状态
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
|
|
<div class="tab-content" id="myTabContent">
|
|
<!-- 项目管理 Tab -->
|
|
<div class="tab-pane fade show active" id="projects">
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">项目管理</h1>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addProjectModal">
|
|
<i class="bi bi-plus"></i> 添加项目
|
|
</button>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="projectsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>项目名称</th>
|
|
<th>Jenkins 任务</th>
|
|
<th>Gitea 仓库</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API 密钥 Tab -->
|
|
<div class="tab-pane fade" id="api-keys">
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">API 密钥管理</h1>
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#generateKeyModal">
|
|
<i class="bi bi-plus"></i> 生成新密钥
|
|
</button>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="apiKeysTable">
|
|
<thead>
|
|
<tr>
|
|
<th>描述</th>
|
|
<th>密钥</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 日志查看 Tab -->
|
|
<div class="tab-pane fade" id="logs">
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">日志查看</h1>
|
|
</div>
|
|
<form id="logQueryForm" class="row g-3 mb-3">
|
|
<div class="col-md-3">
|
|
<label for="startTime" class="form-label">开始时间</label>
|
|
<input type="datetime-local" class="form-control" id="startTime">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="endTime" class="form-label">结束时间</label>
|
|
<input type="datetime-local" class="form-control" id="endTime">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="logLevel" class="form-label">日志级别</label>
|
|
<select class="form-select" id="logLevel">
|
|
<option value="">全部</option>
|
|
<option value="error">错误</option>
|
|
<option value="warn">警告</option>
|
|
<option value="info">信息</option>
|
|
<option value="debug">调试</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="logQuery" class="form-label">搜索关键词</label>
|
|
<input type="text" class="form-control" id="logQuery" placeholder="搜索日志...">
|
|
</div>
|
|
<div class="col-md-1">
|
|
<label class="form-label"> </label>
|
|
<button type="submit" class="btn btn-primary w-100">搜索</button>
|
|
</div>
|
|
</form>
|
|
<div id="logEntries" class="border rounded p-3 bg-light" style="max-height: 500px; overflow-y: auto;"></div>
|
|
</div>
|
|
|
|
<!-- 健康状态 Tab -->
|
|
<div class="tab-pane fade" id="health">
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">健康状态</h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">服务状态</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="healthDetails"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">统计信息</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="statsDetails"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加项目模态框 -->
|
|
<div class="modal fade" id="addProjectModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">添加新项目</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="addProjectForm">
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="projectName" class="form-label">项目名称</label>
|
|
<input type="text" class="form-control" id="projectName" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="jenkinsJob" class="form-label">Jenkins 任务</label>
|
|
<input type="text" class="form-control" id="jenkinsJob" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="giteaRepo" class="form-label">Gitea 仓库</label>
|
|
<input type="text" class="form-control" id="giteaRepo" placeholder="owner/repo" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="submit" class="btn btn-primary">添加项目</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 生成 API 密钥模态框 -->
|
|
<div class="modal fade" id="generateKeyModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">生成新 API 密钥</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="generateKeyForm">
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="keyDescription" class="form-label">密钥描述</label>
|
|
<input type="text" class="form-control" id="keyDescription" required>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
|
<button type="submit" class="btn btn-primary">生成密钥</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/dashboard.js"></script>
|
|
</body>
|
|
</html> |