feat: added custom title handling in gridtablecomponent

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;
 };
 

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}

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'>;
 

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}
 		/>

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 {