diff --git a/README.md b/README.md index b48d8ef7..1aedc2b5 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ For complete Parseable API documentation, refer to [Parseable API workspace on P - + diff --git a/src/components/Header/TimeRange.tsx b/src/components/Header/TimeRange.tsx index a6de4252..b3f0d229 100644 --- a/src/components/Header/TimeRange.tsx +++ b/src/components/Header/TimeRange.tsx @@ -1,5 +1,5 @@ import useMountedState from '@/hooks/useMountedState'; -import { Box, Button, Divider, Menu, NumberInput, Stack, Text, UnstyledButton, px } from '@mantine/core'; +import { Box, Button, Divider, Menu, NumberInput, Stack, Text, Tooltip, UnstyledButton, px } from '@mantine/core'; import { DateTimePicker } from '@mantine/dates'; import { IconChevronLeft, IconChevronRight, IconClock } from '@tabler/icons-react'; import dayjs from 'dayjs'; @@ -10,7 +10,7 @@ import classes from './styles/LogQuery.module.css'; import { useOuterClick } from '@/hooks/useOuterClick'; import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider'; -const {setTimeRange, setshiftInterval} = logsStoreReducers; +const { setTimeRange, setshiftInterval } = logsStoreReducers; type FixedDurations = (typeof FIXED_DURATIONS)[number]; const { @@ -20,18 +20,18 @@ const { fixedRangeBtn, fixedRangeBtnSelected, customRangeContainer, - shiftIntervalContainer + shiftIntervalContainer, } = classes; const TimeRange: FC = () => { - const [timeRange, setLogsStore] = useLogsStore(store => store.timeRange); - const {label, shiftInterval, interval, startTime, endTime, type} = timeRange; + const [timeRange, setLogsStore] = useLogsStore((store) => store.timeRange); + const { label, shiftInterval, interval, startTime, endTime, type } = timeRange; const handleOuterClick = useCallback((event: any) => { - const targetClassNames: string[] = event.target?.classList || []; + const targetClassNames: string[] = event.target?.classList || []; const maybeSubmitBtnClassNames: string[] = event.target.closest('button')?.classList || []; const classNames: string[] = [ - ...(typeof targetClassNames[Symbol.iterator] === 'function' ? [...targetClassNames] : []), - ...(typeof maybeSubmitBtnClassNames[Symbol.iterator] === 'function' ? [...maybeSubmitBtnClassNames] : []), + ...(typeof targetClassNames[Symbol.iterator] === 'function' ? [...targetClassNames] : []), + ...(typeof maybeSubmitBtnClassNames[Symbol.iterator] === 'function' ? [...maybeSubmitBtnClassNames] : []), ]; const shouldIgnoreClick = classNames.some((className) => { return ( @@ -60,9 +60,9 @@ const TimeRange: FC = () => { const onSetShiftInterval = useCallback((val: number | string) => { if (typeof val === 'number') { - setLogsStore(store => setshiftInterval(store, val)) + setLogsStore((store) => setshiftInterval(store, val)); } - }, []) + }, []); const shiftTimeRange = (direction: 'left' | 'right') => { const changeInMs = shiftInterval * 60 * 1000; @@ -79,26 +79,33 @@ const TimeRange: FC = () => { setTimeRange(store, { startTime: dayjs(newStartTime), endTime: dayjs(newEndTime), type: 'custom' }), ); } - } + }; + + const shiftLabelPrefix = `Shift ${shiftInterval} Mins`; return ( - shiftTimeRange('left')}> - - - - shiftTimeRange('right')}> - - + + shiftTimeRange('left')}> + + + + + + + + shiftTimeRange('right')}> + + + @@ -143,7 +150,7 @@ type CustomTimeRangeProps = { setOpened: (opened: boolean) => void; }; const CustomTimeRange: FC = ({ setOpened }) => { - const [{startTime, endTime} ,setLogsStore] = useLogsStore(store => store.timeRange) + const [{ startTime, endTime }, setLogsStore] = useLogsStore((store) => store.timeRange); const [localSelectedRange, setLocalSelectedRange] = useMountedState({ startTime, @@ -183,7 +190,7 @@ const CustomTimeRange: FC = ({ setOpened }) => { return ( - Custom Range + Custom Range - {`${startTime.format('DD MMM YY HH:mm A')} - ${endTime.format('DD MMM YY HH:mm A')}`} + {`${startTime.format('DD MMM YY hh:mm A')} - ${endTime.format('DD MMM YY hh:mm A')}`} Events diff --git a/src/pages/Stream/providers/LogsProvider.tsx b/src/pages/Stream/providers/LogsProvider.tsx index 6cd02e96..2bd0e446 100644 --- a/src/pages/Stream/providers/LogsProvider.tsx +++ b/src/pages/Stream/providers/LogsProvider.tsx @@ -116,14 +116,14 @@ const getDefaultTimeRange = (duration: FixedDuration = DEFAULT_FIXED_DURATIONS) const startTime = now.subtract(milliseconds, 'milliseconds'); const endTime = now; - const startTimeLabel = dayjs(startTime).format('HH:mm A DD MMM YY'); - const endTimeLabel = dayjs(endTime).format('HH:mm A DD MMM YY'); + const startTimeLabel = dayjs(startTime).format('hh:mm A DD MMM YY'); + const endTimeLabel = dayjs(endTime).format('hh:mm A DD MMM YY'); return { startTime: startTime.toDate(), endTime: now.toDate(), type: 'fixed' as 'fixed', - label: `${startTimeLabel} - ${endTimeLabel}`, + label: `${startTimeLabel} to ${endTimeLabel}`, interval: milliseconds, shiftInterval: 1, }; @@ -327,7 +327,7 @@ const setTimeRange = ( payload: { startTime: dayjs.Dayjs; endTime: Dayjs; type: 'fixed' | 'custom' }, ) => { const { startTime, endTime, type } = payload; - const label = `${startTime.format('HH:mm A DD MMM YY')} to ${endTime.format('HH:mm A DD MMM YY')}`; + const label = `${startTime.format('hh:mm A DD MMM YY')} to ${endTime.format('hh:mm A DD MMM YY')}`; const interval = endTime.diff(startTime, 'milliseconds'); return { ...getCleanStoreForRefetch(store),
URLhttps://demo.parseable.iohttps://demo.parseable.com
Username