maintenance_on_steroids 0.2.0

data/app/views/maintenance_on_steroids/runs/show.html.erb

@@ -0,0 +1,410 @@
+<% task_title = @task_class_obj&.task_title || @run.task_title %>
+<div class="breadcrumb">
+  <a href="<%= jobs_path %>">Tasks</a> &rsaquo;
+  <% if @task_class_obj %>
+    <a href="<%= job_path(id: @run.task_class) %>"><%= task_title %></a> &rsaquo;
+  <% else %>
+    <span title="Task class no longer exists"><%= task_title %></span> &rsaquo;
+  <% end %>
+  Run #<%= @run.id %>
+</div>
+
+<div class="page-header">
+  <div>
+    <h1>Run #<%= @run.id %></h1>
+    <p class="subtitle"><%= task_title %></p>
+  </div>
+  <div class="btn-group">
+    <% if @task_class_obj %>
+      <a href="<%= source_job_path(id: @run.task_class) %>" class="btn btn-outline btn-sm">View Source</a>
+    <% end %>
+    <% if @run.pausable? %>
+      <%= button_to "Pause", pause_run_path(@run), class: "btn btn-warning btn-sm", form: { style: "display: inline;" } %>
+    <% end %>
+    <% if @run.resumable? %>
+      <%= button_to "Resume", resume_run_path(@run), class: "btn btn-success btn-sm", form: { style: "display: inline;" } %>
+    <% end %>
+    <% if @run.cancellable? %>
+      <%= button_to "Cancel", cancel_run_path(@run), class: "btn btn-danger btn-sm",
+            form: { style: "display: inline;", onsubmit: "return confirm('Are you sure you want to cancel this run?');" } %>
+    <% end %>
+  </div>
+</div>
+
+<%# Status & Progress Card %>
+<div class="card">
+  <div class="info-grid" style="margin-bottom: 20px;">
+    <div class="info-item">
+      <label>Status</label>
+      <div class="value">
+        <span id="status-badge" class="badge badge-<%= @run.status %>"><%= @run.status %></span>
+        <span id="auto-refresh" class="auto-refresh" hidden>
+          auto-refresh in <span id="auto-refresh-count"><%= 5 %></span>s
+        </span>
+      </div>
+    </div>
+    <div class="info-item">
+      <label>Duration</label>
+      <div class="value" id="run-duration"><%= @run.formatted_duration %></div>
+    </div>
+    <div class="info-item" id="estimated-duration-item" <%= "hidden" unless @run.formatted_estimated_duration %>>
+      <label>Estimated (pending)</label>
+      <div class="value" id="estimated-duration"><%= @run.formatted_estimated_duration %></div>
+    </div>
+    <div class="info-item">
+      <label>Started</label>
+      <div class="value"><%= @run.started_at&.strftime("%b %d, %Y %H:%M:%S") || "—" %></div>
+    </div>
+    <div class="info-item">
+      <label>Completed</label>
+      <div class="value"><%= @run.completed_at&.strftime("%b %d, %Y %H:%M:%S") || "—" %></div>
+    </div>
+    <% if @run.user_id.present? %>
+      <div class="info-item">
+        <label>Triggered By</label>
+        <div class="value"><%= @run.user_display %></div>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @run.progress_total > 0 || @run.active? %>
+    <label style="font-size: 12px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; margin-bottom: 8px; display: block;">
+      Progress
+    </label>
+    <div class="progress-container">
+      <div
+        id="progress-bar"
+        class="progress-bar<%= " completed" if @run.completed? %><%= " errored" if @run.errored? %>"
+        style="width: <%= @run.progress_percentage %>%;"
+      ></div>
+    </div>
+    <div class="progress-text" id="progress-text">
+      <%= @run.progress_current %> / <%= @run.progress_total %> (<%= @run.progress_percentage %>%)
+    </div>
+  <% end %>
+</div>
+
+<%# Error Card %>
+<% if @run.errored? && @run.error_message.present? %>
+  <div class="error-box">
+    <h3>Error</h3>
+    <p style="margin-top: 4px;"><%= @run.error_message %></p>
+    <% if @run.error_backtrace.present? %>
+      <pre><%= @run.error_backtrace %></pre>
+    <% end %>
+  </div>
+<% end %>
+
+<%# Parameters Card %>
+<% if @run.params.present? && @run.params.any? %>
+  <div class="card" style="margin-top: 16px;">
+    <h3 style="margin-bottom: 12px;">Parameters</h3>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @run.params.each do |key, value| %>
+          <tr>
+            <td><strong><%= key %></strong></td>
+            <td style="font-family: monospace; font-size: 13px;"><%= value %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>
+
+<%# Input Files Card %>
+<% input_artifacts = @run.input_artifacts %>
+<% if input_artifacts.any? %>
+  <div class="card" style="margin-top: 16px;">
+    <h3 style="margin-bottom: 12px;">Input Files</h3>
+    <% input_artifacts.each do |artifact| %>
+      <div class="artifact-card">
+        <span class="artifact-name"><%= artifact.name %></span>
+        <span class="artifact-type">&middot; <%= artifact.file_name %> (<%= artifact.human_size %>)</span>
+        <% if artifact.downloadable? %>
+          <a href="<%= artifact_download_run_path(@run, artifact_id: artifact.id) %>" class="btn btn-outline btn-sm" style="margin-left: 8px;">Download</a>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<%# Output Artifacts Card %>
+<% output_artifacts = @run.output_artifacts %>
+<% artifact_defs = (@task_class_obj&.artifact_definitions || []).index_by { |d| d.name.to_s } %>
+<% if output_artifacts.any? %>
+  <div class="card" style="margin-top: 16px;">
+    <h3 style="margin-bottom: 12px;">Artifacts</h3>
+    <% output_artifacts.each do |artifact| %>
+      <% defn = artifact_defs[artifact.name] %>
+      <div class="artifact-card">
+        <span class="artifact-name"><%= defn&.label || artifact.name.titleize %></span>
+        <span class="artifact-type">&middot; <%= artifact.artifact_type %> &middot; <%= artifact.summary %></span>
+        <% if artifact.generated_at %>
+          <span class="artifact-type" title="<%= artifact.generated_at %>">&middot; <%= time_ago_in_words(artifact.generated_at) %> ago</span>
+        <% end %>
+        <% if artifact.downloadable? %>
+          <a href="<%= artifact_download_run_path(@run, artifact_id: artifact.id) %>" class="btn btn-outline btn-sm" style="margin-left: 8px;">Download</a>
+        <% end %>
+        <% if defn&.description.present? %>
+          <div class="artifact-desc"><%= defn.description %></div>
+        <% end %>
+        <% if %w[jsonb text].include?(artifact.artifact_type) && (preview = artifact.preview_text).present? %>
+          <div class="artifact-pre-wrap">
+            <button type="button" class="btn btn-outline btn-sm copy-artifact-btn artifact-copy-overlay" data-copy-label="Copy">Copy</button>
+            <pre><%= preview %></pre>
+          </div>
+          <% if artifact.preview_truncated? %>
+            <div class="artifact-desc">Preview truncated &mdash; showing the first <%= number_to_human_size(MaintenanceOnSteroids::Artifact::PREVIEW_BYTES) %> of <%= artifact.human_size %>.</div>
+          <% end %>
+        <% elsif artifact.artifact_type == "csv" && (rows = artifact.csv_rows).present? %>
+          <div style="overflow-x: auto;">
+            <table class="csv-preview">
+              <% rows.first(100).each_with_index do |row, i| %>
+                <tr>
+                  <% row.each do |cell| %>
+                    <% if i.zero? && defn&.headers %><th><%= cell %></th><% else %><td><%= cell %></td><% end %>
+                  <% end %>
+                </tr>
+              <% end %>
+            </table>
+          </div>
+          <% if rows.size > 100 || artifact.preview_truncated? %>
+            <div class="artifact-desc">
+              Showing first <%= [rows.size, 100].min %> of <%= artifact.metadata&.dig("rows") || rows.size %> rows &mdash; download for the full file.
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <%# Copy text/jsonb artifact contents (the sibling <pre>) to the clipboard. %>
+  <script>
+  (function() {
+    function flash(btn) {
+      var label = btn.getAttribute("data-copy-label") || "Copy";
+      btn.textContent = "Copied!";
+      setTimeout(function() { btn.textContent = label; }, 1500);
+    }
+
+    function fallbackCopy(text, btn) {
+      var ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      try { document.execCommand("copy"); flash(btn); } catch (e) { /* no-op */ }
+      document.body.removeChild(ta);
+    }
+
+    function onClick(e) {
+      var btn = e.target.closest && e.target.closest(".copy-artifact-btn");
+      if (!btn) { return; }
+      var card = btn.closest(".artifact-card");
+      var pre = card && card.querySelector("pre");
+      if (!pre) { return; }
+      var text = pre.textContent;
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(function() { flash(btn); })
+          .catch(function() { fallbackCopy(text, btn); });
+      } else {
+        fallbackCopy(text, btn);
+      }
+    }
+    function bind() {
+      if (window.__mosArtifactCopyBound) { return; }
+      window.__mosArtifactCopyBound = true;
+      document.addEventListener("click", onClick);
+      document.addEventListener("turbo:before-visit", cleanup);
+      window.addEventListener("pagehide", cleanup);
+    }
+
+    // Remove the delegated listener and clear the bind flag on Turbo
+    // navigation / unload so listeners don't accumulate across run pages.
+    function cleanup() {
+      document.removeEventListener("click", onClick);
+      document.removeEventListener("turbo:before-visit", cleanup);
+      window.removeEventListener("pagehide", cleanup);
+      window.__mosArtifactCopyBound = false;
+    }
+
+    // bfcache restore doesn't re-run this script, and cleanup ran on pagehide,
+    // so re-bind when the page is restored from the back/forward cache.
+    window.addEventListener("pageshow", bind);
+    bind();
+  })();
+  </script>
+<% end %>
+
+<%# Live polling script for active runs %>
+<%# cancelling is not in ACTIVE_STATUSES but still needs live updates + auto-refresh %>
+<% if @run.active? || @run.status == "cancelling" %>
+<script>
+(function() {
+  var POLL_INTERVAL = 2000;
+  var MAX_CONSECUTIVE_FAILURES = 5;
+  var statusUrl = "<%= status_run_path(@run) %>";
+  var initialStatus = "<%= @run.status %>";
+  var reloadStatuses = ["completed", "errored", "cancelled", "paused"];
+  // Transitional states waiting on the worker to acknowledge; the page
+  // auto-refreshes on a visible countdown until the state settles.
+  var transitionalStatuses = ["pausing", "cancelling"];
+  var AUTO_REFRESH_SECONDS = 5;
+
+  var timer = null;
+  var reloadTimer = null;
+  var countdownTimer = null;
+  var consecutiveFailures = 0;
+  var abortController = new AbortController();
+  // The poll is the single reload authority. Once it has scheduled a reload
+  // (settled state detected), the transitional countdown must not also fire a
+  // reload -- otherwise the page reloads twice.
+  var reloadScheduled = false;
+
+  // Stop polling, pending reloads and in-flight fetches when leaving the
+  // page (Turbo navigation or regular unload) so stale responses can't
+  // touch a swapped DOM and intervals don't stack across navigations.
+  function teardown() {
+    if (timer !== null) { clearInterval(timer); timer = null; }
+    if (reloadTimer !== null) { clearTimeout(reloadTimer); reloadTimer = null; }
+    if (countdownTimer !== null) { clearInterval(countdownTimer); countdownTimer = null; }
+    abortController.abort();
+    document.removeEventListener("turbo:before-visit", teardown);
+    document.removeEventListener("turbo:before-cache", teardown);
+    window.removeEventListener("pagehide", teardown);
+  }
+
+  function startAutoRefreshCountdown() {
+    if (countdownTimer !== null) { return; }
+    var indicator = document.getElementById("auto-refresh");
+    var counter = document.getElementById("auto-refresh-count");
+    if (!indicator || !counter) { return; }
+    var remaining = AUTO_REFRESH_SECONDS;
+    counter.textContent = remaining;
+    indicator.hidden = false;
+    countdownTimer = setInterval(function() {
+      // Don't tick or reload in a background tab.
+      if (document.hidden) { return; }
+      // The poll already owns the reload; stand down to avoid a double reload.
+      if (reloadScheduled) {
+        stopAutoRefreshCountdown();
+        return;
+      }
+      remaining -= 1;
+      if (remaining <= 0) {
+        teardown();
+        window.location.reload();
+        return;
+      }
+      counter.textContent = remaining;
+    }, 1000);
+  }
+
+  function stopAutoRefreshCountdown() {
+    if (countdownTimer !== null) { clearInterval(countdownTimer); countdownTimer = null; }
+    var indicator = document.getElementById("auto-refresh");
+    if (indicator) { indicator.hidden = true; }
+  }
+
+  document.addEventListener("turbo:before-visit", teardown);
+  document.addEventListener("turbo:before-cache", teardown);
+  window.addEventListener("pagehide", teardown);
+
+  // bfcache restore doesn't re-run this script; the poller was torn down on
+  // pagehide. The run may have advanced while away, so reload for fresh state.
+  window.addEventListener("pageshow", function(e) {
+    if (e.persisted) { window.location.reload(); }
+  });
+
+  function showPollingStopped() {
+    var text = document.getElementById("progress-text");
+    if (text) {
+      text.textContent = "Live updates unavailable - refresh the page to see current progress.";
+    }
+  }
+
+  function poll() {
+    fetch(statusUrl, { headers: { "Accept": "application/json" }, signal: abortController.signal })
+      .then(function(res) {
+        if (!res.ok) { throw new Error("HTTP " + res.status); }
+        return res.json();
+      })
+      .then(function(data) {
+        consecutiveFailures = 0;
+
+        var badge = document.getElementById("status-badge");
+        if (badge) {
+          badge.textContent = data.status;
+          badge.className = "badge badge-" + data.status;
+        }
+
+        var bar = document.getElementById("progress-bar");
+        if (bar) {
+          bar.style.width = data.progress_percentage + "%";
+          if (data.status === "completed") bar.classList.add("completed");
+          if (data.status === "errored") bar.classList.add("errored");
+        }
+
+        var text = document.getElementById("progress-text");
+        if (text) {
+          text.textContent = data.progress_current + " / " + data.progress_total + " (" + data.progress_percentage + "%)";
+        }
+
+        var duration = document.getElementById("run-duration");
+        if (duration) {
+          duration.textContent = data.formatted_duration;
+        }
+
+        var estimatedItem = document.getElementById("estimated-duration-item");
+        var estimated = document.getElementById("estimated-duration");
+        if (estimatedItem && estimated) {
+          if (data.formatted_estimated_duration) {
+            estimated.textContent = data.formatted_estimated_duration;
+            estimatedItem.hidden = false;
+          } else {
+            estimatedItem.hidden = true;
+          }
+        }
+
+        if (transitionalStatuses.indexOf(data.status) !== -1) {
+          startAutoRefreshCountdown();
+        } else {
+          stopAutoRefreshCountdown();
+        }
+
+        // Reload only on a status *change* into a settled state -- landing
+        // directly on e.g. a paused page must not trigger a reload loop.
+        if (data.status !== initialStatus && reloadStatuses.indexOf(data.status) !== -1) {
+          clearInterval(timer);
+          timer = null;
+          reloadScheduled = true;
+          reloadTimer = setTimeout(function() { window.location.reload(); }, 500);
+        }
+      })
+      .catch(function(err) {
+        if (err && err.name === "AbortError") { return; }
+        consecutiveFailures += 1;
+        if (consecutiveFailures >= MAX_CONSECUTIVE_FAILURES) {
+          teardown();
+          showPollingStopped();
+        }
+      });
+  }
+
+  timer = setInterval(poll, POLL_INTERVAL);
+
+  <% if %w[pausing cancelling].include?(@run.status) %>
+  // Page landed in a transitional state -- start the countdown immediately.
+  startAutoRefreshCountdown();
+  <% end %>
+})();
+</script>
+<% end %>

