flightdeck 0.5.0

data/app/models/flightdeck/queue_stats.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Flightdeck
+  # One row per queue, assembled from four grouped queries rather than the
+  # per-queue lookups SolidQueue::Queue#size / #latency would do — those are an
+  # N+1 as soon as an application has more than a handful of queues.
+  #
+  # Pausing and resuming still go through SolidQueue::Queue, which owns the
+  # semantics; Flightdeck never writes to solid_queue_pauses itself.
+  class QueueStats
+    RATE_WINDOW = 1.hour
+
+    Row = Struct.new(:name, :depth, :oldest_ready_at, :paused_at, :completed_in_window,
+                     keyword_init: true) do
+      def paused? = paused_at.present?
+
+      # Latency only means something when something is actually waiting: an
+      # empty queue has no oldest job, and reporting "0s" would imply we
+      # measured rather than that there was nothing to measure.
+      def latency
+        return nil if depth.zero? || oldest_ready_at.nil?
+
+        Time.current - oldest_ready_at
+      end
+
+      def paused_for
+        paused_at && Time.current - paused_at
+      end
+
+      def rate_per_hour = completed_in_window
+      def idle? = depth.zero? && completed_in_window.zero?
+    end
+
+    def self.all = new.rows
+
+    def rows
+      @rows ||= names.sort.map do |name|
+        Row.new(
+          name: name,
+          depth: depths.fetch(name, 0),
+          oldest_ready_at: oldest_ready.fetch(name, nil),
+          paused_at: pauses.fetch(name, nil),
+          completed_in_window: completions.fetch(name, 0)
+        )
+      end
+    end
+
+    def find(name)
+      rows.find { |row| row.name == name }
+    end
+
+    def any_paused? = rows.any?(&:paused?)
+
+    private
+      # A queue is worth showing if Solid Queue knows about it, if something is
+      # waiting on it, or if it is paused — a paused queue with nothing in it is
+      # exactly the one an operator needs to be reminded of.
+      def names
+        (queue_names + depths.keys + pauses.keys + completions.keys).compact.uniq
+      end
+
+      def queue_names
+        SolidQueue::Queue.all.map(&:name)
+      end
+
+      def depths
+        @depths ||= SolidQueue::ReadyExecution.group(:queue_name).count
+      end
+
+      def oldest_ready
+        @oldest_ready ||= SolidQueue::ReadyExecution.group(:queue_name).minimum(:created_at)
+      end
+
+      def pauses
+        @pauses ||= SolidQueue::Pause.pluck(:queue_name, :created_at).to_h
+      end
+
+      # Bounded by the window rather than by a row cap: a grouped count cannot
+      # be capped per group the way a single count can, and an hour of finished
+      # jobs is already a bounded, index-backed range scan.
+      def completions
+        @completions ||= SolidQueue::Job
+          .where(finished_at: RATE_WINDOW.ago..)
+          .group(:queue_name)
+          .count
+      end
+  end
+end

data/app/models/flightdeck/recurring_catalog.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+module Flightdeck
+  # The recurring schedule: every task, when it last ran, how that run went, and
+  # when it is due next.
+  #
+  # "Next run" comes from the task's own Fugit-backed API rather than from a
+  # calculation of ours, so Flightdeck and the scheduler can never disagree
+  # about when something is due.
+  class RecurringCatalog
+    Row = Struct.new(:task, :last_run_at, :last_status, :last_job_id, keyword_init: true) do
+      def id = task.id
+      def key = task.key
+      def schedule = task.schedule
+      def queue_name = task.queue_name
+      def priority = task.priority
+      def description = task.description
+      def static? = task.static?
+
+      def job_class
+        task.class_name.presence || task.command.presence || "(command)"
+      end
+
+      def human_schedule
+        CronSchedule.humanize(schedule)
+      end
+
+      # Fugit raises on schedules it cannot parse. A task that is on screen but
+      # unparseable should show "—" rather than take the page down.
+      def next_run_at
+        @next_run_at ||= task.next_time
+      rescue StandardError
+        nil
+      end
+
+      def next_run_in
+        next_run_at && next_run_at - Time.current
+      end
+
+      def failed? = last_status == :failed
+      def ever_run? = last_run_at.present?
+    end
+
+    def self.all = new.rows
+
+    def rows
+      @rows ||= tasks.map do |task|
+        run = last_runs[task.key]
+
+        Row.new(
+          task: task,
+          last_run_at: run&.first,
+          last_job_id: run&.last,
+          last_status: status_for(run&.last)
+        )
+      end
+    end
+
+    def find(id)
+      rows.find { |row| row.id == id.to_i }
+    end
+
+    def any? = rows.any?
+
+    private
+      def tasks
+        @tasks ||= SolidQueue::RecurringTask.order(:key).to_a
+      end
+
+      def keys = tasks.map(&:key)
+
+      # [run_at, job_id] of the most recent execution of each task, in two
+      # queries: the maximum run_at per key, then the rows that match them.
+      def last_runs
+        @last_runs ||= compute_last_runs
+      end
+
+      def compute_last_runs
+        return {} if keys.empty?
+
+        maxima = SolidQueue::RecurringExecution.where(task_key: keys).group(:task_key).maximum(:run_at)
+        return {} if maxima.empty?
+
+        SolidQueue::RecurringExecution
+          .where(task_key: maxima.keys, run_at: maxima.values)
+          .pluck(:task_key, :run_at, :job_id)
+          .each_with_object({}) do |(task_key, run_at, job_id), found|
+            next unless maxima[task_key] == run_at
+
+            found[task_key] = [ run_at, job_id ]
+          end
+      end
+
+      def status_for(job_id)
+        return nil if job_id.nil?
+        # The job has been purged by clear_finished_jobs_after: we know it ran,
+        # but not how it went. Say so rather than claim success.
+        return :unknown unless surviving_job_ids.include?(job_id)
+
+        failed_job_ids.include?(job_id) ? :failed : :ok
+      end
+
+      def last_job_ids
+        @last_job_ids ||= last_runs.values.filter_map(&:last)
+      end
+
+      def surviving_job_ids
+        @surviving_job_ids ||= last_job_ids.empty? ? Set.new : SolidQueue::Job.where(id: last_job_ids).pluck(:id).to_set
+      end
+
+      def failed_job_ids
+        @failed_job_ids ||=
+          last_job_ids.empty? ? Set.new : SolidQueue::FailedExecution.where(job_id: last_job_ids).pluck(:job_id).to_set
+      end
+  end
+end

data/app/views/flightdeck/jobs/_failed_row.html.erb

@@ -0,0 +1,33 @@
+<tr id="<%= dom_id_for_job(row.id) %>">
+  <td>
+    <input type="checkbox" name="job_ids[]" value="<%= row.id %>"
+           data-selection-target="row" data-action="selection#refresh"
+           data-group="<%= group_key %>"
+           aria-label="Select <%= row.class_name %> #<%= row.id %>">
+  </td>
+  <td class="cls">
+    <%= link_to row.class_name, job_path(row.id, state: :failed),
+                data: { turbo_frame: "_top" } %>
+    <div class="args"><%= fd_args_preview(row.args_preview) %></div>
+  </td>
+  <%# Inside a group the header already names the exception class, so the row
+      shows only the message. %>
+  <td class="args" style="max-width:260px" title="<%= row.error_summary.to_s %>">
+    <%= fd_error_cell(row.error_summary, grouped: group_key.present?) %>
+  </td>
+  <td><%= fd_queue_badge(row.queue_name) %></td>
+  <td class="num"><%= row.attempts || "—" %></td>
+  <td class="num dim"><%= row.failed_at ? fd_ago(row.failed_at) : "—" %></td>
+  <td class="num">
+    <%= link_to "Retry", retry_job_path(row.id, list_filters.merge(state: :failed)),
+          class: "fd-btn sm", data: {
+            turbo_method: :post,
+            turbo_confirm: "Retry #{row.class_name} ##{row.id}?"
+          } %>
+    <%= link_to "Discard", discard_job_path(row.id, list_filters.merge(state: :failed)),
+          class: "fd-btn sm danger", data: {
+            turbo_method: :post,
+            turbo_confirm: "Permanently discard #{row.class_name} ##{row.id}? This cannot be undone."
+          } %>
+  </td>
+</tr>

data/app/views/flightdeck/jobs/_filter_bar.html.erb

