docs: remove Phase 2 completion and executive summary files
This commit is contained in:
@@ -0,0 +1,332 @@
|
||||
import { Component, inject, signal, computed, effect } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { PerformanceProfilerService } from '../../services/performance-profiler.service';
|
||||
import { ClientCacheService } from '../../services/client-cache.service';
|
||||
import { NotePreloaderService } from '../../services/note-preloader.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-performance-monitor-panel',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="performance-panel" *ngIf="isVisible()">
|
||||
<div class="panel-header">
|
||||
<h3>📊 Performance Monitor</h3>
|
||||
<button (click)="togglePanel()" class="close-btn">×</button>
|
||||
</div>
|
||||
|
||||
<div class="panel-content" *ngIf="isPanelOpen()">
|
||||
<!-- Cache Stats -->
|
||||
<div class="stats-section">
|
||||
<h4>Cache Statistics</h4>
|
||||
<div class="stat-row">
|
||||
<span>Memory Cache:</span>
|
||||
<span>{{ cacheStats().memory.size }}/{{ cacheStats().memory.maxSize }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>Persistent Cache:</span>
|
||||
<span>{{ cacheStats().persistent.size }}/{{ cacheStats().persistent.maxSize }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preloader Stats -->
|
||||
<div class="stats-section">
|
||||
<h4>Preloader Status</h4>
|
||||
<div class="stat-row">
|
||||
<span>Queue Size:</span>
|
||||
<span>{{ preloaderStatus().queueSize }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span>Loading:</span>
|
||||
<span>{{ preloaderStatus().loadingCount }}/{{ preloaderStatus().config.maxConcurrentLoads }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Performance Metrics -->
|
||||
<div class="stats-section">
|
||||
<h4>Performance Metrics</h4>
|
||||
<div class="metrics-list">
|
||||
<div *ngFor="let metric of getTopMetrics()" class="metric-item">
|
||||
<div class="metric-name">{{ metric.name }}</div>
|
||||
<div class="metric-values">
|
||||
<span class="avg">{{ metric.avg }}ms avg</span>
|
||||
<span class="p95">{{ metric.p95 }}ms p95</span>
|
||||
<span class="count">{{ metric.count }} samples</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottlenecks -->
|
||||
<div class="stats-section" *ngIf="bottlenecks().slowOperations.length > 0">
|
||||
<h4>⚠️ Slow Operations</h4>
|
||||
<div *ngFor="let op of bottlenecks().slowOperations" class="bottleneck-item">
|
||||
<div class="op-name">{{ op.operation }}</div>
|
||||
<div class="op-stats">
|
||||
<span>{{ op.avgDuration }}ms avg</span>
|
||||
<span *ngIf="op.failureRate > 0" class="failure-rate">
|
||||
{{ (op.failureRate * 100).toFixed(1) }}% failures
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="actions">
|
||||
<button (click)="resetMetrics()" class="btn-reset">Reset Metrics</button>
|
||||
<button (click)="exportMetrics()" class="btn-export">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.performance-panel {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 12px;
|
||||
max-width: 400px;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.panel-header h3 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.stats-section:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.stats-section h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-row span:last-child {
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.metrics-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
background: #f5f5f5;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.metric-name {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.metric-values {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.metric-values span {
|
||||
background: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.metric-values .avg {
|
||||
color: #0066cc;
|
||||
}
|
||||
|
||||
.metric-values .p95 {
|
||||
color: #ff6600;
|
||||
}
|
||||
|
||||
.metric-values .count {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bottleneck-item {
|
||||
background: #fff3cd;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
border-left: 3px solid #ffc107;
|
||||
}
|
||||
|
||||
.op-name {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.op-stats {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.failure-rate {
|
||||
color: #d32f2f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #f0f0f0;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-export {
|
||||
color: #0066cc;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class PerformanceMonitorPanelComponent {
|
||||
private profiler = inject(PerformanceProfilerService);
|
||||
private cache = inject(ClientCacheService);
|
||||
private preloader = inject(NotePreloaderService);
|
||||
|
||||
isVisible = signal(typeof window !== 'undefined' && !this.isProduction());
|
||||
isPanelOpen = signal(false);
|
||||
|
||||
cacheStats = computed(() => this.cache.getStats());
|
||||
preloaderStatus = computed(() => this.preloader.getStatus());
|
||||
bottlenecks = computed(() => this.profiler.analyzeBottlenecks());
|
||||
|
||||
constructor() {
|
||||
// Auto-refresh stats every 2 seconds
|
||||
if (typeof window !== 'undefined') {
|
||||
setInterval(() => {
|
||||
// Trigger computed updates
|
||||
this.cacheStats();
|
||||
this.preloaderStatus();
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
getTopMetrics() {
|
||||
const metrics = this.profiler.getMetrics();
|
||||
return Object.entries(metrics)
|
||||
.map(([name, data]: [string, any]) => ({
|
||||
name,
|
||||
avg: data.avgDuration,
|
||||
p95: data.p95Duration,
|
||||
count: data.sampleCount
|
||||
}))
|
||||
.sort((a, b) => b.avg - a.avg)
|
||||
.slice(0, 5);
|
||||
}
|
||||
|
||||
togglePanel() {
|
||||
this.isPanelOpen.update(v => !v);
|
||||
}
|
||||
|
||||
resetMetrics() {
|
||||
this.profiler.reset();
|
||||
}
|
||||
|
||||
exportMetrics() {
|
||||
const data = this.profiler.exportMetrics();
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `performance-metrics-${Date.now()}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
private isProduction(): boolean {
|
||||
return typeof window !== 'undefined' && window.location.hostname !== 'localhost';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user