feat: implement inspect feature for metrics explorer (#7549)

Author: amlannandy

frontend/src/api/metricsExplorer/getInspectMetricsDetails.ts

@@ -0,0 +1,54 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface InspectMetricsRequest {
+	metricName: string;
+	start: number;
+	end: number;
+	filters: TagFilter;
+}
+
+export interface InspectMetricsResponse {
+	status: string;
+	data: {
+		series: InspectMetricsSeries[];
+	};
+}
+
+export interface InspectMetricsSeries {
+	title?: string;
+	strokeColor?: string;
+	labels: Record<string, string>;
+	labelsArray: Array<Record<string, string>>;
+	values: InspectMetricsTimestampValue[];
+}
+
+interface InspectMetricsTimestampValue {
+	timestamp: number;
+	value: string;
+}
+
+export const getInspectMetricsDetails = async (
+	request: InspectMetricsRequest,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<InspectMetricsResponse> | ErrorResponse> => {
+	try {
+		const response = await axios.post(`/metrics/inspect`, request, {
+			signal,
+			headers,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/components/ResizeTable/styles.ts

@@ -1,6 +1,9 @@
+import React from 'react';
 import styled from 'styled-components';
 
-export const SpanStyle = styled.span`
+type SpanProps = React.HTMLAttributes<HTMLSpanElement>;
+
+export const SpanStyle = styled.span<SpanProps>`
 	position: absolute;
 	right: -0.313rem;
 	bottom: 0;
@@ -12,7 +15,7 @@ export const SpanStyle = styled.span`
 	margin-right: 4px;
 `;
 
-export const DragSpanStyle = styled.span`
+export const DragSpanStyle = styled.span<SpanProps>`
 	display: flex;
 	margin: -1rem;
 	padding: 1rem;

frontend/src/constants/reactQueryKeys.ts

@@ -51,6 +51,7 @@ export const REACT_QUERY_KEY = {
 	GET_METRICS_LIST_FILTER_VALUES: 'GET_METRICS_LIST_FILTER_VALUES',
 	GET_METRIC_DETAILS: 'GET_METRIC_DETAILS',
 	GET_RELATED_METRICS: 'GET_RELATED_METRICS',
+	GET_INSPECT_METRICS_DETAILS: 'GET_INSPECT_METRICS_DETAILS',
 
 	// API Monitoring Query Keys
 	GET_DOMAINS_LIST: 'GET_DOMAINS_LIST',