@@ -0,0 +1,29 @@
+<%= form_with url: jobs_path, method: :get, class: "fd-filterbar", data: { turbo_action: "advance" } do |form| %>
+  <%= form.hidden_field :state, value: params[:state], id: "fd-filter-state" %>
+  <%= form.search_field :q, value: params[:q],
+        placeholder: "Search job class…",
+        "aria-label": "Search jobs by class name" %>
+  <%= form.text_field :queue_name, value: params[:queue_name],
+        placeholder: "Queue", "aria-label": "Filter by queue" %>
+  <%= form.submit "Filter", class: "fd-btn" %>
+
+  <% if query.filters? %>
+    <%= link_to jobs_path(state: params[:state].presence), class: "fd-chip" do %>
+      clear filters <u>&#10005;</u>
+    <% end %>
+  <% end %>
+
+  <% if query.state == :failed %>
+    <span class="spacer"></span>
+    <%# Grouped so the pair wraps as a unit rather than the second button
+        dropping onto a line of its own. %>
+    <div class="fd-filterbar-actions">
+      <%= button_to "Retry all matching", bulk_retry_jobs_path(list_filters.merge(scope: "all", state: :failed)),
+            class: "fd-btn", form_class: "fd-inline-form",
+            data: { turbo_confirm: "Retry up to #{number_with_delimiter(Flightdeck.config.bulk_action_limit)} failed jobs matching this filter?" } %>
+      <%= button_to "Discard all matching", bulk_discard_jobs_path(list_filters.merge(scope: "all", state: :failed)),
+            class: "fd-btn danger", form_class: "fd-inline-form",
+            data: { turbo_confirm: "Permanently discard up to #{number_with_delimiter(Flightdeck.config.bulk_action_limit)} failed jobs matching this filter? This cannot be undone." } %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/flightdeck/jobs/_list.html.erb

@@ -0,0 +1,89 @@
+<% if query.state == :failed %>
+  <%= form_with url: bulk_retry_jobs_path(list_filters.merge(state: :failed)), method: :post,
+                data: { controller: "selection" } do |form| %>
+    <div class="fd-bulkbar" data-selection-target="bar" hidden>
+      <span><b data-selection-target="count">0</b> selected</span>
+      <button type="submit" class="fd-btn sm primary"
+              data-turbo-confirm="Retry the selected jobs?">Retry selected</button>
+      <button type="submit" class="fd-btn sm danger"
+              formaction="<%= bulk_discard_jobs_path(list_filters.merge(state: :failed)) %>"
+              data-turbo-confirm="Permanently discard the selected jobs? This cannot be undone.">Discard selected</button>
+      <span class="spacer"></span>
+      <button type="submit" name="scope" value="all" class="fd-btn sm"
+              data-turbo-confirm="Retry all failed jobs matching the current filter?">
+        or apply to all <%= fd_count(query.count, capped: query.count_capped?) %> matching
+      </button>
+    </div>
+
+    <div class="fd-card">
+      <div class="fd-scroll-x">
+        <table class="fd-data">
+          <thead>
+            <tr>
+              <th style="width:34px">
+                <input type="checkbox" data-selection-target="all" data-action="selection#toggleAll"
+                       aria-label="Select all failed jobs on this page">
+              </th>
+              <th>Job</th>
+              <th>Error</th>
+              <th>Queue</th>
+              <th class="num">Attempts</th>
+              <th class="num">Failed</th>
+              <th style="width:150px"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% if rows.empty? %>
+              <tr><td colspan="7"><div class="fd-empty">No failed jobs<%= " match this filter" if query.filters? %>.</div></td></tr>
+            <% elsif groups.present? %>
+              <% groups.each do |group| %>
+                <tr class="fd-group-row">
+                  <td colspan="7">
+                    <%= group.key.upcase %> &middot; <%= pluralize(group.count, "job") %> on this page
+                    <% if group.last_failed_at %>&middot; last <%= fd_ago(group.last_failed_at) %><% end %>
+                    &nbsp;&middot;&nbsp;
+                    <button type="button" class="fd-linkish"
+                            data-action="selection#selectGroup"
+                            data-selection-group-param="<%= group.key %>">select group</button>
+                  </td>
+                </tr>
+                <%= render partial: "flightdeck/jobs/failed_row", collection: group.rows, as: :row,
+                           locals: { group_key: group.key } %>
+              <% end %>
+            <% else %>
+              <%= render partial: "flightdeck/jobs/failed_row", collection: rows, as: :row,
+                         locals: { group_key: nil } %>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      <%= render "flightdeck/jobs/pager", query: query, noun: "failed job" %>
+    </div>
+  <% end %>
+<% else %>
+  <div class="fd-card">
+    <div class="fd-scroll-x">
+      <table class="fd-data">
+        <thead>
+          <tr>
+            <th>Job</th>
+            <th>Queue</th>
+            <th>State</th>
+            <th class="num">Priority</th>
+            <th class="num">Enqueued</th>
+            <th class="num">Progress</th>
+            <th style="width:90px"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% if rows.empty? %>
+            <tr><td colspan="7"><div class="fd-empty">No jobs<%= " match this filter" if query.filters? %>.</div></td></tr>
+          <% else %>
+            <%= render partial: "flightdeck/jobs/row", collection: rows, as: :row %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+    <%= render "flightdeck/jobs/pager", query: query, noun: "job" %>
+  </div>
+<% end %>

