diff --git a/apps/gust_web/assets/css/app.css b/apps/gust_web/assets/css/app.css index eaa45b6..fa7a564 100644 --- a/apps/gust_web/assets/css/app.css +++ b/apps/gust_web/assets/css/app.css @@ -419,6 +419,55 @@ .run-status__filter-form { @apply flex h-8 shrink-0 items-center [&_.fieldset]:mb-0 [&_.fieldset]:h-8; } + + .task-status-progress { + @apply h-1.5 w-full overflow-hidden; + } + + .task-status-progress__bar { + @apply h-full w-full; + } + + .status-running, + .task-grid-cell--running { + background-image: repeating-linear-gradient( + 135deg, + var(--color-sky-600) 0, + var(--color-sky-600) 0.75rem, + var(--color-sky-300) 0.75rem, + var(--color-sky-300) 1.5rem + ); + background-size: 2.125rem 2.125rem; + animation: task-running-stripes 0.8s linear infinite; + } + + .status-retrying, + .task-grid-cell--retrying { + background-image: repeating-linear-gradient( + 135deg, + var(--color-amber-600) 0, + var(--color-amber-600) 0.75rem, + var(--color-amber-300) 0.75rem, + var(--color-amber-300) 1.5rem + ); + background-size: 2.125rem 2.125rem; + animation: task-running-stripes 0.8s linear infinite; + } +} + +@keyframes task-running-stripes { + to { + background-position: 2.125rem 0; + } +} + +@media (prefers-reduced-motion: reduce) { + .status-running, + .status-retrying, + .task-grid-cell--running, + .task-grid-cell--retrying { + animation: none; + } } @layer components { diff --git a/apps/gust_web/lib/gust_web/components/dag_run_components.ex b/apps/gust_web/lib/gust_web/components/dag_run_components.ex index 190cf9d..29e418e 100644 --- a/apps/gust_web/lib/gust_web/components/dag_run_components.ex +++ b/apps/gust_web/lib/gust_web/components/dag_run_components.ex @@ -51,23 +51,18 @@ defmodule GustWeb.DagRunComponents do attr :id, :string, required: true attr :selected, :boolean, default: false - attr :status, :atom + attr :status, :atom, default: nil def task_cell(assigns) do - assigns = - assign_new(assigns, :classes, fn -> - base_classes = - if assigns[:status], do: ["status-#{assigns[:status]}", "active"], else: ["status-none"] - - classes = base_classes ++ if assigns[:selected], do: ["selected"], else: [] - - Enum.join(classes, " ") - end) - ~H"""
""" diff --git a/apps/gust_web/lib/gust_web/live/dag_live/dashboard.html.heex b/apps/gust_web/lib/gust_web/live/dag_live/dashboard.html.heex index 6e57fec..de4728c 100644 --- a/apps/gust_web/lib/gust_web/live/dag_live/dashboard.html.heex +++ b/apps/gust_web/lib/gust_web/live/dag_live/dashboard.html.heex @@ -168,6 +168,17 @@ +
+
+
+
Started
@@ -195,7 +206,10 @@
-
0} class="dag-card__body"> +
0 && @item_status != :running} + class="dag-card__body" + >