Add elapsed time in pending status

Author: bncer

src/templates.rs

@@ -1,4 +1,6 @@
-use crate::database::{MergeableState::*, PullRequestModel, QueueStatus, TreeState};
+use crate::database::{
+    BuildModel, BuildStatus, MergeableState::*, PullRequestModel, QueueStatus, TreeState,
+};
 use askama::Template;
 use axum::response::{Html, IntoResponse, Response};
 use http::StatusCode;
@@ -68,3 +70,18 @@ pub struct QueueTemplate {
 #[derive(Template)]
 #[template(path = "not_found.html")]
 pub struct NotFoundTemplate {}
+
+pub fn get_pending_build(pr: &PullRequestModel) -> Option<&BuildModel> {
+    if let Some(auto_build) = &pr.auto_build
+        && auto_build.status == BuildStatus::Pending
+    {
+        return Some(auto_build);
+    }
+
+    if let Some(try_build) = &pr.try_build
+        && try_build.status == BuildStatus::Pending
+    {
+        return Some(try_build);
+    }
+    None
+}

templates/queue.html

@@ -6,6 +6,22 @@
 <link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.min.css" />
 <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.5.1/css/rowGroup.dataTables.min.css" />
 <style>
+    @keyframes barber-pole {
+	/* This animation is used to make the status indicator next to
+	   pending pulls look like a barber poll. We do that with a
+	   diagonal linear gradient. CSS does not allow us to animate a
+	   gradient, so instead we make the indicator a little taller
+	   than shown, and then animate the whole thing upward. */
+	from{
+	    transform: translate(0, 0);
+	}
+	to {
+	    /* The magic number 11.314 is sqrt(8^2 + 8^2), based on how
+	       far vertically it takes to repeat a 45 degree gradient
+	       that is 8 pixels long before it repeats. */
+	    transform: translate(0, -11.314px);
+	}
+    }
     main {
         max-width: 100rem;
         width: 100%;
@@ -31,6 +47,30 @@
     td.select-checkbox {
         width: 2.5rem;
     }
+    table.dataTable > tbody > tr > td.status {
+	position: relative;
+	overflow: hidden;
+	padding-left: 16px;
+	white-space: nowrap;
+    }
+    td.status:before {
+	content: " ";
+	position: absolute;
+	display: block;
+	left: 6px;
+	width: 6px;
+	top: 0;
+	bottom: 0;
+    }
+    td.status[data-status="pending"]:before {
+	/* Give the pending state a little bit of animation to make it
+	   clear that these items are the ones that are being tested
+	   right now. */
+	bottom: -20px;
+	background-color: #F0DE57;
+	background-image: repeating-linear-gradient(135deg, #F0DE57 0, #F0DE57 4px, #FBEE97 4px, #FBEE97 8px, #F0DE57 0);
+	animation: barber-pole 1s linear infinite;
+    }
 
     #rollupModal {
         display: none;
@@ -114,12 +154,18 @@ <h1>
                 <td>
                     <a href="{{ repo_url }}/pull/{{ pr.number }}">{{ pr.number.0 }}</a>
                 </td>
-                <td data-status="{{ crate::templates::status_text(pr) }}">
+                {% let pending_build = crate::templates::get_pending_build(pr) %}
+                <td class="status" data-status="{{ crate::templates::status_text(pr) }}"
+                    data-created-at="{% if let Some(build) = pending_build %}
+                    {{ build.created_at.timestamp_millis() }}
+                    {% endif %}">
+
                     {% if let Some(try_build) = pr.try_build %}
                     <a href="../results/{{ repo_name }}/{{ pr.number }}">{{ crate::templates::status_text(pr) }}</a> (try)
                     {% else %}
                     {{ crate::templates::status_text(pr) }}
                     {% endif %}
+                    <span class="elapsed-time-display"></span>
                 </td>
                 <td>
                     {% match pr.mergeable_state %}
@@ -340,5 +386,28 @@ <h1>
         modalMessage.innerHTML = message;
         modal.style.display = "block";
     });
+
+    function formatElapsedTime(ms) {
+        const minutes = Math.floor(ms / 60000);
+	if (minutes > 0) {
+            return ` (${minutes}m)`;
+	}
+	return '';
+    }
+
+    function updateElapsedTimes() {
+        const now = Date.now();
+        document.querySelectorAll('[data-created-at]').forEach(td => {
+            const createdAtMs = parseInt(td.getAttribute('data-created-at'), 10);
+            if (createdAtMs > 0) {
+                const elapsedMs = now - createdAtMs;
+                const formattedTime = formatElapsedTime(elapsedMs);
+                let display = td.querySelector('.elapsed-time-display');
+                display.textContent = formattedTime;
+            }
+        });
+    }
+
+    updateElapsedTimes();
 </script>
 {% endblock %}