data/app/views/flightdeck/jobs/_pager.html.erb

@@ -0,0 +1,22 @@
+<div class="fd-pager">
+  <span>
+    <%= fd_count(query.count, capped: query.count_capped?) %> <%= noun.pluralize %><%
+      %><% if query.count_capped? %> · counts capped at <%= number_with_delimiter(query.count_cap) %><% end %>
+  </span>
+  <div class="right">
+    <% if params[:before_id].present? %>
+      <%= link_to "‹ Newest", jobs_path(list_filters.merge(state: params[:state].presence).compact),
+                  class: "fd-btn sm" %>
+    <% else %>
+      <span class="fd-btn sm disabled" aria-disabled="true">‹ Newest</span>
+    <% end %>
+
+    <% if query.next_page? %>
+      <%= link_to "Older ›",
+                  jobs_path(list_filters.merge(state: params[:state].presence, before_id: query.next_cursor).compact),
+                  class: "fd-btn sm" %>
+    <% else %>
+      <span class="fd-btn sm disabled" aria-disabled="true">Older ›</span>
+    <% end %>
+  </div>
+</div>

data/app/views/flightdeck/jobs/_row.html.erb

@@ -0,0 +1,23 @@
+<tr id="<%= dom_id_for_job(row.id) %>">
+  <td class="cls">
+    <%= link_to row.class_name, job_path(row.id, state: params[:state].presence),
+                data: { turbo_frame: "_top" } %>
+    <div class="args"><%= fd_args_preview(row.args_preview) %></div>
+  </td>
+  <td><%= fd_queue_badge(row.queue_name) %></td>
+  <td><%= fd_state_pill(row.state) %></td>
+  <td class="num"><%= row.priority %></td>
+  <td class="num dim"><%= fd_time(row.enqueued_at) %></td>
+  <td class="num dim"><%= fd_progress_label(row) %></td>
+  <td class="num">
+    <% if row.failed? %>
+      <%= button_to "Retry", retry_job_path(row.id, list_filters.merge(state: :failed)),
+            class: "fd-btn sm", form_class: "fd-inline-form",
+            data: { turbo_confirm: "Retry #{row.class_name} ##{row.id}?" } %>
+    <% elsif row.discardable? %>
+      <%= button_to "Discard", discard_job_path(row.id, list_filters.merge(state: row.state)),
+            class: "fd-btn sm danger", form_class: "fd-inline-form",
+            data: { turbo_confirm: "Permanently discard #{row.class_name} ##{row.id}? This cannot be undone." } %>
+    <% end %>
+  </td>
+</tr>

data/app/views/flightdeck/jobs/_state_tabs.html.erb

@@ -0,0 +1,10 @@
+<div class="fd-statetabs">
+  <% Flightdeck::JobsQuery::STATES.each do |state| %>
+    <% counts = state_counts[state] %>
+    <%= link_to jobs_path(list_filters.merge(state: state == :all ? nil : state).compact),
+                class: ("on" if @query.state == state) do %>
+      <%= fd_state_label(state) %>
+      <span class="ct"><%= fd_count(counts[:count], capped: counts[:capped]) %></span>
+    <% end %>
+  <% end %>
+</div>

