66 lines
2.5 KiB
JavaScript
66 lines
2.5 KiB
JavaScript
const container = document.getElementById('backup-container');
|
|
|
|
fetch('http://localhost:3000/api/backups')
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
let currentCompany = '';
|
|
let currentProduct = '';
|
|
|
|
data.forEach((item) => {
|
|
// Group by company
|
|
if (item.company_name !== currentCompany) {
|
|
currentCompany = item.company_name;
|
|
const companySection = document.createElement('div');
|
|
companySection.className = 'company-section';
|
|
const header = document.createElement('h2');
|
|
header.className = 'company-header';
|
|
header.textContent = currentCompany;
|
|
companySection.appendChild(header);
|
|
container.appendChild(companySection);
|
|
}
|
|
|
|
// Group by backup product
|
|
if (item.backup_product !== currentProduct) {
|
|
currentProduct = item.backup_product;
|
|
const productSection = document.createElement('div');
|
|
productSection.className = 'backup-product';
|
|
const productHeader = document.createElement('h3');
|
|
productHeader.textContent = currentProduct;
|
|
productSection.appendChild(productHeader);
|
|
container.appendChild(productSection);
|
|
}
|
|
|
|
const jobItem = document.createElement('div');
|
|
jobItem.className = 'job-item';
|
|
jobItem.innerHTML = `
|
|
<span class="job-name">${item.job_name}</span>
|
|
<span class="last-backup">Last Backup: ${new Date(item.last_backup_time).toLocaleString()}</span>
|
|
<span class="status-pill status-${item.status}" data-detail="${item.error_details}">${item.status}</span>
|
|
`;
|
|
|
|
// Click to show error details
|
|
const statusPill = jobItem.querySelector('.status-pill');
|
|
statusPill.addEventListener('click', () => {
|
|
const detailModal = document.createElement('div');
|
|
detailModal.className = 'detail-modal';
|
|
detailModal.innerHTML = `
|
|
<span class="modal-close">×</span>
|
|
<h4>Error Details</h4>
|
|
<p>${item.error_details}</p>
|
|
`;
|
|
document.body.appendChild(detailModal);
|
|
|
|
const closeModal = detailModal.querySelector('.modal-close');
|
|
closeModal.addEventListener('click', () => {
|
|
document.body.removeChild(detailModal);
|
|
});
|
|
});
|
|
|
|
const productSection = container.lastElementChild;
|
|
productSection.appendChild(jobItem);
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching data:', error);
|
|
container.innerHTML = '<p>Error loading backup data. Check backend logs.</p>';
|
|
}); |