feat: adds log explorer component #2283
+1,881
−321
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import { render, screen, waitFor } from 'test-utils'; | ||
| import { userEvent } from '@testing-library/user-event'; | ||
| import { TooltipProvider } from 'components/redpanda-ui/components/tooltip'; | ||
| import type { Pipeline } from '../../../protogen/redpanda/api/dataplane/v1/pipeline_pb'; | ||
| import type { TopicMessage } from '../../../state/rest-interfaces'; | ||
|
|
||
| const mockRefresh = vi.fn(); | ||
| let mockReturn: { | ||
| messages: TopicMessage[]; | ||
| phase: string | null; | ||
| error: string | null; | ||
| refresh: () => void; | ||
| }; | ||
|
|
||
| vi.mock('../../../react-query/api/logs', () => ({ | ||
| useLogSearch: () => mockReturn, | ||
| })); | ||
|
|
||
| import { LogExplorer } from './log-explorer'; | ||
|
|
||
| function makeMessage(overrides: Partial<TopicMessage> & { valuePayload?: Record<string, unknown> }): TopicMessage { | ||
| const { valuePayload, ...rest } = overrides; | ||
| const payload = valuePayload ?? { message: 'test log', level: 'INFO', path: 'root.input' }; | ||
| return { | ||
| partitionID: 0, | ||
| offset: 0, | ||
| timestamp: Date.now(), | ||
| compression: 'uncompressed', | ||
| isTransactional: false, | ||
| headers: [], | ||
| key: { payload: '', isPayloadNull: false, encoding: 'text', schemaId: 0, size: 0 }, | ||
| value: { payload, isPayloadNull: false, encoding: 'json', schemaId: 0, size: 100 }, | ||
| valueJson: JSON.stringify(payload), | ||
| valueBinHexPreview: '', | ||
| keyJson: 'pipeline-1', | ||
| keyBinHexPreview: '', | ||
| ...rest, | ||
| } as TopicMessage; | ||
| } | ||
|
|
||
| const pipeline = { id: 'pipeline-1', displayName: 'Test Pipeline' } as unknown as Pipeline; | ||
|
|
||
| function renderExplorer() { | ||
| return render( | ||
| <TooltipProvider> | ||
| <LogExplorer pipeline={pipeline} /> | ||
| </TooltipProvider>, | ||
| ); | ||
| } | ||
|
|
||
| describe('LogExplorer', () => { | ||
| beforeEach(() => { | ||
| vi.clearAllMocks(); | ||
| mockReturn = { | ||
| messages: [], | ||
| phase: null, | ||
| error: null, | ||
| refresh: mockRefresh, | ||
| }; | ||
| }); | ||
|
|
||
| test('shows spinner while searching with no messages', () => { | ||
| mockReturn.phase = 'Searching...'; | ||
| renderExplorer(); | ||
| expect(screen.getByTestId('log-loading-spinner')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('shows empty state when no messages and search complete', () => { | ||
| renderExplorer(); | ||
| expect(screen.getByText('No messages')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('renders table with log entries', () => { | ||
| mockReturn.messages = [ | ||
| makeMessage({ offset: 1, valuePayload: { message: 'First log', level: 'INFO', path: 'root.input' } }), | ||
| makeMessage({ offset: 2, valuePayload: { message: 'Second log', level: 'ERROR', path: 'root.output' } }), | ||
| ]; | ||
| renderExplorer(); | ||
| expect(screen.getByText(/First log/)).toBeInTheDocument(); | ||
| expect(screen.getByText(/Second log/)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('displays timestamps for each entry', () => { | ||
| const ts = new Date('2025-01-15T12:00:00Z').getTime(); | ||
| mockReturn.messages = [makeMessage({ offset: 1, timestamp: ts })]; | ||
| renderExplorer(); | ||
| const rows = screen.getAllByRole('row'); | ||
| // header row + 1 data row | ||
| expect(rows.length).toBeGreaterThanOrEqual(2); | ||
| }); | ||
|
|
||
| test('displays log level badges', () => { | ||
| mockReturn.messages = [ | ||
| makeMessage({ offset: 1, valuePayload: { message: 'err', level: 'ERROR', path: 'x' } }), | ||
| makeMessage({ offset: 2, valuePayload: { message: 'warn', level: 'WARN', path: 'x' } }), | ||
| ]; | ||
| renderExplorer(); | ||
| expect(screen.getByText('ERROR')).toBeInTheDocument(); | ||
| expect(screen.getByText('WARN')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('shows error alert when error is set', () => { | ||
| mockReturn.error = 'Connection refused'; | ||
| renderExplorer(); | ||
| expect(screen.getByText('Failed to load logs')).toBeInTheDocument(); | ||
| expect(screen.getByText('Connection refused')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('refresh button calls refresh', async () => { | ||
| const user = userEvent.setup(); | ||
| renderExplorer(); | ||
| const refreshBtn = screen.getByTestId('log-refresh-button'); | ||
| await user.click(refreshBtn); | ||
| expect(mockRefresh).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| test('clicking a row opens detail sheet', async () => { | ||
| const user = userEvent.setup(); | ||
| mockReturn.messages = [ | ||
| makeMessage({ offset: 42, valuePayload: { message: 'Detail test', level: 'INFO', path: 'root.input' } }), | ||
| ]; | ||
| renderExplorer(); | ||
| const dataRow = screen.getAllByRole('row')[1]; | ||
| await user.click(dataRow); | ||
| await waitFor(() => { | ||
| expect(screen.getByText('Partition')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| test('paginates with default 10 per page', () => { | ||
| mockReturn.messages = Array.from({ length: 15 }, (_, i) => | ||
| makeMessage({ offset: i, valuePayload: { message: `Log ${i}`, level: 'INFO', path: 'x' } }), | ||
| ); | ||
| renderExplorer(); | ||
| // Should show 10 data rows on first page (+ 1 header row) | ||
| const rows = screen.getAllByRole('row'); | ||
| expect(rows.length).toBe(11); // 1 header + 10 data | ||
| }); | ||
|
|
||
| test('table has expected column headers', () => { | ||
| renderExplorer(); | ||
| expect(screen.getByText('Timestamp')).toBeInTheDocument(); | ||
| expect(screen.getByText('Level')).toBeInTheDocument(); | ||
| expect(screen.getByText('Component')).toBeInTheDocument(); | ||
| expect(screen.getByText('Message')).toBeInTheDocument(); | ||
| }); | ||
| }); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
adding variant so we can embed legacy version when feature flag for new log explorer is off