data/app/views/flightdeck/jobs/actions/create.turbo_stream.erb

@@ -0,0 +1,18 @@
+<turbo-stream action="append" target="fd-toasts">
+  <template><%= render partial: "flightdeck/shared/toast", formats: [ :html ], locals: { toast: @toast } %></template>
+</turbo-stream>
+
+<%# Re-render the list the action was launched from, so counts, rows and the
+    state tabs all settle in the same round trip. A page that has no jobs frame
+    (the job detail page, say) simply ignores this stream. %>
+<turbo-stream action="replace" target="fd-jobs">
+  <template>
+    <turbo-frame id="fd-jobs"
+                 data-controller="refresh"
+                 data-refresh-interval-value="<%= (Flightdeck.config.poll_interval.to_f * 1000).round %>"
+                 data-refresh-url-value="<%= fd_refreshed_list_url %>">
+      <%= render partial: "flightdeck/jobs/list", formats: [ :html ],
+                 locals: { query: @refreshed_query, rows: @refreshed_rows, groups: @refreshed_groups } %>
+    </turbo-frame>
+  </template>
+</turbo-stream>

data/app/views/flightdeck/jobs/index.html.erb

@@ -0,0 +1,13 @@
+<% content_for :page_title, "Jobs" %>
+
+<%= render "flightdeck/jobs/state_tabs", state_counts: @state_counts %>
+<%= render "flightdeck/jobs/filter_bar", query: @query %>
+
+<%# The frame re-requests the URL it is showing, so state, filters and cursor
+    all survive a poll. %>
+<turbo-frame id="fd-jobs"
+             data-controller="refresh"
+             data-refresh-interval-value="<%= (Flightdeck.config.poll_interval.to_f * 1000).round %>"
+             data-refresh-url-value="<%= fd_current_list_url %>">
+  <%= render "flightdeck/jobs/list", query: @query, rows: @rows, groups: @groups %>
+</turbo-frame>

data/app/views/flightdeck/jobs/show.html.erb

