Rebrand to Obsidian with modern UI and auto-refresh

- 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>
2025-10-15 08:30:21 -05:00
parent 1ce27976a9
commit 4bc8310070
8 changed files with 209 additions and 108 deletions
--- a/README.md
+++ b/README.md
@@ -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/app/main.py
+++ b/app/main.py
@@ -19,8 +19,8 @@ logger = logging.getLogger(__name__)

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

 echo =========================================
-echo Test Artifact Data Lake - Quick Start
+echo Obsidian - Quick Start
 echo =========================================
 echo.

--- a/quickstart.ps1
+++ b/quickstart.ps1
@@ -1,7 +1,7 @@
 # Test Artifact Data Lake - Quick Start (PowerShell)

 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 ""

--- a/quickstart.sh
+++ b/quickstart.sh
@@ -3,7 +3,7 @@
 set -e

 echo "========================================="
-echo "Test Artifact Data Lake - Quick Start"
+echo "Obsidian - Quick Start"
 echo "========================================="
 echo ""

--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -6,22 +6,23 @@

 body {
    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;
    padding: 20px;
+    color: #e2e8f0;
 }

 .container {
    max-width: 1400px;
    margin: 0 auto;
-    background: white;
+    background: #1e293b;
    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;
 }

 header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #1e3a8a 0%, #4338ca 100%);
    color: white;
    padding: 30px;
    display: flex;