data/app/views/maintenance_on_steroids/shared/_auto_refresh.html.erb

@@ -0,0 +1,85 @@
+<%# Polls the current page every few seconds and swaps the listed element ids
+    in place (no full reload). Pass `target_ids:` -- an array of DOM ids whose
+    innerHTML should be refreshed from the freshly fetched page.
+    Optional `stop_when_gone:` -- a DOM id; once the freshly fetched page no
+    longer contains it (e.g. an "active runs" sentinel), polling stops.
+    Used by the dashboard and the tasks list for live in-progress updates. %>
+<script>
+(function() {
+  var REFRESH_INTERVAL = 4000;
+  var MAX_CONSECUTIVE_FAILURES = 5;
+  var TARGET_IDS = JSON.parse('<%= j target_ids.to_json %>');
+  var STOP_WHEN_GONE = JSON.parse('<%= j (local_assigns[:stop_when_gone] || "").to_json %>');
+  var consecutiveFailures = 0;
+  var timer = null;
+  var inFlight = null;
+
+  function teardown() {
+    if (timer !== null) { clearInterval(timer); timer = null; }
+    if (inFlight !== null) { inFlight.abort(); inFlight = null; }
+    document.removeEventListener("turbo:before-visit", teardown);
+    document.removeEventListener("turbo:before-cache", teardown);
+    window.removeEventListener("pagehide", teardown);
+  }
+
+  function refresh() {
+    if (document.hidden) { return; }
+    // Abort any still-in-flight refresh before starting a new one so slow
+    // responses can't pile up or land out of order.
+    if (inFlight !== null) { inFlight.abort(); }
+    var controller = new AbortController();
+    inFlight = controller;
+    fetch(window.location.href, { headers: { "Accept": "text/html" }, signal: controller.signal })
+      .then(function(res) {
+        if (!res.ok) { throw new Error("HTTP " + res.status); }
+        return res.text();
+      })
+      .then(function(html) {
+        inFlight = null;
+        consecutiveFailures = 0;
+        var doc = new DOMParser().parseFromString(html, "text/html");
+        TARGET_IDS.forEach(function(id) {
+          var fresh = doc.getElementById(id);
+          var current = document.getElementById(id);
+          // Only swap when the markup actually changed -- the common case
+          // (nothing changed) skips the swap, avoiding needless DOM churn and
+          // shrinking the window in which a swap could detach a control the
+          // user is mid-click on. Also skip if the user is interacting with
+          // something inside the target (e.g. a focused View/pause link) so it
+          // isn't ripped out. (teardown aborts the in-flight fetch, so this
+          // .then never runs after teardown -- no detached-node guard needed.)
+          if (current && fresh && current.innerHTML !== fresh.innerHTML &&
+              !current.contains(document.activeElement)) {
+            current.innerHTML = fresh.innerHTML;
+          }
+        });
+        // Stop polling once the freshly fetched page no longer carries the
+        // sentinel (e.g. no more active runs) -- after the final swap.
+        if (STOP_WHEN_GONE && !doc.getElementById(STOP_WHEN_GONE)) { teardown(); }
+      })
+      .catch(function(err) {
+        inFlight = null;
+        if (err && err.name === "AbortError") { return; }
+        consecutiveFailures += 1;
+        if (consecutiveFailures >= MAX_CONSECUTIVE_FAILURES) { teardown(); }
+      });
+  }
+
+  function start() {
+    if (timer !== null) { return; } // already polling
+    document.addEventListener("turbo:before-visit", teardown);
+    document.addEventListener("turbo:before-cache", teardown);
+    window.addEventListener("pagehide", teardown);
+    timer = setInterval(refresh, REFRESH_INTERVAL);
+  }
+
+  // When a page is restored from the back/forward (bfcache), inline scripts are
+  // NOT re-executed, so teardown (fired on pagehide) would leave polling dead.
+  // Re-arm here. This listener is intentionally never removed by teardown.
+  window.addEventListener("pageshow", function(e) {
+    if (e.persisted) { consecutiveFailures = 0; start(); }
+  });
+
+  start();
+})();
+</script>

data/app/views/maintenance_on_steroids/shared/_javascript.html.erb

@@ -0,0 +1,16 @@
+<script>
+  function toggleTheme() {
+    var html = document.documentElement;
+    var current = html.getAttribute('data-theme');
+    var next = current === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    localStorage.setItem('mos-theme', next);
+    updateThemeIcon();
+  }
+  function updateThemeIcon() {
+    var theme = document.documentElement.getAttribute('data-theme');
+    var icon = document.getElementById('theme-icon');
+    if (icon) icon.textContent = theme === 'dark' ? '\u2600' : '\u263E';
+  }
+  document.addEventListener('DOMContentLoaded', updateThemeIcon);
+</script>

data/app/views/maintenance_on_steroids/shared/_pager.html.erb

@@ -0,0 +1,20 @@
+<%# Simple prev/next pager (no gem). Locals:
+      page        -- current 1-based page
+      total_pages -- total page count (computed by the caller; single source of truth)
+      total       -- total row count
+      url_proc    -- Integer page -> path (e.g. ->(n) { job_path(id: name, page: n) }) %>
+<% if total_pages > 1 %>
+  <div class="pager">
+    <% if page > 1 %>
+      <a class="btn btn-outline btn-sm" href="<%= url_proc.call(page - 1) %>">&lsaquo; Prev</a>
+    <% else %>
+      <span class="btn btn-outline btn-sm pager-disabled">&lsaquo; Prev</span>
+    <% end %>
+    <span class="pager-info">Page <%= page %> of <%= total_pages %> &middot; <%= total %> total</span>
+    <% if page < total_pages %>
+      <a class="btn btn-outline btn-sm" href="<%= url_proc.call(page + 1) %>">Next &rsaquo;</a>
+    <% else %>
+      <span class="btn btn-outline btn-sm pager-disabled">Next &rsaquo;</span>
+    <% end %>
+  </div>
+<% end %>