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,66 @@
+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 = new Date('2022-01-01T00:00:00.000Z').getTime();
+		const end = new Date('2022-01-01T12:00:00.000Z').getTime();
+
+		expect(
+			getStep({
+				start: start / 1e3,
+				end: end / 1e3,
+				inputFormat: 's',
+			}),
+		).toEqual(DefaultStepSize);
+
+		expect(
+			getStep({
+				start: start,
+				end: end,
+				inputFormat: 'ms',
+			}),
+		).toEqual(DefaultStepSize);
+
+		expect(
+			getStep({
+				start: start * 1e6,
+				end: end * 1e6,
+				inputFormat: 'ns',
+			}),
+		).toEqual(DefaultStepSize);
+	});
+
+	test('should return relevant step when the given range is greater than 1 day', () => {
+		const startISOString = '2022-01-01T00:00:00.000Z';
+		const endISOString = '2022-01-10T00:00:00.000Z';
+		const start = new Date(startISOString).getTime();
+		const end = new Date(endISOString).getTime();
+
+		const expectedStepSize =
+			dayjs(endISOString).diff(dayjs(startISOString), 'days') * DefaultStepSize;
+		expect(
+			getStep({
+				start: start / 1e3,
+				end: end / 1e3,
+				inputFormat: 's',
+			}),
+		).toEqual(expectedStepSize);
+
+		expect(
+			getStep({
+				start: start,
+				end: end,
+				inputFormat: 'ms',
+			}),
+		).toEqual(expectedStepSize);
+
+		expect(
+			getStep({
+				start: start * 1e6,
+				end: end * 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,