From 73617cd40cbb0c41dc7b51158170b55189f2a7e7 Mon Sep 17 00:00:00 2001 From: Abel Luck Date: Tue, 31 Mar 2026 12:35:41 +0200 Subject: [PATCH] Polish live runs status layout --- repub/jobs.py | 4 +- repub/pages/runs.py | 101 ++++++++++++++++++++++++-------- repub/static/app.css | 25 +------- tests/test_jobs.py | 33 +++++++++++ tests/test_scheduler_runtime.py | 39 ++++++++++++ tests/test_web.py | 49 ++++++++++++++++ 6 files changed, 203 insertions(+), 48 deletions(-) diff --git a/repub/jobs.py b/repub/jobs.py index b60d88f..ad318ba 100644 --- a/repub/jobs.py +++ b/repub/jobs.py @@ -915,7 +915,9 @@ def _project_running_execution( "slug": job.source.slug, "job_id": job_id, "execution_id": execution_id, - "started_at": started_at.strftime("%Y-%m-%d %H:%M UTC"), + "duration": _format_duration(started_at, reference_time), + "started_at": _humanize_relative_time(reference_time, started_at), + "started_at_iso": started_at.isoformat(), "runtime": f"running for {int(runtime.total_seconds())}s", "status": "Stopping" if execution.stop_requested_at else "Running", "stats": _stats_summary(execution), diff --git a/repub/pages/runs.py b/repub/pages/runs.py index cab3aad..1906038 100644 --- a/repub/pages/runs.py +++ b/repub/pages/runs.py @@ -81,6 +81,19 @@ def _calendar_icon() -> Renderable: def _status_icon(tone: str) -> Renderable: + if tone == "running": + return h.svg( + xmlns="http://www.w3.org/2000/svg", + fill="currentColor", + viewBox="0 0 640 640", + class_="size-3.5 rotate-180", + )[ + h.path( + d="M512 320C512 214 426 128 320 128L320 512C426 512 512 426 512 320zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320z", + ) + ] + if tone == "queued": + return _clock_icon() return _icon( ( "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" @@ -93,7 +106,8 @@ def _status_icon(tone: str) -> Renderable: def _status_tone_classes(tone: str) -> str: return { - "running": "bg-emerald-100 text-emerald-800", + "running": "bg-sky-100 text-sky-800", + "queued": "bg-amber-200 text-amber-950", "scheduled": "bg-sky-100 text-sky-800", "idle": "bg-slate-200 text-slate-700", "failed": "bg-rose-100 text-rose-800", @@ -140,6 +154,34 @@ def _completed_status_cell(execution: Mapping[str, object]) -> Node: ] +def _live_status_cell( + *, + execution_id: str, + status: str, + status_tone: str, + clock_label: str, + calendar_label: Node, +) -> Node: + return h.div(class_="min-w-[10rem]")[ + h.div(class_="flex items-center gap-2")[ + h.span(class_="font-mono text-xs text-slate-500")[f"#{execution_id}"], + h.span( + class_=( + "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs " + f"font-semibold {_status_tone_classes(status_tone)}" + ) + )[ + _status_icon(status_tone), + h.span[status], + ], + ], + h.div(class_="mt-1.5 space-y-1 text-xs text-slate-500")[ + h.p(class_="flex items-center gap-1.5")[_clock_icon(), h.span[clock_label]], + h.p(class_="flex items-center gap-1.5")[_calendar_icon(), calendar_label], + ], + ] + + def _queue_row_attrs(execution: Mapping[str, object]) -> dict[str, str]: return { "style": ( @@ -149,21 +191,33 @@ def _queue_row_attrs(execution: Mapping[str, object]) -> dict[str, str]: def _running_row(execution: Mapping[str, object]) -> tuple[Node, ...]: + started_at = _maybe_text(execution, "started_at_iso") + started_at_label: Node = h.p(class_="truncate")[_text(execution, "started_at")] + if started_at is not None: + started_at_label = h.time( + { + "data-started-at": started_at, + "title": started_at, + }, + datetime=started_at, + class_="truncate", + )[_text(execution, "started_at")] + return ( - h.p(class_="w-px whitespace-nowrap font-medium text-slate-900")[ - f"#{_text(execution, 'execution_id')}" - ], + _live_status_cell( + execution_id=_text(execution, "execution_id"), + status=_text(execution, "status"), + status_tone="running", + clock_label=_maybe_text(execution, "duration") + or _text(execution, "runtime"), + calendar_label=started_at_label, + ), h.div[ h.div(class_="font-semibold text-slate-950")[_text(execution, "source")], h.p(class_="mt-0.5 font-mono text-xs text-slate-500")[ _text(execution, "slug") ], ], - h.div[ - h.p(class_="font-medium text-slate-900")[_text(execution, "started_at")], - h.p(class_="mt-0.5 text-xs text-slate-500")[_text(execution, "runtime")], - ], - status_badge(label=_text(execution, "status"), tone="running"), h.div(class_="max-w-xs whitespace-normal")[ h.p(class_="font-medium text-slate-900")[_text(execution, "stats")], h.p(class_="mt-0.5 text-xs text-slate-500")[_text(execution, "worker")], @@ -185,9 +239,7 @@ def _running_row(execution: Mapping[str, object]) -> tuple[Node, ...]: def _queued_row(execution: Mapping[str, object]) -> tuple[Node, ...]: queued_at = _maybe_text(execution, "queued_at_iso") - queued_label: Node = h.p(class_="font-medium text-slate-900")[ - _text(execution, "queued_at") - ] + queued_label: Node = h.p(class_="truncate")[_text(execution, "queued_at")] if queued_at is not None: queued_label = h.time( { @@ -195,21 +247,23 @@ def _queued_row(execution: Mapping[str, object]) -> tuple[Node, ...]: "title": queued_at, }, datetime=queued_at, - class_="font-medium text-slate-900", + class_="truncate", )[_text(execution, "queued_at")] return ( - h.p(class_="w-px whitespace-nowrap font-medium text-slate-900")[ - f"#{_text(execution, 'execution_id')}" - ], + _live_status_cell( + execution_id=_text(execution, "execution_id"), + status="Queued", + status_tone="queued", + clock_label="Waiting", + calendar_label=queued_label, + ), h.div[ h.div(class_="font-semibold text-slate-950")[_text(execution, "source")], h.p(class_="mt-0.5 font-mono text-xs text-slate-500")[ _text(execution, "slug") ], ], - queued_label, - status_badge(label="Queued", tone="idle"), h.div(class_="max-w-xs whitespace-normal")[ h.p(class_="font-medium text-slate-900")[ f"Queue position #{_text(execution, 'queue_position')}" @@ -486,17 +540,13 @@ def runs_page( title="Running jobs", empty_message="No jobs are running or queued.", headers=( - "#", - "Source", - "Activity", "State", + "Source", "Details", "Actions", ), rows=live_rows, row_attrs=live_row_attrs, - first_header_class="w-px py-2.5 pr-2 pl-3 text-left text-xs font-semibold uppercase tracking-[0.18em] whitespace-nowrap text-slate-500 sm:pl-3", - first_cell_class="w-px py-3 pr-2 pl-3 text-sm font-medium text-slate-950 sm:pl-3", ), table_section( eyebrow="Schedule", @@ -544,10 +594,11 @@ window.repubFormatNextRuns = window.repubFormatNextRuns || (() => { return relativeFormatter.format(0, 'second'); }; const format = () => { - document.querySelectorAll('time[data-next-run-at], time[data-ended-at]').forEach((element) => { + document.querySelectorAll('time[data-next-run-at], time[data-ended-at], time[data-started-at]').forEach((element) => { const relativeAt = element.getAttribute('data-next-run-at') ?? - element.getAttribute('data-ended-at'); + element.getAttribute('data-ended-at') ?? + element.getAttribute('data-started-at'); if (!relativeAt) return; const targetDate = new Date(relativeAt); if (Number.isNaN(targetDate.getTime())) return; diff --git a/repub/static/app.css b/repub/static/app.css index 91d5542..78b05de 100644 --- a/repub/static/app.css +++ b/repub/static/app.css @@ -373,9 +373,6 @@ .w-full { width: 100%; } - .w-px { - width: 1px; - } .max-w-3xl { max-width: var(--container-3xl); } @@ -425,6 +422,9 @@ --tw-translate-x: calc(var(--spacing) * 5); translate: var(--tw-translate-x) var(--tw-translate-y); } + .rotate-180 { + rotate: 180deg; + } .animate-pulse { animation: var(--animate-pulse); } @@ -738,21 +738,12 @@ .pt-6 { padding-top: calc(var(--spacing) * 6); } - .pr-1 { - padding-right: calc(var(--spacing) * 1); - } - .pr-2 { - padding-right: calc(var(--spacing) * 2); - } .pr-5 { padding-right: calc(var(--spacing) * 5); } .pr-6 { padding-right: calc(var(--spacing) * 6); } - .pl-2 { - padding-left: calc(var(--spacing) * 2); - } .pl-3 { padding-left: calc(var(--spacing) * 3); } @@ -1158,16 +1149,6 @@ padding-inline: calc(var(--spacing) * 6); } } - .sm\:pl-2\.5 { - @media (width >= 40rem) { - padding-left: calc(var(--spacing) * 2.5); - } - } - .sm\:pl-3 { - @media (width >= 40rem) { - padding-left: calc(var(--spacing) * 3); - } - } .sm\:pl-4 { @media (width >= 40rem) { padding-left: calc(var(--spacing) * 4); diff --git a/tests/test_jobs.py b/tests/test_jobs.py index df81fa4..db2b3a3 100644 --- a/tests/test_jobs.py +++ b/tests/test_jobs.py @@ -119,6 +119,39 @@ def test_load_runs_view_humanizes_running_execution_summary_bytes( assert view["running"][0]["stats"] == "14 requests • 11 items • 1.5 KiB" +def test_load_runs_view_projects_running_execution_duration( + tmp_path: Path, +) -> None: + initialize_database(tmp_path / "jobs-running-duration.db") + source = create_source( + name="Running source", + slug="running-source", + source_type="feed", + notes="", + spider_arguments="", + enabled=False, + cron_minute="*/5", + cron_hour="*", + cron_day_of_month="*", + cron_day_of_week="*", + cron_month="*", + feed_url="https://example.com/running.xml", + ) + job = Job.get(Job.source == source) + JobExecution.create( + job=job, + running_status=JobExecutionStatus.RUNNING, + started_at=datetime(2026, 3, 30, 11, 59, 12, tzinfo=UTC), + ) + + view = load_runs_view( + log_dir=tmp_path / "out" / "logs", + now=datetime(2026, 3, 30, 12, 0, tzinfo=UTC), + ) + + assert view["running"][0]["duration"] == "00:00:48" + + def test_load_runs_view_projects_queued_executions_in_fifo_order( tmp_path: Path, ) -> None: diff --git a/tests/test_scheduler_runtime.py b/tests/test_scheduler_runtime.py index a132402..c53b2da 100644 --- a/tests/test_scheduler_runtime.py +++ b/tests/test_scheduler_runtime.py @@ -911,6 +911,45 @@ def test_load_runs_view_humanizes_completed_execution_end_time( assert completed["ended_at_iso"] == ended_at.isoformat() +def test_load_runs_view_humanizes_running_execution_start_time( + monkeypatch, tmp_path: Path +) -> None: + db_path = tmp_path / "runs-running-view.db" + log_dir = tmp_path / "out" / "logs" + monkeypatch.setenv("REPUBLISHER_DB_PATH", str(db_path)) + + app = create_app() + app.config["REPUB_LOG_DIR"] = log_dir + source = create_source( + name="Running source", + slug="running-source", + source_type="feed", + notes="", + spider_arguments="", + enabled=False, + cron_minute="*/5", + cron_hour="*", + cron_day_of_month="*", + cron_day_of_week="*", + cron_month="*", + feed_url="https://example.com/running.xml", + ) + job = Job.get(Job.source == source) + reference_time = datetime(2026, 1, 15, 12, 0, tzinfo=UTC) + started_at = reference_time - timedelta(hours=2) + JobExecution.create( + job=job, + running_status=JobExecutionStatus.RUNNING, + started_at=started_at, + ) + + view = load_runs_view(log_dir=app.config["REPUB_LOG_DIR"], now=reference_time) + running = view["running"][0] + + assert running["started_at"] == "2 hours ago" + assert running["started_at_iso"] == started_at.isoformat() + + def test_render_runs_uses_database_backed_jobs_and_executions( monkeypatch, tmp_path: Path ) -> None: diff --git a/tests/test_web.py b/tests/test_web.py index 42bcb64..11b2443 100644 --- a/tests/test_web.py +++ b/tests/test_web.py @@ -217,9 +217,58 @@ def test_runs_page_renders_combined_running_jobs_table() -> None: assert "Running jobs" in body assert "queued-source" in body assert ">Queued<" in body + assert "bg-amber-200 text-amber-950" in body assert "/actions/queued-executions/42/cancel" in body +def test_runs_page_renders_running_state_cell_with_duration_and_started_at() -> None: + started_at = "2026-03-30T12:00:00+00:00" + body = str( + runs_page( + running_executions=( + { + "source": "Running source", + "slug": "running-source", + "job_id": 1, + "execution_id": 11, + "started_at": "2 minutes ago", + "started_at_iso": started_at, + "duration": "00:00:10", + "runtime": "running for 10s", + "status": "Running", + "stats": "1 requests • 1 items • 1 byte", + "worker": "streaming stats from worker", + "log_href": "/job/1/execution/11/logs", + "cancel_label": "Stop", + "cancel_post_path": "/actions/executions/11/cancel", + }, + ) + ) + ) + + assert re.search( + r"]*>State\s*]*>Source\s*]*>Details", + body, + ) + assert not re.search( + r"]*>#\s*]*>Source\s*]*>Activity\s*]*>State", + body, + ) + assert ">#11<" in body + assert ">00:00:10<" in body + assert ">2 minutes ago<" in body + assert 'data-started-at="2026-03-30T12:00:00+00:00"' in body + assert 'title="2026-03-30T12:00:00+00:00"' in body + assert "bg-sky-100 text-sky-800" in body + assert 'viewBox="0 0 640 640"' in body + assert "rotate-180" in body + assert "M512 320C512 214 426 128 320 128L320 512" in body + assert "M12 6v6h4.5" in body + assert "M6.75 3v2.25M17.25 3v2.25" in body + assert "Running" in body + assert "time[data-next-run-at], time[data-ended-at], time[data-started-at]" in body + + def test_runs_page_moves_scheduled_jobs_state_column_to_second_position() -> None: body = str( runs_page(