Add admin user selector to jobs page

- Add user dropdown for admins to view jobs of any user
- Update backend routes to accept user_id parameter
- Modify API to support user selection for admins
- Update JavaScript to handle user changes and API calls
parent f6208190
...@@ -34,7 +34,15 @@ ...@@ -34,7 +34,15 @@
function updateJobStatuses() { function updateJobStatuses() {
// Add random parameter to avoid browser caching // Add random parameter to avoid browser caching
const randomParam = Math.random().toString(36).substring(7); const randomParam = Math.random().toString(36).substring(7);
fetch('/api/job_status_updates?since=' + lastUpdate + '&_=' + randomParam) const userSelector = document.getElementById('userSelector');
let url = '/api/job_status_updates?since=' + lastUpdate + '&_=' + randomParam;
// Include user_id parameter if admin is viewing another user's jobs
if (userSelector && userSelector.value) {
url += '&user_id=' + userSelector.value;
}
fetch(url)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.updates && data.updates.length > 0) { if (data.updates && data.updates.length > 0) {
...@@ -322,6 +330,18 @@ ...@@ -322,6 +330,18 @@
}); });
} }
// Handle user selector change (for admins)
function handleUserChange() {
const userSelector = document.getElementById('userSelector');
if (userSelector) {
userSelector.addEventListener('change', function() {
const selectedUserId = this.value;
// Reload the page with the new user_id parameter
window.location.href = `/jobs?user_id=${selectedUserId}`;
});
}
}
// Update every 5 seconds // Update every 5 seconds
setInterval(updateJobStatuses, 5000); setInterval(updateJobStatuses, 5000);
...@@ -329,6 +349,7 @@ ...@@ -329,6 +349,7 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
initializeCompletedJobs(); initializeCompletedJobs();
initializeJobActions(); initializeJobActions();
handleUserChange();
updateJobStatuses(); updateJobStatuses();
}); });
...@@ -353,9 +374,25 @@ ...@@ -353,9 +374,25 @@
<div class="container"> <div class="container">
<div class="jobs-table"> <div class="jobs-table">
<div class="table-header"> <div class="table-header">
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<div>
<h2><i class="fas fa-tasks"></i> Active Jobs</h2> <h2><i class="fas fa-tasks"></i> Active Jobs</h2>
<p style="margin: 0.5rem 0 0 0; color: #64748b; font-size: 0.9rem;">View and manage your queued, processing, and recently cancelled jobs</p> <p style="margin: 0.5rem 0 0 0; color: #64748b; font-size: 0.9rem;">View and manage your queued, processing, and recently cancelled jobs</p>
</div> </div>
{% if current_user.role == 'admin' and all_users %}
<div style="display: flex; align-items: center; gap: 0.5rem;">
<label for="userSelector" style="font-size: 0.9rem; color: #374151; font-weight: 500;">View jobs for:</label>
<select id="userSelector" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white;">
{% for user_option in all_users %}
<option value="{{ user_option.id }}" {% if user_option.id == selected_user_id %}selected{% endif %}>
{{ user_option.username }} ({{ user_option.email }})
</option>
{% endfor %}
</select>
</div>
{% endif %}
</div>
</div>
{% for job in queue_items %} {% for job in queue_items %}
<div class="job-row" data-job-id="{{ job.id }}"> <div class="job-row" data-job-id="{{ job.id }}">
<div class="job-type">{{ job.request_type.title() }}</div> <div class="job-type">{{ job.request_type.title() }}</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment