Mirrors/ArchiveBox
2
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox synced 2024-11-24 21:23:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

better jobs dashboard with faster refresh

Browse source
This commit is contained in:
Nick Sweeting 2024-11-18 04:26:09 -08:00
parent eb53145e4e
commit c7bd9449d5
No known key found for this signature in database
2 changed files with 77 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
archivebox/actors/templates/jobs_dashboard.html
View file

@ -13,9 +13,18 @@
margin: 0 auto;
padding: 20px;
}
@keyframes pulse {
0% { opacity: 1; }
48% { opacity: 0.2; }
52% { opacity: 1; }
100% { opacity: 1; }
}
h1 {
text-align: center;
}
h1 a {
animation: pulse 1s;
}
.dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@ -85,13 +94,21 @@
</style>
</head>
<body>
<h1>Job Dashboard <small><a href="?refresh=true">♻️ {{now}}</a></small></h1>
<h1>Job Dashboard <small><a href="?refresh=true" id="current-time">♻️ {{now}}}</a></small></h1>
<div id="dashboard" class="dashboard"></div>
<script>
function formatDate(dateString) {
const now = Date.now()
const date = new Date(dateString)
// return new Date(dateString).toLocaleString();
return new Date(dateString).toISOString().split('T').at(-1).replace('Z', '');
// return date.toISOString().split('T').at(-1).replace('Z', '');
const seconds_diff = Math.round((date - now) / 1000, 0)
if (seconds_diff < 0) {
return `${seconds_diff}s ago`;
} else {
return `${seconds_diff}s in the future`;
}
}
function createJobElement(job) {
@ -109,6 +126,10 @@
}
function updateDashboard(data) {
const currentTime = document.getElementById('current-time');
window.now = new Date();
currentTime.innerHTML = `♻️ ${window.now.toISOString().split('T').at(-1).replace('Z', '')}`;
const dashboard = document.getElementById('dashboard');
dashboard.innerHTML = '';
@ -117,16 +138,42 @@
card.className = 'card';
card.innerHTML = `
<h2>${actor.model}</h2>
<h3>Queue</h3>
<div class="scroll-area" id="queue-${actor.model}"></div>
<h3>Past Tasks</h3>
<div class="scroll-area" id="past-${actor.model}"></div>
<hr/>
Future
<div class="scroll-area" style="background-color: white;" id="future-${actor.model}"></div>
<hr/>
Pending
<div class="scroll-area" style="background-color: lightblue;" id="pending-${actor.model}"></div>
<hr/>
Stalled
<div class="scroll-area" style="background-color: lightcoral;" id="stalled-${actor.model}"></div>
<hr/>
Active
<div class="scroll-area" style="background-color: lightgreen;" id="active-${actor.model}"></div>
<hr/>
Past
<div class="scroll-area" style="background-color: lightgrey;" id="past-${actor.model}"></div>
`;
dashboard.appendChild(card);
const queueContainer = document.getElementById(`queue-${actor.model}`);
actor.queue.forEach(job => {
queueContainer.appendChild(createJobElement(job));
const futureContainer = document.getElementById(`future-${actor.model}`);
actor.future.forEach(job => {
futureContainer.appendChild(createJobElement(job));
});
const pendingContainer = document.getElementById(`pending-${actor.model}`);
actor.pending.forEach(job => {
pendingContainer.appendChild(createJobElement(job));
});
const stalledContainer = document.getElementById(`stalled-${actor.model}`);
actor.stalled.forEach(job => {
stalledContainer.appendChild(createJobElement(job));
});
const activeContainer = document.getElementById(`active-${actor.model}`);
actor.active.forEach(job => {
activeContainer.appendChild(createJobElement(job));
});
const pastContainer = document.getElementById(`past-${actor.model}`);
@ -149,7 +196,7 @@
fetchData();
setInterval(fetchData, 1000);
setInterval(fetchData, 750);
</script>
</body>
</html>

26
archivebox/api/v1_actors.py
View file

@ -7,9 +7,8 @@ from datetime import datetime
from ninja import Router, Schema
from .auth import API_AUTH_METHODS
router = Router(tags=['Workers and Tasks'], auth=API_AUTH_METHODS)
router = Router(tags=['Workers and Tasks'])
class TaskSchema(Schema):
@ -50,7 +49,10 @@ class ActorSchema(Schema):
MAX_TICK_TIME: int
MAX_CONCURRENT_ACTORS: int
queue: list[TaskSchema]
future: list[TaskSchema]
pending: list[TaskSchema]
stalled: list[TaskSchema]
active: list[TaskSchema]
past: list[TaskSchema]
@staticmethod
@ -72,10 +74,22 @@ class ActorSchema(Schema):
@staticmethod
def resolve_FINAL_STATES(obj) -> list[str]:
return [str(state) for state in obj.FINAL_STATES]
@staticmethod
def resolve_queue(obj) -> list[TaskSchema]:
return [obj for obj in obj.qs.filter(obj.pending_q | obj.future_q | obj.active_q | obj.stalled_q).order_by('-retry_at')]
def resolve_future(obj) -> list[TaskSchema]:
return [obj for obj in obj.qs.filter(obj.future_q).order_by('-retry_at')]
@staticmethod
def resolve_pending(obj) -> list[TaskSchema]:
return [obj for obj in obj.qs.filter(obj.pending_q).order_by('-retry_at')]
@staticmethod
def resolve_stalled(obj) -> list[TaskSchema]:
return [obj for obj in obj.qs.filter(obj.stalled_q).order_by('-retry_at')]
@staticmethod
def resolve_active(obj) -> list[TaskSchema]:
return [obj for obj in obj.qs.filter(obj.active_q).order_by('-retry_at')]
@staticmethod
def resolve_past(obj) -> list[TaskSchema]: