Merge pull request marcpope#207 from c0dr1ver/fix/queue-duration-hours

Show hours in queue duration

Author: marcpope

src/Views/queue/index.php

@@ -1,9 +1,19 @@
 <?php
-    $avgDur = '--';
-    if ($avgSec > 0) {
-        if ($avgSec < 60) $avgDur = $avgSec . 's';
-        elseif ($avgSec < 3600) $avgDur = round($avgSec / 60) . 'm';
-        else $avgDur = round($avgSec / 3600, 1) . 'h';
+    function formatDurationLabel(int $s): string {
+        return $s >= 3600 ? floor($s / 3600) . 'h ' . floor(($s % 3600) / 60) . 'm ' . ($s % 60) . 's' : ($s >= 60 ? floor($s / 60) . 'm ' . ($s % 60) . 's' : $s . 's');
+    }
+
+    $avgDur = $avgSec > 0 ? formatDurationLabel((int) $avgSec) : '--';
+    $maxCompletedDuration = max(array_map(fn($j) => (int) ($j['duration_seconds'] ?? 0), $completed ?: [['duration_seconds' => 0]]));
+
+    function durationBarHtml(int $duration, int $maxDuration): string {
+        $pct = $maxDuration > 0 ? min(100, round(($duration / $maxDuration) * 100)) : 0;
+        $hue = 120 - round($pct * 1.2);
+        $label = formatDurationLabel($duration);
+        return '<div class="progress position-relative" style="height:20px;min-width:120px;" title="' . htmlspecialchars($label) . '">'
+            . '<div class="progress-bar" style="width:' . $pct . '%;background-color:hsl(' . $hue . ',70%,45%);"></div>'
+            . '<span class="position-absolute top-50 start-50 translate-middle small fw-semibold px-2 rounded bg-body text-body border text-nowrap">' . htmlspecialchars($label) . '</span>'
+            . '</div>';
     }
 
     // Job type icons mapping
@@ -196,7 +206,7 @@ function jobTypeIcon(string $type): string {
                         <td class="d-none d-md-table-cell">
                             <?php
                             $d = $job['duration_seconds'] ?? 0;
-                            echo $d >= 60 ? floor($d / 60) . 'm ' . ($d % 60) . 's' : $d . 's';
+                            echo durationBarHtml((int) $d, $maxCompletedDuration);
                             ?>
                         </td>
                         <td class="text-center">
@@ -253,7 +263,18 @@ function formatDate(d) {
 
     function formatDuration(s) {
         s = parseInt(s) || 0;
-        return s >= 60 ? Math.floor(s / 60) + 'm ' + (s % 60) + 's' : s + 's';
+        return s >= 3600 ? Math.floor(s / 3600) + 'h ' + Math.floor((s % 3600) / 60) + 'm ' + (s % 60) + 's' : (s >= 60 ? Math.floor(s / 60) + 'm ' + (s % 60) + 's' : s + 's');
+    }
+
+    function durationBar(s, maxS) {
+        s = parseInt(s) || 0;
+        maxS = parseInt(maxS) || 0;
+        const pct = maxS > 0 ? Math.min(100, Math.round((s / maxS) * 100)) : 0;
+        const hue = 120 - Math.round(pct * 1.2);
+        const label = formatDuration(s);
+        return '<div class="progress position-relative" style="height:20px;min-width:120px;" title="' + esc(label) + '">' +
+            '<div class="progress-bar" style="width:' + pct + '%;background-color:hsl(' + hue + ',70%,45%);"></div>' +
+            '<span class="position-absolute top-50 start-50 translate-middle small fw-semibold px-2 rounded bg-body text-body border text-nowrap">' + esc(label) + '</span></div>';
     }
 
     function statusBadge(status) {
@@ -313,7 +334,7 @@ function buildInProgressRow(job) {
             '<td class="text-end" onclick="event.stopPropagation()">' + actions + '</td></tr>';
     }
 
-    function buildCompletedRow(job) {
+    function buildCompletedRow(job, maxDuration) {
         let statusHtml;
         if (job.status === 'completed' && job.had_warnings) {
             statusHtml = '<i class="bi bi-exclamation-triangle-fill text-warning" data-bs-toggle="tooltip" title="' + esc('Completed with warnings: ' + String(job.error_log || '').substring(0, 200)) + '"></i>';
@@ -339,7 +360,7 @@ function buildCompletedRow(job) {
             '<td class="text-nowrap">' + jobTypeIcon(job.task_type) + esc(job.task_type) + '</td>' +
             '<td class="d-none d-md-table-cell">' + Number(job.files_total || 0).toLocaleString() + '</td>' +
             '<td class="d-none d-md-table-cell">' + esc(job.repo_name || '--') + '</td>' +
-            '<td class="d-none d-md-table-cell">' + formatDuration(job.duration_seconds) + '</td>' +
+            '<td class="d-none d-md-table-cell">' + durationBar(job.duration_seconds, maxDuration) + '</td>' +
             '<td class="text-center">' + statusHtml + '</td>' +
             '<td class="text-end" onclick="event.stopPropagation()">' + actions + '</td></tr>';
     }
@@ -369,7 +390,8 @@ function refreshQueue() {
                     let html = '<div class="table-responsive"><table class="table table-hover align-middle mb-0"><thead class="table-light"><tr>' +
                         '<th>Date</th><th>Client</th><th>Task</th><th class="d-none d-md-table-cell">Files</th><th class="d-none d-md-table-cell">Repo</th><th class="d-none d-md-table-cell">Duration</th><th class="text-center">Status</th><th style="width:80px;"></th>' +
                         '</tr></thead><tbody>';
-                    data.completed.forEach(j => html += buildCompletedRow(j));
+                    const maxDuration = Math.max(0, ...data.completed.map(j => parseInt(j.duration_seconds) || 0));
+                    data.completed.forEach(j => html += buildCompletedRow(j, maxDuration));
                     html += '</tbody></table></div>';
                     cCard.innerHTML = html;
                 }