diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx index c92e235e4..1beee2b1e 100644 --- a/packages/app/src/PodDetailsSidePanel.tsx +++ b/packages/app/src/PodDetailsSidePanel.tsx @@ -21,6 +21,7 @@ import { K8S_CPU_PERCENTAGE_NUMBER_FORMAT, K8S_MEM_NUMBER_FORMAT, } from '@/ChartUtils'; +import DBRowSidePanel from '@/components/DBRowSidePanel'; import { DBSqlRowTable } from '@/components/DBRowTable'; import { DBTimeChart } from '@/components/DBTimeChart'; import { DrawerBody, DrawerHeader } from '@/components/DrawerUtils'; @@ -132,15 +133,56 @@ function PodLogs({ dateRange, logSource, where, + rowId, + onRowClick, }: { dateRange: [Date, Date]; logSource: TSource; where: string; + rowId: string | null; + onRowClick: (rowId: string) => void; }) { const [resultType, setResultType] = React.useState<'all' | 'error'>('all'); const _where = where + (resultType === 'error' ? ' Severity:err' : ''); + // Create a properly typed config object for DBSqlRowTable + const tableConfig = React.useMemo(() => { + return { + from: logSource.from, + where: _where, + whereLanguage: 'lucene' as const, + timestampValueExpression: logSource.timestampValueExpression, + implicitColumnExpression: logSource.implicitColumnExpression, + connection: logSource.connection, + select: [ + { + valueExpression: logSource.timestampValueExpression, + alias: 'Timestamp', + }, + { + valueExpression: `${logSource.severityTextExpression}`, + alias: 'Severity', + }, + { + valueExpression: `${logSource.serviceNameExpression}`, + alias: 'Service', + }, + { + valueExpression: `${logSource.resourceAttributesExpression}['k8s.container.name']`, + alias: 'Container', + }, + { + valueExpression: `${getEventBody(logSource)}`, + alias: 'Message', + }, + ], + orderBy: `${logSource.timestampValueExpression} DESC`, + limit: { limit: 200, offset: 0 }, + dateRange, + }; + }, [_where, dateRange, logSource]); + return ( @@ -160,59 +202,14 @@ function PodLogs({ { label: 'Errors', value: 'error' }, ]} /> - {/* - - - Search - - - */} {}} - highlightedLineId={undefined} + config={tableConfig} + onRowExpandClick={onRowClick} + highlightedLineId={rowId ?? undefined} isLive={false} queryKeyPrefix="k8s-dashboard-pod-logs" onScroll={() => {}} @@ -237,6 +234,14 @@ export default function PodDetailsSidePanel({ }, ); + const [rowId, setRowId] = React.useState(null); + const handleRowClick = React.useCallback((rowWhere: string) => { + setRowId(rowWhere); + }, []); + const handleCloseRowSidePanel = React.useCallback(() => { + setRowId(null); + }, []); + // If we're in a nested side panel, we need to use a higher z-index // TODO: This is a hack const [nodeName] = useQueryParam('nodeName', StringParam); @@ -324,8 +329,12 @@ export default function PodDetailsSidePanel({ ]); const handleClose = React.useCallback(() => { + if (rowId) { + // If we're in a nested side panel, don't close the drawer + return; + } setPodName(undefined); - }, [setPodName]); + }, [rowId, setPodName]); if (!podName) { return null; @@ -333,7 +342,7 @@ export default function PodDetailsSidePanel({ return ( + {rowId && ( + + )}