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
hyperdxio · Jul 16, 2024 · 01b7d46 · 01b7d46
1 parent 90a5ca7
commit 01b7d46
Show file tree

Hide file tree

Showing 20 changed files with 564 additions and 403 deletions.
diff --git a/.changeset/tricky-moles-talk.md b/.changeset/tricky-moles-talk.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+New date range picker
diff --git a/packages/app/.storybook/preview.tsx b/packages/app/.storybook/preview.tsx
@@ -7,6 +7,7 @@ import { NextAdapter } from 'next-query-params';
 
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import '@mantine/dates/styles.css';
 
 import '../styles/globals.css';
 import '../styles/app.scss';

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -24,6 +24,8 @@
     "@hyperdx/lucene": "^3.1.1",
     "@lezer/highlight": "^1.2.0",
     "@mantine/core": "7.9.2",
+    "@mantine/dates": "^7.11.2",
+    "@mantine/form": "^7.11.2",
     "@mantine/hooks": "7.9.2",
     "@mantine/notifications": "^7.9.2",
     "@mantine/spotlight": "7.9.2",
@@ -56,7 +58,6 @@
     "react-bootstrap-range-slider": "^3.0.8",
     "react-copy-to-clipboard": "^5.1.0",
     "react-csv": "^2.2.2",
-    "react-datepicker": "^4.10.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-grid-layout": "^1.3.4",
@@ -99,7 +100,6 @@
     "@types/react": "18.2.23",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-csv": "^1.1.3",
-    "@types/react-datepicker": "^4.10.0",
     "@types/react-dom": "^18.2.18",
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-syntax-highlighter": "^13.5.2",

diff --git a/packages/app/pages/_app.tsx b/packages/app/pages/_app.tsx
@@ -19,6 +19,7 @@ import { useBackground, useUserPreferences } from '@/useUserPreferences';
 
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import '@mantine/dates/styles.css';
 import '@styles/globals.css';
 import '@styles/app.scss';
 

diff --git a/packages/app/src/DashboardPage.tsx b/packages/app/src/DashboardPage.tsx
@@ -41,6 +41,8 @@ import {
 } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
+import { TimePicker } from '@/components/TimePicker';
+
 import { Icon } from './components/Icon';
 import { useDashboardRefresh } from './hooks/useDashboardRefresh';
 import api from './api';
@@ -56,7 +58,6 @@ import { dashboardToTerraform, dashboardToTerraformImport } from './iacUtils';
 import { withAppNav } from './layout';
 import { LogTableWithSidePanel } from './LogTableWithSidePanel';
 import SearchInput from './SearchInput';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import { FloppyIcon, TerraformFlatIcon } from './SVGIcons';
 import { Tags } from './Tags';
 import { parseTimeQuery, useNewTimeQuery } from './timeQuery';
@@ -1143,7 +1144,7 @@ export default function DashboardPage({
                 }}
                 style={{ height: 33 }}
               >
