diff --git a/.changeset/live-tail-time-picker-presets.md b/.changeset/live-tail-time-picker-presets.md new file mode 100644 index 0000000000..2ecda5bc0b --- /dev/null +++ b/.changeset/live-tail-time-picker-presets.md @@ -0,0 +1,7 @@ +--- +'@hyperdx/app': patch +--- + +fix: expand live tail time picker presets to 6h and clarify switch label + +Enable 3h and 6h presets in live tail mode (previously capped at 1h in the picker, though longer ranges already worked via URL). Ranges above 6h remain disabled because the refresh tick (10s default) re-queries the full window, and 12–24h scans would be excessive. Rename the toggle switch from "Relative Time" to "Live tail ranges" to clarify that it controls which preset intervals are available, not whether live tail is active. Add a "Not available for Live Tail" tooltip to disabled presets (12h+). diff --git a/packages/app/src/components/TimePicker/TimePicker.stories.tsx b/packages/app/src/components/TimePicker/TimePicker.stories.tsx index 67f248ec7b..0596a5add5 100644 --- a/packages/app/src/components/TimePicker/TimePicker.stories.tsx +++ b/packages/app/src/components/TimePicker/TimePicker.stories.tsx @@ -22,3 +22,20 @@ export const Default = () => { /> ); }; + +export const LiveTail = () => { + const [value, setValue] = React.useState('Live Tail'); + + return ( + {}} + onRelativeSearch={_rangeMs => { + // no-op: story only exercises the picker UI + }} + showLive + isLiveMode + /> + ); +}; diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx index e7b0871e42..fe10393425 100644 --- a/packages/app/src/components/TimePicker/TimePicker.tsx +++ b/packages/app/src/components/TimePicker/TimePicker.tsx @@ -330,7 +330,7 @@ const TimePickerComponent = ({ size="xs" checked={isRelative} onChange={e => setIsRelative(e.currentTarget.checked)} - label="Relative Time" + label="Live tail ranges" labelPosition="right" styles={{ label: { @@ -367,18 +367,24 @@ const TimePickerComponent = ({ - {relativeTimeOptions.map((item, index) => - item === 'divider' ? ( - - ) : ( + {relativeTimeOptions.map((item, index) => { + if (item === 'divider') { + return ; + } + const isDisabledForLiveTail = + isRelative && !item[2] && item[0] !== LIVE_TAIL_TIME_QUERY; + const button = ( - ), - )} + ); + if (isDisabledForLiveTail) { + return ( + + {button} + + ); + } + return button; + })} diff --git a/packages/app/src/components/TimePicker/utils.ts b/packages/app/src/components/TimePicker/utils.ts index b0e5e78540..ab21fb5117 100644 --- a/packages/app/src/components/TimePicker/utils.ts +++ b/packages/app/src/components/TimePicker/utils.ts @@ -99,8 +99,8 @@ export const RELATIVE_TIME_OPTIONS: ( ['Last 45 minutes', ms('45m'), true], 'divider', ['Last 1 hour', ms('1h'), true], - ['Last 3 hours', ms('3h')], - ['Last 6 hours', ms('6h')], + ['Last 3 hours', ms('3h'), true], + ['Last 6 hours', ms('6h'), true], ['Last 12 hours', ms('12h')], 'divider', ['Last 1 days', ms('1d')], diff --git a/packages/app/tests/e2e/features/search/relative-time.spec.ts b/packages/app/tests/e2e/features/search/relative-time.spec.ts index c719df278f..43397c64d9 100644 --- a/packages/app/tests/e2e/features/search/relative-time.spec.ts +++ b/packages/app/tests/e2e/features/search/relative-time.spec.ts @@ -42,9 +42,9 @@ test.describe('Relative Time Picker', { tag: '@relative-time' }, () => { }); test('should show Live Tail option in relative time mode', async () => { - const liveTailButton = searchPage.page - .locator('text=Live Tail') - .locator('..'); + const liveTailButton = searchPage.timePicker.popover.getByRole('button', { + name: 'Live Tail', + }); await expect(liveTailButton).toBeVisible(); }); });