Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Timerange btn UI fixes #255

Merged
merged 3 commits into from
Jun 23, 2024
Merged

Timerange btn UI fixes #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bdf2bbc
readme - updated the demo app url
balaji-jr Jun 18, 2024
c281f86
added tooltips for timerange btns
balaji-jr Jun 22, 2024
00573f0
use 12hr format in event timeline chart tooltip
balaji-jr Jun 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ For complete Parseable API documentation, refer to [Parseable API workspace on P
<table>
<tr>
<td>URL</td>
<td><a href="https://demo.parseable.io" target="_blank">https://demo.parseable.io</a></td>
<td><a href="https://demo.parseable.io" target="_blank">https://demo.parseable.com</a></td>
</tr>
<tr>
<td>Username</td>
Expand Down
61 changes: 34 additions & 27 deletions src/components/Header/TimeRange.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {
Expand All @@ -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 (
Expand Down Expand Up @@ -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;
Expand All @@ -79,26 +79,33 @@ const TimeRange: FC = () => {
setTimeRange(store, { startTime: dayjs(newStartTime), endTime: dayjs(newEndTime), type: 'custom' }),
);
}
}
};

const shiftLabelPrefix = `Shift ${shiftInterval} Mins`;

return (
<Menu withArrow position="top" opened={opened}>
<Menu.Target>
<Stack className={classes.timeRangeBtnContainer}>
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('left')}>
<IconChevronLeft stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
</Stack>
<Button
className={timeRangeBTn}
leftSection={<IconClock size={px('1rem')} stroke={1.5} />}
onClick={toggleMenu}
styles={{label: {fontSize: '0.65rem', fontWeight: 600}}}
>
{FIXED_DURATIONS_LABEL[label] || label}
</Button>
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('right')}>
<IconChevronRight stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
</Stack>
<Tooltip label={`${shiftLabelPrefix} Back`}>
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('left')}>
<IconChevronLeft stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
</Stack>
</Tooltip>
<Tooltip label="In Local Browser Time">
<Button
className={timeRangeBTn}
leftSection={<IconClock size={px('1rem')} stroke={1.5} />}
onClick={toggleMenu}
styles={{ label: { fontSize: '0.65rem', fontWeight: 600 } }}>
{FIXED_DURATIONS_LABEL[label] || label}
</Button>
</Tooltip>
<Tooltip label={`${shiftLabelPrefix} Forward`}>
<Stack className={classes.timeRangeCtrlIcon} onClick={() => shiftTimeRange('right')}>
<IconChevronRight stroke={2} size="1rem" style={{ cursor: 'pointer' }} />
</Stack>
</Tooltip>
</Stack>
</Menu.Target>
<Menu.Dropdown>
Expand Down Expand Up @@ -143,7 +150,7 @@ type CustomTimeRangeProps = {
setOpened: (opened: boolean) => void;
};
const CustomTimeRange: FC<CustomTimeRangeProps> = ({ setOpened }) => {
const [{startTime, endTime} ,setLogsStore] = useLogsStore(store => store.timeRange)
const [{ startTime, endTime }, setLogsStore] = useLogsStore((store) => store.timeRange);

const [localSelectedRange, setLocalSelectedRange] = useMountedState({
startTime,
Expand Down Expand Up @@ -183,7 +190,7 @@ const CustomTimeRange: FC<CustomTimeRangeProps> = ({ setOpened }) => {

return (
<Fragment>
<Text style={{fontSize: '0.7rem', fontWeight: 500}}>Custom Range</Text>
<Text style={{ fontSize: '0.7rem', fontWeight: 500 }}>Custom Range</Text>
<DateTimePicker
error={isStartTimeMoreThenEndTime ? 'Start time cannot be greater than the end time' : ''}
maxDate={new Date()}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Stream/components/EventTimeLineGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ function ChartTooltip({ payload }: ChartTooltipProps) {
return (
<Paper px="md" py="sm" withBorder shadow="md" radius="md">
<Text fw={600} mb={5}>
{`${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')}`}
</Text>
<Stack style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text>Events</Text>
Expand Down
8 changes: 4 additions & 4 deletions src/pages/Stream/providers/LogsProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand Down Expand Up @@ -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),
Expand Down