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>
119 lines
3.8 KiB
JavaScript
119 lines
3.8 KiB
JavaScript
/**
|
|
* Code Quality Violations List Component
|
|
* Manages the violations list page with filtering and pagination
|
|
*/
|
|
|
|
function codeQualityViolations() {
|
|
return {
|
|
// Extend base data
|
|
...data(),
|
|
|
|
// Set current page for navigation
|
|
currentPage: 'code-quality',
|
|
|
|
// Violations-specific data
|
|
loading: false,
|
|
error: null,
|
|
violations: [],
|
|
pagination: {
|
|
page: 1,
|
|
page_size: 50,
|
|
total: 0,
|
|
total_pages: 0
|
|
},
|
|
filters: {
|
|
severity: '',
|
|
status: '',
|
|
rule_id: '',
|
|
file_path: ''
|
|
},
|
|
|
|
async init() {
|
|
// Load filters from URL params
|
|
const params = new URLSearchParams(window.location.search);
|
|
this.filters.severity = params.get('severity') || '';
|
|
this.filters.status = params.get('status') || '';
|
|
this.filters.rule_id = params.get('rule_id') || '';
|
|
this.filters.file_path = params.get('file_path') || '';
|
|
|
|
await this.loadViolations();
|
|
},
|
|
|
|
async loadViolations() {
|
|
this.loading = true;
|
|
this.error = null;
|
|
|
|
try {
|
|
// Build query params
|
|
const params = {
|
|
page: this.pagination.page.toString(),
|
|
page_size: this.pagination.page_size.toString()
|
|
};
|
|
|
|
if (this.filters.severity) params.severity = this.filters.severity;
|
|
if (this.filters.status) params.status = this.filters.status;
|
|
if (this.filters.rule_id) params.rule_id = this.filters.rule_id;
|
|
if (this.filters.file_path) params.file_path = this.filters.file_path;
|
|
|
|
const data = await apiClient.get('/admin/code-quality/violations', params);
|
|
|
|
this.violations = data.violations;
|
|
this.pagination = {
|
|
page: data.page,
|
|
page_size: data.page_size,
|
|
total: data.total,
|
|
total_pages: data.total_pages
|
|
};
|
|
|
|
// Update URL with current filters (without reloading)
|
|
this.updateURL();
|
|
} catch (err) {
|
|
console.error('Failed to load violations:', err);
|
|
this.error = err.message;
|
|
|
|
// Redirect to login if unauthorized
|
|
if (err.message.includes('Unauthorized')) {
|
|
window.location.href = '/admin/login';
|
|
}
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
applyFilters() {
|
|
// Reset to page 1 when filters change
|
|
this.pagination.page = 1;
|
|
this.loadViolations();
|
|
},
|
|
|
|
async nextPage() {
|
|
if (this.pagination.page < this.pagination.total_pages) {
|
|
this.pagination.page++;
|
|
await this.loadViolations();
|
|
}
|
|
},
|
|
|
|
async previousPage() {
|
|
if (this.pagination.page > 1) {
|
|
this.pagination.page--;
|
|
await this.loadViolations();
|
|
}
|
|
},
|
|
|
|
updateURL() {
|
|
const params = new URLSearchParams();
|
|
|
|
if (this.filters.severity) params.set('severity', this.filters.severity);
|
|
if (this.filters.status) params.set('status', this.filters.status);
|
|
if (this.filters.rule_id) params.set('rule_id', this.filters.rule_id);
|
|
if (this.filters.file_path) params.set('file_path', this.filters.file_path);
|
|
|
|
const newURL = params.toString()
|
|
? `${window.location.pathname}?${params.toString()}`
|
|
: window.location.pathname;
|
|
|
|
window.history.replaceState({}, '', newURL);
|
|
}
|
|
};
|
|
}
|