copilot-swe-agent[bot]
61cb428f54
- Add "Delete" button to reports list table (reports.html): clicking shows a confirmation dialog then calls the existing DELETE API. On success, the row is removed from the table without a page reload. Domain filter dropdown is pruned if the domain has no remaining reports. - Add "Delete Report" button to report detail page (report_detail.html): clicking shows a confirmation dialog then calls the DELETE API. On success, redirects to /reports. The backend DELETE endpoint and re-upload-after-delete (deduplication exemption) were already in place and covered by existing tests. Agent-Logs-Url: https://github.com/christianlouis/dmarq/sessions/d6c0078b-9338-49f0-87bd-32238fbde237 Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
213 lines
9.4 KiB
HTML
213 lines
9.4 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% from "components/ui/card.html" import card, card_header, card_title, card_description, card_content, card_footer %}
|
|
{% from "components/ui/button.html" import button, button_link %}
|
|
{% from "components/ui/table.html" import table, thead, tbody, tr, th, td %}
|
|
|
|
{% block title %}DMARQ - Reports{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto py-4" x-data="reportsApp()">
|
|
<h1 class="text-2xl font-bold mb-6">DMARC Reports</h1>
|
|
|
|
<!-- Report Filters -->
|
|
<div class="mb-6">
|
|
{% call card() %}
|
|
{% call card_content() %}
|
|
<div class="flex flex-wrap gap-4">
|
|
<div class="w-full sm:w-auto">
|
|
<label class="block text-sm font-medium mb-1">Domain</label>
|
|
<select class="select select-bordered w-full" x-model="filters.domain">
|
|
<option value="">All Domains</option>
|
|
<template x-for="domain in domains" :key="domain">
|
|
<option x-text="domain" :value="domain"></option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
<div class="w-full sm:w-auto">
|
|
<label class="block text-sm font-medium mb-1">Date Range</label>
|
|
<select class="select select-bordered w-full" x-model="filters.dateRange">
|
|
<option value="7">Last 7 days</option>
|
|
<option value="14">Last 14 days</option>
|
|
<option value="30">Last 30 days</option>
|
|
<option value="90">Last 90 days</option>
|
|
<option value="all">All time</option>
|
|
</select>
|
|
</div>
|
|
<div class="w-full sm:w-auto flex items-end">
|
|
{% call button(variant="outline") %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
|
|
Reset Filters
|
|
{% endcall %}
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<!-- Reports Table -->
|
|
<div class="mb-8">
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-center justify-between">
|
|
{% call card_title() %}DMARC Reports{% endcall %}
|
|
</div>
|
|
{% call card_description() %}
|
|
Showing <span x-text="filteredReports.length"></span> reports
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
{% call table() %}
|
|
{% call thead() %}
|
|
{% call tr() %}
|
|
{% call th() %}Date{% endcall %}
|
|
{% call th() %}Type{% endcall %}
|
|
{% call th() %}Domain{% endcall %}
|
|
{% call th() %}Organization{% endcall %}
|
|
{% call th() %}Messages{% endcall %}
|
|
{% call th() %}Pass Rate{% endcall %}
|
|
{% call th("text-right") %}Actions{% endcall %}
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call tbody() %}
|
|
<template x-for="(report, index) in filteredReports" :key="index">
|
|
{% call tr() %}
|
|
{% call td() %}
|
|
<div x-text="formatDate(report.end_date)"></div>
|
|
{% endcall %}
|
|
{% call td() %}
|
|
<div class="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800">
|
|
Aggregate
|
|
</div>
|
|
{% endcall %}
|
|
{% call td() %}
|
|
<div class="font-medium" x-text="report.domain"></div>
|
|
{% endcall %}
|
|
{% call td() %}
|
|
<div x-text="report.org_name"></div>
|
|
{% endcall %}
|
|
{% call td() %}
|
|
<div x-text="report.total_count"></div>
|
|
{% endcall %}
|
|
{% call td() %}
|
|
<div class="inline-flex items-center px-2 py-1 rounded"
|
|
:class="getPassRateColor(report.pass_rate)">
|
|
<span x-text="report.pass_rate + '%'"></span>
|
|
</div>
|
|
{% endcall %}
|
|
{% call td("text-right") %}
|
|
<div class="inline-flex gap-2 justify-end">
|
|
<a :href="`/reports/${report.report_id}`">
|
|
{% call button(variant="outline", size="sm") %}
|
|
View Details
|
|
{% endcall %}
|
|
</a>
|
|
<button class="btn btn-error btn-sm"
|
|
@click="deleteReport(report.domain, report.report_id)">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</template>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function reportsApp() {
|
|
return {
|
|
filters: {
|
|
domain: '',
|
|
dateRange: '30'
|
|
},
|
|
domains: [],
|
|
reports: [],
|
|
loading: false,
|
|
|
|
init() {
|
|
this.fetchReports();
|
|
},
|
|
|
|
get filteredReports() {
|
|
return this.reports.filter(report => {
|
|
// Filter by domain
|
|
if (this.filters.domain && report.domain !== this.filters.domain) {
|
|
return false;
|
|
}
|
|
|
|
// Filter by date range
|
|
if (this.filters.dateRange !== 'all') {
|
|
const days = parseInt(this.filters.dateRange);
|
|
const cutoff = new Date();
|
|
cutoff.setDate(cutoff.getDate() - days);
|
|
|
|
const reportDate = new Date(report.end_date);
|
|
if (reportDate < cutoff) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
});
|
|
},
|
|
|
|
formatDate(dateStr) {
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString();
|
|
},
|
|
|
|
getPassRateColor(rate) {
|
|
if (rate >= 90) return 'bg-green-100 text-green-800';
|
|
if (rate >= 50) return 'bg-yellow-100 text-yellow-800';
|
|
return 'bg-red-100 text-red-800';
|
|
},
|
|
|
|
async fetchReports() {
|
|
this.loading = true;
|
|
try {
|
|
const response = await fetch('/api/v1/reports');
|
|
this.reports = await response.json();
|
|
|
|
// Extract unique domains for the filter dropdown
|
|
this.domains = [...new Set(this.reports.map(r => r.domain))].sort();
|
|
} catch (error) {
|
|
console.error('Error fetching reports:', error);
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async deleteReport(domain, reportId) {
|
|
if (!confirm(`Delete report "${reportId}" for domain "${domain}"?\n\nThis will remove the report from the system. You can re-import it afterwards.`)) {
|
|
return;
|
|
}
|
|
try {
|
|
const response = await fetch(
|
|
`/api/v1/reports/domain/${encodeURIComponent(domain)}/reports/${encodeURIComponent(reportId)}`,
|
|
{ method: 'DELETE' }
|
|
);
|
|
if (response.ok) {
|
|
this.reports = this.reports.filter(
|
|
r => !(r.domain === domain && r.report_id === reportId)
|
|
);
|
|
if (!this.reports.some(r => r.domain === domain)) {
|
|
this.domains = this.domains.filter(d => d !== domain);
|
|
}
|
|
} else {
|
|
const data = await response.json().catch(() => ({}));
|
|
alert('Failed to delete report: ' + (data.detail || response.statusText));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting report:', error);
|
|
alert('Network error — could not delete report.');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |