Skip to content

Commit 01b7d46

Browse files
ernestiiernestii
authored
feat: New mighty date range picker (#476)
Brand new date range picker with new features: - More 1-click `Past N` options to choose from - Ability to move the search time window 1h back and 1h forward with 1 click - More robust start and end time inputs with natural language parsing - `Around a time` option: allow set a time anchor with a +- 15m/1h/1d/etc windor https://github.com/user-attachments/assets/1b01dea0-f150-44b6-9e4c-ea57d5ed6a63
1 parent 90a5ca7 commit 01b7d46

20 files changed

+564
-403
lines changed

‎.changeset/tricky-moles-talk.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@hyperdx/app': patch
3+
---
4+
5+
New date range picker

‎packages/app/.storybook/preview.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { NextAdapter } from 'next-query-params';
77

88
import '@mantine/core/styles.css';
99
import '@mantine/notifications/styles.css';
10+
import '@mantine/dates/styles.css';
1011

1112
import '../styles/globals.css';
1213
import '../styles/app.scss';

‎packages/app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
"@hyperdx/lucene": "^3.1.1",
2525
"@lezer/highlight": "^1.2.0",
2626
"@mantine/core": "7.9.2",
27+
"@mantine/dates": "^7.11.2",
28+
"@mantine/form": "^7.11.2",
2729
"@mantine/hooks": "7.9.2",
2830
"@mantine/notifications": "^7.9.2",
2931
"@mantine/spotlight": "7.9.2",
@@ -56,7 +58,6 @@
5658
"react-bootstrap-range-slider": "^3.0.8",
5759
"react-copy-to-clipboard": "^5.1.0",
5860
"react-csv": "^2.2.2",
59-
"react-datepicker": "^4.10.0",
6061
"react-dom": "^18.2.0",
6162
"react-error-boundary": "^3.1.4",
6263
"react-grid-layout": "^1.3.4",
@@ -99,7 +100,6 @@
99100
"@types/react": "18.2.23",
100101
"@types/react-copy-to-clipboard": "^5.0.2",
101102
"@types/react-csv": "^1.1.3",
102-
"@types/react-datepicker": "^4.10.0",
103103
"@types/react-dom": "^18.2.18",
104104
"@types/react-grid-layout": "^1.3.2",
105105
"@types/react-syntax-highlighter": "^13.5.2",

‎packages/app/pages/_app.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { useBackground, useUserPreferences } from '@/useUserPreferences';
1919

2020
import '@mantine/core/styles.css';
2121
import '@mantine/notifications/styles.css';
22+
import '@mantine/dates/styles.css';
2223
import '@styles/globals.css';
2324
import '@styles/app.scss';
2425

‎packages/app/src/DashboardPage.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ import {
4141
} from '@mantine/core';
4242
import { notifications } from '@mantine/notifications';
4343

44+
import { TimePicker } from '@/components/TimePicker';
45+
4446
import { Icon } from './components/Icon';
4547
import { useDashboardRefresh } from './hooks/useDashboardRefresh';
4648
import api from './api';
@@ -56,7 +58,6 @@ import { dashboardToTerraform, dashboardToTerraformImport } from './iacUtils';
5658
import { withAppNav } from './layout';
5759
import { LogTableWithSidePanel } from './LogTableWithSidePanel';
5860
import SearchInput from './SearchInput';
59-
import SearchTimeRangePicker from './SearchTimeRangePicker';
6061
import { FloppyIcon, TerraformFlatIcon } from './SVGIcons';
6162
import { Tags } from './Tags';
6263
import { parseTimeQuery, useNewTimeQuery } from './timeQuery';
@@ -1143,7 +1144,7 @@ export default function DashboardPage({
11431144
}}
11441145
style={{ height: 33 }}
11451146
>
1146-
<SearchTimeRangePicker
1147+
<TimePicker
11471148
inputValue={input}
11481149
setInputValue={setInput}
11491150
onSearch={range => {

‎packages/app/src/EditChartForm.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
Tooltip,
1414
} from '@mantine/core';
1515

16+
import { TimePicker } from '@/components/TimePicker';
17+
1618
import { ColorSwatchInput } from './components/ColorSwatchInput';
1719
import { NumberFormatInput } from './components/NumberFormat';
1820
import { intervalToGranularity } from './Alert';
@@ -37,7 +39,6 @@ import HDXMultiSeriesTableChart from './HDXMultiSeriesTableChart';
3739
import HDXMultiSeriesTimeChart from './HDXMultiSeriesTimeChart';
3840
import HDXNumberChart from './HDXNumberChart';
3941
import { LogTableWithSidePanel } from './LogTableWithSidePanel';
40-
import SearchTimeRangePicker from './SearchTimeRangePicker';
4142
import type { Alert, Chart, ChartSeries, TimeChartSeries } from './types';
4243
import { useDebounce } from './utils';
4344

@@ -456,7 +457,7 @@ export const EditNumberChartForm = ({
456457
displayedTimeInputValue != null &&
457458
onTimeRangeSearch != null && (
458459
<div className="ms-3 flex-grow-1" style={{ maxWidth: 360 }}>
459-
<SearchTimeRangePicker
460+
<TimePicker
460461
inputValue={displayedTimeInputValue}
461462
setInputValue={setDisplayedTimeInputValue}
462463
onSearch={range => {
@@ -622,7 +623,7 @@ export const EditTableChartForm = ({
622623
displayedTimeInputValue != null &&
623624
onTimeRangeSearch != null && (
624625
<div className="ms-3 flex-grow-1" style={{ maxWidth: 360 }}>
625-
<SearchTimeRangePicker
626+
<TimePicker
626627
inputValue={displayedTimeInputValue}
627628
setInputValue={setDisplayedTimeInputValue}
628629
onSearch={range => {
@@ -853,7 +854,7 @@ export const EditHistogramChartForm = ({
853854
displayedTimeInputValue != null &&
854855
onTimeRangeSearch != null && (
855856
<div className="ms-3 flex-grow-1" style={{ maxWidth: 360 }}>
856-
<SearchTimeRangePicker
857+
<TimePicker
857858
inputValue={displayedTimeInputValue}
858859
setInputValue={setDisplayedTimeInputValue}
859860
onSearch={range => {
@@ -1413,7 +1414,7 @@ export const EditLineChartForm = ({
14131414
displayedTimeInputValue != null &&
14141415
onTimeRangeSearch != null && (
14151416
<div className="ms-3 flex-grow-1" style={{ maxWidth: 420 }}>
1416-
<SearchTimeRangePicker
1417+
<TimePicker
14171418
inputValue={displayedTimeInputValue}
14181419
setInputValue={setDisplayedTimeInputValue}
14191420
onSearch={range => {

‎packages/app/src/KubernetesDashboardPage.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import {
1919
Tooltip,
2020
} from '@mantine/core';
2121

22+
import { TimePicker } from '@/components/TimePicker';
23+
2224
import { FormatPodStatus } from './components/KubeComponents';
2325
import api from './api';
2426
import {
@@ -34,7 +36,6 @@ import NamespaceDetailsSidePanel from './NamespaceDetailsSidePanel';
3436
import NodeDetailsSidePanel from './NodeDetailsSidePanel';
3537
import PodDetailsSidePanel from './PodDetailsSidePanel';
3638
import HdxSearchInput from './SearchInput';
37-
import SearchTimeRangePicker from './SearchTimeRangePicker';
3839
import { parseTimeQuery, useTimeQuery } from './timeQuery';
3940
import { KubePhase } from './types';
4041
import { formatNumber, formatUptime } from './utils';
@@ -863,7 +864,7 @@ export default function KubernetesDashboardPage() {
863864
onSearch(displayedTimeInputValue);
864865
}}
865866
>
866-
<SearchTimeRangePicker
867+
<TimePicker
867868
inputValue={displayedTimeInputValue}
868869
setInputValue={setDisplayedTimeInputValue}
869870
onSearch={range => {

‎packages/app/src/LogSidePanelElements.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ export const NetworkBody = ({
486486
/**
487487
* Keyboard shortcuts
488488
*/
489-
const Kbd = ({ children }: { children: string }) => (
489+
export const Kbd = ({ children }: { children: string }) => (
490490
<div className={styles.kbd}>{children}</div>
491491
);
492492

‎packages/app/src/SearchPage.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import {
3333
import { ActionIcon, Indicator } from '@mantine/core';
3434
import { notifications } from '@mantine/notifications';
3535

36+
import { TimePicker } from '@/components/TimePicker';
37+
3638
import { ErrorBoundary } from './components/ErrorBoundary';
3739
import api from './api';
3840
import CreateLogAlertModal from './CreateLogAlertModal';
@@ -44,7 +46,6 @@ import SaveSearchModal from './SaveSearchModal';
4446
import SearchInput from './SearchInput';
4547
import { SearchPageFilters, ToggleFilterButton } from './SearchPage.components';
4648
import SearchPageActionBar from './SearchPageActionBar';
47-
import SearchTimeRangePicker from './SearchTimeRangePicker';
4849
import { Tags } from './Tags';
4950
import { useTimeQuery } from './timeQuery';
5051
import { useDisplayedColumns } from './useDisplayedColumns';
@@ -777,7 +778,7 @@ function SearchPage() {
777778
className="ms-2 w-100 d-flex"
778779
style={{ maxWidth: 360, height: 36 }}
779780
>
780-
<SearchTimeRangePicker
781+
<TimePicker
781782
inputValue={displayedTimeInputValue}
782783
setInputValue={setDisplayedTimeInputValue}
783784
onSearch={rangeStr => {

0 commit comments

Comments
 (0)