From b24095236f6110e0b7b1d03cf719bc8a5433c62b Mon Sep 17 00:00:00 2001
From: sawhil <sawhil.khan@gmail.com>
Date: Sat, 26 Apr 2025 08:28:08 +0530
Subject: [PATCH] feat: added custom title handling in gridtablecomponent

---
 frontend/src/container/ApiMonitoring/utils.tsx     | 11 +++++++++++
 .../src/container/GridTableComponent/index.tsx     | 14 +++++++++++++-
 frontend/src/container/GridTableComponent/types.ts |  1 +
 .../container/PanelWrapper/TablePanelWrapper.tsx   |  1 +
 frontend/src/types/api/dashboard/getAll.ts         |  1 +
 5 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/container/ApiMonitoring/utils.tsx b/frontend/src/container/ApiMonitoring/utils.tsx
index 4212b202eb..5eb1a64886 100644
--- a/frontend/src/container/ApiMonitoring/utils.tsx
+++ b/frontend/src/container/ApiMonitoring/utils.tsx
@@ -3555,6 +3555,12 @@ export const getAllEndpointsWidgetData = (
 	);
 
 	widget.renderColumnCell = {
+		'http.url': (url: any): ReactNode => {
+			const { endpoint } = extractPortAndEndpoint(url);
+			return (
+				<span>{endpoint === 'n/a' || url === undefined ? '-' : endpoint}</span>
+			);
+		},
 		A: (numOfCalls: any): ReactNode => (
 			<span>
 				{numOfCalls === 'n/a' || numOfCalls === undefined ? '-' : numOfCalls}
@@ -3604,6 +3610,11 @@ export const getAllEndpointsWidgetData = (
 		),
 	};
 
+	widget.customColTitles = {
+		'http.url': 'Endpoint',
+		'net.peer.port': 'Port',
+	};
+
 	return widget;
 };
 
diff --git a/frontend/src/container/GridTableComponent/index.tsx b/frontend/src/container/GridTableComponent/index.tsx
index ca608f4002..db5e77d44d 100644
--- a/frontend/src/container/GridTableComponent/index.tsx
+++ b/frontend/src/container/GridTableComponent/index.tsx
@@ -227,6 +227,18 @@ function GridTableComponent({
 		[newColumnData, props.renderColumnCell],
 	);
 
+	const newColumnsWithCustomColTitles = useMemo(
+		() =>
+			newColumnsWithRenderColumnCell.map((column) => ({
+				...column,
+				...('dataIndex' in column &&
+				props.customColTitles?.[column.dataIndex as string]
+					? { title: props.customColTitles[column.dataIndex as string] }
+					: {}),
+			})),
+		[newColumnsWithRenderColumnCell, props.customColTitles],
+	);
+
 	useEffect(() => {
 		eventEmitter.emit(Events.TABLE_COLUMNS_DATA, {
 			columns: newColumnData,
@@ -243,7 +255,7 @@ function GridTableComponent({
 				columns={
 					openTracesButton
 						? columnDataWithOpenTracesButton
-						: newColumnsWithRenderColumnCell
+						: newColumnsWithCustomColTitles
 				}
 				dataSource={dataSource}
 				sticky={sticky}
diff --git a/frontend/src/container/GridTableComponent/types.ts b/frontend/src/container/GridTableComponent/types.ts
index a8b7c4db21..0378476745 100644
--- a/frontend/src/container/GridTableComponent/types.ts
+++ b/frontend/src/container/GridTableComponent/types.ts
@@ -21,6 +21,7 @@ export type GridTableComponentProps = {
 	customOnRowClick?: (record: RowData) => void;
 	widgetId?: string;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
+	customColTitles?: Record<string, string>;
 } & Pick<LogsExplorerTableProps, 'data'> &
 	Omit<TableProps<RowData>, 'columns' | 'dataSource'>;
 
diff --git a/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx b/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx
index 9b504b8a2b..ed3c045431 100644
--- a/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/TablePanelWrapper.tsx
@@ -30,6 +30,7 @@ function TablePanelWrapper({
 			customOnRowClick={customOnRowClick}
 			widgetId={widget.id}
 			renderColumnCell={widget.renderColumnCell}
+			customColTitles={widget.customColTitles}
 			// eslint-disable-next-line react/jsx-props-no-spreading
 			{...GRID_TABLE_CONFIG}
 		/>
diff --git a/frontend/src/types/api/dashboard/getAll.ts b/frontend/src/types/api/dashboard/getAll.ts
index 8ec581bb60..65e26d0cbb 100644
--- a/frontend/src/types/api/dashboard/getAll.ts
+++ b/frontend/src/types/api/dashboard/getAll.ts
@@ -115,6 +115,7 @@ export interface IBaseWidget {
 export interface Widgets extends IBaseWidget {
 	query: Query;
 	renderColumnCell?: QueryTableProps['renderColumnCell'];
+	customColTitles?: Record<string, string>;
 }
 
 export interface PromQLWidgets extends IBaseWidget {