@@ -0,0 +1,100 @@
+<% content_for :page_title, "Job ##{@job.id}" %>
+
+<div class="fd-jd-head">
+  <div class="t">
+    <h2><%= @job.class_name %></h2>
+    <div class="sub">
+      job #<%= number_with_delimiter(@job.id) %>
+      <% if @job.active_job_id.present? %>· active_job <%= @job.active_job_id %><% end %>
+    </div>
+  </div>
+  <%= fd_state_pill(@job.state) %>
+  <div class="actions">
+    <% if @job.retryable? %>
+      <%= button_to "↻ Retry now", retry_job_path(@job.id), class: "fd-btn primary", form_class: "fd-inline-form",
+            data: { turbo_confirm: "Retry #{@job.class_name} ##{@job.id}?" } %>
+    <% end %>
+    <% if @job.discardable? %>
+      <%= button_to "Discard", discard_job_path(@job.id, state: @job.state), class: "fd-btn danger",
+            form_class: "fd-inline-form",
+            data: { turbo_confirm: "Permanently discard #{@job.class_name} ##{@job.id}? This cannot be undone." } %>
+    <% end %>
+    <%= link_to "Back to jobs", jobs_path(state: params[:state].presence), class: "fd-btn" %>
+  </div>
+</div>
+
+<div class="fd-grid-jd">
+  <div class="fd-stack">
+    <% if @job.failed? %>
+      <div class="fd-card fd-error-box">
+        <div class="fd-card-hd">
+          <h3>Error</h3>
+          <span class="sub">failed <%= fd_full_time(@job.execution&.created_at) %></span>
+        </div>
+        <div class="msg">
+          <b><%= @job.error_class.presence || "Unknown error" %>:</b>
+          <%= @job.error_message.presence || "(no message recorded)" %>
+        </div>
+        <% if @job.backtrace.any? %>
+          <details class="fd-bt" open>
+            <summary>
+              Backtrace · <%= pluralize(@job.backtrace_total, "frame") %><%
+                %><% if @job.backtrace_truncated? %> (showing <%= @job.backtrace.size %>)<% end %> · app frames highlighted
+            </summary>
+            <pre class="fd-code"><% @job.backtrace_frames.each do |frame| %><%
+              %><% if frame[:app] %><span class="app-line"><%= frame[:line] %></span><% else %><%= frame[:line] %><% end %>
+<% end %></pre>
+          </details>
+        <% end %>
+      </div>
+    <% end %>
+
+    <div class="fd-card">
+      <div class="fd-card-hd">
+        <h3>Arguments</h3>
+        <div class="right sub">
+          <%= number_to_human_size(@job.arguments_bytes) %>
+          <% if @job.arguments_truncated? %>· truncated for display<% end %>
+        </div>
+      </div>
+      <pre class="fd-code"><%= @job.arguments_preview %></pre>
+      <% if @job.arguments_truncated? %>
+        <div class="fd-card-bd">
+          <p class="fd-mono">Showing the first <%= number_to_human_size(Flightdeck::JobDetail::ARGUMENTS_DISPLAY_LIMIT) %>
+          of <%= number_to_human_size(@job.arguments_bytes) %>. Arguments are shown exactly as stored and are never deserialized.</p>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="fd-card">
+      <div class="fd-card-hd"><h3>Metadata</h3></div>
+      <div class="fd-meta-grid">
+        <div><div class="k">Queue</div><div class="v"><%= fd_queue_badge(@job.queue_name) %></div></div>
+        <div><div class="k">Priority</div><div class="v"><%= @job.priority %></div></div>
+        <div><div class="k">Enqueued</div><div class="v"><%= fd_full_time(@job.enqueued_at) %></div></div>
+        <div><div class="k">Scheduled</div><div class="v"><%= @job.scheduled_at ? fd_full_time(@job.scheduled_at) : "—" %></div></div>
+        <div><div class="k">Finished</div><div class="v"><%= @job.finished_at ? fd_full_time(@job.finished_at) : "—" %></div></div>
+        <div><div class="k">Active job ID</div><div class="v mono"><%= @job.active_job_id.presence || "—" %></div></div>
+        <div><div class="k">Concurrency key</div><div class="v mono"><%= @job.concurrency_key.presence || "—" %></div></div>
+        <div><div class="k">Worker</div><div class="v mono"><%= @job.process_label || "—" %></div></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="fd-card">
+    <div class="fd-card-hd"><h3>Timeline</h3></div>
+    <div class="fd-timeline">
+      <% @job.timeline.each do |event| %>
+        <div class="fd-tl-item <%= event.status %>">
+          <div class="fd-tl-dot"></div>
+          <div class="fd-tl-body">
+            <div class="t"><%= event.label %></div>
+            <div class="d">
+              <%= event.at ? fd_full_time(event.at) : "—" %><% if event.detail.present? %> · <%= event.detail %><% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/flightdeck/metrics/_bar_chart.html.erb

@@ -0,0 +1,34 @@
+<svg class="fd-chart" viewBox="0 0 <%= chart.width %> <%= chart.height %>"
+     preserveAspectRatio="xMidYMid meet" role="img"
+     aria-label="Jobs finished <%= chart.window.subtitle %>">
+  <% chart.gridlines.each do |line| %>
+    <line x1="<%= chart.plot_left %>" x2="<%= chart.plot_right %>"
+          y1="<%= line[:y] %>" y2="<%= line[:y] %>" class="fd-chart-grid"/>
+    <text x="<%= chart.plot_left - 6 %>" y="<%= line[:y] + 3 %>" class="fd-chart-label" text-anchor="end"><%= line[:label] %></text>
+  <% end %>
+
+  <% chart.bars.each do |bar| %>
+    <g>
+      <title><%= bar[:title] %></title>
+      <%# A transparent full-height rect gives every bucket — including empty
+          ones — a hover target for its native tooltip. %>
+      <rect x="<%= bar[:x] %>" y="<%= chart.plot_top %>" width="<%= bar[:width] %>"
+            height="<%= chart.plot_height %>" fill="transparent"/>
+      <% if bar[:succeeded][:height].positive? %>
+        <rect x="<%= bar[:x] %>" y="<%= bar[:succeeded][:y] %>" width="<%= bar[:width] %>"
+              height="<%= bar[:succeeded][:height] %>" rx="<%= bar[:corner] %>" class="fd-chart-bar-succeeded"/>
+      <% end %>
+      <% if bar[:failed][:height].positive? %>
+        <rect x="<%= bar[:x] %>" y="<%= bar[:failed][:y] %>" width="<%= bar[:width] %>"
+              height="<%= bar[:failed][:height] %>" rx="<%= bar[:corner] %>" class="fd-chart-bar-failed"/>
+      <% end %>
+    </g>
+  <% end %>
+
+  <line x1="<%= chart.plot_left %>" x2="<%= chart.plot_right %>"
+        y1="<%= chart.plot_bottom %>" y2="<%= chart.plot_bottom %>" class="fd-chart-axis"/>
+
+  <% chart.x_ticks.each do |tick| %>
+    <text x="<%= tick[:x] %>" y="<%= chart.height - 6 %>" class="fd-chart-label" text-anchor="middle"><%= tick[:label] %></text>
+  <% end %>
+</svg>

