feat: Funnel Details Page Base Structure

frontend/package.json

@@ -87,7 +87,7 @@
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
-		"lucide-react": "0.427.0",
+		"lucide-react": "0.498.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"motion": "12.4.13",
 		"overlayscrollbars": "^2.8.1",

frontend/src/AppRoutes/pageComponents.ts

@@ -47,9 +47,10 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
+	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
-			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesFunnelDetails'
+			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
 		),
 );
 

frontend/src/api/traceFunnels/index.ts

@@ -5,6 +5,7 @@ import {
 	CreateFunnelPayload,
 	CreateFunnelResponse,
 	FunnelData,
+	FunnelStepData,
 } from 'types/api/traceFunnels';
 
 const FUNNELS_BASE_PATH = '/trace-funnels';
@@ -13,7 +14,7 @@ export const createFunnel = async (
 	payload: CreateFunnelPayload,
 ): Promise<SuccessResponse<CreateFunnelResponse> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/new-funnel`,
+		`${FUNNELS_BASE_PATH}/new`,
 		payload,
 	);
 
@@ -25,60 +26,45 @@ export const createFunnel = async (
 	};
 };
 
-interface GetFunnelsListParams {
-	search?: string;
-}
-
-export const getFunnelsList = async ({
-	search = '',
-}: GetFunnelsListParams = {}): Promise<
+export const getFunnelsList = async (): Promise<
 	SuccessResponse<FunnelData[]> | ErrorResponse
 > => {
-	const params = new URLSearchParams();
-	if (search.length) {
-		params.set('search', search);
-	}
-
-	const response: AxiosResponse = await axios.get(
-		`${FUNNELS_BASE_PATH}/list${
-			params.toString() ? `?${params.toString()}` : ''
-		}`,
-	);
+	const response: AxiosResponse = await axios.get(`${FUNNELS_BASE_PATH}/list`);
 
 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };
 
 export const getFunnelById = async (
-	funnelId: string,
+	funnelId?: string,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.get(
-		`${FUNNELS_BASE_PATH}/get/${funnelId}`,
+		`${FUNNELS_BASE_PATH}/${funnelId}`,
 	);
-
 	return {
 		statusCode: 200,
 		error: null,
 		message: '',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };
 
-interface RenameFunnelPayload {
-	id: string;
+export interface RenameFunnelPayload {
+	funnel_id: string;
 	funnel_name: string;
+	timestamp: number;
 }
 
 export const renameFunnel = async (
 	payload: RenameFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.put(
-		`${FUNNELS_BASE_PATH}/${payload.id}/update`,
-		{ funnel_name: payload.funnel_name },
+		`${FUNNELS_BASE_PATH}/${payload.funnel_id}`,
+		payload,
 	);
 
 	return {
@@ -97,7 +83,7 @@ export const deleteFunnel = async (
 	payload: DeleteFunnelPayload,
 ): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.delete(
-		`${FUNNELS_BASE_PATH}/delete/${payload.id}`,
+		`${FUNNELS_BASE_PATH}/${payload.id}`,
 	);
 
 	return {
@@ -107,3 +93,247 @@ export const deleteFunnel = async (
 		payload: response.data,
 	};
 };
+
+export interface UpdateFunnelStepsPayload {
+	funnel_id: string;
+	steps: FunnelStepData[];
+	timestamp: number;
+}
+
+export const updateFunnelSteps = async (
+	payload: UpdateFunnelStepsPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.put(
+		`${FUNNELS_BASE_PATH}/steps/update`,
+		payload,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel steps updated successfully',
+		payload: response.data.data,
+	};
+};
+
+export interface ValidateFunnelPayload {
+	start_time: number;
+	end_time: number;
+}
+
+export interface ValidateFunnelResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			trace_id: string;
+		};
+	}> | null;
+}
+
+export const validateFunnelSteps = async (
+	funnelId: string,
+	payload: ValidateFunnelPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<ValidateFunnelResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/validate`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface UpdateFunnelStepDetailsPayload {
+	funnel_id: string;
+	steps: Array<{
+		step_name: string;
+		description: string;
+	}>;
+	updated_at: number;
+}
+
+interface UpdateFunnelDescriptionPayload {
+	funnel_id: string;
+	description: string;
+}
+
+export const saveFunnelDescription = async (
+	payload: UpdateFunnelDescriptionPayload,
+): Promise<SuccessResponse<FunnelData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.post(
+		`${FUNNELS_BASE_PATH}/save`,
+		payload,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Funnel description updated successfully',
+		payload: response.data,
+	};
+};
+
+export interface FunnelOverviewPayload {
+	start_time: number;
+	end_time: number;
+	step_start?: number;
+	step_end?: number;
+}
+
+export interface FunnelOverviewResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			avg_duration: number;
+			avg_rate: number;
+			conversion_rate: number | null;
+			errors: number;
+			p99_latency: number;
+		};
+	}>;
+}
+
+export const getFunnelOverview = async (
+	funnelId: string,
+	payload: FunnelOverviewPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelOverviewResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/overview`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface SlowTracesPayload {
+	start_time: number;
+	end_time: number;
+	step_a_order: number;
+	step_b_order: number;
+}
+
+export interface SlowTraceData {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			duration_ms: string;
+			span_count: number;
+			trace_id: string;
+		};
+	}>;
+}
+
+export const getFunnelSlowTraces = async (
+	funnelId: string,
+	payload: SlowTracesPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/slow-traces`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+export interface ErrorTracesPayload {
+	start_time: number;
+	end_time: number;
+	step_a_order: number;
+	step_b_order: number;
+}
+
+export interface ErrorTraceData {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: {
+			duration_ms: string;
+			span_count: number;
+			trace_id: string;
+		};
+	}>;
+}
+
+export const getFunnelErrorTraces = async (
+	funnelId: string,
+	payload: ErrorTracesPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
+	const response: AxiosResponse = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/error-traces`,
+		payload,
+		{
+			signal,
+		},
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};
+
+export interface FunnelStepsPayload {
+	start_time: number;
+	end_time: number;
+}
+
+export interface FunnelStepGraphMetrics {
+	[key: `total_s${number}_spans`]: number;
+	[key: `total_s${number}_errored_spans`]: number;
+}
+
+export interface FunnelStepsResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: FunnelStepGraphMetrics;
+	}>;
+}
+
+export const getFunnelSteps = async (
+	funnelId: string,
+	payload: FunnelStepsPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelStepsResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};