@orsetra/shared-ui 1.10.16 → 1.10.17

package/components/ui/index.ts

@@ -49,6 +49,7 @@ export { Popover, PopoverTrigger, PopoverContent } from './popover'
 export { Progress } from './progress'
 export { RadioGroup, RadioGroupItem } from './radio-group'
 export { RelativeTimeRangePicker, type RelativeTimeRangeOption, type RelativeTimeRangePickerProps } from './relative-time-range-picker'
+export { TimeRangePicker, resolveTimeRange, type TimeRangeValue, type TimeRangePickerProps } from './time-range-picker'
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './resizable'
 export { ScrollArea, ScrollBar } from './scroll-area'
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator } from './select'

package/components/ui/time-range-picker.tsx

@@ -0,0 +1,251 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronDown, Clock } from "lucide-react"
+import type { DateRange } from "react-day-picker"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+import { Calendar } from "./calendar"
+import { Input } from "./input"
+import type { RelativeTimeRangeOption } from "./relative-time-range-picker"
+
+export type { RelativeTimeRangeOption }
+
+/**
+ * A relative window ("last N seconds", resolved against "now" on every fetch/refresh) or a
+ * fixed absolute one (a specific start/end, in epoch seconds — doesn't move on refresh).
+ */
+export type TimeRangeValue =
+  | { mode: "relative"; seconds: number }
+  | { mode: "absolute"; from: number; to: number }
+
+/** Turns either shape into the `{start, end}` window callers actually query with. */
+export function resolveTimeRange(value: TimeRangeValue): { start: number; end: number } {
+  if (value.mode === "absolute") {
+    return { start: Math.min(value.from, value.to), end: Math.max(value.from, value.to) }
+  }
+  const end = Math.floor(Date.now() / 1000)
+  return { start: end - value.seconds, end }
+}
+
+export interface TimeRangePickerProps {
+  id?: string
+  value: TimeRangeValue
+  onChange: (value: TimeRangeValue) => void
+  options: RelativeTimeRangeOption[]
+  disabled?: boolean
+  className?: string
+  /** Popover alignment relative to the trigger. Defaults to "end" (picker anchored right — the
+   * common placement next to a panel's close button). */
+  align?: "start" | "center" | "end"
+  /** Accessible name and popover heading. Defaults to "Time range". */
+  triggerLabel?: string
+}
+
+const DAY_SECONDS = 24 * 60 * 60
+
+// Refreshed periodically (see the interval effect below) so a relative selection's label
+// doesn't drift far from reality if the picker is left open for a while without changing.
+const REFRESH_INTERVAL_MS = 30_000
+
+const timeFormatter = new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", hour12: false })
+const dayFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" })
+
+function formatSince(sinceMs: number, isDayScale: boolean): string {
+  const date = new Date(sinceMs)
+  const time = timeFormatter.format(date)
+  return isDayScale ? `Since ${dayFormatter.format(date)}, ${time}` : `Since ${time}`
+}
+
+function formatAbsolute(fromSec: number, toSec: number): string {
+  const from = new Date(fromSec * 1000)
+  const to = new Date(toSec * 1000)
+  const sameDay = from.toDateString() === to.toDateString()
+  const fromStr = `${dayFormatter.format(from)}, ${timeFormatter.format(from)}`
+  const toStr = sameDay ? timeFormatter.format(to) : `${dayFormatter.format(to)}, ${timeFormatter.format(to)}`
+  return `${fromStr} → ${toStr}`
+}
+
+function toLocalDateInputParts(sec: number): { date: Date; time: string } {
+  const d = new Date(sec * 1000)
+  const hh = String(d.getHours()).padStart(2, "0")
+  const mm = String(d.getMinutes()).padStart(2, "0")
+  return { date: d, time: `${hh}:${mm}` }
+}
+
+function combineDateAndTime(date: Date, time: string): number {
+  const [hh, mm] = time.split(":").map(n => parseInt(n, 10) || 0)
+  const d = new Date(date)
+  d.setHours(hh, mm, 0, 0)
+  return Math.floor(d.getTime() / 1000)
+}
+
+/**
+ * Flyout time-range picker with two tabs — Relative (a gallery of fixed windows, "20m"/"1h"/...)
+ * and Absolute (a date-range calendar plus start/end time-of-day) — for the cases where a
+ * relative-only picker (`RelativeTimeRangePicker`) isn't enough, e.g. inspecting a specific past
+ * incident window rather than "the last N minutes".
+ */
+export function TimeRangePicker({
+  id,
+  value,
+  onChange,
+  options,
+  disabled = false,
+  className,
+  align = "end",
+  triggerLabel = "Time range",
+}: TimeRangePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [tab, setTab] = React.useState<"relative" | "absolute">(value.mode)
+
+  // Draft absolute selection — only committed to `onChange` on "Apply", so picking a start date
+  // doesn't fire a query before the end date/time are set too.
+  const [draftRange, setDraftRange] = React.useState<DateRange | undefined>(() =>
+    value.mode === "absolute"
+      ? { from: toLocalDateInputParts(value.from).date, to: toLocalDateInputParts(value.to).date }
+      : undefined
+  )
+  const [draftStartTime, setDraftStartTime] = React.useState(() =>
+    value.mode === "absolute" ? toLocalDateInputParts(value.from).time : "00:00"
+  )
+  const [draftEndTime, setDraftEndTime] = React.useState(() =>
+    value.mode === "absolute" ? toLocalDateInputParts(value.to).time : "23:59"
+  )
+
+  // Re-seed the draft from the live value whenever the popover opens, so reopening it doesn't
+  // show a stale in-progress edit from last time.
+  React.useEffect(() => {
+    if (!open) return
+    setTab(value.mode)
+    if (value.mode === "absolute") {
+      const from = toLocalDateInputParts(value.from)
+      const to = toLocalDateInputParts(value.to)
+      setDraftRange({ from: from.date, to: to.date })
+      setDraftStartTime(from.time)
+      setDraftEndTime(to.time)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  const relativeSelected = value.mode === "relative" ? options.find(o => o.seconds === value.seconds) : undefined
+
+  const [now, setNow] = React.useState(() => Date.now())
+  React.useEffect(() => { setNow(Date.now()) }, [value, open])
+  React.useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), REFRESH_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [])
+
+  const triggerText = value.mode === "relative"
+    ? (relativeSelected ? formatSince(now - relativeSelected.seconds * 1000, relativeSelected.seconds >= DAY_SECONDS) : "Select…")
+    : formatAbsolute(value.from, value.to)
+
+  const applyAbsolute = () => {
+    if (!draftRange?.from) return
+    const from = combineDateAndTime(draftRange.from, draftStartTime)
+    const to = combineDateAndTime(draftRange.to ?? draftRange.from, draftEndTime)
+    onChange({ mode: "absolute", from, to })
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          type="button"
+          variant="secondary"
+          size="sm"
+          disabled={disabled}
+          aria-label={triggerLabel}
+          className={cn("rounded-none", className)}
+          leftIcon={<Clock className="h-3.5 w-3.5" />}
+          rightIcon={<ChevronDown className="h-3.5 w-3.5 opacity-60" />}
+        >
+          {triggerText}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={align} sideOffset={6} className="w-auto rounded-none p-0">
+        <div className="flex border-b border-ibm-gray-20">
+          {(["relative", "absolute"] as const).map(t => (
+            <button
+              key={t}
+              type="button"
+              onClick={() => setTab(t)}
+              className={cn(
+                "flex-1 h-9 px-4 text-sm font-medium border-b-2 -mb-px transition-colors capitalize",
+                tab === t
+                  ? "border-ibm-blue-60 text-ibm-blue-60 bg-ibm-blue-10/60"
+                  : "border-transparent text-ibm-gray-60 hover:text-ibm-blue-60 hover:bg-ibm-blue-10/40"
+              )}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+
+        {tab === "relative" ? (
+          <div className="p-2">
+            <p className="px-1 pb-2 text-xs font-medium text-ibm-gray-50">{triggerLabel}</p>
+            <div role="listbox" aria-label={triggerLabel} className="grid grid-cols-3 gap-1.5">
+              {options.map(opt => {
+                const isSelected = value.mode === "relative" && opt.seconds === value.seconds
+                return (
+                  <button
+                    key={opt.seconds}
+                    type="button"
+                    role="option"
+                    aria-selected={isSelected}
+                    onClick={() => { onChange({ mode: "relative", seconds: opt.seconds }); setOpen(false) }}
+                    className={cn(
+                      "flex items-center justify-center gap-1 h-9 px-2 text-sm font-medium border transition-colors whitespace-nowrap",
+                      isSelected
+                        ? "bg-ibm-blue-60 text-white border-ibm-blue-60"
+                        : "bg-white text-ibm-gray-100 border-ibm-gray-20 hover:bg-ibm-blue-10 hover:border-ibm-blue-40"
+                    )}
+                  >
+                    {isSelected && <Check className="h-3 w-3 flex-shrink-0" />}
+                    {opt.label}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        ) : (
+          <div className="p-3 space-y-3">
+            <Calendar
+              mode="range"
+              selected={draftRange}
+              onSelect={setDraftRange}
+              numberOfMonths={1}
+              className="mx-auto"
+            />
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-ibm-gray-50 mb-1">Start time</label>
+                <Input type="time" value={draftStartTime} onChange={e => setDraftStartTime(e.target.value)} />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-ibm-gray-50 mb-1">End time</label>
+                <Input type="time" value={draftEndTime} onChange={e => setDraftEndTime(e.target.value)} />
+              </div>
+            </div>
+            <div className="flex justify-end pt-1">
+              <Button
+                type="button"
+                variant="primary"
+                className="rounded-none"
+                disabled={!draftRange?.from}
+                onClick={applyAbsolute}
+              >
+                Apply
+              </Button>
+            </div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.10.16",
+  "version": "1.10.17",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",