good_job 4.19.2 → 4.19.4

data/app/frontend/good_job/modules/chart_controller.js

@@ -1,4 +1,7 @@
 import { Controller } from "stimulus"
+import { buildTimeZoneNameFormatter } from "timezone_name_formatter"
+
+const MINIMUM_RANGE_SELECTION_WIDTH = 8
 
 const generateListItem = (item) => {
   const li = document.createElement('li');
@@ -24,17 +27,23 @@ const generateListItem = (item) => {
   return li;
 }
 
-export default class extends Controller {
+export default class ChartController extends Controller {
   static values = {
     config: Object,
   }
   static targets = ["canvas", "legend"]
+  static LABEL_STYLE_DATE_TIME = "date_time"
+  static LABEL_STYLE_DATE_TIME_YEAR = "date_time_year"
+  static LABEL_STYLE_TIME_SECONDS = "time_seconds"
 
   connect() {
     this.#renderChart()
+    this.#connectRangeSelection()
   }
 
   disconnect() {
+    this.#disconnectRangeSelection()
+
     if (this.chart) {
       this.chart.destroy()
       this.chart = null
@@ -42,7 +51,10 @@ export default class extends Controller {
   }
 
   #renderChart(animate = true) {
-    const chartData = this.configValue
+    const {goodJob, ...chartData} = this.configValue
+    this.goodJobChart = goodJob || {}
+    this.#localizeTimeSeriesLabels(chartData)
+
     chartData.options ||= {}
 
     if (this.hasLegendTarget) {
@@ -85,4 +97,242 @@ export default class extends Controller {
     const ctx = this.canvasTarget.getContext('2d')
     this.chart = new Chart(ctx, chartData)
   }
+
+  #localizeTimeSeriesLabels(chartData) {
+    if (!this.goodJobChart.time_series) return
+
+    try {
+      const timestamps = this.goodJobChart.timestamps
+      const boundaryTimestamps = [this.goodJobChart.range_start, this.goodJobChart.range_end]
+      const dates = [...boundaryTimestamps, ...timestamps].map(timestamp => new Date(timestamp))
+      const representable = dates.every(date => {
+        const year = date.getFullYear()
+        return Number.isFinite(date.getTime()) && year >= 1000 && year <= 9999
+      })
+      if (!representable) return
+
+      const options = {
+        hour: "2-digit",
+        hourCycle: "h23",
+        minute: "2-digit",
+      }
+      if (this.goodJobChart.timestamp_label_style === ChartController.LABEL_STYLE_TIME_SECONDS) {
+        options.second = "2-digit"
+      }
+      if ([ChartController.LABEL_STYLE_DATE_TIME, ChartController.LABEL_STYLE_DATE_TIME_YEAR].includes(this.goodJobChart.timestamp_label_style)) {
+        options.day = "numeric"
+        options.month = "short"
+      }
+      if (this.goodJobChart.timestamp_label_style === ChartController.LABEL_STYLE_DATE_TIME_YEAR) {
+        options.year = "numeric"
+      }
+      const formatter = new Intl.DateTimeFormat(document.documentElement.lang, options)
+      if (!formatter.resolvedOptions().timeZone) return
+
+      const chartDates = dates.slice(boundaryTimestamps.length)
+      const labels = chartDates.map(date => formatter.format(date))
+      const timeZoneFormatter = buildTimeZoneNameFormatter(document.documentElement.lang)
+      if (!timeZoneFormatter) {
+        chartData.data.labels = labels
+        return
+      }
+
+      const timeZoneNames = chartDates.map(date => this.#timeZoneName(timeZoneFormatter, date))
+      const groupedIndices = labels.reduce((groups, label, index) => {
+        const indices = groups.get(label) || []
+        indices.push(index)
+        groups.set(label, indices)
+        return groups
+      }, new Map())
+
+      groupedIndices.forEach(indices => {
+        if (indices.length < 2) return
+
+        const names = indices.map(index => timeZoneNames[index]).filter(Boolean)
+        if (new Set(names).size < 2) return
+
+        indices.forEach(index => {
+          if (timeZoneNames[index]) labels[index] = `${labels[index]} ${timeZoneNames[index]}`
+        })
+      })
+
+      chartData.data.labels = labels
+    } catch (_error) {
+      // Preserve application-zone labels when browser localization is unavailable.
+    }
+  }
+
+  #timeZoneName(formatter, date) {
+    return formatter.formatToParts(date).find(part => part.type === "timeZoneName")?.value
+  }
+
+  #connectRangeSelection() {
+    if (!this.goodJobChart.time_series || this.goodJobChart.timestamps.length < 2) return
+
+    this.rangeSelectionPointerDown = this.#startRangeSelection.bind(this)
+    this.canvasTarget.addEventListener("pointerdown", this.rangeSelectionPointerDown)
+  }
+
+  #disconnectRangeSelection() {
+    if (this.rangeSelectionPointerDown) {
+      this.canvasTarget.removeEventListener("pointerdown", this.rangeSelectionPointerDown)
+      this.rangeSelectionPointerDown = null
+    }
+
+    this.#removeRangeSelectionEvents()
+    this.#removeRangeSelectionElement()
+  }
+
+  #startRangeSelection(event) {
+    if (event.button !== 0 || !this.#eventInChartArea(event)) return
+
+    event.preventDefault()
+
+    const position = this.#eventPosition(event)
+    this.rangeSelectionStartX = position.x
+    this.rangeSelectionCurrentX = position.x
+
+    this.rangeSelectionPointerMove = this.#updateRangeSelection.bind(this)
+    this.rangeSelectionPointerUp = this.#finishRangeSelection.bind(this)
+    this.rangeSelectionPointerCancel = this.#cancelRangeSelection.bind(this)
+
+    this.canvasTarget.setPointerCapture(event.pointerId)
+    this.canvasTarget.addEventListener("pointermove", this.rangeSelectionPointerMove)
+    this.canvasTarget.addEventListener("pointerup", this.rangeSelectionPointerUp)
+    this.canvasTarget.addEventListener("pointercancel", this.rangeSelectionPointerCancel)
+
+    this.#renderRangeSelection()
+  }
+
+  #updateRangeSelection(event) {
+    this.rangeSelectionCurrentX = this.#eventPosition(event).x
+    this.#renderRangeSelection()
+  }
+
+  #finishRangeSelection(event) {
+    this.rangeSelectionCurrentX = this.#eventPosition(event).x
+    this.#removeRangeSelectionEvents()
+    this.#removeRangeSelectionElement()
+
+    if (Math.abs(this.rangeSelectionCurrentX - this.rangeSelectionStartX) < MINIMUM_RANGE_SELECTION_WIDTH) return
+
+    const [startParameter, endParameter] = this.#selectedRange()
+    const startTime = new Date(startParameter).getTime()
+    const endTime = new Date(endParameter).getTime()
+    if (!startParameter || !endParameter || startTime >= endTime) return
+
+    const url = new URL(window.location.href)
+    url.searchParams.set("chart_start", startParameter)
+    url.searchParams.set("chart_end", endParameter)
+    url.searchParams.delete("chart_range")
+    url.searchParams.delete("after_at")
+    url.searchParams.delete("after_id")
+
+    if (window.Turbo) {
+      window.Turbo.visit(url.toString())
+    } else {
+      window.location.assign(url.toString())
+    }
+  }
+
+  #cancelRangeSelection() {
+    this.#removeRangeSelectionEvents()
+    this.#removeRangeSelectionElement()
+  }
+
+  #removeRangeSelectionEvents() {
+    if (this.rangeSelectionPointerMove) {
+      this.canvasTarget.removeEventListener("pointermove", this.rangeSelectionPointerMove)
+      this.rangeSelectionPointerMove = null
+    }
+
+    if (this.rangeSelectionPointerUp) {
+      this.canvasTarget.removeEventListener("pointerup", this.rangeSelectionPointerUp)
+      this.rangeSelectionPointerUp = null
+    }
+
+    if (this.rangeSelectionPointerCancel) {
+      this.canvasTarget.removeEventListener("pointercancel", this.rangeSelectionPointerCancel)
+      this.rangeSelectionPointerCancel = null
+    }
+  }
+
+  #renderRangeSelection() {
+    const chartArea = this.chart.chartArea
+    const startX = this.#clamp(this.rangeSelectionStartX, chartArea.left, chartArea.right)
+    const currentX = this.#clamp(this.rangeSelectionCurrentX, chartArea.left, chartArea.right)
+    const left = Math.min(startX, currentX)
+    const width = Math.abs(currentX - startX)
+    const selectionElement = this.#rangeSelectionElement()
+
+    selectionElement.style.left = `${left}px`
+    selectionElement.style.top = `${chartArea.top}px`
+    selectionElement.style.width = `${width}px`
+    selectionElement.style.height = `${chartArea.bottom - chartArea.top}px`
+  }
+
+  #rangeSelectionElement() {
+    if (!this.selectionElement) {
+      this.selectionElement = document.createElement("div")
+      this.selectionElement.className = "chart-range-selection"
+      this.canvasTarget.parentElement.appendChild(this.selectionElement)
+    }
+
+    return this.selectionElement
+  }
+
+  #removeRangeSelectionElement() {
+    if (this.selectionElement) {
+      this.selectionElement.remove()
+      this.selectionElement = null
+    }
+  }
+
+  #selectedRange() {
+    const chartArea = this.chart.chartArea
+    const startX = this.#clamp(this.rangeSelectionStartX, chartArea.left, chartArea.right)
+    const currentX = this.#clamp(this.rangeSelectionCurrentX, chartArea.left, chartArea.right)
+    const firstIndex = this.#timestampIndexForPixel(Math.min(startX, currentX))
+    const lastIndex = this.#timestampIndexForPixel(Math.max(startX, currentX))
+    const timestamps = this.goodJobChart.timestamps
+
+    // Clamp partial edge buckets to the exact page range so drag selection cannot
+    // widen the half-open interval represented by the toolbar and server query.
+    const firstBucketStart = new Date(timestamps[firstIndex]).getTime()
+    const rangeStart = new Date(this.goodJobChart.range_start).getTime()
+    const rangeEnd = new Date(this.goodJobChart.range_end).getTime()
+    const nextTimestamp = timestamps[lastIndex + 1]
+    const startParameter = firstBucketStart < rangeStart ? this.goodJobChart.range_start : timestamps[firstIndex]
+    const endParameter = nextTimestamp && new Date(nextTimestamp).getTime() < rangeEnd ?
+      nextTimestamp : this.goodJobChart.range_end
+
+    return [startParameter, endParameter]
+  }
+
+  #timestampIndexForPixel(pixel) {
+    const chartArea = this.chart.chartArea
+    const timestamps = this.goodJobChart.timestamps
+    const ratio = (pixel - chartArea.left) / (chartArea.right - chartArea.left)
+    const index = Math.round(ratio * (timestamps.length - 1))
+
+    return this.#clamp(index, 0, timestamps.length - 1)
+  }
+
+  #eventInChartArea(event) {
+    const position = this.#eventPosition(event)
+    const chartArea = this.chart.chartArea
+
+    return position.x >= chartArea.left &&
+      position.x <= chartArea.right &&
+      position.y >= chartArea.top &&
+      position.y <= chartArea.bottom
+  }
+
+  #eventPosition(event) {
+    return Chart.helpers.getRelativePosition(event, this.chart)
+  }
+
+  #clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max)
+  }
 }

