Skip to content

Commit

Permalink
chore: calculate start and end times from relative time and remove qu…
Browse files Browse the repository at this point in the history 
…ery params
  • Loading branch information
@ahmadshaheer
ahmadshaheer committed Sep 2, 2024
1 parent 6adcef3 commit 354ff5b
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 82 deletions.
8 changes: 5 additions & 3 deletions frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import '../Graph/Graph.styles.scss';

import { QueryParams } from 'constants/query';
import dayjs from 'dayjs';
import useUrlQuery from 'hooks/useUrlQuery';
import { useGetAlertRuleDetailsTimelineGraphData } from 'pages/AlertDetails/hooks';
import {
useAlertHistoryQueryParams,
useGetAlertRuleDetailsTimelineGraphData,
} from 'pages/AlertDetails/hooks';
import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
import { useEffect, useState } from 'react';

Expand All @@ -28,7 +30,7 @@ function GraphWrapper({
ruleId,
} = useGetAlertRuleDetailsTimelineGraphData();

const startTime = urlQuery.get(QueryParams.startTime);
const { startTime } = useAlertHistoryQueryParams();

const [isVerticalGraph, setIsVerticalGraph] = useState(false);

Expand Down
8 changes: 1 addition & 7 deletions frontend/src/pages/AlertDetails/AlertDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,7 @@ import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';

import AlertHeader from './AlertHeader/AlertHeader';
import {
useGetAlertRuleDetails,
useRouteTabUtils,
useSetStartAndEndTimeFromRelativeTime,
} from './hooks';
import { useGetAlertRuleDetails, useRouteTabUtils } from './hooks';
import { AlertDetailsStatusRendererProps } from './types';

function AlertDetailsStatusRenderer({
Expand Down Expand Up @@ -74,8 +70,6 @@ function AlertDetails(): JSX.Element {
const { pathname } = useLocation();
const { routes } = useRouteTabUtils();

useSetStartAndEndTimeFromRelativeTime();

const {
data: { isLoading, data, isRefetching, isError },
ruleId,
Expand Down
124 changes: 52 additions & 72 deletions frontend/src/pages/AlertDetails/hooks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ import { History, Table } from 'lucide-react';
import EditRules from 'pages/EditRules';
import { OrderPreferenceItems } from 'pages/Logs/config';
import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { useMutation, useQuery, UseQueryResult } 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 {
AlertRuleStatsPayload,
Expand All @@ -35,8 +37,44 @@ import {
AlertRuleTopContributorsPayload,
} from 'types/api/alerts/def';
import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
import { GlobalReducer } from 'types/reducer/globalTime';
import { nanoToMilli } from 'utils/timeUtils';

export const useAlertHistoryQueryParams = (): {
ruleId: string | null;
startTime: number;
endTime: number;
hasStartAndEndParams: boolean;
params: URLSearchParams;
} => {
const params = useUrlQuery();

const globalTime = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime,
);
const startTime = params.get(QueryParams.startTime);
const endTime = params.get(QueryParams.endTime);

const intStartTime = parseInt(startTime || '0', 10);
const intEndTime = parseInt(endTime || '0', 10);
const hasStartAndEndParams = !!intStartTime && !!intEndTime;

const { maxTime, minTime } = useMemo(() => {
if (hasStartAndEndParams)
return GetMinMax('custom', [intStartTime, intEndTime]);
return GetMinMax(globalTime.selectedTime);
}, [hasStartAndEndParams, intStartTime, intEndTime, globalTime.selectedTime]);

const ruleId = params.get(QueryParams.ruleId);

return {
ruleId,
startTime: Math.floor(nanoToMilli(minTime)),
endTime: Math.floor(nanoToMilli(maxTime)),
hasStartAndEndParams,
params,
};
};
export const useRouteTabUtils = (): { routes: TabRoutes[] } => {
const urlQuery = useUrlQuery();

Expand Down Expand Up @@ -96,11 +134,7 @@ export const useGetAlertRuleDetails = (): {
data: UseQueryResult;
isValidRuleId: boolean;
} => {
const { search } = useLocation();

const params = new URLSearchParams(search);

const ruleId = params.get(QueryParams.ruleId);
const { ruleId } = useAlertHistoryQueryParams();

const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;

Expand Down Expand Up @@ -133,12 +167,7 @@ type GetAlertRuleDetailsStatsProps = GetAlertRuleDetailsApiProps & {
};

export const useGetAlertRuleDetailsStats = (): GetAlertRuleDetailsStatsProps => {
const { search } = useLocation();
const params = new URLSearchParams(search);

const ruleId = params.get(QueryParams.ruleId);
const startTime = params.get(QueryParams.startTime);
const endTime = params.get(QueryParams.endTime);
const { ruleId, startTime, endTime } = useAlertHistoryQueryParams();

const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;

Expand All @@ -148,8 +177,8 @@ export const useGetAlertRuleDetailsStats = (): GetAlertRuleDetailsStatsProps =>
queryFn: () =>
ruleStats({
id: parseInt(ruleId || '', 10),
start: parseInt(startTime || '', 10),
end: parseInt(endTime || '', 10),
start: startTime,
end: endTime,
}),
enabled: isValidRuleId && !!startTime && !!endTime,
refetchOnMount: false,
Expand All @@ -168,12 +197,7 @@ type GetAlertRuleDetailsTopContributorsProps = GetAlertRuleDetailsApiProps & {
};

export const useGetAlertRuleDetailsTopContributors = (): GetAlertRuleDetailsTopContributorsProps => {
const { search } = useLocation();
const params = new URLSearchParams(search);

const ruleId = params.get(QueryParams.ruleId);
const startTime = params.get(QueryParams.startTime);
const endTime = params.get(QueryParams.endTime);
const { ruleId, startTime, endTime } = useAlertHistoryQueryParams();

const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;

Expand All @@ -183,8 +207,8 @@ export const useGetAlertRuleDetailsTopContributors = (): GetAlertRuleDetailsTopC
queryFn: () =>
topContributors({
id: parseInt(ruleId || '', 10),
start: parseInt(startTime || '', 10),
end: parseInt(endTime || '', 10),
start: startTime,
end: endTime,
}),
enabled: isValidRuleId,
refetchOnMount: false,
Expand All @@ -207,9 +231,7 @@ export const useGetAlertRuleDetailsTimelineTable = ({
}: {
filters: TagFilter;
}): GetAlertRuleDetailsTimelineTableProps => {
const { search } = useLocation();

const params = useMemo(() => new URLSearchParams(search), [search]);
const { ruleId, startTime, endTime, params } = useAlertHistoryQueryParams();

const { updatedOrder, getUpdatedOffset } = useMemo(
() => ({
Expand All @@ -219,9 +241,6 @@ export const useGetAlertRuleDetailsTimelineTable = ({
[params],
);

const ruleId = params.get(QueryParams.ruleId);
const startTime = params.get(QueryParams.startTime);
const endTime = params.get(QueryParams.endTime);
const timelineFilter = params.get('timelineFilter');

const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
Expand All @@ -242,8 +261,8 @@ export const useGetAlertRuleDetailsTimelineTable = ({
queryFn: () =>
timelineTable({
id: parseInt(ruleId || '', 10),
start: parseInt(startTime || '', 10),
end: parseInt(endTime || '', 10),
start: startTime,
end: endTime,
limit: TIMELINE_TABLE_PAGE_SIZE,
order: updatedOrder,
offset: parseInt(getUpdatedOffset, 10),
Expand Down Expand Up @@ -325,39 +344,6 @@ export const useTimelineTable = ({
return { paginationConfig, onChangeHandler };
};

export const useSetStartAndEndTimeFromRelativeTime = (): void => {
const { pathname, search } = useLocation();
const searchParams = useMemo(() => new URLSearchParams(search), [search]);

const { relativeTime, startTime, endTime } = useMemo(
() => ({
relativeTime: searchParams.get(QueryParams.relativeTime),
startTime: searchParams.get(QueryParams.startTime),
endTime: searchParams.get(QueryParams.endTime),
}),
[searchParams],
);

useEffect(() => {
if (
!relativeTime ||
pathname !== ROUTES.ALERT_HISTORY ||
startTime ||
endTime
) {
return;
}

const { minTime, maxTime } = GetMinMax(relativeTime);

searchParams.set(QueryParams.startTime, nanoToMilli(minTime).toString());
searchParams.set(QueryParams.endTime, nanoToMilli(maxTime).toString());

history.push({ search: searchParams.toString() });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [relativeTime, startTime, endTime]);
};

export const useAlertRuleStatusToggle = ({
state,
ruleId,
Expand Down Expand Up @@ -412,13 +398,7 @@ type GetAlertRuleDetailsTimelineGraphProps = GetAlertRuleDetailsApiProps & {
};

export const useGetAlertRuleDetailsTimelineGraphData = (): GetAlertRuleDetailsTimelineGraphProps => {
const { search } = useLocation();

const params = useMemo(() => new URLSearchParams(search), [search]);

const ruleId = params.get(QueryParams.ruleId);
const startTime = params.get(QueryParams.startTime);
const endTime = params.get(QueryParams.endTime);
const { ruleId, startTime, endTime } = useAlertHistoryQueryParams();

const isValidRuleId = ruleId !== null && String(ruleId).length !== 0;
const hasStartAndEnd = startTime !== null && endTime !== null;
Expand All @@ -429,8 +409,8 @@ export const useGetAlertRuleDetailsTimelineGraphData = (): GetAlertRuleDetailsTi
queryFn: () =>
timelineGraph({
id: parseInt(ruleId || '', 10),
start: parseInt(startTime || '', 10),
end: parseInt(endTime || '', 10),
start: startTime,
end: endTime,
}),
enabled: isValidRuleId && hasStartAndEnd,
refetchOnMount: false,
Expand Down

0 comments on commit 354ff5b

Please sign in to comment.