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

Commit 59161e2

Browse files
praveen5959praveen5959
authored
feat: move timeRange to AppStore (#384)
1 parent 6af2086 commit 59161e2

23 files changed

+229
-215
lines changed

‎src/components/Header/RefreshInterval.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import { REFRESH_INTERVALS } from '@/constants/timeConstants';
77
import classes from './styles/LogQuery.module.css';
88
import { useLogsStore, logsStoreReducers } from '@/pages/Stream/providers/LogsProvider';
99
import _ from 'lodash';
10+
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
1011

1112
const { setRefreshInterval, getCleanStoreForRefetch } = logsStoreReducers;
13+
const { syncTimeRange } = appStoreReducers;
1214
const RefreshInterval: FC = () => {
15+
const [, setAppStore] = useAppStore((_store) => null);
1316
const [refreshInterval, setLogsStore] = useLogsStore((store) => store.refreshInterval);
1417
const Icon = useMemo(() => (refreshInterval ? IconRefresh : IconRefreshOff), [refreshInterval]);
1518
const timerRef = useRef<NodeJS.Timer | null>(null);
@@ -34,6 +37,7 @@ const RefreshInterval: FC = () => {
3437
clearIntervalInstance();
3538
if (refreshInterval !== null) {
3639
const intervalId = setInterval(() => {
40+
setAppStore(syncTimeRange);
3741
setLogsStore(getCleanStoreForRefetch);
3842
}, refreshInterval);
3943
timerRef.current = intervalId;

‎src/components/Header/RefreshNow.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@ import { IconReload } from '@tabler/icons-react';
33
import { useCallback, type FC } from 'react';
44
import { useLogsStore, logsStoreReducers } from '@/pages/Stream/providers/LogsProvider';
55
import IconButton from '../Button/IconButton';
6+
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
67

78
const { getCleanStoreForRefetch } = logsStoreReducers;
9+
const { syncTimeRange } = appStoreReducers;
810

911
const renderRefreshIcon = () => <IconReload size={px('1rem')} stroke={1.5} />;
1012

1113
const RefreshNow: FC = () => {
1214
const [, setLogsStore] = useLogsStore((_store) => null);
15+
const [, setAppStore] = useAppStore((_store) => null);
1316

1417
const onRefresh = useCallback(() => {
18+
setAppStore((store) => syncTimeRange(store));
1519
setLogsStore((store) => getCleanStoreForRefetch(store));
1620
}, []);
1721
return <IconButton size={38} renderIcon={renderRefreshIcon} onClick={onRefresh} tooltipLabel="Refresh now" />;

‎src/components/Header/TimeRange.tsx

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ import { Fragment, useCallback, useMemo, useRef, useState } from 'react';
88
import { FIXED_DURATIONS } from '@/constants/timeConstants';
99
import classes from './styles/LogQuery.module.css';
1010
import { useOuterClick } from '@/hooks/useOuterClick';
11-
import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
1211
import _ from 'lodash';
1312
import timeRangeUtils from '@/utils/timeRangeUtils';
13+
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
14+
import { logsStoreReducers, useLogsStore } from '@/pages/Stream/providers/LogsProvider';
1415

15-
const {getRelativeStartAndEndDate} = timeRangeUtils
16-
const { setTimeRange, setshiftInterval } = logsStoreReducers;
16+
const { getRelativeStartAndEndDate } = timeRangeUtils;
17+
const { setTimeRange, setshiftInterval } = appStoreReducers;
18+
const { getCleanStoreForRefetch } = logsStoreReducers;
1719
export type FixedDuration = (typeof FIXED_DURATIONS)[number];
1820

1921
const { timeRangeContainer, fixedRangeBtn, fixedRangeBtnSelected, customRangeContainer, shiftIntervalContainer } =
@@ -40,7 +42,8 @@ const RelativeTimeIntervals = (props: {
4042
};
4143

4244
const TimeRange: FC = () => {
43-
const [timeRange, setLogsStore] = useLogsStore((store) => store.timeRange);
45+
const [timeRange, setAppStore] = useAppStore((store) => store.timeRange);
46+
const [, setLogStore] = useLogsStore((_store) => null);
4447
const { label, shiftInterval, interval, startTime, endTime, type } = timeRange;
4548
const handleOuterClick = useCallback((event: any) => {
4649
const targetClassNames: string[] = event.target?.classList || [];
@@ -70,16 +73,18 @@ const TimeRange: FC = () => {
7073
}, []);
7174

7275
const onDurationSelect = (duration: FixedDuration) => {
73-
const {startTime, endTime} = getRelativeStartAndEndDate(duration);
74-
setLogsStore((store) => setTimeRange(store, { startTime, endTime, type: 'fixed' }));
76+
const { startTime, endTime } = getRelativeStartAndEndDate(duration);
77+
setLogStore((store) => getCleanStoreForRefetch(store));
78+
setAppStore((store) => setTimeRange(store, { startTime, endTime, type: 'fixed' }));
7579
setOpened(false);
7680
};
7781

7882
const resetToRelative = useCallback(() => {
7983
const now = dayjs().startOf('minute');
8084
const startTime = now.subtract(FIXED_DURATIONS[0].milliseconds, 'milliseconds');
8185
const endTime = now;
82-
setLogsStore((store) => setTimeRange(store, { startTime, endTime, type: 'fixed' }));
86+
setLogStore((store) => getCleanStoreForRefetch(store));
87+
setAppStore((store) => setTimeRange(store, { startTime, endTime, type: 'fixed' }));
8388
setOpened(false);
8489
}, []);
8590

@@ -93,7 +98,7 @@ const TimeRange: FC = () => {
9398

9499
const onSetShiftInterval = useCallback((val: number | string) => {
95100
if (typeof val === 'number') {
96-
setLogsStore((store) => setshiftInterval(store, val));
101+
setAppStore((store) => setshiftInterval(store, val));
97102
setShowTick(false); // Hide the tick when editing starts again
98103
debouncedShowTick(); // Show the tick after the user stops typing
99104
}
@@ -104,13 +109,15 @@ const TimeRange: FC = () => {
104109
if (direction === 'left') {
105110
const newStartTime = new Date(startTime.getTime() - changeInMs);
106111
const newEndTime = new Date(endTime.getTime() - changeInMs);
107-
setLogsStore((store) =>
112+
setLogStore((store) => getCleanStoreForRefetch(store));
113+
setAppStore((store) =>
108114
setTimeRange(store, { startTime: dayjs(newStartTime), endTime: dayjs(newEndTime), type: 'custom' }),
109115
);
110116
} else {
111117
const newStartTime = new Date(startTime.getTime() + changeInMs);
112118
const newEndTime = new Date(endTime.getTime() + changeInMs);
113-
setLogsStore((store) =>
119+
setLogStore((store) => getCleanStoreForRefetch(store));
120+
setAppStore((store) =>
114121
setTimeRange(store, { startTime: dayjs(newStartTime), endTime: dayjs(newEndTime), type: 'custom' }),
115122
);
116123
}
@@ -197,7 +204,8 @@ function isDateInRange(startDate: Date, endDate: Date, currentDate: Date) {
197204
}
198205

199206
const CustomTimeRange: FC<CustomTimeRangeProps> = ({ setOpened, resetToRelative }) => {
200-
const [{ startTime: startTimeFromStore, endTime: endTimeFromStore, type }, setLogsStore] = useLogsStore(
207+
const [, setLogStore] = useLogsStore((_store) => null);
208+
const [{ startTime: startTimeFromStore, endTime: endTimeFromStore, type }, setAppStore] = useAppStore(
201209
(store) => store.timeRange,
202210
);
203211

@@ -229,7 +237,8 @@ const CustomTimeRange: FC<CustomTimeRangeProps> = ({ setOpened, resetToRelative
229237
};
230238

231239
const onApply = () => {
232-
setLogsStore((store) =>
240+
setLogStore((store) => getCleanStoreForRefetch(store));
241+
setAppStore((store) =>
233242
setTimeRange(store, {
234243
type: 'custom',
235244
startTime: dayjs(localSelectedRange.startTime).startOf('minute'),

‎src/hooks/useGetLogStreamSchema.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,6 @@ export const useGetStreamSchema = (opts: { streamName: string }) => {
4040
isError,
4141
isLoading,
4242
errorMessage,
43-
isRefetching
43+
isRefetching,
4444
};
4545
};

‎src/hooks/useQueryLogs.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ export const useQueryLogs = () => {
4848
const [currentStream] = useAppStore((store) => store.currentStream);
4949
const timePartitionColumn = _.get(streamInfo, 'time_partition', 'p_timestamp');
5050
const { refetch: refetchSchema } = useGetStreamSchema({ streamName: currentStream || '' });
51+
const [timeRange] = useAppStore((store) => store.timeRange);
5152
const [
5253
{
53-
timeRange,
5454
tableOpts: { currentOffset, instantSearchValue },
5555
custQuerySearchState,
5656
},

‎src/hooks/useQueryResult.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ export const useFetchCount = () => {
5959
const [currentStream] = useAppStore((store) => store.currentStream);
6060
const { setTotalCount } = logsStoreReducers;
6161
const [custQuerySearchState] = useLogsStore((store) => store.custQuerySearchState);
62-
const [timeRange, setLogsStore] = useLogsStore((store) => store.timeRange);
62+
const [timeRange] = useAppStore((store) => store.timeRange);
63+
const [, setLogsStore] = useLogsStore((_store) => null);
6364
const { isQuerySearchActive, custSearchQuery, activeMode } = custQuerySearchState;
6465
const [appliedQuery] = useFilterStore((store) => store.appliedQuery);
6566

‎src/layouts/MainLayout/providers/AppProvider.tsx

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import { AboutData } from '@/@types/parseable/api/about';
44
import _ from 'lodash';
55
import { AxiosResponse } from 'axios';
66
import { SavedFilterType } from '@/@types/parseable/api/savedFilters';
7+
import { FIXED_DURATIONS, FixedDuration } from '@/constants/timeConstants';
8+
import dayjs, { Dayjs } from 'dayjs';
9+
import timeRangeUtils from '@/utils/timeRangeUtils';
10+
11+
const { makeTimeRangeLabel } = timeRangeUtils;
12+
13+
export const DEFAULT_FIXED_DURATIONS = FIXED_DURATIONS[0];
714

815
export type UserRoles = {
916
[roleName: string]: {
@@ -17,7 +24,35 @@ export type UserRoles = {
1724

1825
type ReducerOutput = Partial<AppStore>;
1926

27+
export type TimeRange = {
28+
startTime: Date;
29+
endTime: Date;
30+
type: 'fixed' | 'custom';
31+
label: string;
32+
interval: number;
33+
shiftInterval: number;
34+
};
35+
36+
const getDefaultTimeRange = (duration: FixedDuration = DEFAULT_FIXED_DURATIONS) => {
37+
const now = dayjs().startOf('minute');
38+
const { milliseconds } = duration;
39+
40+
const startTime = now.subtract(milliseconds, 'milliseconds');
41+
const endTime = now;
42+
const label = makeTimeRangeLabel(startTime.toDate(), endTime.toDate());
43+
44+
return {
45+
startTime: startTime.toDate(),
46+
endTime: now.toDate(),
47+
type: 'fixed' as const,
48+
label,
49+
interval: milliseconds,
50+
shiftInterval: 1,
51+
};
52+
};
53+
2054
type AppStore = {
55+
timeRange: TimeRange;
2156
maximized: boolean;
2257
helpModalOpen: boolean;
2358
createStreamModalOpen: boolean;
@@ -34,19 +69,27 @@ type AppStore = {
3469
};
3570

3671
type AppStoreReducers = {
72+
setTimeRange: (
73+
store: AppStore,
74+
payload: { startTime: dayjs.Dayjs; endTime: dayjs.Dayjs; type: 'fixed' | 'custom' },
75+
) => ReducerOutput;
3776
toggleMaximize: (store: AppStore) => ReducerOutput;
3877
toggleHelpModal: (store: AppStore, val?: boolean) => ReducerOutput;
3978
changeStream: (store: AppStore, stream: string) => ReducerOutput;
4079
setUserRoles: (store: AppStore, roles: UserRoles | null) => ReducerOutput;
80+
setshiftInterval: (store: AppStore, interval: number) => ReducerOutput;
81+
syncTimeRange: (store: AppStore) => ReducerOutput;
4182
setUserSpecificStreams: (store: AppStore, userSpecficStreams: LogStreamData | null) => ReducerOutput;
4283
setUserAccessMap: (store: AppStore, accessRoles: string[] | null) => ReducerOutput;
4384
setStreamSpecificUserAccess: (store: AppStore, streamSpecificUserAccess: string[] | null) => ReducerOutput;
4485
setInstanceConfig: (store: AppStore, instanceConfig: AboutData) => ReducerOutput;
4586
toggleCreateStreamModal: (store: AppStore, val?: boolean) => ReducerOutput;
4687
setSavedFilters: (store: AppStore, savedFilters: AxiosResponse<SavedFilterType[]>) => ReducerOutput;
88+
applyQueryWithResetTime: (store: AppStore, timeRangePayload: { from: string; to: string } | null) => ReducerOutput;
4789
};
4890

4991
const initialState: AppStore = {
92+
timeRange: getDefaultTimeRange(),
5093
maximized: false,
5194
helpModalOpen: false,
5295
currentStream: null,
@@ -89,6 +132,65 @@ function getHTTPContext() {
89132
return window.isSecureContext;
90133
}
91134
// reducers
135+
const syncTimeRange = (store: AppStore) => {
136+
const { timeRange } = store;
137+
const duration = _.find(FIXED_DURATIONS, (duration) => duration.milliseconds === timeRange.interval);
138+
const updatedTimeRange = { timeRange: getDefaultTimeRange(duration) };
139+
return {
140+
...updatedTimeRange,
141+
};
142+
};
143+
144+
const setTimeRange = (
145+
store: AppStore,
146+
payload: { startTime: dayjs.Dayjs; endTime: Dayjs; type: 'fixed' | 'custom' },
147+
) => {
148+
const { startTime, endTime, type } = payload;
149+
const label = makeTimeRangeLabel(startTime.toDate(), endTime.toDate());
150+
const interval = endTime.diff(startTime, 'milliseconds');
151+
return {
152+
timeRange: { ...store.timeRange, startTime: startTime.toDate(), endTime: endTime.toDate(), label, interval, type },
153+
};
154+
};
155+
156+
const setshiftInterval = (store: AppStore, interval: number) => {
157+
const { timeRange } = store;
158+
return {
159+
timeRange: {
160+
...timeRange,
161+
shiftInterval: interval,
162+
},
163+
};
164+
};
165+
166+
const applyQueryWithResetTime = (store: AppStore, timeRangePayload: { from: string; to: string } | null) => {
167+
const { timeRange } = store;
168+
169+
const updatedTimeRange = (() => {
170+
if (!timeRangePayload) {
171+
return { timeRange };
172+
} else {
173+
const startTime = dayjs(timeRangePayload.from);
174+
const endTime = dayjs(timeRangePayload.to);
175+
const label = makeTimeRangeLabel(startTime.toDate(), endTime.toDate());
176+
const interval = endTime.diff(startTime, 'milliseconds');
177+
return {
178+
timeRange: {
179+
...store.timeRange,
180+
startTime: startTime.toDate(),
181+
endTime: endTime.toDate(),
182+
label,
183+
interval,
184+
type: 'custom' as const, // always
185+
},
186+
};
187+
}
188+
})();
189+
190+
return {
191+
...updatedTimeRange,
192+
};
193+
};
92194

93195
const toggleMaximize = (store: AppStore) => {
94196
return { maximized: !store.maximized };
@@ -146,6 +248,10 @@ const appStoreReducers: AppStoreReducers = {
146248
setInstanceConfig,
147249
toggleCreateStreamModal,
148250
setSavedFilters,
251+
setTimeRange,
252+
setshiftInterval,
253+
syncTimeRange,
254+
applyQueryWithResetTime,
149255
};
150256

151257
export { AppProvider, useAppStore, appStoreReducers };

‎src/pages/Dashboards/CreateDashboardModal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { useCallback, useEffect } from 'react';
55
import _ from 'lodash';
66
import { useDashboardsQuery } from '@/hooks/useDashboards';
77
import { useForm } from '@mantine/form';
8-
import { useLogsStore } from '../Stream/providers/LogsProvider';
98
import timeRangeUtils from '@/utils/timeRangeUtils';
109
import { Tile } from '@/@types/parseable/api/dashboards';
10+
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
1111

1212
const { toggleCreateDashboardModal, toggleEditDashboardModal } = dashboardsStoreReducers;
1313
const { makeTimeRangeOptions, getDefaultTimeRangeOption } = timeRangeUtils;
@@ -29,7 +29,7 @@ const useDashboardForm = (opts: FormOpts) => {
2929
initialValues: opts,
3030
validate: {
3131
name: (val) => (_.isEmpty(val) ? 'Name cannot be empty' : null),
32-
description: (_val) => (null),
32+
description: (_val) => null,
3333
},
3434
validateInputOnChange: true,
3535
validateInputOnBlur: true,
@@ -53,7 +53,7 @@ const defaultOpts = {
5353
const CreateDashboardModal = () => {
5454
const [createMode, setDashbaordsStore] = useDashboardsStore((store) => store.createDashboardModalOpen);
5555
const [editMode] = useDashboardsStore((store) => store.editDashboardModalOpen);
56-
const [timeRange] = useLogsStore((store) => store.timeRange);
56+
const [timeRange] = useAppStore((store) => store.timeRange);
5757
const [activeDashboard] = useDashboardsStore((store) => store.activeDashboard);
5858
const timeRangeOptions = makeTimeRangeOptions({
5959
selected: editMode && activeDashboard ? activeDashboard.time_filter : null,

‎src/pages/Dashboards/CreateTileForm.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {
2323
} from '@/@types/parseable/api/dashboards';
2424
import { CodeHighlight } from '@mantine/code-highlight';
2525
import { sanitiseSqlString } from '@/utils/sanitiseSqlString';
26-
import { useLogsStore } from '../Stream/providers/LogsProvider';
2726
import dayjs from 'dayjs';
2827
import TimeRange from '@/components/Header/TimeRange';
2928
import { colors, isCircularChart, isGraph, normalizeGraphColorConfig } from './Charts';
@@ -291,7 +290,7 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
291290
const [fields, setFields] = useState<Field[]>([]);
292291
const [initialHeight, setInitialHeight] = useState(0);
293292
const [dashboards] = useDashboardsStore((store) => store.dashboards);
294-
const [timeRange] = useLogsStore((store) => store.timeRange);
293+
const [timeRange] = useAppStore((store) => store.timeRange);
295294
const [appliedFilterQuery, setLogsStore] = useFilterStore((store) => store.appliedFilterQuery);
296295
const [aiQuery, setAiQuery] = useState('');
297296
const [userSpecificStreams] = useAppStore((store) => store.userSpecificStreams);

‎src/pages/Dashboards/Tile.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ import { Tile as TileType, TileQueryResponse } from '@/@types/parseable/api/dash
2828
import { sanitiseSqlString } from '@/utils/sanitiseSqlString';
2929
import Table from './Table';
3030
import { downloadDataAsCSV, downloadDataAsJson, exportJson } from '@/utils/exportHelpers';
31-
import { makeExportData, useLogsStore } from '../Stream/providers/LogsProvider';
31+
import { makeExportData } from '../Stream/providers/LogsProvider';
3232
import { getRandomUnitTypeForChart, getUnitTypeByKey } from './utils';
33+
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
3334

3435
const ParseableLogo = () => (
3536
<div className="png-export-parseable-logo" style={{ display: 'none', height: '100%' }}>
@@ -257,7 +258,7 @@ function TileControls(props: { tile: TileType; data: TileQueryResponse }) {
257258
}
258259

259260
const Tile = (props: { id: string }) => {
260-
const [timeRange] = useLogsStore((store) => store.timeRange);
261+
const [timeRange] = useAppStore((store) => store.timeRange);
261262
const [tilesData] = useDashboardsStore((store) => store.tilesData);
262263
const tileData = _.get(tilesData, props.id, { records: [], fields: [] });
263264
const [activeDashboard] = useDashboardsStore((store) => store.activeDashboard);

0 commit comments

Comments
 (0)