Mondo Diaz
59defcefe5
- Remove "Warehouse13" text from header - Header now displays just the [W13] logo with badges - Cleaner, more minimalist design - Applied to both Angular frontend and static HTML 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
252 lines
12 KiB
HTML
252 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Warehouse13 - 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><span class="logo">[W13]</span></h1>
|
|
<div class="header-info">
|
|
<span id="deployment-mode" class="badge"></span>
|
|
<span id="storage-backend" class="badge"></span>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="tabs">
|
|
<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">
|
|
<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 class="filter-inline">
|
|
<i data-lucide="search" style="width: 16px; height: 16px; color: #64748b;"></i>
|
|
<input type="text" id="filter-search" placeholder="Search..." oninput="filterTable()">
|
|
<button onclick="clearFilters()" class="btn-clear" title="Clear search">
|
|
<i data-lucide="x" style="width: 14px; height: 14px;"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table id="artifacts-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="sortable" onclick="sortTable('test_suite')">
|
|
Sim Source <span class="sort-indicator"></span>
|
|
</th>
|
|
<th class="sortable" onclick="sortTable('filename')">
|
|
Artifacts <span class="sort-indicator"></span>
|
|
</th>
|
|
<th class="sortable" onclick="sortTable('created_at')">
|
|
Date <span class="sort-indicator"></span>
|
|
</th>
|
|
<th class="sortable" onclick="sortTable('test_name')">
|
|
Uploaded By <span class="sort-indicator"></span>
|
|
</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="artifacts-tbody">
|
|
<tr>
|
|
<td colspan="5" class="loading">Loading artifacts...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button onclick="previousPage()" id="prev-btn" class="btn">← Previous</button>
|
|
<span id="page-info">Page 1</span>
|
|
<button onclick="nextPage()" id="next-btn" class="btn">Next →</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Tab -->
|
|
<div id="upload-tab" class="tab-content">
|
|
<div class="upload-section">
|
|
<h2>Upload Artifact</h2>
|
|
<form id="upload-form" onsubmit="uploadArtifact(event)">
|
|
<div class="form-group">
|
|
<label for="file">File *</label>
|
|
<input type="file" id="file" name="file" required>
|
|
<small>Supported: CSV, JSON, binary files, PCAP</small>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<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="uploaded-by">Uploaded By *</label>
|
|
<input type="text" id="uploaded-by" name="test_name" placeholder="e.g., john.doe" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="sim-source-id">SIM Source ID (for grouping)</label>
|
|
<input type="text" id="sim-source-id" name="sim_source_id" placeholder="e.g., sim_run_20251015_001">
|
|
<small>Use same ID for multiple artifacts from same source</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="tags">Tags (comma-separated) *</label>
|
|
<input type="text" id="tags" name="tags" placeholder="e.g., regression, smoke, critical" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="test-result">Test Result</label>
|
|
<select id="test-result" name="test_result">
|
|
<option value="">-- Select --</option>
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="skip">Skip</option>
|
|
<option value="error">Error</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="version">Version</label>
|
|
<input type="text" id="version" name="version" placeholder="e.g., v1.0.0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea id="description" name="description" rows="3" placeholder="Describe this artifact..."></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="test-config">Test Config (JSON)</label>
|
|
<textarea id="test-config" name="test_config" rows="4" placeholder='{"browser": "chrome", "timeout": 30}'></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="custom-metadata">Custom Metadata (JSON)</label>
|
|
<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">
|
|
<i data-lucide="upload" style="width: 18px; height: 18px;"></i> Upload Artifact
|
|
</button>
|
|
</form>
|
|
<div id="upload-status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Query Tab -->
|
|
<div id="query-tab" class="tab-content">
|
|
<div class="query-section">
|
|
<h2>Query Artifacts</h2>
|
|
<form id="query-form" onsubmit="queryArtifacts(event)">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="q-filename">Filename</label>
|
|
<input type="text" id="q-filename" placeholder="Search filename...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="q-type">File Type</label>
|
|
<select id="q-type">
|
|
<option value="">All</option>
|
|
<option value="csv">CSV</option>
|
|
<option value="json">JSON</option>
|
|
<option value="binary">Binary</option>
|
|
<option value="pcap">PCAP</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="q-test-name">Test Name</label>
|
|
<input type="text" id="q-test-name" placeholder="Search test name...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="q-suite">Test Suite</label>
|
|
<input type="text" id="q-suite" placeholder="e.g., integration">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="q-result">Test Result</label>
|
|
<select id="q-result">
|
|
<option value="">All</option>
|
|
<option value="pass">Pass</option>
|
|
<option value="fail">Fail</option>
|
|
<option value="skip">Skip</option>
|
|
<option value="error">Error</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="q-tags">Tags (comma-separated)</label>
|
|
<input type="text" id="q-tags" placeholder="e.g., regression, smoke">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="q-start-date">Start Date</label>
|
|
<input type="datetime-local" id="q-start-date">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="q-end-date">End Date</label>
|
|
<input type="datetime-local" id="q-end-date">
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<!-- Artifact Detail Modal -->
|
|
<div id="detail-modal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeDetailModal()">×</span>
|
|
<h2>Artifact Details</h2>
|
|
<div id="detail-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/app.js"></script>
|
|
<script>
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|