feat: add drag support to alert history horizontal graph (#5928)

* feat: add drag support to alert history horizontal graph

* chore: use startTimestamp and endTimestamp

* fix: fix the issue of alert history breaking on navigating back from selected time range

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';
 
@@ -41,11 +46,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: [
  {
@@ -66,6 +73,40 @@ 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, startTimestamp.toString());
+ urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+
+ history.push({
+ search: urlQuery.toString(),
+ });
+ }
+ }
+ },
+ ],
+ },
+
  plugins:
  transformedData?.length > 1
  ? [
@@ -76,7 +117,7 @@ function HorizontalTimelineGraph({
  ]
  : [],
  }),
- [width, isDarkMode, transformedData],
+ [width, isDarkMode, transformedData.length, urlQuery, dispatch],
  );
  return <Uplot data={transformedData} options={options} />;
 }

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<AppState, GlobalReducer>(
- (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);