feat: add a button to clear logs in the pod logs viewer

ui/src/app/applications/components/pod-logs-viewer/clear-logs-button.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import {Button} from '../../../shared/components/button';
+
+interface ClearLogsButtonProps {
+    disabled?: boolean;
+    onClear: () => void;
+}
+
+export const ClearLogsButton = ({disabled, onClear}: ClearLogsButtonProps) => <Button title='Clear displayed logs' icon='eraser' onClick={onClear} disabled={disabled} />;

ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.test.tsx

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import {EMPTY, of} from 'rxjs';
+import {LogEntry} from '../../../shared/models';
+import {PodsLogsViewer} from './pod-logs-viewer';
+
+const mockGetContainerLogs = jest.fn();
+
+jest.mock('argo-ui', () => ({
+    DataLoader: ({children}: {children: (data: any) => React.ReactNode}) => children({appDetails: {darkMode: false, wrapLines: false}}),
+    Tooltip: ({children}: {children: React.ReactNode}) => {
+        const React = require('react');
+        return React.createElement(React.Fragment, null, children);
+    }
+}));
+
+jest.mock('react-virtualized/dist/commonjs/AutoSizer', () => ({
+    __esModule: true,
+    default: ({children}: {children: ({width, height}: {width: number; height: number}) => React.ReactNode}) => children({width: 800, height: 400})
+}));
+
+jest.mock('ansi-to-react', () => ({
+    __esModule: true,
+    default: ({children}: {children: React.ReactNode}) => {
+        const React = require('react');
+        return React.createElement(React.Fragment, null, children);
+    }
+}));
+
+jest.mock('../../../shared/services', () => ({
+    services: {
+        applications: {
+            getContainerLogs: (...args: any[]) => mockGetContainerLogs(...args)
+        },
+        viewPreferences: {
+            getPreferences: jest.fn()
+        }
+    }
+}));
+
+jest.mock('../../../shared/components/button', () => ({
+    Button: ({title, onClick, disabled, icon}: {title?: string; onClick?: () => void; disabled?: boolean; icon?: string}) => {
+        const React = require('react');
+        return React.createElement('button', {title, onClick, disabled, 'data-icon': icon});
+    }
+}));
+
+jest.mock('./copy-logs-button', () => ({CopyLogsButton: () => null}));
+jest.mock('./download-logs-button', () => ({DownloadLogsButton: () => null}));
+jest.mock('./container-selector', () => ({ContainerSelector: () => null}));
+jest.mock('./follow-toggle-button', () => ({FollowToggleButton: () => null}));
+jest.mock('./show-previous-logs-toggle-button', () => ({ShowPreviousLogsToggleButton: () => null}));
+jest.mock('./pod-logs-highlight-button', () => ({PodHighlightButton: () => null}));
+jest.mock('./timestamps-toggle-button', () => ({TimestampsToggleButton: () => null}));
+jest.mock('./dark-mode-toggle-button', () => ({DarkModeToggleButton: () => null}));
+jest.mock('./fullscreen-button', () => ({FullscreenButton: () => null}));
+jest.mock('./log-message-filter', () => ({LogMessageFilter: () => null}));
+jest.mock('./since-seconds-selector', () => ({SinceSecondsSelector: () => null}));
+jest.mock('./tail-selector', () => ({TailSelector: () => null}));
+jest.mock('./pod-names-toggle-button', () => ({PodNamesToggleButton: () => null}));
+jest.mock('./auto-scroll-button', () => ({AutoScrollButton: () => null}));
+jest.mock('./wrap-lines-button', () => ({WrapLinesButton: () => null}));
+jest.mock('./match-case-toggle-button', () => ({MatchCaseToggleButton: () => null}));
+
+const logsFixture: LogEntry[] = [
+    {
+        content: 'INFO  Starting application',
+        last: false,
+        podName: 'demo-app-68b8fcf645-pkc5s',
+        timeStamp: new Date().toISOString(),
+        timeStampStr: '2026-04-03T19:00:00.000Z'
+    },
+    {
+        content: 'INFO  Listening on :8080',
+        last: false,
+        podName: 'demo-app-68b8fcf645-pkc5s',
+        timeStamp: new Date().toISOString(),
+        timeStampStr: '2026-04-03T19:00:01.000Z'
+    }
+];
+
+const makeComponent = () => (
+    <PodsLogsViewer
+        applicationName='demo-app'
+        applicationNamespace='argocd'
+        namespace='default'
+        containerName='glady-app'
+        podName='demo-app-68b8fcf645-pkc5s'
+    />
+);
+
+describe('PodsLogsViewer clear logs button', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('keeps the clear button disabled when no log has been loaded', () => {
+        mockGetContainerLogs.mockReturnValue(EMPTY);
+
+        let testRenderer!: renderer.ReactTestRenderer;
+        renderer.act(() => {
+            testRenderer = renderer.create(makeComponent());
+        });
+
+        const clearButton = testRenderer.root.findByProps({title: 'Clear displayed logs'});
+        expect(clearButton.props.disabled).toBe(true);
+    });
+
+    it('clears displayed logs when the clear button is clicked', () => {
+        mockGetContainerLogs.mockReturnValue(of(...logsFixture));
+
+        let testRenderer!: renderer.ReactTestRenderer;
+        renderer.act(() => {
+            testRenderer = renderer.create(makeComponent());
+        });
+
+        const beforeClear = JSON.stringify(testRenderer.toJSON());
+        expect(beforeClear).toContain('INFO  Starting application');
+        expect(beforeClear).toContain('INFO  Listening on :8080');
+
+        const clearButton = testRenderer.root.findByProps({title: 'Clear displayed logs'});
+        expect(clearButton.props.disabled).toBe(false);
+
+        renderer.act(() => {
+            clearButton.props.onClick();
+        });
+
+        const afterClear = JSON.stringify(testRenderer.toJSON());
+        expect(afterClear).not.toContain('INFO  Starting application');
+        expect(afterClear).not.toContain('INFO  Listening on :8080');
+
+        const disabledClearButton = testRenderer.root.findByProps({title: 'Clear displayed logs'});
+        expect(disabledClearButton.props.disabled).toBe(true);
+    });
+});

ui/src/app/applications/components/pod-logs-viewer/pod-logs-viewer.tsx

@@ -10,6 +10,7 @@ import {services, ViewPreferences} from '../../../shared/services';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 
 import './pod-logs-viewer.scss';
+import {ClearLogsButton} from './clear-logs-button';
 import {CopyLogsButton} from './copy-logs-button';
 import {DownloadLogsButton} from './download-logs-button';
 import {ContainerSelector} from './container-selector';
@@ -294,6 +295,7 @@ export const PodsLogsViewer = (props: PodLogsProps) => {
                             </span>
                             <Spacer />
                             <span>
+                                <ClearLogsButton disabled={logs.length === 0} onClear={() => setLogs([])} />
                                 <CopyLogsButton logs={logs} />
                                 <DownloadLogsButton {...props} previous={previous} />
                                 <FullscreenButton