Polish live runs status layout
This commit is contained in:
parent
ba33491479
commit
73617cd40c
6 changed files with 203 additions and 48 deletions
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue