`;
} else {
elements.alertsList.innerHTML = filteredAlerts.map(alert => `
${alert.message}
From ${alert.source} • ${timeAgo(alert.timestamp)}
• ${alert.status}
${alert.status === 'New' ? '' : ''}
${alert.status === 'Acknowledged' ? '' : ''}
`).join('');
}
updateKPIs();
}
function updateKPIs() {
elements.kpiNew.textContent = alerts.filter(a => a.status === 'New').length;
elements.kpiAck.textContent = alerts.filter(a => a.status === 'Acknowledged').length;
elements.kpiRes.textContent = alerts.filter(a => a.status === 'Resolved').length;
}
// --- Data Management Functions ---
window.addAlert = function() {
const message = elements.addMsg.value.trim();
const source = elements.addSrc.value.trim();
if (!message || !source) {
alert("Please provide a message and a source for the alert.");
return;
}
alerts.unshift({
id: Date.now(),
message,
source,
severity: elements.addSev.value,
status: 'New',
timestamp: new Date()
});
elements.addMsg.value = '';
elements.addSrc.value = '';
renderAlerts();
}
function handleAlertAction(e) {
const target = e.target;
if (target.matches('.alert-action-btn')) {
const action = target.dataset.action;
const card = target.closest('.alert-card');
const alertId = parseInt(card.dataset.id);
const alertIndex = alerts.findIndex(a => a.id === alertId);
if (alertIndex > -1) {
if (action === 'ack' && alerts[alertIndex].status === 'New') {
alerts[alertIndex].status = 'Acknowledged';
} else if (action === 'res' && alerts[alertIndex].status === 'Acknowledged') {
alerts[alertIndex].status = 'Resolved';
} else if (action === 'del') {
alerts.splice(alertIndex, 1);
}
renderAlerts();
}
}
}
// --- Event Listeners ---
elements.alertsList.addEventListener('click', handleAlertAction);
[elements.filterSeverity, elements.filterStatus, elements.sortBy].forEach(el => {
el.addEventListener('change', renderAlerts);
});
// --- PDF Download ---
window.downloadPDF = function() {
html2canvas(document.getElementById('dashboard-output'), { scale: 2 }).then(canvas => {
const pdf = new jspdf.jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);
pdf.save('Alert_Dashboard.pdf');
});
};
// --- Initial Load ---
function initialize() {
alerts = [ // Start with a few deletable examples
{id: 1, message: "API Gateway latency is high", source: "API Gateway", severity: "High", status: "New", timestamp: new Date(Date.now() - 5 * 60000)},
{id: 2, message: "Database CPU at 98%", source: "Database Cluster", severity: "Critical", status: "New", timestamp: new Date(Date.now() - 2 * 60000)},
{id: 3, message: "Disk space low on Worker-3", source: "Worker Node-C", severity: "Medium", status: "Acknowledged", timestamp: new Date(Date.now() - 60 * 60000)},
];
renderAlerts();
}
initialize();
});
