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 (
+ {endpoint === 'n/a' || url === undefined ? '-' : endpoint}
+ );
+ },
A: (numOfCalls: any): ReactNode => (
{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;
} & Pick &
Omit, '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;
}
export interface PromQLWidgets extends IBaseWidget {