bitforge/warehouse13
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rebrand to Obsidian with modern UI and auto-refresh

Browse Source 
- Renamed project from "Test Artifact Data Lake" to "Obsidian"
- Updated all branding across README, quickstart scripts, and API
- Implemented dark mode theme with professional color palette
- Simplified table to 4 essential columns (Sim Source, Artifacts, Date, Uploaded By)
- Replaced emoji icons with Lucide SVG icons for better scaling
- Added auto-refresh functionality (5-second intervals, toggleable)
- Enhanced UI with modern flexbox layouts and hover effects
- Updated upload form labels to match new terminology

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mondo Diaz
2025-10-15 08:30:21 -05:00
parent 1ce27976a9
commit 4bc8310070
8 changed files with 209 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -1,4 +1,6 @@
# Test Artifact Data Lake # Obsidian
**Enterprise Test Artifact Storage**
A lightweight, cloud-native API for storing and querying test artifacts including CSV files, JSON files, binary files, and packet captures (PCAP). Built with FastAPI and supports both AWS S3 and self-hosted MinIO storage backends. A lightweight, cloud-native API for storing and querying test artifacts including CSV files, JSON files, binary files, and packet captures (PCAP). Built with FastAPI and supports both AWS S3 and self-hosted MinIO storage backends.

8
app/main.py
View File

