mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 09:05:45 -06:00
* feat: add clear logs to explorer's live logs * refactor live logs pause/resume updating logic * add tests for clearing live logs * rm unused imports * move `onClear` live logs logic to redux * move clear logs tests to `query.test` * use utils `sortLogsRows` and Button's icon props * rename `filterLogRows` and add `clearedAt` as an arg * mv clearedAt type closer to live tailing items and add jsdoc * mv `filterLogRowsByTime` to `/utils` and use it at `LiveLogs` component * make `Exit live` button consistent with other actions * use `sortLogRows` and fix timestamp by id on `makeLogs` * change clear live logs from based on timestamp to index on logRows * assign `null` to `clearedAtIndex` on first batch of logs live * move `isFirstStreaming` implementation to `clearLogs` reducer * fix `clearLogs` tests * Update public/app/features/explore/state/query.ts Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> --------- Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import React from 'react';
|
|
|
|
import { LogRowModel } from '@grafana/data';
|
|
|
|
import { LiveLogsWithTheme } from './LiveLogs';
|
|
import { makeLogs } from './__mocks__/makeLogs';
|
|
|
|
const setup = (rows: LogRowModel[]) =>
|
|
render(
|
|
<LiveLogsWithTheme
|
|
logRows={rows}
|
|
timeZone={'utc'}
|
|
stopLive={() => {}}
|
|
onPause={() => {}}
|
|
onResume={() => {}}
|
|
onClear={() => {}}
|
|
clearedAtIndex={null}
|
|
isPaused={true}
|
|
/>
|
|
);
|
|
|
|
describe('LiveLogs', () => {
|
|
it('renders logs', () => {
|
|
const logRows = makeLogs(3);
|
|
setup(logRows);
|
|
|
|
expect(screen.getByRole('cell', { name: 'log message 1' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 2' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 3' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders new logs only when not paused', () => {
|
|
const logRows = makeLogs(6);
|
|
const firstLogs = logRows.slice(0, 3);
|
|
const secondLogs = logRows.slice(3, 6);
|
|
const { rerender } = setup(firstLogs);
|
|
|
|
rerender(
|
|
<LiveLogsWithTheme
|
|
logRows={secondLogs}
|
|
timeZone={'utc'}
|
|
stopLive={() => {}}
|
|
onPause={() => {}}
|
|
onClear={() => {}}
|
|
clearedAtIndex={null}
|
|
onResume={() => {}}
|
|
isPaused={true}
|
|
/>
|
|
);
|
|
|
|
expect(screen.getByRole('cell', { name: 'log message 1' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 2' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 3' })).toBeInTheDocument();
|
|
expect(screen.queryByRole('cell', { name: 'log message 4' })).not.toBeInTheDocument();
|
|
expect(screen.queryByRole('cell', { name: 'log message 5' })).not.toBeInTheDocument();
|
|
expect(screen.queryByRole('cell', { name: 'log message 6' })).not.toBeInTheDocument();
|
|
|
|
rerender(
|
|
<LiveLogsWithTheme
|
|
logRows={secondLogs}
|
|
timeZone={'utc'}
|
|
stopLive={() => {}}
|
|
onPause={() => {}}
|
|
onResume={() => {}}
|
|
onClear={() => {}}
|
|
clearedAtIndex={null}
|
|
isPaused={false}
|
|
/>
|
|
);
|
|
|
|
expect(screen.getByRole('cell', { name: 'log message 4' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 5' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 6' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('renders ansi logs', () => {
|
|
const commonLog = makeLogs(1);
|
|
const firstAnsiLog = makeLogs(1, { hasAnsi: true, raw: 'log message \u001B[31m2\u001B[0m', uid: '2' });
|
|
const secondAnsiLog = makeLogs(1, { hasAnsi: true, raw: 'log message \u001B[33m3\u001B[0m', uid: '3' });
|
|
const logRows = [...commonLog, ...firstAnsiLog, ...secondAnsiLog];
|
|
|
|
setup(logRows);
|
|
|
|
expect(screen.getByRole('cell', { name: 'log message 1' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 2' })).toBeInTheDocument();
|
|
expect(screen.getByRole('cell', { name: 'log message 3' })).toBeInTheDocument();
|
|
|
|
const logList = screen.getAllByTestId('ansiLogLine');
|
|
expect(logList).toHaveLength(2);
|
|
expect(logList[0]).toHaveAttribute('style', 'color: rgb(204, 0, 0);');
|
|
expect(logList[1]).toHaveAttribute('style', 'color: rgb(204, 102, 0);');
|
|
});
|
|
});
|