diff --git a/frontend/src/container/ApiMonitoring/utils.tsx b/frontend/src/container/ApiMonitoring/utils.tsx index bb4f46c0a5..f452b6e61f 100644 --- a/frontend/src/container/ApiMonitoring/utils.tsx +++ b/frontend/src/container/ApiMonitoring/utils.tsx @@ -123,7 +123,23 @@ export const columnsConfig: ColumnType[] = [ key: 'endpointCount', width: '14.2%', ellipsis: true, - sorter: false, + sorter: (rowA: APIDomainsRowData, rowB: APIDomainsRowData): number => { + const endpointA = + rowA.endpointCount === '-' || rowA.endpointCount === 'n/a' + ? '' + : rowA.endpointCount; + const endpointB = + rowB.endpointCount === '-' || rowB.endpointCount === 'n/a' + ? '' + : rowB.endpointCount; + + // Handle cases where one or both values are empty + if (!endpointA && !endpointB) return 0; + if (!endpointA) return 1; + if (!endpointB) return -1; + + return Number(endpointA) - Number(endpointB); + }, align: 'right', className: `column`, }, @@ -132,13 +148,24 @@ export const columnsConfig: ColumnType[] = [ dataIndex: 'lastUsed', key: 'lastUsed', width: '14.2%', - sorter: false, align: 'right', className: `column`, - render: (lastUsed: number | string): string => + sorter: (rowA: APIDomainsRowData, rowB: APIDomainsRowData): number => { + const dateA = + rowA.lastUsed === '-' || rowA.lastUsed === 'n/a' + ? new Date(0).toISOString() + : rowA.lastUsed; + const dateB = + rowB.lastUsed === '-' || rowB.lastUsed === 'n/a' + ? new Date(0).toISOString() + : rowB.lastUsed; + + return new Date(dateB).getTime() - new Date(dateA).getTime(); + }, + render: (lastUsed: string): string => lastUsed === 'n/a' || lastUsed === '-' ? '-' - : getLastUsedRelativeTime(lastUsed as number), + : getLastUsedRelativeTime(new Date(lastUsed).getTime()), }, { title: ( @@ -149,7 +176,11 @@ export const columnsConfig: ColumnType[] = [ dataIndex: 'rate', key: 'rate', width: '14.2%', - sorter: false, + sorter: (rowA: APIDomainsRowData, rowB: APIDomainsRowData): number => { + const rateA = rowA.rate === '-' || rowA.rate === 'n/a' ? 0 : rowA.rate; + const rateB = rowB.rate === '-' || rowB.rate === 'n/a' ? 0 : rowB.rate; + return Number(rateA) - Number(rateB); + }, align: 'right', className: `column`, }, @@ -162,7 +193,14 @@ export const columnsConfig: ColumnType[] = [ dataIndex: 'errorRate', key: 'errorRate', width: '14.2%', - sorter: false, + sorter: (rowA: APIDomainsRowData, rowB: APIDomainsRowData): number => { + const errorRateA = + rowA.errorRate === '-' || rowA.errorRate === 'n/a' ? 0 : rowA.errorRate; + const errorRateB = + rowB.errorRate === '-' || rowB.errorRate === 'n/a' ? 0 : rowB.errorRate; + + return Number(errorRateA) - Number(errorRateB); + }, align: 'right', className: `column`, render: (errorRate: number | string): React.ReactNode => { @@ -195,7 +233,14 @@ export const columnsConfig: ColumnType[] = [ dataIndex: 'latency', key: 'latency', width: '14.2%', - sorter: false, + sorter: (rowA: APIDomainsRowData, rowB: APIDomainsRowData): number => { + const latencyA = + rowA.latency === '-' || rowA.latency === 'n/a' ? 0 : rowA.latency; + const latencyB = + rowB.latency === '-' || rowB.latency === 'n/a' ? 0 : rowB.latency; + + return Number(latencyA) - Number(latencyB); + }, align: 'right', className: `column`, },