data/app/views/flightdeck/metrics/_line_chart.html.erb

@@ -0,0 +1,38 @@
+<svg class="fd-chart" viewBox="0 0 <%= chart.width %> <%= chart.height %>"
+     preserveAspectRatio="xMidYMid meet" role="img"
+     aria-label="Average time to completion <%= chart.window.subtitle %>">
+  <% chart.gridlines.each do |line| %>
+    <line x1="<%= chart.plot_left %>" x2="<%= chart.plot_right %>"
+          y1="<%= line[:y] %>" y2="<%= line[:y] %>" class="fd-chart-grid"/>
+    <text x="<%= chart.plot_left - 6 %>" y="<%= line[:y] + 3 %>" class="fd-chart-label" text-anchor="end"><%= line[:label] %></text>
+  <% end %>
+
+  <% chart.segments.each do |segment| %>
+    <path d="<%= chart.area_path(segment) %>" class="fd-chart-area"/>
+    <path d="<%= chart.line_path(segment) %>" class="fd-chart-line"/>
+  <% end %>
+
+  <% chart.markers.each do |marker| %>
+    <g>
+      <title><%= marker[:title] %></title>
+      <circle cx="<%= marker[:x] %>" cy="<%= marker[:y] %>" r="7" fill="transparent"/>
+    </g>
+  <% end %>
+
+  <% if chart.last_marker %>
+    <circle cx="<%= chart.last_marker[:x] %>" cy="<%= chart.last_marker[:y] %>"
+            r="<%= Flightdeck::Metrics::LineChart::DOT_RADIUS %>" class="fd-chart-dot"/>
+  <% end %>
+
+  <line x1="<%= chart.plot_left %>" x2="<%= chart.plot_right %>"
+        y1="<%= chart.plot_bottom %>" y2="<%= chart.plot_bottom %>" class="fd-chart-axis"/>
+
+  <% chart.x_ticks.each do |tick| %>
+    <text x="<%= tick[:x] %>" y="<%= chart.height - 6 %>" class="fd-chart-label" text-anchor="middle"><%= tick[:label] %></text>
+  <% end %>
+
+  <% unless chart.any_data? %>
+    <text x="<%= chart.plot_left + (chart.plot_width / 2) %>" y="<%= chart.plot_top + (chart.plot_height / 2) %>"
+          class="fd-chart-label" text-anchor="middle">no jobs finished in this window</text>
+  <% end %>
+</svg>

data/app/views/flightdeck/metrics/_range_control.html.erb

@@ -0,0 +1,7 @@
+<div class="fd-seg">
+  <% Flightdeck::Metrics::Series::WINDOWS.each_value do |option| %>
+    <%= link_to option.label, root_path(range: option.key),
+                class: ("on" if option.key == window.key),
+                data: { turbo_action: "advance" } %>
+  <% end %>
+</div>

data/app/views/flightdeck/metrics/_sparkline.html.erb

@@ -0,0 +1,9 @@
+<% if sparkline.any? %>
+  <svg class="fd-sparkline" viewBox="0 0 <%= sparkline.width %> <%= sparkline.height %>"
+       preserveAspectRatio="none" aria-hidden="true">
+    <path d="<%= sparkline.area_path %>" class="fd-spark-area"/>
+    <path d="<%= sparkline.line_path %>" class="fd-spark-line" vector-effect="non-scaling-stroke"/>
+  </svg>
+<% else %>
+  <div class="fd-spark-placeholder" aria-hidden="true"></div>
+<% end %>