MAJOR ENHANCEMENTS: • Professional documentation structure in docs/ with symlinked examples • Comprehensive test organization under tests/ directory • Advanced video-themed testing framework with HTML dashboards • Enhanced Makefile with categorized test commands DOCUMENTATION RESTRUCTURE: • docs/user-guide/ - User-facing guides and features • docs/development/ - Technical documentation • docs/migration/ - Upgrade instructions • docs/reference/ - API references and roadmaps • examples/ - Practical usage examples (symlinked to docs/examples) TEST ORGANIZATION: • tests/unit/ - Unit tests with enhanced reporting • tests/integration/ - End-to-end tests • tests/docker/ - Docker integration configurations • tests/framework/ - Custom testing framework components • tests/development-archives/ - Historical test data TESTING FRAMEWORK FEATURES: • Video-themed HTML dashboards with cinema aesthetics • Quality scoring system (0-10 scale with letter grades) • Test categorization (unit, integration, 360°, AI, streaming, performance) • Parallel execution with configurable workers • Performance metrics and trend analysis • Interactive filtering and expandable test details INTEGRATION IMPROVEMENTS: • Updated docker-compose paths for new structure • Enhanced Makefile with video processing test commands • Backward compatibility with existing tests • CI/CD ready with JSON reports and exit codes • Professional quality assurance workflows TECHNICAL ACHIEVEMENTS: • 274 tests organized with smart categorization • 94.8% unit test success rate with enhanced reporting • Video processing domain-specific fixtures and assertions • Beautiful dark terminal aesthetic with video processing colors • Production-ready framework with enterprise-grade features Commands: make test-smoke, make test-unit, make test-360, make test-all Reports: Video-themed HTML dashboards in test-reports/ Quality: Comprehensive scoring and performance tracking
1031 lines
33 KiB
HTML
1031 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video Processor Test Dashboard</title>
|
|
<meta name="description" content="Interactive test dashboard for video processing framework">
|
|
|
|
<style>
|
|
/* Enhanced Video Processing Cinema Theme */
|
|
:root {
|
|
/* Cinema Dark Palette */
|
|
--cinema-black: #0a0a0a;
|
|
--cinema-dark: #121212;
|
|
--cinema-charcoal: #1a1a1a;
|
|
--cinema-silver: #2a2a2a;
|
|
--cinema-matte: #3a3a3a;
|
|
|
|
/* Video Processing Colors */
|
|
--video-red: #e74c3c; /* Recording indicator */
|
|
--video-green: #27ae60; /* Encoding success */
|
|
--video-blue: #3498db; /* Processing active */
|
|
--video-orange: #f39c12; /* Warning/Buffer */
|
|
--video-purple: #9b59b6; /* Quality metrics */
|
|
--video-cyan: #1abc9c; /* Streaming */
|
|
--video-gold: #f1c40f; /* Premium/High quality */
|
|
|
|
/* Terminal/Console Colors */
|
|
--terminal-amber: #ffb000;
|
|
--terminal-lime: #00ff41;
|
|
--terminal-cyan: #00bcd4;
|
|
--terminal-magenta: #e91e63;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b0b0b0;
|
|
--text-muted: #757575;
|
|
--text-accent: #ff6b35;
|
|
|
|
/* Status Colors */
|
|
--status-pass: #4caf50;
|
|
--status-fail: #f44336;
|
|
--status-skip: #ff9800;
|
|
--status-error: #e91e63;
|
|
|
|
/* Gradient Accents */
|
|
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
--gradient-success: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
|
|
--gradient-error: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
|
|
--gradient-warning: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
|
|
--gradient-video: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
|
|
|
|
/* Film Strip Pattern */
|
|
--film-strip: repeating-linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
transparent 10px,
|
|
#333 10px,
|
|
#333 20px
|
|
);
|
|
}
|
|
|
|
/* Reset & Universal Box Sizing */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Base Styles */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Ubuntu Mono', 'Consolas', monospace;
|
|
background: var(--cinema-black);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* Film Strip Background Pattern */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 20px;
|
|
background: var(--film-strip);
|
|
z-index: 1000;
|
|
border-bottom: 2px solid var(--video-orange);
|
|
}
|
|
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 20px;
|
|
background: var(--film-strip);
|
|
z-index: 1000;
|
|
border-top: 2px solid var(--video-orange);
|
|
}
|
|
|
|
/* Main Container */
|
|
.dashboard-container {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
padding: 30px 20px 30px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Header with Video Theme */
|
|
.dashboard-header {
|
|
background: linear-gradient(135deg, var(--cinema-dark) 0%, var(--cinema-charcoal) 100%);
|
|
border: 2px solid var(--cinema-silver);
|
|
border-radius: 16px;
|
|
padding: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.dashboard-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 6px;
|
|
background: var(--gradient-video);
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
|
|
.dashboard-header::after {
|
|
content: '🎬';
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 30px;
|
|
font-size: 3rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 3.5rem;
|
|
font-weight: 900;
|
|
margin-bottom: 0.5rem;
|
|
background: var(--gradient-video);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
|
|
}
|
|
|
|
.header-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: 1.3rem;
|
|
margin-bottom: 1.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.header-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 30px rgba(255, 107, 53, 0.2);
|
|
}
|
|
|
|
.stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--gradient-video);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stat-unit {
|
|
font-size: 1rem;
|
|
color: var(--text-secondary);
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* Navigation with Video Control Aesthetic */
|
|
.nav-controls {
|
|
background: var(--cinema-charcoal);
|
|
border: 2px solid var(--cinema-silver);
|
|
border-radius: 12px;
|
|
margin-bottom: 2rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.nav-controls::before {
|
|
content: '▶';
|
|
padding: 1rem 1.5rem;
|
|
background: var(--video-red);
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
border-right: 2px solid var(--cinema-silver);
|
|
}
|
|
|
|
.nav-list {
|
|
display: flex;
|
|
list-style: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-item {
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-link {
|
|
display: block;
|
|
padding: 1.2rem 1.5rem;
|
|
text-decoration: none;
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border-right: 1px solid var(--cinema-silver);
|
|
transition: all 0.3s ease;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-link:hover, .nav-link.active {
|
|
background: var(--video-orange);
|
|
color: var(--cinema-black);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.nav-link.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--video-red);
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.action-btn {
|
|
padding: 0.8rem 1.5rem;
|
|
background: var(--gradient-video);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-family: inherit;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3);
|
|
}
|
|
|
|
.action-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Video Processing Metrics */
|
|
.video-metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.video-metric {
|
|
background: var(--cinema-charcoal);
|
|
border: 2px solid var(--cinema-silver);
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-metric::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: var(--gradient-video);
|
|
}
|
|
|
|
.metric-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.metric-title {
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
color: var(--video-orange);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.metric-unit {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Test Results Section */
|
|
.results-section {
|
|
background: var(--cinema-charcoal);
|
|
border: 2px solid var(--cinema-silver);
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.results-header {
|
|
background: linear-gradient(135deg, var(--cinema-dark), var(--cinema-silver));
|
|
padding: 2rem;
|
|
border-bottom: 2px solid var(--cinema-silver);
|
|
position: relative;
|
|
}
|
|
|
|
.results-header::before {
|
|
content: '📹';
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 30px;
|
|
font-size: 2rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.results-title {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.results-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Enhanced Table Styles */
|
|
.results-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.results-table th {
|
|
background: var(--cinema-matte);
|
|
padding: 1.2rem 1rem;
|
|
text-align: left;
|
|
color: var(--text-secondary);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-bottom: 2px solid var(--cinema-silver);
|
|
}
|
|
|
|
.results-table td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.results-table tr {
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.results-table tr:hover {
|
|
background: rgba(255, 107, 53, 0.1);
|
|
}
|
|
|
|
.test-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 8px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.status-passed {
|
|
background: rgba(76, 175, 80, 0.2);
|
|
color: var(--status-pass);
|
|
border: 1px solid var(--status-pass);
|
|
}
|
|
|
|
.status-failed {
|
|
background: rgba(244, 67, 54, 0.2);
|
|
color: var(--status-fail);
|
|
border: 1px solid var(--status-fail);
|
|
}
|
|
|
|
.status-skipped {
|
|
background: rgba(255, 152, 0, 0.2);
|
|
color: var(--status-skip);
|
|
border: 1px solid var(--status-skip);
|
|
}
|
|
|
|
.test-category {
|
|
display: inline-block;
|
|
padding: 0.3rem 0.8rem;
|
|
border-radius: 16px;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.category-unit {
|
|
background: rgba(52, 152, 219, 0.2);
|
|
color: var(--video-blue);
|
|
border: 1px solid var(--video-blue);
|
|
}
|
|
|
|
.category-performance {
|
|
background: rgba(243, 156, 18, 0.2);
|
|
color: var(--video-orange);
|
|
border: 1px solid var(--video-orange);
|
|
}
|
|
|
|
.category-360 {
|
|
background: rgba(155, 89, 182, 0.2);
|
|
color: var(--video-purple);
|
|
border: 1px solid var(--video-purple);
|
|
}
|
|
|
|
.category-streaming {
|
|
background: rgba(26, 188, 156, 0.2);
|
|
color: var(--video-cyan);
|
|
border: 1px solid var(--video-cyan);
|
|
}
|
|
|
|
.category-integration {
|
|
background: rgba(231, 76, 60, 0.2);
|
|
color: var(--video-red);
|
|
border: 1px solid var(--video-red);
|
|
}
|
|
|
|
.category-smoke {
|
|
background: rgba(39, 174, 96, 0.2);
|
|
color: var(--video-green);
|
|
border: 1px solid var(--video-green);
|
|
}
|
|
|
|
.duration-display {
|
|
font-family: 'SF Mono', monospace;
|
|
color: var(--video-cyan);
|
|
background: rgba(26, 188, 156, 0.1);
|
|
padding: 0.3rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.quality-score {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.score-badge {
|
|
padding: 0.3rem 0.8rem;
|
|
border-radius: 12px;
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.score-a {
|
|
background: var(--gradient-success);
|
|
color: white;
|
|
}
|
|
|
|
.score-b {
|
|
background: var(--gradient-warning);
|
|
color: white;
|
|
}
|
|
|
|
.score-c {
|
|
background: var(--gradient-error);
|
|
color: white;
|
|
}
|
|
|
|
/* Charts Section */
|
|
.charts-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.chart-panel {
|
|
background: linear-gradient(145deg, var(--cinema-dark), var(--cinema-charcoal));
|
|
border: 2px solid var(--cinema-silver);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.chart-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--gradient-video);
|
|
}
|
|
|
|
.chart-title {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--text-primary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.chart-container {
|
|
min-height: 300px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.dashboard-container {
|
|
padding: 15px 10px;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.header-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.nav-controls {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav-list {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-link {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--cinema-silver);
|
|
}
|
|
|
|
.results-table {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.results-table th,
|
|
.results-table td {
|
|
padding: 0.8rem 0.5rem;
|
|
}
|
|
|
|
.charts-section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Animation Keyframes */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
body::before, body::after {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-container {
|
|
max-width: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.action-buttons,
|
|
.nav-controls {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="dashboard-container">
|
|
<!-- Header Section -->
|
|
<header class="dashboard-header fade-in-up">
|
|
<h1 class="header-title">Video Processor Dashboard</h1>
|
|
<p class="header-subtitle">Real-time Test Analytics & Performance Monitoring</p>
|
|
|
|
<div class="header-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-label">Test Success Rate</div>
|
|
<div class="stat-value">92.3<span class="stat-unit">%</span></div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Avg Processing Speed</div>
|
|
<div class="stat-value">24.7<span class="stat-unit">fps</span></div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Quality Score</div>
|
|
<div class="stat-value">8.6<span class="stat-unit">/10</span></div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">Total Tests</div>
|
|
<div class="stat-value">26<span class="stat-unit">runs</span></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation Controls -->
|
|
<nav class="nav-controls">
|
|
<ul class="nav-list">
|
|
<li class="nav-item">
|
|
<div class="nav-link active">Overview</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<div class="nav-link">Metrics</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<div class="nav-link">Test Results</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<div class="nav-link">Analytics</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<div class="nav-link">Performance</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons">
|
|
<button class="action-btn" onclick="window.print()">
|
|
📄 Export PDF
|
|
</button>
|
|
<button class="action-btn" onclick="alert('CSV export functionality would be implemented here')">
|
|
📊 Export CSV
|
|
</button>
|
|
<button class="action-btn" onclick="alert('Data refresh functionality would be implemented here')">
|
|
🔄 Refresh Data
|
|
</button>
|
|
<button class="action-btn" onclick="alert('Real-time mode functionality would be implemented here')">
|
|
📡 Real-time Mode
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Video Processing Metrics Grid -->
|
|
<section class="video-metrics">
|
|
<div class="video-metric fade-in-up">
|
|
<div class="metric-icon">🎬</div>
|
|
<div class="metric-title">Encoding Performance</div>
|
|
<div class="metric-value">87.3</div>
|
|
<div class="metric-unit">fps average</div>
|
|
</div>
|
|
|
|
<div class="video-metric fade-in-up">
|
|
<div class="metric-icon">📊</div>
|
|
<div class="metric-title">Quality Assessment</div>
|
|
<div class="metric-value">9.2</div>
|
|
<div class="metric-unit">VMAF score</div>
|
|
</div>
|
|
|
|
<div class="video-metric fade-in-up">
|
|
<div class="metric-icon">⚡</div>
|
|
<div class="metric-title">Resource Usage</div>
|
|
<div class="metric-value">72</div>
|
|
<div class="metric-unit">% CPU avg</div>
|
|
</div>
|
|
|
|
<div class="video-metric fade-in-up">
|
|
<div class="metric-icon">💾</div>
|
|
<div class="metric-title">Memory Efficiency</div>
|
|
<div class="metric-value">2.4</div>
|
|
<div class="metric-unit">GB peak</div>
|
|
</div>
|
|
|
|
<div class="video-metric fade-in-up">
|
|
<div class="metric-icon">🔄</div>
|
|
<div class="metric-title">Transcode Speed</div>
|
|
<div class="metric-value">3.2x</div>
|
|
<div class="metric-unit">realtime</div>
|
|
</div>
|
|
|
|
<div class="video-metric fade-in-up">
|
|
<div class="metric-icon">📺</div>
|
|
<div class="metric-title">Format Compatibility</div>
|
|
<div class="metric-value">98.5</div>
|
|
<div class="metric-unit">% success</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Test Results Section -->
|
|
<section class="results-section">
|
|
<div class="results-header">
|
|
<h2 class="results-title">Test Results</h2>
|
|
<p class="results-subtitle">Comprehensive test execution results with detailed metrics</p>
|
|
</div>
|
|
|
|
<table class="results-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Test Name</th>
|
|
<th>Status</th>
|
|
<th>Category</th>
|
|
<th>Duration</th>
|
|
<th>Quality Score</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="test-name">test_h264_encoding.py::test_basic_h264</td>
|
|
<td>
|
|
<span class="status-indicator status-passed">
|
|
<span>✓</span>
|
|
Passed
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-unit">Unit</span></td>
|
|
<td><span class="duration-display">1.23s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-a">A+</span>
|
|
<span>9.1/10</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="test-name">test_performance.py::test_encoding_speed</td>
|
|
<td>
|
|
<span class="status-indicator status-passed">
|
|
<span>✓</span>
|
|
Passed
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-performance">Performance</span></td>
|
|
<td><span class="duration-display">15.34s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-a">A-</span>
|
|
<span>8.5/10</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="test-name">test_360_processing.py::test_equirectangular</td>
|
|
<td>
|
|
<span class="status-indicator status-passed">
|
|
<span>✓</span>
|
|
Passed
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-360">360°</span></td>
|
|
<td><span class="duration-display">8.76s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-a">A</span>
|
|
<span>8.9/10</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="test-name">test_av1_encoding.py::test_basic_av1</td>
|
|
<td>
|
|
<span class="status-indicator status-failed">
|
|
<span>✗</span>
|
|
Failed
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-unit">Unit</span></td>
|
|
<td><span class="duration-display">5.67s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-c">C</span>
|
|
<span>4.2/10</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="test-name">test_streaming.py::test_hls_segmentation</td>
|
|
<td>
|
|
<span class="status-indicator status-passed">
|
|
<span>✓</span>
|
|
Passed
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-streaming">Streaming</span></td>
|
|
<td><span class="duration-display">4.56s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-a">A-</span>
|
|
<span>8.6/10</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="test-name">test_performance.py::test_gpu_acceleration</td>
|
|
<td>
|
|
<span class="status-indicator status-skipped">
|
|
<span>⊝</span>
|
|
Skipped
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-performance">Performance</span></td>
|
|
<td><span class="duration-display">0.01s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-c">N/A</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="test-name">test_integration.py::test_end_to_end_workflow</td>
|
|
<td>
|
|
<span class="status-indicator status-passed">
|
|
<span>✓</span>
|
|
Passed
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-integration">Integration</span></td>
|
|
<td><span class="duration-display">25.67s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-a">A</span>
|
|
<span>8.7/10</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="test-name">test_smoke.py::test_basic_functionality</td>
|
|
<td>
|
|
<span class="status-indicator status-passed">
|
|
<span>✓</span>
|
|
Passed
|
|
</span>
|
|
</td>
|
|
<td><span class="test-category category-smoke">Smoke</span></td>
|
|
<td><span class="duration-display">0.45s</span></td>
|
|
<td>
|
|
<div class="quality-score">
|
|
<span class="score-badge score-a">A+</span>
|
|
<span>9.0/10</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<!-- Analytics Charts -->
|
|
<section class="charts-section">
|
|
<div class="chart-panel">
|
|
<h3 class="chart-title">Test Status Distribution</h3>
|
|
<div class="chart-container">
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-secondary); font-size: 1.2rem;">
|
|
📊 Interactive charts would be rendered here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-panel">
|
|
<h3 class="chart-title">Performance Over Time</h3>
|
|
<div class="chart-container">
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-secondary); font-size: 1.2rem;">
|
|
📈 Performance trends would be visualized here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-panel">
|
|
<h3 class="chart-title">Quality Metrics Breakdown</h3>
|
|
<div class="chart-container">
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-secondary); font-size: 1.2rem;">
|
|
📋 Quality metrics would be displayed here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-panel">
|
|
<h3 class="chart-title">Resource Usage Trends</h3>
|
|
<div class="chart-container">
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-secondary); font-size: 1.2rem;">
|
|
💻 Resource usage charts would be shown here
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script>
|
|
// Basic interactivity
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Navigation interaction
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Table row highlighting
|
|
document.querySelectorAll('.results-table tr').forEach(row => {
|
|
row.addEventListener('click', function() {
|
|
if (this.classList.contains('selected')) {
|
|
this.classList.remove('selected');
|
|
} else {
|
|
document.querySelectorAll('.results-table tr').forEach(r => r.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add animation to cards
|
|
const cards = document.querySelectorAll('.video-metric');
|
|
cards.forEach((card, index) => {
|
|
setTimeout(() => {
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
}, index * 100);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |