Christian Krakau-Louis
758 lines
34 KiB
HTML
758 lines
34 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/alert.html" import alert, alert_title, alert_description %}
|
|
{% from "components/ui/table.html" import table, thead, tbody, tr, th, td %}
|
|
|
|
{% block title %}DMARQ - Dashboard{% endblock %}
|
|
|
|
{% block page_title %}Dashboard{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="grid gap-4 md:gap-8 py-4" x-data="dashboardApp()">
|
|
<!-- Overview Stats -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<!-- Total Domains Card -->
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-center justify-between">
|
|
{% call card_title() %}Total Domains{% endcall %}
|
|
<div class="p-2 bg-primary/10 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary"><circle cx="12" cy="12" r="10"></circle><line x1="2" x2="22" y1="12" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="stat-card">
|
|
<div id="total-domains" class="stat-value">0</div>
|
|
<p class="stat-description">Active domains being monitored</p>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
|
|
<!-- Emails Analyzed Card -->
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-center justify-between">
|
|
{% call card_title() %}Emails Analyzed{% endcall %}
|
|
<div class="p-2 bg-secondary/10 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-secondary"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="stat-card">
|
|
<div id="total-emails" class="stat-value">0</div>
|
|
<p class="stat-description">Total emails processed</p>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
|
|
<!-- Pass Rate Card -->
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-center justify-between">
|
|
{% call card_title() %}Pass Rate{% endcall %}
|
|
<div class="p-2 bg-green-500/10 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-green-500"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="stat-card">
|
|
<div id="overall-pass-rate" class="stat-value text-green-500">0%</div>
|
|
<p class="stat-description">Overall DMARC compliance</p>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
|
|
<!-- Reports Card -->
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-center justify-between">
|
|
{% call card_title() %}Reports Processed{% endcall %}
|
|
<div class="p-2 bg-accent/10 rounded-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="stat-card">
|
|
<div id="reports-processed" class="stat-value">0</div>
|
|
<p class="stat-description">DMARC reports received</p>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<!-- Dashboard Trends -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4" x-show="hasDomainData" x-cloak>
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
{% call card_title() %}Mail Volume Trend{% endcall %}
|
|
{% call card_description() %}
|
|
Daily DMARC mail volume over the last 30 days
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="h-64">
|
|
<canvas id="volume-trend-chart" aria-label="Daily DMARC mail volume trend"></canvas>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
{% call card_title() %}Authentication Trend{% endcall %}
|
|
{% call card_description() %}
|
|
Daily compliance and failure rates over the last 30 days
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="h-64">
|
|
<canvas id="compliance-trend-chart" aria-label="Daily DMARC compliance and failure trend"></canvas>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<!-- What Changed -->
|
|
<div x-show="hasDomainData" x-cloak>
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
{% call card_title() %}What Changed{% endcall %}
|
|
{% call card_description() %}
|
|
New sending sources and sharp compliance changes from the last 30 days
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div id="change-summary-list" class="space-y-3">
|
|
<!-- Change summaries will be populated here via JavaScript -->
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<!-- Top Sending Sources -->
|
|
<div x-show="hasDomainData" x-cloak>
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
{% call card_title() %}Top Sending Sources{% endcall %}
|
|
{% call card_description() %}
|
|
Sender IPs with authentication pass and fail breakdowns
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="overflow-x-auto">
|
|
{% call table() %}
|
|
{% call thead() %}
|
|
{% call tr() %}
|
|
{% call th() %}Source{% endcall %}
|
|
{% call th() %}Messages{% endcall %}
|
|
{% call th() %}DMARC{% endcall %}
|
|
{% call th() %}SPF{% endcall %}
|
|
{% call th() %}DKIM{% endcall %}
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call tbody() %}
|
|
<tbody id="top-sources-table-body">
|
|
<!-- Source data will be populated here via JavaScript -->
|
|
</tbody>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<!-- Domain Compliance Table -->
|
|
<div x-show="hasDomainData" x-cloak>
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-center justify-between">
|
|
{% call card_title() %}Domain Compliance{% endcall %}
|
|
{% call button(variant="outline", size="sm") %}
|
|
<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"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg>
|
|
Refresh
|
|
{% endcall %}
|
|
</div>
|
|
{% call card_description() %}
|
|
Overview of domains and their DMARC compliance status
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
{% call table() %}
|
|
{% call thead() %}
|
|
{% call tr() %}
|
|
{% call th() %}Domain{% endcall %}
|
|
{% call th() %}Emails{% endcall %}
|
|
{% call th() %}Pass Rate{% endcall %}
|
|
{% call th() %}Failed{% endcall %}
|
|
{% call th() %}Reports{% endcall %}
|
|
{% call th("text-right") %}Actions{% endcall %}
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% call tbody() %}
|
|
<tbody id="domains-table-body">
|
|
<!-- Domain data will be populated here via JavaScript -->
|
|
</tbody>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<!-- No Data Message -->
|
|
<div x-show="!hasDomainData" x-cloak>
|
|
{% call card() %}
|
|
{% call card_content() %}
|
|
<div class="flex flex-col items-center justify-center py-12 text-center">
|
|
<div class="rounded-full p-4 bg-muted mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><circle cx="12" cy="12" r="10"></circle><path d="m8 12 4 0"></path><path d="m16 12 0 .01"></path><path d="M12 16v-4"></path></svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold mb-2">No DMARC reports have been uploaded yet</h3>
|
|
<p class="text-muted-foreground mb-4 max-w-md">Upload a report or configure IMAP integration to see statistics and gain insights into your domain's email authentication.</p>
|
|
<div class="flex gap-2">
|
|
{% call button_link(href="/upload") %}
|
|
<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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" x2="12" y1="3" y2="15"></line></svg>
|
|
Upload Report
|
|
{% endcall %}
|
|
{% call button_link(href="/settings", 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"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
|
Configure IMAP
|
|
{% endcall %}
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
|
|
<!-- IMAP Status -->
|
|
<div>
|
|
{% call card() %}
|
|
{% call card_header() %}
|
|
<div class="flex items-center justify-between">
|
|
{% call card_title() %}IMAP Integration Status{% endcall %}
|
|
{% call button_link(href="/api/v1/admin/trigger-poll", variant="outline", size="sm") %}
|
|
<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"><path d="m3 2 2 4h8L7 14h2l-4 8 1-6H4l2-8H3z"></path></svg>
|
|
Trigger Poll Now
|
|
{% endcall %}
|
|
</div>
|
|
{% endcall %}
|
|
{% call card_content() %}
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-center">
|
|
<span class="w-40 text-sm text-muted-foreground">Status:</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<span id="imap-status-icon" class="h-2.5 w-2.5 rounded-full bg-green-500"></span>
|
|
<span id="imap-status-text">Running</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-40 text-sm text-muted-foreground">Last Check:</span>
|
|
<span id="imap-last-check">Never</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="w-40 text-sm text-muted-foreground">Mailbox:</span>
|
|
<span id="imap-mailbox">dmarc-reports@hosterra.net</span>
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
{% endcall %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="/static/js/chart.umd.min.js"></script>
|
|
<script>
|
|
function dashboardApp() {
|
|
return {
|
|
hasDomainData: false,
|
|
volumeTrendChart: null,
|
|
complianceTrendChart: null,
|
|
|
|
init() {
|
|
// Fetch domain summary on page load
|
|
this.fetchDomainSummary();
|
|
|
|
// Check IMAP status
|
|
this.getImapStatus();
|
|
},
|
|
|
|
async getImapStatus() {
|
|
try {
|
|
const response = await fetch('/api/v1/poll-status');
|
|
if (!response.ok) {
|
|
console.error('Error checking IMAP status:', response.status);
|
|
return;
|
|
}
|
|
const data = await response.json();
|
|
|
|
const statusIcon = document.getElementById('imap-status-icon');
|
|
const statusText = document.getElementById('imap-status-text');
|
|
const lastCheck = document.getElementById('imap-last-check');
|
|
|
|
if (data.is_running) {
|
|
statusIcon.classList.remove('bg-red-500');
|
|
statusIcon.classList.add('bg-green-500');
|
|
statusText.textContent = 'Running';
|
|
} else {
|
|
statusIcon.classList.remove('bg-green-500');
|
|
statusIcon.classList.add('bg-red-500');
|
|
statusText.textContent = 'Stopped';
|
|
}
|
|
|
|
if (data.last_check) {
|
|
lastCheck.textContent = new Date(data.last_check).toLocaleString();
|
|
} else {
|
|
lastCheck.textContent = 'Never';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking IMAP status:', error);
|
|
}
|
|
},
|
|
|
|
async fetchDomainSummary() {
|
|
try {
|
|
const response = await fetch('/api/v1/domains/summary');
|
|
const data = await response.json();
|
|
|
|
if (data && data.domains && data.domains.length > 0) {
|
|
this.hasDomainData = true;
|
|
this.updateDashboardStats(data);
|
|
this.populateDomainsTable(data.domains);
|
|
this.$nextTick(() => this.fetchDashboardStats());
|
|
} else {
|
|
this.hasDomainData = false;
|
|
this.clearDashboardCharts();
|
|
this.populateChangeSummary([]);
|
|
this.populateTopSources([]);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching domain summary:', error);
|
|
this.hasDomainData = false;
|
|
this.clearDashboardCharts();
|
|
this.populateChangeSummary([]);
|
|
this.populateTopSources([]);
|
|
}
|
|
},
|
|
|
|
async fetchDashboardStats() {
|
|
try {
|
|
const response = await fetch('/api/v1/stats/dashboard?period_days=30');
|
|
if (!response.ok) {
|
|
console.error('Error fetching dashboard stats:', response.status);
|
|
return;
|
|
}
|
|
|
|
const data = await response.json();
|
|
this.renderDashboardCharts(data.compliance_trend || []);
|
|
this.populateChangeSummary(data.change_summary || []);
|
|
this.populateTopSources(data.top_sources || []);
|
|
} catch (error) {
|
|
console.error('Error fetching dashboard stats:', error);
|
|
}
|
|
},
|
|
|
|
updateDashboardStats(data) {
|
|
if (!data) return;
|
|
|
|
const totalDomains = document.getElementById('total-domains');
|
|
const totalEmails = document.getElementById('total-emails');
|
|
const passRate = document.getElementById('overall-pass-rate');
|
|
const reportsProcessed = document.getElementById('reports-processed');
|
|
|
|
if (totalDomains) totalDomains.textContent = data.total_domains || 0;
|
|
if (totalEmails) totalEmails.textContent = data.total_emails || 0;
|
|
if (passRate) passRate.textContent = `${data.overall_pass_rate || 0}%`;
|
|
if (reportsProcessed) reportsProcessed.textContent = data.reports_processed || 0;
|
|
},
|
|
|
|
renderDashboardCharts(trendData) {
|
|
if (!window.Chart || !trendData.length) {
|
|
this.clearDashboardCharts();
|
|
return;
|
|
}
|
|
|
|
this.renderVolumeTrend(trendData);
|
|
this.renderComplianceTrend(trendData);
|
|
},
|
|
|
|
renderVolumeTrend(trendData) {
|
|
const canvas = document.getElementById('volume-trend-chart');
|
|
if (!canvas) return;
|
|
|
|
const labels = trendData.map(item => item.date);
|
|
const volumes = trendData.map(item => item.volume || item.total || 0);
|
|
|
|
if (this.volumeTrendChart) {
|
|
this.volumeTrendChart.destroy();
|
|
}
|
|
|
|
this.volumeTrendChart = new Chart(canvas.getContext('2d'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels,
|
|
datasets: [{
|
|
label: 'Messages',
|
|
data: volumes,
|
|
backgroundColor: 'rgba(37, 99, 235, 0.72)',
|
|
borderColor: 'rgb(37, 99, 235)',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
maxBarThickness: 28
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
precision: 0,
|
|
callback: value => this.formatLargeNumber(value)
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Messages'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: context => `${this.formatLargeNumber(context.parsed.y)} messages`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
renderComplianceTrend(trendData) {
|
|
const canvas = document.getElementById('compliance-trend-chart');
|
|
if (!canvas) return;
|
|
|
|
const labels = trendData.map(item => item.date);
|
|
const complianceRates = trendData.map(item => item.compliance_rate ?? item.rate ?? 0);
|
|
const failureRates = trendData.map(item => item.failure_rate ?? 0);
|
|
|
|
if (this.complianceTrendChart) {
|
|
this.complianceTrendChart.destroy();
|
|
}
|
|
|
|
this.complianceTrendChart = new Chart(canvas.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
label: 'Compliance Rate',
|
|
data: complianceRates,
|
|
borderColor: 'rgb(22, 163, 74)',
|
|
backgroundColor: 'rgba(22, 163, 74, 0.12)',
|
|
pointBackgroundColor: 'rgb(22, 163, 74)',
|
|
pointRadius: 3,
|
|
pointHoverRadius: 5,
|
|
tension: 0.35,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Failure Rate',
|
|
data: failureRates,
|
|
borderColor: 'rgb(220, 38, 38)',
|
|
backgroundColor: 'rgba(220, 38, 38, 0.08)',
|
|
pointBackgroundColor: 'rgb(220, 38, 38)',
|
|
pointRadius: 3,
|
|
pointHoverRadius: 5,
|
|
tension: 0.35,
|
|
fill: false
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: value => `${value}%`
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Rate'
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: context => `${context.dataset.label}: ${context.parsed.y}%`
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
clearDashboardCharts() {
|
|
if (this.volumeTrendChart) {
|
|
this.volumeTrendChart.destroy();
|
|
this.volumeTrendChart = null;
|
|
}
|
|
if (this.complianceTrendChart) {
|
|
this.complianceTrendChart.destroy();
|
|
this.complianceTrendChart = null;
|
|
}
|
|
},
|
|
|
|
formatLargeNumber(value) {
|
|
return new Intl.NumberFormat(undefined, { notation: 'compact' }).format(value);
|
|
},
|
|
|
|
populateChangeSummary(changes) {
|
|
const list = document.getElementById('change-summary-list');
|
|
if (!list) return;
|
|
|
|
list.textContent = '';
|
|
|
|
if (!changes || !changes.length) {
|
|
const empty = document.createElement('p');
|
|
empty.className = 'text-sm text-muted-foreground';
|
|
empty.textContent = 'No major sender or compliance changes detected.';
|
|
list.appendChild(empty);
|
|
return;
|
|
}
|
|
|
|
changes.forEach(change => {
|
|
const item = document.createElement('div');
|
|
item.className = 'rounded-md border border-base-300 bg-base-100 p-3';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'flex items-start gap-2';
|
|
|
|
const dot = document.createElement('span');
|
|
dot.className = `mt-1 inline-flex h-2.5 w-2.5 flex-none rounded-full ${this.changeSeverityClass(change.severity)}`;
|
|
header.appendChild(dot);
|
|
|
|
const content = document.createElement('div');
|
|
content.className = 'min-w-0';
|
|
|
|
const title = document.createElement('p');
|
|
title.className = 'text-sm font-semibold';
|
|
title.textContent = change.title || 'Change detected';
|
|
content.appendChild(title);
|
|
|
|
const detail = document.createElement('p');
|
|
detail.className = 'mt-1 text-sm text-muted-foreground';
|
|
detail.textContent = change.detail || '';
|
|
content.appendChild(detail);
|
|
|
|
const action = document.createElement('p');
|
|
action.className = 'mt-1 text-sm';
|
|
action.textContent = change.action || '';
|
|
content.appendChild(action);
|
|
|
|
header.appendChild(content);
|
|
item.appendChild(header);
|
|
list.appendChild(item);
|
|
});
|
|
},
|
|
|
|
changeSeverityClass(severity) {
|
|
if (severity === 'error') return 'bg-red-500';
|
|
if (severity === 'warning') return 'bg-yellow-500';
|
|
return 'bg-blue-500';
|
|
},
|
|
|
|
populateTopSources(sources) {
|
|
const tableBody = document.getElementById('top-sources-table-body');
|
|
if (!tableBody) return;
|
|
|
|
tableBody.textContent = '';
|
|
|
|
if (!sources || !sources.length) {
|
|
const emptyRow = document.createElement('tr');
|
|
emptyRow.className = 'table-row';
|
|
const emptyCell = document.createElement('td');
|
|
emptyCell.className = 'table-cell text-muted-foreground';
|
|
emptyCell.colSpan = 5;
|
|
emptyCell.textContent = 'No sending source data available';
|
|
emptyRow.appendChild(emptyCell);
|
|
tableBody.appendChild(emptyRow);
|
|
return;
|
|
}
|
|
|
|
sources.forEach(source => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'table-row';
|
|
|
|
row.appendChild(this.createTextCell(source.ip || 'Unknown', 'font-mono text-sm'));
|
|
row.appendChild(this.createTextCell(this.formatLargeNumber(source.count || 0)));
|
|
row.appendChild(this.createAuthCell(
|
|
source.dmarc,
|
|
source.dmarc_pass_count || 0,
|
|
source.dmarc_fail_count || 0
|
|
));
|
|
row.appendChild(this.createAuthCell(
|
|
source.spf,
|
|
source.spf_pass_count || 0,
|
|
source.spf_fail_count || 0
|
|
));
|
|
row.appendChild(this.createAuthCell(
|
|
source.dkim,
|
|
source.dkim_pass_count || 0,
|
|
source.dkim_fail_count || 0
|
|
));
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
},
|
|
|
|
createTextCell(value, innerClass = '') {
|
|
const cell = document.createElement('td');
|
|
cell.className = 'table-cell';
|
|
const content = document.createElement('span');
|
|
if (innerClass) content.className = innerClass;
|
|
content.textContent = value;
|
|
cell.appendChild(content);
|
|
return cell;
|
|
},
|
|
|
|
createAuthCell(status, passCount, failCount) {
|
|
const cell = document.createElement('td');
|
|
cell.className = 'table-cell';
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'flex flex-col gap-1';
|
|
wrapper.appendChild(this.createStatusBadge(status));
|
|
|
|
const counts = document.createElement('span');
|
|
counts.className = 'text-xs text-muted-foreground whitespace-nowrap';
|
|
counts.textContent = `${this.formatLargeNumber(passCount)} pass / ${this.formatLargeNumber(failCount)} fail`;
|
|
wrapper.appendChild(counts);
|
|
|
|
cell.appendChild(wrapper);
|
|
return cell;
|
|
},
|
|
|
|
createStatusBadge(status) {
|
|
const normalized = status || 'none';
|
|
const badge = document.createElement('span');
|
|
const styles = {
|
|
pass: 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-300',
|
|
fail: 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300',
|
|
mixed: 'bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300',
|
|
none: 'bg-muted text-muted-foreground'
|
|
};
|
|
badge.className = `inline-flex w-fit items-center rounded-md px-2 py-1 text-xs font-medium ${styles[normalized] || styles.none}`;
|
|
badge.textContent = normalized.charAt(0).toUpperCase() + normalized.slice(1);
|
|
return badge;
|
|
},
|
|
|
|
populateDomainsTable(domains) {
|
|
if (!domains || !domains.length) return;
|
|
|
|
const tableBody = document.getElementById('domains-table-body');
|
|
if (!tableBody) return;
|
|
|
|
tableBody.textContent = '';
|
|
|
|
domains.forEach(domain => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'table-row';
|
|
|
|
row.appendChild(this.createDomainNameCell(domain.domain_name));
|
|
row.appendChild(this.createTextCell(this.formatLargeNumber(domain.total_emails || 0)));
|
|
row.appendChild(this.createPassRateCell(domain.pass_rate || 0));
|
|
row.appendChild(this.createTextCell(this.formatLargeNumber(domain.failed_count || 0)));
|
|
row.appendChild(this.createTextCell(this.formatLargeNumber(domain.report_count || 0)));
|
|
row.appendChild(this.createDetailsCell(domain));
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
},
|
|
|
|
createDomainNameCell(domainName) {
|
|
const cell = document.createElement('td');
|
|
cell.className = 'table-cell';
|
|
|
|
const content = document.createElement('div');
|
|
content.className = 'font-medium';
|
|
content.textContent = domainName || 'Unknown';
|
|
cell.appendChild(content);
|
|
|
|
return cell;
|
|
},
|
|
|
|
createPassRateCell(passRate) {
|
|
const cell = document.createElement('td');
|
|
cell.className = 'table-cell';
|
|
|
|
const badge = document.createElement('span');
|
|
badge.className = 'inline-flex items-center rounded-md bg-green-50 dark:bg-green-900/20 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-300';
|
|
badge.textContent = `${passRate}%`;
|
|
cell.appendChild(badge);
|
|
|
|
return cell;
|
|
},
|
|
|
|
createDetailsCell(domain) {
|
|
const cell = document.createElement('td');
|
|
cell.className = 'table-cell text-right';
|
|
|
|
const link = document.createElement('a');
|
|
link.className = 'btn btn-outline btn-sm';
|
|
const domainId = String(domain.id ?? domain.domain_name ?? '');
|
|
link.href = `/domains/${encodeURIComponent(domainId)}`;
|
|
link.appendChild(this.createDetailsIcon());
|
|
link.appendChild(document.createTextNode('Details'));
|
|
cell.appendChild(link);
|
|
|
|
return cell;
|
|
},
|
|
|
|
createDetailsIcon() {
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
svg.setAttribute('width', '14');
|
|
svg.setAttribute('height', '14');
|
|
svg.setAttribute('viewBox', '0 0 24 24');
|
|
svg.setAttribute('fill', 'none');
|
|
svg.setAttribute('stroke', 'currentColor');
|
|
svg.setAttribute('stroke-width', '2');
|
|
svg.setAttribute('stroke-linecap', 'round');
|
|
svg.setAttribute('stroke-linejoin', 'round');
|
|
svg.setAttribute('class', 'mr-1');
|
|
|
|
const axis = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
axis.setAttribute('d', 'M3 3v18h18');
|
|
svg.appendChild(axis);
|
|
|
|
const trend = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
|
trend.setAttribute('d', 'm19 9-5 5-4-4-3 3');
|
|
svg.appendChild(trend);
|
|
|
|
return svg;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|