@@ -19,8 +19,8 @@ logger = logging.getLogger(__name__)
# Create FastAPI app # Create FastAPI app
app = FastAPI( app = FastAPI(
title="Test Artifact Data Lake", title="Obsidian",
description="API for storing and querying test artifacts including CSV, JSON, binary files, and packet captures", description="Enterprise Test Artifact Storage - API for storing and querying test artifacts including CSV, JSON, binary files, and packet captures",
version="1.0.0", version="1.0.0",
docs_url="/docs", docs_url="/docs",
redoc_url="/redoc" redoc_url="/redoc"
@@ -59,7 +59,7 @@ async def startup_event():
async def api_root(): async def api_root():
"""API root endpoint""" """API root endpoint"""
return { return {
"message": "Test Artifact Data Lake API", "message": "Obsidian - Enterprise Test Artifact Storage",
"version": "1.0.0", "version": "1.0.0",
"docs": "/docs", "docs": "/docs",
"deployment_mode": settings.deployment_mode, "deployment_mode": settings.deployment_mode,
@@ -75,7 +75,7 @@ async def ui_root():
return FileResponse(index_path) return FileResponse(index_path)
else: else:
return { return {
"message": "Test Artifact Data Lake API", "message": "Obsidian - Enterprise Test Artifact Storage",
"version": "1.0.0", "version": "1.0.0",
"docs": "/docs", "docs": "/docs",
"ui": "UI not found. Serving API only.", "ui": "UI not found. Serving API only.",

2
quickstart.bat
View File

@@ -2,7 +2,7 @@
setlocal enabledelayedexpansion setlocal enabledelayedexpansion
echo ========================================= echo =========================================
echo Test Artifact Data Lake - Quick Start echo Obsidian - Quick Start
echo ========================================= echo =========================================
echo. echo.

2
quickstart.ps1
View File

@@ -1,7 +1,7 @@
# Test Artifact Data Lake - Quick Start (PowerShell) # Test Artifact Data Lake - Quick Start (PowerShell)
Write-Host "=========================================" -ForegroundColor Cyan Write-Host "=========================================" -ForegroundColor Cyan
Write-Host "Test Artifact Data Lake - Quick Start" -ForegroundColor Cyan Write-Host "Obsidian - Quick Start" -ForegroundColor Cyan
Write-Host "=========================================" -ForegroundColor Cyan Write-Host "=========================================" -ForegroundColor Cyan
Write-Host "" Write-Host ""

2
quickstart.sh
View File

@@ -3,7 +3,7 @@
set -e set -e
echo "=========================================" echo "========================================="
echo "Test Artifact Data Lake - Quick Start" echo "Obsidian - Quick Start"
echo "=========================================" echo "========================================="
echo "" echo ""

158
static/css/styles.css
View File

@@ -6,22 +6,23 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #0f172a;
min-height: 100vh; min-height: 100vh;
padding: 20px; padding: 20px;
color: #e2e8f0;
} }
.container { .container {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
background: white; background: #1e293b;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
overflow: hidden; overflow: hidden;
} }
header { header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 100%);
color: white; color: white;
padding: 30px; padding: 30px;
display: flex; display: flex;
@@ -51,8 +52,8 @@ header h1 {
.tabs { .tabs {
display: flex; display: flex;
background: #f7f9fc; background: #0f172a;
border-bottom: 2px solid #e2e8f0; border-bottom: 2px solid #334155;
} }
.tab-button { .tab-button {
@@ -64,17 +65,22 @@ header h1 {
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
color: #64748b; color: #94a3b8;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
} }
.tab-button:hover { .tab-button:hover {
background: #e2e8f0; background: #1e293b;
color: #e2e8f0;
} }
.tab-button.active { .tab-button.active {
background: white; background: #1e293b;
color: #667eea; color: #60a5fa;
border-bottom: 3px solid #667eea; border-bottom: 3px solid #60a5fa;
} }
.tab-content { .tab-content {
@@ -101,25 +107,28 @@ header h1 {
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
} }
.btn-primary { .btn-primary {
background: #667eea; background: #3b82f6;
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background: #5568d3; background: #2563eb;
transform: translateY(-1px); transform: translateY(-1px);
} }
.btn-secondary { .btn-secondary {
background: #e2e8f0; background: #334155;
color: #475569; color: #e2e8f0;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: #cbd5e1; background: #475569;
} }
.btn-danger { .btn-danger {
@@ -142,8 +151,8 @@ header h1 {
} }
.count-badge { .count-badge {
background: #f0f9ff; background: #1e3a8a;
color: #0369a1; color: #93c5fd;
padding: 8px 16px; padding: 8px 16px;
border-radius: 20px; border-radius: 20px;
font-size: 13px; font-size: 13px;
@@ -153,8 +162,9 @@ header h1 {
.table-container { .table-container {
overflow-x: auto; overflow-x: auto;
border: 1px solid #e2e8f0; border: 1px solid #334155;
border-radius: 8px; border-radius: 8px;
background: #0f172a;
} }
table { table {
@@ -164,30 +174,34 @@ table {
} }
thead { thead {
background: #f7f9fc; background: #1e293b;
} }
th { th {
padding: 14px 12px; padding: 14px 12px;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
color: #475569; color: #94a3b8;
border-bottom: 2px solid #e2e8f0; border-bottom: 2px solid #334155;
white-space: nowrap; white-space: nowrap;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
} }
td { td {
padding: 12px; padding: 16px 12px;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #1e293b;
color: #cbd5e1;
} }
tbody tr:hover { tbody tr:hover {
background: #f7f9fc; background: #1e293b;
} }
.loading { .loading {
text-align: center; text-align: center;
color: #94a3b8; color: #64748b;
padding: 40px !important; padding: 40px !important;
} }
@@ -200,29 +214,29 @@ tbody tr:hover {
} }
.result-pass { .result-pass {
background: #d1fae5; background: #064e3b;
color: #065f46; color: #6ee7b7;
} }
.result-fail { .result-fail {
background: #fee2e2; background: #7f1d1d;
color: #991b1b; color: #fca5a5;
} }
.result-skip { .result-skip {
background: #fef3c7; background: #78350f;
color: #92400e; color: #fcd34d;
} }
.result-error { .result-error {
background: #fecaca; background: #7f1d1d;
color: #7f1d1d; color: #fca5a5;
} }
.tag { .tag {
display: inline-block; display: inline-block;
background: #e0e7ff; background: #1e3a8a;
color: #3730a3; color: #93c5fd;
padding: 3px 8px; padding: 3px 8px;
border-radius: 10px; border-radius: 10px;
font-size: 11px; font-size: 11px;
@@ -230,8 +244,8 @@ tbody tr:hover {
} }
.file-type-badge { .file-type-badge {
background: #dbeafe; background: #1e3a8a;
color: #1e40af; color: #93c5fd;
padding: 4px 8px; padding: 4px 8px;
border-radius: 6px; border-radius: 6px;
font-size: 11px; font-size: 11px;
@@ -250,7 +264,7 @@ tbody tr:hover {
#page-info { #page-info {
font-weight: 500; font-weight: 500;
color: #64748b; color: #94a3b8;
} }
.upload-section, .query-section { .upload-section, .query-section {
@@ -271,7 +285,7 @@ tbody tr:hover {
label { label {
display: block; display: block;
font-weight: 500; font-weight: 500;
color: #475569; color: #cbd5e1;
margin-bottom: 6px; margin-bottom: 6px;
font-size: 14px; font-size: 14px;
} }
@@ -283,23 +297,25 @@ select,
textarea { textarea {
width: 100%; width: 100%;
padding: 10px 14px; padding: 10px 14px;
border: 1px solid #e2e8f0; border: 1px solid #334155;
border-radius: 6px; border-radius: 6px;
font-size: 14px; font-size: 14px;
font-family: inherit; font-family: inherit;
transition: border-color 0.3s; transition: border-color 0.3s;
background: #0f172a;
color: #e2e8f0;
} }
input:focus, input:focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
outline: none; outline: none;
border-color: #667eea; border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
} }
small { small {
color: #94a3b8; color: #64748b;
font-size: 12px; font-size: 12px;
display: block; display: block;
margin-top: 4px; margin-top: 4px;
@@ -313,14 +329,14 @@ small {
} }
#upload-status.success { #upload-status.success {
background: #d1fae5; background: #064e3b;
color: #065f46; color: #6ee7b7;
display: block; display: block;
} }
#upload-status.error { #upload-status.error {
background: #fee2e2; background: #7f1d1d;
color: #991b1b; color: #fca5a5;
display: block; display: block;
} }
@@ -332,7 +348,7 @@ small {
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
} }
@@ -343,14 +359,15 @@ small {
} }
.modal-content { .modal-content {
background: white; background: #1e293b;
padding: 30px; padding: 30px;
border-radius: 12px; border-radius: 12px;
max-width: 700px; max-width: 700px;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
border: 1px solid #334155;
} }
.close { .close {
@@ -359,19 +376,19 @@ small {
top: 20px; top: 20px;
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
color: #94a3b8; color: #64748b;
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
} }
.close:hover { .close:hover {
color: #475569; color: #e2e8f0;
} }
.detail-row { .detail-row {
margin-bottom: 16px; margin-bottom: 16px;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #334155;
} }
.detail-row:last-child { .detail-row:last-child {
@@ -380,20 +397,29 @@ small {
.detail-label { .detail-label {
font-weight: 600; font-weight: 600;
color: #475569; color: #94a3b8;
margin-bottom: 4px; margin-bottom: 4px;
} }
.detail-value { .detail-value {
color: #64748b; color: #cbd5e1;
} }
pre { pre {
background: #f7f9fc; background: #0f172a;
padding: 12px; padding: 12px;
border-radius: 6px; border-radius: 6px;
overflow-x: auto; overflow-x: auto;
font-size: 12px; font-size: 12px;
border: 1px solid #334155;
}
code {
background: #0f172a;
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
color: #93c5fd;
} }
.action-buttons { .action-buttons {
@@ -405,14 +431,24 @@ pre {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 18px; padding: 8px;
padding: 6px;
border-radius: 4px; border-radius: 4px;
transition: background 0.3s; transition: all 0.3s;
color: #94a3b8;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.icon-btn:hover { .icon-btn:hover {
background: #e2e8f0; background: #334155;
color: #e2e8f0;
transform: scale(1.1);
}
/* Ensure SVG icons inherit color */
.icon-btn svg {
stroke: currentColor;
} }
@media (max-width: 768px) { @media (max-width: 768px) {

67
static/index.html
View File

@@ -3,13 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Artifact Data Lake</title> <title>Obsidian - Test Artifact Data Lake</title>
<link rel="stylesheet" href="/static/css/styles.css"> <link rel="stylesheet" href="/static/css/styles.css">
<script src="https://unpkg.com/lucide@latest"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>🗄️ Test Artifact Data Lake</h1> <h1>◆ Obsidian</h1>
<div class="header-info"> <div class="header-info">
<span id="deployment-mode" class="badge"></span> <span id="deployment-mode" class="badge"></span>
<span id="storage-backend" class="badge"></span> <span id="storage-backend" class="badge"></span>
@@ -17,16 +18,29 @@
</header> </header>
<nav class="tabs"> <nav class="tabs">
<button class="tab-button active" onclick="showTab('artifacts')">📋 Artifacts</button> <button class="tab-button active" onclick="showTab('artifacts')">
<button class="tab-button" onclick="showTab('upload')">⬆️ Upload</button> <i data-lucide="database" style="width: 16px; height: 16px;"></i> Artifacts
<button class="tab-button" onclick="showTab('query')">🔍 Query</button> </button>
<button class="tab-button" onclick="showTab('upload')">
<i data-lucide="upload" style="width: 16px; height: 16px;"></i> Upload
</button>
<button class="tab-button" onclick="showTab('query')">
<i data-lucide="search" style="width: 16px; height: 16px;"></i> Query
</button>
</nav> </nav>
<!-- Artifacts Tab --> <!-- Artifacts Tab -->
<div id="artifacts-tab" class="tab-content active"> <div id="artifacts-tab" class="tab-content active">
<div class="toolbar"> <div class="toolbar">
<button onclick="loadArtifacts()" class="btn btn-primary">🔄 Refresh</button> <button onclick="loadArtifacts()" class="btn btn-primary">
<button onclick="generateSeedData()" class="btn btn-secondary">🌱 Generate Seed Data</button> <i data-lucide="refresh-cw" style="width: 16px; height: 16px;"></i> Refresh
</button>
<button id="auto-refresh-toggle" onclick="toggleAutoRefresh()" class="btn btn-success">
Auto-refresh: ON
</button>
<button onclick="generateSeedData()" class="btn btn-secondary">
<i data-lucide="sparkles" style="width: 16px; height: 16px;"></i> Generate Seed Data
</button>
<span id="artifact-count" class="count-badge"></span> <span id="artifact-count" class="count-badge"></span>
</div> </div>
@@ -34,21 +48,16 @@
<table id="artifacts-table"> <table id="artifacts-table">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>Sim Source</th>
<th>Filename</th> <th>Artifacts</th>
<th>Type</th> <th>Date</th>
<th>Size</th> <th>Uploaded By</th>
<th>Test Name</th>
<th>Suite</th>
<th>Result</th>
<th>Tags</th>
<th>Created</th>
<th>Actions</th> <th>Actions</th>
</tr> </tr>
</thead> </thead>
<tbody id="artifacts-tbody"> <tbody id="artifacts-tbody">
<tr> <tr>
<td colspan="10" class="loading">Loading artifacts...</td> <td colspan="5" class="loading">Loading artifacts...</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -74,12 +83,12 @@
<div class="form-row"> <div class="form-row">
<div class="form-group"> <div class="form-group">
<label for="test-name">Test Name</label> <label for="sim-source">Sim Source *</label>
<input type="text" id="test-name" name="test_name" placeholder="e.g., login_test"> <input type="text" id="sim-source" name="test_suite" placeholder="e.g., Jenkins, GitLab CI" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="test-suite">Test Suite</label> <label for="uploaded-by">Uploaded By *</label>
<input type="text" id="test-suite" name="test_suite" placeholder="e.g., integration"> <input type="text" id="uploaded-by" name="test_name" placeholder="e.g., john.doe" required>
</div> </div>
</div> </div>
@@ -120,7 +129,9 @@
<textarea id="custom-metadata" name="custom_metadata" rows="4" placeholder='{"build": "1234", "commit": "abc123"}'></textarea> <textarea id="custom-metadata" name="custom_metadata" rows="4" placeholder='{"build": "1234", "commit": "abc123"}'></textarea>
</div> </div>
<button type="submit" class="btn btn-primary btn-large">📤 Upload Artifact</button> <button type="submit" class="btn btn-primary btn-large">
<i data-lucide="upload" style="width: 18px; height: 18px;"></i> Upload Artifact
</button>
</form> </form>
<div id="upload-status"></div> <div id="upload-status"></div>
</div> </div>
@@ -187,8 +198,12 @@
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary btn-large">🔍 Search</button> <button type="submit" class="btn btn-primary btn-large">
<button type="button" onclick="clearQuery()" class="btn btn-secondary">Clear</button> <i data-lucide="search" style="width: 18px; height: 18px;"></i> Search
</button>
<button type="button" onclick="clearQuery()" class="btn btn-secondary">
<i data-lucide="x" style="width: 18px; height: 18px;"></i> Clear
</button>
</form> </form>
</div> </div>
</div> </div>
@@ -204,5 +219,9 @@
</div> </div>
<script src="/static/js/app.js"></script> <script src="/static/js/app.js"></script>
<script>
// Initialize Lucide icons
lucide.createIcons();
</script>
</body> </body>
</html> </html>

74
static/js/app.js
View File

@@ -6,10 +6,16 @@ let currentPage = 1;
let pageSize = 25; let pageSize = 25;
let totalArtifacts = 0; let totalArtifacts = 0;
// Auto-refresh
let autoRefreshEnabled = true;
let autoRefreshInterval = null;
const REFRESH_INTERVAL_MS = 5000; // 5 seconds
// Load API info on page load // Load API info on page load
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
loadApiInfo(); loadApiInfo();
loadArtifacts(); loadArtifacts();
startAutoRefresh();
}); });
// Load API information // Load API information
@@ -48,33 +54,28 @@ function displayArtifacts(artifacts) {
const tbody = document.getElementById('artifacts-tbody'); const tbody = document.getElementById('artifacts-tbody');
if (artifacts.length === 0) { if (artifacts.length === 0) {
tbody.innerHTML = '<tr><td colspan="10" class="loading">No artifacts found. Upload some files to get started!</td></tr>'; tbody.innerHTML = '<tr><td colspan="5" class="loading">No artifacts found. Upload some files to get started!</td></tr>';
document.getElementById('artifact-count').textContent = '0 artifacts'; document.getElementById('artifact-count').textContent = '0 artifacts';
return; return;
} }
tbody.innerHTML = artifacts.map(artifact => ` tbody.innerHTML = artifacts.map(artifact => `
<tr> <tr>
<td><strong>${artifact.id}</strong></td> <td>${artifact.test_suite || '-'}</td>
<td> <td>
<a href="#" onclick="showDetail(${artifact.id}); return false;" style="color: #667eea; text-decoration: none;"> <a href="#" onclick="showDetail(${artifact.id}); return false;" style="color: #60a5fa; text-decoration: none;">
${escapeHtml(artifact.filename)} ${escapeHtml(artifact.filename)}
</a> </a>
</td> </td>
<td><span class="file-type-badge">${artifact.file_type}</span></td> <td>${formatDate(artifact.created_at)}</td>
<td>${formatBytes(artifact.file_size)}</td>
<td>${artifact.test_name || '-'}</td> <td>${artifact.test_name || '-'}</td>
<td>${artifact.test_suite || '-'}</td>
<td>${formatResult(artifact.test_result)}</td>
<td>${formatTags(artifact.tags)}</td>
<td><small>${formatDate(artifact.created_at)}</small></td>
<td> <td>
<div class="action-buttons"> <div class="action-buttons">
<button class="icon-btn" onclick="downloadArtifact(${artifact.id}, '${escapeHtml(artifact.filename)}')" title="Download"> <button class="icon-btn" onclick="downloadArtifact(${artifact.id}, '${escapeHtml(artifact.filename)}')" title="Download">
💾 <i data-lucide="download" style="width: 16px; height: 16px;"></i>
</button> </button>
<button class="icon-btn" onclick="deleteArtifact(${artifact.id})" title="Delete"> <button class="icon-btn" onclick="deleteArtifact(${artifact.id})" title="Delete">
🗑️ <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i>
</button> </button>
</div> </div>
</td> </td>
@@ -82,6 +83,9 @@ function displayArtifacts(artifacts) {
`).join(''); `).join('');
document.getElementById('artifact-count').textContent = `${artifacts.length} artifacts`; document.getElementById('artifact-count').textContent = `${artifacts.length} artifacts`;
// Re-initialize Lucide icons for dynamically added content
lucide.createIcons();
} }
// Format result badge // Format result badge
@@ -149,11 +153,11 @@ async function showDetail(id) {
<div class="detail-value"><code>${artifact.storage_path}</code></div> <div class="detail-value"><code>${artifact.storage_path}</code></div>
</div> </div>
<div class="detail-row"> <div class="detail-row">
<div class="detail-label">Test Name</div> <div class="detail-label">Uploaded By</div>
<div class="detail-value">${artifact.test_name || '-'}</div> <div class="detail-value">${artifact.test_name || '-'}</div>
</div> </div>
<div class="detail-row"> <div class="detail-row">
<div class="detail-label">Test Suite</div> <div class="detail-label">Sim Source</div>
<div class="detail-value">${artifact.test_suite || '-'}</div> <div class="detail-value">${artifact.test_suite || '-'}</div>
</div> </div>
<div class="detail-row"> <div class="detail-row">
@@ -198,15 +202,18 @@ async function showDetail(id) {
</div> </div>
<div style="margin-top: 20px; display: flex; gap: 10px;"> <div style="margin-top: 20px; display: flex; gap: 10px;">
<button onclick="downloadArtifact(${artifact.id}, '${escapeHtml(artifact.filename)}')" class="btn btn-primary"> <button onclick="downloadArtifact(${artifact.id}, '${escapeHtml(artifact.filename)}')" class="btn btn-primary">
💾 Download <i data-lucide="download" style="width: 16px; height: 16px;"></i> Download
</button> </button>
<button onclick="deleteArtifact(${artifact.id}); closeDetailModal();" class="btn btn-danger"> <button onclick="deleteArtifact(${artifact.id}); closeDetailModal();" class="btn btn-danger">
🗑️ Delete <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i> Delete
</button> </button>
</div> </div>
`; `;
document.getElementById('detail-modal').classList.add('active'); document.getElementById('detail-modal').classList.add('active');
// Re-initialize Lucide icons for modal content
lucide.createIcons();
} catch (error) { } catch (error) {
alert('Error loading artifact details: ' + error.message); alert('Error loading artifact details: ' + error.message);
} }
@@ -460,3 +467,40 @@ function nextPage() {
currentPage++; currentPage++;
loadArtifacts(pageSize, (currentPage - 1) * pageSize); loadArtifacts(pageSize, (currentPage - 1) * pageSize);
} }
// Auto-refresh functions
function startAutoRefresh() {
if (autoRefreshInterval) {
clearInterval(autoRefreshInterval);
}
if (autoRefreshEnabled) {
autoRefreshInterval = setInterval(() => {
// Only refresh if on the artifacts tab
const artifactsTab = document.getElementById('artifacts-tab');
if (artifactsTab && artifactsTab.classList.contains('active')) {
loadArtifacts(pageSize, (currentPage - 1) * pageSize);
}
}, REFRESH_INTERVAL_MS);
}
}
function toggleAutoRefresh() {
autoRefreshEnabled = !autoRefreshEnabled;
const toggleBtn = document.getElementById('auto-refresh-toggle');
if (autoRefreshEnabled) {
toggleBtn.textContent = 'Auto-refresh: ON';
toggleBtn.classList.remove('btn-secondary');
toggleBtn.classList.add('btn-success');
startAutoRefresh();
} else {
toggleBtn.textContent = 'Auto-refresh: OFF';
toggleBtn.classList.remove('btn-success');
toggleBtn.classList.add('btn-secondary');
if (autoRefreshInterval) {
clearInterval(autoRefreshInterval);
autoRefreshInterval = null;
}
}
}