Merge pull request #703 from SigNoz/pranshuchittora/feat/dynamic-step-size

feat(FE): Dynamic step size of metrics page

frontend/src/container/GridGraphLayout/Graph/FullView/index.tsx

@@ -16,6 +16,7 @@ import getChartData from 'lib/getChartData';
 import GetMaxMinTime from 'lib/getMaxMinTime';
 import GetMinMax from 'lib/getMinMax';
 import getStartAndEndTime from 'lib/getStartAndEndTime';
+import getStep from 'lib/getStep';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -90,7 +91,11 @@ const FullView = ({
 							end: queryMinMax.max.toString(),
 							query: query.query,
 							start: queryMinMax.min.toString(),
-							step: '60',
+							step: `${getStep({
+								start: queryMinMax.min,
+								end: queryMinMax.max,
+								inputFormat: 's',
+							})}`,
 						});
 						return {
 							query: query.query,

frontend/src/lib/__tests__/getStep.test.ts

@@ -0,0 +1,67 @@
+import dayjs from 'dayjs';
+import getStep, { DefaultStepSize } from 'lib/getStep';
+
+describe('lib/getStep', () => {
+	test('should return default step when the given range is less than 1 day', () => {
+		const start = dayjs();
+		const end = start.add(1, 'hour');
+		const startUnix = start.valueOf();
+		const endUnix = end.valueOf();
+
+		expect(
+			getStep({
+				start: startUnix / 1e3,
+				end: endUnix / 1e3,
+				inputFormat: 's',
+			}),
+		).toEqual(DefaultStepSize);
+
+		expect(
+			getStep({
+				start: startUnix,
+				end: endUnix,
+				inputFormat: 'ms',
+			}),
+		).toEqual(DefaultStepSize);
+
+		expect(
+			getStep({
+				start: startUnix * 1e6,
+				end: endUnix * 1e6,
+				inputFormat: 'ns',
+			}),
+		).toEqual(DefaultStepSize);
+	});
+
+	test('should return relevant step when the given range is greater than 1 day', () => {
+		const start = dayjs();
+		const end = start.add(1, 'Day').add(1, 'Second');
+		const startUnix = start.valueOf();
+		const endUnix = end.valueOf();
+
+		const expectedStepSize = end.diff(start, 'days') * DefaultStepSize;
+		expect(
+			getStep({
+				start: startUnix / 1e3,
+				end: endUnix / 1e3,
+				inputFormat: 's',
+			}),
+		).toEqual(expectedStepSize);
+
+		expect(
+			getStep({
+				start: startUnix,
+				end: endUnix,
+				inputFormat: 'ms',
+			}),
+		).toEqual(expectedStepSize);
+
+		expect(
+			getStep({
+				start: startUnix * 1e6,
+				end: endUnix * 1e6,
+				inputFormat: 'ns',
+			}),
+		).toEqual(expectedStepSize);
+	});
+});

frontend/src/lib/getStep.ts

@@ -0,0 +1,43 @@
+import dayjs from 'dayjs';
+
+type DateType = number | string;
+type DateInputFormatType = 's' | 'ms' | 'ns';
+
+interface GetStepInput {
+	start: DateType;
+	end: DateType;
+	inputFormat: DateInputFormatType;
+}
+
+/**
+ * Converts given timestamp to ms.
+ */
+const convertToMs = (timestamp: number, inputFormat: DateInputFormatType) => {
+	switch (inputFormat) {
+		case 's':
+			return timestamp * 1e3;
+		case 'ms':
+			return timestamp * 1;
+		case 'ns':
+			return timestamp / 1e6;
+	}
+};
+
+export const DefaultStepSize = 60;
+
+/**
+ *	Returns relevant step size based on given start and end date.
+ */
+const getStep = ({ start, end, inputFormat = 'ms' }: GetStepInput): number => {
+	const startDate = dayjs(convertToMs(Number(start), inputFormat));
+	const endDate = dayjs(convertToMs(Number(end), inputFormat));
+	const diffDays = Math.abs(endDate.diff(startDate, 'days'));
+
+	if (diffDays > 1) {
+		return DefaultStepSize * diffDays;
+	}
+
+	return DefaultStepSize;
+};
+
+export default getStep;

frontend/src/store/actions/metrics/getInitialData.ts

@@ -6,6 +6,7 @@ import getServiceOverview from 'api/metrics/getServiceOverview';
 import getTopEndPoints from 'api/metrics/getTopEndPoints';
 import { AxiosError } from 'axios';
 import GetMinMax from 'lib/getMinMax';
+import getStep from 'lib/getStep';
 import { Dispatch } from 'redux';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
@@ -64,7 +65,7 @@ export const GetInitialData = (
 					end: maxTime,
 					service: props.serviceName,
 					start: minTime,
-					step,
+					step: getStep({ start: minTime, end: maxTime, inputFormat: 'ns' }),
 				}),
 				getTopEndPoints({
 					end: maxTime,