data/app/frontend/good_job/modules/performance_range_controller.js

@@ -0,0 +1,321 @@
+import { Controller } from "stimulus"
+import { buildTimeZoneNameFormatter } from "timezone_name_formatter"
+import ChartController from "chart_controller"
+
+// Enhances the Performance range form while leaving parsing and validation authoritative on the server.
+export default class extends Controller {
+  static targets = [
+    "endCanonicalInput",
+    "endInput",
+    "endLabel",
+    "startCanonicalInput",
+    "startInput",
+    "startLabel",
+    "timeZoneInput",
+    "timeZoneLabel",
+  ]
+  static values = {
+    applicationTimeZone: String,
+    applicationTimeZoneIdentifier: String,
+    endFallback: String,
+    endLabel: String,
+    endTimestamp: String,
+    labelStyle: String,
+    maximum: String,
+    minimum: String,
+    startFallback: String,
+    startLabel: String,
+    startTimestamp: String,
+  }
+
+  // Rebuild from immutable server values so Turbo cache restoration cannot apply localization twice.
+  connect() {
+    this.#restoreApplicationTimeZoneFallback()
+    this.#configureFormatter()
+    this.#enhanceBrowserTimeZone()
+
+    this.loadedStartValue = this.startInputTarget.value
+    this.loadedEndValue = this.endInputTarget.value
+    this.backwardClockTransition = this.#crossesBackwardClockTransition()
+    this.#configureExactFormatter()
+    this.reciprocalConstraints =
+      !this.backwardClockTransition &&
+      this.startInputTarget.valueAsNumber < this.endInputTarget.valueAsNumber
+    this.constrain()
+  }
+
+  // Remember which civil endpoint must be resolved in the browser timezone by the server.
+  edit(event) {
+    if (this.browserTimeZone) event.currentTarget.dataset.performanceRangeEdited = "true"
+  }
+
+  // Prevent the native controls from accepting equal or reversed ordinary wall-clock endpoints.
+  constrain() {
+    const startMilliseconds = this.#civilMilliseconds(this.startInputTarget.value)
+    const endMilliseconds = this.#civilMilliseconds(this.endInputTarget.value)
+
+    // Offset-free native fields cannot order repeated wall-clock values. A reciprocal bound is
+    // only trustworthy once BOTH endpoints have moved away from their loaded values: deriving a
+    // bound from a single still-untouched endpoint of a known backward transition would apply
+    // plain civil-string arithmetic to a value that may represent either fold occurrence. Track
+    // this against the live field values (not the edited-tracking dataset flag, which is gated on
+    // browser-zone enhancement and can otherwise never fire) so the relaxation always lifts once
+    // the user has actually replaced both endpoints.
+    const bothEndpointsChanged =
+      this.startInputTarget.value !== this.loadedStartValue &&
+      this.endInputTarget.value !== this.loadedEndValue
+    if (
+      !this.reciprocalConstraints &&
+      !(this.backwardClockTransition && !bothEndpointsChanged) &&
+      startMilliseconds !== null &&
+      endMilliseconds !== null &&
+      startMilliseconds < endMilliseconds
+    ) {
+      this.reciprocalConstraints = true
+    }
+
+    if (this.reciprocalConstraints) {
+      this.startInputTarget.max = this.#offsetLocal(
+        this.endInputTarget.value,
+        -1,
+        this.maximumValue,
+      )
+      this.endInputTarget.min = this.#offsetLocal(
+        this.startInputTarget.value,
+        1,
+        this.minimumValue,
+      )
+    } else {
+      this.startInputTarget.max = this.maximumValue
+      this.endInputTarget.min = this.minimumValue
+    }
+
+    if (this.formatter) {
+      this.startLabelTarget.textContent = this.#formatEndpointLabel(
+        this.startInputTarget,
+        this.startTimestampValue,
+      )
+      this.endLabelTarget.textContent = this.#formatEndpointLabel(
+        this.endInputTarget,
+        this.endTimestampValue,
+      )
+    }
+  }
+
+  // Prepare every submission path, including an implicit submit that bypasses endpoint change.
+  prepareSubmission() {
+    if (this.browserTimeZone) {
+      const endpointPairs = [
+        [this.startInputTarget, this.startCanonicalInputTarget],
+        [this.endInputTarget, this.endCanonicalInputTarget],
+      ]
+      let edited = false
+
+      endpointPairs.forEach(([input, canonicalInput]) => {
+        if (input.dataset.performanceRangeEdited !== "true") return
+
+        canonicalInput.value = input.value
+        edited = true
+      })
+
+      if (edited) {
+        this.timeZoneInputTarget.value = this.browserTimeZone
+        this.timeZoneInputTarget.disabled = false
+      }
+    }
+  }
+
+  // Submit exact untouched endpoints and browser-local civil values only for edited endpoints.
+  submitRange() {
+    if (!this.element.checkValidity()) return
+
+    this.element.requestSubmit()
+  }
+
+  // Open the browser picker from a click on the rendered field when supported.
+  openPicker(event) {
+    const input = event.currentTarget
+    if (typeof input.showPicker !== "function") return
+
+    try {
+      input.focus()
+      input.showPicker()
+      event.preventDefault()
+    } catch (_error) {
+      // Let the input's native click behavior continue when showPicker is unavailable here.
+    }
+  }
+
+  #restoreApplicationTimeZoneFallback() {
+    this.browserTimeZone = null
+    this.startInputTarget.name = "chart_start"
+    this.endInputTarget.name = "chart_end"
+    this.startInputTarget.value = this.startFallbackValue
+    this.endInputTarget.value = this.endFallbackValue
+    delete this.startInputTarget.dataset.performanceRangeEdited
+    delete this.endInputTarget.dataset.performanceRangeEdited
+
+    this.startCanonicalInputTarget.value = this.startTimestampValue
+    this.startCanonicalInputTarget.disabled = true
+    this.endCanonicalInputTarget.value = this.endTimestampValue
+    this.endCanonicalInputTarget.disabled = true
+    this.timeZoneInputTarget.value = ""
+    this.timeZoneInputTarget.disabled = true
+
+    this.startLabelTarget.textContent = this.startLabelValue
+    this.endLabelTarget.textContent = this.endLabelValue
+    this.timeZoneLabelTarget.textContent = this.applicationTimeZoneValue
+  }
+
+  #configureFormatter() {
+    this.formatter = null
+
+    try {
+      // The input already represents a wall clock. UTC prevents Intl from shifting it again.
+      this.formatter = new Intl.DateTimeFormat(document.documentElement.lang, {
+        day: "numeric",
+        hour: "2-digit",
+        hourCycle: "h23",
+        minute: "2-digit",
+        month: "short",
+        second: "2-digit",
+        timeZone: "UTC",
+        ...(this.labelStyleValue === ChartController.LABEL_STYLE_DATE_TIME_YEAR ? { year: "numeric" } : {}),
+      })
+    } catch (_error) {
+      // Server-rendered application-zone values and labels remain accurate without Intl.
+    }
+  }
+
+  #configureExactFormatter() {
+    this.exactFormatter = null
+    if (!this.backwardClockTransition) return
+
+    // Render in whichever zone the fields are actually displaying — the browser zone once
+    // enhancement has activated, otherwise the application zone the fallback values came from.
+    // Without this override the formatter defaults to the runtime's own zone, which only
+    // coincidentally matches the displayed fields when enhancement is active.
+    this.exactFormatter = buildTimeZoneNameFormatter(document.documentElement.lang, {
+      day: "numeric",
+      hour: "2-digit",
+      hourCycle: "h23",
+      minute: "2-digit",
+      month: "short",
+      second: "2-digit",
+      timeZone: this.browserTimeZone || this.applicationTimeZoneIdentifierValue,
+      ...(this.labelStyleValue === ChartController.LABEL_STYLE_DATE_TIME_YEAR ? { year: "numeric" } : {}),
+    })
+  }
+
+  #enhanceBrowserTimeZone() {
+    if (!this.formatter) return
+
+    try {
+      const browserTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone
+      const startValue = this.#browserLocalValue(this.startTimestampValue)
+      const endValue = this.#browserLocalValue(this.endTimestampValue)
+      if (!browserTimeZone || !startValue || !endValue) return
+
+      this.startInputTarget.value = startValue
+      this.endInputTarget.value = endValue
+      this.startInputTarget.removeAttribute("name")
+      this.endInputTarget.removeAttribute("name")
+      this.startCanonicalInputTarget.disabled = false
+      this.endCanonicalInputTarget.disabled = false
+      this.timeZoneLabelTarget.textContent = browserTimeZone
+      this.browserTimeZone = browserTimeZone
+    } catch (_error) {
+      // Keep the whole control in its application-zone fallback when enhancement is unavailable.
+    }
+  }
+
+  #browserLocalValue(timestamp) {
+    const date = new Date(timestamp)
+    if (!Number.isFinite(date.getTime())) return null
+
+    const year = date.getFullYear()
+    if (year < 1000 || year > 9999) return null
+
+    return [
+      String(year).padStart(4, "0"),
+      "-",
+      String(date.getMonth() + 1).padStart(2, "0"),
+      "-",
+      String(date.getDate()).padStart(2, "0"),
+      "T",
+      String(date.getHours()).padStart(2, "0"),
+      ":",
+      String(date.getMinutes()).padStart(2, "0"),
+      ":",
+      String(date.getSeconds()).padStart(2, "0"),
+    ].join("")
+  }
+
+  // Convert a wall-clock value to a browser-zone-independent civil timestamp.
+  #civilMilliseconds(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value)
+    if (!match) return null
+
+    const [, year, month, day, hour, minute, second = "00"] = match
+    const milliseconds = Date.UTC(
+      Number(year),
+      Number(month) - 1,
+      Number(day),
+      Number(hour),
+      Number(minute),
+      Number(second),
+    )
+    const normalized = `${year}-${month}-${day}T${hour}:${minute}:${second}`
+
+    return this.#localValue(milliseconds) === normalized ? milliseconds : null
+  }
+
+  // Native civil fields cannot express the repeated hour in a backward clock transition.
+  // Intentionally checks the zone currently displayed in the inputs (browser zone after
+  // #enhanceBrowserTimeZone, application zone otherwise), not the server's Time.zone: the
+  // Ruby counterpart, GoodJob::PerformanceRange#backward_clock_transition?, makes the same
+  // check for its own (server-rendered) zone. Each must use its own zone, not the other's.
+  #crossesBackwardClockTransition() {
+    const exactStart = new Date(this.startTimestampValue).getTime()
+    const exactEnd = new Date(this.endTimestampValue).getTime()
+    const civilStart = this.#civilMilliseconds(this.startInputTarget.value)
+    const civilEnd = this.#civilMilliseconds(this.endInputTarget.value)
+    if (![exactStart, exactEnd, civilStart, civilEnd].every(Number.isFinite)) return false
+
+    return exactEnd - exactStart > civilEnd - civilStart
+  }
+
+  #formatLabel(value) {
+    const milliseconds = this.#civilMilliseconds(value)
+    return milliseconds === null ? "—" : this.formatter.format(new Date(milliseconds))
+  }
+
+  #formatEndpointLabel(input, timestamp) {
+    if (
+      this.exactFormatter &&
+      input.dataset.performanceRangeEdited !== "true"
+    ) {
+      const date = new Date(timestamp)
+      if (Number.isFinite(date.getTime())) return this.exactFormatter.format(date)
+    }
+
+    return this.#formatLabel(input.value)
+  }
+
+  // Move a civil value by whole seconds and clamp it to the four-digit-year bounds.
+  #offsetLocal(value, seconds, fallback) {
+    const milliseconds = this.#civilMilliseconds(value)
+    if (milliseconds === null) return fallback
+
+    const minimum = this.#civilMilliseconds(this.minimumValue)
+    const maximum = this.#civilMilliseconds(this.maximumValue)
+    const bounded = Math.min(maximum, Math.max(minimum, milliseconds + (seconds * 1000)))
+
+    return this.#localValue(bounded)
+  }
+
+  // Serialize a civil timestamp in the normalized shape expected by datetime-local.
+  #localValue(milliseconds) {
+    return new Date(milliseconds).toISOString().slice(0, 19)
+  }
+}

data/app/frontend/good_job/modules/timezone_name_formatter.js

@@ -0,0 +1,13 @@
+// Builds an Intl.DateTimeFormat that renders a time zone name, falling back
+// across the representations browsers support inconsistently.
+export function buildTimeZoneNameFormatter(locale, baseOptions = {}) {
+  for (const timeZoneName of ["shortOffset", "short"]) {
+    try {
+      return new Intl.DateTimeFormat(locale, { ...baseOptions, timeZoneName })
+    } catch (_error) {
+      // Try the next supported timezone-name representation.
+    }
+  }
+
+  return null
+}