update DB table

This commit is contained in:
2025-12-28 03:36:29 +01:00
parent 393e78defc
commit de08431e53
3 changed files with 111 additions and 40 deletions

View File

@@ -295,21 +295,27 @@
<div class="grid">
<div class="card">
<h2>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="3" y1="9" x2="21" y2="9" />
<line x1="9" y1="21" x2="9" y2="9" />
</svg>
Queue Monitor
</h2>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
<h2>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
<line x1="3" y1="9" x2="21" y2="9" />
<line x1="9" y1="21" x2="9" y2="9" />
</svg>
Queue Monitor
</h2>
<div style="position: relative; width: 300px;">
<input type="text" id="search-input" placeholder="Search Queue ID..."
style="width: 100%; padding: 0.6rem 1rem; border-radius: 0.75rem; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); font-family: inherit;">
</div>
</div>
<table id="queue-table">
<thead>
<tr>
<th>Queue ID</th>
<th>Environment</th>
<th>Status</th>
<th onclick="sortTable(0)" style="cursor: pointer;">Queue ID</th>
<th onclick="sortTable(1)" style="cursor: pointer;">Environment</th>
<th onclick="sortTable(2)" style="cursor: pointer;">Status</th>
<th>Actions</th>
</tr>
</thead>
@@ -338,26 +344,14 @@
</div>
<script>
let currentQueues = [];
let sortDirection = [true, true, true];
async function fetchStatus() {
try {
const response = await fetch('/api/queues');
const queues = await response.json();
const tbody = document.querySelector('#queue-table tbody');
tbody.innerHTML = '';
queues.forEach(q => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td style="font-weight: 600;">${q.id}</td>
<td><span style="opacity: 0.8;">${q.environment}</span></td>
<td><span class="status-pill status-${q.status.toLowerCase()}">${q.status}</span></td>
<td>
<button class="btn-abort" onclick="abortQueue('${q.id}')">Abort</button>
</td>
`;
tbody.appendChild(tr);
});
currentQueues = await response.json();
renderTable();
const badge = document.getElementById('connection-status');
badge.querySelector('.dot').classList.add('online');
@@ -369,6 +363,45 @@
}
}
function renderTable() {
const searchTerm = document.getElementById('search-input').value.toLowerCase();
const tbody = document.querySelector('#queue-table tbody');
tbody.innerHTML = '';
const filteredQueues = currentQueues.filter(q => q.id.toLowerCase().includes(searchTerm));
filteredQueues.forEach(q => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td style="font-weight: 600;">${q.id}</td>
<td><span style="opacity: 0.8;">${q.environment}</span></td>
<td><span class="status-pill status-${q.status.toLowerCase()}">${q.status}</span></td>
<td style="display: flex; gap: 0.5rem;">
<button class="btn-abort" onclick="abortQueue('${q.id}')">Abort</button>
<button class="btn-abort" style="background: rgba(239, 68, 68, 0.2); border-color: var(--danger);" onclick="deleteQueue('${q.id}')">Delete</button>
</td>
`;
tbody.appendChild(tr);
});
}
function sortTable(n) {
sortDirection[n] = !sortDirection[n];
const keys = ['id', 'environment', 'status'];
const key = keys[n];
currentQueues.sort((a, b) => {
let valA = a[key].toLowerCase();
let valB = b[key].toLowerCase();
if (valA < valB) return sortDirection[n] ? -1 : 1;
if (valA > valB) return sortDirection[n] ? 1 : -1;
return 0;
});
renderTable();
}
document.getElementById('search-input').addEventListener('input', renderTable);
async function abortQueue(id) {
if (confirm(`Are you sure you want to abort queue ${id}?`)) {
try {
@@ -381,6 +414,18 @@
}
}
async function deleteQueue(id) {
if (confirm(`Are you sure you want to DELETE queue ${id}? This will remove all files and database records.`)) {
try {
await fetch(`/api/delete/${id}`, { method: 'DELETE' });
addLog(`Deleted queue: ${id}`, 'danger');
fetchStatus();
} catch (e) {
addLog(`Failed to delete queue: ${id}`, 'danger');
}
}
}
function addLog(msg, type = 'info') {
const logs = document.getElementById('logs');
const entry = document.createElement('div');