Class: Clowk::Phlex::Charts::RangePicker

Inherits:
Clowk::Phlex::Component show all
Defined in:
lib/clowk/phlex/charts/range_picker.rb

Overview

Components::Metrics::RangePicker — time-range control for the metrics charts. The segmented preset pills (1m / 5m / 15m / 1h / 6h / 24h / 7d) stay visually identical to before; a trailing "Custom" chip opens a From/Until popover (mirrors the Logs Analytics filter) so an operator can pin an ABSOLUTE past window instead of a rolling "last N". Custom is the focus — the presets are shortcuts that seed the custom dates.

Mechanics: ONE GET form driven by the shared time-range-filter Stimulus controller (preset↔custom highlight, local→UTC normalisation on submit). Presets are now buttons (they requestSubmit the form) instead of links, but carry the same segmented chrome. The form targets _top with turbo_action advance: the whole page re-renders so BOTH the subtitle ("last 1h" → the custom window) and the chart frame reflect the new window — the same full-navigation outcome the old pills gave, minus the hard reload.

Constant Summary collapse

RANGES = 
%w[1m 5m 15m 1h 6h 24h 7d].freeze
CHIP_ACTIVE = 
"border-clowk-accent-line bg-clowk-accent-dim text-clowk-accent-2"
CHIP_INACTIVE = 
"border-clowk-border bg-clowk-surface text-clowk-text-2 hover:bg-clowk-surface-2 hover:text-clowk-text"

Instance Method Summary collapse

Constructor Details

#initialize(range:, custom: false, from_iso: nil, until_iso: nil, extra_params: {}, base_path: nil, turbo_stream: false) ⇒ RangePicker

Returns a new instance of RangePicker.

Parameters:

  • range (String) —

    active preset key (ignored when custom)

  • custom (Boolean) (defaults to: false) —

    an explicit from/until window is in play

  • from_iso/until_iso (String) —

    resolved UTC window (custom round-trip)

  • extra_params (Hash) (defaults to: {}) —

    query params carried on every submit (scope_kind/scope_id/pid/interval) — MUST exclude range/from/until.

  • base_path (String) (defaults to: nil) —

    where the GET form submits. Defaults to metrics_path (the grid). The expand modal passes metrics_chart_path.

  • turbo_stream (Boolean) (defaults to: false) —

    modal mode: submit as a turbo-stream so the response swaps #chart-modal-body in place. Default false = the grid's full-page _top advance. Same knob as IntervalPicker — one range control serves both surfaces so the modal has the custom chip too.



35
36
37
38
39
40
41
42
43
 
# File 'lib/clowk/phlex/charts/range_picker.rb', line 35

def initialize(range:, custom: false, from_iso: nil, until_iso: nil, extra_params: {}, base_path: nil, turbo_stream: false)
  @range = range.to_s
  @custom = custom
  @from_iso = from_iso
  @until_iso = until_iso
  @extra_params = extra_params
  @base_path = base_path
  @turbo_stream = turbo_stream
end

Instance Method Details

#view_template ⇒ Object 



45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
# File 'lib/clowk/phlex/charts/range_picker.rb', line 45

def view_template
  form(
    method: "get",
    action: @base_path,
    data: {
      controller: "time-range-filter",
      time_range_filter_target: "form",
      time_range_filter_range_value: active_range,
      time_range_filter_from_value: @from_iso,
      time_range_filter_until_value: @until_iso,
      action: "submit->time-range-filter#normalizeDates",
      # Modal submits as a turbo-stream (swaps the modal body in place);
      # the grid advances the whole page in the top frame.
      **(@turbo_stream ? {turbo_stream: "true"} : {turbo_frame: "_top", turbo_action: "advance"})
    },
    class: "flex items-center gap-2"
  ) do
    input(type: "hidden", name: "range", value: active_range, data: {time_range_filter_target: "range"})

    @extra_params.each do |name, value|
      input(type: "hidden", name: name.to_s, value: value.to_s)
    end

    preset_group
    custom_chip
  end
end