Violation Details
Component: {{component}}
Violation Type: {{violation_type}}
Current Value: {{current_value}}
Threshold: {{threshold}}
Severity: {{severity}}
Timestamp: {{timestamp}}
Recommended Actions
- Review component implementation for optimization opportunities
- Check for unnecessary dependencies or imports
- Consider code splitting or lazy loading
- Update performance baselines if appropriate
View detailed performance report
EOF
# Create Grafana dashboard configuration
echo -e "${YELLOW}📊 Creating Grafana dashboard configuration...${NC}"
cat > "$DASHBOARDS_DIR/performance_dashboard.json" << 'EOF'
{
"dashboard": {
"id": null,
"title": "Leptos ShadCN UI Performance Monitoring",
"tags": ["leptos", "shadcn", "performance"],
"timezone": "browser",
"panels": [
{
"id": 1,
"title": "Bundle Size Trends",
"type": "graph",
"targets": [
{
"expr": "leptos_component_bundle_size_kb",
"legendFormat": "{{component}}"
}
],
"yAxes": [
{
"label": "Bundle Size (KB)",
"min": 0,
"max": 600
}
],
"thresholds": [
{
"value": 400,
"colorMode": "critical",
"op": "gt"
},
{
"value": 500,
"colorMode": "critical",
"op": "gt"
}
]
},
{
"id": 2,
"title": "Render Time Trends",
"type": "graph",
"targets": [
{
"expr": "leptos_component_render_time_ms",
"legendFormat": "{{component}}"
}
],
"yAxes": [
{
"label": "Render Time (ms)",
"min": 0,
"max": 20
}
],
"thresholds": [
{
"value": 12,
"colorMode": "critical",
"op": "gt"
},
{
"value": 16,
"colorMode": "critical",
"op": "gt"
}
]
},
{
"id": 3,
"title": "Performance Contract Violations",
"type": "stat",
"targets": [
{
"expr": "sum(leptos_performance_violations_total)",
"legendFormat": "Total Violations"
}
],
"colorMode": "value",
"thresholds": [
{
"value": 0,
"color": "green"
},
{
"value": 1,
"color": "yellow"
},
{
"value": 5,
"color": "red"
}
]
}
],
"time": {
"from": "now-1h",
"to": "now"
},
"refresh": "30s"
}
}
EOF
# Create monitoring service script
echo -e "${YELLOW}🔧 Creating monitoring service script...${NC}"
cat > "$MONITORING_DIR/start_monitoring.sh" << 'EOF'
#!/bin/bash
# Start Performance Monitoring Service
set -euo pipefail
# Load configuration
source monitoring/config/performance_config.toml
echo "🚀 Starting Performance Monitoring Service"
echo "=========================================="
# Check if monitoring is already running
if pgrep -f "performance_monitor" > /dev/null; then
echo "⚠️ Performance monitoring is already running"
echo " PID: $(pgrep -f performance_monitor)"
exit 1
fi
# Start the monitoring service
echo "📊 Starting performance monitor..."
cargo run --package leptos-shadcn-contract-testing --bin performance_monitor monitor 30 &
MONITOR_PID=$!
echo "✅ Performance monitoring started with PID: $MONITOR_PID"
# Save PID for later use
echo $MONITOR_PID > monitoring/monitor.pid
echo "📈 Monitoring service is now running"
echo " - Check interval: 30 seconds"
echo " - Logs: monitoring/monitor.log"
echo " - PID file: monitoring/monitor.pid"
echo ""
echo "To stop monitoring: ./monitoring/stop_monitoring.sh"
echo "To view logs: tail -f monitoring/monitor.log"
EOF
chmod +x "$MONITORING_DIR/start_monitoring.sh"
# Create stop monitoring script
cat > "$MONITORING_DIR/stop_monitoring.sh" << 'EOF'
#!/bin/bash
# Stop Performance Monitoring Service
set -euo pipefail
echo "🛑 Stopping Performance Monitoring Service"
echo "=========================================="
if [ -f monitoring/monitor.pid ]; then
MONITOR_PID=$(cat monitoring/monitor.pid)
if kill -0 $MONITOR_PID 2>/dev/null; then
echo "📊 Stopping performance monitor (PID: $MONITOR_PID)..."
kill $MONITOR_PID
# Wait for graceful shutdown
sleep 2
if kill -0 $MONITOR_PID 2>/dev/null; then
echo "⚠️ Force killing monitor process..."
kill -9 $MONITOR_PID
fi
echo "✅ Performance monitoring stopped"
else
echo "⚠️ Monitor process not running"
fi
rm -f monitoring/monitor.pid
else
echo "⚠️ No PID file found. Trying to kill by process name..."
pkill -f performance_monitor || echo "No monitoring processes found"
fi
echo "🏁 Monitoring service stopped"
EOF
chmod +x "$MONITORING_DIR/stop_monitoring.sh"
# Create health check script
cat > "$MONITORING_DIR/health_check.sh" << 'EOF'
#!/bin/bash
# Performance Monitoring Health Check
set -euo pipefail
echo "🏥 Performance Monitoring Health Check"
echo "====================================="
# Check if monitoring is running
if [ -f monitoring/monitor.pid ]; then
MONITOR_PID=$(cat monitoring/monitor.pid)
if kill -0 $MONITOR_PID 2>/dev/null; then
echo "✅ Monitoring service is running (PID: $MONITOR_PID)"
else
echo "❌ Monitoring service is not running (stale PID file)"
rm -f monitoring/monitor.pid
fi
else
echo "❌ No monitoring PID file found"
fi
# Check recent performance violations
echo ""
echo "📊 Recent Performance Status:"
cargo run --package leptos-shadcn-contract-testing --bin performance_monitor check
# Check configuration
echo ""
echo "⚙️ Configuration Status:"
if [ -f monitoring/config/performance_config.toml ]; then
echo "✅ Configuration file exists"
else
echo "❌ Configuration file missing"
fi
# Check alert templates
echo ""
echo "📧 Alert Templates Status:"
if [ -f monitoring/alerts/slack_template.json ]; then
echo "✅ Slack template exists"
else
echo "❌ Slack template missing"
fi
if [ -f monitoring/alerts/email_template.html ]; then
echo "✅ Email template exists"
else
echo "❌ Email template missing"
fi
echo ""
echo "🏁 Health check complete"
EOF
chmod +x "$MONITORING_DIR/health_check.sh"
# Create README for monitoring
cat > "$MONITORING_DIR/README.md" << 'EOF'
# Performance Monitoring Infrastructure
This directory contains the performance monitoring infrastructure for the leptos-shadcn-ui project.
## Quick Start
```bash
# Start monitoring
./monitoring/start_monitoring.sh
# Check health
./monitoring/health_check.sh
# Stop monitoring
./monitoring/stop_monitoring.sh
```
## Configuration
Edit `config/performance_config.toml` to customize:
- Performance thresholds
- Monitoring intervals
- Alert channels
- Components to monitor
## Alert Channels
### Slack Integration
1. Create a Slack webhook URL
2. Add it to `config/performance_config.toml`
3. Restart monitoring service
### Email Alerts
1. Configure SMTP settings
2. Add recipient emails to config
3. Restart monitoring service
### Grafana Dashboard
1. Import `dashboards/performance_dashboard.json`
2. Configure Prometheus data source
3. Set up alerting rules
## Manual Commands
```bash
# Check performance contracts once
cargo run --package leptos-shadcn-contract-testing --bin performance_monitor check
# Generate performance report
cargo run --package leptos-shadcn-contract-testing --bin performance_monitor report
# Start continuous monitoring
cargo run --package leptos-shadcn-contract-testing --bin performance_monitor monitor 30
```
## Troubleshooting
- Check logs: `tail -f monitoring/monitor.log`
- Verify configuration: `./monitoring/health_check.sh`
- Restart service: `./monitoring/stop_monitoring.sh && ./monitoring/start_monitoring.sh`
EOF
# Create .gitignore for monitoring
cat > "$MONITORING_DIR/.gitignore" << 'EOF'
# Monitoring runtime files
monitor.pid
monitor.log
*.log
# Sensitive configuration
config/secrets.toml
config/webhooks.toml
# Temporary files
*.tmp
*.temp
EOF
echo -e "${GREEN}✅ Performance monitoring infrastructure setup complete!${NC}"
echo ""
echo -e "${BLUE}📋 Next Steps:${NC}"
echo "1. Configure alert channels in $CONFIG_DIR/performance_config.toml"
echo "2. Start monitoring: ./$MONITORING_DIR/start_monitoring.sh"
echo "3. Check health: ./$MONITORING_DIR/health_check.sh"
echo "4. View dashboard: Import $DASHBOARDS_DIR/performance_dashboard.json into Grafana"
echo ""
echo -e "${YELLOW}📚 Documentation: $MONITORING_DIR/README.md${NC}"