-                <SearchTimeRangePicker
+                <TimePicker
                   inputValue={input}
                   setInputValue={setInput}
                   onSearch={range => {

diff --git a/packages/app/src/EditChartForm.tsx b/packages/app/src/EditChartForm.tsx
@@ -13,6 +13,8 @@ import {
   Tooltip,
 } from '@mantine/core';
 
+import { TimePicker } from '@/components/TimePicker';
+
 import { ColorSwatchInput } from './components/ColorSwatchInput';
 import { NumberFormatInput } from './components/NumberFormat';
 import { intervalToGranularity } from './Alert';
@@ -37,7 +39,6 @@ import HDXMultiSeriesTableChart from './HDXMultiSeriesTableChart';
 import HDXMultiSeriesTimeChart from './HDXMultiSeriesTimeChart';
 import HDXNumberChart from './HDXNumberChart';
 import { LogTableWithSidePanel } from './LogTableWithSidePanel';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import type { Alert, Chart, ChartSeries, TimeChartSeries } from './types';
 import { useDebounce } from './utils';
 
@@ -456,7 +457,7 @@ export const EditNumberChartForm = ({
             displayedTimeInputValue != null &&
             onTimeRangeSearch != null && (
               <div className="ms-3 flex-grow-1" style={{ maxWidth: 360 }}>
-                <SearchTimeRangePicker
+                <TimePicker
                   inputValue={displayedTimeInputValue}
                   setInputValue={setDisplayedTimeInputValue}
                   onSearch={range => {
@@ -622,7 +623,7 @@ export const EditTableChartForm = ({
           displayedTimeInputValue != null &&
           onTimeRangeSearch != null && (
             <div className="ms-3 flex-grow-1" style={{ maxWidth: 360 }}>
-              <SearchTimeRangePicker
+              <TimePicker
                 inputValue={displayedTimeInputValue}
                 setInputValue={setDisplayedTimeInputValue}
                 onSearch={range => {
@@ -853,7 +854,7 @@ export const EditHistogramChartForm = ({
             displayedTimeInputValue != null &&
             onTimeRangeSearch != null && (
               <div className="ms-3 flex-grow-1" style={{ maxWidth: 360 }}>
-                <SearchTimeRangePicker
+                <TimePicker
                   inputValue={displayedTimeInputValue}
                   setInputValue={setDisplayedTimeInputValue}
                   onSearch={range => {
@@ -1413,7 +1414,7 @@ export const EditLineChartForm = ({
             displayedTimeInputValue != null &&
             onTimeRangeSearch != null && (
               <div className="ms-3 flex-grow-1" style={{ maxWidth: 420 }}>
-                <SearchTimeRangePicker
+                <TimePicker
                   inputValue={displayedTimeInputValue}
                   setInputValue={setDisplayedTimeInputValue}
                   onSearch={range => {

diff --git a/packages/app/src/KubernetesDashboardPage.tsx b/packages/app/src/KubernetesDashboardPage.tsx
@@ -19,6 +19,8 @@ import {
   Tooltip,
 } from '@mantine/core';
 
+import { TimePicker } from '@/components/TimePicker';
+
 import { FormatPodStatus } from './components/KubeComponents';
 import api from './api';
 import {
@@ -34,7 +36,6 @@ import NamespaceDetailsSidePanel from './NamespaceDetailsSidePanel';
 import NodeDetailsSidePanel from './NodeDetailsSidePanel';
 import PodDetailsSidePanel from './PodDetailsSidePanel';
 import HdxSearchInput from './SearchInput';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import { parseTimeQuery, useTimeQuery } from './timeQuery';
 import { KubePhase } from './types';
 import { formatNumber, formatUptime } from './utils';
@@ -863,7 +864,7 @@ export default function KubernetesDashboardPage() {
               onSearch(displayedTimeInputValue);
             }}
           >
-            <SearchTimeRangePicker
+            <TimePicker
               inputValue={displayedTimeInputValue}
               setInputValue={setDisplayedTimeInputValue}
               onSearch={range => {

diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
@@ -486,7 +486,7 @@ export const NetworkBody = ({
 /**
  * Keyboard shortcuts
  */
-const Kbd = ({ children }: { children: string }) => (
+export const Kbd = ({ children }: { children: string }) => (
   <div className={styles.kbd}>{children}</div>
 );
 

diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx
@@ -33,6 +33,8 @@ import {
 import { ActionIcon, Indicator } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 
+import { TimePicker } from '@/components/TimePicker';
+
 import { ErrorBoundary } from './components/ErrorBoundary';
 import api from './api';
 import CreateLogAlertModal from './CreateLogAlertModal';
@@ -44,7 +46,6 @@ import SaveSearchModal from './SaveSearchModal';
 import SearchInput from './SearchInput';
 import { SearchPageFilters, ToggleFilterButton } from './SearchPage.components';
 import SearchPageActionBar from './SearchPageActionBar';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import { Tags } from './Tags';
 import { useTimeQuery } from './timeQuery';
 import { useDisplayedColumns } from './useDisplayedColumns';
@@ -777,7 +778,7 @@ function SearchPage() {
               className="ms-2 w-100 d-flex"
               style={{ maxWidth: 360, height: 36 }}
             >
-              <SearchTimeRangePicker
+              <TimePicker
                 inputValue={displayedTimeInputValue}
                 setInputValue={setDisplayedTimeInputValue}
                 onSearch={rangeStr => {