Refactor web build process and update documentation
- Removed Node.js build artifacts from .gitignore and adjusted Makefile to reflect changes in web UI build process, now using server-rendered Go templates instead of React. - Updated README to clarify the new web UI architecture and output formats, emphasizing the removal of the Node.js build step. - Added a command to set the number of frames per render task in manager configuration, enhancing user control over rendering settings. - Improved Gitea workflow by removing unnecessary npm install step, streamlining the CI process.
This commit is contained in:
269
web/app.js
269
web/app.js
@@ -1,269 +0,0 @@
|
||||
const API_BASE = '/api';
|
||||
|
||||
let currentUser = null;
|
||||
|
||||
// Check authentication on load
|
||||
async function init() {
|
||||
await checkAuth();
|
||||
setupEventListeners();
|
||||
if (currentUser) {
|
||||
showMainPage();
|
||||
loadJobs();
|
||||
loadRunners();
|
||||
} else {
|
||||
showLoginPage();
|
||||
}
|
||||
}
|
||||
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/auth/me`);
|
||||
if (response.ok) {
|
||||
currentUser = await response.json();
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function showLoginPage() {
|
||||
document.getElementById('login-page').classList.remove('hidden');
|
||||
document.getElementById('main-page').classList.add('hidden');
|
||||
}
|
||||
|
||||
function showMainPage() {
|
||||
document.getElementById('login-page').classList.add('hidden');
|
||||
document.getElementById('main-page').classList.remove('hidden');
|
||||
if (currentUser) {
|
||||
document.getElementById('user-name').textContent = currentUser.name || currentUser.email;
|
||||
}
|
||||
}
|
||||
|
||||
function setupEventListeners() {
|
||||
// Navigation
|
||||
document.querySelectorAll('.nav-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const page = e.target.dataset.page;
|
||||
switchPage(page);
|
||||
});
|
||||
});
|
||||
|
||||
// Logout
|
||||
document.getElementById('logout-btn').addEventListener('click', async () => {
|
||||
await fetch(`${API_BASE}/auth/logout`, { method: 'POST' });
|
||||
currentUser = null;
|
||||
showLoginPage();
|
||||
});
|
||||
|
||||
// Job form
|
||||
document.getElementById('job-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
await submitJob();
|
||||
});
|
||||
}
|
||||
|
||||
function switchPage(page) {
|
||||
document.querySelectorAll('.content-page').forEach(p => p.classList.add('hidden'));
|
||||
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
|
||||
|
||||
document.getElementById(`${page}-page`).classList.remove('hidden');
|
||||
document.querySelector(`[data-page="${page}"]`).classList.add('active');
|
||||
|
||||
if (page === 'jobs') {
|
||||
loadJobs();
|
||||
} else if (page === 'runners') {
|
||||
loadRunners();
|
||||
}
|
||||
}
|
||||
|
||||
async function submitJob() {
|
||||
const form = document.getElementById('job-form');
|
||||
const formData = new FormData(form);
|
||||
|
||||
const jobData = {
|
||||
name: document.getElementById('job-name').value,
|
||||
frame_start: parseInt(document.getElementById('frame-start').value),
|
||||
frame_end: parseInt(document.getElementById('frame-end').value),
|
||||
output_format: document.getElementById('output-format').value,
|
||||
};
|
||||
|
||||
try {
|
||||
// Create job
|
||||
const jobResponse = await fetch(`${API_BASE}/jobs`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(jobData),
|
||||
});
|
||||
|
||||
if (!jobResponse.ok) {
|
||||
throw new Error('Failed to create job');
|
||||
}
|
||||
|
||||
const job = await jobResponse.json();
|
||||
|
||||
// Upload file
|
||||
const fileInput = document.getElementById('blend-file');
|
||||
if (fileInput.files.length > 0) {
|
||||
const fileFormData = new FormData();
|
||||
fileFormData.append('file', fileInput.files[0]);
|
||||
|
||||
const fileResponse = await fetch(`${API_BASE}/jobs/${job.id}/upload`, {
|
||||
method: 'POST',
|
||||
body: fileFormData,
|
||||
});
|
||||
|
||||
if (!fileResponse.ok) {
|
||||
throw new Error('Failed to upload file');
|
||||
}
|
||||
}
|
||||
|
||||
alert('Job submitted successfully!');
|
||||
form.reset();
|
||||
switchPage('jobs');
|
||||
loadJobs();
|
||||
} catch (error) {
|
||||
alert('Failed to submit job: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadJobs() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/jobs`);
|
||||
if (!response.ok) throw new Error('Failed to load jobs');
|
||||
|
||||
const jobs = await response.json();
|
||||
displayJobs(jobs);
|
||||
} catch (error) {
|
||||
console.error('Failed to load jobs:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function displayJobs(jobs) {
|
||||
const container = document.getElementById('jobs-list');
|
||||
if (jobs.length === 0) {
|
||||
container.innerHTML = '<p>No jobs yet. Submit a job to get started!</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = jobs.map(job => `
|
||||
<div class="job-card">
|
||||
<h3>${escapeHtml(job.name)}</h3>
|
||||
<div class="job-meta">
|
||||
<span>Frames: ${job.frame_start}-${job.frame_end}</span>
|
||||
<span>Format: ${job.output_format}</span>
|
||||
<span>Created: ${new Date(job.created_at).toLocaleString()}</span>
|
||||
</div>
|
||||
<div class="job-status ${job.status}">${job.status}</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: ${job.progress}%"></div>
|
||||
</div>
|
||||
<div class="job-actions">
|
||||
<button onclick="viewJob(${job.id})" class="btn btn-primary">View Details</button>
|
||||
${job.status === 'pending' || job.status === 'running' ?
|
||||
`<button onclick="cancelJob(${job.id})" class="btn btn-secondary">Cancel</button>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function viewJob(jobId) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/jobs/${jobId}`);
|
||||
if (!response.ok) throw new Error('Failed to load job');
|
||||
|
||||
const job = await response.json();
|
||||
|
||||
// Load files
|
||||
const filesResponse = await fetch(`${API_BASE}/jobs/${jobId}/files`);
|
||||
const files = filesResponse.ok ? await filesResponse.json() : [];
|
||||
|
||||
const outputFiles = files.filter(f => f.file_type === 'output');
|
||||
if (outputFiles.length > 0) {
|
||||
let message = 'Output files:\n';
|
||||
outputFiles.forEach(file => {
|
||||
message += `- ${file.file_name}\n`;
|
||||
});
|
||||
message += '\nWould you like to download them?';
|
||||
if (confirm(message)) {
|
||||
outputFiles.forEach(file => {
|
||||
window.open(`${API_BASE}/jobs/${jobId}/files/${file.id}/download`, '_blank');
|
||||
});
|
||||
}
|
||||
} else {
|
||||
alert(`Job: ${job.name}\nStatus: ${job.status}\nProgress: ${job.progress.toFixed(1)}%`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Failed to load job details: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function cancelJob(jobId) {
|
||||
if (!confirm('Are you sure you want to cancel this job?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/jobs/${jobId}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) throw new Error('Failed to cancel job');
|
||||
loadJobs();
|
||||
} catch (error) {
|
||||
alert('Failed to cancel job: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRunners() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/runners`);
|
||||
if (!response.ok) throw new Error('Failed to load runners');
|
||||
|
||||
const runners = await response.json();
|
||||
displayRunners(runners);
|
||||
} catch (error) {
|
||||
console.error('Failed to load runners:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function displayRunners(runners) {
|
||||
const container = document.getElementById('runners-list');
|
||||
if (runners.length === 0) {
|
||||
container.innerHTML = '<p>No runners connected.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = runners.map(runner => {
|
||||
const lastHeartbeat = new Date(runner.last_heartbeat);
|
||||
const isOnline = (Date.now() - lastHeartbeat.getTime()) < 60000; // 1 minute
|
||||
|
||||
return `
|
||||
<div class="runner-card">
|
||||
<h3>${escapeHtml(runner.name)}</h3>
|
||||
<div class="runner-info">
|
||||
<span>Hostname: ${escapeHtml(runner.hostname)}</span>
|
||||
<span>Last heartbeat: ${lastHeartbeat.toLocaleString()}</span>
|
||||
</div>
|
||||
<div class="runner-status ${isOnline ? 'online' : 'offline'}">
|
||||
${isOnline ? 'Online' : 'Offline'}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Auto-refresh jobs every 5 seconds
|
||||
setInterval(() => {
|
||||
if (currentUser && document.getElementById('jobs-page').classList.contains('hidden') === false) {
|
||||
loadJobs();
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
// Initialize on load
|
||||
init();
|
||||
|
||||
40
web/embed.go
40
web/embed.go
@@ -4,42 +4,26 @@ import (
|
||||
"embed"
|
||||
"io/fs"
|
||||
"net/http"
|
||||
"strings"
|
||||
)
|
||||
|
||||
//go:embed dist/*
|
||||
var distFS embed.FS
|
||||
//go:embed templates templates/partials static
|
||||
var uiFS embed.FS
|
||||
|
||||
// GetFileSystem returns an http.FileSystem for the embedded web UI files
|
||||
func GetFileSystem() http.FileSystem {
|
||||
subFS, err := fs.Sub(distFS, "dist")
|
||||
// GetStaticFileSystem returns an http.FileSystem for embedded UI assets.
|
||||
func GetStaticFileSystem() http.FileSystem {
|
||||
subFS, err := fs.Sub(uiFS, "static")
|
||||
if err != nil {
|
||||
panic(err)
|
||||
}
|
||||
return http.FS(subFS)
|
||||
}
|
||||
|
||||
// SPAHandler returns an http.Handler that serves the embedded SPA
|
||||
// It serves static files if they exist, otherwise falls back to index.html
|
||||
func SPAHandler() http.Handler {
|
||||
fsys := GetFileSystem()
|
||||
fileServer := http.FileServer(fsys)
|
||||
|
||||
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
path := r.URL.Path
|
||||
|
||||
// Try to open the file
|
||||
f, err := fsys.Open(strings.TrimPrefix(path, "/"))
|
||||
if err != nil {
|
||||
// File doesn't exist, serve index.html for SPA routing
|
||||
r.URL.Path = "/"
|
||||
fileServer.ServeHTTP(w, r)
|
||||
return
|
||||
}
|
||||
f.Close()
|
||||
|
||||
// File exists, serve it
|
||||
fileServer.ServeHTTP(w, r)
|
||||
})
|
||||
// StaticHandler serves /assets/* files from embedded static assets.
|
||||
func StaticHandler() http.Handler {
|
||||
return http.StripPrefix("/assets/", http.FileServer(GetStaticFileSystem()))
|
||||
}
|
||||
|
||||
// GetTemplateFS returns the embedded template filesystem.
|
||||
func GetTemplateFS() fs.FS {
|
||||
return uiFS
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JiggaBlend</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
2677
web/package-lock.json
generated
2677
web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "jiggablend-web",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.2.1",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.32",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useAuth } from './hooks/useAuth';
|
||||
import Login from './components/Login';
|
||||
import Layout from './components/Layout';
|
||||
import JobList from './components/JobList';
|
||||
import JobSubmission from './components/JobSubmission';
|
||||
import AdminPanel from './components/AdminPanel';
|
||||
import ErrorBoundary from './components/ErrorBoundary';
|
||||
import LoadingSpinner from './components/LoadingSpinner';
|
||||
import './styles/index.css';
|
||||
|
||||
function App() {
|
||||
const { user, loading, refresh } = useAuth();
|
||||
const [activeTab, setActiveTab] = useState('jobs');
|
||||
|
||||
// Memoize login component to ensure it's ready immediately
|
||||
const loginComponent = useMemo(() => <Login key="login" />, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-900">
|
||||
<LoadingSpinner size="md" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return loginComponent;
|
||||
}
|
||||
|
||||
// Wrapper to change tabs - only check auth on mount, not on every navigation
|
||||
const handleTabChange = (newTab) => {
|
||||
setActiveTab(newTab);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout activeTab={activeTab} onTabChange={handleTabChange}>
|
||||
<ErrorBoundary>
|
||||
{activeTab === 'jobs' && <JobList />}
|
||||
{activeTab === 'submit' && (
|
||||
<JobSubmission onSuccess={() => handleTabChange('jobs')} />
|
||||
)}
|
||||
{activeTab === 'admin' && <AdminPanel />}
|
||||
</ErrorBoundary>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,810 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { admin, jobs, normalizeArrayResponse } from '../utils/api';
|
||||
import { wsManager } from '../utils/websocket';
|
||||
import UserJobs from './UserJobs';
|
||||
import PasswordChange from './PasswordChange';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
|
||||
export default function AdminPanel() {
|
||||
const [activeSection, setActiveSection] = useState('api-keys');
|
||||
const [apiKeys, setApiKeys] = useState([]);
|
||||
const [runners, setRunners] = useState([]);
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [newAPIKeyName, setNewAPIKeyName] = useState('');
|
||||
const [newAPIKeyDescription, setNewAPIKeyDescription] = useState('');
|
||||
const [newAPIKeyScope, setNewAPIKeyScope] = useState('user'); // Default to user scope
|
||||
const [newAPIKey, setNewAPIKey] = useState(null);
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
const [registrationEnabled, setRegistrationEnabled] = useState(true);
|
||||
const [passwordChangeUser, setPasswordChangeUser] = useState(null);
|
||||
const listenerIdRef = useRef(null); // Listener ID for shared WebSocket
|
||||
const subscribedChannelsRef = useRef(new Set()); // Track confirmed subscribed channels
|
||||
const pendingSubscriptionsRef = useRef(new Set()); // Track pending subscriptions (waiting for confirmation)
|
||||
|
||||
// Connect to shared WebSocket on mount
|
||||
useEffect(() => {
|
||||
listenerIdRef.current = wsManager.subscribe('adminpanel', {
|
||||
open: () => {
|
||||
console.log('AdminPanel: Shared WebSocket connected');
|
||||
// Subscribe to runners if already viewing runners section
|
||||
if (activeSection === 'runners') {
|
||||
subscribeToRunners();
|
||||
}
|
||||
},
|
||||
message: (data) => {
|
||||
// Handle subscription responses - update both local refs and wsManager
|
||||
if (data.type === 'subscribed' && data.channel) {
|
||||
pendingSubscriptionsRef.current.delete(data.channel);
|
||||
subscribedChannelsRef.current.add(data.channel);
|
||||
wsManager.confirmSubscription(data.channel);
|
||||
console.log('Successfully subscribed to channel:', data.channel);
|
||||
} else if (data.type === 'subscription_error' && data.channel) {
|
||||
pendingSubscriptionsRef.current.delete(data.channel);
|
||||
subscribedChannelsRef.current.delete(data.channel);
|
||||
wsManager.failSubscription(data.channel);
|
||||
console.error('Subscription failed for channel:', data.channel, data.error);
|
||||
}
|
||||
|
||||
// Handle runners channel messages
|
||||
if (data.channel === 'runners' && data.type === 'runner_status') {
|
||||
// Update runner in list
|
||||
setRunners(prev => {
|
||||
const index = prev.findIndex(r => r.id === data.runner_id);
|
||||
if (index >= 0 && data.data) {
|
||||
const updated = [...prev];
|
||||
updated[index] = { ...updated[index], ...data.data };
|
||||
return updated;
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('AdminPanel: Shared WebSocket error:', error);
|
||||
},
|
||||
close: (event) => {
|
||||
console.log('AdminPanel: Shared WebSocket closed:', event);
|
||||
subscribedChannelsRef.current.clear();
|
||||
pendingSubscriptionsRef.current.clear();
|
||||
}
|
||||
});
|
||||
|
||||
// Ensure connection is established
|
||||
wsManager.connect();
|
||||
|
||||
return () => {
|
||||
// Unsubscribe from all channels before unmounting
|
||||
unsubscribeFromRunners();
|
||||
if (listenerIdRef.current) {
|
||||
wsManager.unsubscribe(listenerIdRef.current);
|
||||
listenerIdRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const subscribeToRunners = () => {
|
||||
const channel = 'runners';
|
||||
// Don't subscribe if already subscribed or pending
|
||||
if (subscribedChannelsRef.current.has(channel) || pendingSubscriptionsRef.current.has(channel)) {
|
||||
return;
|
||||
}
|
||||
wsManager.subscribeToChannel(channel);
|
||||
subscribedChannelsRef.current.add(channel);
|
||||
pendingSubscriptionsRef.current.add(channel);
|
||||
console.log('Subscribing to runners channel');
|
||||
};
|
||||
|
||||
const unsubscribeFromRunners = () => {
|
||||
const channel = 'runners';
|
||||
if (!subscribedChannelsRef.current.has(channel)) {
|
||||
return; // Not subscribed
|
||||
}
|
||||
wsManager.unsubscribeFromChannel(channel);
|
||||
subscribedChannelsRef.current.delete(channel);
|
||||
pendingSubscriptionsRef.current.delete(channel);
|
||||
console.log('Unsubscribed from runners channel');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (activeSection === 'api-keys') {
|
||||
loadAPIKeys();
|
||||
unsubscribeFromRunners();
|
||||
} else if (activeSection === 'runners') {
|
||||
loadRunners();
|
||||
subscribeToRunners();
|
||||
} else if (activeSection === 'users') {
|
||||
loadUsers();
|
||||
unsubscribeFromRunners();
|
||||
} else if (activeSection === 'settings') {
|
||||
loadSettings();
|
||||
unsubscribeFromRunners();
|
||||
}
|
||||
}, [activeSection]);
|
||||
|
||||
const loadAPIKeys = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await admin.listAPIKeys();
|
||||
setApiKeys(normalizeArrayResponse(data));
|
||||
} catch (error) {
|
||||
console.error('Failed to load API keys:', error);
|
||||
setApiKeys([]);
|
||||
alert('Failed to load API keys');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadRunners = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await admin.listRunners();
|
||||
setRunners(normalizeArrayResponse(data));
|
||||
} catch (error) {
|
||||
console.error('Failed to load runners:', error);
|
||||
setRunners([]);
|
||||
alert('Failed to load runners');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadUsers = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await admin.listUsers();
|
||||
setUsers(normalizeArrayResponse(data));
|
||||
} catch (error) {
|
||||
console.error('Failed to load users:', error);
|
||||
setUsers([]);
|
||||
alert('Failed to load users');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadSettings = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await admin.getRegistrationEnabled();
|
||||
setRegistrationEnabled(data.enabled);
|
||||
} catch (error) {
|
||||
console.error('Failed to load settings:', error);
|
||||
alert('Failed to load settings');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleRegistration = async () => {
|
||||
const newValue = !registrationEnabled;
|
||||
setLoading(true);
|
||||
try {
|
||||
await admin.setRegistrationEnabled(newValue);
|
||||
setRegistrationEnabled(newValue);
|
||||
alert(`Registration ${newValue ? 'enabled' : 'disabled'}`);
|
||||
} catch (error) {
|
||||
console.error('Failed to update registration setting:', error);
|
||||
alert('Failed to update registration setting');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const generateAPIKey = async () => {
|
||||
if (!newAPIKeyName.trim()) {
|
||||
alert('API key name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await admin.generateAPIKey(newAPIKeyName.trim(), newAPIKeyDescription.trim() || undefined, newAPIKeyScope);
|
||||
setNewAPIKey(data);
|
||||
setNewAPIKeyName('');
|
||||
setNewAPIKeyDescription('');
|
||||
setNewAPIKeyScope('user');
|
||||
await loadAPIKeys();
|
||||
} catch (error) {
|
||||
console.error('Failed to generate API key:', error);
|
||||
alert('Failed to generate API key');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const [deletingKeyId, setDeletingKeyId] = useState(null);
|
||||
const [deletingRunnerId, setDeletingRunnerId] = useState(null);
|
||||
|
||||
const revokeAPIKey = async (keyId) => {
|
||||
if (!confirm('Are you sure you want to delete this API key? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
setDeletingKeyId(keyId);
|
||||
try {
|
||||
await admin.deleteAPIKey(keyId);
|
||||
await loadAPIKeys();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete API key:', error);
|
||||
alert('Failed to delete API key');
|
||||
} finally {
|
||||
setDeletingKeyId(null);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const deleteRunner = async (runnerId) => {
|
||||
if (!confirm('Are you sure you want to delete this runner?')) {
|
||||
return;
|
||||
}
|
||||
setDeletingRunnerId(runnerId);
|
||||
try {
|
||||
await admin.deleteRunner(runnerId);
|
||||
await loadRunners();
|
||||
} catch (error) {
|
||||
console.error('Failed to delete runner:', error);
|
||||
alert('Failed to delete runner');
|
||||
} finally {
|
||||
setDeletingRunnerId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = (text) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
alert('Copied to clipboard!');
|
||||
};
|
||||
|
||||
const isAPIKeyActive = (isActive) => {
|
||||
return isActive;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex space-x-4 border-b border-gray-700">
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveSection('api-keys');
|
||||
setSelectedUser(null);
|
||||
}}
|
||||
className={`py-2 px-4 border-b-2 font-medium ${
|
||||
activeSection === 'api-keys'
|
||||
? 'border-orange-500 text-orange-500'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
API Keys
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveSection('runners');
|
||||
setSelectedUser(null);
|
||||
}}
|
||||
className={`py-2 px-4 border-b-2 font-medium ${
|
||||
activeSection === 'runners'
|
||||
? 'border-orange-500 text-orange-500'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Runner Management
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveSection('users');
|
||||
setSelectedUser(null);
|
||||
}}
|
||||
className={`py-2 px-4 border-b-2 font-medium ${
|
||||
activeSection === 'users'
|
||||
? 'border-orange-500 text-orange-500'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Users
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setActiveSection('settings');
|
||||
setSelectedUser(null);
|
||||
}}
|
||||
className={`py-2 px-4 border-b-2 font-medium ${
|
||||
activeSection === 'settings'
|
||||
? 'border-orange-500 text-orange-500'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{activeSection === 'api-keys' && (
|
||||
<div className="space-y-6">
|
||||
<div className="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-100">Generate API Key</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newAPIKeyName}
|
||||
onChange={(e) => setNewAPIKeyName(e.target.value)}
|
||||
placeholder="e.g., production-runner-01"
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Description
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={newAPIKeyDescription}
|
||||
onChange={(e) => setNewAPIKeyDescription(e.target.value)}
|
||||
placeholder="Optional description"
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Scope
|
||||
</label>
|
||||
<select
|
||||
value={newAPIKeyScope}
|
||||
onChange={(e) => setNewAPIKeyScope(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
>
|
||||
<option value="user">User - Only jobs from API key owner</option>
|
||||
<option value="manager">Manager - All jobs from any user</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={generateAPIKey}
|
||||
disabled={loading || !newAPIKeyName.trim()}
|
||||
className="px-6 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Generate API Key
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{newAPIKey && (
|
||||
<div className="mt-4 p-4 bg-green-400/20 border border-green-400/50 rounded-lg">
|
||||
<p className="text-sm font-medium text-green-400 mb-2">New API Key Generated:</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 px-3 py-2 bg-gray-900 border border-green-400/50 rounded text-sm font-mono break-all text-gray-100">
|
||||
{newAPIKey.key}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => copyToClipboard(newAPIKey.key)}
|
||||
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-500 transition-colors text-sm whitespace-nowrap"
|
||||
>
|
||||
Copy Key
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-xs text-green-400/80">
|
||||
<p><strong>Name:</strong> {newAPIKey.name}</p>
|
||||
{newAPIKey.description && <p><strong>Description:</strong> {newAPIKey.description}</p>}
|
||||
</div>
|
||||
<p className="text-xs text-green-400/80 mt-2">
|
||||
⚠️ Save this API key securely. It will not be shown again.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-100">API Keys</h2>
|
||||
{loading ? (
|
||||
<LoadingSpinner size="sm" className="py-8" />
|
||||
) : !apiKeys || apiKeys.length === 0 ? (
|
||||
<p className="text-gray-400 text-center py-8">No API keys generated yet.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-700">
|
||||
<thead className="bg-gray-900">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Scope
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Key Prefix
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Created At
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-gray-800 divide-y divide-gray-700">
|
||||
{apiKeys.map((key) => {
|
||||
return (
|
||||
<tr key={key.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-100">{key.name}</div>
|
||||
{key.description && (
|
||||
<div className="text-sm text-gray-400">{key.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
key.scope === 'manager'
|
||||
? 'bg-purple-400/20 text-purple-400'
|
||||
: 'bg-blue-400/20 text-blue-400'
|
||||
}`}>
|
||||
{key.scope === 'manager' ? 'Manager' : 'User'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<code className="text-sm font-mono text-gray-300">
|
||||
{key.key_prefix}
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{!key.is_active ? (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-gray-500/20 text-gray-400">
|
||||
Revoked
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-green-400/20 text-green-400">
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{new Date(key.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm space-x-2">
|
||||
<button
|
||||
onClick={() => revokeAPIKey(key.id)}
|
||||
disabled={deletingKeyId === key.id}
|
||||
className="text-red-400 hover:text-red-300 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
title="Delete API key"
|
||||
>
|
||||
{deletingKeyId === key.id ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'runners' && (
|
||||
<div className="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-100">Runner Management</h2>
|
||||
{loading ? (
|
||||
<LoadingSpinner size="sm" className="py-8" />
|
||||
) : !runners || runners.length === 0 ? (
|
||||
<p className="text-gray-400 text-center py-8">No runners registered.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-700">
|
||||
<thead className="bg-gray-900">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Hostname
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Status
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
API Key
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Priority
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Capabilities
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Last Heartbeat
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-gray-800 divide-y divide-gray-700">
|
||||
{runners.map((runner) => {
|
||||
const isOnline = new Date(runner.last_heartbeat) > new Date(Date.now() - 60000);
|
||||
return (
|
||||
<tr key={runner.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">
|
||||
{runner.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{runner.hostname}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
||||
isOnline
|
||||
? 'bg-green-400/20 text-green-400'
|
||||
: 'bg-gray-500/20 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{isOnline ? 'Online' : 'Offline'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
<code className="text-xs font-mono bg-gray-900 px-2 py-1 rounded">
|
||||
jk_r{runner.id % 10}_...
|
||||
</code>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{runner.priority}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{runner.capabilities ? (
|
||||
(() => {
|
||||
try {
|
||||
const caps = JSON.parse(runner.capabilities);
|
||||
const enabled = Object.entries(caps)
|
||||
.filter(([_, v]) => v)
|
||||
.map(([k, _]) => k)
|
||||
.join(', ');
|
||||
return enabled || 'None';
|
||||
} catch {
|
||||
return runner.capabilities;
|
||||
}
|
||||
})()
|
||||
) : (
|
||||
'None'
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{new Date(runner.last_heartbeat).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<button
|
||||
onClick={() => deleteRunner(runner.id)}
|
||||
disabled={deletingRunnerId === runner.id}
|
||||
className="text-red-400 hover:text-red-300 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{deletingRunnerId === runner.id ? 'Deleting...' : 'Delete'}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'change-password' && passwordChangeUser && (
|
||||
<div className="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700">
|
||||
<button
|
||||
onClick={() => {
|
||||
setPasswordChangeUser(null);
|
||||
setActiveSection('users');
|
||||
}}
|
||||
className="text-gray-400 hover:text-gray-300 mb-4 flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to Users
|
||||
</button>
|
||||
<PasswordChange
|
||||
targetUserId={passwordChangeUser.id}
|
||||
targetUserName={passwordChangeUser.name || passwordChangeUser.email}
|
||||
onSuccess={() => {
|
||||
setPasswordChangeUser(null);
|
||||
setActiveSection('users');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'users' && (
|
||||
<div className="space-y-6">
|
||||
{selectedUser ? (
|
||||
<UserJobs
|
||||
userId={selectedUser.id}
|
||||
userName={selectedUser.name || selectedUser.email}
|
||||
onBack={() => setSelectedUser(null)}
|
||||
/>
|
||||
) : (
|
||||
<div className="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-100">User Management</h2>
|
||||
{loading ? (
|
||||
<LoadingSpinner size="sm" className="py-8" />
|
||||
) : !users || users.length === 0 ? (
|
||||
<p className="text-gray-400 text-center py-8">No users found.</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-700">
|
||||
<thead className="bg-gray-900">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Email
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Provider
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Admin
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Jobs
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Created
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-gray-800 divide-y divide-gray-700">
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-100">
|
||||
{user.email}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
|
||||
{user.name}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{user.oauth_provider}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
{user.is_admin ? (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-orange-400/20 text-orange-400">
|
||||
Admin
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-gray-500/20 text-gray-400">
|
||||
User
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (user.is_first_user && user.is_admin) {
|
||||
alert('Cannot remove admin status from the first user');
|
||||
return;
|
||||
}
|
||||
if (!confirm(`Are you sure you want to ${user.is_admin ? 'remove admin privileges from' : 'grant admin privileges to'} ${user.name || user.email}?`)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await admin.setUserAdminStatus(user.id, !user.is_admin);
|
||||
await loadUsers();
|
||||
alert(`Admin status ${user.is_admin ? 'removed' : 'granted'} successfully`);
|
||||
} catch (error) {
|
||||
console.error('Failed to update admin status:', error);
|
||||
const errorMsg = error.message || 'Failed to update admin status';
|
||||
if (errorMsg.includes('first user')) {
|
||||
alert('Cannot remove admin status from the first user');
|
||||
} else {
|
||||
alert(errorMsg);
|
||||
}
|
||||
}
|
||||
}}
|
||||
disabled={user.is_first_user && user.is_admin}
|
||||
className={`text-xs px-2 py-1 rounded ${
|
||||
user.is_first_user && user.is_admin
|
||||
? 'text-gray-500 bg-gray-500/10 cursor-not-allowed'
|
||||
: user.is_admin
|
||||
? 'text-red-400 hover:text-red-300 bg-red-400/10 hover:bg-red-400/20'
|
||||
: 'text-green-400 hover:text-green-300 bg-green-400/10 hover:bg-green-400/20'
|
||||
} transition-colors`}
|
||||
title={user.is_first_user && user.is_admin ? 'First user must remain admin' : user.is_admin ? 'Remove admin privileges' : 'Grant admin privileges'}
|
||||
>
|
||||
{user.is_admin ? 'Remove Admin' : 'Make Admin'}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{user.job_count || 0}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
|
||||
{new Date(user.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setSelectedUser(user)}
|
||||
className="text-orange-400 hover:text-orange-300 font-medium"
|
||||
>
|
||||
View Jobs
|
||||
</button>
|
||||
{user.oauth_provider === 'local' && (
|
||||
<button
|
||||
onClick={() => {
|
||||
const userForPassword = { id: user.id, name: user.name || user.email };
|
||||
setPasswordChangeUser(userForPassword);
|
||||
setSelectedUser(null);
|
||||
setActiveSection('change-password');
|
||||
}}
|
||||
className="text-blue-400 hover:text-blue-300 font-medium"
|
||||
>
|
||||
Change Password
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'settings' && (
|
||||
<div className="space-y-6">
|
||||
<PasswordChange />
|
||||
<div className="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-6 text-gray-100">System Settings</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between p-4 bg-gray-900 rounded-lg border border-gray-700">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-gray-100 mb-1">User Registration</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
{registrationEnabled
|
||||
? 'New users can register via OAuth or local login'
|
||||
: 'Registration is disabled. Only existing users can log in.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className={`text-sm font-medium ${registrationEnabled ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{registrationEnabled ? 'Enabled' : 'Disabled'}
|
||||
</span>
|
||||
<button
|
||||
onClick={handleToggleRegistration}
|
||||
disabled={loading}
|
||||
className={`px-6 py-2 rounded-lg font-medium transition-colors ${
|
||||
registrationEnabled
|
||||
? 'bg-red-600 hover:bg-red-500 text-white'
|
||||
: 'bg-green-600 hover:bg-green-500 text-white'
|
||||
} disabled:opacity-50 disabled:cursor-not-allowed`}
|
||||
>
|
||||
{registrationEnabled ? 'Disable' : 'Enable'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
class ErrorBoundary extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = { hasError: false, error: null };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error) {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
componentDidCatch(error, errorInfo) {
|
||||
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
<div className="p-6 bg-red-400/20 border border-red-400/50 rounded-lg text-red-400">
|
||||
<h2 className="text-xl font-semibold mb-2">Something went wrong</h2>
|
||||
<p className="mb-4">{this.state.error?.message || 'An unexpected error occurred'}</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
window.location.reload();
|
||||
}}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-500 transition-colors"
|
||||
>
|
||||
Reload Page
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Shared ErrorMessage component for consistent error display
|
||||
* Sanitizes error messages to prevent XSS
|
||||
*/
|
||||
export default function ErrorMessage({ error, className = '' }) {
|
||||
if (!error) return null;
|
||||
|
||||
// Sanitize error message - escape HTML entities
|
||||
const sanitize = (text) => {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
};
|
||||
|
||||
const sanitizedError = typeof error === 'string' ? sanitize(error) : sanitize(error.message || 'An error occurred');
|
||||
|
||||
return (
|
||||
<div className={`p-4 bg-red-400/20 border border-red-400/50 rounded-lg text-red-400 ${className}`}>
|
||||
<p className="font-semibold">Error:</p>
|
||||
<p dangerouslySetInnerHTML={{ __html: sanitizedError }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,191 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function FileExplorer({ files, onDownload, onPreview, onVideoPreview, isImageFile }) {
|
||||
const [expandedPaths, setExpandedPaths] = useState(new Set()); // Root folder collapsed by default
|
||||
|
||||
// Build directory tree from file paths
|
||||
const buildTree = (files) => {
|
||||
const tree = {};
|
||||
|
||||
files.forEach(file => {
|
||||
const path = file.file_name;
|
||||
// Handle both paths with slashes and single filenames
|
||||
const parts = path.includes('/') ? path.split('/').filter(p => p) : [path];
|
||||
|
||||
// If it's a single file at root (no slashes), treat it specially
|
||||
if (parts.length === 1 && !path.includes('/')) {
|
||||
tree[parts[0]] = {
|
||||
name: parts[0],
|
||||
isFile: true,
|
||||
file: file,
|
||||
children: {},
|
||||
path: parts[0]
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
let current = tree;
|
||||
parts.forEach((part, index) => {
|
||||
if (!current[part]) {
|
||||
current[part] = {
|
||||
name: part,
|
||||
isFile: index === parts.length - 1,
|
||||
file: index === parts.length - 1 ? file : null,
|
||||
children: {},
|
||||
path: parts.slice(0, index + 1).join('/')
|
||||
};
|
||||
}
|
||||
current = current[part].children;
|
||||
});
|
||||
});
|
||||
|
||||
return tree;
|
||||
};
|
||||
|
||||
const togglePath = (path) => {
|
||||
const newExpanded = new Set(expandedPaths);
|
||||
if (newExpanded.has(path)) {
|
||||
newExpanded.delete(path);
|
||||
} else {
|
||||
newExpanded.add(path);
|
||||
}
|
||||
setExpandedPaths(newExpanded);
|
||||
};
|
||||
|
||||
const renderTree = (node, level = 0, parentPath = '') => {
|
||||
const items = Object.values(node).sort((a, b) => {
|
||||
// Directories first, then files
|
||||
if (a.isFile !== b.isFile) {
|
||||
return a.isFile ? 1 : -1;
|
||||
}
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
return items.map((item) => {
|
||||
const fullPath = parentPath ? `${parentPath}/${item.name}` : item.name;
|
||||
const isExpanded = expandedPaths.has(fullPath);
|
||||
const indent = level * 20;
|
||||
|
||||
if (item.isFile) {
|
||||
const file = item.file;
|
||||
const isImage = isImageFile && isImageFile(file.file_name);
|
||||
const isVideo = file.file_name.toLowerCase().endsWith('.mp4');
|
||||
const sizeMB = (file.file_size / 1024 / 1024).toFixed(2);
|
||||
const isArchive = file.file_name.endsWith('.tar') || file.file_name.endsWith('.zip');
|
||||
|
||||
return (
|
||||
<div key={fullPath} className="flex items-center justify-between py-1.5 hover:bg-gray-800/50 rounded px-2" style={{ paddingLeft: `${indent + 8}px` }}>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<span className="text-gray-500 text-sm">{isArchive ? '📦' : isVideo ? '🎬' : '📄'}</span>
|
||||
<span className="text-gray-200 text-sm truncate" title={item.name}>
|
||||
{item.name}
|
||||
</span>
|
||||
<span className="text-gray-500 text-xs ml-2">{sizeMB} MB</span>
|
||||
</div>
|
||||
<div className="flex gap-2 ml-4 shrink-0">
|
||||
{isVideo && onVideoPreview && (
|
||||
<button
|
||||
onClick={() => onVideoPreview(file)}
|
||||
className="px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-500 transition-colors"
|
||||
title="Play Video"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
)}
|
||||
{isImage && onPreview && (
|
||||
<button
|
||||
onClick={() => onPreview(file)}
|
||||
className="px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-500 transition-colors"
|
||||
title="Preview"
|
||||
>
|
||||
👁
|
||||
</button>
|
||||
)}
|
||||
{onDownload && file.id && (
|
||||
<button
|
||||
onClick={() => onDownload(file.id, file.file_name)}
|
||||
className="px-2 py-1 bg-orange-600 text-white rounded text-xs hover:bg-orange-500 transition-colors"
|
||||
title="Download"
|
||||
>
|
||||
⬇
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const hasChildren = Object.keys(item.children).length > 0;
|
||||
return (
|
||||
<div key={fullPath}>
|
||||
<div
|
||||
className="flex items-center gap-2 py-1.5 hover:bg-gray-800/50 rounded px-2 cursor-pointer select-none"
|
||||
style={{ paddingLeft: `${indent + 8}px` }}
|
||||
onClick={() => hasChildren && togglePath(fullPath)}
|
||||
>
|
||||
<span className="text-gray-400 text-xs w-4 flex items-center justify-center">
|
||||
{hasChildren ? (isExpanded ? '▼' : '▶') : '•'}
|
||||
</span>
|
||||
<span className="text-gray-500 text-sm">
|
||||
{hasChildren ? (isExpanded ? '📂' : '📁') : '📁'}
|
||||
</span>
|
||||
<span className="text-gray-300 text-sm font-medium">{item.name}</span>
|
||||
{hasChildren && (
|
||||
<span className="text-gray-500 text-xs ml-2">
|
||||
({Object.keys(item.children).length})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{hasChildren && isExpanded && (
|
||||
<div className="ml-2">
|
||||
{renderTree(item.children, level + 1, fullPath)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const tree = buildTree(files);
|
||||
|
||||
if (Object.keys(tree).length === 0) {
|
||||
return (
|
||||
<div className="text-gray-400 text-sm py-4 text-center">
|
||||
No files
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Wrap tree in a root folder
|
||||
const rootExpanded = expandedPaths.has('');
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-lg border border-gray-700 p-3">
|
||||
<div className="space-y-1">
|
||||
<div>
|
||||
<div
|
||||
className="flex items-center gap-2 py-1.5 hover:bg-gray-800/50 rounded px-2 cursor-pointer select-none"
|
||||
onClick={() => togglePath('')}
|
||||
>
|
||||
<span className="text-gray-400 text-xs w-4 flex items-center justify-center">
|
||||
{rootExpanded ? '▼' : '▶'}
|
||||
</span>
|
||||
<span className="text-gray-500 text-sm">
|
||||
{rootExpanded ? '📂' : '📁'}
|
||||
</span>
|
||||
<span className="text-gray-300 text-sm font-medium">Files</span>
|
||||
<span className="text-gray-500 text-xs ml-2">
|
||||
({Object.keys(tree).length})
|
||||
</span>
|
||||
</div>
|
||||
{rootExpanded && (
|
||||
<div className="ml-2">
|
||||
{renderTree(tree)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,289 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { jobs, normalizeArrayResponse } from '../utils/api';
|
||||
import { wsManager } from '../utils/websocket';
|
||||
import JobDetails from './JobDetails';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
|
||||
export default function JobList() {
|
||||
const [jobList, setJobList] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedJob, setSelectedJob] = useState(null);
|
||||
const [pagination, setPagination] = useState({ total: 0, limit: 50, offset: 0 });
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const listenerIdRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadJobs();
|
||||
// Use shared WebSocket manager for real-time updates
|
||||
listenerIdRef.current = wsManager.subscribe('joblist', {
|
||||
open: () => {
|
||||
console.log('JobList: Shared WebSocket connected');
|
||||
// Load initial job list via HTTP to get current state
|
||||
loadJobs();
|
||||
},
|
||||
message: (data) => {
|
||||
console.log('JobList: Client WebSocket message received:', data.type, data.channel, data);
|
||||
// Handle jobs channel messages (always broadcasted)
|
||||
if (data.channel === 'jobs') {
|
||||
if (data.type === 'job_update' && data.data) {
|
||||
console.log('JobList: Updating job:', data.job_id, data.data);
|
||||
// Update job in list
|
||||
setJobList(prev => {
|
||||
const prevArray = Array.isArray(prev) ? prev : [];
|
||||
const index = prevArray.findIndex(j => j.id === data.job_id);
|
||||
if (index >= 0) {
|
||||
const updated = [...prevArray];
|
||||
updated[index] = { ...updated[index], ...data.data };
|
||||
console.log('JobList: Updated job at index', index, updated[index]);
|
||||
return updated;
|
||||
}
|
||||
// If job not in current page, reload to get updated list
|
||||
if (data.data.status === 'completed' || data.data.status === 'failed') {
|
||||
loadJobs();
|
||||
}
|
||||
return prevArray;
|
||||
});
|
||||
} else if (data.type === 'job_created' && data.data) {
|
||||
console.log('JobList: New job created:', data.job_id, data.data);
|
||||
// New job created - add to list
|
||||
setJobList(prev => {
|
||||
const prevArray = Array.isArray(prev) ? prev : [];
|
||||
// Check if job already exists (avoid duplicates)
|
||||
if (prevArray.findIndex(j => j.id === data.job_id) >= 0) {
|
||||
return prevArray;
|
||||
}
|
||||
// Add new job at the beginning
|
||||
return [data.data, ...prevArray];
|
||||
});
|
||||
}
|
||||
} else if (data.type === 'connected') {
|
||||
// Connection established
|
||||
console.log('JobList: WebSocket connected');
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('JobList: Shared WebSocket error:', error);
|
||||
},
|
||||
close: (event) => {
|
||||
console.log('JobList: Shared WebSocket closed:', event);
|
||||
}
|
||||
});
|
||||
|
||||
// Ensure connection is established
|
||||
wsManager.connect();
|
||||
|
||||
return () => {
|
||||
if (listenerIdRef.current) {
|
||||
wsManager.unsubscribe(listenerIdRef.current);
|
||||
listenerIdRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadJobs = async (append = false) => {
|
||||
try {
|
||||
const offset = append ? pagination.offset + pagination.limit : 0;
|
||||
const result = await jobs.listSummary({
|
||||
limit: pagination.limit,
|
||||
offset,
|
||||
sort: 'created_at:desc'
|
||||
});
|
||||
|
||||
// Handle both old format (array) and new format (object with data, total, etc.)
|
||||
const jobsArray = normalizeArrayResponse(result);
|
||||
const total = result.total !== undefined ? result.total : jobsArray.length;
|
||||
|
||||
if (append) {
|
||||
setJobList(prev => {
|
||||
const prevArray = Array.isArray(prev) ? prev : [];
|
||||
return [...prevArray, ...jobsArray];
|
||||
});
|
||||
setPagination(prev => ({ ...prev, offset, total }));
|
||||
} else {
|
||||
setJobList(jobsArray);
|
||||
setPagination({ total, limit: result.limit || pagination.limit, offset: result.offset || 0 });
|
||||
}
|
||||
|
||||
setHasMore(offset + jobsArray.length < total);
|
||||
} catch (error) {
|
||||
console.error('Failed to load jobs:', error);
|
||||
// Ensure jobList is always an array even on error
|
||||
if (!append) {
|
||||
setJobList([]);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
if (!loading && hasMore) {
|
||||
loadJobs(true);
|
||||
}
|
||||
};
|
||||
|
||||
// Keep selectedJob in sync with the job list when it refreshes
|
||||
useEffect(() => {
|
||||
if (selectedJob && jobList.length > 0) {
|
||||
const freshJob = jobList.find(j => j.id === selectedJob.id);
|
||||
if (freshJob) {
|
||||
// Update to the fresh object from the list to keep it in sync
|
||||
setSelectedJob(freshJob);
|
||||
} else {
|
||||
// Job was deleted or no longer exists, clear selection
|
||||
setSelectedJob(null);
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [jobList]); // Only depend on jobList, not selectedJob to avoid infinite loops
|
||||
|
||||
const handleCancel = async (jobId) => {
|
||||
if (!confirm('Are you sure you want to cancel this job?')) return;
|
||||
try {
|
||||
await jobs.cancel(jobId);
|
||||
loadJobs();
|
||||
} catch (error) {
|
||||
alert('Failed to cancel job: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (jobId) => {
|
||||
if (!confirm('Are you sure you want to permanently delete this job? This action cannot be undone.')) return;
|
||||
try {
|
||||
// Optimistically update the list
|
||||
setJobList(prev => {
|
||||
const prevArray = Array.isArray(prev) ? prev : [];
|
||||
return prevArray.filter(j => j.id !== jobId);
|
||||
});
|
||||
if (selectedJob && selectedJob.id === jobId) {
|
||||
setSelectedJob(null);
|
||||
}
|
||||
// Then actually delete
|
||||
await jobs.delete(jobId);
|
||||
// Reload to ensure consistency
|
||||
loadJobs();
|
||||
} catch (error) {
|
||||
// On error, reload to restore correct state
|
||||
loadJobs();
|
||||
alert('Failed to delete job: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
pending: 'bg-yellow-400/20 text-yellow-400',
|
||||
running: 'bg-orange-400/20 text-orange-400',
|
||||
completed: 'bg-green-400/20 text-green-400',
|
||||
failed: 'bg-red-400/20 text-red-400',
|
||||
cancelled: 'bg-gray-500/20 text-gray-400',
|
||||
};
|
||||
return colors[status] || colors.pending;
|
||||
};
|
||||
|
||||
if (loading && jobList.length === 0) {
|
||||
return <LoadingSpinner size="md" className="h-64" />;
|
||||
}
|
||||
|
||||
if (jobList.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-400 text-lg">No jobs yet. Submit a job to get started!</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{jobList.map((job) => (
|
||||
<div
|
||||
key={job.id}
|
||||
className="bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-l-4 border-orange-500 border border-gray-700"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-xl font-semibold text-gray-100">{job.name}</h3>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(job.status)}`}>
|
||||
{job.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm text-gray-400 mb-4">
|
||||
{job.frame_start !== undefined && job.frame_end !== undefined && (
|
||||
<p>Frames: {job.frame_start} - {job.frame_end}</p>
|
||||
)}
|
||||
{job.output_format && <p>Format: {job.output_format}</p>}
|
||||
<p>Created: {new Date(job.created_at).toLocaleString()}</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex justify-between text-xs text-gray-400 mb-1">
|
||||
<span>Progress</span>
|
||||
<span>{job.progress.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-orange-500 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${job.progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
// Fetch full job details when viewing
|
||||
jobs.get(job.id).then(fullJob => {
|
||||
setSelectedJob(fullJob);
|
||||
}).catch(err => {
|
||||
console.error('Failed to load job details:', err);
|
||||
setSelectedJob(job); // Fallback to summary
|
||||
});
|
||||
}}
|
||||
className="flex-1 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-500 transition-colors font-medium"
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
{(job.status === 'pending' || job.status === 'running') && (
|
||||
<button
|
||||
onClick={() => handleCancel(job.id)}
|
||||
className="px-4 py-2 bg-gray-700 text-gray-200 rounded-lg hover:bg-gray-600 transition-colors font-medium"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{(job.status === 'completed' || job.status === 'failed' || job.status === 'cancelled') && (
|
||||
<button
|
||||
onClick={() => handleDelete(job.id)}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-500 transition-colors font-medium"
|
||||
title="Delete job"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{hasMore && (
|
||||
<div className="flex justify-center mt-6">
|
||||
<button
|
||||
onClick={loadMore}
|
||||
disabled={loading}
|
||||
className="px-6 py-2 bg-gray-700 text-gray-200 rounded-lg hover:bg-gray-600 transition-colors font-medium disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Loading...' : 'Load More'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedJob && (
|
||||
<JobDetails
|
||||
job={selectedJob}
|
||||
onClose={() => setSelectedJob(null)}
|
||||
onUpdate={loadJobs}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,76 +0,0 @@
|
||||
import { useAuth } from '../hooks/useAuth';
|
||||
|
||||
export default function Layout({ children, activeTab, onTabChange }) {
|
||||
const { user, logout } = useAuth();
|
||||
const isAdmin = user?.is_admin || false;
|
||||
|
||||
// Note: If user becomes null, App.jsx will handle showing Login component
|
||||
// We don't need to redirect here as App.jsx already checks for !user
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900">
|
||||
<header className="bg-gray-800 shadow-sm border-b border-gray-700">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<h1 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-amber-500">
|
||||
JiggaBlend
|
||||
</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-gray-300">{user?.name || user?.email}</span>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-200 bg-gray-700 border border-gray-600 rounded-lg hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav className="bg-gray-800 border-b border-gray-700">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex space-x-8">
|
||||
<button
|
||||
onClick={() => onTabChange('jobs')}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'jobs'
|
||||
? 'border-orange-500 text-orange-500'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
Jobs
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onTabChange('submit')}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'submit'
|
||||
? 'border-orange-500 text-orange-500'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
Submit Job
|
||||
</button>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => onTabChange('admin')}
|
||||
className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
|
||||
activeTab === 'admin'
|
||||
? 'border-orange-500 text-orange-500'
|
||||
: 'border-transparent text-gray-400 hover:text-gray-300 hover:border-gray-600'
|
||||
}`}
|
||||
>
|
||||
Admin
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
/**
|
||||
* Shared LoadingSpinner component with size variants
|
||||
*/
|
||||
export default function LoadingSpinner({ size = 'md', className = '', borderColor = 'border-orange-500' }) {
|
||||
const sizeClasses = {
|
||||
sm: 'h-8 w-8',
|
||||
md: 'h-12 w-12',
|
||||
lg: 'h-16 w-16',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex justify-center items-center ${className}`}>
|
||||
<div className={`animate-spin rounded-full border-b-2 ${borderColor} ${sizeClasses[size]}`}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,277 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { auth } from '../utils/api';
|
||||
import ErrorMessage from './ErrorMessage';
|
||||
|
||||
export default function Login() {
|
||||
const [providers, setProviders] = useState({
|
||||
google: false,
|
||||
discord: false,
|
||||
local: false,
|
||||
});
|
||||
const [showRegister, setShowRegister] = useState(false);
|
||||
const [email, setEmail] = useState('');
|
||||
const [name, setName] = useState('');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
checkAuthProviders();
|
||||
// Check for registration disabled error in URL
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('error') === 'registration_disabled') {
|
||||
setError('Registration is currently disabled. Please contact an administrator.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const checkAuthProviders = async () => {
|
||||
try {
|
||||
const result = await auth.getProviders();
|
||||
setProviders({
|
||||
google: result.google || false,
|
||||
discord: result.discord || false,
|
||||
local: result.local || false,
|
||||
});
|
||||
} catch (error) {
|
||||
// If endpoint fails, assume no providers are available
|
||||
console.error('Failed to check auth providers:', error);
|
||||
setProviders({ google: false, discord: false, local: false });
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocalLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await auth.localLogin(username, password);
|
||||
// Reload page to trigger auth check in App component
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
setError(err.message || 'Login failed');
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLocalRegister = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError('Passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.length < 8) {
|
||||
setError('Password must be at least 8 characters long');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await auth.localRegister(email, name, password);
|
||||
// Reload page to trigger auth check in App component
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
setError(err.message || 'Registration failed');
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-900">
|
||||
<div className="bg-gray-800 rounded-2xl shadow-2xl p-8 w-full max-w-md border border-gray-700">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-amber-500 mb-2">
|
||||
JiggaBlend
|
||||
</h1>
|
||||
<p className="text-gray-400 text-lg">Blender Render Farm</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<ErrorMessage error={error} className="text-sm" />
|
||||
{providers.local && (
|
||||
<div className="pb-4 border-b border-gray-700">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowRegister(false);
|
||||
setError('');
|
||||
}}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-medium transition-colors ${
|
||||
!showRegister
|
||||
? 'bg-orange-600 text-white'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowRegister(true);
|
||||
setError('');
|
||||
}}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-medium transition-colors ${
|
||||
showRegister
|
||||
? 'bg-orange-600 text-white'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{!showRegister ? (
|
||||
<form onSubmit={handleLocalLogin} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="username" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
type="email"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent placeholder-gray-500"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent placeholder-gray-500"
|
||||
placeholder="Enter password"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-orange-500 transition-all duration-200 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'Logging in...' : 'Login'}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form onSubmit={handleLocalRegister} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="reg-email" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="reg-email"
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent placeholder-gray-500"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="reg-name" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Name
|
||||
</label>
|
||||
<input
|
||||
id="reg-name"
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent placeholder-gray-500"
|
||||
placeholder="Enter your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="reg-password" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="reg-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent placeholder-gray-500"
|
||||
placeholder="At least 8 characters"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="reg-confirm-password" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="reg-confirm-password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent placeholder-gray-500"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-orange-500 transition-all duration-200 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'Registering...' : 'Register'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{providers.google && (
|
||||
<a
|
||||
href="/api/auth/google/login"
|
||||
className="w-full flex items-center justify-center gap-3 bg-gray-700 border-2 border-gray-600 text-gray-200 font-semibold py-3 px-6 rounded-lg hover:bg-gray-600 hover:border-gray-500 transition-all duration-200 shadow-sm"
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
||||
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
||||
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
||||
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
||||
</svg>
|
||||
Continue with Google
|
||||
</a>
|
||||
)}
|
||||
|
||||
{providers.discord && (
|
||||
<a
|
||||
href="/api/auth/discord/login"
|
||||
className="w-full flex items-center justify-center gap-3 bg-[#5865F2] text-white font-semibold py-3 px-6 rounded-lg hover:bg-[#4752C4] transition-all duration-200 shadow-lg"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
|
||||
</svg>
|
||||
Continue with Discord
|
||||
</a>
|
||||
)}
|
||||
|
||||
{!providers.google && !providers.discord && !providers.local && (
|
||||
<div className="p-4 bg-yellow-400/20 border border-yellow-400/50 rounded-lg text-yellow-400 text-sm text-center">
|
||||
No authentication methods are configured. Please contact an administrator.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,137 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { auth } from '../utils/api';
|
||||
import ErrorMessage from './ErrorMessage';
|
||||
import { useAuth } from '../hooks/useAuth';
|
||||
|
||||
export default function PasswordChange({ targetUserId = null, targetUserName = null, onSuccess }) {
|
||||
const { user } = useAuth();
|
||||
const [oldPassword, setOldPassword] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [success, setSuccess] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const isAdmin = user?.is_admin || false;
|
||||
const isChangingOtherUser = targetUserId !== null && isAdmin;
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setSuccess('');
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError('New passwords do not match');
|
||||
return;
|
||||
}
|
||||
|
||||
if (newPassword.length < 8) {
|
||||
setError('Password must be at least 8 characters long');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isChangingOtherUser && !oldPassword) {
|
||||
setError('Old password is required');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
await auth.changePassword(
|
||||
isChangingOtherUser ? null : oldPassword,
|
||||
newPassword,
|
||||
isChangingOtherUser ? targetUserId : null
|
||||
);
|
||||
setSuccess('Password changed successfully');
|
||||
setOldPassword('');
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
if (onSuccess) {
|
||||
setTimeout(() => {
|
||||
onSuccess();
|
||||
}, 1500);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message || 'Failed to change password');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gray-800 rounded-lg shadow-md p-6 border border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-100">
|
||||
{isChangingOtherUser ? `Change Password for ${targetUserName || 'User'}` : 'Change Password'}
|
||||
</h2>
|
||||
|
||||
<ErrorMessage error={error} className="mb-4 text-sm" />
|
||||
|
||||
{success && (
|
||||
<div className="mb-4 p-3 bg-green-400/20 border border-green-400/50 rounded-lg text-green-400 text-sm">
|
||||
{success}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{!isChangingOtherUser && (
|
||||
<div>
|
||||
<label htmlFor="old-password" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Current Password
|
||||
</label>
|
||||
<input
|
||||
id="old-password"
|
||||
type="password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
required
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
placeholder="Enter current password"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="new-password" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
New Password
|
||||
</label>
|
||||
<input
|
||||
id="new-password"
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
placeholder="At least 8 characters"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="confirm-password" className="block text-sm font-medium text-gray-300 mb-1">
|
||||
Confirm New Password
|
||||
</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
minLength={8}
|
||||
className="w-full px-4 py-2 bg-gray-900 border border-gray-600 rounded-lg text-gray-100 focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-orange-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-orange-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? 'Changing Password...' : 'Change Password'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,179 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { admin, normalizeArrayResponse } from '../utils/api';
|
||||
import { wsManager } from '../utils/websocket';
|
||||
import JobDetails from './JobDetails';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
|
||||
export default function UserJobs({ userId, userName, onBack }) {
|
||||
const [jobList, setJobList] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedJob, setSelectedJob] = useState(null);
|
||||
const listenerIdRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadJobs();
|
||||
// Use shared WebSocket manager for real-time updates instead of polling
|
||||
listenerIdRef.current = wsManager.subscribe(`userjobs_${userId}`, {
|
||||
open: () => {
|
||||
console.log('UserJobs: Shared WebSocket connected');
|
||||
loadJobs();
|
||||
},
|
||||
message: (data) => {
|
||||
// Handle jobs channel messages (always broadcasted)
|
||||
if (data.channel === 'jobs') {
|
||||
if (data.type === 'job_update' && data.data) {
|
||||
// Update job in list if it belongs to this user
|
||||
setJobList(prev => {
|
||||
const prevArray = Array.isArray(prev) ? prev : [];
|
||||
const index = prevArray.findIndex(j => j.id === data.job_id);
|
||||
if (index >= 0) {
|
||||
const updated = [...prevArray];
|
||||
updated[index] = { ...updated[index], ...data.data };
|
||||
return updated;
|
||||
}
|
||||
// If job not in current list, reload to get updated list
|
||||
if (data.data.status === 'completed' || data.data.status === 'failed') {
|
||||
loadJobs();
|
||||
}
|
||||
return prevArray;
|
||||
});
|
||||
} else if (data.type === 'job_created' && data.data) {
|
||||
// New job created - reload to check if it belongs to this user
|
||||
loadJobs();
|
||||
}
|
||||
}
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('UserJobs: Shared WebSocket error:', error);
|
||||
},
|
||||
close: (event) => {
|
||||
console.log('UserJobs: Shared WebSocket closed:', event);
|
||||
}
|
||||
});
|
||||
|
||||
// Ensure connection is established
|
||||
wsManager.connect();
|
||||
|
||||
return () => {
|
||||
if (listenerIdRef.current) {
|
||||
wsManager.unsubscribe(listenerIdRef.current);
|
||||
listenerIdRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [userId]);
|
||||
|
||||
const loadJobs = async () => {
|
||||
try {
|
||||
const data = await admin.getUserJobs(userId);
|
||||
setJobList(normalizeArrayResponse(data));
|
||||
} catch (error) {
|
||||
console.error('Failed to load jobs:', error);
|
||||
setJobList([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
pending: 'bg-yellow-400/20 text-yellow-400',
|
||||
running: 'bg-orange-400/20 text-orange-400',
|
||||
completed: 'bg-green-400/20 text-green-400',
|
||||
failed: 'bg-red-400/20 text-red-400',
|
||||
cancelled: 'bg-gray-500/20 text-gray-400',
|
||||
};
|
||||
return colors[status] || colors.pending;
|
||||
};
|
||||
|
||||
if (selectedJob) {
|
||||
return (
|
||||
<JobDetails
|
||||
job={selectedJob}
|
||||
onClose={() => setSelectedJob(null)}
|
||||
onUpdate={loadJobs}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <LoadingSpinner size="md" className="h-64" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="text-gray-400 hover:text-gray-300 mb-2 flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back to Users
|
||||
</button>
|
||||
<h2 className="text-2xl font-bold text-gray-100">Jobs for {userName}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{jobList.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-400 text-lg">No jobs found for this user.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6">
|
||||
{jobList.map((job) => (
|
||||
<div
|
||||
key={job.id}
|
||||
className="bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-l-4 border-orange-500 border border-gray-700"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-100 mb-1">{job.name}</h3>
|
||||
<p className="text-sm text-gray-400">
|
||||
{job.job_type === 'render' && job.frame_start !== null && job.frame_end !== null
|
||||
? `Frames ${job.frame_start}-${job.frame_end}`
|
||||
: 'Metadata extraction'}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 text-sm font-medium rounded-full ${getStatusColor(job.status)}`}
|
||||
>
|
||||
{job.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{job.status === 'running' && (
|
||||
<div className="mb-4">
|
||||
<div className="flex justify-between text-sm text-gray-400 mb-1">
|
||||
<span>Progress</span>
|
||||
<span>{Math.round(job.progress)}%</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-orange-500 h-2 rounded-full transition-all duration-300"
|
||||
style={{ width: `${job.progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-gray-400">
|
||||
Created: {new Date(job.created_at).toLocaleString()}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedJob(job)}
|
||||
className="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-500 transition-colors font-medium"
|
||||
>
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import ErrorMessage from './ErrorMessage';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
|
||||
export default function VideoPlayer({ videoUrl, onClose }) {
|
||||
const videoRef = useRef(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current;
|
||||
if (!video || !videoUrl) return;
|
||||
|
||||
const handleCanPlay = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleError = (e) => {
|
||||
console.error('Video playback error:', e, video.error);
|
||||
// Get more detailed error information
|
||||
let errorMsg = 'Failed to load video';
|
||||
if (video.error) {
|
||||
switch (video.error.code) {
|
||||
case video.error.MEDIA_ERR_ABORTED:
|
||||
errorMsg = 'Video loading aborted';
|
||||
break;
|
||||
case video.error.MEDIA_ERR_NETWORK:
|
||||
errorMsg = 'Network error while loading video';
|
||||
break;
|
||||
case video.error.MEDIA_ERR_DECODE:
|
||||
errorMsg = 'Video decoding error';
|
||||
break;
|
||||
case video.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
|
||||
errorMsg = 'Video format not supported';
|
||||
break;
|
||||
}
|
||||
}
|
||||
setError(errorMsg);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleLoadStart = () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
};
|
||||
|
||||
video.addEventListener('canplay', handleCanPlay);
|
||||
video.addEventListener('error', handleError);
|
||||
video.addEventListener('loadstart', handleLoadStart);
|
||||
|
||||
return () => {
|
||||
video.removeEventListener('canplay', handleCanPlay);
|
||||
video.removeEventListener('error', handleError);
|
||||
video.removeEventListener('loadstart', handleLoadStart);
|
||||
};
|
||||
}, [videoUrl]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div>
|
||||
<ErrorMessage error={error} />
|
||||
<div className="mt-2 text-sm text-gray-400">
|
||||
<a href={videoUrl} download className="text-orange-400 hover:text-orange-300 underline">Download video instead</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative bg-black rounded-lg overflow-hidden">
|
||||
{loading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 z-10">
|
||||
<LoadingSpinner size="lg" className="border-white" />
|
||||
</div>
|
||||
)}
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={videoUrl}
|
||||
controls
|
||||
className="w-full"
|
||||
onLoadedData={() => setLoading(false)}
|
||||
preload="metadata"
|
||||
>
|
||||
Your browser does not support the video tag.
|
||||
<a href={videoUrl} download>Download the video</a>
|
||||
</video>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { auth, setAuthErrorHandler } from '../utils/api';
|
||||
|
||||
export function useAuth() {
|
||||
const [user, setUser] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const userRef = useRef(user);
|
||||
|
||||
// Keep userRef in sync with user state
|
||||
useEffect(() => {
|
||||
userRef.current = user;
|
||||
}, [user]);
|
||||
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const userData = await auth.getMe();
|
||||
setUser(userData);
|
||||
setLoading(false);
|
||||
return userData; // Return user data for verification
|
||||
} catch (error) {
|
||||
// If 401/403, user is not authenticated
|
||||
// Check if it's an auth error
|
||||
if (error.message && (error.message.includes('Unauthorized') || error.message.includes('401') || error.message.includes('403'))) {
|
||||
setUser(null);
|
||||
setLoading(false);
|
||||
throw error; // Re-throw to allow caller to handle
|
||||
} else {
|
||||
// Other errors (network, etc.) - don't log out, just re-throw
|
||||
// This prevents network issues from logging users out
|
||||
setLoading(false);
|
||||
throw error; // Re-throw to allow caller to handle
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
try {
|
||||
await auth.logout();
|
||||
} catch (error) {
|
||||
console.error('Logout error:', error);
|
||||
} finally {
|
||||
// Refresh the page to show login
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Set up global auth error handler
|
||||
setAuthErrorHandler(() => {
|
||||
setUser(null);
|
||||
setLoading(false);
|
||||
});
|
||||
|
||||
// Listen for auth errors from API calls
|
||||
const handleAuthErrorEvent = () => {
|
||||
setUser(null);
|
||||
setLoading(false);
|
||||
};
|
||||
window.addEventListener('auth-error', handleAuthErrorEvent);
|
||||
|
||||
// Initial auth check
|
||||
checkAuth();
|
||||
|
||||
// Periodic auth check every 10 seconds
|
||||
const authInterval = setInterval(() => {
|
||||
// Use ref to check current user state without dependency
|
||||
if (userRef.current) {
|
||||
// Only check if we have a user (don't spam when logged out)
|
||||
checkAuth().catch((error) => {
|
||||
// Only log out if it's actually an auth error, not a network error
|
||||
// Network errors shouldn't log the user out
|
||||
if (error.message && (error.message.includes('Unauthorized') || error.message.includes('401') || error.message.includes('403'))) {
|
||||
// This is a real auth error - user will be set to null by checkAuth
|
||||
}
|
||||
// For other errors (network, etc.), don't log out - just silently fail
|
||||
});
|
||||
}
|
||||
}, 10000); // 10 seconds
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('auth-error', handleAuthErrorEvent);
|
||||
clearInterval(authInterval);
|
||||
};
|
||||
}, []); // Empty deps - only run on mount/unmount
|
||||
|
||||
return { user, loading, logout, refresh: checkAuth };
|
||||
}
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@apply bg-gray-900 text-gray-100;
|
||||
}
|
||||
|
||||
@@ -1,552 +0,0 @@
|
||||
const API_BASE = '/api';
|
||||
|
||||
// Global auth error handler - will be set by useAuth hook
|
||||
let onAuthError = null;
|
||||
|
||||
// Request debouncing and deduplication
|
||||
const pendingRequests = new Map(); // key: endpoint+params, value: Promise
|
||||
const requestQueue = new Map(); // key: endpoint+params, value: { resolve, reject, timestamp }
|
||||
const DEBOUNCE_DELAY = 100; // 100ms debounce delay
|
||||
const DEDUPE_WINDOW = 5000; // 5 seconds - same request within this window uses cached promise
|
||||
|
||||
// Generate cache key from endpoint and params
|
||||
function getCacheKey(endpoint, options = {}) {
|
||||
const params = new URLSearchParams();
|
||||
Object.keys(options).sort().forEach(key => {
|
||||
if (options[key] !== undefined && options[key] !== null) {
|
||||
params.append(key, String(options[key]));
|
||||
}
|
||||
});
|
||||
const query = params.toString();
|
||||
return `${endpoint}${query ? '?' + query : ''}`;
|
||||
}
|
||||
|
||||
// Utility function to normalize array responses (handles both old and new formats)
|
||||
export function normalizeArrayResponse(response) {
|
||||
const data = response?.data || response;
|
||||
return Array.isArray(data) ? data : [];
|
||||
}
|
||||
|
||||
// Sentinel value to indicate a request was superseded (instead of rejecting)
|
||||
// Export it so components can check for it
|
||||
export const REQUEST_SUPERSEDED = Symbol('REQUEST_SUPERSEDED');
|
||||
|
||||
// Debounced request wrapper
|
||||
function debounceRequest(key, requestFn, delay = DEBOUNCE_DELAY) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Check if there's a pending request for this key
|
||||
if (pendingRequests.has(key)) {
|
||||
const pending = pendingRequests.get(key);
|
||||
// If request is very recent (within dedupe window), reuse it
|
||||
const now = Date.now();
|
||||
if (pending.timestamp && (now - pending.timestamp) < DEDUPE_WINDOW) {
|
||||
pending.promise.then(resolve).catch(reject);
|
||||
return;
|
||||
} else {
|
||||
// Request is older than dedupe window - remove it and create new one
|
||||
pendingRequests.delete(key);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear any existing timeout for this key
|
||||
if (requestQueue.has(key)) {
|
||||
const queued = requestQueue.get(key);
|
||||
clearTimeout(queued.timeout);
|
||||
// Resolve with sentinel value instead of rejecting - this prevents errors from propagating
|
||||
// The new request will handle the actual response
|
||||
queued.resolve(REQUEST_SUPERSEDED);
|
||||
}
|
||||
|
||||
// Queue new request
|
||||
const timeout = setTimeout(() => {
|
||||
requestQueue.delete(key);
|
||||
const promise = requestFn();
|
||||
const timestamp = Date.now();
|
||||
pendingRequests.set(key, { promise, timestamp });
|
||||
|
||||
promise
|
||||
.then(result => {
|
||||
pendingRequests.delete(key);
|
||||
resolve(result);
|
||||
})
|
||||
.catch(error => {
|
||||
pendingRequests.delete(key);
|
||||
reject(error);
|
||||
});
|
||||
}, delay);
|
||||
|
||||
requestQueue.set(key, { resolve, reject, timeout });
|
||||
});
|
||||
}
|
||||
|
||||
export const setAuthErrorHandler = (handler) => {
|
||||
onAuthError = handler;
|
||||
};
|
||||
|
||||
// Whitelist of endpoints that should NOT trigger auth error handling
|
||||
// These are endpoints that can legitimately return 401/403 without meaning the user is logged out
|
||||
const AUTH_CHECK_ENDPOINTS = ['/auth/me', '/auth/logout'];
|
||||
|
||||
const handleAuthError = (response, endpoint) => {
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
// Don't trigger auth error handler for endpoints that check auth status
|
||||
if (AUTH_CHECK_ENDPOINTS.includes(endpoint)) {
|
||||
return;
|
||||
}
|
||||
// Trigger auth error handler if set (this will clear user state)
|
||||
if (onAuthError) {
|
||||
onAuthError();
|
||||
}
|
||||
// Force a re-check of auth status to ensure login is shown
|
||||
// This ensures the App component re-renders with user=null
|
||||
if (typeof window !== 'undefined') {
|
||||
// Dispatch a custom event that useAuth can listen to
|
||||
window.dispatchEvent(new CustomEvent('auth-error'));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Extract error message from response - centralized to avoid duplication
|
||||
async function extractErrorMessage(response) {
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
return errorData?.error || response.statusText;
|
||||
} catch {
|
||||
return response.statusText;
|
||||
}
|
||||
}
|
||||
|
||||
export const api = {
|
||||
async get(endpoint, options = {}) {
|
||||
const abortController = options.signal || new AbortController();
|
||||
const response = await fetch(`${API_BASE}${endpoint}`, {
|
||||
credentials: 'include', // Include cookies for session
|
||||
signal: abortController.signal,
|
||||
});
|
||||
if (!response.ok) {
|
||||
// Handle auth errors before parsing response
|
||||
handleAuthError(response, endpoint);
|
||||
const errorMessage = await extractErrorMessage(response);
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
async post(endpoint, data, options = {}) {
|
||||
const abortController = options.signal || new AbortController();
|
||||
const response = await fetch(`${API_BASE}${endpoint}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
credentials: 'include', // Include cookies for session
|
||||
signal: abortController.signal,
|
||||
});
|
||||
if (!response.ok) {
|
||||
// Handle auth errors before parsing response
|
||||
handleAuthError(response, endpoint);
|
||||
const errorMessage = await extractErrorMessage(response);
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
async patch(endpoint, data, options = {}) {
|
||||
const abortController = options.signal || new AbortController();
|
||||
const response = await fetch(`${API_BASE}${endpoint}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: data ? JSON.stringify(data) : undefined,
|
||||
credentials: 'include', // Include cookies for session
|
||||
signal: abortController.signal,
|
||||
});
|
||||
if (!response.ok) {
|
||||
// Handle auth errors before parsing response
|
||||
handleAuthError(response, endpoint);
|
||||
const errorMessage = await extractErrorMessage(response);
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
async delete(endpoint, options = {}) {
|
||||
const abortController = options.signal || new AbortController();
|
||||
const response = await fetch(`${API_BASE}${endpoint}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include', // Include cookies for session
|
||||
signal: abortController.signal,
|
||||
});
|
||||
if (!response.ok) {
|
||||
// Handle auth errors before parsing response
|
||||
handleAuthError(response, endpoint);
|
||||
const errorMessage = await extractErrorMessage(response);
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
return response.json();
|
||||
},
|
||||
|
||||
async uploadFile(endpoint, file, onProgress, mainBlendFile) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
if (mainBlendFile) {
|
||||
formData.append('main_blend_file', mainBlendFile);
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
// Track upload progress
|
||||
if (onProgress) {
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const percentComplete = (e.loaded / e.total) * 100;
|
||||
onProgress(percentComplete);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
try {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
resolve(response);
|
||||
} catch (err) {
|
||||
resolve(xhr.responseText);
|
||||
}
|
||||
} else {
|
||||
// Handle auth errors
|
||||
if (xhr.status === 401 || xhr.status === 403) {
|
||||
handleAuthError({ status: xhr.status }, endpoint);
|
||||
}
|
||||
try {
|
||||
const errorData = JSON.parse(xhr.responseText);
|
||||
reject(new Error(errorData.error || xhr.statusText));
|
||||
} catch {
|
||||
reject(new Error(xhr.statusText));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
reject(new Error('Upload failed'));
|
||||
});
|
||||
|
||||
xhr.addEventListener('abort', () => {
|
||||
reject(new Error('Upload aborted'));
|
||||
});
|
||||
|
||||
xhr.open('POST', `${API_BASE}${endpoint}`);
|
||||
xhr.withCredentials = true; // Include cookies for session
|
||||
xhr.send(formData);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export const auth = {
|
||||
async getMe() {
|
||||
return api.get('/auth/me');
|
||||
},
|
||||
|
||||
async logout() {
|
||||
return api.post('/auth/logout');
|
||||
},
|
||||
|
||||
async getProviders() {
|
||||
return api.get('/auth/providers');
|
||||
},
|
||||
|
||||
async isLocalLoginAvailable() {
|
||||
return api.get('/auth/local/available');
|
||||
},
|
||||
|
||||
async localRegister(email, name, password) {
|
||||
return api.post('/auth/local/register', { email, name, password });
|
||||
},
|
||||
|
||||
async localLogin(username, password) {
|
||||
return api.post('/auth/local/login', { username, password });
|
||||
},
|
||||
|
||||
async changePassword(oldPassword, newPassword, targetUserId = null) {
|
||||
const body = { old_password: oldPassword, new_password: newPassword };
|
||||
if (targetUserId !== null) {
|
||||
body.target_user_id = targetUserId;
|
||||
}
|
||||
return api.post('/auth/change-password', body);
|
||||
},
|
||||
};
|
||||
|
||||
export const jobs = {
|
||||
async list(options = {}) {
|
||||
const key = getCacheKey('/jobs', options);
|
||||
return debounceRequest(key, () => {
|
||||
const params = new URLSearchParams();
|
||||
if (options.limit) params.append('limit', options.limit.toString());
|
||||
if (options.offset) params.append('offset', options.offset.toString());
|
||||
if (options.status) params.append('status', options.status);
|
||||
if (options.sort) params.append('sort', options.sort);
|
||||
const query = params.toString();
|
||||
return api.get(`/jobs${query ? '?' + query : ''}`);
|
||||
});
|
||||
},
|
||||
|
||||
async listSummary(options = {}) {
|
||||
const key = getCacheKey('/jobs/summary', options);
|
||||
return debounceRequest(key, () => {
|
||||
const params = new URLSearchParams();
|
||||
if (options.limit) params.append('limit', options.limit.toString());
|
||||
if (options.offset) params.append('offset', options.offset.toString());
|
||||
if (options.status) params.append('status', options.status);
|
||||
if (options.sort) params.append('sort', options.sort);
|
||||
const query = params.toString();
|
||||
return api.get(`/jobs/summary${query ? '?' + query : ''}`, options);
|
||||
});
|
||||
},
|
||||
|
||||
async get(id, options = {}) {
|
||||
const key = getCacheKey(`/jobs/${id}`, options);
|
||||
return debounceRequest(key, async () => {
|
||||
if (options.etag) {
|
||||
// Include ETag in request headers for conditional requests
|
||||
const headers = { 'If-None-Match': options.etag };
|
||||
const response = await fetch(`${API_BASE}/jobs/${id}`, {
|
||||
credentials: 'include',
|
||||
headers,
|
||||
});
|
||||
if (response.status === 304) {
|
||||
return null; // Not modified
|
||||
}
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => null);
|
||||
throw new Error(errorData?.error || response.statusText);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
return api.get(`/jobs/${id}`, options);
|
||||
});
|
||||
},
|
||||
|
||||
async create(jobData) {
|
||||
return api.post('/jobs', jobData);
|
||||
},
|
||||
|
||||
async cancel(id) {
|
||||
return api.delete(`/jobs/${id}`);
|
||||
},
|
||||
|
||||
async delete(id) {
|
||||
return api.post(`/jobs/${id}/delete`);
|
||||
},
|
||||
|
||||
async uploadFile(jobId, file, onProgress, mainBlendFile) {
|
||||
return api.uploadFile(`/jobs/${jobId}/upload`, file, onProgress, mainBlendFile);
|
||||
},
|
||||
|
||||
async uploadFileForJobCreation(file, onProgress, mainBlendFile) {
|
||||
return api.uploadFile(`/jobs/upload`, file, onProgress, mainBlendFile);
|
||||
},
|
||||
|
||||
async getFiles(jobId, options = {}) {
|
||||
const key = getCacheKey(`/jobs/${jobId}/files`, options);
|
||||
return debounceRequest(key, () => {
|
||||
const params = new URLSearchParams();
|
||||
if (options.limit) params.append('limit', options.limit.toString());
|
||||
if (options.offset) params.append('offset', options.offset.toString());
|
||||
if (options.file_type) params.append('file_type', options.file_type);
|
||||
if (options.extension) params.append('extension', options.extension);
|
||||
const query = params.toString();
|
||||
return api.get(`/jobs/${jobId}/files${query ? '?' + query : ''}`, options);
|
||||
});
|
||||
},
|
||||
|
||||
async getFilesCount(jobId, options = {}) {
|
||||
const key = getCacheKey(`/jobs/${jobId}/files/count`, options);
|
||||
return debounceRequest(key, () => {
|
||||
const params = new URLSearchParams();
|
||||
if (options.file_type) params.append('file_type', options.file_type);
|
||||
const query = params.toString();
|
||||
return api.get(`/jobs/${jobId}/files/count${query ? '?' + query : ''}`);
|
||||
});
|
||||
},
|
||||
|
||||
async getContextArchive(jobId, options = {}) {
|
||||
return api.get(`/jobs/${jobId}/context`, options);
|
||||
},
|
||||
|
||||
downloadFile(jobId, fileId) {
|
||||
return `${API_BASE}/jobs/${jobId}/files/${fileId}/download`;
|
||||
},
|
||||
|
||||
previewEXR(jobId, fileId) {
|
||||
return `${API_BASE}/jobs/${jobId}/files/${fileId}/preview-exr`;
|
||||
},
|
||||
|
||||
getVideoUrl(jobId) {
|
||||
return `${API_BASE}/jobs/${jobId}/video`;
|
||||
},
|
||||
|
||||
async getTaskLogs(jobId, taskId, options = {}) {
|
||||
const key = getCacheKey(`/jobs/${jobId}/tasks/${taskId}/logs`, options);
|
||||
return debounceRequest(key, async () => {
|
||||
const params = new URLSearchParams();
|
||||
if (options.stepName) params.append('step_name', options.stepName);
|
||||
if (options.logLevel) params.append('log_level', options.logLevel);
|
||||
if (options.limit) params.append('limit', options.limit.toString());
|
||||
if (options.sinceId) params.append('since_id', options.sinceId.toString());
|
||||
const query = params.toString();
|
||||
const result = await api.get(`/jobs/${jobId}/tasks/${taskId}/logs${query ? '?' + query : ''}`, options);
|
||||
// Handle both old format (array) and new format (object with logs, last_id, limit)
|
||||
if (Array.isArray(result)) {
|
||||
return { logs: result, last_id: result.length > 0 ? result[result.length - 1].id : 0, limit: options.limit || 100 };
|
||||
}
|
||||
return result;
|
||||
});
|
||||
},
|
||||
|
||||
async getTaskSteps(jobId, taskId, options = {}) {
|
||||
return api.get(`/jobs/${jobId}/tasks/${taskId}/steps`, options);
|
||||
},
|
||||
|
||||
// New unified client WebSocket - DEPRECATED: Use wsManager from websocket.js instead
|
||||
// This is kept for backwards compatibility but should not be used
|
||||
streamClientWebSocket() {
|
||||
console.warn('streamClientWebSocket() is deprecated - use wsManager from websocket.js instead');
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsHost = window.location.host;
|
||||
const url = `${wsProtocol}//${wsHost}${API_BASE}/ws`;
|
||||
return new WebSocket(url);
|
||||
},
|
||||
|
||||
// Old WebSocket methods (to be removed after migration)
|
||||
streamTaskLogsWebSocket(jobId, taskId, lastId = 0) {
|
||||
// Convert HTTP to WebSocket URL
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsHost = window.location.host;
|
||||
const url = `${wsProtocol}//${wsHost}${API_BASE}/jobs/${jobId}/tasks/${taskId}/logs/ws?last_id=${lastId}`;
|
||||
return new WebSocket(url);
|
||||
},
|
||||
|
||||
streamJobsWebSocket() {
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsHost = window.location.host;
|
||||
const url = `${wsProtocol}//${wsHost}${API_BASE}/jobs/ws-old`;
|
||||
return new WebSocket(url);
|
||||
},
|
||||
|
||||
streamJobWebSocket(jobId) {
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsHost = window.location.host;
|
||||
const url = `${wsProtocol}//${wsHost}${API_BASE}/jobs/${jobId}/ws`;
|
||||
return new WebSocket(url);
|
||||
},
|
||||
|
||||
async retryTask(jobId, taskId) {
|
||||
return api.post(`/jobs/${jobId}/tasks/${taskId}/retry`);
|
||||
},
|
||||
|
||||
async getMetadata(jobId) {
|
||||
return api.get(`/jobs/${jobId}/metadata`);
|
||||
},
|
||||
|
||||
async getTasks(jobId, options = {}) {
|
||||
const key = getCacheKey(`/jobs/${jobId}/tasks`, options);
|
||||
return debounceRequest(key, () => {
|
||||
const params = new URLSearchParams();
|
||||
if (options.limit) params.append('limit', options.limit.toString());
|
||||
if (options.offset) params.append('offset', options.offset.toString());
|
||||
if (options.status) params.append('status', options.status);
|
||||
if (options.frameStart) params.append('frame_start', options.frameStart.toString());
|
||||
if (options.frameEnd) params.append('frame_end', options.frameEnd.toString());
|
||||
if (options.sort) params.append('sort', options.sort);
|
||||
const query = params.toString();
|
||||
return api.get(`/jobs/${jobId}/tasks${query ? '?' + query : ''}`, options);
|
||||
});
|
||||
},
|
||||
|
||||
async getTasksSummary(jobId, options = {}) {
|
||||
const key = getCacheKey(`/jobs/${jobId}/tasks/summary`, options);
|
||||
return debounceRequest(key, () => {
|
||||
const params = new URLSearchParams();
|
||||
if (options.limit) params.append('limit', options.limit.toString());
|
||||
if (options.offset) params.append('offset', options.offset.toString());
|
||||
if (options.status) params.append('status', options.status);
|
||||
if (options.sort) params.append('sort', options.sort);
|
||||
const query = params.toString();
|
||||
return api.get(`/jobs/${jobId}/tasks/summary${query ? '?' + query : ''}`, options);
|
||||
});
|
||||
},
|
||||
|
||||
async batchGetJobs(jobIds) {
|
||||
// Sort jobIds for consistent cache key
|
||||
const sortedIds = [...jobIds].sort((a, b) => a - b);
|
||||
const key = getCacheKey('/jobs/batch', { job_ids: sortedIds.join(',') });
|
||||
return debounceRequest(key, () => {
|
||||
return api.post('/jobs/batch', { job_ids: jobIds });
|
||||
});
|
||||
},
|
||||
|
||||
async batchGetTasks(jobId, taskIds) {
|
||||
// Sort taskIds for consistent cache key
|
||||
const sortedIds = [...taskIds].sort((a, b) => a - b);
|
||||
const key = getCacheKey(`/jobs/${jobId}/tasks/batch`, { task_ids: sortedIds.join(',') });
|
||||
return debounceRequest(key, () => {
|
||||
return api.post(`/jobs/${jobId}/tasks/batch`, { task_ids: taskIds });
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export const runners = {
|
||||
// Non-admin runner list removed - use admin.listRunners() instead
|
||||
};
|
||||
|
||||
export const admin = {
|
||||
async generateAPIKey(name, description, scope) {
|
||||
const data = { name, scope };
|
||||
if (description) data.description = description;
|
||||
return api.post('/admin/runners/api-keys', data);
|
||||
},
|
||||
|
||||
async listAPIKeys() {
|
||||
return api.get('/admin/runners/api-keys');
|
||||
},
|
||||
|
||||
async revokeAPIKey(keyId) {
|
||||
return api.patch(`/admin/runners/api-keys/${keyId}/revoke`);
|
||||
},
|
||||
|
||||
async deleteAPIKey(keyId) {
|
||||
return api.delete(`/admin/runners/api-keys/${keyId}`);
|
||||
},
|
||||
|
||||
async listRunners() {
|
||||
return api.get('/admin/runners');
|
||||
},
|
||||
|
||||
async verifyRunner(runnerId) {
|
||||
return api.post(`/admin/runners/${runnerId}/verify`);
|
||||
},
|
||||
|
||||
async deleteRunner(runnerId) {
|
||||
return api.delete(`/admin/runners/${runnerId}`);
|
||||
},
|
||||
|
||||
async listUsers() {
|
||||
return api.get('/admin/users');
|
||||
},
|
||||
|
||||
async getUserJobs(userId) {
|
||||
return api.get(`/admin/users/${userId}/jobs`);
|
||||
},
|
||||
|
||||
async setUserAdminStatus(userId, isAdmin) {
|
||||
return api.post(`/admin/users/${userId}/admin`, { is_admin: isAdmin });
|
||||
},
|
||||
|
||||
async getRegistrationEnabled() {
|
||||
return api.get('/admin/settings/registration');
|
||||
},
|
||||
|
||||
async setRegistrationEnabled(enabled) {
|
||||
return api.post('/admin/settings/registration', { enabled });
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,271 +0,0 @@
|
||||
// Shared WebSocket connection manager
|
||||
// All components should use this instead of creating their own connections
|
||||
|
||||
class WebSocketManager {
|
||||
constructor() {
|
||||
this.ws = null;
|
||||
this.listeners = new Map(); // Map of listener IDs to callback functions
|
||||
this.reconnectTimeout = null;
|
||||
this.reconnectDelay = 2000;
|
||||
this.isConnecting = false;
|
||||
this.listenerIdCounter = 0;
|
||||
this.verboseLogging = false; // Set to true to enable verbose WebSocket logging
|
||||
|
||||
// Track server-side channel subscriptions for re-subscription on reconnect
|
||||
this.serverSubscriptions = new Set(); // Channels we want to be subscribed to
|
||||
this.confirmedSubscriptions = new Set(); // Channels confirmed by server
|
||||
this.pendingSubscriptions = new Set(); // Channels waiting for confirmation
|
||||
}
|
||||
|
||||
connect() {
|
||||
// If already connected or connecting, don't create a new connection
|
||||
if (this.ws && (this.ws.readyState === WebSocket.CONNECTING || this.ws.readyState === WebSocket.OPEN)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isConnecting) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isConnecting = true;
|
||||
|
||||
try {
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsHost = window.location.host;
|
||||
const API_BASE = '/api';
|
||||
const url = `${wsProtocol}//${wsHost}${API_BASE}/jobs/ws`;
|
||||
|
||||
this.ws = new WebSocket(url);
|
||||
|
||||
this.ws.onopen = () => {
|
||||
if (this.verboseLogging) {
|
||||
console.log('Shared WebSocket connected');
|
||||
}
|
||||
this.isConnecting = false;
|
||||
|
||||
// Re-subscribe to all channels that were previously subscribed
|
||||
this.resubscribeToChannels();
|
||||
|
||||
this.notifyListeners('open', {});
|
||||
};
|
||||
|
||||
this.ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Message received:', data.type, data.channel || 'no channel', data);
|
||||
}
|
||||
this.notifyListeners('message', data);
|
||||
} catch (error) {
|
||||
console.error('WebSocketManager: Failed to parse message:', error, 'Raw data:', event.data);
|
||||
}
|
||||
};
|
||||
|
||||
this.ws.onerror = (error) => {
|
||||
console.error('Shared WebSocket error:', error);
|
||||
this.isConnecting = false;
|
||||
this.notifyListeners('error', error);
|
||||
};
|
||||
|
||||
this.ws.onclose = (event) => {
|
||||
if (this.verboseLogging) {
|
||||
console.log('Shared WebSocket closed:', {
|
||||
code: event.code,
|
||||
reason: event.reason,
|
||||
wasClean: event.wasClean
|
||||
});
|
||||
}
|
||||
this.ws = null;
|
||||
this.isConnecting = false;
|
||||
|
||||
// Clear confirmed/pending but keep serverSubscriptions for re-subscription
|
||||
this.confirmedSubscriptions.clear();
|
||||
this.pendingSubscriptions.clear();
|
||||
|
||||
this.notifyListeners('close', event);
|
||||
|
||||
// Always retry connection if we have listeners
|
||||
if (this.listeners.size > 0) {
|
||||
if (this.reconnectTimeout) {
|
||||
clearTimeout(this.reconnectTimeout);
|
||||
}
|
||||
this.reconnectTimeout = setTimeout(() => {
|
||||
if (!this.ws || this.ws.readyState === WebSocket.CLOSED) {
|
||||
this.connect();
|
||||
}
|
||||
}, this.reconnectDelay);
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Failed to create WebSocket:', error);
|
||||
this.isConnecting = false;
|
||||
// Retry after delay
|
||||
this.reconnectTimeout = setTimeout(() => {
|
||||
this.connect();
|
||||
}, this.reconnectDelay);
|
||||
}
|
||||
}
|
||||
|
||||
subscribe(listenerId, callbacks) {
|
||||
// Generate ID if not provided
|
||||
if (!listenerId) {
|
||||
listenerId = `listener_${this.listenerIdCounter++}`;
|
||||
}
|
||||
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Subscribing listener:', listenerId, 'WebSocket state:', this.ws ? this.ws.readyState : 'no connection');
|
||||
}
|
||||
this.listeners.set(listenerId, callbacks);
|
||||
|
||||
// Connect if not already connected
|
||||
if (!this.ws || this.ws.readyState === WebSocket.CLOSED) {
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: WebSocket not connected, connecting...');
|
||||
}
|
||||
this.connect();
|
||||
}
|
||||
|
||||
// If already open, notify immediately
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN && callbacks.open) {
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: WebSocket already open, calling open callback for listener:', listenerId);
|
||||
}
|
||||
// Use setTimeout to ensure this happens after the listener is registered
|
||||
setTimeout(() => {
|
||||
if (callbacks.open) {
|
||||
callbacks.open();
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
return listenerId;
|
||||
}
|
||||
|
||||
unsubscribe(listenerId) {
|
||||
this.listeners.delete(listenerId);
|
||||
|
||||
// If no more listeners, we could close the connection, but let's keep it open
|
||||
// in case other components need it
|
||||
}
|
||||
|
||||
send(data) {
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Sending message:', data);
|
||||
}
|
||||
this.ws.send(JSON.stringify(data));
|
||||
} else {
|
||||
console.warn('WebSocketManager: Cannot send message - connection not open. State:', this.ws ? this.ws.readyState : 'no connection', 'Message:', data);
|
||||
}
|
||||
}
|
||||
|
||||
notifyListeners(eventType, data) {
|
||||
this.listeners.forEach((callbacks) => {
|
||||
if (callbacks[eventType]) {
|
||||
try {
|
||||
callbacks[eventType](data);
|
||||
} catch (error) {
|
||||
console.error('Error in WebSocket listener:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getReadyState() {
|
||||
return this.ws ? this.ws.readyState : WebSocket.CLOSED;
|
||||
}
|
||||
|
||||
// Subscribe to a server-side channel (will be re-subscribed on reconnect)
|
||||
subscribeToChannel(channel) {
|
||||
if (this.serverSubscriptions.has(channel)) {
|
||||
// Already subscribed or pending
|
||||
return;
|
||||
}
|
||||
|
||||
this.serverSubscriptions.add(channel);
|
||||
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
if (!this.confirmedSubscriptions.has(channel) && !this.pendingSubscriptions.has(channel)) {
|
||||
this.pendingSubscriptions.add(channel);
|
||||
this.send({ type: 'subscribe', channel });
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Subscribing to channel:', channel);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Unsubscribe from a server-side channel (won't be re-subscribed on reconnect)
|
||||
unsubscribeFromChannel(channel) {
|
||||
this.serverSubscriptions.delete(channel);
|
||||
this.confirmedSubscriptions.delete(channel);
|
||||
this.pendingSubscriptions.delete(channel);
|
||||
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
||||
this.send({ type: 'unsubscribe', channel });
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Unsubscribing from channel:', channel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mark a channel subscription as confirmed (call this when server confirms)
|
||||
confirmSubscription(channel) {
|
||||
this.pendingSubscriptions.delete(channel);
|
||||
this.confirmedSubscriptions.add(channel);
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Subscription confirmed for channel:', channel);
|
||||
}
|
||||
}
|
||||
|
||||
// Mark a channel subscription as failed (call this when server rejects)
|
||||
failSubscription(channel) {
|
||||
this.pendingSubscriptions.delete(channel);
|
||||
this.serverSubscriptions.delete(channel);
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Subscription failed for channel:', channel);
|
||||
}
|
||||
}
|
||||
|
||||
// Check if subscribed to a channel
|
||||
isSubscribedToChannel(channel) {
|
||||
return this.confirmedSubscriptions.has(channel);
|
||||
}
|
||||
|
||||
// Re-subscribe to all channels after reconnect
|
||||
resubscribeToChannels() {
|
||||
if (this.serverSubscriptions.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.verboseLogging) {
|
||||
console.log('WebSocketManager: Re-subscribing to channels:', Array.from(this.serverSubscriptions));
|
||||
}
|
||||
|
||||
for (const channel of this.serverSubscriptions) {
|
||||
if (!this.pendingSubscriptions.has(channel)) {
|
||||
this.pendingSubscriptions.add(channel);
|
||||
this.send({ type: 'subscribe', channel });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
if (this.reconnectTimeout) {
|
||||
clearTimeout(this.reconnectTimeout);
|
||||
this.reconnectTimeout = null;
|
||||
}
|
||||
if (this.ws) {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
this.listeners.clear();
|
||||
this.serverSubscriptions.clear();
|
||||
this.confirmedSubscriptions.clear();
|
||||
this.pendingSubscriptions.clear();
|
||||
}
|
||||
}
|
||||
|
||||
// Export singleton instance
|
||||
export const wsManager = new WebSocketManager();
|
||||
|
||||
95
web/static/admin.js
Normal file
95
web/static/admin.js
Normal file
@@ -0,0 +1,95 @@
|
||||
(function () {
|
||||
const msgEl = document.getElementById("admin-message");
|
||||
const errEl = document.getElementById("admin-error");
|
||||
const saveRegBtn = document.getElementById("save-registration");
|
||||
const regCheckbox = document.getElementById("registration-enabled");
|
||||
const createKeyBtn = document.getElementById("create-api-key");
|
||||
|
||||
function showMessage(msg) {
|
||||
msgEl.textContent = msg || "";
|
||||
msgEl.classList.toggle("hidden", !msg);
|
||||
}
|
||||
function showError(msg) {
|
||||
errEl.textContent = msg || "";
|
||||
errEl.classList.toggle("hidden", !msg);
|
||||
}
|
||||
|
||||
async function request(url, method, payload) {
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: payload ? JSON.stringify(payload) : undefined,
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) throw new Error(data.error || "Request failed");
|
||||
return data;
|
||||
}
|
||||
|
||||
function refreshAll() {
|
||||
if (!window.htmx) return window.location.reload();
|
||||
htmx.ajax("GET", "/ui/fragments/admin/runners", "#admin-runners");
|
||||
htmx.ajax("GET", "/ui/fragments/admin/users", "#admin-users");
|
||||
htmx.ajax("GET", "/ui/fragments/admin/apikeys", "#admin-apikeys");
|
||||
}
|
||||
|
||||
if (saveRegBtn && regCheckbox) {
|
||||
saveRegBtn.addEventListener("click", async () => {
|
||||
showError("");
|
||||
try {
|
||||
await request("/api/admin/settings/registration", "POST", { enabled: regCheckbox.checked });
|
||||
showMessage("Registration setting saved.");
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (createKeyBtn) {
|
||||
createKeyBtn.addEventListener("click", async () => {
|
||||
const name = prompt("API key name:");
|
||||
if (!name) return;
|
||||
showError("");
|
||||
try {
|
||||
const data = await request("/api/admin/runners/api-keys", "POST", { name, scope: "manager" });
|
||||
showMessage(`New API key created: ${data.key}`);
|
||||
refreshAll();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", async (e) => {
|
||||
const deleteRunner = e.target.closest("[data-delete-runner]");
|
||||
const setAdmin = e.target.closest("[data-set-admin]");
|
||||
const revokeKey = e.target.closest("[data-revoke-apikey]");
|
||||
const deleteKey = e.target.closest("[data-delete-apikey]");
|
||||
if (!deleteRunner && !setAdmin && !revokeKey && !deleteKey) return;
|
||||
|
||||
showError("");
|
||||
try {
|
||||
if (deleteRunner) {
|
||||
const id = deleteRunner.getAttribute("data-delete-runner");
|
||||
if (!confirm("Delete this runner?")) return;
|
||||
await request(`/api/admin/runners/${id}`, "DELETE");
|
||||
}
|
||||
if (setAdmin) {
|
||||
const id = setAdmin.getAttribute("data-set-admin");
|
||||
const value = setAdmin.getAttribute("data-admin-value") === "true";
|
||||
await request(`/api/admin/users/${id}/admin`, "POST", { is_admin: value });
|
||||
}
|
||||
if (revokeKey) {
|
||||
const id = revokeKey.getAttribute("data-revoke-apikey");
|
||||
await request(`/api/admin/runners/api-keys/${id}/revoke`, "PATCH");
|
||||
}
|
||||
if (deleteKey) {
|
||||
const id = deleteKey.getAttribute("data-delete-apikey");
|
||||
await request(`/api/admin/runners/api-keys/${id}`, "DELETE");
|
||||
}
|
||||
refreshAll();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
});
|
||||
})();
|
||||
286
web/static/job_new.js
Normal file
286
web/static/job_new.js
Normal file
@@ -0,0 +1,286 @@
|
||||
(function () {
|
||||
const uploadForm = document.getElementById("upload-analyze-form");
|
||||
const configForm = document.getElementById("job-config-form");
|
||||
const fileInput = document.getElementById("source-file");
|
||||
const statusEl = document.getElementById("upload-status");
|
||||
const errorEl = document.getElementById("job-create-error");
|
||||
const blendVersionEl = document.getElementById("blender-version");
|
||||
const mainBlendWrapper = document.getElementById("main-blend-wrapper");
|
||||
const mainBlendSelect = document.getElementById("main-blend-select");
|
||||
const metadataPreview = document.getElementById("metadata-preview");
|
||||
const configSection = document.getElementById("job-config-section");
|
||||
const uploadSection = document.getElementById("job-upload-section");
|
||||
const uploadSubmitBtn = uploadForm.querySelector('button[type="submit"]');
|
||||
const stepUpload = document.getElementById("step-upload");
|
||||
const stepConfig = document.getElementById("step-config");
|
||||
const nameInput = document.getElementById("job-name");
|
||||
const frameStartInput = document.getElementById("frame-start");
|
||||
const frameEndInput = document.getElementById("frame-end");
|
||||
const outputFormatInput = document.getElementById("output-format");
|
||||
const unhideObjectsInput = document.getElementById("unhide-objects");
|
||||
const enableExecutionInput = document.getElementById("enable-execution");
|
||||
|
||||
let sessionID = "";
|
||||
let pollTimer = null;
|
||||
let uploadInProgress = false;
|
||||
|
||||
function showError(msg) {
|
||||
errorEl.textContent = msg || "";
|
||||
errorEl.classList.toggle("hidden", !msg);
|
||||
}
|
||||
|
||||
function showStatus(msg) {
|
||||
statusEl.classList.remove("hidden");
|
||||
statusEl.innerHTML = `<p>${msg}</p>`;
|
||||
}
|
||||
|
||||
function setUploadBusy(busy) {
|
||||
uploadInProgress = busy;
|
||||
if (!uploadSubmitBtn) return;
|
||||
uploadSubmitBtn.disabled = busy;
|
||||
}
|
||||
|
||||
function setStep(step) {
|
||||
const uploadActive = step === 1;
|
||||
stepUpload.classList.toggle("active", uploadActive);
|
||||
stepUpload.classList.toggle("complete", !uploadActive);
|
||||
stepConfig.classList.toggle("active", !uploadActive);
|
||||
uploadSection.classList.toggle("hidden", !uploadActive);
|
||||
configSection.classList.toggle("hidden", uploadActive);
|
||||
}
|
||||
|
||||
function fileNameToJobName(fileName) {
|
||||
const stem = (fileName || "Render Job").replace(/\.[^/.]+$/, "");
|
||||
return stem.trim() || "Render Job";
|
||||
}
|
||||
|
||||
function prefillFromMetadata(status, fileName) {
|
||||
const metadata = status.metadata || {};
|
||||
const render = metadata.render_settings || {};
|
||||
|
||||
nameInput.value = fileNameToJobName(fileName || status.file_name);
|
||||
frameStartInput.value = Number.isFinite(metadata.frame_start) ? metadata.frame_start : 1;
|
||||
frameEndInput.value = Number.isFinite(metadata.frame_end) ? metadata.frame_end : 250;
|
||||
|
||||
if (render.output_format && outputFormatInput.querySelector(`option[value="${render.output_format}"]`)) {
|
||||
outputFormatInput.value = render.output_format;
|
||||
} else {
|
||||
outputFormatInput.value = "EXR";
|
||||
}
|
||||
|
||||
if (metadata.blender_version && blendVersionEl.querySelector(`option[value="${metadata.blender_version}"]`)) {
|
||||
blendVersionEl.value = metadata.blender_version;
|
||||
} else {
|
||||
blendVersionEl.value = "";
|
||||
}
|
||||
|
||||
unhideObjectsInput.checked = Boolean(metadata.unhide_objects);
|
||||
enableExecutionInput.checked = Boolean(metadata.enable_execution);
|
||||
|
||||
const scenes = metadata.scene_info || {};
|
||||
metadataPreview.innerHTML = `
|
||||
<div class="metadata-grid">
|
||||
<div><strong>Detected file:</strong> ${status.file_name || fileName || "-"}</div>
|
||||
<div><strong>Frames:</strong> ${metadata.frame_start ?? "-"} - ${metadata.frame_end ?? "-"}</div>
|
||||
<div><strong>Render engine:</strong> ${render.engine || "-"}</div>
|
||||
<div><strong>Resolution:</strong> ${render.resolution_x || "-"} x ${render.resolution_y || "-"}</div>
|
||||
<div><strong>Frame rate:</strong> ${render.frame_rate || "-"}</div>
|
||||
<div><strong>Objects:</strong> ${scenes.object_count ?? "-"}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function loadBlenderVersions() {
|
||||
try {
|
||||
const res = await fetch("/api/blender/versions", { credentials: "include" });
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
const versions = data.versions || [];
|
||||
versions.slice(0, 30).forEach((v) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = v.full;
|
||||
option.textContent = v.full;
|
||||
blendVersionEl.appendChild(option);
|
||||
});
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
function uploadFile(mainBlendFile) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) {
|
||||
reject(new Error("Select a file first"));
|
||||
return;
|
||||
}
|
||||
const lowerName = file.name.toLowerCase();
|
||||
const isAccepted = lowerName.endsWith(".blend") || lowerName.endsWith(".zip");
|
||||
if (!isAccepted) {
|
||||
reject(new Error("Only .blend or .zip files are supported."));
|
||||
return;
|
||||
}
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
if (mainBlendFile) {
|
||||
fd.append("main_blend_file", mainBlendFile);
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", "/api/jobs/upload", true);
|
||||
xhr.withCredentials = true;
|
||||
xhr.upload.addEventListener("progress", (e) => {
|
||||
if (!e.lengthComputable) return;
|
||||
const pct = Math.round((e.loaded / e.total) * 100);
|
||||
showStatus(`Uploading: ${pct}%`);
|
||||
});
|
||||
xhr.onload = () => {
|
||||
try {
|
||||
const data = JSON.parse(xhr.responseText || "{}");
|
||||
if (xhr.status >= 400) {
|
||||
reject(new Error(data.error || "Upload failed"));
|
||||
return;
|
||||
}
|
||||
resolve(data);
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
};
|
||||
xhr.onerror = () => reject(new Error("Upload failed"));
|
||||
xhr.send(fd);
|
||||
});
|
||||
}
|
||||
|
||||
async function pollUploadStatus() {
|
||||
if (!sessionID) return null;
|
||||
const res = await fetch(`/api/jobs/upload/status?session_id=${encodeURIComponent(sessionID)}`, { credentials: "include" });
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Upload status check failed");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
async function createJob(payload) {
|
||||
const res = await fetch("/api/jobs", {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Job creation failed");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
async function runSubmission(mainBlendFile) {
|
||||
showError("");
|
||||
setStep(1);
|
||||
configSection.classList.add("hidden");
|
||||
metadataPreview.innerHTML = "";
|
||||
|
||||
const upload = await uploadFile(mainBlendFile);
|
||||
sessionID = upload.session_id;
|
||||
showStatus("Upload complete. Processing...");
|
||||
|
||||
clearInterval(pollTimer);
|
||||
await new Promise((resolve, reject) => {
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
const status = await pollUploadStatus();
|
||||
if (!status) return;
|
||||
showStatus(`${status.message || status.status} (${Math.round((status.progress || 0) * 100)}%)`);
|
||||
|
||||
if (status.status === "select_blend") {
|
||||
clearInterval(pollTimer);
|
||||
mainBlendSelect.innerHTML = "";
|
||||
(status.blend_files || []).forEach((path) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = path;
|
||||
option.textContent = path;
|
||||
mainBlendSelect.appendChild(option);
|
||||
});
|
||||
mainBlendWrapper.classList.remove("hidden");
|
||||
reject(new Error("Select a main blend file and submit again."));
|
||||
return;
|
||||
}
|
||||
|
||||
if (status.status === "error") {
|
||||
clearInterval(pollTimer);
|
||||
reject(new Error(status.error || "Upload processing failed"));
|
||||
return;
|
||||
}
|
||||
|
||||
if (status.status === "completed") {
|
||||
clearInterval(pollTimer);
|
||||
prefillFromMetadata(status, fileInput.files[0]?.name || "");
|
||||
setStep(2);
|
||||
resolve();
|
||||
}
|
||||
} catch (err) {
|
||||
clearInterval(pollTimer);
|
||||
reject(err);
|
||||
}
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
async function submitJobConfig() {
|
||||
if (!sessionID) {
|
||||
throw new Error("Upload and analyze a file first.");
|
||||
}
|
||||
|
||||
const fd = new FormData(configForm);
|
||||
const jobName = String(fd.get("name") || "").trim();
|
||||
if (!jobName) {
|
||||
throw new Error("Job name is required.");
|
||||
}
|
||||
nameInput.value = jobName;
|
||||
const payload = {
|
||||
job_type: "render",
|
||||
name: jobName,
|
||||
frame_start: Number(fd.get("frame_start")),
|
||||
frame_end: Number(fd.get("frame_end")),
|
||||
output_format: fd.get("output_format"),
|
||||
upload_session_id: sessionID,
|
||||
unhide_objects: Boolean(fd.get("unhide_objects")),
|
||||
enable_execution: Boolean(fd.get("enable_execution")),
|
||||
};
|
||||
const blenderVersion = fd.get("blender_version");
|
||||
if (blenderVersion) payload.blender_version = blenderVersion;
|
||||
|
||||
const job = await createJob(payload);
|
||||
showStatus(`Job created (#${job.id}). Redirecting...`);
|
||||
window.location.href = `/jobs/${job.id}`;
|
||||
}
|
||||
|
||||
uploadForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
if (uploadInProgress) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setUploadBusy(true);
|
||||
const selected = mainBlendWrapper.classList.contains("hidden") ? "" : mainBlendSelect.value;
|
||||
await runSubmission(selected);
|
||||
} catch (err) {
|
||||
showError(err.message || "Failed to create job");
|
||||
setUploadBusy(false);
|
||||
}
|
||||
});
|
||||
|
||||
configForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
showError("");
|
||||
await submitJobConfig();
|
||||
} catch (err) {
|
||||
showError(err.message || "Failed to create job");
|
||||
}
|
||||
});
|
||||
|
||||
setStep(1);
|
||||
loadBlenderVersions();
|
||||
})();
|
||||
428
web/static/job_show.js
Normal file
428
web/static/job_show.js
Normal file
@@ -0,0 +1,428 @@
|
||||
(function () {
|
||||
const jobID = window.location.pathname.split("/").pop();
|
||||
const progressFill = document.querySelector(".progress-fill[data-progress]");
|
||||
const progressText = document.getElementById("job-progress-text");
|
||||
const statusBadge = document.getElementById("job-status-badge");
|
||||
const tasksRefreshBtn = document.getElementById("tasks-refresh");
|
||||
const tasksFragment = document.getElementById("tasks-fragment");
|
||||
const filesRefreshBtn = document.getElementById("files-refresh");
|
||||
const filesFragment = document.getElementById("files-fragment");
|
||||
const cancelJobBtn = document.getElementById("cancel-job-btn");
|
||||
const deleteJobBtn = document.getElementById("delete-job-btn");
|
||||
const previewModal = document.getElementById("exr-preview-modal");
|
||||
const previewImage = document.getElementById("exr-preview-image");
|
||||
const previewLoading = document.getElementById("exr-preview-loading");
|
||||
const previewError = document.getElementById("exr-preview-error");
|
||||
const previewName = document.getElementById("exr-preview-name");
|
||||
let lastJobSnapshot = null;
|
||||
let lastSmartRefreshAt = 0;
|
||||
if (progressFill) {
|
||||
const value = Number(progressFill.getAttribute("data-progress") || "0");
|
||||
const bounded = Math.max(0, Math.min(100, value));
|
||||
progressFill.style.width = `${bounded}%`;
|
||||
}
|
||||
|
||||
function statusClass(status) {
|
||||
const normalized = String(status || "").toLowerCase();
|
||||
if (normalized === "completed") return "status-completed";
|
||||
if (normalized === "running") return "status-running";
|
||||
if (normalized === "failed") return "status-failed";
|
||||
if (normalized === "cancelled") return "status-cancelled";
|
||||
return "status-pending";
|
||||
}
|
||||
|
||||
function applyJobState(job) {
|
||||
if (!job) return;
|
||||
const normalizedStatus = String(job.status || "pending").toLowerCase();
|
||||
const canCancel = normalizedStatus === "pending" || normalizedStatus === "running";
|
||||
const canDelete = normalizedStatus === "completed" || normalizedStatus === "failed" || normalizedStatus === "cancelled";
|
||||
const progressValue = Math.max(0, Math.min(100, Number(job.progress || 0)));
|
||||
if (progressFill) {
|
||||
progressFill.style.width = `${progressValue}%`;
|
||||
progressFill.setAttribute("data-progress", String(Math.round(progressValue)));
|
||||
}
|
||||
if (progressText) {
|
||||
progressText.textContent = `${Math.round(progressValue)}%`;
|
||||
}
|
||||
if (statusBadge) {
|
||||
statusBadge.textContent = normalizedStatus;
|
||||
statusBadge.classList.remove("status-pending", "status-running", "status-completed", "status-failed", "status-cancelled");
|
||||
statusBadge.classList.add(statusClass(job.status));
|
||||
}
|
||||
if (cancelJobBtn) {
|
||||
cancelJobBtn.classList.toggle("hidden", !canCancel);
|
||||
}
|
||||
if (deleteJobBtn) {
|
||||
deleteJobBtn.classList.toggle("hidden", !canDelete);
|
||||
}
|
||||
}
|
||||
|
||||
function refreshTasksAndFiles() {
|
||||
if (!window.htmx) return;
|
||||
if (tasksFragment) {
|
||||
htmx.ajax("GET", `/ui/fragments/jobs/${jobID}/tasks`, "#tasks-fragment");
|
||||
}
|
||||
if (filesFragment) {
|
||||
htmx.ajax("GET", `/ui/fragments/jobs/${jobID}/files`, "#files-fragment");
|
||||
}
|
||||
lastSmartRefreshAt = Date.now();
|
||||
}
|
||||
|
||||
async function pollJobState() {
|
||||
try {
|
||||
const res = await fetch(`/api/jobs/${jobID}`, { credentials: "include" });
|
||||
if (!res.ok) return;
|
||||
const job = await res.json();
|
||||
applyJobState(job);
|
||||
|
||||
const snapshot = {
|
||||
status: String(job.status || ""),
|
||||
progress: Math.round(Number(job.progress || 0)),
|
||||
startedAt: job.started_at || "",
|
||||
completedAt: job.completed_at || "",
|
||||
};
|
||||
const changed =
|
||||
!lastJobSnapshot ||
|
||||
snapshot.status !== lastJobSnapshot.status ||
|
||||
snapshot.progress !== lastJobSnapshot.progress ||
|
||||
snapshot.startedAt !== lastJobSnapshot.startedAt ||
|
||||
snapshot.completedAt !== lastJobSnapshot.completedAt;
|
||||
lastJobSnapshot = snapshot;
|
||||
|
||||
// Smart refresh fragments only when job state changes.
|
||||
if (changed) {
|
||||
refreshTasksAndFiles();
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback while running: refresh infrequently even without visible progress deltas.
|
||||
if (snapshot.status === "running" && Date.now() - lastSmartRefreshAt > 12000) {
|
||||
refreshTasksAndFiles();
|
||||
}
|
||||
} catch (_) {
|
||||
// Keep UI usable even if polling briefly fails.
|
||||
}
|
||||
}
|
||||
|
||||
if (tasksRefreshBtn && tasksFragment && window.htmx) {
|
||||
tasksRefreshBtn.addEventListener("click", () => {
|
||||
htmx.ajax("GET", `/ui/fragments/jobs/${jobID}/tasks`, "#tasks-fragment");
|
||||
});
|
||||
}
|
||||
if (filesRefreshBtn && filesFragment && window.htmx) {
|
||||
filesRefreshBtn.addEventListener("click", () => {
|
||||
htmx.ajax("GET", `/ui/fragments/jobs/${jobID}/files`, "#files-fragment");
|
||||
});
|
||||
}
|
||||
pollJobState();
|
||||
setInterval(pollJobState, 2500);
|
||||
|
||||
async function apiRequest(url, method) {
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Request failed");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function closePreviewModal() {
|
||||
if (!previewModal) return;
|
||||
previewModal.classList.add("hidden");
|
||||
if (previewImage) {
|
||||
previewImage.classList.add("hidden");
|
||||
previewImage.removeAttribute("src");
|
||||
}
|
||||
if (previewLoading) previewLoading.classList.remove("hidden");
|
||||
if (previewError) {
|
||||
previewError.classList.add("hidden");
|
||||
previewError.textContent = "";
|
||||
}
|
||||
}
|
||||
|
||||
function openPreviewModal(url, name) {
|
||||
if (!previewModal || !previewImage) return;
|
||||
previewModal.classList.remove("hidden");
|
||||
if (previewName) previewName.textContent = name ? `File: ${name}` : "";
|
||||
if (previewLoading) previewLoading.classList.remove("hidden");
|
||||
if (previewError) {
|
||||
previewError.classList.add("hidden");
|
||||
previewError.textContent = "";
|
||||
}
|
||||
previewImage.classList.add("hidden");
|
||||
previewImage.onload = () => {
|
||||
if (previewLoading) previewLoading.classList.add("hidden");
|
||||
previewImage.classList.remove("hidden");
|
||||
};
|
||||
previewImage.onerror = () => {
|
||||
if (previewLoading) previewLoading.classList.add("hidden");
|
||||
if (previewError) {
|
||||
previewError.textContent = "Failed to load preview image.";
|
||||
previewError.classList.remove("hidden");
|
||||
}
|
||||
};
|
||||
previewImage.src = url;
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", async (e) => {
|
||||
const previewBtn = e.target.closest("[data-exr-preview-url]");
|
||||
if (previewBtn) {
|
||||
const url = previewBtn.getAttribute("data-exr-preview-url");
|
||||
const name = previewBtn.getAttribute("data-exr-preview-name");
|
||||
if (url) {
|
||||
openPreviewModal(url, name || "");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const modalClose = e.target.closest("[data-modal-close]");
|
||||
if (modalClose) {
|
||||
closePreviewModal();
|
||||
return;
|
||||
}
|
||||
|
||||
const cancelBtn = e.target.closest("[data-cancel-job]");
|
||||
const deleteBtn = e.target.closest("[data-delete-job]");
|
||||
if (!cancelBtn && !deleteBtn) return;
|
||||
const id = (cancelBtn || deleteBtn).getAttribute(cancelBtn ? "data-cancel-job" : "data-delete-job");
|
||||
try {
|
||||
if (cancelBtn) {
|
||||
if (!confirm("Cancel this job?")) return;
|
||||
await apiRequest(`/api/jobs/${id}`, "DELETE");
|
||||
} else {
|
||||
if (!confirm("Delete this job permanently?")) return;
|
||||
await apiRequest(`/api/jobs/${id}/delete`, "POST");
|
||||
window.location.href = "/jobs";
|
||||
return;
|
||||
}
|
||||
window.location.reload();
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
closePreviewModal();
|
||||
}
|
||||
});
|
||||
|
||||
const taskSelect = document.getElementById("task-log-task-id");
|
||||
const levelFilter = document.getElementById("task-log-level-filter");
|
||||
const autoRefreshToggle = document.getElementById("task-log-auto-refresh");
|
||||
const followToggle = document.getElementById("task-log-follow");
|
||||
const refreshBtn = document.getElementById("task-log-refresh");
|
||||
const copyBtn = document.getElementById("task-log-copy");
|
||||
const output = document.getElementById("task-log-output");
|
||||
const statusEl = document.getElementById("task-log-status");
|
||||
const state = {
|
||||
timer: null,
|
||||
activeTaskID: "",
|
||||
lastLogID: 0,
|
||||
logs: [],
|
||||
seenIDs: new Set(),
|
||||
};
|
||||
|
||||
function setStatus(text) {
|
||||
if (statusEl) statusEl.textContent = text;
|
||||
}
|
||||
|
||||
function levelClass(level) {
|
||||
const normalized = String(level || "INFO").toUpperCase();
|
||||
if (normalized === "ERROR") return "log-error";
|
||||
if (normalized === "WARN") return "log-warn";
|
||||
if (normalized === "DEBUG") return "log-debug";
|
||||
return "log-info";
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
if (!ts) return "--:--:--";
|
||||
const d = new Date(ts);
|
||||
if (Number.isNaN(d.getTime())) return "--:--:--";
|
||||
return d.toLocaleTimeString();
|
||||
}
|
||||
|
||||
function renderLogs() {
|
||||
if (!output) return;
|
||||
const selectedLevel = (levelFilter?.value || "").toUpperCase();
|
||||
const filtered = state.logs.filter((entry) => {
|
||||
if (!selectedLevel) return true;
|
||||
return String(entry.log_level || "").toUpperCase() === selectedLevel;
|
||||
});
|
||||
|
||||
if (filtered.length === 0) {
|
||||
output.innerHTML = '<div class="log-line empty">No logs yet.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
output.innerHTML = filtered.map((entry) => {
|
||||
const level = String(entry.log_level || "INFO").toUpperCase();
|
||||
const step = entry.step_name ? ` <span class="log-step">(${entry.step_name})</span>` : "";
|
||||
const message = String(entry.message || "").replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">");
|
||||
return `<div class="log-line">
|
||||
<span class="log-time">${formatTime(entry.created_at)}</span>
|
||||
<span class="log-level ${levelClass(level)}">${level}</span>${step}
|
||||
<span class="log-message">${message}</span>
|
||||
</div>`;
|
||||
}).join("");
|
||||
|
||||
if (followToggle?.checked) {
|
||||
output.scrollTop = output.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
function getVisibleLogs() {
|
||||
const selectedLevel = (levelFilter?.value || "").toUpperCase();
|
||||
return state.logs.filter((entry) => {
|
||||
if (!selectedLevel) return true;
|
||||
return String(entry.log_level || "").toUpperCase() === selectedLevel;
|
||||
});
|
||||
}
|
||||
|
||||
function logsToText(entries) {
|
||||
return entries.map((entry) => {
|
||||
const level = String(entry.log_level || "INFO").toUpperCase();
|
||||
const step = entry.step_name ? ` (${entry.step_name})` : "";
|
||||
return `[${formatTime(entry.created_at)}] [${level}]${step} ${entry.message || ""}`;
|
||||
}).join("\n");
|
||||
}
|
||||
|
||||
function collectTaskOptions() {
|
||||
if (!taskSelect) return;
|
||||
const buttons = document.querySelectorAll("[data-view-logs-task-id]");
|
||||
const current = taskSelect.value;
|
||||
|
||||
taskSelect.innerHTML = '<option value="">Choose a task...</option>';
|
||||
buttons.forEach((btn) => {
|
||||
const id = btn.getAttribute("data-view-logs-task-id");
|
||||
if (!id) return;
|
||||
const row = btn.closest("tr");
|
||||
const status = row?.querySelector(".status")?.textContent?.trim() || "";
|
||||
const type = row?.children?.[1]?.textContent?.trim() || "";
|
||||
const option = document.createElement("option");
|
||||
option.value = id;
|
||||
option.textContent = `#${id} ${type ? `(${type})` : ""} ${status ? `- ${status}` : ""}`.trim();
|
||||
taskSelect.appendChild(option);
|
||||
});
|
||||
|
||||
if (current && taskSelect.querySelector(`option[value="${current}"]`)) {
|
||||
taskSelect.value = current;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchLogs({ reset = false, full = false } = {}) {
|
||||
const taskID = taskSelect?.value?.trim();
|
||||
if (!taskID) {
|
||||
setStatus("Select a task to view logs.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (reset || taskID !== state.activeTaskID) {
|
||||
state.activeTaskID = taskID;
|
||||
state.lastLogID = 0;
|
||||
state.logs = [];
|
||||
state.seenIDs.clear();
|
||||
renderLogs();
|
||||
}
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.set("limit", "0"); // backend: 0 = no limit
|
||||
if (!full && state.lastLogID > 0) {
|
||||
params.set("since_id", String(state.lastLogID));
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/jobs/${jobID}/tasks/${taskID}/logs?${params.toString()}`, {
|
||||
credentials: "include",
|
||||
});
|
||||
if (!res.ok) {
|
||||
setStatus(`Failed to fetch logs (HTTP ${res.status}).`);
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = await res.json();
|
||||
const rows = Array.isArray(payload) ? payload : (payload.logs || []);
|
||||
if (rows.length > 0) {
|
||||
for (const row of rows) {
|
||||
const id = Number(row.id || 0);
|
||||
if (id > 0 && !state.seenIDs.has(id)) {
|
||||
state.seenIDs.add(id);
|
||||
state.logs.push(row);
|
||||
if (id > state.lastLogID) state.lastLogID = id;
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(payload) && Number(payload.last_id || 0) > state.lastLogID) {
|
||||
state.lastLogID = Number(payload.last_id);
|
||||
}
|
||||
}
|
||||
|
||||
setStatus(`Task #${taskID}: ${state.logs.length} log line(s).`);
|
||||
renderLogs();
|
||||
} catch (err) {
|
||||
setStatus(`Failed to fetch logs: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function restartPolling() {
|
||||
if (state.timer) {
|
||||
clearInterval(state.timer);
|
||||
state.timer = null;
|
||||
}
|
||||
if (!autoRefreshToggle?.checked) return;
|
||||
state.timer = setInterval(() => {
|
||||
if (taskSelect?.value) {
|
||||
fetchLogs();
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
if (tasksFragment) {
|
||||
tasksFragment.addEventListener("htmx:afterSwap", () => {
|
||||
collectTaskOptions();
|
||||
});
|
||||
}
|
||||
collectTaskOptions();
|
||||
|
||||
document.body.addEventListener("click", (e) => {
|
||||
const viewBtn = e.target.closest("[data-view-logs-task-id]");
|
||||
if (!viewBtn || !taskSelect) return;
|
||||
const taskID = viewBtn.getAttribute("data-view-logs-task-id");
|
||||
if (!taskID) return;
|
||||
taskSelect.value = taskID;
|
||||
fetchLogs({ reset: true, full: true });
|
||||
});
|
||||
|
||||
if (taskSelect) {
|
||||
taskSelect.addEventListener("change", () => fetchLogs({ reset: true, full: true }));
|
||||
}
|
||||
if (levelFilter) {
|
||||
levelFilter.addEventListener("change", renderLogs);
|
||||
}
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener("click", () => fetchLogs({ reset: true, full: true }));
|
||||
}
|
||||
if (copyBtn) {
|
||||
copyBtn.addEventListener("click", async () => {
|
||||
const visible = getVisibleLogs();
|
||||
if (visible.length === 0) {
|
||||
setStatus("No logs to copy.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(logsToText(visible));
|
||||
setStatus(`Copied ${visible.length} log line(s).`);
|
||||
} catch (_) {
|
||||
setStatus("Clipboard copy failed.");
|
||||
}
|
||||
});
|
||||
}
|
||||
if (autoRefreshToggle) {
|
||||
autoRefreshToggle.addEventListener("change", restartPolling);
|
||||
}
|
||||
|
||||
restartPolling();
|
||||
})();
|
||||
41
web/static/jobs.js
Normal file
41
web/static/jobs.js
Normal file
@@ -0,0 +1,41 @@
|
||||
(function () {
|
||||
async function apiRequest(url, method) {
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || "Request failed");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
document.body.addEventListener("click", async (e) => {
|
||||
const cancelBtn = e.target.closest("[data-cancel-job]");
|
||||
const deleteBtn = e.target.closest("[data-delete-job]");
|
||||
if (!cancelBtn && !deleteBtn) return;
|
||||
|
||||
try {
|
||||
if (cancelBtn) {
|
||||
const id = cancelBtn.getAttribute("data-cancel-job");
|
||||
if (!confirm("Cancel this job?")) return;
|
||||
await apiRequest(`/api/jobs/${id}`, "DELETE");
|
||||
}
|
||||
if (deleteBtn) {
|
||||
const id = deleteBtn.getAttribute("data-delete-job");
|
||||
if (!confirm("Delete this job permanently?")) return;
|
||||
await apiRequest(`/api/jobs/${id}/delete`, "POST");
|
||||
}
|
||||
if (window.htmx) {
|
||||
htmx.trigger("#jobs-fragment", "refresh");
|
||||
htmx.ajax("GET", "/ui/fragments/jobs", "#jobs-fragment");
|
||||
} else {
|
||||
window.location.reload();
|
||||
}
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
}
|
||||
});
|
||||
})();
|
||||
65
web/static/login.js
Normal file
65
web/static/login.js
Normal file
@@ -0,0 +1,65 @@
|
||||
(function () {
|
||||
const loginForm = document.getElementById("login-form");
|
||||
const registerForm = document.getElementById("register-form");
|
||||
const errorEl = document.getElementById("auth-error");
|
||||
|
||||
function setError(msg) {
|
||||
if (!errorEl) return;
|
||||
if (!msg) {
|
||||
errorEl.classList.add("hidden");
|
||||
errorEl.textContent = "";
|
||||
return;
|
||||
}
|
||||
errorEl.textContent = msg;
|
||||
errorEl.classList.remove("hidden");
|
||||
}
|
||||
|
||||
async function postJSON(url, payload) {
|
||||
const res = await fetch(url, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const body = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
throw new Error(body.error || "Request failed");
|
||||
}
|
||||
return body;
|
||||
}
|
||||
|
||||
if (loginForm) {
|
||||
loginForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
const fd = new FormData(loginForm);
|
||||
try {
|
||||
await postJSON("/api/auth/local/login", {
|
||||
username: fd.get("username"),
|
||||
password: fd.get("password"),
|
||||
});
|
||||
window.location.href = "/jobs";
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (registerForm) {
|
||||
registerForm.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
const fd = new FormData(registerForm);
|
||||
try {
|
||||
await postJSON("/api/auth/local/register", {
|
||||
name: fd.get("name"),
|
||||
email: fd.get("email"),
|
||||
password: fd.get("password"),
|
||||
});
|
||||
window.location.href = "/jobs";
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
241
web/static/style.css
Normal file
241
web/static/style.css
Normal file
@@ -0,0 +1,241 @@
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #334155;
|
||||
background: #111827;
|
||||
}
|
||||
.brand { font-weight: 700; }
|
||||
.nav { display: flex; gap: 12px; }
|
||||
.nav a { color: #cbd5e1; text-decoration: none; padding: 8px 10px; border-radius: 6px; }
|
||||
.nav a.active, .nav a:hover { background: #1f2937; color: #fff; }
|
||||
.account { display: flex; gap: 12px; align-items: center; }
|
||||
|
||||
.card {
|
||||
background: #111827;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card.narrow { max-width: 900px; margin-inline: auto; }
|
||||
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
|
||||
|
||||
.btn {
|
||||
border: 1px solid #475569;
|
||||
color: #e2e8f0;
|
||||
background: #1f2937;
|
||||
border-radius: 7px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:hover { background: #334155; }
|
||||
.btn.primary { background: #2563eb; border-color: #2563eb; color: white; }
|
||||
.btn:disabled,
|
||||
.btn[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
}
|
||||
.btn.primary:disabled,
|
||||
.btn.primary[disabled] {
|
||||
background: #1e293b;
|
||||
border-color: #475569;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.btn.danger { background: #b91c1c; border-color: #b91c1c; color: white; }
|
||||
.btn.subtle { background: transparent; }
|
||||
.btn.tiny { padding: 4px 8px; font-size: 12px; }
|
||||
|
||||
.table { width: 100%; border-collapse: collapse; }
|
||||
.table th, .table td { border-bottom: 1px solid #334155; padding: 8px; text-align: left; vertical-align: top; }
|
||||
.table th { font-size: 12px; text-transform: uppercase; color: #94a3b8; }
|
||||
.job-link,
|
||||
.job-link:visited,
|
||||
.job-link:hover,
|
||||
.job-link:active {
|
||||
color: #93c5fd;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
text-decoration-thickness: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.job-link:hover,
|
||||
.job-link:focus-visible {
|
||||
color: #bfdbfe;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
|
||||
.status { border-radius: 999px; padding: 2px 8px; font-size: 12px; }
|
||||
.status-pending { background: #7c2d12; color: #fdba74; }
|
||||
.status-running { background: #164e63; color: #67e8f9; }
|
||||
.status-completed { background: #14532d; color: #86efac; }
|
||||
.status-failed { background: #7f1d1d; color: #fca5a5; }
|
||||
.status-cancelled { background: #334155; color: #cbd5e1; }
|
||||
.status-online { background: #14532d; color: #86efac; }
|
||||
.status-offline { background: #334155; color: #cbd5e1; }
|
||||
.status-busy { background: #164e63; color: #67e8f9; }
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #1e293b;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill { height: 100%; background: #2563eb; }
|
||||
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.alert.error { background: #7f1d1d; color: #fee2e2; border: 1px solid #ef4444; }
|
||||
.alert.notice { background: #1e3a8a; color: #dbeafe; border: 1px solid #3b82f6; }
|
||||
|
||||
label { display: block; }
|
||||
input, select {
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 12px;
|
||||
background: #0f172a;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 6px;
|
||||
color: #e2e8f0;
|
||||
padding: 8px;
|
||||
}
|
||||
.stack { display: grid; gap: 8px; }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
|
||||
.auth-grid { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.check-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||||
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||
.stepper { display: flex; gap: 10px; margin-bottom: 12px; }
|
||||
.step {
|
||||
border: 1px solid #334155;
|
||||
border-radius: 999px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
.step.active {
|
||||
border-color: #2563eb;
|
||||
color: #bfdbfe;
|
||||
background: #1e3a8a;
|
||||
}
|
||||
.step.complete {
|
||||
border-color: #14532d;
|
||||
color: #86efac;
|
||||
background: #052e16;
|
||||
}
|
||||
.muted { color: #94a3b8; margin-top: 0; }
|
||||
.metadata-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin: 8px 0 12px;
|
||||
}
|
||||
.logs {
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
background: #020617;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.log-controls {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr auto auto auto auto;
|
||||
gap: 10px;
|
||||
align-items: end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.log-toggle {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.log-toggle input {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.log-lines {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
white-space: normal;
|
||||
}
|
||||
.log-line {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto 1fr;
|
||||
gap: 8px;
|
||||
align-items: start;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #1e293b;
|
||||
}
|
||||
.log-line.empty {
|
||||
display: block;
|
||||
color: #94a3b8;
|
||||
border-bottom: none;
|
||||
}
|
||||
.log-time { color: #64748b; }
|
||||
.log-level {
|
||||
border-radius: 999px;
|
||||
padding: 0 6px;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.log-info { background: #164e63; color: #67e8f9; }
|
||||
.log-warn { background: #7c2d12; color: #fdba74; }
|
||||
.log-error { background: #7f1d1d; color: #fca5a5; }
|
||||
.log-debug { background: #334155; color: #cbd5e1; }
|
||||
.log-step { color: #93c5fd; }
|
||||
.log-message {
|
||||
color: #e2e8f0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.modal-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(2, 6, 23, 0.8);
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
width: min(1100px, 94vw);
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
background: #0b1220;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
.modal-body {
|
||||
min-height: 220px;
|
||||
}
|
||||
.preview-image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 70vh;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.hidden { display: none; }
|
||||
325
web/style.css
325
web/style.css
@@ -1,325 +0,0 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Login Page */
|
||||
#login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
padding: 3rem;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-container h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.login-container p {
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.login-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Main Page */
|
||||
#main-page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background: white;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
background: white;
|
||||
padding: 0 2rem;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 1rem 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
color: #667eea;
|
||||
border-bottom-color: #667eea;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.content-page h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background: #db4437;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-google:hover {
|
||||
background: #c23321;
|
||||
}
|
||||
|
||||
.btn-discord {
|
||||
background: #5865F2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-discord:hover {
|
||||
background: #4752C4;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
/* Jobs List */
|
||||
#jobs-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.job-card {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.job-card h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.job-meta {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.job-status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.job-status.pending {
|
||||
background: #ffc107;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.job-status.running {
|
||||
background: #17a2b8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.job-status.completed {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.job-status.failed {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.job-status.cancelled {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: #667eea;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.job-actions {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Runners List */
|
||||
#runners-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.runner-card {
|
||||
background: #f8f9fa;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.runner-card h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.runner-info {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
margin-top: 1rem;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.runner-status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.runner-status.online {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.runner-status.offline {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.runner-status.busy {
|
||||
background: #ffc107;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
500: '#f97316', // orange-500
|
||||
600: '#ea580c', // orange-600
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
49
web/templates/admin.html
Normal file
49
web/templates/admin.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{{ define "page_admin" }}
|
||||
{{ $view := .Data }}
|
||||
<section class="card">
|
||||
<h1>Admin Panel</h1>
|
||||
<div class="check-row">
|
||||
<label>
|
||||
<input id="registration-enabled" type="checkbox" {{ if index $view "registration_enabled" }}checked{{ end }}>
|
||||
Allow new registrations
|
||||
</label>
|
||||
<button id="save-registration" class="btn">Save</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>Runners</h2>
|
||||
<div id="admin-runners"
|
||||
hx-get="/ui/fragments/admin/runners"
|
||||
hx-trigger="load, every 6s"
|
||||
hx-swap="innerHTML">
|
||||
<p>Loading runners...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>Users</h2>
|
||||
<div id="admin-users"
|
||||
hx-get="/ui/fragments/admin/users"
|
||||
hx-trigger="load, every 10s"
|
||||
hx-swap="innerHTML">
|
||||
<p>Loading users...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<h2>Runner API Keys</h2>
|
||||
<button id="create-api-key" class="btn">Create API Key</button>
|
||||
</div>
|
||||
<div id="admin-apikeys"
|
||||
hx-get="/ui/fragments/admin/apikeys"
|
||||
hx-trigger="load, every 10s"
|
||||
hx-swap="innerHTML">
|
||||
<p>Loading API keys...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p id="admin-message" class="alert notice hidden"></p>
|
||||
<p id="admin-error" class="alert error hidden"></p>
|
||||
{{ end }}
|
||||
48
web/templates/base.html
Normal file
48
web/templates/base.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{{ define "base" }}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ .Title }} - JiggaBlend</title>
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||||
</head>
|
||||
<body>
|
||||
{{ if .User }}
|
||||
<header class="topbar">
|
||||
<div class="brand">JiggaBlend</div>
|
||||
<nav class="nav">
|
||||
<a href="/jobs" class="{{ if eq .CurrentPath "/jobs" }}active{{ end }}">Jobs</a>
|
||||
<a href="/jobs/new" class="{{ if eq .CurrentPath "/jobs/new" }}active{{ end }}">Submit</a>
|
||||
{{ if .User.IsAdmin }}<a href="/admin" class="{{ if eq .CurrentPath "/admin" }}active{{ end }}">Admin</a>{{ end }}
|
||||
</nav>
|
||||
<div class="account">
|
||||
<span>{{ .User.Name }}</span>
|
||||
<form method="post" action="/logout">
|
||||
<button type="submit" class="btn subtle">Logout</button>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
||||
<main class="container">
|
||||
{{ if .Error }}<div class="alert error">{{ .Error }}</div>{{ end }}
|
||||
{{ if .Notice }}<div class="alert notice">{{ .Notice }}</div>{{ end }}
|
||||
{{ if eq .ContentTemplate "page_login" }}
|
||||
{{ template "page_login" . }}
|
||||
{{ else if eq .ContentTemplate "page_jobs" }}
|
||||
{{ template "page_jobs" . }}
|
||||
{{ else if eq .ContentTemplate "page_jobs_new" }}
|
||||
{{ template "page_jobs_new" . }}
|
||||
{{ else if eq .ContentTemplate "page_job_show" }}
|
||||
{{ template "page_job_show" . }}
|
||||
{{ else if eq .ContentTemplate "page_admin" }}
|
||||
{{ template "page_admin" . }}
|
||||
{{ end }}
|
||||
</main>
|
||||
|
||||
{{ if .PageScript }}<script src="{{ .PageScript }}"></script>{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
60
web/templates/job_new.html
Normal file
60
web/templates/job_new.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{{ define "page_jobs_new" }}
|
||||
<section id="job-upload-section" class="card">
|
||||
<h1>Create Render Job</h1>
|
||||
<div class="stepper">
|
||||
<div id="step-upload" class="step active">1. Upload & Analyze</div>
|
||||
<div id="step-config" class="step">2. Review & Submit</div>
|
||||
</div>
|
||||
|
||||
<form id="upload-analyze-form" class="stack">
|
||||
<label>Upload Blend/ZIP
|
||||
<input type="file" id="source-file" name="file" accept=".blend,.zip,application/zip,application/x-zip-compressed" required>
|
||||
</label>
|
||||
<label id="main-blend-wrapper" class="hidden">Main Blend (for ZIP with multiple .blend files)
|
||||
<select id="main-blend-select"></select>
|
||||
</label>
|
||||
<button type="submit" class="btn primary">Upload and Analyze</button>
|
||||
</form>
|
||||
|
||||
<div id="upload-status" class="stack hidden"></div>
|
||||
<p id="job-create-error" class="alert error hidden"></p>
|
||||
</section>
|
||||
|
||||
<section id="job-config-section" class="card hidden">
|
||||
<h2>Review Render Settings</h2>
|
||||
<p class="muted">Values are prefilled from extracted metadata; adjust before submission.</p>
|
||||
<div id="metadata-preview" class="stack"></div>
|
||||
|
||||
<form id="job-config-form" class="stack">
|
||||
<label>Job Name
|
||||
<input type="text" id="job-name" name="name" required>
|
||||
</label>
|
||||
<div class="grid-2">
|
||||
<label>Frame Start
|
||||
<input type="number" id="frame-start" name="frame_start" min="0" required>
|
||||
</label>
|
||||
<label>Frame End
|
||||
<input type="number" id="frame-end" name="frame_end" min="0" required>
|
||||
</label>
|
||||
</div>
|
||||
<label>Output Format
|
||||
<select name="output_format" id="output-format">
|
||||
<option value="EXR">EXR</option>
|
||||
<option value="EXR_264_MP4">EXR + H264 MP4</option>
|
||||
<option value="EXR_AV1_MP4">EXR + AV1 MP4</option>
|
||||
<option value="EXR_VP9_WEBM">EXR + VP9 WEBM</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Blender Version (optional)
|
||||
<select name="blender_version" id="blender-version">
|
||||
<option value="">Auto-detect from file</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="check-row">
|
||||
<label><input type="checkbox" id="unhide-objects" name="unhide_objects"> Unhide objects/collections</label>
|
||||
<label><input type="checkbox" id="enable-execution" name="enable_execution"> Enable auto-execution in Blender</label>
|
||||
</div>
|
||||
<button type="submit" class="btn primary">Create Job</button>
|
||||
</form>
|
||||
</section>
|
||||
{{ end }}
|
||||
97
web/templates/job_show.html
Normal file
97
web/templates/job_show.html
Normal file
@@ -0,0 +1,97 @@
|
||||
{{ define "page_job_show" }}
|
||||
{{ $view := .Data }}
|
||||
{{ $job := index $view "job" }}
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<h1>Job #{{ $job.ID }} - {{ $job.Name }}</h1>
|
||||
<a href="/jobs" class="btn subtle">Back</a>
|
||||
</div>
|
||||
<p>Status: <span id="job-status-badge" class="status {{ statusClass $job.Status }}">{{ $job.Status }}</span></p>
|
||||
<p>Progress: <span id="job-progress-text">{{ progressInt $job.Progress }}%</span></p>
|
||||
<div class="progress">
|
||||
<div class="progress-fill" data-progress="{{ progressInt $job.Progress }}"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{{ if $job.FrameStart }}<span>Frames: {{ derefInt $job.FrameStart }}{{ if $job.FrameEnd }}-{{ derefInt $job.FrameEnd }}{{ end }}</span>{{ end }}
|
||||
{{ if $job.OutputFormat }}<span>Format: {{ derefString $job.OutputFormat }}</span>{{ end }}
|
||||
<span>Created: {{ formatTime $job.CreatedAt }}</span>
|
||||
</div>
|
||||
<div class="section-head">
|
||||
<button id="cancel-job-btn" class="btn{{ if not (or (eq $job.Status "pending") (eq $job.Status "running")) }} hidden{{ end }}" data-cancel-job="{{ $job.ID }}">Cancel Job</button>
|
||||
<button id="delete-job-btn" class="btn danger{{ if not (or (eq $job.Status "completed") (eq $job.Status "failed") (eq $job.Status "cancelled")) }} hidden{{ end }}" data-delete-job="{{ $job.ID }}">Delete Job</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<h2>Tasks</h2>
|
||||
<button id="tasks-refresh" class="btn tiny">Refresh tasks</button>
|
||||
</div>
|
||||
<div id="tasks-fragment"
|
||||
hx-get="/ui/fragments/jobs/{{ $job.ID }}/tasks"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<p>Loading tasks...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<h2>Files</h2>
|
||||
<div class="row">
|
||||
<a href="/api/jobs/{{ $job.ID }}/files/exr-zip" class="btn tiny">Download all EXR (.zip)</a>
|
||||
<button id="files-refresh" class="btn tiny">Refresh files</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="files-fragment"
|
||||
hx-get="/ui/fragments/jobs/{{ $job.ID }}/files"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML">
|
||||
<p>Loading files...</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="exr-preview-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="exr-preview-title">
|
||||
<div class="modal-backdrop" data-modal-close></div>
|
||||
<div class="modal-content">
|
||||
<div class="section-head">
|
||||
<h3 id="exr-preview-title">EXR Preview</h3>
|
||||
<button type="button" id="exr-preview-close" class="btn tiny subtle" data-modal-close>Close</button>
|
||||
</div>
|
||||
<p id="exr-preview-name" class="muted"></p>
|
||||
<div class="modal-body">
|
||||
<img id="exr-preview-image" alt="EXR preview" class="preview-image hidden">
|
||||
<p id="exr-preview-loading" class="muted">Loading preview...</p>
|
||||
<p id="exr-preview-error" class="alert error hidden"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<h2>Task Logs</h2>
|
||||
<span id="task-log-status" class="muted">Select a task to view logs.</span>
|
||||
</div>
|
||||
<div class="log-controls">
|
||||
<label>Task
|
||||
<select id="task-log-task-id">
|
||||
<option value="">Choose a task...</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Level
|
||||
<select id="task-log-level-filter">
|
||||
<option value="">All</option>
|
||||
<option value="INFO">INFO</option>
|
||||
<option value="WARN">WARN</option>
|
||||
<option value="ERROR">ERROR</option>
|
||||
<option value="DEBUG">DEBUG</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="log-toggle"><input id="task-log-auto-refresh" type="checkbox" checked> Auto refresh</label>
|
||||
<label class="log-toggle"><input id="task-log-follow" type="checkbox" checked> Follow tail</label>
|
||||
<button id="task-log-refresh" class="btn">Refresh now</button>
|
||||
<button id="task-log-copy" class="btn subtle">Copy logs</button>
|
||||
</div>
|
||||
<div id="task-log-output" class="logs log-lines"></div>
|
||||
</section>
|
||||
{{ end }}
|
||||
16
web/templates/jobs.html
Normal file
16
web/templates/jobs.html
Normal file
@@ -0,0 +1,16 @@
|
||||
{{ define "page_jobs" }}
|
||||
<section class="card">
|
||||
<div class="section-head">
|
||||
<h1>Your Jobs</h1>
|
||||
<a href="/jobs/new" class="btn primary">New Job</a>
|
||||
</div>
|
||||
<div
|
||||
id="jobs-fragment"
|
||||
hx-get="/ui/fragments/jobs"
|
||||
hx-trigger="load, every 5s"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<p>Loading jobs...</p>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
41
web/templates/login.html
Normal file
41
web/templates/login.html
Normal file
@@ -0,0 +1,41 @@
|
||||
{{ define "page_login" }}
|
||||
<section class="card narrow">
|
||||
<h1>Sign in to JiggaBlend</h1>
|
||||
{{ $view := .Data }}
|
||||
{{ if index $view "error" }}
|
||||
<div class="alert error">Login error: {{ index $view "error" }}</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="auth-grid">
|
||||
{{ if index $view "google_enabled" }}
|
||||
<a class="btn" href="/api/auth/google/login">Continue with Google</a>
|
||||
{{ end }}
|
||||
{{ if index $view "discord_enabled" }}
|
||||
<a class="btn" href="/api/auth/discord/login">Continue with Discord</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ if index $view "local_enabled" }}
|
||||
<div class="split">
|
||||
<form id="login-form" class="stack">
|
||||
<h2>Local Login</h2>
|
||||
<label>Email or Username<input type="text" name="username" required></label>
|
||||
<label>Password<input type="password" name="password" required></label>
|
||||
<button type="submit" class="btn primary">Login</button>
|
||||
</form>
|
||||
|
||||
<form id="register-form" class="stack">
|
||||
<h2>Register</h2>
|
||||
<label>Name<input type="text" name="name" required></label>
|
||||
<label>Email<input type="email" name="email" required></label>
|
||||
<label>Password<input type="password" name="password" minlength="8" required></label>
|
||||
<button type="submit" class="btn">Register</button>
|
||||
</form>
|
||||
</div>
|
||||
{{ else }}
|
||||
<p>Local authentication is disabled.</p>
|
||||
{{ end }}
|
||||
|
||||
<p id="auth-error" class="alert error hidden"></p>
|
||||
</section>
|
||||
{{ end }}
|
||||
36
web/templates/partials/admin_apikeys.html
Normal file
36
web/templates/partials/admin_apikeys.html
Normal file
@@ -0,0 +1,36 @@
|
||||
{{ define "partial_admin_apikeys" }}
|
||||
{{ $keys := index . "keys" }}
|
||||
{{ if not $keys }}
|
||||
<p>No API keys generated yet.</p>
|
||||
{{ else }}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Scope</th>
|
||||
<th>Prefix</th>
|
||||
<th>Active</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $key := $keys }}
|
||||
<tr>
|
||||
<td>{{ $key.ID }}</td>
|
||||
<td>{{ $key.Name }}</td>
|
||||
<td>{{ $key.Scope }}</td>
|
||||
<td>{{ $key.Key }}</td>
|
||||
<td>{{ if $key.IsActive }}yes{{ else }}no{{ end }}</td>
|
||||
<td>{{ formatTime $key.CreatedAt }}</td>
|
||||
<td class="row">
|
||||
<button class="btn tiny" data-revoke-apikey="{{ $key.ID }}">Revoke</button>
|
||||
<button class="btn tiny danger" data-delete-apikey="{{ $key.ID }}">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
35
web/templates/partials/admin_runners.html
Normal file
35
web/templates/partials/admin_runners.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{{ define "partial_admin_runners" }}
|
||||
{{ $runners := index . "runners" }}
|
||||
{{ if not $runners }}
|
||||
<p>No runners registered.</p>
|
||||
{{ else }}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Host</th>
|
||||
<th>Status</th>
|
||||
<th>Priority</th>
|
||||
<th>Heartbeat</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $runner := $runners }}
|
||||
<tr>
|
||||
<td>{{ $runner.ID }}</td>
|
||||
<td>{{ $runner.Name }}</td>
|
||||
<td>{{ $runner.Hostname }}</td>
|
||||
<td><span class="status {{ statusClass $runner.Status }}">{{ $runner.Status }}</span></td>
|
||||
<td>{{ $runner.Priority }}</td>
|
||||
<td>{{ formatTime $runner.LastHeartbeat }}</td>
|
||||
<td class="row">
|
||||
<button class="btn tiny danger" data-delete-runner="{{ $runner.ID }}">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
44
web/templates/partials/admin_users.html
Normal file
44
web/templates/partials/admin_users.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{{ define "partial_admin_users" }}
|
||||
{{ $users := index . "users" }}
|
||||
{{ $currentUserID := index . "current_user_id" }}
|
||||
{{ if not $users }}
|
||||
<p>No users found.</p>
|
||||
{{ else }}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Provider</th>
|
||||
<th>Admin</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $user := $users }}
|
||||
<tr>
|
||||
<td>{{ $user.ID }}</td>
|
||||
<td>{{ $user.Name }}</td>
|
||||
<td>{{ $user.Email }}</td>
|
||||
<td>{{ if $user.OAuthProvider }}{{ $user.OAuthProvider }}{{ else }}local{{ end }}</td>
|
||||
<td>{{ if $user.IsAdmin }}yes{{ else }}no{{ end }}</td>
|
||||
<td>{{ formatTime $user.CreatedAt }}</td>
|
||||
<td class="row">
|
||||
{{ if and $user.IsAdmin (eq $user.ID $currentUserID) }}
|
||||
<button class="btn tiny" disabled title="You cannot revoke your own admin status">
|
||||
Revoke Admin
|
||||
</button>
|
||||
{{ else }}
|
||||
<button class="btn tiny" data-set-admin="{{ $user.ID }}" data-admin-value="{{ if $user.IsAdmin }}false{{ else }}true{{ end }}">
|
||||
{{ if $user.IsAdmin }}Revoke Admin{{ else }}Make Admin{{ end }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
82
web/templates/partials/job_files.html
Normal file
82
web/templates/partials/job_files.html
Normal file
@@ -0,0 +1,82 @@
|
||||
{{ define "partial_job_files" }}
|
||||
{{ $jobID := index . "job_id" }}
|
||||
{{ $files := index . "files" }}
|
||||
{{ $isAdmin := index . "is_admin" }}
|
||||
{{ $adminInputFiles := index . "admin_input_files" }}
|
||||
{{ if not $files }}
|
||||
<p>No output files found yet.</p>
|
||||
{{ else }}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
{{ if $isAdmin }}<th>Type</th>{{ end }}
|
||||
<th>Size</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $file := $files }}
|
||||
<tr>
|
||||
<td>{{ $file.ID }}</td>
|
||||
<td>{{ $file.FileName }}</td>
|
||||
{{ if $isAdmin }}<td>{{ $file.FileType }}</td>{{ end }}
|
||||
<td>{{ $file.FileSize }}</td>
|
||||
<td>{{ formatTime $file.CreatedAt }}</td>
|
||||
<td class="row">
|
||||
<a class="btn tiny" href="/api/jobs/{{ $jobID }}/files/{{ $file.ID }}/download">Download</a>
|
||||
{{ if hasSuffixFold $file.FileName ".exr" }}
|
||||
<button
|
||||
type="button"
|
||||
class="btn tiny"
|
||||
data-exr-preview-url="/api/jobs/{{ $jobID }}/files/{{ $file.ID }}/preview-exr"
|
||||
data-exr-preview-name="{{ $file.FileName }}"
|
||||
>
|
||||
Preview
|
||||
</button>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
|
||||
{{ if $isAdmin }}
|
||||
<details class="admin-context">
|
||||
<summary>Admin: context/input files</summary>
|
||||
{{ if not $adminInputFiles }}
|
||||
<p>No context/input files found.</p>
|
||||
{{ else }}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Size</th>
|
||||
<th>Created</th>
|
||||
<th>Download</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $file := $adminInputFiles }}
|
||||
<tr>
|
||||
<td>{{ $file.ID }}</td>
|
||||
<td>{{ $file.FileName }}</td>
|
||||
<td>{{ $file.FileType }}</td>
|
||||
<td>{{ $file.FileSize }}</td>
|
||||
<td>{{ formatTime $file.CreatedAt }}</td>
|
||||
<td>
|
||||
<a class="btn tiny" href="/api/jobs/{{ $jobID }}/files/{{ $file.ID }}/download">Download</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
</details>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
37
web/templates/partials/job_tasks.html
Normal file
37
web/templates/partials/job_tasks.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{{ define "partial_job_tasks" }}
|
||||
{{ $tasks := index . "tasks" }}
|
||||
{{ if not $tasks }}
|
||||
<p>No tasks yet.</p>
|
||||
{{ else }}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Type</th>
|
||||
<th>Status</th>
|
||||
<th>Frame(s)</th>
|
||||
<th>Step</th>
|
||||
<th>Retries</th>
|
||||
<th>Error</th>
|
||||
<th>Logs</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $task := $tasks }}
|
||||
<tr>
|
||||
<td>{{ $task.ID }}</td>
|
||||
<td>{{ $task.TaskType }}</td>
|
||||
<td><span class="status {{ statusClass $task.Status }}">{{ $task.Status }}</span></td>
|
||||
<td>{{ $task.Frame }}{{ if $task.FrameEnd }}-{{ derefInt $task.FrameEnd }}{{ end }}</td>
|
||||
<td>{{ if $task.CurrentStep }}{{ $task.CurrentStep }}{{ else }}-{{ end }}</td>
|
||||
<td>{{ $task.RetryCount }}</td>
|
||||
<td>{{ if $task.Error }}{{ $task.Error }}{{ else }}-{{ end }}</td>
|
||||
<td>
|
||||
<button class="btn tiny" data-view-logs-task-id="{{ $task.ID }}">View logs</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
40
web/templates/partials/jobs_table.html
Normal file
40
web/templates/partials/jobs_table.html
Normal file
@@ -0,0 +1,40 @@
|
||||
{{ define "partial_jobs_table" }}
|
||||
{{ $jobs := index . "jobs" }}
|
||||
{{ if not $jobs }}
|
||||
<p>No jobs yet. Submit one to get started.</p>
|
||||
{{ else }}
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Progress</th>
|
||||
<th>Frames</th>
|
||||
<th>Format</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{ range $job := $jobs }}
|
||||
<tr>
|
||||
<td><a class="job-link" href="/jobs/{{ $job.ID }}">{{ $job.Name }}</a></td>
|
||||
<td><span class="status {{ statusClass $job.Status }}">{{ $job.Status }}</span></td>
|
||||
<td>{{ progressInt $job.Progress }}%</td>
|
||||
<td>{{ if $job.FrameStart }}{{ derefInt $job.FrameStart }}{{ end }}{{ if $job.FrameEnd }}-{{ derefInt $job.FrameEnd }}{{ end }}</td>
|
||||
<td>{{ if $job.OutputFormat }}{{ derefString $job.OutputFormat }}{{ else }}-{{ end }}</td>
|
||||
<td>{{ formatTime $job.CreatedAt }}</td>
|
||||
<td class="row">
|
||||
{{ if or (eq $job.Status "pending") (eq $job.Status "running") }}
|
||||
<button class="btn tiny" data-cancel-job="{{ $job.ID }}">Cancel</button>
|
||||
{{ end }}
|
||||
{{ if or (eq $job.Status "completed") (eq $job.Status "failed") (eq $job.Status "cancelled") }}
|
||||
<button class="btn tiny danger" data-delete-job="{{ $job.ID }}">Delete</button>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user