Filtering message by timestamp - entering a unix nano timestamp crashes the page

[seanmiller-zeroflucs]

The timestamp entered in the UI was 1730176462000000000.

This resulted in the following:

Type:
RangeError

Message:
Invalid time value

Stack (Decoded):
format (../node_modules/date-fns/esm/format/index.js:349:10)
dateTimeLocalized (../node_modules/@redpanda-data/ui/src/components/Inputs/DateTimeInput/DateTimeInput.tsx:99:31)
c (../node_modules/react-dom/cjs/react-dom.profiling.min.js:182:136)
li (../node_modules/react-dom/cjs/react-dom.profiling.min.js:320:342)
Jl (../node_modules/react-dom/cjs/react-dom.profiling.min.js:306:128)
Il (../node_modules/react-dom/cjs/react-dom.profiling.min.js:305:302)
Hl (../node_modules/react-dom/cjs/react-dom.profiling.min.js:305:157)
vl (../node_modules/react-dom/cjs/react-dom.profiling.min.js:295:110)
Al (../node_modules/react-dom/cjs/react-dom.profiling.min.js:297:311)
d (../node_modules/react-dom/cjs/react-dom.profiling.min.js:142:104)

Stack (Raw):
RangeError: Invalid time value
at format (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:5305138)
at DateTimeInput (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:618633)
at li (https://xxxx.com/static/js/683.318f1823.chunk.js:2:65305)
at ga (https://xxxx.com/static/js/683.318f1823.chunk.js:2:129037)
at Il (https://xxxx.com/static/js/683.318f1823.chunk.js:2:115848)
at Hl (https://xxxx.com/static/js/683.318f1823.chunk.js:2:115669)
at vl (https://xxxx.com/static/js/683.318f1823.chunk.js:2:115527)
at Al (https://xxxx.com/static/js/683.318f1823.chunk.js:2:111930)
at rl (https://xxxx.com/static/js/683.318f1823.chunk.js:2:112333)
at xg (https://xxxx.com/static/js/683.318f1823.chunk.js:2:48917)

Components:

at DateTimeInput (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:617727)
at StartOffsetDateTimePicker (https://xxxx.com/static/js/721.7453b142.chunk.js:1:507195)
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at Flex2 (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:350428)
at div
at div
at Label (https://xxxx.com/static/js/721.7453b142.chunk.js:1:749949)
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at GridItem2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:71195)
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at Grid2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:68884)
at observerComponent (https://xxxx.com/static/js/8014.de04ca2f.chunk.js:2:84304)
at TopicMessageView (https://xxxx.com/static/js/721.7453b142.chunk.js:1:483479)
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at TabPanel2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:149590)
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at TabPanels2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:149823)
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at Tabs2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:148643)
at Tabs_Tabs (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:201878)
at Tabs (https://xxxx.com/static/js/721.7453b142.chunk.js:1:108193)
at section
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at Section (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:191727)
at Section
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:352498
at div
at VisualElementHandler (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:538732)
at MotionComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:539382)
at PageContent (https://xxxx.com/static/js/721.7453b142.chunk.js:1:6870)
at TopicDetails (https://xxxx.com/static/js/721.7453b142.chunk.js:1:552248)
at Route (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:171986)
at Switch (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:173060)
at PresenceChild (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:531235)
at AnimatePresence (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:531926)
at RouteView
at observerComponent (https://xxxx.com/static/js/8014.de04ca2f.chunk.js:2:84304)
at div
at observerComponent (https://xxxx.com/static/js/8014.de04ca2f.chunk.js:2:84304)
at main
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at Container2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:75634)
at div
at https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12458
at ChakraComponent (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:448028)
at Grid2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:68884)
at Switch (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:173060)
at RequireAuth (https://xxxx.com/static/js/6253.ace7eadb.chunk.js:1:32076)
at ErrorBoundary (https://xxxx.com/static/js/6253.ace7eadb.chunk.js:1:1090)
at EnvironmentProvider (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:402189)
at ColorModeProvider (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:984)
at ThemeProvider (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:12854)
at ThemeProvider (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:451186)
at ChakraProvider (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:3688)
at ChakraProvider2 (https://xxxx.com/static/js/4799.160285b1.chunk.js:281:4235)
at Router (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:168846)
at BrowserRouter (https://xxxx.com/static/js/4695.285c6ea2.chunk.js:2:163464)
at observerComponent (https://xxxx.com/static/js/8014.de04ca2f.chunk.js:2:84304)

Environment:
NODE_ENV : production
GIT_SHA : 308c414ee88238f0ef0139b58fe285b6552a5d9a
GIT_REF : master
BUILD_TIMESTAMP : 1725620020
PLATFORM_VERSION: v24.2
BUILT_FROM_PUSH : false

Location:
Protocol: https:
Path : /topics/lxxxx
Search :
Hash :

[weeco]

Hey could you please test this with the latest Docker image to see if this is still happening in more recent versions? I remember we had a couple fixes around the datetime component. Could you also add a screenshot or video to make sure we understand the issue (unsure how you are filtering by timestamp or whether you provided the timestamp as a start offset)

Docker image:

redpandadata/console-unstable:master-601212b