Skip to content

Commit

Permalink
New pagination based on timeslots (#155)
Browse files Browse the repository at this point in the history
  • Loading branch information
kartik-gupta-ij authored Oct 12, 2023
1 parent a6a8a5c commit 3b51bbd
Show file tree
Hide file tree
Showing 17 changed files with 580 additions and 371 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@mantine/carousel": "^6.0.15",
"@mantine/core": "^6.0.15",
"@mantine/dates": "^6.0.15",
"@mantine/form": "^6.0.15",
Expand All @@ -25,6 +26,7 @@
"@types/js-cookie": "^3.0.3",
"axios": "^1.4.0",
"dayjs": "^1.11.8",
"embla-carousel-react": "7.1.0",
"http-status-codes": "^2.2.0",
"immer": "^10.0.2",
"js-cookie": "^3.0.5",
Expand Down
34 changes: 34 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion src/components/Header/RefreshInterval.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@ const RefreshInterval: FC = () => {
<Text>{selectedInterval ? ms(selectedInterval) : 'Off'}</Text>
</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Dropdown sx={{
zIndex: 1000,
}}>
{REFRESH_INTERVALS.map((interval) => {
if (interval === selectedInterval) return null;

Expand Down
16 changes: 11 additions & 5 deletions src/components/Header/TimeRange.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const TimeRange: FC = () => {
state: { subLogQuery, subLogSelectedTimeRange },
} = useHeaderContext();

const [opened, setOpened] = useMountedState(false);
const [selectedRange, setSelectedRange] = useMountedState<string>(subLogSelectedTimeRange.get().value);

useEffect(() => {
Expand All @@ -26,7 +27,7 @@ const TimeRange: FC = () => {
}, []);

const onDurationSelect = (duration: FixedDurations) => {
subLogSelectedTimeRange.set((state)=>{
subLogSelectedTimeRange.set((state) => {
state.value = duration.name;
state.state = 'fixed';
});
Expand All @@ -36,6 +37,7 @@ const TimeRange: FC = () => {
query.startTime = now.subtract(duration.milliseconds, 'milliseconds').toDate();
query.endTime = now.toDate();
});
setOpened(false);
};

const { classes, cx } = useLogQueryStyles();
Expand All @@ -49,7 +51,7 @@ const TimeRange: FC = () => {
} = classes;

return (
<Menu withArrow position="top">
<Menu withArrow position="top" opened={opened} onChange={setOpened}>
<Menu.Target>
<Button className={timeRangeBTn} leftIcon={<IconClock size={px('1.2rem')} stroke={1.5} />}>
<Text>{selectedRange}</Text>
Expand All @@ -73,15 +75,18 @@ const TimeRange: FC = () => {
})}
</Box>
<Box className={customRangeContainer}>
<CustomTimeRange />
<CustomTimeRange setOpened={setOpened} />
</Box>
</Box>
</Menu.Dropdown>
</Menu>
);
};

const CustomTimeRange: FC = () => {
type CustomTimeRangeProps = {
setOpened: (opened: boolean) => void;
};
const CustomTimeRange: FC<CustomTimeRangeProps> = ({ setOpened }) => {
const {
state: { subLogQuery, subLogSelectedTimeRange },
} = useHeaderContext();
Expand All @@ -105,10 +110,11 @@ const CustomTimeRange: FC = () => {
});
const startTime = dayjs(selectedRange.startTime).format('DD-MM-YY HH:mm');
const endTime = dayjs(selectedRange.endTime).format('DD-MM-YY HH:mm');
subLogSelectedTimeRange.set((state)=>{
subLogSelectedTimeRange.set((state) => {
state.state = 'custom';
state.value = `${startTime} - ${endTime}`;
});
setOpened(false);
};

const { classes } = useLogQueryStyles();
Expand Down
11 changes: 1 addition & 10 deletions src/components/Mantine/theme.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const theme: MantineThemeOverride = {
}),
},
Table: {
styles: ({ defaultRadius: _defaultRadius, colors, fontSizes, other: { fontWeights } }) => {
styles: ({ defaultRadius: _defaultRadius, colors }) => {
return {
root: {
background: colors.white,
Expand All @@ -127,15 +127,6 @@ export const theme: MantineThemeOverride = {
textAlign: 'left',
padding: 0,
},

'& tr th .label': {
display: 'flex',
alignItems: 'center',
fontSize: fontSizes.md,
fontWeight: fontWeights.semibold,
height: '100%',
textAlign: 'left',
},
},
};
},
Expand Down
23 changes: 11 additions & 12 deletions src/hooks/useQueryLogs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ export const useQueryLogs = () => {
const [error, setError] = useMountedState<string | null>(null);
const [loading, setLoading] = useMountedState<boolean>(false);
const [pageLogData, setPageLogData] = useMountedState<LogsData | null>(null);
const [querySearch, setQuerySearch] = useMountedState<LogsSearch>({
search: '',
filters: {},
sort: {
field: 'p_timestamp',
order: SortOrder.DESCENDING
}
const [querySearch, setQuerySearch] = useMountedState<LogsSearch>({
search: '',
filters: {},
sort: {
field: 'p_timestamp',
order: SortOrder.DESCENDING,
},
});
const [isPending, startTransition] = useTransition();

Expand Down Expand Up @@ -60,15 +60,15 @@ export const useQueryLogs = () => {

const { field, order } = sort;

temp.sort(({[field]: aData}, {[field]: bData}) => {
let res = 0
temp.sort(({ [field]: aData }, { [field]: bData }) => {
let res = 0;
if (aData === bData) res = 0;
else if (aData === null) res = -1;
else if (bData === null) res = 1;
else res = aData > bData ? 1 : -1;

return res*order;
})
return res * order;
});

return temp;
}
Expand Down Expand Up @@ -136,7 +136,6 @@ export const useQueryLogs = () => {

if (logsQueryRes.status === StatusCodes.OK) {
_dataRef.current = data;

return;
}
if (typeof data === 'string' && data.includes('Stream is not initialized yet')) {
Expand Down
14 changes: 5 additions & 9 deletions src/layouts/MainLayout/Context.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,6 @@ export const FIXED_DURATIONS = [
name: 'last 7 days',
milliseconds: dayjs.duration({ days: 7 }).asMilliseconds(),
},
{
name: 'last 2 months',
milliseconds: dayjs.duration({ months: 2 }).asMilliseconds(),
},
] as const;

export const DEFAULT_FIXED_DURATIONS = FIXED_DURATIONS[0];
Expand Down Expand Up @@ -70,18 +66,18 @@ const MainLayoutPageProvider: FC<HeaderProviderProps> = ({ children }) => {
startTime: now.subtract(DEFAULT_FIXED_DURATIONS.milliseconds, 'milliseconds').toDate(),
endTime: now.toDate(),
streamName: '',
access:null
access: null,
});
const subLogSearch = useSubscribeState<LogsSearch>({
search: '',
filters: {},
sort: {
field: 'p_timestamp',
order: SortOrder.DESCENDING
}
order: SortOrder.DESCENDING,
},
});
const subLogSelectedTimeRange = useSubscribeState<LogSelectedTimeRange>({
state: "fixed",
state: 'fixed',
value: DEFAULT_FIXED_DURATIONS.name,
});
const subRefreshInterval = useSubscribeState<number | null>(null);
Expand All @@ -95,7 +91,7 @@ const MainLayoutPageProvider: FC<HeaderProviderProps> = ({ children }) => {
subLogSelectedTimeRange,
subNavbarTogle,
subCreateUserModalTogle,
subLLMActive
subLLMActive,
};

const methods: HeaderContextMethods = {};
Expand Down
3 changes: 3 additions & 0 deletions src/pages/Config/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,12 @@ const Config: FC = () => {
};

useEffect(() => {
if(!subLogQuery.get().streamName) return;
getLogAlert(subLogQuery.get().streamName);
getLogRetention(subLogQuery.get().streamName);
}, []);

useEffect(() => {
const subQuery = subLogQuery.subscribe((value: any) => {
if (intialAlert) {
resetIntailAlertData();
Expand Down
107 changes: 107 additions & 0 deletions src/pages/Logs/CarouselSlide.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { useGetQueryCount } from '@/hooks/useGetQueryCount';
import { useHeaderContext } from '@/layouts/MainLayout/Context';
import { Box, Button, Tooltip } from '@mantine/core';
import dayjs from 'dayjs';
import { useEffect } from 'react';
import { useLogsPageContext } from './Context';
import useMountedState from '@/hooks/useMountedState';
import { Carousel } from '@mantine/carousel';

type FillCarouselProps = {
gapMinute: number;
endtime: Date;
id: number;
};
const FillCarousel = ({ gapMinute, endtime, id }: FillCarouselProps) => {
const {
state: { subLogQuery },
} = useHeaderContext();
const {
state: { subGapTime },
} = useLogsPageContext();
const [subID, setSubID] = useMountedState<number | null>(null);

const { data: count, error, loading, getQueryCountData: getCount } = useGetQueryCount();

const parsedEndTime = dayjs(endtime).set('second', 0).set('millisecond', 0).toDate();

useEffect(() => {
getCount({
startTime: dayjs(parsedEndTime).subtract(gapMinute, 'minute').toDate(),
endTime: parsedEndTime,
streamName: subLogQuery.get().streamName,
access: subLogQuery.get().access,
});
const subID = subGapTime.subscribe((data) => {
if (data) {
setSubID(data.id);
}
});
return () => {
subID();
};
}, []);

useEffect(() => {
if (count && count[0].totalcurrentcount !== 0 && ((subGapTime.get()?.id ?? 0) > id || subGapTime.get() === null)) {
subGapTime.set({
startTime: dayjs(parsedEndTime).subtract(gapMinute, 'minute').toDate(),
endTime: parsedEndTime,
id: id,
});
}
}, [count]);

return (
<Carousel.Slide>
<Tooltip
label={
loading
? 'Loading...'
: count
? dayjs(parsedEndTime).day() !== dayjs(parsedEndTime).subtract(gapMinute, 'minute').day()
? count[0].totalcurrentcount === 0
? `Date changed from ${dayjs(parsedEndTime).format('DD-MMM-YYYY')} to ${dayjs(parsedEndTime)
.subtract(gapMinute, 'minute')
.format('DD-MMM-YYYY')}, no events durning this period`
: `Day changed from ${dayjs(parsedEndTime).format('DD-MMM-YYYY')} to ${dayjs(parsedEndTime)
.subtract(gapMinute, 'minute')
.format('DD-MMM-YYYY')}, ${count[0].totalcurrentcount} events`
: count[0].totalcurrentcount === 0
? 'No events durning this period'
: `${count[0].totalcurrentcount} events`
: error
? error
: 'Unexpected Error'
}
withArrow
color="blue"
position="top">
<Box>
<Button
sx={{
backgroundColor: '#fff',
color: subID === id ? '#535BEB' : '#211F1F',
border: subID === id ? '1px solid #535BEB' : '1px solid #ccc',
borderRadius: '.5rem',
padding: '10px',
width: '100%',
}}
disabled={count && count[0].totalcurrentcount === 0}
onClick={() => {
subGapTime.set({
startTime: dayjs(parsedEndTime).subtract(gapMinute, 'minute').toDate(),
endTime: parsedEndTime,
id: id,
});
}}>
{dayjs(parsedEndTime).format('HH:mm')} -{' '}
{dayjs(parsedEndTime).subtract(gapMinute, 'minute').format('HH:mm')}
</Button>
</Box>
</Tooltip>
</Carousel.Slide>
);
};

export default FillCarousel;
Loading

0 comments on commit 3b51bbd

Please sign in to comment.