refactor: refactor ContainerDetailsLogs to svelte5 (#12601)

Signed-off-by: Philippe Martin <phmartin@redhat.com>
This commit is contained in:
Philippe Martin 2025-05-26 09:41:57 +02:00 committed by GitHub
parent bda548fc9a
commit fd2f392054
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -11,15 +11,23 @@ import TerminalWindow from '../ui/TerminalWindow.svelte';
import ContainerDetailsLogsClear from './ContainerDetailsLogsClear.svelte';
import type { ContainerInfoUI } from './ContainerInfoUI';
export let container: ContainerInfoUI;
interface Props {
container: ContainerInfoUI;
}
const { container }: Props = $props();
// Log
let refContainer: ContainerInfoUI;
// logs has been initialized
let noLogs = true;
let noLogs = $state(true);
// the terminal displaying the logs
let logsTerminal = $state<Terminal>();
// save previous container
let refContainer: ContainerInfoUI;
// need to refresh logs when container is switched or state changes
$: {
$effect(() => {
if (
refContainer &&
(refContainer.id !== container.id || (refContainer.state !== container.state && container.state !== 'EXITED'))
@ -28,10 +36,10 @@ $: {
fetchContainerLogs().catch((err: unknown) => console.error(`Error fetching container logs ${container.id}`, err));
}
refContainer = container;
}
let terminalParentDiv: HTMLDivElement;
});
let logsTerminal: Terminal;
// the div containing the terminal
let terminalParentDiv: HTMLDivElement;
function callback(name: string, data: string): void {
if (name === 'first-message') {
@ -57,6 +65,9 @@ async function fetchContainerLogs(): Promise<void> {
}
function afterTerminalInit(): void {
if (!logsTerminal) {
throw new Error('terminal was not set by TerminalWindow. Should not happen');
}
// mount the svelte5 component to the terminal xterm element
let xtermElement = terminalParentDiv.querySelector('.xterm');
xtermElement ??= terminalParentDiv;