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

introduced 15 min and 30 min compaction in the graph #248

Merged
merged 2 commits into from
Jun 7, 2024
Merged

introduced 15 min and 30 min compaction in the graph #248

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e08fe1c
introduced 15 min and 30 min compaction in the graph
balaji-jr Jun 4, 2024
1161611
added month level compaction for date range greater than 6 months
balaji-jr Jun 7, 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
84 changes: 67 additions & 17 deletions src/pages/Stream/components/EventTimeLineGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,44 +11,71 @@ import { useFilterStore, filterStoreReducers } from '../providers/FilterProvider
const { setTimeRange } = logsStoreReducers;

const { parseQuery } = filterStoreReducers;
const getCompactType = (interval: number) => {

type CompactInterval = 'minute' | 'day' | 'hour' | 'quarter-hour' | 'half-hour' | 'month';

const getCompactType = (interval: number): CompactInterval => {
const totalMinutes = interval / (1000 * 60);
if (totalMinutes <= 60) {
// 1 hour
// upto 1 hour
return 'minute';
} else if (totalMinutes <= 300) {
// upto 5 hours
return 'quarter-hour';
} else if (totalMinutes <= 1440) {
// upto 5 hours
return 'half-hour';
} else if (totalMinutes <= 4320) {
// 3 days
// upto 3 days
return 'hour';
} else {
} else if (totalMinutes <= 259200) {
return 'day';
} else {
return 'month'
}
};

const getStartOfTs = (time: Date, compactType: 'day' | 'hour' | 'minute'): Date => {
const getStartOfTs = (time: Date, compactType: CompactInterval): Date => {
if (compactType === 'minute') {
return time;
} else if (compactType === 'hour') {
return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours());
} else {
} else if (compactType === 'quarter-hour') {
const roundOff = 1000 * 60 * 15;
return new Date(Math.floor(time.getTime() / roundOff) * roundOff);
} else if (compactType === 'half-hour') {
const roundOff = 1000 * 60 * 30;
return new Date(Math.floor(time.getTime() / roundOff) * roundOff);
} else if (compactType === 'day') {
return new Date(time.getFullYear(), time.getMonth(), time.getDate());
} else {
return new Date(time.getFullYear(), time.getMonth());
}
};

const getEndOfTs = (time: Date, compactType: 'day' | 'hour' | 'minute'): Date => {
const getEndOfTs = (time: Date, compactType: CompactInterval): Date => {
if (compactType === 'minute') {
return time;
} else if (compactType === 'hour') {
return new Date(time.getFullYear(), time.getMonth(), time.getDate(), time.getHours() + 1);
} else {
} else if (compactType === 'quarter-hour') {
const roundOff = 1000 * 60 * 15;
return new Date(Math.round(time.getTime() / roundOff) * roundOff);
} else if (compactType === 'half-hour') {
const roundOff = 1000 * 60 * 30;
return new Date(Math.round(time.getTime() / roundOff) * roundOff);
} else if (compactType === 'day') {
return new Date(time.getFullYear(), time.getMonth(), time.getDate() + 1);
} else {
return new Date(time.getFullYear(), time.getMonth() + 1);
}
};

const getAllIntervals = (start: Date, end: Date, compactType: 'minute' | 'hour' | 'day'): Date[] => {
const getAllIntervals = (start: Date, end: Date, compactType: CompactInterval): Date[] => {
const result = [];
const current = new Date(start);

const increment = (date: Date, type: 'minute' | 'hour' | 'day') => {
const increment = (date: Date, type: CompactInterval) => {
switch (type) {
case 'minute':
date.setMinutes(date.getMinutes() + 1);
Expand All @@ -59,6 +86,15 @@ const getAllIntervals = (start: Date, end: Date, compactType: 'minute' | 'hour'
case 'day':
date.setDate(date.getDate() + 1);
break;
case 'quarter-hour':
date.setMinutes(date.getMinutes() + 15);
break;
case 'half-hour':
date.setMinutes(date.getMinutes() + 30);
break;
case 'month':
date.setMonth(date.getMonth() + 1);
break;
}
};

Expand All @@ -74,7 +110,7 @@ const getModifiedTimeRange = (
startTime: Date,
endTime: Date,
interval: number,
): { modifiedStartTime: Date; modifiedEndTime: Date; compactType: 'day' | 'minute' | 'hour' } => {
): { modifiedStartTime: Date; modifiedEndTime: Date; compactType: CompactInterval } => {
const compactType = getCompactType(interval);
const modifiedStartTime = getStartOfTs(startTime, compactType);
const modifiedEndTime = getEndOfTs(endTime, compactType);
Expand All @@ -85,13 +121,16 @@ const compactTypeIntervalMap = {
minute: '1 minute',
hour: '1 hour',
day: '24 hour',
'quarter-hour': '15 minute',
'half-hour': '30 minute',
month: '1 month'
};

const generateCountQuery = (
streamName: string,
startTime: Date,
endTime: Date,
compactType: 'day' | 'minute' | 'hour',
compactType: CompactInterval,
whereClause: string,
) => {
const range = compactTypeIntervalMap[compactType];
Expand All @@ -102,7 +141,7 @@ const NoDataView = () => {
return (
<Stack style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
<Stack className={classes.noDataContainer}>
<Text className={classes.noDataText}>No new events in the last 30 minutes.</Text>
<Text className={classes.noDataText}>No new events in the selected time range.</Text>
</Stack>
</Stack>
);
Expand All @@ -122,8 +161,8 @@ const calcAverage = (data: GraphRecord[]) => {
return parseInt(Math.abs(total / data.length).toFixed(0));
};

// date_trunc removes tz info
// filling data empty values where there is no rec
// date_bin removes tz info
// filling data with empty values where there is no rec
const parseGraphData = (data: GraphRecord[] = [], avg: number, startTime: Date, endTime: Date, interval: number) => {
if (!Array.isArray(data)) return [];
const { modifiedEndTime, modifiedStartTime, compactType } = getModifiedTimeRange(startTime, endTime, interval);
Expand Down Expand Up @@ -162,11 +201,20 @@ function ChartTooltip({ payload }: ChartTooltipProps) {
const { minute, aboveAvgPercent, events, compactType } = payload[0]?.payload || {};
const isAboveAvg = aboveAvgPercent > 0;
const startTime = dayjs(minute).utc(true);
const endTime = dayjs(minute).add(1, compactType);
const endTime = (() => {
if (compactType === 'half-hour') {
return dayjs(minute).add(30, 'minute');
} else if (compactType === 'quarter-hour') {
return dayjs(minute).add(15, 'minute');
} else {
return dayjs(minute).add(1, compactType);
}
})();

return (
<Paper px="md" py="sm" withBorder shadow="md" radius="md">
<Text fw={600} mb={5}>
{`${startTime.format('DD MMM HH:mm A')} - ${endTime.format('DD MMM 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 Expand Up @@ -254,6 +302,8 @@ const EventTimeLineGraph = () => {
areaChartProps={{ onClick: setTimeRangeFromGraph, style: { cursor: 'pointer' } }}
gridAxis="xy"
fillOpacity={0.5}
strokeWidth={1.25}
dotProps={{ strokeWidth: 1, r: 2.5 }}
/>
) : (
<NoDataView />
Expand Down