Enh(viewer): Improvements to batch monitor

Author: klieret

.cursor/rules/batch_monitor.mdc

@@ -33,8 +33,8 @@ There are the following statuses:
 - SUBMITTED (grey)
 - PENDING (grey)
 - RUNNABLE (grey)
-- STARTING (yellow)
-- RUNNING (faded green)
+- STARTING (cyan)
+- RUNNING (yellow)
 - SUCCEEDED (green)
 - FAILED (red)
 

codeclash/viewer/app_aws.py

@@ -37,6 +37,7 @@ def __init__(
         self.region = region
         self.logs_base_dir = logs_base_dir or Path("logs")
         self._job_id_to_folder: dict[str, str] | None = None
+        self._job_id_to_round_info: dict[str, tuple[int, int] | None] | None = None
 
     def list_jobs(self, *, limit: int | None = None) -> list[dict[str, Any]]:
         """List all jobs from AWS Batch in the last 24h"""
@@ -86,6 +87,7 @@ def format_job_for_display(self, job: dict[str, Any]) -> dict[str, Any]:
         aws_link = self._generate_aws_console_link(job_id)
         emagedoc_link = self._generate_emagedoc_link(job_id)
         s3_link = self._generate_s3_link(job_id)
+        round_info = self._get_round_info(job_id)
 
         return {
             "job_id": job_id,
@@ -98,6 +100,7 @@ def format_job_for_display(self, job: dict[str, Any]) -> dict[str, Any]:
             "aws_link": aws_link,
             "emagedoc_link": emagedoc_link,
             "s3_link": s3_link,
+            "round_info": round_info,
         }
 
     def _calculate_time_running(
@@ -140,14 +143,16 @@ def _calculate_time_running(
             return f"{hours}h {minutes}m", duration_seconds
 
     def _build_job_id_to_folder_mapping(self) -> dict[str, str]:
-        """Build mapping from AWS Batch job ID to log folder path"""
+        """Build mapping from AWS Batch job ID to log folder path and round info"""
         if self._job_id_to_folder is not None:
             return self._job_id_to_folder
 
         mapping = {}
+        round_info_mapping = {}
         if not self.logs_base_dir.exists():
             logger.warning(f"Logs directory does not exist: {self.logs_base_dir}")
             self._job_id_to_folder = mapping
+            self._job_id_to_round_info = round_info_mapping
             return mapping
 
         for metadata_file in self.logs_base_dir.rglob("metadata.json"):
@@ -157,13 +162,29 @@ def _build_job_id_to_folder_mapping(self) -> dict[str, str]:
                 if job_id:
                     folder_path = metadata_file.parent.relative_to(self.logs_base_dir)
                     mapping[job_id] = str(folder_path)
-            except (json.JSONDecodeError, OSError, KeyError) as e:
+
+                    total_rounds = metadata.get("config", {}).get("tournament", {}).get("rounds")
+                    round_stats = metadata.get("round_stats", {})
+                    completed_rounds = sum(1 for round_key in round_stats.keys() if int(round_key) > 0)
+
+                    if total_rounds is not None:
+                        round_info_mapping[job_id] = (completed_rounds, total_rounds)
+                    else:
+                        round_info_mapping[job_id] = None
+            except (json.JSONDecodeError, OSError, KeyError, ValueError) as e:
                 logger.debug(f"Failed to read metadata from {metadata_file}: {e}")
 
         self._job_id_to_folder = mapping
+        self._job_id_to_round_info = round_info_mapping
         logger.info(f"Built job ID mapping with {len(mapping)} entries")
         return mapping
 
+    def _get_round_info(self, job_id: str) -> tuple[int, int] | None:
+        """Get round info for a job"""
+        if self._job_id_to_round_info is None:
+            self._build_job_id_to_folder_mapping()
+        return self._job_id_to_round_info.get(job_id) if self._job_id_to_round_info else None
+
     def _generate_aws_console_link(self, job_id: str) -> str:
         """Generate AWS console link for a job"""
         account_id = "039984708918"

codeclash/viewer/templates/batch.html

@@ -146,13 +146,13 @@
         }
 
         .status-STARTING {
-            background: #ffc107;
-            color: #000;
+            background: #17a2b8;
+            color: #fff;
         }
 
         .status-RUNNING {
-            background: rgba(40, 167, 69, 0.3);
-            color: #28a745;
+            background: #ffc107;
+            color: #000;
         }
 
         .status-SUCCEEDED {
@@ -315,6 +315,94 @@
             font-size: 0.85rem;
             margin-left: auto;
         }
+
+        .status-counter {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 0.5rem;
+            margin-bottom: 1.5rem;
+            padding: 1rem;
+        }
+
+        .status-counter-title {
+            font-weight: 600;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .status-counter-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 0.75rem;
+        }
+
+        .status-count-item {
+            background: var(--bg-tertiary);
+            padding: 0.75rem;
+            border-radius: 0.375rem;
+            border-left: 3px solid;
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
+
+        .status-count-item.SUBMITTED,
+        .status-count-item.PENDING,
+        .status-count-item.RUNNABLE {
+            border-left-color: #6c757d;
+        }
+
+        .status-count-item.STARTING {
+            border-left-color: #17a2b8;
+        }
+
+        .status-count-item.RUNNING {
+            border-left-color: #ffc107;
+        }
+
+        .status-count-item.SUCCEEDED {
+            border-left-color: #28a745;
+        }
+
+        .status-count-item.FAILED {
+            border-left-color: #dc3545;
+        }
+
+        .status-count-label {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            color: var(--text-secondary);
+            font-weight: 600;
+            letter-spacing: 0.05em;
+        }
+
+        .status-count-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text-primary);
+        }
+
+        .rounds-count {
+            display: inline-block;
+            background-color: var(--accent-color);
+            color: #000000;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            font-size: 0.85rem;
+            font-weight: 700;
+        }
+
+        .rounds-count-warning {
+            background-color: #ffc107;
+        }
+
+        .rounds-unknown {
+            color: var(--text-muted);
+            font-style: italic;
+        }
     </style>
 </head>
 <body>
@@ -326,6 +414,16 @@ <h1><i class="bi bi-cloud"></i> AWS Batch Job Monitor</h1>
             </a>
         </div>
 
+        <div class="status-counter">
+            <div class="status-counter-title">
+                <i class="bi bi-bar-chart"></i>
+                <span>Job Status Summary (Last 24h)</span>
+            </div>
+            <div class="status-counter-grid" id="status-counter-grid">
+                <!-- Will be populated by JavaScript -->
+            </div>
+        </div>
+
         <div class="filter-container">
             <label for="status-filter">Filter by status:</label>
             <select id="status-filter" class="filter-select" onchange="applyStatusFilter()">
@@ -355,13 +453,47 @@ <h1><i class="bi bi-cloud"></i> AWS Batch Job Monitor</h1>
         let statusFilter = '';
         let lastRefreshTime = null;
 
+        function updateStatusCounter() {
+            const statusCounts = {
+                'SUBMITTED': 0,
+                'PENDING': 0,
+                'RUNNABLE': 0,
+                'STARTING': 0,
+                'RUNNING': 0,
+                'SUCCEEDED': 0,
+                'FAILED': 0
+            };
+
+            allJobs.forEach(job => {
+                if (statusCounts.hasOwnProperty(job.status)) {
+                    statusCounts[job.status]++;
+                }
+            });
+
+            const grid = document.getElementById('status-counter-grid');
+            let html = '';
+
+            Object.keys(statusCounts).forEach(status => {
+                const count = statusCounts[status];
+                html += `
+                    <div class="status-count-item ${status}">
+                        <div class="status-count-label">${status}</div>
+                        <div class="status-count-value">${count}</div>
+                    </div>
+                `;
+            });
+
+            grid.innerHTML = html;
+        }
+
         async function fetchJobs() {
             try {
                 const response = await fetch('/batch/api/jobs');
                 const data = await response.json();
 
                 if (data.success) {
                     allJobs = data.jobs;
+                    updateStatusCounter();
                     renderJobs();
                     clearError();
                     lastRefreshTime = Date.now();
@@ -434,6 +566,7 @@ <h1><i class="bi bi-cloud"></i> AWS Batch Job Monitor</h1>
                                 <th class="sortable" onclick="sortBy('time_running_seconds')">
                                     Time Running <i class="bi bi-arrow-down-up sort-icon"></i>
                                 </th>
+                                <th>Rounds</th>
                                 <th class="sortable" onclick="sortBy('job_name')">
                                     Job Name <i class="bi bi-arrow-down-up sort-icon"></i>
                                 </th>
@@ -450,11 +583,20 @@ <h1><i class="bi bi-cloud"></i> AWS Batch Job Monitor</h1>
                 const escapedJobName = job.job_name.replace(/'/g, "\\'");
                 const escapedJobId = job.job_id.replace(/'/g, "\\'");
 
+                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];
+                    const total = job.round_info[1];
+                    const warningClass = completed < total ? ' rounds-count-warning' : '';
+                    roundsHtml = `<span class="rounds-count${warningClass}">${completed}/${total}</span>`;
+                }
+
                 html += `
                     <tr>
                         <td>${job.created_at || '-'}</td>
                         <td><span class="status-tag status-${job.status}">${job.status}</span></td>
                         <td>${job.time_running || '-'}</td>
+                        <td>${roundsHtml}</td>
                         <td>
                             <div class="copy-cell">
                                 <span class="job-name">${job.job_name}</span>