mirror of
https://github.com/proffesor-for-testing/agentic-qe.git
synced 2026-09-19 08:45:47 +08:00
744ea46425
🎉 Major Release: Phase 3 Dashboards & Visualization This release completes Phase 3 from the Unified GOAP Implementation Plan, delivering a production-ready real-time visualization system for agent observability and decision-making transparency. ## Key Achievements (10/12 actions complete - 83%) ### Grafana Dashboards (2,280 LOC) - Executive dashboard with quality trends and costs - Developer dashboard with trace explorer and logs - QA dashboard with test metrics and coverage ### Backend Visualization API (2,004 LOC) - REST API with 6 endpoints for historical data - WebSocket server for real-time streaming (587 LOC) - Data transformer for graph visualization (556 LOC) ### Interactive React Frontend (12,969 LOC) - MindMap Component (Cytoscape.js): 6 layout algorithms, 1000+ nodes - QualityMetrics Panel (Recharts): 7-dimension radar chart, trends - Timeline View (react-window): Virtual scrolling for 1000+ events - Detail Panel: Drill-down functionality ### Infrastructure - React 18.3.1 + TypeScript 5.8.3 + Vite 6.4.1 - React Query 5.90.10 for data fetching - WebSocket client with reconnection logic - Complete type definitions (306 lines) ### Comprehensive Tests (3,681 LOC) - Integration tests (14/14 passing) - Component unit tests (22 files) - Performance tests for MindMap - Test-to-code ratio: 17% ## Performance Results (9/9 criteria PASSED) Backend: - ✅ 185.84 events/sec write (186% of target) - ✅ <1ms query latency (99% better than target) - ✅ 10-50ms WebSocket lag (95% better than target) Frontend: - ✅ <100ms render (100 nodes) - ✅ <500ms render (1000 nodes) - ✅ 0 TypeScript errors - ✅ 6.38s build time ## Documentation (8,161 LOC) - PHASE3-COMPLETE.md - Quick start guide - Phase 3 completion reports and reviews - Frontend architecture and testing guides - Component implementation documentation ## Services Running - Backend WebSocket: ws://localhost:8080 - Backend REST API: http://localhost:3001 - Frontend: http://localhost:3000 - Database: ./data/agentic-qe.db (1040+ events) ## Grade: B (83/100) - Production Ready ## Deferred to Phase 4 or v1.9.1 - OTEL Collector integration (#71) - Prometheus/Jaeger deployment (#71) - Test coverage metrics (#71) - Bundle code-splitting (#71) ## References - Issue #63 - Phase 3: Dashboards & Visualization (CLOSED) - Issue #69 - Phase 4: Integration & Orchestration - Issue #70 - Phase 5: Production Readiness - Issue #71 - Phase 3 Remaining Work Total Phase 3 Code: 21,434 LOC Total Documentation: 8,161 LOC Files Changed: 137 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
#!/usr/bin/env ts-node
|
|
/**
|
|
* Test script for Express REST API server
|
|
* Verifies that the server starts correctly and responds to requests
|
|
*/
|
|
|
|
import { RestApiServer } from '../src/visualization/api/RestEndpoints';
|
|
import { EventStore } from '../src/persistence/event-store';
|
|
import { ReasoningStore } from '../src/persistence/reasoning-store';
|
|
import * as http from 'http';
|
|
|
|
async function testRestApi() {
|
|
console.log('🚀 Testing Express REST API Server...\n');
|
|
|
|
// Initialize stores
|
|
const eventStore = new EventStore();
|
|
const reasoningStore = new ReasoningStore();
|
|
|
|
// Create REST API server with port 3001
|
|
const server = new RestApiServer(eventStore, reasoningStore, {
|
|
port: 3001,
|
|
enableCors: true,
|
|
enableEtag: true,
|
|
});
|
|
|
|
try {
|
|
// Start server
|
|
console.log('📡 Starting REST API server on port 3001...');
|
|
await server.start();
|
|
console.log('✅ Server started successfully!\n');
|
|
|
|
// Wait for server to be ready
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
// Test endpoints
|
|
console.log('🧪 Testing endpoints:\n');
|
|
|
|
const tests = [
|
|
{ name: 'GET /api/visualization/events', path: '/api/visualization/events' },
|
|
{ name: 'GET /api/visualization/metrics', path: '/api/visualization/metrics' },
|
|
{ name: 'GET /api/visualization/reasoning/test-chain', path: '/api/visualization/reasoning/test-chain' },
|
|
];
|
|
|
|
for (const test of tests) {
|
|
try {
|
|
const response = await makeRequest(test.path);
|
|
console.log(`✅ ${test.name}: ${response.statusCode} ${response.statusMessage}`);
|
|
if (response.body) {
|
|
const json = JSON.parse(response.body);
|
|
console.log(` Response: ${JSON.stringify(json).substring(0, 100)}...`);
|
|
}
|
|
} catch (error: any) {
|
|
console.log(`❌ ${test.name}: ${error.message}`);
|
|
}
|
|
console.log();
|
|
}
|
|
|
|
// Check port binding
|
|
console.log('🔍 Checking port binding...');
|
|
const portCheck = await checkPort(3001);
|
|
console.log(`${portCheck ? '✅' : '❌'} Port 3001 is ${portCheck ? 'bound' : 'not bound'}\n`);
|
|
|
|
// Stop server
|
|
console.log('🛑 Stopping server...');
|
|
await server.stop();
|
|
console.log('✅ Server stopped successfully!\n');
|
|
|
|
console.log('✨ All tests completed!\n');
|
|
process.exit(0);
|
|
} catch (error) {
|
|
console.error('❌ Error:', error);
|
|
await server.stop();
|
|
process.exit(1);
|
|
}
|
|
}
|
|
|
|
function makeRequest(path: string): Promise<{ statusCode: number; statusMessage: string; body: string }> {
|
|
return new Promise((resolve, reject) => {
|
|
const options = {
|
|
hostname: 'localhost',
|
|
port: 3001,
|
|
path,
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
};
|
|
|
|
const req = http.request(options, (res) => {
|
|
let body = '';
|
|
res.on('data', (chunk) => {
|
|
body += chunk;
|
|
});
|
|
res.on('end', () => {
|
|
resolve({
|
|
statusCode: res.statusCode || 0,
|
|
statusMessage: res.statusMessage || '',
|
|
body,
|
|
});
|
|
});
|
|
});
|
|
|
|
req.on('error', reject);
|
|
req.setTimeout(5000, () => {
|
|
req.destroy();
|
|
reject(new Error('Request timeout'));
|
|
});
|
|
req.end();
|
|
});
|
|
}
|
|
|
|
function checkPort(port: number): Promise<boolean> {
|
|
return new Promise((resolve) => {
|
|
const server = http.createServer();
|
|
server.listen(port, () => {
|
|
server.close();
|
|
resolve(false); // Port is available (not bound)
|
|
});
|
|
server.on('error', () => {
|
|
resolve(true); // Port is in use (bound)
|
|
});
|
|
});
|
|
}
|
|
|
|
testRestApi();
|