@@ -51,8 +52,8 @@ header h1 {

 .tabs {
    display: flex;
-    background: #f7f9fc;
-    border-bottom: 2px solid #e2e8f0;
+    background: #0f172a;
+    border-bottom: 2px solid #334155;
 }

 .tab-button {
@@ -64,17 +65,22 @@ header h1 {
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
-    color: #64748b;
+    color: #94a3b8;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
 }

 .tab-button:hover {
-    background: #e2e8f0;
+    background: #1e293b;
+    color: #e2e8f0;
 }

 .tab-button.active {
-    background: white;
-    color: #667eea;
-    border-bottom: 3px solid #667eea;
+    background: #1e293b;
+    color: #60a5fa;
+    border-bottom: 3px solid #60a5fa;
 }

 .tab-content {
@@ -101,25 +107,28 @@ header h1 {
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
 }

 .btn-primary {
-    background: #667eea;
+    background: #3b82f6;
    color: white;
 }

 .btn-primary:hover {
-    background: #5568d3;
+    background: #2563eb;
    transform: translateY(-1px);
 }

 .btn-secondary {
-    background: #e2e8f0;
-    color: #475569;
+    background: #334155;
+    color: #e2e8f0;
 }

 .btn-secondary:hover {
-    background: #cbd5e1;
+    background: #475569;
 }

 .btn-danger {
@@ -142,8 +151,8 @@ header h1 {
 }

 .count-badge {
-    background: #f0f9ff;
-    color: #0369a1;
+    background: #1e3a8a;
+    color: #93c5fd;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
@@ -153,8 +162,9 @@ header h1 {

 .table-container {
    overflow-x: auto;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #334155;
    border-radius: 8px;
+    background: #0f172a;
 }

 table {
@@ -164,30 +174,34 @@ table {
 }

 thead {
-    background: #f7f9fc;
+    background: #1e293b;
 }

 th {
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
-    color: #475569;
-    border-bottom: 2px solid #e2e8f0;
+    color: #94a3b8;
+    border-bottom: 2px solid #334155;
    white-space: nowrap;
+    text-transform: uppercase;
+    font-size: 12px;
+    letter-spacing: 0.5px;
 }

 td {
-    padding: 12px;
-    border-bottom: 1px solid #e2e8f0;
+    padding: 16px 12px;
+    border-bottom: 1px solid #1e293b;
+    color: #cbd5e1;
 }

 tbody tr:hover {
-    background: #f7f9fc;
+    background: #1e293b;
 }

 .loading {
    text-align: center;
-    color: #94a3b8;
+    color: #64748b;
    padding: 40px !important;
 }

@@ -200,29 +214,29 @@ tbody tr:hover {
 }

 .result-pass {
-    background: #d1fae5;
-    color: #065f46;
+    background: #064e3b;
+    color: #6ee7b7;
 }

 .result-fail {
-    background: #fee2e2;
-    color: #991b1b;
+    background: #7f1d1d;
+    color: #fca5a5;
 }

 .result-skip {
-    background: #fef3c7;
-    color: #92400e;
+    background: #78350f;
+    color: #fcd34d;
 }

 .result-error {
-    background: #fecaca;
-    color: #7f1d1d;
+    background: #7f1d1d;
+    color: #fca5a5;
 }

 .tag {
    display: inline-block;
-    background: #e0e7ff;
-    color: #3730a3;
+    background: #1e3a8a;
+    color: #93c5fd;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
@@ -230,8 +244,8 @@ tbody tr:hover {
 }

 .file-type-badge {
-    background: #dbeafe;
-    color: #1e40af;
+    background: #1e3a8a;
+    color: #93c5fd;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
@@ -250,7 +264,7 @@ tbody tr:hover {

 #page-info {
    font-weight: 500;
-    color: #64748b;
+    color: #94a3b8;
 }

 .upload-section, .query-section {
@@ -271,7 +285,7 @@ tbody tr:hover {
 label {
    display: block;
    font-weight: 500;
-    color: #475569;
+    color: #cbd5e1;
    margin-bottom: 6px;
    font-size: 14px;
 }
@@ -283,23 +297,25 @@ select,
 textarea {
    width: 100%;
    padding: 10px 14px;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
+    background: #0f172a;
+    color: #e2e8f0;
 }

 input:focus,
 select:focus,
 textarea:focus {
    outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }

 small {
-    color: #94a3b8;
+    color: #64748b;
    font-size: 12px;
    display: block;
    margin-top: 4px;
@@ -313,14 +329,14 @@ small {
 }

 #upload-status.success {
-    background: #d1fae5;
-    color: #065f46;
+    background: #064e3b;
+    color: #6ee7b7;
    display: block;
 }

 #upload-status.error {
-    background: #fee2e2;
-    color: #991b1b;
+    background: #7f1d1d;
+    color: #fca5a5;
    display: block;
 }

@@ -332,7 +348,7 @@ small {
    top: 0;
    width: 100%;
    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
 }

@@ -343,14 +359,15 @@ small {
 }

 .modal-content {
-    background: white;
+    background: #1e293b;
    padding: 30px;
    border-radius: 12px;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    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 {
@@ -359,19 +376,19 @@ small {
    top: 20px;
    font-size: 28px;
    font-weight: bold;
-    color: #94a3b8;
+    color: #64748b;
    cursor: pointer;
    transition: color 0.3s;
 }

 .close:hover {
-    color: #475569;
+    color: #e2e8f0;
 }

 .detail-row {
    margin-bottom: 16px;
    padding-bottom: 16px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #334155;
 }

 .detail-row:last-child {
@@ -380,20 +397,29 @@ small {

 .detail-label {
    font-weight: 600;
-    color: #475569;
+    color: #94a3b8;
    margin-bottom: 4px;
 }

 .detail-value {
-    color: #64748b;
+    color: #cbd5e1;
 }

 pre {
-    background: #f7f9fc;
+    background: #0f172a;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12px;
+    border: 1px solid #334155;
+}
+
+code {
+    background: #0f172a;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #93c5fd;
 }

 .action-buttons {
@@ -405,14 +431,24 @@ pre {
    background: none;
    border: none;
    cursor: pointer;
-    font-size: 18px;
-    padding: 6px;
+    padding: 8px;
    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 {
-    background: #e2e8f0;
+    background: #334155;
+    color: #e2e8f0;
+    transform: scale(1.1);
+}
+
+/* Ensure SVG icons inherit color */
+.icon-btn svg {
+    stroke: currentColor;
 }

@media (max-width: 768px) {
--- a/static/index.html
+++ b/static/index.html
@@ -3,13 +3,14 @@
 <head>
    <meta charset="UTF-8">
    <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">
+    <script src="https://unpkg.com/lucide@latest"></script>
 </head>
 <body>
    <div class="container">
        <header>
-            <h1>🗄️ Test Artifact Data Lake</h1>
+            <h1>◆ Obsidian</h1>
            <div class="header-info">
                <span id="deployment-mode" class="badge"></span>
                <span id="storage-backend" class="badge"></span>
@@ -17,16 +18,29 @@
        </header>

        <nav class="tabs">
-            <button class="tab-button active" onclick="showTab('artifacts')">📋 Artifacts</button>
-            <button class="tab-button" onclick="showTab('upload')">⬆️ Upload</button>
-            <button class="tab-button" onclick="showTab('query')">🔍 Query</button>
+            <button class="tab-button active" onclick="showTab('artifacts')">
+                <i data-lucide="database" style="width: 16px; height: 16px;"></i> Artifacts
+            </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>

        <!-- Artifacts Tab -->
        <div id="artifacts-tab" class="tab-content active">
            <div class="toolbar">
-                <button onclick="loadArtifacts()" class="btn btn-primary">🔄 Refresh</button>
-                <button onclick="generateSeedData()" class="btn btn-secondary">🌱 Generate Seed Data</button>
+                <button onclick="loadArtifacts()" class="btn btn-primary">
+                    <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>
            </div>

@@ -34,21 +48,16 @@
                <table id="artifacts-table">
                    <thead>
                        <tr>
-                            <th>ID</th>
-                            <th>Filename</th>
-                            <th>Type</th>
-                            <th>Size</th>
-                            <th>Test Name</th>
-                            <th>Suite</th>
-                            <th>Result</th>
-                            <th>Tags</th>
-                            <th>Created</th>
+                            <th>Sim Source</th>
+                            <th>Artifacts</th>
+                            <th>Date</th>
+                            <th>Uploaded By</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="artifacts-tbody">
                        <tr>
-                            <td colspan="10" class="loading">Loading artifacts...</td>
+                            <td colspan="5" class="loading">Loading artifacts...</td>
                        </tr>
                    </tbody>
                </table>
@@ -74,12 +83,12 @@

                    <div class="form-row">
                        <div class="form-group">
-                            <label for="test-name">Test Name</label>
-                            <input type="text" id="test-name" name="test_name" placeholder="e.g., login_test">
+                            <label for="sim-source">Sim Source *</label>
+                            <input type="text" id="sim-source" name="test_suite" placeholder="e.g., Jenkins, GitLab CI" required>
                        </div>
                        <div class="form-group">
-                            <label for="test-suite">Test Suite</label>
-                            <input type="text" id="test-suite" name="test_suite" placeholder="e.g., integration">
+                            <label for="uploaded-by">Uploaded By *</label>
+                            <input type="text" id="uploaded-by" name="test_name" placeholder="e.g., john.doe" required>
                        </div>
                    </div>

@@ -120,7 +129,9 @@
                        <textarea id="custom-metadata" name="custom_metadata" rows="4" placeholder='{"build": "1234", "commit": "abc123"}'></textarea>
                    </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>
                <div id="upload-status"></div>
            </div>
@@ -187,8 +198,12 @@
                        </div>
                    </div>

-                    <button type="submit" class="btn btn-primary btn-large">🔍 Search</button>
-                    <button type="button" onclick="clearQuery()" class="btn btn-secondary">Clear</button>
+                    <button type="submit" class="btn btn-primary btn-large">
+                        <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>
            </div>
        </div>
@@ -204,5 +219,9 @@
    </div>

    <script src="/static/js/app.js"></script>
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+    </script>
 </body>
 </html>
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -6,10 +6,16 @@ let currentPage = 1;
 let pageSize = 25;
 let totalArtifacts = 0;

+// Auto-refresh
+let autoRefreshEnabled = true;
+let autoRefreshInterval = null;
+const REFRESH_INTERVAL_MS = 5000; // 5 seconds
+
 // Load API info on page load
 window.addEventListener('DOMContentLoaded', () => {
    loadApiInfo();
    loadArtifacts();
+    startAutoRefresh();
 });

 // Load API information
@@ -48,33 +54,28 @@ function displayArtifacts(artifacts) {
    const tbody = document.getElementById('artifacts-tbody');

    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';
        return;
    }

    tbody.innerHTML = artifacts.map(artifact => `
        <tr>
-            <td><strong>${artifact.id}</strong></td>
+            <td>${artifact.test_suite || '-'}</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)}
                </a>
            </td>
-            <td><span class="file-type-badge">${artifact.file_type}</span></td>
-            <td>${formatBytes(artifact.file_size)}</td>
+            <td>${formatDate(artifact.created_at)}</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>
                <div class="action-buttons">
                    <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 class="icon-btn" onclick="deleteArtifact(${artifact.id})" title="Delete">
-                        🗑️
+                        <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i>
                    </button>
                </div>
            </td>
@@ -82,6 +83,9 @@ function displayArtifacts(artifacts) {
    `).join('');

    document.getElementById('artifact-count').textContent = `${artifacts.length} artifacts`;
+
+    // Re-initialize Lucide icons for dynamically added content
+    lucide.createIcons();
 }

 // Format result badge
@@ -149,11 +153,11 @@ async function showDetail(id) {
                <div class="detail-value"><code>${artifact.storage_path}</code></div>
            </div>
            <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>
            <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>
            <div class="detail-row">
@@ -198,15 +202,18 @@ async function showDetail(id) {
            </div>
            <div style="margin-top: 20px; display: flex; gap: 10px;">
                <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 onclick="deleteArtifact(${artifact.id}); closeDetailModal();" class="btn btn-danger">
-                    🗑️ Delete
+                    <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i> Delete
                </button>
            </div>
        `;

        document.getElementById('detail-modal').classList.add('active');
+
+        // Re-initialize Lucide icons for modal content
+        lucide.createIcons();
    } catch (error) {
        alert('Error loading artifact details: ' + error.message);
    }
@@ -460,3 +467,40 @@ function nextPage() {
    currentPage++;
    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;
+        }
+    }
+}