From 168a173e6bac7dd02ca9d57f645105c3974de626 Mon Sep 17 00:00:00 2001 From: ahmadshaheer Date: Wed, 11 Sep 2024 17:22:41 +0430 Subject: [PATCH 1/3] feat: add drag support to alert history horizontal graph --- .../AlertHistory/Timeline/Graph/Graph.tsx | 51 ++++++++++++++++++- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx index a0534691df..7e7db6b201 100644 --- a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx +++ b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx @@ -1,10 +1,15 @@ import { Color } from '@signozhq/design-tokens'; import Uplot from 'components/Uplot'; +import { QueryParams } from 'constants/query'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useResizeObserver } from 'hooks/useDimensions'; +import useUrlQuery from 'hooks/useUrlQuery'; +import history from 'lib/history'; import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin'; import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin'; import { useMemo, useRef } from 'react'; +import { useDispatch } from 'react-redux'; +import { UpdateTimeInterval } from 'store/actions'; import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def'; import uPlot, { AlignedData } from 'uplot'; @@ -44,11 +49,13 @@ function HorizontalTimelineGraph({ return [timestamps, states]; }, [data]); + const urlQuery = useUrlQuery(); + const dispatch = useDispatch(); + const options: uPlot.Options = useMemo( () => ({ width, height: 85, - cursor: { show: false }, axes: [ { @@ -69,6 +76,46 @@ function HorizontalTimelineGraph({ label: 'States', }, ], + hooks: { + setSelect: [ + (self): void => { + const selection = self.select; + if (selection) { + const startTime = self.posToVal(selection.left, 'x'); + const endTime = self.posToVal(selection.left + selection.width, 'x'); + + const diff = endTime - startTime; + + if (diff > 0) { + if (urlQuery.has(QueryParams.relativeTime)) { + urlQuery.delete(QueryParams.relativeTime); + } + + const startTimestamp = Math.floor(startTime * 1000); + const endTimestamp = Math.floor(endTime * 1000); + + if (startTimestamp !== endTimestamp) { + dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp])); + } + + urlQuery.set( + QueryParams.startTime, + Math.floor(startTime * 1000).toString(), + ); + urlQuery.set( + QueryParams.endTime, + Math.floor(endTime * 1000).toString(), + ); + + history.push({ + search: urlQuery.toString(), + }); + } + } + }, + ], + }, + plugins: transformedData?.length > 1 ? [ @@ -79,7 +126,7 @@ function HorizontalTimelineGraph({ ] : [], }), - [width, isDarkMode, transformedData], + [width, isDarkMode, transformedData.length, urlQuery, dispatch], ); return ; } From 7f6808984c3398a062426c09e16f01cabf7d0520 Mon Sep 17 00:00:00 2001 From: ahmadshaheer Date: Fri, 27 Sep 2024 12:13:00 +0430 Subject: [PATCH 2/3] chore: use startTimestamp and endTimestamp --- .../container/AlertHistory/Timeline/Graph/Graph.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx index 7e7db6b201..0d3c86e849 100644 --- a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx +++ b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx @@ -98,14 +98,8 @@ function HorizontalTimelineGraph({ dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp])); } - urlQuery.set( - QueryParams.startTime, - Math.floor(startTime * 1000).toString(), - ); - urlQuery.set( - QueryParams.endTime, - Math.floor(endTime * 1000).toString(), - ); + urlQuery.set(QueryParams.startTime, startTimestamp.toString()); + urlQuery.set(QueryParams.endTime, endTimestamp.toString()); history.push({ search: urlQuery.toString(), From 584bad3cebf9fbbb370172d0049e8fd0fe2ce88a Mon Sep 17 00:00:00 2001 From: ahmadshaheer Date: Fri, 27 Sep 2024 20:44:38 +0430 Subject: [PATCH 3/3] fix: fix the issue of alert history breaking on navigating back from selected time range --- frontend/src/pages/AlertDetails/hooks.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/AlertDetails/hooks.tsx b/frontend/src/pages/AlertDetails/hooks.tsx index c6f7b64d64..c9257ad47b 100644 --- a/frontend/src/pages/AlertDetails/hooks.tsx +++ b/frontend/src/pages/AlertDetails/hooks.tsx @@ -17,6 +17,7 @@ import AlertHistory from 'container/AlertHistory'; import { TIMELINE_TABLE_PAGE_SIZE } from 'container/AlertHistory/constants'; import { AlertDetailsTab, TimelineFilter } from 'container/AlertHistory/types'; import { urlKey } from 'container/AllError/utils'; +import { RelativeTimeMap } from 'container/TopNav/DateTimeSelection/config'; import useAxiosError from 'hooks/useAxiosError'; import { useNotifications } from 'hooks/useNotifications'; import useUrlQuery from 'hooks/useUrlQuery'; @@ -31,9 +32,7 @@ import PaginationInfoText from 'periscope/components/PaginationInfoText/Paginati import { useAlertRule } from 'providers/Alert'; import { useCallback, useMemo } from 'react'; import { useMutation, useQuery, useQueryClient } from 'react-query'; -import { useSelector } from 'react-redux'; import { generatePath, useLocation } from 'react-router-dom'; -import { AppState } from 'store/reducers'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { AlertDef, @@ -44,7 +43,6 @@ import { AlertRuleTopContributorsPayload, } from 'types/api/alerts/def'; import { PayloadProps } from 'types/api/alerts/get'; -import { GlobalReducer } from 'types/reducer/globalTime'; import { nanoToMilli } from 'utils/timeUtils'; export const useAlertHistoryQueryParams = (): { @@ -56,11 +54,10 @@ export const useAlertHistoryQueryParams = (): { } => { const params = useUrlQuery(); - const globalTime = useSelector( - (state) => state.globalTime, - ); const startTime = params.get(QueryParams.startTime); const endTime = params.get(QueryParams.endTime); + const relativeTime = + params.get(QueryParams.relativeTime) ?? RelativeTimeMap['6hr']; const intStartTime = parseInt(startTime || '0', 10); const intEndTime = parseInt(endTime || '0', 10); @@ -69,8 +66,8 @@ export const useAlertHistoryQueryParams = (): { const { maxTime, minTime } = useMemo(() => { if (hasStartAndEndParams) return GetMinMax('custom', [intStartTime, intEndTime]); - return GetMinMax(globalTime.selectedTime); - }, [hasStartAndEndParams, intStartTime, intEndTime, globalTime.selectedTime]); + return GetMinMax(relativeTime); + }, [hasStartAndEndParams, intStartTime, intEndTime, relativeTime]); const ruleId = params.get(QueryParams.ruleId);