update DB table
This commit is contained in:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user