From 3cd5d1c01ba25b1ba52f8a64838d4a43daf89c5c Mon Sep 17 00:00:00 2001
From: Henrik Brodin <90325907+hbrodin@users.noreply.github.com>
Date: Thu, 4 Sep 2025 08:12:20 +0200
Subject: [PATCH] Move the example-libpng button (#333)

There is now an additional button available in the Submit Task dialogue.
This enables users to easily modify values such as timeouts etc and keeps
the main ui clean.
---
 .../orchestrator/ui/static/index.html         |   5 +-
 .../orchestrator/ui/static/script.js          | 109 +++++++++---------
 2 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/orchestrator/src/buttercup/orchestrator/ui/static/index.html b/orchestrator/src/buttercup/orchestrator/ui/static/index.html
index 17e5fa00..d1b9a96d 100644
--- a/orchestrator/src/buttercup/orchestrator/ui/static/index.html
+++ b/orchestrator/src/buttercup/orchestrator/ui/static/index.html
@@ -12,7 +12,6 @@
             <h1 class="nav-title">Buttercup CRS Dashboard</h1>
             <div class="nav-buttons">
                 <button id="submit-task-btn" class="btn btn-primary">Submit Task</button>
-                <button id="submit-example-btn" class="btn btn-success">Submit example-libpng task</button>
                 <button id="refresh-btn" class="btn btn-secondary">Refresh</button>
             </div>
         </div>
@@ -151,6 +150,7 @@
                            placeholder="1800">
                 </div>
                 <div class="form-buttons">
+                    <button type="button" id="fill-example-btn" class="btn btn-success">Fill Example-libpng Values</button>
                     <button type="button" id="cancel-btn" class="btn btn-secondary">Cancel</button>
                     <button type="submit" class="btn btn-primary">Submit Task</button>
                 </div>
@@ -171,6 +171,9 @@
         </div>
     </div>
 
+    <!-- Notifications container -->
+    <div id="notifications"></div>
+    
     <script src="/static/script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/orchestrator/src/buttercup/orchestrator/ui/static/script.js b/orchestrator/src/buttercup/orchestrator/ui/static/script.js
index 3e768ec9..6366a7b5 100644
--- a/orchestrator/src/buttercup/orchestrator/ui/static/script.js
+++ b/orchestrator/src/buttercup/orchestrator/ui/static/script.js
@@ -19,7 +19,6 @@ const API_BASE = '';
 // DOM elements
 const elements = {
     submitTaskBtn: document.getElementById('submit-task-btn'),
-    submitExampleBtn: document.getElementById('submit-example-btn'),
     refreshBtn: document.getElementById('refresh-btn'),
     taskModal: document.getElementById('task-modal'),
     detailModal: document.getElementById('detail-modal'),
@@ -28,6 +27,7 @@ const elements = {
     closeModal: document.getElementById('close-modal'),
     closeDetailModal: document.getElementById('close-detail-modal'),
     taskForm: document.getElementById('task-form'),
+    fillExampleBtn: document.getElementById('fill-example-btn'),
     cancelBtn: document.getElementById('cancel-btn'),
     tasksContainer: document.getElementById('tasks-container'),
     povsContainer: document.getElementById('povs-container'),
@@ -45,10 +45,19 @@ const elements = {
     notifications: document.getElementById('notifications')
 };
 
+// Debug: Check if elements are found
+console.log('DOM elements found:', {
+    submitTaskBtn: !!elements.submitTaskBtn,
+    refreshBtn: !!elements.refreshBtn,
+    fillExampleBtn: !!elements.fillExampleBtn,
+    taskModal: !!elements.taskModal,
+    notifications: !!elements.notifications
+});
+
 // Initialize the dashboard
 document.addEventListener('DOMContentLoaded', function() {
     // Preserve button widths to prevent size changes during refresh
-    const buttons = ['refresh-btn', 'submit-task-btn', 'submit-example-btn'];
+    const buttons = ['refresh-btn', 'submit-task-btn'];
     buttons.forEach(id => {
         const button = document.getElementById(id);
         if (button) {
@@ -69,7 +78,12 @@ function setupEventListeners() {
         elements.taskModal.style.display = 'block';
     });
     
-    elements.submitExampleBtn.addEventListener('click', handleExampleTaskSubmission);
+    if (elements.fillExampleBtn) {
+        console.log('Setting up event listener for fillExampleBtn');
+        elements.fillExampleBtn.addEventListener('click', fillExampleValues);
+    } else {
+        console.error('fillExampleBtn element not found');
+    }
     
     elements.refreshBtn.addEventListener('click', loadDashboard);
     
@@ -487,67 +501,48 @@ function filterTasks() {
 }
 
 // Handle task submission
-// Handle example task submission
-async function handleExampleTaskSubmission() {
-    const exampleTaskData = {
-        challenge_repo_url: "https://github.com/tob-challenges/example-libpng",
-        challenge_repo_base_ref: "5bf8da2d7953974e5dfbd778429c3affd461f51a",
-        challenge_repo_head_ref: "challenges/lp-delta-01",
-        fuzz_tooling_url: "https://github.com/google/oss-fuzz",
-        fuzz_tooling_ref: "master",
-        fuzz_tooling_project_name: "libpng",
-        duration: 1800
-    };
-    
-    // Get submit button and show loading state
-    const submitBtn = elements.submitExampleBtn;
-    const originalText = submitBtn.textContent;
-    submitBtn.disabled = true;
-    submitBtn.innerHTML = '<span class="spinner"></span> Submitting...';
+// Fill form with example values
+function fillExampleValues() {
+    console.log('fillExampleValues function called');
     
     try {
-        const response = await fetch(`${API_BASE}/webhook/trigger_task`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(exampleTaskData)
-        });
+        // Fill in the form fields with example libpng values
+        const fields = {
+            'challenge-repo-url': 'https://github.com/tob-challenges/example-libpng',
+            'challenge-repo-base-ref': '5bf8da2d7953974e5dfbd778429c3affd461f51a',
+            'challenge-repo-head-ref': 'challenges/lp-delta-01',
+            'fuzz-tooling-url': 'https://github.com/google/oss-fuzz',
+            'fuzz-tooling-ref': 'master',
+            'fuzz-tooling-project-name': 'libpng',
+            'duration': '1800'
+        };
         
-        const result = await response.json();
-        console.log('Example task submission response:', result);
-        console.log('Response message:', result.message);
-        console.log('Response color:', result.color);
-        
-        if (response.ok) {
-            // Check if the response indicates a CRS submission failure or setup failure
-            if (result.message && (result.message.includes('failed to submit to CRS') || result.message.includes('failed during setup'))) {
-                console.log('Example task creation/submission failed, showing error notification');
-                // Task was created but failed - show notification with proper color
-                showNotification(result.message, null, result.color);
-                
-                // Force refresh failed tasks and main tasks list
-                setTimeout(async () => {
-                    await forceRefreshFailedTasks();
-                }, 1000);
+        for (const [fieldId, value] of Object.entries(fields)) {
+            const field = document.getElementById(fieldId);
+            if (field) {
+                field.value = value;
+                console.log(`Set ${fieldId} to ${value}`);
             } else {
-                // Complete success
-                showNotification(result.message || 'Example libpng task submitted successfully!', 'success');
-                
-                // Refresh dashboard after a short delay
-                setTimeout(loadDashboard, 1000);
+                console.error(`Field ${fieldId} not found`);
             }
-        } else {
-            const error = await response.json();
-            showNotification(`Error: ${error.message || 'Failed to submit example task'}`, 'error');
         }
+        
+        // Handle checkbox separately
+        const harnessesIncluded = document.getElementById('harnesses-included');
+        if (harnessesIncluded) {
+            harnessesIncluded.checked = true;
+            console.log('Set harnesses-included to checked');
+        } else {
+            console.error('Field harnesses-included not found');
+        }
+        
+        // Show a brief notification that values were filled
+        showNotification('Example-libpng values filled in. You can now modify them as needed.', 'success');
+        console.log('Notification shown');
+        
     } catch (error) {
-        console.error('Error submitting example task:', error);
-        showNotification('Network error occurred', 'error');
-    } finally {
-        // Restore button state
-        submitBtn.disabled = false;
-        submitBtn.textContent = originalText;
+        console.error('Error in fillExampleValues:', error);
+        showNotification('Error filling example values: ' + error.message, 'error');
     }
 }