Samir Boulahtit
13f0094743
Fix multiple JavaScript errors on code quality dashboard pages:
Issues Fixed:
1. ReferenceError: getAccessToken is not defined
- Changed to use apiClient.get() and apiClient.post() from api-client.js
- Properly uses existing authentication infrastructure
2. ReferenceError: dark/isSideMenuOpen/currentPage is not defined
- Extended base data() function using spread operator
- Inherits all base Alpine.js state from init-alpine.js
3. RegExp validation error
- Not directly addressed but likely resolved by proper Alpine initialization
Changes:
- static/admin/js/code-quality-dashboard.js:
* Spread ...data() to inherit base Alpine.js state
* Set currentPage: 'code-quality' for navigation highlighting
* Use apiClient.get('/admin/code-quality/stats') for API calls
* Use apiClient.post('/admin/code-quality/scan') for scan triggers
* Simplified error handling with apiClient error messages
- static/admin/js/code-quality-violations.js:
* Spread ...data() to inherit base Alpine.js state
* Set currentPage: 'code-quality' for navigation highlighting
* Use apiClient.get('/admin/code-quality/violations', params) for API calls
* Simplified query parameter building using object instead of URLSearchParams
Testing:
- Dashboard should now load without JavaScript errors
- API calls should work with proper authentication
- Dark mode toggle and sidebar menu should function correctly
- Navigation highlighting should work properly
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
/**
|
|
* Code Quality Dashboard Component
|
|
* Manages the code quality dashboard page
|
|
*/
|
|
|
|
function codeQualityDashboard() {
|
|
return {
|
|
// Extend base data
|
|
...data(),
|
|
|
|
// Set current page for navigation
|
|
currentPage: 'code-quality',
|
|
|
|
// Dashboard-specific data
|
|
loading: false,
|
|
scanning: false,
|
|
error: null,
|
|
successMessage: null,
|
|
stats: {
|
|
total_violations: 0,
|
|
errors: 0,
|
|
warnings: 0,
|
|
open: 0,
|
|
assigned: 0,
|
|
resolved: 0,
|
|
ignored: 0,
|
|
technical_debt_score: 100,
|
|
trend: [],
|
|
by_severity: {},
|
|
by_rule: {},
|
|
by_module: {},
|
|
top_files: [],
|
|
last_scan: null
|
|
},
|
|
|
|
async init() {
|
|
await this.loadStats();
|
|
},
|
|
|
|
async loadStats() {
|
|
this.loading = true;
|
|
this.error = null;
|
|
|
|
try {
|
|
const stats = await apiClient.get('/admin/code-quality/stats');
|
|
this.stats = stats;
|
|
} catch (err) {
|
|
console.error('Failed to load stats:', err);
|
|
this.error = err.message;
|
|
|
|
// Redirect to login if unauthorized
|
|
if (err.message.includes('Unauthorized')) {
|
|
window.location.href = '/admin/login';
|
|
}
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async runScan() {
|
|
this.scanning = true;
|
|
this.error = null;
|
|
this.successMessage = null;
|
|
|
|
try {
|
|
const scan = await apiClient.post('/admin/code-quality/scan');
|
|
this.successMessage = `Scan completed: ${scan.total_violations} violations found (${scan.errors} errors, ${scan.warnings} warnings)`;
|
|
|
|
// Reload stats after scan
|
|
await this.loadStats();
|
|
|
|
// Clear success message after 5 seconds
|
|
setTimeout(() => {
|
|
this.successMessage = null;
|
|
}, 5000);
|
|
} catch (err) {
|
|
console.error('Failed to run scan:', err);
|
|
this.error = err.message;
|
|
|
|
// Redirect to login if unauthorized
|
|
if (err.message.includes('Unauthorized')) {
|
|
window.location.href = '/admin/login';
|
|
}
|
|
} finally {
|
|
this.scanning = false;
|
|
}
|
|
},
|
|
|
|
async refresh() {
|
|
await this.loadStats();
|
|
}
|
|
};
|
|
}
|