feat(frontend): add Helm chart browser, monitoring, chart-references and values templates pages
Add new frontend pages for the multi-tenant OCDP platform: - Charts page (/charts): Browse Harbor OCI registries to list Helm chart repositories and versions, with deploy modal to launch charts on selected clusters - Monitoring page (/monitoring): Display cluster metrics (CPU/Memory/GPU usage) and per-node details with resource utilization bars - Chart References page (/chart-references): CRUD for chart metadata references - Values Templates page (/templates): CRUD for Helm values templates with version history and rollback support - Sidebar: Add Charts navigation, update Storage and Templates links - api.ts: Add all API client functions (clusterApi, registryApi, instanceApi, monitoringApi, storageApi, chartReferenceApi, valuesTemplateApi, workspaceApi, userApi) with full TypeScript types Note: deploy flow and values template rollback not yet end-to-end tested.
This commit is contained in:
Ivan087
@ -1,431 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OCDP API camelCase 测试</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 2px solid #667eea;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #555;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: #2196F3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #FF9800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.log-container {
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
min-height: 400px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.log-success {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.log-error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.log-warning {
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.log-info {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status.loading {
|
||||
background: #FFF3CD;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #D4EDDA;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #F8D7DA;
|
||||
color: #721C24;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🧪 OCDP API camelCase 测试</h1>
|
||||
<p>测试前后端 camelCase 通信是否正常</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="section">
|
||||
<h2>⚙️ 配置</h2>
|
||||
<div class="input-group">
|
||||
<label for="apiUrl">API 地址:</label>
|
||||
<input type="text" id="apiUrl" value="http://localhost:8080/api/v1" />
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="token">Token (登录后自动填充):</label>
|
||||
<input type="text" id="token" placeholder="JWT Token" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>🎮 测试操作</h2>
|
||||
<div class="buttons">
|
||||
<button class="btn-success" onclick="testLogin()">1. 测试登录</button>
|
||||
<button class="btn-info" onclick="testListClusters()">2. 获取集群列表</button>
|
||||
<button class="btn-warning" onclick="testCreateCluster()">3. 创建集群</button>
|
||||
<button class="btn-primary" onclick="testFullFlow()">🚀 完整测试</button>
|
||||
<button class="btn-danger" onclick="clearLog()">清除日志</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="status" class="status hidden"></div>
|
||||
|
||||
<div class="section">
|
||||
<h2>📋 测试日志</h2>
|
||||
<div id="log" class="log-container">点击按钮开始测试...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const logEl = document.getElementById('log');
|
||||
const statusEl = document.getElementById('status');
|
||||
const tokenInput = document.getElementById('token');
|
||||
const apiUrlInput = document.getElementById('apiUrl');
|
||||
|
||||
function getApiUrl() {
|
||||
return apiUrlInput.value;
|
||||
}
|
||||
|
||||
function getToken() {
|
||||
return tokenInput.value;
|
||||
}
|
||||
|
||||
function setStatus(message, type = 'loading') {
|
||||
statusEl.textContent = message;
|
||||
statusEl.className = `status ${type}`;
|
||||
statusEl.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hideStatus() {
|
||||
statusEl.classList.add('hidden');
|
||||
}
|
||||
|
||||
function log(message, type = 'info') {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const className = `log-${type}`;
|
||||
logEl.innerHTML += `<span class="${className}">[${timestamp}] ${message}</span>\n`;
|
||||
logEl.scrollTop = logEl.scrollHeight;
|
||||
}
|
||||
|
||||
function clearLog() {
|
||||
logEl.innerHTML = '';
|
||||
hideStatus();
|
||||
log('日志已清除', 'info');
|
||||
}
|
||||
|
||||
async function testLogin() {
|
||||
clearLog();
|
||||
log('🔐 开始测试登录...', 'info');
|
||||
setStatus('正在登录...', 'loading');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${getApiUrl()}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
username: 'admin',
|
||||
password: 'admin123'
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
log('响应数据:\n' + JSON.stringify(data, null, 2), 'info');
|
||||
|
||||
if (data.accessToken) {
|
||||
log('✅ 登录成功!', 'success');
|
||||
tokenInput.value = data.accessToken;
|
||||
|
||||
// 验证 camelCase
|
||||
if ('accessToken' in data) log(' ✓ accessToken 字段存在 (camelCase)', 'success');
|
||||
if ('refreshToken' in data) log(' ✓ refreshToken 字段存在 (camelCase)', 'success');
|
||||
if ('userId' in data) log(' ✓ userId 字段存在 (camelCase)', 'success');
|
||||
|
||||
setStatus('✅ 登录成功！', 'success');
|
||||
} else {
|
||||
log('❌ 登录失败: 未找到 accessToken', 'error');
|
||||
setStatus('❌ 登录失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
log(`❌ 请求失败: ${error.message}`, 'error');
|
||||
setStatus('❌ 请求失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function testListClusters() {
|
||||
log('\n📋 开始获取集群列表...', 'info');
|
||||
const token = getToken();
|
||||
|
||||
if (!token) {
|
||||
log('❌ 请先登录获取 Token', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus('正在获取集群列表...', 'loading');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${getApiUrl()}/clusters`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
log(`响应数据 (共 ${Array.isArray(data) ? data.length : 0} 个集群):\n` +
|
||||
JSON.stringify(data, null, 2), 'info');
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
log('✅ 获取集群列表成功!', 'success');
|
||||
|
||||
// 验证 camelCase
|
||||
if (data.length > 0) {
|
||||
const cluster = data[0];
|
||||
if ('createdAt' in cluster) log(' ✓ createdAt 字段存在 (camelCase)', 'success');
|
||||
if ('updatedAt' in cluster) log(' ✓ updatedAt 字段存在 (camelCase)', 'success');
|
||||
if ('hasCaData' in cluster) log(' ✓ hasCaData 字段存在 (camelCase)', 'success');
|
||||
}
|
||||
|
||||
setStatus(`✅ 获取成功！共 ${data.length} 个集群`, 'success');
|
||||
} else {
|
||||
log('❌ 响应格式错误', 'error');
|
||||
setStatus('❌ 响应格式错误', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
log(`❌ 请求失败: ${error.message}`, 'error');
|
||||
setStatus('❌ 请求失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function testCreateCluster() {
|
||||
log('\n🚀 开始创建集群 (使用 camelCase)...', 'info');
|
||||
const token = getToken();
|
||||
|
||||
if (!token) {
|
||||
log('❌ 请先登录获取 Token', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus('正在创建集群...', 'loading');
|
||||
|
||||
const clusterData = {
|
||||
name: `test-cluster-${Date.now()}`,
|
||||
host: 'https://k8s.test.example.com:6443',
|
||||
description: '测试集群 - camelCase 验证',
|
||||
caData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t',
|
||||
certData: 'LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t',
|
||||
keyData: 'LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBLRVkt'
|
||||
};
|
||||
|
||||
log('请求数据 (camelCase):\n' + JSON.stringify(clusterData, null, 2), 'info');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${getApiUrl()}/clusters`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(clusterData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
log('响应数据:\n' + JSON.stringify(data, null, 2), 'info');
|
||||
|
||||
if (data.id) {
|
||||
log('✅ 创建集群成功!', 'success');
|
||||
log(` 集群 ID: ${data.id}`, 'info');
|
||||
|
||||
// 验证 camelCase
|
||||
if ('hasCaData' in data) log(' ✓ hasCaData 字段存在 (camelCase)', 'success');
|
||||
if ('hasCertData' in data) log(' ✓ hasCertData 字段存在 (camelCase)', 'success');
|
||||
if ('createdAt' in data) log(' ✓ createdAt 字段存在 (camelCase)', 'success');
|
||||
|
||||
setStatus('✅ 创建成功！', 'success');
|
||||
} else {
|
||||
log('❌ 创建失败或响应格式错误', 'error');
|
||||
setStatus('❌ 创建失败', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
log(`❌ 请求失败: ${error.message}`, 'error');
|
||||
setStatus('❌ 请求失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async function testFullFlow() {
|
||||
clearLog();
|
||||
log('🧪 开始完整测试流程...\n', 'info');
|
||||
setStatus('正在执行完整测试...', 'loading');
|
||||
|
||||
// 步骤 1: 登录
|
||||
await testLogin();
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 步骤 2: 获取集群列表
|
||||
await testListClusters();
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 步骤 3: 创建集群
|
||||
await testCreateCluster();
|
||||
|
||||
log('\n🎉 完整测试流程完成!', 'success');
|
||||
log('所有 API 调用成功，camelCase 工作正常！', 'success');
|
||||
setStatus('🎉 完整测试通过！', 'success');
|
||||
}
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
window.addEventListener('load', () => {
|
||||
log('🌐 页面已加载，可以开始测试', 'info');
|
||||
log('提示: 点击 "🚀 完整测试" 运行所有测试\n', 'info');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1
frontend/public/file.svg
Normal file
1
frontend/public/file.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
1
frontend/public/globe.svg
Normal file
1
frontend/public/globe.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
frontend/public/next.svg
Normal file
1
frontend/public/next.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
frontend/public/vercel.svg
Normal file
1
frontend/public/vercel.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
frontend/public/window.svg
Normal file
1
frontend/public/window.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
Reference in New Issue
Block a user