Enh(batch monitor): Various improvements

Author: klieret

codeclash/viewer/app.py

@@ -1384,7 +1384,8 @@ def batch_api_jobs():
         hours_back = request.args.get("hours_back", default=24, type=int)
         monitor = AWSBatchMonitor(job_queue="codeclash-queue", region="us-east-1", logs_base_dir=LOG_BASE_DIR)
         jobs = monitor.get_formatted_jobs(hours_back=hours_back)
-        return jsonify({"success": True, "jobs": jobs})
+        total_cpus = monitor.get_total_cpus_running()
+        return jsonify({"success": True, "jobs": jobs, "total_cpus_running": total_cpus})
     except Exception as e:
         logger.error(f"Error fetching AWS Batch jobs: {e}", exc_info=True)
         return jsonify({"success": False, "error": str(e)}), 500

codeclash/viewer/app_aws.py

@@ -221,3 +221,52 @@ def get_formatted_jobs(self, *, limit: int | None = None, hours_back: int = 24)
         """
         jobs = self.list_jobs(limit=limit, hours_back=hours_back)
         return [self.format_job_for_display(job) for job in jobs]
+
+    def get_total_cpus_running(self) -> int:
+        """Get total number of vCPUs currently allocated in the compute environment"""
+        try:
+            # Get the job queue details to find the compute environment
+            queue_response = self.batch_client.describe_job_queues(jobQueues=[self.job_queue])
+
+            if not queue_response.get("jobQueues"):
+                return 0
+
+            # Get compute environments from the job queue
+            compute_env_orders = queue_response["jobQueues"][0].get("computeEnvironmentOrder", [])
+
+            if not compute_env_orders:
+                return 0
+
+            total_vcpus = 0
+
+            # Get details for each compute environment
+            for env_order in compute_env_orders:
+                compute_env_name = env_order.get("computeEnvironment")
+                if not compute_env_name:
+                    continue
+
+                # Extract just the name from the ARN if needed
+                env_name = compute_env_name.split("/")[-1]
+
+                env_response = self.batch_client.describe_compute_environments(computeEnvironments=[env_name])
+
+                for env in env_response.get("computeEnvironments", []):
+                    # Get the actual allocated vCPUs from the compute resources
+                    compute_resources = env.get("computeResources", {})
+
+                    # Use desiredvCpus if available (what's currently allocated)
+                    # Otherwise fall back to maxvCpus
+                    desired_vcpus = compute_resources.get("desiredvCpus")
+                    if desired_vcpus is not None:
+                        total_vcpus += desired_vcpus
+                    else:
+                        # If desired is not available, we can't get current allocation
+                        # This might happen with FARGATE environments
+                        max_vcpus = compute_resources.get("maxvCpus", 0)
+                        total_vcpus += max_vcpus
+
+            return total_vcpus
+
+        except Exception as e:
+            logger.warning(f"Failed to get vCPU information from compute environment: {e}", exc_info=True)
+            return 0

codeclash/viewer/templates/batch.html

@@ -111,6 +111,7 @@
             font-size: 0.875rem;
             text-transform: uppercase;
             letter-spacing: 0.05em;
+            white-space: nowrap;
         }
 
         .batch-table td {
@@ -124,6 +125,11 @@
             text-align: right;
         }
 
+        .batch-table td.job-name-cell,
+        .batch-table td.job-id-cell {
+            white-space: normal;
+        }
+
         .batch-table tbody tr {
             transition: all 0.2s ease;
             border-left: 3px solid transparent;
@@ -173,8 +179,18 @@
         .job-id,
         .job-name {
             font-family: 'Courier New', monospace;
-            font-size: 0.9rem;
+            font-size: 0.7rem;
             text-align: left;
+            word-break: break-all;
+            white-space: normal;
+        }
+
+        .job-name {
+            max-width: 40ch;
+        }
+
+        .job-id {
+            max-width: 20ch;
         }
 
         .copy-cell {
@@ -510,14 +526,6 @@
             accent-color: var(--accent-color);
         }
 
-        .search-hidden {
-            position: absolute;
-            left: -9999px;
-            width: 1px;
-            height: 1px;
-            overflow: hidden;
-        }
-
         .update-info {
             color: var(--text-muted);
             font-size: 0.85rem;
@@ -593,6 +601,30 @@
             color: var(--text-primary);
         }
 
+        .cpu-counter {
+            background: var(--bg-tertiary);
+            padding: 0.75rem;
+            border-radius: 0.375rem;
+            border-left: 3px solid var(--accent-color);
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
+
+        .cpu-counter-label {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            color: var(--text-secondary);
+            font-weight: 600;
+            letter-spacing: 0.05em;
+        }
+
+        .cpu-counter-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--accent-color);
+        }
+
         .rounds-count {
             display: inline-block;
             background-color: var(--accent-color);
@@ -715,12 +747,14 @@ <h2>Bulk Actions</h2>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let allJobs = [];
+        // Default sort: most recently submitted jobs first (descending by timestamp)
         let currentSort = { column: 'created_at', ascending: false };
         let statusFilter = '';
         let roundsFilter = 'any';
         let timeRangeHours = 24;
         let lastRefreshTime = null;
         let selectedJobs = new Set();
+        let totalCpusRunning = 0;
 
         function updateStatusCounter() {
             const statusCounts = {
@@ -742,6 +776,14 @@ <h2>Bulk Actions</h2>
             const grid = document.getElementById('status-counter-grid');
             let html = '';
 
+            // Add CPU counter first
+            html += `
+                <div class="cpu-counter">
+                    <div class="cpu-counter-label"><i class="bi bi-cpu"></i> CPUs Running</div>
+                    <div class="cpu-counter-value">${totalCpusRunning} vCPUs</div>
+                </div>
+            `;
+
             Object.keys(statusCounts).forEach(status => {
                 const count = statusCounts[status];
                 html += `
@@ -762,6 +804,7 @@ <h2>Bulk Actions</h2>
 
                 if (data.success) {
                     allJobs = data.jobs;
+                    totalCpusRunning = data.total_cpus_running || 0;
                     updateStatusCounter();
                     renderJobs();
                     clearError();
@@ -869,7 +912,7 @@ <h2>Bulk Actions</h2>
                                     <input type="checkbox" class="job-checkbox" id="master-checkbox" onchange="toggleAllCheckboxes()" title="Toggle all">
                                 </th>
                                 <th class="sortable" onclick="sortBy('created_at')">
-                                    Time <i class="bi bi-arrow-down-up sort-icon"></i>
+                                    Submitted <i class="bi bi-arrow-down-up sort-icon"></i>
                                 </th>
                                 <th>Status</th>
                                 <th class="sortable" onclick="sortBy('time_running_seconds')">
@@ -893,10 +936,6 @@ <h2>Bulk Actions</h2>
                 const escapedJobId = job.job_id.replace(/'/g, "\\'");
                 const isChecked = selectedJobs.has(job.job_id) ? 'checked' : '';
 
-                // Truncate job name and ID to 30 characters for display
-                const displayJobName = job.job_name.length > 30 ? job.job_name.substring(0, 30) + '...' : job.job_name;
-                const displayJobId = job.job_id.length > 30 ? job.job_id.substring(0, 30) + '...' : job.job_id;
-
                 let roundsHtml = '<span class="rounds-unknown">-</span>';
                 if (job.round_info && Array.isArray(job.round_info) && job.round_info.length === 2) {
                     const completed = job.round_info[0];
@@ -914,23 +953,17 @@ <h2>Bulk Actions</h2>
                         <td><span class="status-tag status-${job.status}">${job.status}</span></td>
                         <td class="time-running">${job.time_running || '-'}</td>
                         <td>${roundsHtml}</td>
-                        <td>
+                        <td class="job-name-cell">
                             <div class="copy-cell">
-                                <span class="job-name" title="${escapedJobName}">
-                                    ${displayJobName}
-                                    <span class="search-hidden">${job.job_name}</span>
-                                </span>
+                                <span class="job-name">${job.job_name}</span>
                                 <button class="copy-btn" onclick="copyToClipboard('${escapedJobName}', this)" title="Copy job name">
                                     <i class="bi bi-clipboard"></i>
                                 </button>
                             </div>
                         </td>
-                        <td>
+                        <td class="job-id-cell">
                             <div class="copy-cell">
-                                <span class="job-id" title="${escapedJobId}">
-                                    ${displayJobId}
-                                    <span class="search-hidden">${job.job_id}</span>
-                                </span>
+                                <span class="job-id">${job.job_id}</span>
                                 <button class="copy-btn" onclick="copyToClipboard('${escapedJobId}', this)" title="Copy job ID">
                                     <i class="bi bi-clipboard"></i>
                                 </button>
@@ -962,7 +995,7 @@ <h2>Bulk Actions</h2>
                 currentSort.ascending = !currentSort.ascending;
             } else {
                 currentSort.column = column;
-                // Default to descending for timestamps and time_running
+                // Default to descending for timestamps and time_running (most recent/longest first)
                 currentSort.ascending = (column === 'created_at' || column === 'time_running_seconds') ? false : true;
             }
             renderJobs();
@@ -1215,7 +1248,15 @@ <h2>Bulk Actions</h2>
             });
         }
 
+        // Initialize filter variables from dropdown values (in case browser restored them)
+        function initializeFilters() {
+            statusFilter = document.getElementById('status-filter').value;
+            roundsFilter = document.getElementById('rounds-filter').value;
+            timeRangeHours = parseInt(document.getElementById('time-range-filter').value);
+        }
+
         // Initial fetch
+        initializeFilters();
         updateStatusCounterTitle();
         fetchJobs();