diff --git a/app/packages/klogs/src/components/Logs.test.tsx b/app/packages/klogs/src/components/Logs.test.tsx
index fd6e9660..0a810583 100644
--- a/app/packages/klogs/src/components/Logs.test.tsx
+++ b/app/packages/klogs/src/components/Logs.test.tsx
@@ -2,36 +2,92 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi } from 'vitest';
-import { LogsDownload } from './Logs';
-
-describe('LogsDownload', () => {
- const documents = [
- {
- log: '{"namespace": "foo"}',
- namespace: 'foo',
- timestamp: new Date(2000, 2, 2).toISOString(),
- },
- ];
-
- it('can download logs', async () => {
- const download = vi.fn();
- render();
-
- const openMenu = screen.getByLabelText('open menu');
- await userEvent.click(openMenu);
- const downloadJSON = screen.getByLabelText('Download Logs');
- await userEvent.click(downloadJSON);
- expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log');
+import { Documents, LogsDownload } from './Logs';
+
+describe('Logs', () => {
+ describe('LogsDownload', () => {
+ const documents = [
+ {
+ log: '{"namespace": "foo"}',
+ namespace: 'foo',
+ timestamp: new Date(2000, 2, 2).toISOString(),
+ },
+ ];
+
+ it('can download logs', async () => {
+ const download = vi.fn();
+ render();
+
+ const openMenu = screen.getByLabelText('open menu');
+ await userEvent.click(openMenu);
+ const downloadJSON = screen.getByLabelText('Download Logs');
+ await userEvent.click(downloadJSON);
+ expect(download).toHaveBeenCalledWith('{"namespace": "foo"}', 'kobs-export-logs.log');
+ });
+
+ it('can download csv', async () => {
+ const download = vi.fn();
+ render();
+
+ const openMenu = screen.getByLabelText('open menu');
+ await userEvent.click(openMenu);
+ const downloadCSV = screen.getByLabelText('Download CSV');
+ await userEvent.click(downloadCSV);
+ expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv');
+ });
});
- it('can download csv', async () => {
- const download = vi.fn();
- render();
+ describe('Documents', () => {
+ const documents = [
+ {
+ log: '{"namespace": "foo"}',
+ namespace: 'foo',
+ timestamp: new Date(2000, 2, 2).toISOString(),
+ },
+ ];
+
+ const iconName = 'TableChartIcon';
+
+ const setup = (
+ documents: Record[],
+ selectedFields: string[],
+ selectField?: (field: string) => void,
+ ) => {
+ return (
+
+ );
+ };
+
+ it('show documents with column remove button', async () => {
+ const removeFieldMock = vi.fn();
+ const selectedFields = ['log', 'namespace', 'timestamp'];
+ render(setup(documents, selectedFields, removeFieldMock));
+
+ const removeColumnIcons = screen.getAllByTestId(iconName);
+ expect(removeColumnIcons.length).toBe(selectedFields.length);
+ expect(screen.getByText('Time')).toBeInTheDocument();
+ expect(screen.getByText('log')).toBeInTheDocument();
+ expect(screen.getByText('namespace')).toBeInTheDocument();
+ expect(screen.getByText('timestamp')).toBeInTheDocument();
+
+ const element = document.querySelector(`button > svg[data-testid="${iconName}"]`);
+ expect(element).not.toBeNull();
+ /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+ await userEvent.click(element!);
- const openMenu = screen.getByLabelText('open menu');
- await userEvent.click(openMenu);
- const downloadCSV = screen.getByLabelText('Download CSV');
- await userEvent.click(downloadCSV);
- expect(download).toHaveBeenCalledWith('2000-03-02 00:00:00;foo\r\n', 'kobs-export-logs.csv');
+ // check to be called -> first button -> first column, which is 'log'
+ expect(removeFieldMock).toBeCalledWith('log');
+ });
});
});
diff --git a/app/packages/klogs/src/components/Logs.tsx b/app/packages/klogs/src/components/Logs.tsx
index e8f31199..3e00bf06 100644
--- a/app/packages/klogs/src/components/Logs.tsx
+++ b/app/packages/klogs/src/components/Logs.tsx
@@ -480,9 +480,9 @@ const Document: FunctionComponent<{
/**
* The `Documents` component is used to render the documents in a table. The table will show the timestamp of each log
* line and a preview of the most important fields. If the user select a list of fields these fields will be shown
- * insteand of the preview.
+ * instead of the preview.
*/
-const Documents: FunctionComponent<{
+export const Documents: FunctionComponent<{
addFilter?: (filter: string) => void;
changeOrder?: (orderBy: string) => void;
documents: Record[];
@@ -524,6 +524,16 @@ const Documents: FunctionComponent<{
>
{field}
+ selectField?.(field)}
+ >
+
+
))}
>