feat: implement code quality dashboard with architecture violation tracking
Implement comprehensive code quality dashboard (Phase 2-4) to track and manage
architecture violations found by the validation script.
Backend Implementation:
- Add JSON output support to validate_architecture.py script
- Create CodeQualityService with scan management, violation tracking, and statistics
- Implement REST API endpoints for code quality management:
* POST /admin/code-quality/scan - trigger new architecture scan
* GET /admin/code-quality/scans - list scan history
* GET /admin/code-quality/violations - list violations with filtering/pagination
* GET /admin/code-quality/violations/{id} - get violation details
* POST /admin/code-quality/violations/{id}/assign - assign to developer
* POST /admin/code-quality/violations/{id}/resolve - mark as resolved
* POST /admin/code-quality/violations/{id}/ignore - mark as ignored
* POST /admin/code-quality/violations/{id}/comments - add comments
* GET /admin/code-quality/stats - dashboard statistics
- Fix architecture_scan model imports to use app.core.database
Frontend Implementation:
- Create code quality dashboard page (code-quality-dashboard.html)
* Summary cards for total violations, errors, warnings, health score
* Status breakdown (open, assigned, resolved, ignored)
* Trend visualization for last 7 scans
* Top violating files list
* Violations by rule and module
* Quick action links
- Create violations list page (code-quality-violations.html)
* Filterable table by severity, status, rule ID, file path
* Pagination support
* Violation detail view links
- Add Alpine.js components (code-quality-dashboard.js, code-quality-violations.js)
* Dashboard state management and scan triggering
* Violations list with filtering and pagination
* API integration with authentication
- Add "Code Quality" navigation link in admin sidebar (Developer Tools section)
Routes:
- GET /admin/code-quality - dashboard page
- GET /admin/code-quality/violations - violations list
- GET /admin/code-quality/violations/{id} - violation details
Features:
- Real-time scan execution from UI
- Technical debt score calculation (0-100 scale)
- Violation workflow: open → assigned → resolved/ignored
- Trend tracking across multiple scans
- File and module-level insights
- Assignment system with priorities and due dates
- Collaborative comments on violations
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
119
static/admin/js/code-quality-violations.js
Normal file
119
static/admin/js/code-quality-violations.js
Normal file
@@ -0,0 +1,119 @@
|
||||
/**
|
||||
* Code Quality Violations List Component
|
||||
* Manages the violations list page with filtering and pagination
|
||||
*/
|
||||
|
||||
function codeQualityViolations() {
|
||||
return {
|
||||
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 = new URLSearchParams({
|
||||
page: this.pagination.page.toString(),
|
||||
page_size: this.pagination.page_size.toString()
|
||||
});
|
||||
|
||||
if (this.filters.severity) params.append('severity', this.filters.severity);
|
||||
if (this.filters.status) params.append('status', this.filters.status);
|
||||
if (this.filters.rule_id) params.append('rule_id', this.filters.rule_id);
|
||||
if (this.filters.file_path) params.append('file_path', this.filters.file_path);
|
||||
|
||||
const response = await fetch(`/api/v1/admin/code-quality/violations?${params.toString()}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${getAccessToken()}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
window.location.href = '/admin/login';
|
||||
return;
|
||||
}
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
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;
|
||||
} 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);
|
||||
}
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user