From e08fe1c09157b4261eef9e169a8e978803c1c090 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Tue, 4 Jun 2024 14:22:13 +0530 Subject: [PATCH 1/2] introduced 15 min and 30 min compaction in the graph --- .../Stream/components/EventTimeLineGraph.tsx | 62 +++++++++++++++---- 1 file changed, 51 insertions(+), 11 deletions(-) diff --git a/src/pages/Stream/components/EventTimeLineGraph.tsx b/src/pages/Stream/components/EventTimeLineGraph.tsx index a8ebedbb..8d46b76d 100644 --- a/src/pages/Stream/components/EventTimeLineGraph.tsx +++ b/src/pages/Stream/components/EventTimeLineGraph.tsx @@ -11,44 +11,65 @@ 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'; + +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 { return 'day'; } }; -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 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 { return new Date(time.getFullYear(), time.getMonth(), time.getDate()); } }; -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 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 { return new Date(time.getFullYear(), time.getMonth(), time.getDate() + 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); @@ -59,6 +80,12 @@ 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; } }; @@ -74,7 +101,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); @@ -85,13 +112,15 @@ const compactTypeIntervalMap = { minute: '1 minute', hour: '1 hour', day: '24 hour', + 'quarter-hour': '15 minute', + 'half-hour': '30 minute', }; const generateCountQuery = ( streamName: string, startTime: Date, endTime: Date, - compactType: 'day' | 'minute' | 'hour', + compactType: CompactInterval, whereClause: string, ) => { const range = compactTypeIntervalMap[compactType]; @@ -102,7 +131,7 @@ const NoDataView = () => { return ( - No new events in the last 30 minutes. + No new events in the selected time range. ); @@ -162,7 +191,16 @@ 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 ( @@ -254,6 +292,8 @@ const EventTimeLineGraph = () => { areaChartProps={{ onClick: setTimeRangeFromGraph, style: { cursor: 'pointer' } }} gridAxis="xy" fillOpacity={0.5} + strokeWidth={1.25} + dotProps={{ strokeWidth: 1, r: 2.5 }} /> ) : ( From 1161611cf80e0d35d852a8c63d732f2cd2dcebd3 Mon Sep 17 00:00:00 2001 From: balaji-jr Date: Fri, 7 Jun 2024 10:58:43 +0530 Subject: [PATCH 2/2] added month level compaction for date range greater than 6 months --- .../Stream/components/EventTimeLineGraph.tsx | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/pages/Stream/components/EventTimeLineGraph.tsx b/src/pages/Stream/components/EventTimeLineGraph.tsx index 8d46b76d..fb9bf8cc 100644 --- a/src/pages/Stream/components/EventTimeLineGraph.tsx +++ b/src/pages/Stream/components/EventTimeLineGraph.tsx @@ -12,7 +12,7 @@ const { setTimeRange } = logsStoreReducers; const { parseQuery } = filterStoreReducers; -type CompactInterval = 'minute' | 'day' | 'hour' | 'quarter-hour' | 'half-hour'; +type CompactInterval = 'minute' | 'day' | 'hour' | 'quarter-hour' | 'half-hour' | 'month'; const getCompactType = (interval: number): CompactInterval => { const totalMinutes = interval / (1000 * 60); @@ -28,8 +28,10 @@ const getCompactType = (interval: number): CompactInterval => { } else if (totalMinutes <= 4320) { // upto 3 days return 'hour'; - } else { + } else if (totalMinutes <= 259200) { return 'day'; + } else { + return 'month' } }; @@ -44,8 +46,10 @@ const getStartOfTs = (time: Date, compactType: CompactInterval): Date => { } else if (compactType === 'half-hour') { const roundOff = 1000 * 60 * 30; return new Date(Math.floor(time.getTime() / roundOff) * roundOff); - } else { + } else if (compactType === 'day') { return new Date(time.getFullYear(), time.getMonth(), time.getDate()); + } else { + return new Date(time.getFullYear(), time.getMonth()); } }; @@ -60,8 +64,10 @@ const getEndOfTs = (time: Date, compactType: CompactInterval): Date => { } else if (compactType === 'half-hour') { const roundOff = 1000 * 60 * 30; return new Date(Math.round(time.getTime() / roundOff) * roundOff); - } else { + } else if (compactType === 'day') { return new Date(time.getFullYear(), time.getMonth(), time.getDate() + 1); + } else { + return new Date(time.getFullYear(), time.getMonth() + 1); } }; @@ -86,6 +92,9 @@ const getAllIntervals = (start: Date, end: Date, compactType: CompactInterval): case 'half-hour': date.setMinutes(date.getMinutes() + 30); break; + case 'month': + date.setMonth(date.getMonth() + 1); + break; } }; @@ -114,6 +123,7 @@ const compactTypeIntervalMap = { day: '24 hour', 'quarter-hour': '15 minute', 'half-hour': '30 minute', + month: '1 month' }; const generateCountQuery = ( @@ -151,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); @@ -204,7 +214,7 @@ function ChartTooltip({ payload }: ChartTooltipProps) { return ( - {`${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')}`} Events